@microsoft/fast-element - npm Package Compare versions

Comparing version 0.17.0 to 0.18.0

CHANGELOG.md

@@ -6,2 +6,19 @@ # Change Log
 
+# [0.18.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-element@0.17.0...@microsoft/fast-element@0.18.0) (2020-09-10)
+
+
+### Bug Fixes
+
+* **fast-element:** better global support for older browsers ([#3864](https://github.com/Microsoft/fast/issues/3864)) ([61e85d8](https://github.com/Microsoft/fast/commit/61e85d85553ea1ea6bf128bc8add434d0e4d98aa))
+* **fast-element:** workaround for adoptedStyleSheets Chromium bug ([#3838](https://github.com/Microsoft/fast/issues/3838)) ([1b6570a](https://github.com/Microsoft/fast/commit/1b6570ae6a00c740320b8f1748676f0bed50b67d))
+
+
+### Features
+
+* **fast-element:** enable custom element to accept a styles array ([#3871](https://github.com/Microsoft/fast/issues/3871)) ([ae611a9](https://github.com/Microsoft/fast/commit/ae611a960af7d2bcab8f30de984582c7a2c09deb))
+
+
+
+
+
 # [0.17.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-element@0.16.0...@microsoft/fast-element@0.17.0) (2020-08-27)
@@ -8,0 +25,0 @@

dist/dts/dom.d.ts

 import { Callable } from "./interfaces";
-declare type TrustedTypesPolicy = {
-    createHTML(html: string): string;
-};
+import { TrustedTypesPolicy } from "./platform";
 /** @internal */
@@ -107,2 +105,1 @@ export declare const _interpolationStart: string;
 }>;
-export {};

dist/dts/fast-definitions.d.ts

@@ -18,5 +18,5 @@ import { ElementViewTemplate } from "./template";
     /**
-     * The styles to associated with the custom element.
+     * The styles to associate with the custom element.
      */
-    readonly styles?: ComposableStyles;
+    readonly styles?: ComposableStyles | ComposableStyles[];
     /**
@@ -70,3 +70,3 @@ * The custom attributes of the custom element.
     /**
-     * The styles to associated with the custom element.
+     * The styles to associate with the custom element.
      */
@@ -73,0 +73,0 @@ readonly styles?: ElementStyles;

dist/dts/index.d.ts

@@ -0,1 +1,2 @@
+export * from "./platform";
 export * from "./template";
@@ -8,3 +9,3 @@ export * from "./fast-element";
 export * from "./template-compiler";
-export { css, ElementStyles, StyleTarget } from "./styles";
+export { css, ElementStyles, ElementStyleFactory, ComposableStyles, StyleTarget, } from "./styles";
 export * from "./view";
@@ -11,0 +12,0 @@ export * from "./observation/observable";

dist/dts/styles.d.ts

@@ -28,2 +28,12 @@ import { Behavior } from "./directives/behavior";
 /**
+ * Represents styles that can be composed into the ShadowDOM of a custom element.
+ * @public
+ */
+export declare type ComposableStyles = string | ElementStyles | CSSStyleSheet;
+/**
+ * Creates an ElementStyles instance for an array of ComposableStyles.
+ * @public
+ */
+export declare type ElementStyleFactory = (styles: ReadonlyArray<ComposableStyles>) => ElementStyles;
+/**
  * Represents styles that can be applied to a custom element.
@@ -56,9 +66,8 @@ * @public
     static find(key: string): ElementStyles | null;
+    /**
+     * Create ElementStyles from ComposableStyles.
+     */
+    static readonly create: ElementStyleFactory;
 }
 /**
- * Represents styles that can be composed into the ShadowDOM of a custom element.
- * @public
- */
-export declare type ComposableStyles = string | ElementStyles | CSSStyleSheet;
-/**
  * https://wicg.github.io/construct-stylesheets/
@@ -65,0 +74,0 @@ * https://developers.google.com/web/updates/2019/02/constructable-stylesheets

dist/esm/dom.js

@@ -0,18 +1,5 @@
+import { $global } from "./platform";
 const updateQueue = [];
-(function () {
-    if (typeof globalThis === "object")
-        return;
-    Object.defineProperty(Object.prototype, "__magic__", {
-        get: function () {
-            return this;
-        },
-        configurable: true,
-    });
-    __magic__.globalThis = __magic__;
-    delete Object.prototype.__magic__;
-})();
-if (globalThis.trustedTypes === void 0) {
-    globalThis.trustedTypes = { createPolicy: (n, r) => r };
-}
-const fastHTMLPolicy = trustedTypes.createPolicy("fast-html", {
+/* eslint-disable */
+const fastHTMLPolicy = $global.trustedTypes.createPolicy("fast-html", {
     createHTML: html => html,
@@ -19,0 +6,0 @@ });

dist/esm/fast-definitions.js

@@ -1,2 +0,2 @@
-import { ElementStyles, css } from "./styles";
+import { ElementStyles } from "./styles";
 import { AttributeDefinition } from "./attributes";
@@ -50,8 +50,9 @@ import { Observable } from "./observation/observable";
         this.styles =
-            nameOrConfig.styles !== void 0 &&
-                !(nameOrConfig.styles instanceof ElementStyles)
-                ? css `
-                      ${nameOrConfig.styles}
-                  `
-                : nameOrConfig.styles;
+            nameOrConfig.styles === void 0
+                ? void 0
+                : Array.isArray(nameOrConfig.styles)
+                    ? ElementStyles.create(nameOrConfig.styles)
+                    : nameOrConfig.styles instanceof ElementStyles
+                        ? nameOrConfig.styles
+                        : ElementStyles.create([nameOrConfig.styles]);
     }
@@ -58,0 +59,0 @@ /**

dist/esm/index.js

@@ -0,1 +1,2 @@
+export * from "./platform";
 export * from "./template";
@@ -8,3 +9,3 @@ export * from "./fast-element";
 export * from "./template-compiler";
-export { css, ElementStyles } from "./styles";
+export { css, ElementStyles, } from "./styles";
 export * from "./view";
@@ -11,0 +12,0 @@ export * from "./observation/observable";

dist/esm/styles.js

@@ -11,2 +11,3 @@ import { DOM } from "./dom";
         this.behaviors = null;
+        /* eslint-enable @typescript-eslint/explicit-function-return-type */
     }
@@ -38,2 +39,13 @@ /**
 }
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/**
+ * Create ElementStyles from ComposableStyles.
+ */
+ElementStyles.create = (() => {
+    if (DOM.supportsAdoptedStyleSheets) {
+        const styleSheetCache = new Map();
+        return (styles) => new AdoptedStyleSheetsStyles(styles, styleSheetCache);
+    }
+    return (styles) => new StyleElementStyles(styles);
+})();
 function reduceStyles(styles) {
@@ -129,11 +141,2 @@ return styles
 }
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-const createStyles = (() => {
-    if (DOM.supportsAdoptedStyleSheets) {
-        const styleSheetCache = new Map();
-        return (styles) => new AdoptedStyleSheetsStyles(styles, styleSheetCache);
-    }
-    return (styles) => new StyleElementStyles(styles);
-})();
-/* eslint-enable @typescript-eslint/explicit-function-return-type */
 /**
@@ -168,3 +171,3 @@ * Transforms a template literal string into styles.
     }
-    return createStyles(styles);
+    return ElementStyles.create(styles);
 }

dist/esm/template-compiler.js

@@ -128,2 +128,4 @@ import { DOM, _interpolationEnd, _interpolationStart } from "./dom";
     const fragment = template.content;
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
+    document.adoptNode(fragment);
     const viewBehaviorFactories = [];
@@ -130,0 +132,0 @@ const directiveCount = directives.length;

dist/fast-element.d.ts

 
 /**
+ * A reference to globalThis, with support
+ * for browsers that don't yet support the spec.
+ * @public
+ */
+export declare const $global: Global;
+
+/**
  * Represents a getter/setter property accessor on an object.
@@ -431,3 +438,3 @@ * @public
  */
-declare type ComposableStyles = string | ElementStyles | CSSStyleSheet;
+export declare type ComposableStyles = string | ElementStyles | CSSStyleSheet;
 
@@ -701,2 +708,8 @@ /**
 /**
+ * Creates an ElementStyles instance for an array of ComposableStyles.
+ * @public
+ */
+export declare type ElementStyleFactory = (styles: ReadonlyArray<ComposableStyles>) => ElementStyles;
+
+/**
  * Represents styles that can be applied to a custom element.
@@ -729,2 +742,6 @@ * @public
     static find(key: string): ElementStyles | null;
+    /**
+     * Create ElementStyles from ComposableStyles.
+     */
+    static readonly create: ElementStyleFactory;
 }
@@ -925,3 +942,3 @@
     /**
-     * The styles to associated with the custom element.
+     * The styles to associate with the custom element.
      */
@@ -957,2 +974,13 @@ readonly styles?: ElementStyles;
 /**
+ * The platform global type.
+ * @public
+ */
+export declare type Global = typeof globalThis & {
+    /**
+     * Enables working with trusted types.
+     */
+    trustedTypes: TrustedTypes;
+};
+
+/**
  * Transforms a template literal string into a renderable ViewTemplate.
@@ -1236,5 +1264,5 @@ * @param strings - The string fragments that are interpolated with the values.
     /**
-     * The styles to associated with the custom element.
+     * The styles to associate with the custom element.
      */
-    readonly styles?: ComposableStyles;
+    readonly styles?: ComposableStyles | ComposableStyles[];
     /**
@@ -1618,3 +1646,24 @@ * The custom attributes of the custom element.
 
-declare type TrustedTypesPolicy = {
+/**
+ * Enables working with trusted types.
+ * @public
+ */
+export declare type TrustedTypes = {
+    /**
+     * Creates a trusted types policy.
+     * @param name - The policy name.
+     * @param rules - The policy rules implementation.
+     */
+    createPolicy(name: string, rules: TrustedTypesPolicy): TrustedTypesPolicy;
+};
+
+/**
+ * A policy for use with the standard trustedTypes platform API.
+ * @public
+ */
+export declare type TrustedTypesPolicy = {
+    /**
+     * Creates trusted HTML.
+     * @param html - The HTML to clear as trustworthy.
+     */
     createHTML(html: string): string;
@@ -1621,0 +1670,0 @@ };

dist/fast-element.min.js

@@ -1,1 +0,1 @@
-const t=[];"object"!=typeof globalThis&&(Object.defineProperty(Object.prototype,"__magic__",{get:function(){return this},configurable:!0}),__magic__.globalThis=__magic__,delete Object.prototype.__magic__),void 0===globalThis.trustedTypes&&(globalThis.trustedTypes={createPolicy:(t,e)=>e});const e=trustedTypes.createPolicy("fast-html",{createHTML:t=>t});let s=e;function i(){let e=0;for(;e<t.length;){if(t[e].call(),e++,e>1024){for(let s=0,i=t.length-e;s<i;s++)t[s]=t[s+e];t.length-=e,e=0}}t.length=0}const n="fast-"+Math.random().toString(36).substring(2,8),o=n+"{",r="}"+n,l=Object.freeze({supportsAdoptedStyleSheets:Array.isArray(document.adoptedStyleSheets)&&"replace"in CSSStyleSheet.prototype,setHTMLPolicy(t){if(s!==e)throw new Error("The HTML policy can only be set once.");s=t},createHTML:t=>s.createHTML(t),isMarker:t=>t&&8===t.nodeType&&t.data.startsWith(n),extractDirectiveIndexFromMarker:t=>parseInt(t.data.replace(n+":","")),createInterpolationPlaceholder:t=>`${o}${t}${r}`,createCustomAttributePlaceholder(t,e){return`${t}="${this.createInterpolationPlaceholder(e)}"`},createBlockPlaceholder:t=>`\x3c!--${n}:${t}--\x3e`,queueUpdate(e){t.length<1&&window.requestAnimationFrame(i),t.push(e)},nextUpdate:()=>new Promise(t=>{l.queueUpdate(t)}),setAttribute(t,e,s){null==s?t.removeAttribute(e):t.setAttribute(e,s)},setBooleanAttribute(t,e,s){s?t.setAttribute(e,""):t.removeAttribute(e)},removeChildNodes(t){for(let e=t.firstChild;null!==e;e=t.firstChild)t.removeChild(e)},createTemplateWalker:t=>document.createTreeWalker(t,133,null,!1)});function h(t){const e=this.spillover;-1===e.indexOf(t)&&e.push(t)}function a(t){const e=this.spillover,s=e.indexOf(t);-1!==s&&e.splice(s,1)}function c(t){const e=this.spillover,s=this.source;for(let i=0,n=e.length;i<n;++i)e[i].handleChange(s,t)}function d(t){return-1!==this.spillover.indexOf(t)}class u{constructor(t,e){this.sub1=void 0,this.sub2=void 0,this.spillover=void 0,this.source=t,this.sub1=e}has(t){return this.sub1===t||this.sub2===t}subscribe(t){this.has(t)||(void 0!==this.sub1?void 0!==this.sub2?(this.spillover=[this.sub1,this.sub2,t],this.subscribe=h,this.unsubscribe=a,this.notify=c,this.has=d,this.sub1=void 0,this.sub2=void 0):this.sub2=t:this.sub1=t)}unsubscribe(t){this.sub1===t?this.sub1=void 0:this.sub2===t&&(this.sub2=void 0)}notify(t){const e=this.sub1,s=this.sub2,i=this.source;void 0!==e&&e.handleChange(i,t),void 0!==s&&s.handleChange(i,t)}}class f{constructor(t){this.subscribers={},this.source=t}notify(t){const e=this.subscribers[t];void 0!==e&&e.notify(t)}subscribe(t,e){let s=this.subscribers[e];void 0===s&&(this.subscribers[e]=s=new u(this.source)),s.subscribe(t)}unsubscribe(t,e){const s=this.subscribers[e];void 0!==s&&s.unsubscribe(t)}}const g=/(\:|\&\&|\|\||if)/,p=new WeakMap,b=new WeakMap;let v=void 0,m=t=>{throw new Error("Must call enableArrayObservation before observing arrays.")};class y{constructor(t){this.name=t,this.field="_"+t,this.callback=t+"Changed"}getValue(t){return void 0!==v&&v.watch(t,this.name),t[this.field]}setValue(t,e){const s=this.field,i=t[s];if(i!==e){t[s]=e;const n=t[this.callback];"function"==typeof n&&n.call(t,i,e),x(t).notify(this.name)}}}const C=Object.freeze({setArrayObserverFactory(t){m=t},getNotifier(t){let e=t.$fastController||p.get(t);return void 0===e&&(Array.isArray(t)?e=m(t):p.set(t,e=new f(t))),e},track(t,e){void 0!==v&&v.watch(t,e)},trackVolatile(){void 0!==v&&(v.needsRefresh=!0)},notify(t,e){x(t).notify(e)},defineProperty(t,e){"string"==typeof e&&(e=new y(e)),this.getAccessors(t).push(e),Reflect.defineProperty(t,e.name,{enumerable:!0,get:function(){return e.getValue(this)},set:function(t){e.setValue(this,t)}})},getAccessors(t){let e=b.get(t);if(void 0===e){let s=Reflect.getPrototypeOf(t);for(;void 0===e&&null!==s;)e=b.get(s),s=Reflect.getPrototypeOf(s);e=void 0===e?[]:e.slice(0),b.set(t,e)}return e},binding(t,e,s=this.isVolatileBinding(t)){return new V(t,e,s)},isVolatileBinding:t=>g.test(t.toString())}),x=C.getNotifier,w=C.trackVolatile,B=l.queueUpdate;function O(t,e){C.defineProperty(t,e)}function S(t,e,s){return Object.assign({},s,{get:function(){return w(),s.get.apply(this)}})}let T=null;function N(t){T=t}class A{constructor(){this.index=0,this.length=0,this.parent=null}get event(){return T}get isEven(){return this.index%2==0}get isOdd(){return this.index%2!=0}get isFirst(){return 0===this.index}get isInMiddle(){return!this.isFirst&&!this.isLast}get isLast(){return this.index===this.length-1}}C.defineProperty(A.prototype,"index"),C.defineProperty(A.prototype,"length");const k=Object.seal(new A);class V extends u{constructor(t,e,s=!1){super(t,e),this.binding=t,this.isVolatileBinding=s,this.needsRefresh=!0,this.needsQueue=!0,this.first=this,this.last=null,this.propertySource=void 0,this.propertyName=void 0,this.notifier=void 0,this.next=void 0}observe(t,e){this.needsRefresh&&null!==this.last&&this.disconnect();const s=v;v=this.needsRefresh?this:void 0,this.needsRefresh=this.isVolatileBinding;const i=this.binding(t,e);return v=s,i}disconnect(){if(null!==this.last){let t=this.first;for(;void 0!==t;)t.notifier.unsubscribe(this,t.propertyName),t=t.next;this.last=null,this.needsRefresh=!0}}watch(t,e){const s=this.last,i=x(t),n=null===s?this.first:{};if(n.propertySource=t,n.propertyName=e,n.notifier=i,i.subscribe(this,e),null!==s){if(!this.needsRefresh){v=void 0;const e=s.propertySource[s.propertyName];v=this,t===e&&(this.needsRefresh=!0)}s.next=n}this.last=n}handleChange(){this.needsQueue&&(this.needsQueue=!1,B(this))}call(){null!==this.last&&(this.needsQueue=!0,this.notify(this))}}class _{constructor(){this.targetIndex=0}}class I extends _{constructor(t,e,s){super(),this.name=t,this.behavior=e,this.options=s}createPlaceholder(t){return l.createCustomAttributePlaceholder(this.name,t)}createBehavior(t){return new this.behavior(t,this.options)}}function $(t,e){this.source=t,this.context=e,null===this.bindingObserver&&(this.bindingObserver=C.binding(this.binding,this,this.isBindingVolatile)),this.updateTarget(this.bindingObserver.observe(t,e))}function M(t,e){this.source=t,this.context=e,this.target.addEventListener(this.targetName,this)}function F(){this.bindingObserver.disconnect(),this.source=null,this.context=null}function L(){this.bindingObserver.disconnect(),this.source=null,this.context=null;const t=this.target.$fastView;void 0!==t&&t.isComposed&&(t.unbind(),t.needsBindOnly=!0)}function P(){this.target.removeEventListener(this.targetName,this),this.source=null,this.context=null}function E(t){l.setAttribute(this.target,this.targetName,t)}function j(t){l.setBooleanAttribute(this.target,this.targetName,t)}function R(t){if(null==t&&(t=""),t.create){this.target.textContent="";let e=this.target.$fastView;void 0===e?e=t.create():this.target.$fastTemplate!==t&&(e.isComposed&&(e.remove(),e.unbind()),e=t.create()),e.isComposed?e.needsBindOnly&&(e.needsBindOnly=!1,e.bind(this.source,this.context)):(e.isComposed=!0,e.bind(this.source,this.context),e.insertBefore(this.target),this.target.$fastView=e,this.target.$fastTemplate=t)}else{const e=this.target.$fastView;void 0!==e&&e.isComposed&&(e.isComposed=!1,e.remove(),e.needsBindOnly?e.needsBindOnly=!1:e.unbind()),this.target.textContent=t}}function D(t){this.target[this.targetName]=t}function H(t){const e=this.classVersions||Object.create(null),s=this.target;let i=this.version||0;if(null!=t&&t.length){const n=t.split(/\s+/);for(let t=0,o=n.length;t<o;++t){const o=n[t];""!==o&&(e[o]=i,s.classList.add(o))}}if(this.classVersions=e,this.version=i+1,0!==i){i-=1;for(const t in e)e[t]===i&&s.classList.remove(t)}}class z extends _{constructor(t){super(),this.binding=t,this.bind=$,this.unbind=F,this.updateTarget=E,this.createPlaceholder=l.createInterpolationPlaceholder,this.isBindingVolatile=C.isVolatileBinding(this.bind)}get targetName(){return this.originalTargetName}set targetName(t){if(this.originalTargetName=t,void 0!==t)switch(t[0]){case":":if(this.cleanedTargetName=t.substr(1),this.updateTarget=D,"innerHTML"===this.cleanedTargetName){const t=this.binding;this.binding=(e,s)=>l.createHTML(t(e,s))}break;case"?":this.cleanedTargetName=t.substr(1),this.updateTarget=j;break;case"@":this.cleanedTargetName=t.substr(1),this.bind=M,this.unbind=P;break;default:this.cleanedTargetName=t,"class"===t&&(this.updateTarget=H)}}targetAtContent(){this.updateTarget=R,this.unbind=L}createBehavior(t){return new Q(t,this.binding,this.isBindingVolatile,this.bind,this.unbind,this.updateTarget,this.cleanedTargetName)}}class Q{constructor(t,e,s,i,n,o,r){this.source=null,this.context=null,this.bindingObserver=null,this.target=t,this.binding=e,this.isBindingVolatile=s,this.bind=i,this.unbind=n,this.updateTarget=o,this.targetName=r}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleEvent(t){N(t);const e=this.binding(this.source,this.context);N(null),!0!==e&&t.preventDefault()}}const U={locatedDirectives:0,targetIndex:-1};function q(t){if(1===t.length)return U.locatedDirectives++,t[0];let e;const s=t.length,i=t.map(t=>"string"==typeof t?()=>t:(e=t.targetName||e,U.locatedDirectives++,t.binding)),n=new z((t,e)=>{let n="";for(let o=0;o<s;++o)n+=i[o](t,e);return n});return n.targetName=e,n}const W=r.length;function K(t,e){const s=t.split(o);if(1===s.length)return null;const i=[];for(let t=0,n=s.length;t<n;++t){const n=s[t],o=n.indexOf(r);let l;if(-1===o)l=n;else{const t=parseInt(n.substring(0,o));i.push(e[t]),l=n.substring(o+W)}""!==l&&i.push(l)}return i}function G(t,e,s,i=!1){const n=t.attributes;for(let o=0,r=n.length;o<r;++o){const l=n[o],h=l.value,a=K(h,e);let c=null;null===a?i&&(c=new z(()=>h),c.targetName=l.name):c=q(a),null!==c&&(t.removeAttributeNode(l),o--,r--,c.targetIndex=U.targetIndex,s.push(c))}}function J(t,e,s,i){const n=K(t.textContent,e);if(null!==n){let e=t;for(let l=0,h=n.length;l<h;++l){const h=n[l],a=0===l?t:e.parentNode.insertBefore(document.createTextNode(""),e.nextSibling);"string"==typeof h?a.textContent=h:(a.textContent=" ",r=s,(o=h).targetAtContent(),o.targetIndex=U.targetIndex,r.push(o),U.locatedDirectives++),e=a,U.targetIndex++,a!==t&&i.nextNode()}U.targetIndex--}var o,r}function X(t,e){const s=[];U.locatedDirectives=0,G(t,e,s,!0);const i=t.content,n=[],o=e.length,r=l.createTemplateWalker(i);for(U.targetIndex=-1;U.locatedDirectives<o;){const t=r.nextNode();if(null===t)break;switch(U.targetIndex++,t.nodeType){case 1:G(t,e,n);break;case 3:J(t,e,n,r);break;case 8:if(l.isMarker(t)){const s=e[l.extractDirectiveIndexFromMarker(t)];s.targetIndex=U.targetIndex,U.locatedDirectives++,n.push(s)}}}let h=0;return l.isMarker(i.firstChild)&&(i.insertBefore(document.createComment(""),i.firstChild),h=-1),{fragment:i,viewBehaviorFactories:n,hostBehaviorFactories:s,targetOffset:h}}const Y=document.createRange();class Z{constructor(t,e){this.fragment=t,this.behaviors=e,this.source=null,this.context=null,this.firstChild=t.firstChild,this.lastChild=t.lastChild}appendTo(t){t.appendChild(this.fragment)}insertBefore(t){if(this.fragment.hasChildNodes())t.parentNode.insertBefore(this.fragment,t);else{const e=t.parentNode,s=this.lastChild;let i,n=this.firstChild;for(;n!==s;)i=n.nextSibling,e.insertBefore(n,t),n=i;e.insertBefore(s,t)}}remove(){const t=this.fragment,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.appendChild(i),i=s;t.appendChild(e)}dispose(){const t=this.firstChild.parentNode,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.removeChild(i),i=s;t.removeChild(e);const n=this.behaviors,o=this.source;for(let t=0,e=n.length;t<e;++t)n[t].unbind(o)}bind(t,e){const s=this.behaviors;if(this.source!==t)if(null!==this.source){const i=this.source;this.source=t,this.context=e;for(let n=0,o=s.length;n<o;++n){const o=s[n];o.unbind(i),o.bind(t,e)}}else{this.source=t,this.context=e;for(let i=0,n=s.length;i<n;++i)s[i].bind(t,e)}}unbind(){if(null===this.source)return;const t=this.behaviors,e=this.source;for(let s=0,i=t.length;s<i;++s)t[s].unbind(e);this.source=null}static disposeContiguousBatch(t){if(0!==t.length){Y.setStart(t[0].firstChild,0),Y.setEnd(t[t.length-1].lastChild.nextSibling,0),Y.deleteContents();for(let e=0,s=t.length;e<s;++e){const s=t[e],i=s.behaviors,n=s.source;for(let t=0,e=i.length;t<e;++t)i[t].unbind(n)}}}}class tt{constructor(t,e){this.behaviorCount=0,this.hasHostBehaviors=!1,this.fragment=null,this.targetOffset=0,this.viewBehaviorFactories=null,this.hostBehaviorFactories=null,this.html=t,this.directives=e}create(t){if(null===this.fragment){let t;const e=this.html;if("string"==typeof e){t=document.createElement("template"),t.innerHTML=l.createHTML(e);const s=t.content.firstElementChild;null!==s&&"TEMPLATE"===s.tagName&&(t=s)}else t=e;const s=X(t,this.directives);this.fragment=s.fragment,this.viewBehaviorFactories=s.viewBehaviorFactories,this.hostBehaviorFactories=s.hostBehaviorFactories,this.targetOffset=s.targetOffset,this.behaviorCount=this.viewBehaviorFactories.length+this.hostBehaviorFactories.length,this.hasHostBehaviors=this.hostBehaviorFactories.length>0}const e=this.fragment.cloneNode(!0),s=this.viewBehaviorFactories,i=new Array(this.behaviorCount),n=l.createTemplateWalker(e);let o=0,r=this.targetOffset,h=n.nextNode();for(let t=s.length;o<t;++o){const t=s[o],e=t.targetIndex;for(;null!==h;){if(r===e){i[o]=t.createBehavior(h);break}h=n.nextNode(),r++}}if(this.hasHostBehaviors){const e=this.hostBehaviorFactories;for(let s=0,n=e.length;s<n;++s,++o)i[o]=e[s].createBehavior(t)}return new Z(e,i)}render(t,e,s){"string"==typeof e&&(e=document.getElementById(e)),void 0===s&&(s=e);const i=this.create(s);return i.bind(t,k),i.appendTo(e),i}}const et=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function st(t,...e){const s=[];let i="";for(let n=0,o=t.length-1;n<o;++n){const o=t[n];let r=e[n];if(i+=o,r instanceof tt){const t=r;r=()=>t}if("function"==typeof r){r=new z(r);const t=et.exec(o);null!==t&&(r.targetName=t[2])}r instanceof _?(i+=r.createPlaceholder(s.length),s.push(r)):i+=r}return i+=t[t.length-1],new tt(i,s)}const it=new Map;class nt{constructor(){this.behaviors=null}withBehaviors(...t){return this.behaviors=null===this.behaviors?t:this.behaviors.concat(t),this}withKey(t){return it.set(t,this),this}static find(t){return it.get(t)||null}}function ot(t){return t.map(t=>t instanceof nt?ot(t.styles):[t]).reduce((t,e)=>t.concat(e),[])}function rt(t){return t.map(t=>t instanceof nt?t.behaviors:null).reduce((t,e)=>null===e?t:(null===t&&(t=[]),t.concat(e)),null)}class lt extends nt{constructor(t,e){super(),this.styles=t,this.behaviors=null,this.behaviors=rt(t),this.styleSheets=ot(t).map(t=>{if(t instanceof CSSStyleSheet)return t;let s=e.get(t);return void 0===s&&(s=new CSSStyleSheet,s.replaceSync(t),e.set(t,s)),s})}addStylesTo(t){t.adoptedStyleSheets=[...t.adoptedStyleSheets,...this.styleSheets]}removeStylesFrom(t){const e=this.styleSheets;t.adoptedStyleSheets=t.adoptedStyleSheets.filter(t=>-1===e.indexOf(t))}}let ht=0;class at extends nt{constructor(t){super(),this.styles=t,this.behaviors=null,this.behaviors=rt(t),this.styleSheets=ot(t),this.styleClass="fast-style-class-"+ ++ht}addStylesTo(t){const e=this.styleSheets,s=this.styleClass;t===document&&(t=document.body);for(let i=e.length-1;i>-1;--i){const n=document.createElement("style");n.innerHTML=e[i],n.className=s,t.prepend(n)}}removeStylesFrom(t){t===document&&(t=document.body);const e=t.querySelectorAll("."+this.styleClass);for(let s=0,i=e.length;s<i;++s)t.removeChild(e[s])}}const ct=(()=>{if(l.supportsAdoptedStyleSheets){const t=new Map;return e=>new lt(e,t)}return t=>new at(t)})();function dt(t,...e){const s=[];let i="";for(let n=0,o=t.length-1;n<o;++n){i+=t[n];const o=e[n];o instanceof nt||o instanceof CSSStyleSheet?(""!==i.trim()&&(s.push(i),i=""),s.push(o)):i+=o}return i+=t[t.length-1],""!==i.trim()&&s.push(i),ct(s)}const ut={toView:t=>t?"true":"false",fromView:t=>null!=t&&"false"!==t&&!1!==t&&0!==t},ft={toView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e.toString()},fromView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e}};class gt{constructor(t,e,s=e.toLowerCase(),i="reflect",n){this.guards=new Set,this.Owner=t,this.name=e,this.attribute=s,this.mode=i,this.converter=n,this.fieldName="_"+e,this.callbackName=e+"Changed",this.hasCallback=this.callbackName in t.prototype,"boolean"===i&&void 0===n&&(this.converter=ut)}setValue(t,e){const s=t[this.fieldName],i=this.converter;void 0!==i&&(e=i.fromView(e)),s!==e&&(t[this.fieldName]=e,this.tryReflectToAttribute(t),this.hasCallback&&t[this.callbackName](s,e),t.$fastController.notify(this.name))}getValue(t){return C.track(t,this.name),t[this.fieldName]}onAttributeChangedCallback(t,e){this.guards.has(t)||(this.guards.add(t),this.setValue(t,e),this.guards.delete(t))}tryReflectToAttribute(t){const e=this.mode,s=this.guards;s.has(t)||"fromView"===e||l.queueUpdate(()=>{s.add(t);const i=t[this.fieldName];switch(e){case"reflect":const e=this.converter;l.setAttribute(t,this.attribute,void 0!==e?e.toView(i):i);break;case"boolean":l.setBooleanAttribute(t,this.attribute,i)}s.delete(t)})}static collect(t,...e){const s=[];e.push(t.attributes);for(let i=0,n=e.length;i<n;++i){const n=e[i];if(void 0!==n)for(let e=0,i=n.length;e<i;++e){const i=n[e];"string"==typeof i?s.push(new gt(t,i)):s.push(new gt(t,i.property,i.attribute,i.mode,i.converter))}}return s}}function pt(t,e){let s;function i(t,e){arguments.length>1&&(s.property=e);const i=t.constructor.attributes||(t.constructor.attributes=[]);i.push(s)}return arguments.length>1?(s={},void i(t,e)):(s=void 0===t?{}:t,i)}const bt={mode:"open"},vt={},mt=new Map;class yt{constructor(t,e=t.definition){"string"==typeof e&&(e={name:e}),this.type=t,this.name=e.name,this.template=e.template;const s=gt.collect(t,e.attributes),i=new Array(s.length),n={},o={};for(let t=0,e=s.length;t<e;++t){const e=s[t];i[t]=e.attribute,n[e.name]=e,o[e.attribute]=e}this.attributes=s,this.observedAttributes=i,this.propertyLookup=n,this.attributeLookup=o,this.shadowOptions=void 0===e.shadowOptions?bt:null===e.shadowOptions?void 0:Object.assign(Object.assign({},bt),e.shadowOptions),this.elementOptions=void 0===e.elementOptions?vt:Object.assign(Object.assign({},vt),e.elementOptions),this.styles=void 0===e.styles||e.styles instanceof nt?e.styles:dt` ${e.styles} `}define(t=customElements){const e=this.type;if(!this.isDefined){const t=this.attributes,s=e.prototype;for(let e=0,i=t.length;e<i;++e)C.defineProperty(s,t[e]);Reflect.defineProperty(e,"observedAttributes",{value:this.observedAttributes,enumerable:!0}),mt.set(e,this),this.isDefined=!0}return t.get(this.name)||t.define(this.name,e,this.elementOptions),this}static forType(t){return mt.get(t)}}const Ct=new WeakMap,xt={bubbles:!0,composed:!0};function wt(t){return t.shadowRoot||Ct.get(t)||null}class Bt extends f{constructor(t,e){super(t),this.boundObservables=null,this.behaviors=null,this.needsInitialization=!0,this._template=null,this._styles=null,this.view=null,this.isConnected=!1,this.element=t,this.definition=e;const s=e.shadowOptions;if(void 0!==s){const e=t.attachShadow(s);"closed"===s.mode&&Ct.set(t,e)}const i=C.getAccessors(t);if(i.length>0){const e=this.boundObservables=Object.create(null);for(let s=0,n=i.length;s<n;++s){const n=i[s].name,o=t[n];void 0!==o&&(delete t[n],e[n]=o)}}}get template(){return this._template}set template(t){this._template!==t&&(this._template=t,this.needsInitialization||this.renderTemplate(t))}get styles(){return this._styles}set styles(t){this._styles!==t&&(null!==this._styles&&this.removeStyles(this._styles),this._styles=t,this.needsInitialization||null===t||this.addStyles(t))}addStyles(t){const e=t.behaviors,s=wt(this.element)||this.element.getRootNode();t.addStylesTo(s),null!==e&&this.addBehaviors(e)}removeStyles(t){const e=t.behaviors,s=wt(this.element)||this.element.getRootNode();t.removeStylesFrom(s),null!==e&&this.removeBehaviors(e)}addBehaviors(t){const e=this.behaviors||(this.behaviors=[]),s=t.length;for(let i=0;i<s;++i)e.push(t[i]);if(this.isConnected){const e=this.element;for(let i=0;i<s;++i)t[i].bind(e,k)}}removeBehaviors(t){const e=this.behaviors;if(null===e)return;const s=t.length;for(let i=0;i<s;++i){const s=e.indexOf(t[i]);-1!==s&&e.splice(s,1)}if(this.isConnected){const e=this.element;for(let i=0;i<s;++i)t[i].unbind(e)}}onConnectedCallback(){if(this.isConnected)return;const t=this.element;this.needsInitialization?this.finishInitialization():null!==this.view&&this.view.bind(t,k);const e=this.behaviors;if(null!==e)for(let s=0,i=e.length;s<i;++s)e[s].bind(t,k);this.isConnected=!0}onDisconnectedCallback(){if(!1===this.isConnected)return;this.isConnected=!1;const t=this.view;null!==t&&t.unbind();const e=this.behaviors;if(null!==e){const t=this.element;for(let s=0,i=e.length;s<i;++s)e[s].unbind(t)}}onAttributeChangedCallback(t,e,s){const i=this.definition.attributeLookup[t];void 0!==i&&i.onAttributeChangedCallback(this.element,s)}emit(t,e,s){return!!this.isConnected&&this.element.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign({detail:e},xt),s)))}finishInitialization(){const t=this.element,e=this.boundObservables;if(null!==e){const s=Object.keys(e);for(let i=0,n=s.length;i<n;++i){const n=s[i];t[n]=e[n]}this.boundObservables=null}const s=this.definition;null===this._template&&(this.element.resolveTemplate?this._template=this.element.resolveTemplate():s.template&&(this._template=s.template||null)),null!==this._template&&this.renderTemplate(this._template),null===this._styles&&(this.element.resolveStyles?this._styles=this.element.resolveStyles():s.styles&&(this._styles=s.styles||null)),null!==this._styles&&this.addStyles(this._styles),this.needsInitialization=!1}renderTemplate(t){const e=this.element,s=wt(e)||e;null!==this.view?(this.view.dispose(),this.view=null):this.needsInitialization||l.removeChildNodes(s),t&&(this.view=t.render(e,s,e))}static forCustomElement(t){const e=t.$fastController;if(void 0!==e)return e;const s=yt.forType(t.constructor);if(void 0===s)throw new Error("Missing FASTElement definition.");return t.$fastController=new Bt(t,s)}}function Ot(t){return class extends t{constructor(){super(),Bt.forCustomElement(this)}$emit(t,e,s){return this.$fastController.emit(t,e,s)}connectedCallback(){this.$fastController.onConnectedCallback()}disconnectedCallback(){this.$fastController.onDisconnectedCallback()}attributeChangedCallback(t,e,s){this.$fastController.onAttributeChangedCallback(t,e,s)}}}const St=Object.assign(Ot(HTMLElement),{from:t=>Ot(t),define:(t,e)=>new yt(t,e).define().type});function Tt(t){return function(e){new yt(e,t).define()}}const Nt=Object.freeze([]);class At{constructor(t,e){this.target=t,this.propertyName=e}bind(t){t[this.propertyName]=this.target}unbind(){}}function kt(t){return new I("fast-ref",At,t)}function Vt(t,e){const s="function"==typeof e?e:()=>e;return(e,i)=>t(e,i)?s(e,i):null}function _t(t,e,s){return{index:t,removed:e,addedCount:s}}function It(t,e,s,i,n,o){let r=0,l=0;const h=Math.min(s-e,o-n);if(0===e&&0===n&&(r=function(t,e,s){for(let i=0;i<s;++i)if(t[i]!==e[i])return i;return s}(t,i,h)),s===t.length&&o===i.length&&(l=function(t,e,s){let i=t.length,n=e.length,o=0;for(;o<s&&t[--i]===e[--n];)o++;return o}(t,i,h-r)),n+=r,o-=l,(s-=l)-(e+=r)==0&&o-n==0)return Nt;if(e===s){const t=_t(e,[],0);for(;n<o;)t.removed.push(i[n++]);return[t]}if(n===o)return[_t(e,[],s-e)];const a=function(t){let e=t.length-1,s=t[0].length-1,i=t[e][s];const n=[];for(;e>0||s>0;){if(0===e){n.push(2),s--;continue}if(0===s){n.push(3),e--;continue}const o=t[e-1][s-1],r=t[e-1][s],l=t[e][s-1];let h;h=r<l?r<o?r:o:l<o?l:o,h===o?(o===i?n.push(0):(n.push(1),i=o),e--,s--):h===r?(n.push(3),e--,i=r):(n.push(2),s--,i=l)}return n.reverse(),n}(function(t,e,s,i,n,o){const r=o-n+1,l=s-e+1,h=new Array(r);let a,c;for(let t=0;t<r;++t)h[t]=new Array(l),h[t][0]=t;for(let t=0;t<l;++t)h[0][t]=t;for(let s=1;s<r;++s)for(let o=1;o<l;++o)t[e+o-1]===i[n+s-1]?h[s][o]=h[s-1][o-1]:(a=h[s-1][o]+1,c=h[s][o-1]+1,h[s][o]=a<c?a:c);return h}(t,e,s,i,n,o)),c=[];let d=void 0,u=e,f=n;for(let t=0;t<a.length;++t)switch(a[t]){case 0:void 0!==d&&(c.push(d),d=void 0),u++,f++;break;case 1:void 0===d&&(d=_t(u,[],0)),d.addedCount++,u++,d.removed.push(i[f]),f++;break;case 2:void 0===d&&(d=_t(u,[],0)),d.addedCount++,u++;break;case 3:void 0===d&&(d=_t(u,[],0)),d.removed.push(i[f]),f++}return void 0!==d&&c.push(d),c}const $t=Array.prototype.push;function Mt(t,e,s,i){const n=_t(e,s,i);let o=!1,r=0;for(let e=0,s=t.length;e<s;e++){const s=t[e];if(s.index+=r,o)continue;const i=(l=n.index,h=n.index+n.removed.length,a=s.index,c=s.index+s.addedCount,h<a||c<l?-1:h===a||c===l?0:l<a?h<c?h-a:c-a:c<h?c-l:h-l);if(i>=0){t.splice(e,1),e--,r-=s.addedCount-s.removed.length,n.addedCount+=s.addedCount-i;const l=n.removed.length+s.removed.length-i;if(n.addedCount||l){let t=s.removed;if(n.index<s.index){const e=n.removed.slice(0,s.index-n.index);$t.apply(e,t),t=e}if(n.index+n.removed.length>s.index+s.addedCount){const e=n.removed.slice(s.index+s.addedCount-n.index);$t.apply(t,e)}n.removed=t,s.index<n.index&&(n.index=s.index)}else o=!0}else if(n.index<s.index){o=!0,t.splice(e,0,n),e++;const i=n.addedCount-n.removed.length;s.index+=i,r+=i}}var l,h,a,c;o||t.push(n)}function Ft(t,e){let s=[];const i=function(t){const e=[];for(let s=0,i=t.length;s<i;s++){const i=t[s];Mt(e,i.index,i.removed,i.addedCount)}return e}(e);for(let e=0,n=i.length;e<n;++e){const n=i[e];1!==n.addedCount||1!==n.removed.length?s=s.concat(It(t,n.index,n.index+n.addedCount,n.removed,0,n.removed.length)):n.removed[0]!==t[n.index]&&s.push(n)}return s}let Lt=!1;function Pt(t,e){let s=t.index;const i=e.length;return s>i?s=i-t.addedCount:s<0&&(s=i+t.removed.length+s-t.addedCount),s<0&&(s=0),t.index=s,t}class Et extends u{constructor(t){super(t),this.oldCollection=void 0,this.splices=void 0,this.needsQueue=!0,this.call=this.flush,t.$fastController=this}addSplice(t){void 0===this.splices?this.splices=[t]:this.splices.push(t),this.needsQueue&&(this.needsQueue=!1,l.queueUpdate(this))}reset(t){this.oldCollection=t,this.needsQueue&&(this.needsQueue=!1,l.queueUpdate(this))}flush(){const t=this.splices,e=this.oldCollection;if(void 0===t&&void 0===e)return;this.needsQueue=!0,this.splices=void 0,this.oldCollection=void 0;const s=void 0===e?Ft(this.source,t):It(this.source,0,this.source.length,e,0,e.length);this.notify(s)}}const jt=Object.freeze({positioning:!1});function Rt(t,e,s,i){t.bind(e[s],i)}function Dt(t,e,s,i){const n=Object.create(i);n.index=s,n.length=e.length,t.bind(e[s],n)}class Ht{constructor(t,e,s,i,n,o){this.location=t,this.itemsBinding=e,this.templateBinding=i,this.options=o,this.source=null,this.views=[],this.items=null,this.itemsObserver=null,this.originalContext=void 0,this.childContext=void 0,this.bindView=Rt,this.itemsBindingObserver=C.binding(e,this,s),this.templateBindingObserver=C.binding(i,this,n),o.positioning&&(this.bindView=Dt)}bind(t,e){this.source=t,this.originalContext=e,this.childContext=Object.create(e),this.childContext.parent=t,this.items=this.itemsBindingObserver.observe(t,this.originalContext),this.template=this.templateBindingObserver.observe(t,this.originalContext),this.observeItems(),this.refreshAllViews()}unbind(){this.source=null,this.items=null,null!==this.itemsObserver&&this.itemsObserver.unsubscribe(this),this.unbindAllViews(),this.itemsBindingObserver.disconnect(),this.templateBindingObserver.disconnect()}handleChange(t,e){t===this.itemsBinding?(this.items=this.itemsBindingObserver.observe(this.source,this.originalContext),this.observeItems(),this.refreshAllViews()):t===this.templateBinding?(this.template=this.templateBindingObserver.observe(this.source,this.originalContext),this.refreshAllViews(!0)):this.updateViews(e)}observeItems(){this.items||(this.items=[]);const t=this.itemsObserver,e=this.itemsObserver=C.getNotifier(this.items);t!==e&&(null!==t&&t.unsubscribe(this),e.subscribe(this))}updateViews(t){const e=this.childContext,s=this.views,i=[],n=this.bindView;let o=0;for(let e=0,n=t.length;e<n;++e){const n=t[e],r=n.removed;i.push(...s.splice(n.index+o,r.length)),o-=n.addedCount}const r=this.items,l=this.template;for(let o=0,h=t.length;o<h;++o){const h=t[o];let a=h.index;const c=a+h.addedCount;for(;a<c;++a){const t=s[a],o=t?t.firstChild:this.location,h=i.length>0?i.shift():l.create();s.splice(a,0,h),n(h,r,a,e),h.insertBefore(o)}}for(let t=0,e=i.length;t<e;++t)i[t].dispose();if(this.options.positioning)for(let t=0,e=s.length;t<e;++t){const i=s[t].context;i.length=e,i.index=t}}refreshAllViews(t=!1){const e=this.items,s=this.childContext,i=this.template,n=this.location,o=this.bindView;let r=e.length,l=this.views,h=l.length;if((0===r||t)&&(Z.disposeContiguousBatch(l),h=0),0===h){this.views=l=new Array(r);for(let t=0;t<r;++t){const r=i.create();o(r,e,t,s),l[t]=r,r.insertBefore(n)}}else{let t=0;for(;t<r;++t)if(t<h){o(l[t],e,t,s)}else{const r=i.create();o(r,e,t,s),l.push(r),r.insertBefore(n)}const a=l.splice(t,h-t);for(t=0,r=a.length;t<r;++t)a[t].dispose()}}unbindAllViews(){const t=this.views;for(let e=0,s=t.length;e<s;++e)t[e].unbind()}}class zt extends _{constructor(t,e,s){super(),this.itemsBinding=t,this.templateBinding=e,this.options=s,this.createPlaceholder=l.createBlockPlaceholder,function(){if(Lt)return;Lt=!0,C.setArrayObserverFactory(t=>new Et(t));const t=Array.prototype,e=t.pop,s=t.push,i=t.reverse,n=t.shift,o=t.sort,r=t.splice,l=t.unshift;t.pop=function(){const t=this.length>0,s=e.apply(this,arguments),i=this.$fastController;return void 0!==i&&t&&i.addSplice(_t(this.length,[s],0)),s},t.push=function(){const t=s.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Pt(_t(this.length-arguments.length,[],arguments.length),this)),t},t.reverse=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=i.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.shift=function(){const t=this.length>0,e=n.apply(this,arguments),s=this.$fastController;return void 0!==s&&t&&s.addSplice(_t(0,[e],0)),e},t.sort=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=o.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.splice=function(){const t=r.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Pt(_t(+arguments[0],t,arguments.length>2?arguments.length-2:0),this)),t},t.unshift=function(){const t=l.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Pt(_t(0,[],arguments.length),this)),t}}(),this.isItemsBindingVolatile=C.isVolatileBinding(t),this.isTemplateBindingVolatile=C.isVolatileBinding(e)}createBehavior(t){return new Ht(t,this.itemsBinding,this.isItemsBindingVolatile,this.templateBinding,this.isTemplateBindingVolatile,this.options)}}function Qt(t,e,s=jt){return new zt(t,"function"==typeof e?e:()=>e,s)}function Ut(t){return t?function(e,s,i){return 1===e.nodeType&&e.matches(t)}:function(t,e,s){return 1===t.nodeType}}class qt{constructor(t,e){this.target=t,this.options=e,this.source=null}bind(t){const e=this.options.property;this.shouldUpdate=C.getAccessors(t).some(t=>t.name===e),this.source=t,this.updateTarget(this.computeNodes()),this.shouldUpdate&&this.observe()}unbind(){this.updateTarget(Nt),this.source=null,this.shouldUpdate&&this.disconnect()}handleEvent(){this.updateTarget(this.computeNodes())}computeNodes(){let t=this.getNodes();return void 0!==this.options.filter&&(t=t.filter(this.options.filter)),t}updateTarget(t){this.source[this.options.property]=t}}class Wt extends qt{constructor(t,e){super(t,e)}observe(){this.target.addEventListener("slotchange",this)}disconnect(){this.target.removeEventListener("slotchange",this)}getNodes(){return this.target.assignedNodes(this.options)}}function Kt(t){return"string"==typeof t&&(t={property:t}),new I("fast-slotted",Wt,t)}class Gt extends qt{constructor(t,e){super(t,e),this.observer=null}observe(){null===this.observer&&(this.observer=new MutationObserver(this.handleEvent.bind(this))),this.observer.observe(this.target,this.options)}disconnect(){this.observer.disconnect()}getNodes(){return Array.from(this.target.childNodes)}}function Jt(t){return"string"==typeof t?t={property:t,childList:!0}:t.childList=!0,new I("fast-children",Gt,t)}export{I as AttachedBehaviorDirective,gt as AttributeDefinition,Q as BindingBehavior,z as BindingDirective,Gt as ChildrenBehavior,Bt as Controller,l as DOM,_ as Directive,nt as ElementStyles,A as ExecutionContext,St as FASTElement,yt as FASTElementDefinition,Z as HTMLView,C as Observable,f as PropertyChangeNotifier,At as RefBehavior,Ht as RepeatBehavior,zt as RepeatDirective,Wt as SlottedBehavior,u as SubscriberSet,tt as ViewTemplate,pt as attr,ut as booleanConverter,Jt as children,X as compileTemplate,dt as css,Tt as customElement,k as defaultExecutionContext,Ut as elements,Nt as emptyArray,st as html,ft as nullableNumberConverter,O as observable,kt as ref,Qt as repeat,N as setCurrentEvent,Kt as slotted,S as volatile,Vt as when};
+const t=function(){if("undefined"!=typeof globalThis)return globalThis;if("undefined"!=typeof global)return global;if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;try{return new Function("return this")()}catch(t){return{}}}();void 0===t.trustedTypes&&(t.trustedTypes={createPolicy:(t,e)=>e});const e=[],s=t.trustedTypes.createPolicy("fast-html",{createHTML:t=>t});let i=s;function n(){let t=0;for(;t<e.length;){if(e[t].call(),t++,t>1024){for(let s=0,i=e.length-t;s<i;s++)e[s]=e[s+t];e.length-=t,t=0}}e.length=0}const o="fast-"+Math.random().toString(36).substring(2,8),r=o+"{",l="}"+o,h=Object.freeze({supportsAdoptedStyleSheets:Array.isArray(document.adoptedStyleSheets)&&"replace"in CSSStyleSheet.prototype,setHTMLPolicy(t){if(i!==s)throw new Error("The HTML policy can only be set once.");i=t},createHTML:t=>i.createHTML(t),isMarker:t=>t&&8===t.nodeType&&t.data.startsWith(o),extractDirectiveIndexFromMarker:t=>parseInt(t.data.replace(o+":","")),createInterpolationPlaceholder:t=>`${r}${t}${l}`,createCustomAttributePlaceholder(t,e){return`${t}="${this.createInterpolationPlaceholder(e)}"`},createBlockPlaceholder:t=>`\x3c!--${o}:${t}--\x3e`,queueUpdate(t){e.length<1&&window.requestAnimationFrame(n),e.push(t)},nextUpdate:()=>new Promise(t=>{h.queueUpdate(t)}),setAttribute(t,e,s){null==s?t.removeAttribute(e):t.setAttribute(e,s)},setBooleanAttribute(t,e,s){s?t.setAttribute(e,""):t.removeAttribute(e)},removeChildNodes(t){for(let e=t.firstChild;null!==e;e=t.firstChild)t.removeChild(e)},createTemplateWalker:t=>document.createTreeWalker(t,133,null,!1)});function a(t){const e=this.spillover;-1===e.indexOf(t)&&e.push(t)}function c(t){const e=this.spillover,s=e.indexOf(t);-1!==s&&e.splice(s,1)}function d(t){const e=this.spillover,s=this.source;for(let i=0,n=e.length;i<n;++i)e[i].handleChange(s,t)}function u(t){return-1!==this.spillover.indexOf(t)}class f{constructor(t,e){this.sub1=void 0,this.sub2=void 0,this.spillover=void 0,this.source=t,this.sub1=e}has(t){return this.sub1===t||this.sub2===t}subscribe(t){this.has(t)||(void 0!==this.sub1?void 0!==this.sub2?(this.spillover=[this.sub1,this.sub2,t],this.subscribe=a,this.unsubscribe=c,this.notify=d,this.has=u,this.sub1=void 0,this.sub2=void 0):this.sub2=t:this.sub1=t)}unsubscribe(t){this.sub1===t?this.sub1=void 0:this.sub2===t&&(this.sub2=void 0)}notify(t){const e=this.sub1,s=this.sub2,i=this.source;void 0!==e&&e.handleChange(i,t),void 0!==s&&s.handleChange(i,t)}}class p{constructor(t){this.subscribers={},this.source=t}notify(t){const e=this.subscribers[t];void 0!==e&&e.notify(t)}subscribe(t,e){let s=this.subscribers[e];void 0===s&&(this.subscribers[e]=s=new f(this.source)),s.subscribe(t)}unsubscribe(t,e){const s=this.subscribers[e];void 0!==s&&s.unsubscribe(t)}}const g=/(\:|\&\&|\|\||if)/,b=new WeakMap,v=new WeakMap;let m=void 0,y=t=>{throw new Error("Must call enableArrayObservation before observing arrays.")};class C{constructor(t){this.name=t,this.field="_"+t,this.callback=t+"Changed"}getValue(t){return void 0!==m&&m.watch(t,this.name),t[this.field]}setValue(t,e){const s=this.field,i=t[s];if(i!==e){t[s]=e;const n=t[this.callback];"function"==typeof n&&n.call(t,i,e),w(t).notify(this.name)}}}const x=Object.freeze({setArrayObserverFactory(t){y=t},getNotifier(t){let e=t.$fastController||b.get(t);return void 0===e&&(Array.isArray(t)?e=y(t):b.set(t,e=new p(t))),e},track(t,e){void 0!==m&&m.watch(t,e)},trackVolatile(){void 0!==m&&(m.needsRefresh=!0)},notify(t,e){w(t).notify(e)},defineProperty(t,e){"string"==typeof e&&(e=new C(e)),this.getAccessors(t).push(e),Reflect.defineProperty(t,e.name,{enumerable:!0,get:function(){return e.getValue(this)},set:function(t){e.setValue(this,t)}})},getAccessors(t){let e=v.get(t);if(void 0===e){let s=Reflect.getPrototypeOf(t);for(;void 0===e&&null!==s;)e=v.get(s),s=Reflect.getPrototypeOf(s);e=void 0===e?[]:e.slice(0),v.set(t,e)}return e},binding(t,e,s=this.isVolatileBinding(t)){return new I(t,e,s)},isVolatileBinding:t=>g.test(t.toString())}),w=x.getNotifier,B=x.trackVolatile,O=h.queueUpdate;function S(t,e){x.defineProperty(t,e)}function N(t,e,s){return Object.assign({},s,{get:function(){return B(),s.get.apply(this)}})}let T=null;function A(t){T=t}class k{constructor(){this.index=0,this.length=0,this.parent=null}get event(){return T}get isEven(){return this.index%2==0}get isOdd(){return this.index%2!=0}get isFirst(){return 0===this.index}get isInMiddle(){return!this.isFirst&&!this.isLast}get isLast(){return this.index===this.length-1}}x.defineProperty(k.prototype,"index"),x.defineProperty(k.prototype,"length");const V=Object.seal(new k);class I extends f{constructor(t,e,s=!1){super(t,e),this.binding=t,this.isVolatileBinding=s,this.needsRefresh=!0,this.needsQueue=!0,this.first=this,this.last=null,this.propertySource=void 0,this.propertyName=void 0,this.notifier=void 0,this.next=void 0}observe(t,e){this.needsRefresh&&null!==this.last&&this.disconnect();const s=m;m=this.needsRefresh?this:void 0,this.needsRefresh=this.isVolatileBinding;const i=this.binding(t,e);return m=s,i}disconnect(){if(null!==this.last){let t=this.first;for(;void 0!==t;)t.notifier.unsubscribe(this,t.propertyName),t=t.next;this.last=null,this.needsRefresh=!0}}watch(t,e){const s=this.last,i=w(t),n=null===s?this.first:{};if(n.propertySource=t,n.propertyName=e,n.notifier=i,i.subscribe(this,e),null!==s){if(!this.needsRefresh){m=void 0;const e=s.propertySource[s.propertyName];m=this,t===e&&(this.needsRefresh=!0)}s.next=n}this.last=n}handleChange(){this.needsQueue&&(this.needsQueue=!1,O(this))}call(){null!==this.last&&(this.needsQueue=!0,this.notify(this))}}class ${constructor(){this.targetIndex=0}}class M extends ${constructor(t,e,s){super(),this.name=t,this.behavior=e,this.options=s}createPlaceholder(t){return h.createCustomAttributePlaceholder(this.name,t)}createBehavior(t){return new this.behavior(t,this.options)}}function F(t,e){this.source=t,this.context=e,null===this.bindingObserver&&(this.bindingObserver=x.binding(this.binding,this,this.isBindingVolatile)),this.updateTarget(this.bindingObserver.observe(t,e))}function L(t,e){this.source=t,this.context=e,this.target.addEventListener(this.targetName,this)}function E(){this.bindingObserver.disconnect(),this.source=null,this.context=null}function P(){this.bindingObserver.disconnect(),this.source=null,this.context=null;const t=this.target.$fastView;void 0!==t&&t.isComposed&&(t.unbind(),t.needsBindOnly=!0)}function _(){this.target.removeEventListener(this.targetName,this),this.source=null,this.context=null}function j(t){h.setAttribute(this.target,this.targetName,t)}function R(t){h.setBooleanAttribute(this.target,this.targetName,t)}function D(t){if(null==t&&(t=""),t.create){this.target.textContent="";let e=this.target.$fastView;void 0===e?e=t.create():this.target.$fastTemplate!==t&&(e.isComposed&&(e.remove(),e.unbind()),e=t.create()),e.isComposed?e.needsBindOnly&&(e.needsBindOnly=!1,e.bind(this.source,this.context)):(e.isComposed=!0,e.bind(this.source,this.context),e.insertBefore(this.target),this.target.$fastView=e,this.target.$fastTemplate=t)}else{const e=this.target.$fastView;void 0!==e&&e.isComposed&&(e.isComposed=!1,e.remove(),e.needsBindOnly?e.needsBindOnly=!1:e.unbind()),this.target.textContent=t}}function H(t){this.target[this.targetName]=t}function z(t){const e=this.classVersions||Object.create(null),s=this.target;let i=this.version||0;if(null!=t&&t.length){const n=t.split(/\s+/);for(let t=0,o=n.length;t<o;++t){const o=n[t];""!==o&&(e[o]=i,s.classList.add(o))}}if(this.classVersions=e,this.version=i+1,0!==i){i-=1;for(const t in e)e[t]===i&&s.classList.remove(t)}}class Q extends ${constructor(t){super(),this.binding=t,this.bind=F,this.unbind=E,this.updateTarget=j,this.createPlaceholder=h.createInterpolationPlaceholder,this.isBindingVolatile=x.isVolatileBinding(this.bind)}get targetName(){return this.originalTargetName}set targetName(t){if(this.originalTargetName=t,void 0!==t)switch(t[0]){case":":if(this.cleanedTargetName=t.substr(1),this.updateTarget=H,"innerHTML"===this.cleanedTargetName){const t=this.binding;this.binding=(e,s)=>h.createHTML(t(e,s))}break;case"?":this.cleanedTargetName=t.substr(1),this.updateTarget=R;break;case"@":this.cleanedTargetName=t.substr(1),this.bind=L,this.unbind=_;break;default:this.cleanedTargetName=t,"class"===t&&(this.updateTarget=z)}}targetAtContent(){this.updateTarget=D,this.unbind=P}createBehavior(t){return new U(t,this.binding,this.isBindingVolatile,this.bind,this.unbind,this.updateTarget,this.cleanedTargetName)}}class U{constructor(t,e,s,i,n,o,r){this.source=null,this.context=null,this.bindingObserver=null,this.target=t,this.binding=e,this.isBindingVolatile=s,this.bind=i,this.unbind=n,this.updateTarget=o,this.targetName=r}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleEvent(t){A(t);const e=this.binding(this.source,this.context);A(null),!0!==e&&t.preventDefault()}}const q={locatedDirectives:0,targetIndex:-1};function W(t){if(1===t.length)return q.locatedDirectives++,t[0];let e;const s=t.length,i=t.map(t=>"string"==typeof t?()=>t:(e=t.targetName||e,q.locatedDirectives++,t.binding)),n=new Q((t,e)=>{let n="";for(let o=0;o<s;++o)n+=i[o](t,e);return n});return n.targetName=e,n}const K=l.length;function G(t,e){const s=t.split(r);if(1===s.length)return null;const i=[];for(let t=0,n=s.length;t<n;++t){const n=s[t],o=n.indexOf(l);let r;if(-1===o)r=n;else{const t=parseInt(n.substring(0,o));i.push(e[t]),r=n.substring(o+K)}""!==r&&i.push(r)}return i}function J(t,e,s,i=!1){const n=t.attributes;for(let o=0,r=n.length;o<r;++o){const l=n[o],h=l.value,a=G(h,e);let c=null;null===a?i&&(c=new Q(()=>h),c.targetName=l.name):c=W(a),null!==c&&(t.removeAttributeNode(l),o--,r--,c.targetIndex=q.targetIndex,s.push(c))}}function X(t,e,s,i){const n=G(t.textContent,e);if(null!==n){let e=t;for(let l=0,h=n.length;l<h;++l){const h=n[l],a=0===l?t:e.parentNode.insertBefore(document.createTextNode(""),e.nextSibling);"string"==typeof h?a.textContent=h:(a.textContent=" ",r=s,(o=h).targetAtContent(),o.targetIndex=q.targetIndex,r.push(o),q.locatedDirectives++),e=a,q.targetIndex++,a!==t&&i.nextNode()}q.targetIndex--}var o,r}function Y(t,e){const s=[];q.locatedDirectives=0,J(t,e,s,!0);const i=t.content;document.adoptNode(i);const n=[],o=e.length,r=h.createTemplateWalker(i);for(q.targetIndex=-1;q.locatedDirectives<o;){const t=r.nextNode();if(null===t)break;switch(q.targetIndex++,t.nodeType){case 1:J(t,e,n);break;case 3:X(t,e,n,r);break;case 8:if(h.isMarker(t)){const s=e[h.extractDirectiveIndexFromMarker(t)];s.targetIndex=q.targetIndex,q.locatedDirectives++,n.push(s)}}}let l=0;return h.isMarker(i.firstChild)&&(i.insertBefore(document.createComment(""),i.firstChild),l=-1),{fragment:i,viewBehaviorFactories:n,hostBehaviorFactories:s,targetOffset:l}}const Z=document.createRange();class tt{constructor(t,e){this.fragment=t,this.behaviors=e,this.source=null,this.context=null,this.firstChild=t.firstChild,this.lastChild=t.lastChild}appendTo(t){t.appendChild(this.fragment)}insertBefore(t){if(this.fragment.hasChildNodes())t.parentNode.insertBefore(this.fragment,t);else{const e=t.parentNode,s=this.lastChild;let i,n=this.firstChild;for(;n!==s;)i=n.nextSibling,e.insertBefore(n,t),n=i;e.insertBefore(s,t)}}remove(){const t=this.fragment,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.appendChild(i),i=s;t.appendChild(e)}dispose(){const t=this.firstChild.parentNode,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.removeChild(i),i=s;t.removeChild(e);const n=this.behaviors,o=this.source;for(let t=0,e=n.length;t<e;++t)n[t].unbind(o)}bind(t,e){const s=this.behaviors;if(this.source!==t)if(null!==this.source){const i=this.source;this.source=t,this.context=e;for(let n=0,o=s.length;n<o;++n){const o=s[n];o.unbind(i),o.bind(t,e)}}else{this.source=t,this.context=e;for(let i=0,n=s.length;i<n;++i)s[i].bind(t,e)}}unbind(){if(null===this.source)return;const t=this.behaviors,e=this.source;for(let s=0,i=t.length;s<i;++s)t[s].unbind(e);this.source=null}static disposeContiguousBatch(t){if(0!==t.length){Z.setStart(t[0].firstChild,0),Z.setEnd(t[t.length-1].lastChild.nextSibling,0),Z.deleteContents();for(let e=0,s=t.length;e<s;++e){const s=t[e],i=s.behaviors,n=s.source;for(let t=0,e=i.length;t<e;++t)i[t].unbind(n)}}}}class et{constructor(t,e){this.behaviorCount=0,this.hasHostBehaviors=!1,this.fragment=null,this.targetOffset=0,this.viewBehaviorFactories=null,this.hostBehaviorFactories=null,this.html=t,this.directives=e}create(t){if(null===this.fragment){let t;const e=this.html;if("string"==typeof e){t=document.createElement("template"),t.innerHTML=h.createHTML(e);const s=t.content.firstElementChild;null!==s&&"TEMPLATE"===s.tagName&&(t=s)}else t=e;const s=Y(t,this.directives);this.fragment=s.fragment,this.viewBehaviorFactories=s.viewBehaviorFactories,this.hostBehaviorFactories=s.hostBehaviorFactories,this.targetOffset=s.targetOffset,this.behaviorCount=this.viewBehaviorFactories.length+this.hostBehaviorFactories.length,this.hasHostBehaviors=this.hostBehaviorFactories.length>0}const e=this.fragment.cloneNode(!0),s=this.viewBehaviorFactories,i=new Array(this.behaviorCount),n=h.createTemplateWalker(e);let o=0,r=this.targetOffset,l=n.nextNode();for(let t=s.length;o<t;++o){const t=s[o],e=t.targetIndex;for(;null!==l;){if(r===e){i[o]=t.createBehavior(l);break}l=n.nextNode(),r++}}if(this.hasHostBehaviors){const e=this.hostBehaviorFactories;for(let s=0,n=e.length;s<n;++s,++o)i[o]=e[s].createBehavior(t)}return new tt(e,i)}render(t,e,s){"string"==typeof e&&(e=document.getElementById(e)),void 0===s&&(s=e);const i=this.create(s);return i.bind(t,V),i.appendTo(e),i}}const st=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function it(t,...e){const s=[];let i="";for(let n=0,o=t.length-1;n<o;++n){const o=t[n];let r=e[n];if(i+=o,r instanceof et){const t=r;r=()=>t}if("function"==typeof r){r=new Q(r);const t=st.exec(o);null!==t&&(r.targetName=t[2])}r instanceof $?(i+=r.createPlaceholder(s.length),s.push(r)):i+=r}return i+=t[t.length-1],new et(i,s)}const nt=new Map;class ot{constructor(){this.behaviors=null}withBehaviors(...t){return this.behaviors=null===this.behaviors?t:this.behaviors.concat(t),this}withKey(t){return nt.set(t,this),this}static find(t){return nt.get(t)||null}}function rt(t){return t.map(t=>t instanceof ot?rt(t.styles):[t]).reduce((t,e)=>t.concat(e),[])}function lt(t){return t.map(t=>t instanceof ot?t.behaviors:null).reduce((t,e)=>null===e?t:(null===t&&(t=[]),t.concat(e)),null)}ot.create=(()=>{if(h.supportsAdoptedStyleSheets){const t=new Map;return e=>new ht(e,t)}return t=>new ct(t)})();class ht extends ot{constructor(t,e){super(),this.styles=t,this.behaviors=null,this.behaviors=lt(t),this.styleSheets=rt(t).map(t=>{if(t instanceof CSSStyleSheet)return t;let s=e.get(t);return void 0===s&&(s=new CSSStyleSheet,s.replaceSync(t),e.set(t,s)),s})}addStylesTo(t){t.adoptedStyleSheets=[...t.adoptedStyleSheets,...this.styleSheets]}removeStylesFrom(t){const e=this.styleSheets;t.adoptedStyleSheets=t.adoptedStyleSheets.filter(t=>-1===e.indexOf(t))}}let at=0;class ct extends ot{constructor(t){super(),this.styles=t,this.behaviors=null,this.behaviors=lt(t),this.styleSheets=rt(t),this.styleClass="fast-style-class-"+ ++at}addStylesTo(t){const e=this.styleSheets,s=this.styleClass;t===document&&(t=document.body);for(let i=e.length-1;i>-1;--i){const n=document.createElement("style");n.innerHTML=e[i],n.className=s,t.prepend(n)}}removeStylesFrom(t){t===document&&(t=document.body);const e=t.querySelectorAll("."+this.styleClass);for(let s=0,i=e.length;s<i;++s)t.removeChild(e[s])}}function dt(t,...e){const s=[];let i="";for(let n=0,o=t.length-1;n<o;++n){i+=t[n];const o=e[n];o instanceof ot||o instanceof CSSStyleSheet?(""!==i.trim()&&(s.push(i),i=""),s.push(o)):i+=o}return i+=t[t.length-1],""!==i.trim()&&s.push(i),ot.create(s)}const ut={toView:t=>t?"true":"false",fromView:t=>null!=t&&"false"!==t&&!1!==t&&0!==t},ft={toView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e.toString()},fromView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e}};class pt{constructor(t,e,s=e.toLowerCase(),i="reflect",n){this.guards=new Set,this.Owner=t,this.name=e,this.attribute=s,this.mode=i,this.converter=n,this.fieldName="_"+e,this.callbackName=e+"Changed",this.hasCallback=this.callbackName in t.prototype,"boolean"===i&&void 0===n&&(this.converter=ut)}setValue(t,e){const s=t[this.fieldName],i=this.converter;void 0!==i&&(e=i.fromView(e)),s!==e&&(t[this.fieldName]=e,this.tryReflectToAttribute(t),this.hasCallback&&t[this.callbackName](s,e),t.$fastController.notify(this.name))}getValue(t){return x.track(t,this.name),t[this.fieldName]}onAttributeChangedCallback(t,e){this.guards.has(t)||(this.guards.add(t),this.setValue(t,e),this.guards.delete(t))}tryReflectToAttribute(t){const e=this.mode,s=this.guards;s.has(t)||"fromView"===e||h.queueUpdate(()=>{s.add(t);const i=t[this.fieldName];switch(e){case"reflect":const e=this.converter;h.setAttribute(t,this.attribute,void 0!==e?e.toView(i):i);break;case"boolean":h.setBooleanAttribute(t,this.attribute,i)}s.delete(t)})}static collect(t,...e){const s=[];e.push(t.attributes);for(let i=0,n=e.length;i<n;++i){const n=e[i];if(void 0!==n)for(let e=0,i=n.length;e<i;++e){const i=n[e];"string"==typeof i?s.push(new pt(t,i)):s.push(new pt(t,i.property,i.attribute,i.mode,i.converter))}}return s}}function gt(t,e){let s;function i(t,e){arguments.length>1&&(s.property=e);const i=t.constructor.attributes||(t.constructor.attributes=[]);i.push(s)}return arguments.length>1?(s={},void i(t,e)):(s=void 0===t?{}:t,i)}const bt={mode:"open"},vt={},mt=new Map;class yt{constructor(t,e=t.definition){"string"==typeof e&&(e={name:e}),this.type=t,this.name=e.name,this.template=e.template;const s=pt.collect(t,e.attributes),i=new Array(s.length),n={},o={};for(let t=0,e=s.length;t<e;++t){const e=s[t];i[t]=e.attribute,n[e.name]=e,o[e.attribute]=e}this.attributes=s,this.observedAttributes=i,this.propertyLookup=n,this.attributeLookup=o,this.shadowOptions=void 0===e.shadowOptions?bt:null===e.shadowOptions?void 0:Object.assign(Object.assign({},bt),e.shadowOptions),this.elementOptions=void 0===e.elementOptions?vt:Object.assign(Object.assign({},vt),e.elementOptions),this.styles=void 0===e.styles?void 0:Array.isArray(e.styles)?ot.create(e.styles):e.styles instanceof ot?e.styles:ot.create([e.styles])}define(t=customElements){const e=this.type;if(!this.isDefined){const t=this.attributes,s=e.prototype;for(let e=0,i=t.length;e<i;++e)x.defineProperty(s,t[e]);Reflect.defineProperty(e,"observedAttributes",{value:this.observedAttributes,enumerable:!0}),mt.set(e,this),this.isDefined=!0}return t.get(this.name)||t.define(this.name,e,this.elementOptions),this}static forType(t){return mt.get(t)}}const Ct=new WeakMap,xt={bubbles:!0,composed:!0};function wt(t){return t.shadowRoot||Ct.get(t)||null}class Bt extends p{constructor(t,e){super(t),this.boundObservables=null,this.behaviors=null,this.needsInitialization=!0,this._template=null,this._styles=null,this.view=null,this.isConnected=!1,this.element=t,this.definition=e;const s=e.shadowOptions;if(void 0!==s){const e=t.attachShadow(s);"closed"===s.mode&&Ct.set(t,e)}const i=x.getAccessors(t);if(i.length>0){const e=this.boundObservables=Object.create(null);for(let s=0,n=i.length;s<n;++s){const n=i[s].name,o=t[n];void 0!==o&&(delete t[n],e[n]=o)}}}get template(){return this._template}set template(t){this._template!==t&&(this._template=t,this.needsInitialization||this.renderTemplate(t))}get styles(){return this._styles}set styles(t){this._styles!==t&&(null!==this._styles&&this.removeStyles(this._styles),this._styles=t,this.needsInitialization||null===t||this.addStyles(t))}addStyles(t){const e=t.behaviors,s=wt(this.element)||this.element.getRootNode();t.addStylesTo(s),null!==e&&this.addBehaviors(e)}removeStyles(t){const e=t.behaviors,s=wt(this.element)||this.element.getRootNode();t.removeStylesFrom(s),null!==e&&this.removeBehaviors(e)}addBehaviors(t){const e=this.behaviors||(this.behaviors=[]),s=t.length;for(let i=0;i<s;++i)e.push(t[i]);if(this.isConnected){const e=this.element;for(let i=0;i<s;++i)t[i].bind(e,V)}}removeBehaviors(t){const e=this.behaviors;if(null===e)return;const s=t.length;for(let i=0;i<s;++i){const s=e.indexOf(t[i]);-1!==s&&e.splice(s,1)}if(this.isConnected){const e=this.element;for(let i=0;i<s;++i)t[i].unbind(e)}}onConnectedCallback(){if(this.isConnected)return;const t=this.element;this.needsInitialization?this.finishInitialization():null!==this.view&&this.view.bind(t,V);const e=this.behaviors;if(null!==e)for(let s=0,i=e.length;s<i;++s)e[s].bind(t,V);this.isConnected=!0}onDisconnectedCallback(){if(!1===this.isConnected)return;this.isConnected=!1;const t=this.view;null!==t&&t.unbind();const e=this.behaviors;if(null!==e){const t=this.element;for(let s=0,i=e.length;s<i;++s)e[s].unbind(t)}}onAttributeChangedCallback(t,e,s){const i=this.definition.attributeLookup[t];void 0!==i&&i.onAttributeChangedCallback(this.element,s)}emit(t,e,s){return!!this.isConnected&&this.element.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign({detail:e},xt),s)))}finishInitialization(){const t=this.element,e=this.boundObservables;if(null!==e){const s=Object.keys(e);for(let i=0,n=s.length;i<n;++i){const n=s[i];t[n]=e[n]}this.boundObservables=null}const s=this.definition;null===this._template&&(this.element.resolveTemplate?this._template=this.element.resolveTemplate():s.template&&(this._template=s.template||null)),null!==this._template&&this.renderTemplate(this._template),null===this._styles&&(this.element.resolveStyles?this._styles=this.element.resolveStyles():s.styles&&(this._styles=s.styles||null)),null!==this._styles&&this.addStyles(this._styles),this.needsInitialization=!1}renderTemplate(t){const e=this.element,s=wt(e)||e;null!==this.view?(this.view.dispose(),this.view=null):this.needsInitialization||h.removeChildNodes(s),t&&(this.view=t.render(e,s,e))}static forCustomElement(t){const e=t.$fastController;if(void 0!==e)return e;const s=yt.forType(t.constructor);if(void 0===s)throw new Error("Missing FASTElement definition.");return t.$fastController=new Bt(t,s)}}function Ot(t){return class extends t{constructor(){super(),Bt.forCustomElement(this)}$emit(t,e,s){return this.$fastController.emit(t,e,s)}connectedCallback(){this.$fastController.onConnectedCallback()}disconnectedCallback(){this.$fastController.onDisconnectedCallback()}attributeChangedCallback(t,e,s){this.$fastController.onAttributeChangedCallback(t,e,s)}}}const St=Object.assign(Ot(HTMLElement),{from:t=>Ot(t),define:(t,e)=>new yt(t,e).define().type});function Nt(t){return function(e){new yt(e,t).define()}}const Tt=Object.freeze([]);class At{constructor(t,e){this.target=t,this.propertyName=e}bind(t){t[this.propertyName]=this.target}unbind(){}}function kt(t){return new M("fast-ref",At,t)}function Vt(t,e){const s="function"==typeof e?e:()=>e;return(e,i)=>t(e,i)?s(e,i):null}function It(t,e,s){return{index:t,removed:e,addedCount:s}}function $t(t,e,s,i,n,o){let r=0,l=0;const h=Math.min(s-e,o-n);if(0===e&&0===n&&(r=function(t,e,s){for(let i=0;i<s;++i)if(t[i]!==e[i])return i;return s}(t,i,h)),s===t.length&&o===i.length&&(l=function(t,e,s){let i=t.length,n=e.length,o=0;for(;o<s&&t[--i]===e[--n];)o++;return o}(t,i,h-r)),n+=r,o-=l,(s-=l)-(e+=r)==0&&o-n==0)return Tt;if(e===s){const t=It(e,[],0);for(;n<o;)t.removed.push(i[n++]);return[t]}if(n===o)return[It(e,[],s-e)];const a=function(t){let e=t.length-1,s=t[0].length-1,i=t[e][s];const n=[];for(;e>0||s>0;){if(0===e){n.push(2),s--;continue}if(0===s){n.push(3),e--;continue}const o=t[e-1][s-1],r=t[e-1][s],l=t[e][s-1];let h;h=r<l?r<o?r:o:l<o?l:o,h===o?(o===i?n.push(0):(n.push(1),i=o),e--,s--):h===r?(n.push(3),e--,i=r):(n.push(2),s--,i=l)}return n.reverse(),n}(function(t,e,s,i,n,o){const r=o-n+1,l=s-e+1,h=new Array(r);let a,c;for(let t=0;t<r;++t)h[t]=new Array(l),h[t][0]=t;for(let t=0;t<l;++t)h[0][t]=t;for(let s=1;s<r;++s)for(let o=1;o<l;++o)t[e+o-1]===i[n+s-1]?h[s][o]=h[s-1][o-1]:(a=h[s-1][o]+1,c=h[s][o-1]+1,h[s][o]=a<c?a:c);return h}(t,e,s,i,n,o)),c=[];let d=void 0,u=e,f=n;for(let t=0;t<a.length;++t)switch(a[t]){case 0:void 0!==d&&(c.push(d),d=void 0),u++,f++;break;case 1:void 0===d&&(d=It(u,[],0)),d.addedCount++,u++,d.removed.push(i[f]),f++;break;case 2:void 0===d&&(d=It(u,[],0)),d.addedCount++,u++;break;case 3:void 0===d&&(d=It(u,[],0)),d.removed.push(i[f]),f++}return void 0!==d&&c.push(d),c}const Mt=Array.prototype.push;function Ft(t,e,s,i){const n=It(e,s,i);let o=!1,r=0;for(let e=0,s=t.length;e<s;e++){const s=t[e];if(s.index+=r,o)continue;const i=(l=n.index,h=n.index+n.removed.length,a=s.index,c=s.index+s.addedCount,h<a||c<l?-1:h===a||c===l?0:l<a?h<c?h-a:c-a:c<h?c-l:h-l);if(i>=0){t.splice(e,1),e--,r-=s.addedCount-s.removed.length,n.addedCount+=s.addedCount-i;const l=n.removed.length+s.removed.length-i;if(n.addedCount||l){let t=s.removed;if(n.index<s.index){const e=n.removed.slice(0,s.index-n.index);Mt.apply(e,t),t=e}if(n.index+n.removed.length>s.index+s.addedCount){const e=n.removed.slice(s.index+s.addedCount-n.index);Mt.apply(t,e)}n.removed=t,s.index<n.index&&(n.index=s.index)}else o=!0}else if(n.index<s.index){o=!0,t.splice(e,0,n),e++;const i=n.addedCount-n.removed.length;s.index+=i,r+=i}}var l,h,a,c;o||t.push(n)}function Lt(t,e){let s=[];const i=function(t){const e=[];for(let s=0,i=t.length;s<i;s++){const i=t[s];Ft(e,i.index,i.removed,i.addedCount)}return e}(e);for(let e=0,n=i.length;e<n;++e){const n=i[e];1!==n.addedCount||1!==n.removed.length?s=s.concat($t(t,n.index,n.index+n.addedCount,n.removed,0,n.removed.length)):n.removed[0]!==t[n.index]&&s.push(n)}return s}let Et=!1;function Pt(t,e){let s=t.index;const i=e.length;return s>i?s=i-t.addedCount:s<0&&(s=i+t.removed.length+s-t.addedCount),s<0&&(s=0),t.index=s,t}class _t extends f{constructor(t){super(t),this.oldCollection=void 0,this.splices=void 0,this.needsQueue=!0,this.call=this.flush,t.$fastController=this}addSplice(t){void 0===this.splices?this.splices=[t]:this.splices.push(t),this.needsQueue&&(this.needsQueue=!1,h.queueUpdate(this))}reset(t){this.oldCollection=t,this.needsQueue&&(this.needsQueue=!1,h.queueUpdate(this))}flush(){const t=this.splices,e=this.oldCollection;if(void 0===t&&void 0===e)return;this.needsQueue=!0,this.splices=void 0,this.oldCollection=void 0;const s=void 0===e?Lt(this.source,t):$t(this.source,0,this.source.length,e,0,e.length);this.notify(s)}}const jt=Object.freeze({positioning:!1});function Rt(t,e,s,i){t.bind(e[s],i)}function Dt(t,e,s,i){const n=Object.create(i);n.index=s,n.length=e.length,t.bind(e[s],n)}class Ht{constructor(t,e,s,i,n,o){this.location=t,this.itemsBinding=e,this.templateBinding=i,this.options=o,this.source=null,this.views=[],this.items=null,this.itemsObserver=null,this.originalContext=void 0,this.childContext=void 0,this.bindView=Rt,this.itemsBindingObserver=x.binding(e,this,s),this.templateBindingObserver=x.binding(i,this,n),o.positioning&&(this.bindView=Dt)}bind(t,e){this.source=t,this.originalContext=e,this.childContext=Object.create(e),this.childContext.parent=t,this.items=this.itemsBindingObserver.observe(t,this.originalContext),this.template=this.templateBindingObserver.observe(t,this.originalContext),this.observeItems(),this.refreshAllViews()}unbind(){this.source=null,this.items=null,null!==this.itemsObserver&&this.itemsObserver.unsubscribe(this),this.unbindAllViews(),this.itemsBindingObserver.disconnect(),this.templateBindingObserver.disconnect()}handleChange(t,e){t===this.itemsBinding?(this.items=this.itemsBindingObserver.observe(this.source,this.originalContext),this.observeItems(),this.refreshAllViews()):t===this.templateBinding?(this.template=this.templateBindingObserver.observe(this.source,this.originalContext),this.refreshAllViews(!0)):this.updateViews(e)}observeItems(){this.items||(this.items=[]);const t=this.itemsObserver,e=this.itemsObserver=x.getNotifier(this.items);t!==e&&(null!==t&&t.unsubscribe(this),e.subscribe(this))}updateViews(t){const e=this.childContext,s=this.views,i=[],n=this.bindView;let o=0;for(let e=0,n=t.length;e<n;++e){const n=t[e],r=n.removed;i.push(...s.splice(n.index+o,r.length)),o-=n.addedCount}const r=this.items,l=this.template;for(let o=0,h=t.length;o<h;++o){const h=t[o];let a=h.index;const c=a+h.addedCount;for(;a<c;++a){const t=s[a],o=t?t.firstChild:this.location,h=i.length>0?i.shift():l.create();s.splice(a,0,h),n(h,r,a,e),h.insertBefore(o)}}for(let t=0,e=i.length;t<e;++t)i[t].dispose();if(this.options.positioning)for(let t=0,e=s.length;t<e;++t){const i=s[t].context;i.length=e,i.index=t}}refreshAllViews(t=!1){const e=this.items,s=this.childContext,i=this.template,n=this.location,o=this.bindView;let r=e.length,l=this.views,h=l.length;if((0===r||t)&&(tt.disposeContiguousBatch(l),h=0),0===h){this.views=l=new Array(r);for(let t=0;t<r;++t){const r=i.create();o(r,e,t,s),l[t]=r,r.insertBefore(n)}}else{let t=0;for(;t<r;++t)if(t<h){o(l[t],e,t,s)}else{const r=i.create();o(r,e,t,s),l.push(r),r.insertBefore(n)}const a=l.splice(t,h-t);for(t=0,r=a.length;t<r;++t)a[t].dispose()}}unbindAllViews(){const t=this.views;for(let e=0,s=t.length;e<s;++e)t[e].unbind()}}class zt extends ${constructor(t,e,s){super(),this.itemsBinding=t,this.templateBinding=e,this.options=s,this.createPlaceholder=h.createBlockPlaceholder,function(){if(Et)return;Et=!0,x.setArrayObserverFactory(t=>new _t(t));const t=Array.prototype,e=t.pop,s=t.push,i=t.reverse,n=t.shift,o=t.sort,r=t.splice,l=t.unshift;t.pop=function(){const t=this.length>0,s=e.apply(this,arguments),i=this.$fastController;return void 0!==i&&t&&i.addSplice(It(this.length,[s],0)),s},t.push=function(){const t=s.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Pt(It(this.length-arguments.length,[],arguments.length),this)),t},t.reverse=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=i.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.shift=function(){const t=this.length>0,e=n.apply(this,arguments),s=this.$fastController;return void 0!==s&&t&&s.addSplice(It(0,[e],0)),e},t.sort=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=o.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.splice=function(){const t=r.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Pt(It(+arguments[0],t,arguments.length>2?arguments.length-2:0),this)),t},t.unshift=function(){const t=l.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Pt(It(0,[],arguments.length),this)),t}}(),this.isItemsBindingVolatile=x.isVolatileBinding(t),this.isTemplateBindingVolatile=x.isVolatileBinding(e)}createBehavior(t){return new Ht(t,this.itemsBinding,this.isItemsBindingVolatile,this.templateBinding,this.isTemplateBindingVolatile,this.options)}}function Qt(t,e,s=jt){return new zt(t,"function"==typeof e?e:()=>e,s)}function Ut(t){return t?function(e,s,i){return 1===e.nodeType&&e.matches(t)}:function(t,e,s){return 1===t.nodeType}}class qt{constructor(t,e){this.target=t,this.options=e,this.source=null}bind(t){const e=this.options.property;this.shouldUpdate=x.getAccessors(t).some(t=>t.name===e),this.source=t,this.updateTarget(this.computeNodes()),this.shouldUpdate&&this.observe()}unbind(){this.updateTarget(Tt),this.source=null,this.shouldUpdate&&this.disconnect()}handleEvent(){this.updateTarget(this.computeNodes())}computeNodes(){let t=this.getNodes();return void 0!==this.options.filter&&(t=t.filter(this.options.filter)),t}updateTarget(t){this.source[this.options.property]=t}}class Wt extends qt{constructor(t,e){super(t,e)}observe(){this.target.addEventListener("slotchange",this)}disconnect(){this.target.removeEventListener("slotchange",this)}getNodes(){return this.target.assignedNodes(this.options)}}function Kt(t){return"string"==typeof t&&(t={property:t}),new M("fast-slotted",Wt,t)}class Gt extends qt{constructor(t,e){super(t,e),this.observer=null}observe(){null===this.observer&&(this.observer=new MutationObserver(this.handleEvent.bind(this))),this.observer.observe(this.target,this.options)}disconnect(){this.observer.disconnect()}getNodes(){return Array.from(this.target.childNodes)}}function Jt(t){return"string"==typeof t?t={property:t,childList:!0}:t.childList=!0,new M("fast-children",Gt,t)}export{t as $global,M as AttachedBehaviorDirective,pt as AttributeDefinition,U as BindingBehavior,Q as BindingDirective,Gt as ChildrenBehavior,Bt as Controller,h as DOM,$ as Directive,ot as ElementStyles,k as ExecutionContext,St as FASTElement,yt as FASTElementDefinition,tt as HTMLView,x as Observable,p as PropertyChangeNotifier,At as RefBehavior,Ht as RepeatBehavior,zt as RepeatDirective,Wt as SlottedBehavior,f as SubscriberSet,et as ViewTemplate,gt as attr,ut as booleanConverter,Jt as children,Y as compileTemplate,dt as css,Nt as customElement,V as defaultExecutionContext,Ut as elements,Tt as emptyArray,it as html,ft as nullableNumberConverter,S as observable,kt as ref,Qt as repeat,A as setCurrentEvent,Kt as slotted,N as volatile,Vt as when};

docs/api-report.md

@@ -8,2 +8,5 @@ ## API Report File for "@microsoft/fast-element"
 // @public
+export const $global: Global;
+
+// @public
 export interface Accessor {
@@ -171,2 +174,5 @@ getValue(source: any): any;
 // @public
+export type ComposableStyles = string | ElementStyles | CSSStyleSheet;
+
+// @public
 export class Controller extends PropertyChangeNotifier {
@@ -194,4 +200,2 @@ // @internal
 
-// Warning: (ae-forgotten-export) The symbol "ComposableStyles" needs to be exported by the entry point index.d.ts
-//
 // @public
@@ -238,2 +242,5 @@ export function css(strings: TemplateStringsArray, ...values: ComposableStyles[]): ElementStyles;
 // @public
+export type ElementStyleFactory = (styles: ReadonlyArray<ComposableStyles>) => ElementStyles;
+
+// @public
 export abstract class ElementStyles {
@@ -244,2 +251,3 @@ // @internal (undocumented)
     abstract readonly behaviors: ReadonlyArray<Behavior> | null;
+    static readonly create: ElementStyleFactory;
     static find(key: string): ElementStyles | null;
@@ -319,2 +327,7 @@ // @internal (undocumented)
 // @public
+export type Global = typeof globalThis & {
+    trustedTypes: TrustedTypes;
+};
+
+// @public
 export function html<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]): ViewTemplate<TSource, TParent>;
@@ -378,3 +391,3 @@
     readonly shadowOptions?: Partial<ShadowRootInit> | null;
-    readonly styles?: ComposableStyles;
+    readonly styles?: ComposableStyles | ComposableStyles[];
     readonly template?: ElementViewTemplate;
@@ -489,2 +502,12 @@ }
 // @public
+export type TrustedTypes = {
+    createPolicy(name: string, rules: TrustedTypesPolicy): TrustedTypesPolicy;
+};
+
+// @public
+export type TrustedTypesPolicy = {
+    createHTML(html: string): string;
+};
+
+// @public
 export interface ValueConverter {
@@ -520,8 +543,4 @@ fromView(value: any): any;
 
-// Warnings were encountered during analysis:
-//
-// dist/dts/dom.d.ts:25:5 - (ae-forgotten-export) The symbol "TrustedTypesPolicy" needs to be exported by the entry point index.d.ts
-
 // (No @packageDocumentation comment for this package)
 
 ```

docs/guide/leveraging-css.md

@@ -128,3 +128,3 @@ ---
 :::note
-You can also pass a CSS string or a [CSSStyleSheet](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet) instance directly to the element definition, without needing to use the `css` helper and it will automatically be converted into `ElementStyles`. The advantage of using the `css` helper is that it enables the rich composition and reuse of styles described above, with automatic runtime caching for memory efficiency and performance.
+You can also pass a CSS `string` or a [CSSStyleSheet](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet) instance directly to the element definition, or even a mixed array of `string`, `CSSStyleSheet`, or `ElementStyles`.
 :::
@@ -131,0 +131,0 @@

package.json

@@ -5,3 +5,3 @@ {
   "sideEffects": false,
-  "version": "0.17.0",
+  "version": "0.18.0",
   "author": {
@@ -85,3 +85,3 @@ "name": "Microsoft",
   },
-  "gitHead": "eb7b309070b2d5d848215bc6091a5cad05141c3f"
+  "gitHead": "1a9670a42d43e40b1b3cd92c18e31622e0335776"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

841002

increased by1.73%

Number of package files

69

increased by2.99%

Lines of code

19993

increased by2.1%

No dependency changes