@microsoft/fast-element - npm Package Compare versions

Comparing version 0.19.1 to 0.20.0

CHANGELOG.md

@@ -6,2 +6,23 @@ # Change Log
 
+# [0.20.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-element@0.19.1...@microsoft/fast-element@0.20.0) (2020-11-19)
+
+
+### Bug Fixes
+
+* **fast-element:** ensure all nodes removed in repeat when array emptied ([#4073](https://github.com/Microsoft/fast/issues/4073)) ([cacfefe](https://github.com/Microsoft/fast/commit/cacfefe78de27f19b7774af338bed27513437623))
+* **fast-element:** remove mergeSplice array length cache ([#4067](https://github.com/Microsoft/fast/issues/4067)) ([751eef8](https://github.com/Microsoft/fast/commit/751eef8ae070a20741a412b22371a46efb1e2b86))
+
+
+### Features
+
+* add select component ([#4074](https://github.com/Microsoft/fast/issues/4074)) ([6984027](https://github.com/Microsoft/fast/commit/698402773e77b2766e995770b0d34c6d129e2ec3))
+* convert FormAssociated to a constructable function ([#4115](https://github.com/Microsoft/fast/issues/4115)) ([da8d54b](https://github.com/Microsoft/fast/commit/da8d54b5a057812622471e1261200b8f9b290d12))
+* makes Controller.isConnected an observable property ([#4093](https://github.com/Microsoft/fast/issues/4093)) ([3d49aa2](https://github.com/Microsoft/fast/commit/3d49aa290bc7ea04a90038529d34b884ed053cbc))
+* **fast-element:** introduce NamedTargetDirective for extensibility ([#4079](https://github.com/Microsoft/fast/issues/4079)) ([c93bc26](https://github.com/Microsoft/fast/commit/c93bc26c1fa438d86d049e6e0d8a09c65fda5781))
+* support HTMLStyleElement from Controller.addStyles and Controller.removeStyles ([#4043](https://github.com/Microsoft/fast/issues/4043)) ([cf20187](https://github.com/Microsoft/fast/commit/cf201871838479593b3377d667643a409418dad2))
+
+
+
+
+
 ## [0.19.1](https://github.com/Microsoft/fast/compare/@microsoft/fast-element@0.19.0...@microsoft/fast-element@0.19.1) (2020-10-14)
@@ -8,0 +29,0 @@

dist/dts/controller.d.ts

@@ -60,11 +60,11 @@ import { FASTElementDefinition } from "./fast-definitions";
     /**
-     * Adds styles to this element.
+     * Adds styles to this element. Providing an HTMLStyleElement will attach the element instance to the shadowRoot.
      * @param styles - The styles to add.
      */
-    addStyles(styles: ElementStyles): void;
+    addStyles(styles: ElementStyles | HTMLStyleElement): void;
     /**
-     * Removes styles from this element.
+     * Removes styles from this element. Providing an HTMLStyleElement will detach the element instance from the shadowRoot.
      * @param styles - the styles to remove.
      */
-    removeStyles(styles: ElementStyles): void;
+    removeStyles(styles: ElementStyles | HTMLStyleElement): void;
     /**
@@ -71,0 +71,0 @@ * Adds behaviors to this element.

dist/dts/directives/binding.d.ts

 import { ExecutionContext, Binding, BindingObserver } from "../observation/observable";
-import { Directive } from "./directive";
+import { NamedTargetDirective } from "./directive";
 import { Behavior } from "./behavior";
@@ -11,3 +11,3 @@ declare function normalBind(this: BindingBehavior, source: unknown, context: ExecutionContext): void;
  */
-export declare class BindingDirective extends Directive {
+export declare class BindingDirective extends NamedTargetDirective {
     binding: Binding;
@@ -21,7 +21,2 @@ private cleanedTargetName?;
     /**
-     * Creates a placeholder string based on the directive's index within the template.
-     * @param index - The index of the directive within the template.
-     */
-    createPlaceholder: (index: number) => string;
-    /**
      * Creates an instance of BindingDirective.
@@ -28,0 +23,0 @@ * @param binding - A binding that returns the data used to update the DOM.

dist/dts/directives/directive.d.ts

@@ -23,2 +23,18 @@ import { Behavior, BehaviorFactory } from "./behavior";
 /**
+ * A {@link Directive} that targets a named attribute or property on a node or object.
+ * @public
+ */
+export declare abstract class NamedTargetDirective extends Directive {
+    /**
+     * Gets/sets the name of the attribute or property that this
+     * directive is targeting on the associated node or object.
+     */
+    abstract targetName: string | undefined;
+    /**
+     * Creates a placeholder string based on the directive's index within the template.
+     * @param index - The index of the directive within the template.
+     */
+    createPlaceholder: (index: number) => string;
+}
+/**
  * Describes the shape of a behavior constructor that can be created by
@@ -25,0 +41,0 @@ * an {@link AttachedBehaviorDirective}.

dist/dts/index.d.ts

@@ -13,2 +13,4 @@ export * from "./platform";
 export * from "./observation/notifier";
+export { Splice } from "./observation/array-change-records";
+export { enableArrayObservation } from "./observation/array-observer";
 export { DOM } from "./dom";
@@ -15,0 +17,0 @@ export * from "./directives/behavior";

dist/dts/interfaces.d.ts

@@ -9,2 +9,10 @@ /**
 /**
+ * Allows for the creation of Constructable mixin classes.
+ *
+ * @public
+ */
+export declare type Constructable<T = {}> = {
+    new (...args: any[]): T;
+};
+/**
  * Reverses all readonly members, making them mutable.
@@ -11,0 +19,0 @@ * @internal

dist/esm/controller.js

@@ -0,4 +1,10 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { FASTElementDefinition } from "./fast-definitions";
 import { PropertyChangeNotifier } from "./observation/notifier";
-import { defaultExecutionContext, Observable } from "./observation/observable";
+import { defaultExecutionContext, Observable, observable, } from "./observation/observable";
 import { DOM } from "./dom";
@@ -107,26 +113,36 @@ const shadowRoots = new WeakMap();
     /**
-     * Adds styles to this element.
+     * Adds styles to this element. Providing an HTMLStyleElement will attach the element instance to the shadowRoot.
      * @param styles - The styles to add.
      */
     addStyles(styles) {
-        const sourceBehaviors = styles.behaviors;
         const target = getShadowRoot(this.element) ||
             this.element.getRootNode();
-        styles.addStylesTo(target);
-        if (sourceBehaviors !== null) {
-            this.addBehaviors(sourceBehaviors);
+        if (styles instanceof HTMLStyleElement) {
+            target.prepend(styles);
         }
+        else {
+            const sourceBehaviors = styles.behaviors;
+            styles.addStylesTo(target);
+            if (sourceBehaviors !== null) {
+                this.addBehaviors(sourceBehaviors);
+            }
+        }
     }
     /**
-     * Removes styles from this element.
+     * Removes styles from this element. Providing an HTMLStyleElement will detach the element instance from the shadowRoot.
      * @param styles - the styles to remove.
      */
     removeStyles(styles) {
-        const sourceBehaviors = styles.behaviors;
         const target = getShadowRoot(this.element) ||
             this.element.getRootNode();
-        styles.removeStylesFrom(target);
-        if (sourceBehaviors !== null) {
-            this.removeBehaviors(sourceBehaviors);
+        if (styles instanceof HTMLStyleElement) {
+            target.removeChild(styles);
         }
+        else {
+            const sourceBehaviors = styles.behaviors;
+            styles.removeStylesFrom(target);
+            if (sourceBehaviors !== null) {
+                this.removeBehaviors(sourceBehaviors);
+            }
+        }
     }
@@ -328,1 +344,4 @@ /**
 }
+__decorate([
+    observable
+], Controller.prototype, "isConnected", void 0);

dist/esm/directives/binding.js

 import { setCurrentEvent, } from "../observation/observable";
 import { Observable } from "../observation/observable";
 import { DOM } from "../dom";
-import { Directive } from "./directive";
+import { NamedTargetDirective } from "./directive";
 function normalBind(source, context) {
@@ -140,3 +140,3 @@ this.source = source;
  */
-export class BindingDirective extends Directive {
+export class BindingDirective extends NamedTargetDirective {
     /**
@@ -152,8 +152,3 @@ * Creates an instance of BindingDirective.
         this.updateTarget = updateAttributeTarget;
-        /**
-         * Creates a placeholder string based on the directive's index within the template.
-         * @param index - The index of the directive within the template.
-         */
-        this.createPlaceholder = DOM.createInterpolationPlaceholder;
-        this.isBindingVolatile = Observable.isVolatileBinding(this.bind);
+        this.isBindingVolatile = Observable.isVolatileBinding(this.binding);
     }
@@ -160,0 +155,0 @@ /**

dist/esm/directives/directive.js

@@ -15,2 +15,16 @@ import { DOM } from "../dom";
 /**
+ * A {@link Directive} that targets a named attribute or property on a node or object.
+ * @public
+ */
+export class NamedTargetDirective extends Directive {
+    constructor() {
+        super(...arguments);
+        /**
+         * Creates a placeholder string based on the directive's index within the template.
+         * @param index - The index of the directive within the template.
+         */
+        this.createPlaceholder = DOM.createInterpolationPlaceholder;
+    }
+}
+/**
  * A directive that attaches special behavior to an element via a custom attribute.
@@ -17,0 +31,0 @@ * @public

dist/esm/index.js

@@ -13,2 +13,3 @@ export * from "./platform";
 export * from "./observation/notifier";
+export { enableArrayObservation } from "./observation/array-observer";
 export { DOM } from "./dom";
@@ -15,0 +16,0 @@ export * from "./directives/behavior";

dist/esm/observation/array-change-records.js

@@ -251,3 +251,3 @@ import { emptyArray } from "../interfaces";
     let insertionOffset = 0;
-    for (let i = 0, ii = splices.length; i < ii; i++) {
+    for (let i = 0; i < splices.length; i++) {
         const current = splices[i];
@@ -254,0 +254,0 @@ current.index += insertionOffset;

dist/esm/template.js

 import { compileTemplate } from "./template-compiler";
 import { HTMLView } from "./view";
 import { DOM } from "./dom";
-import { Directive } from "./directives/directive";
+import { Directive, NamedTargetDirective } from "./directives/directive";
 import { BindingDirective } from "./directives/binding";
@@ -130,2 +130,4 @@ import { defaultExecutionContext } from "./observation/observable";
             value = new BindingDirective(value);
+        }
+        if (value instanceof NamedTargetDirective) {
             const match = lastAttributeNameRegex.exec(currentString);
@@ -132,0 +134,0 @@ if (match !== null) {

dist/esm/view.js

@@ -143,9 +143,4 @@ // A singleton Range instance used to efficiently remove ranges of DOM nodes.
         }
-        // Get the first node of the first view in the range.
-        range.setStart(views[0].firstChild, 0);
-        // Get the last node of the last view in the range. Then go one further
-        // because the deleteContents operation isn't inclusive of the end node.
-        // In all cases where we use this API, the node after the last node of
-        // the last view is the comment node that we use as a placeholder.
-        range.setEnd(views[views.length - 1].lastChild.nextSibling, 0);
+        range.setStartBefore(views[0].firstChild);
+        range.setEndAfter(views[views.length - 1].lastChild);
         range.deleteContents();
@@ -152,0 +147,0 @@ for (let i = 0, ii = views.length; i < ii; ++i) {

dist/fast-element.min.js

@@ -1,1 +0,15 @@
-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 F(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,this.parentContext=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 F 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 I 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 M(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 E(t,e){this.source=t,this.context=e,this.target.addEventListener(this.targetName,this)}function L(){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 H(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 z(t){this.target[this.targetName]=t}function Q(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 U extends ${constructor(t){super(),this.binding=t,this.bind=M,this.unbind=L,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=z,"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=E,this.unbind=_;break;default:this.cleanedTargetName=t,"class"===t&&(this.updateTarget=Q)}}targetAtContent(){this.updateTarget=H,this.unbind=P}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){A(t);const e=this.binding(this.source,this.context);A(null),!0!==e&&t.preventDefault()}}class W{addFactory(t){t.targetIndex=this.targetIndex,this.behaviorFactories.push(t)}captureContentBinding(t){t.targetAtContent(),this.addFactory(t)}reset(){this.behaviorFactories=[],this.targetIndex=-1}release(){D=this}static borrow(t){const e=D||new W;return e.directives=t,e.reset(),D=null,e}}let D=null;function K(t){if(1===t.length)return t[0];let e;const s=t.length,i=t.map(t=>"string"==typeof t?()=>t:(e=t.targetName||e,t.binding)),n=new U((t,e)=>{let n="";for(let o=0;o<s;++o)n+=i[o](t,e);return n});return n.targetName=e,n}const G=l.length;function J(t,e){const s=e.split(r);if(1===s.length)return null;const i=[];for(let e=0,n=s.length;e<n;++e){const n=s[e],o=n.indexOf(l);let r;if(-1===o)r=n;else{const e=parseInt(n.substring(0,o));i.push(t.directives[e]),r=n.substring(o+G)}""!==r&&i.push(r)}return i}function X(t,e,s=!1){const i=e.attributes;for(let n=0,o=i.length;n<o;++n){const r=i[n],l=r.value,h=J(t,l);let a=null;null===h?s&&(a=new U(()=>l),a.targetName=r.name):a=K(h),null!==a&&(e.removeAttributeNode(r),n--,o--,t.addFactory(a))}}function Y(t,e,s){const i=J(t,e.textContent);if(null!==i){let n=e;for(let o=0,r=i.length;o<r;++o){const r=i[o],l=0===o?e:n.parentNode.insertBefore(document.createTextNode(""),n.nextSibling);"string"==typeof r?l.textContent=r:(l.textContent=" ",t.captureContentBinding(r)),n=l,t.targetIndex++,l!==e&&s.nextNode()}t.targetIndex--}}function Z(t,e){const s=t.content;document.adoptNode(s);const i=W.borrow(e);X(i,t,!0);const n=i.behaviorFactories;i.reset();const o=h.createTemplateWalker(s);let r;for(;r=o.nextNode();)switch(i.targetIndex++,r.nodeType){case 1:X(i,r);break;case 3:Y(i,r,o);break;case 8:h.isMarker(r)&&i.addFactory(e[h.extractDirectiveIndexFromMarker(r)])}let l=0;h.isMarker(s.firstChild)&&(s.insertBefore(document.createComment(""),s.firstChild),l=-1);const a=i.behaviorFactories;return i.release(),{fragment:s,viewBehaviorFactories:a,hostBehaviorFactories:n,targetOffset:l}}const tt=document.createRange();class et{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){tt.setStart(t[0].firstChild,0),tt.setEnd(t[t.length-1].lastChild.nextSibling,0),tt.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 st{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=Z(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 et(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 it=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function nt(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 st){const t=r;r=()=>t}if("function"==typeof r){r=new U(r);const t=it.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 st(i,s)}const ot=new Map;class rt{constructor(){this.behaviors=null}withBehaviors(...t){return this.behaviors=null===this.behaviors?t:this.behaviors.concat(t),this}withKey(t){return ot.set(t,this),this}static find(t){return ot.get(t)||null}}function lt(t){return t.map(t=>t instanceof rt?lt(t.styles):[t]).reduce((t,e)=>t.concat(e),[])}function ht(t){return t.map(t=>t instanceof rt?t.behaviors:null).reduce((t,e)=>null===e?t:(null===t&&(t=[]),t.concat(e)),null)}rt.create=(()=>{if(h.supportsAdoptedStyleSheets){const t=new Map;return e=>new at(e,t)}return t=>new dt(t)})();class at extends rt{constructor(t,e){super(),this.styles=t,this.behaviors=null,this.behaviors=ht(t),this.styleSheets=lt(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 ct=0;class dt extends rt{constructor(t){super(),this.styles=t,this.behaviors=null,this.behaviors=ht(t),this.styleSheets=lt(t),this.styleClass="fast-style-class-"+ ++ct}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 ut(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 rt||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),rt.create(s)}const ft={toView:t=>t?"true":"false",fromView:t=>null!=t&&"false"!==t&&!1!==t&&0!==t},pt={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=ft)}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 gt(t,i)):s.push(new gt(t,i.property,i.attribute,i.mode,i.converter))}}return s}}function bt(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 vt={mode:"open"},mt={},yt=new Map;class Ct{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?vt:null===e.shadowOptions?void 0:Object.assign(Object.assign({},vt),e.shadowOptions),this.elementOptions=void 0===e.elementOptions?mt:Object.assign(Object.assign({},mt),e.elementOptions),this.styles=void 0===e.styles?void 0:Array.isArray(e.styles)?rt.create(e.styles):e.styles instanceof rt?e.styles:rt.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}),yt.set(e,this),this.isDefined=!0}return t.get(this.name)||t.define(this.name,e,this.elementOptions),this}static forType(t){return yt.get(t)}}const xt=new WeakMap,wt={bubbles:!0,composed:!0};function Bt(t){return t.shadowRoot||xt.get(t)||null}class Ot 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&&xt.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=Bt(this.element)||this.element.getRootNode();t.addStylesTo(s),null!==e&&this.addBehaviors(e)}removeStyles(t){const e=t.behaviors,s=Bt(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},wt),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=Bt(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=Ct.forType(t.constructor);if(void 0===s)throw new Error("Missing FASTElement definition.");return t.$fastController=new Ot(t,s)}}function St(t){return class extends t{constructor(){super(),Ot.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 Nt=Object.assign(St(HTMLElement),{from:t=>St(t),define:(t,e)=>new Ct(t,e).define().type});function Tt(t){return function(e){new Ct(e,t).define()}}const At=Object.freeze([]);class kt{constructor(t,e){this.target=t,this.propertyName=e}bind(t){t[this.propertyName]=this.target}unbind(){}}function Vt(t){return new I("fast-ref",kt,t)}function Ft(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 At;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 Mt=Array.prototype.push;function Et(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);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];Et(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 Pt=!1;function _t(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 jt 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):It(this.source,0,this.source.length,e,0,e.length);this.notify(s)}}const Rt=Object.freeze({positioning:!1});function Ht(t,e,s,i){t.bind(e[s],i)}function zt(t,e,s,i){const n=Object.create(i);n.index=s,n.length=e.length,t.bind(e[s],n)}class Qt{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=Ht,this.itemsBindingObserver=x.binding(e,this,s),this.templateBindingObserver=x.binding(i,this,n),o.positioning&&(this.bindView=zt)}bind(t,e){this.source=t,this.originalContext=e,this.childContext=Object.create(e),this.childContext.parent=t,this.childContext.parentContext=this.originalContext,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)&&(et.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 Ut extends ${constructor(t,e,s){super(),this.itemsBinding=t,this.templateBinding=e,this.options=s,this.createPlaceholder=h.createBlockPlaceholder,function(){if(Pt)return;Pt=!0,x.setArrayObserverFactory(t=>new jt(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(_t($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(_t($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(_t($t(0,[],arguments.length),this)),t}}(),this.isItemsBindingVolatile=x.isVolatileBinding(t),this.isTemplateBindingVolatile=x.isVolatileBinding(e)}createBehavior(t){return new Qt(t,this.itemsBinding,this.isItemsBindingVolatile,this.templateBinding,this.isTemplateBindingVolatile,this.options)}}function qt(t,e,s=Rt){return new Ut(t,"function"==typeof e?e:()=>e,s)}function Wt(t){return t?function(e,s,i){return 1===e.nodeType&&e.matches(t)}:function(t,e,s){return 1===t.nodeType}}class Dt{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(At),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 Kt extends Dt{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 Gt(t){return"string"==typeof t&&(t={property:t}),new I("fast-slotted",Kt,t)}class Jt extends Dt{constructor(t,e){super(t,e),this.observer=null,e.childList=!0}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"subtree"in this.options?Array.from(this.target.querySelectorAll(this.options.selector)):Array.from(this.target.childNodes)}}function Xt(t){return"string"==typeof t&&(t={property:t}),new I("fast-children",Jt,t)}export{t as $global,I as AttachedBehaviorDirective,gt as AttributeDefinition,q as BindingBehavior,U as BindingDirective,Jt as ChildrenBehavior,Ot as Controller,h as DOM,$ as Directive,rt as ElementStyles,k as ExecutionContext,Nt as FASTElement,Ct as FASTElementDefinition,et as HTMLView,x as Observable,p as PropertyChangeNotifier,kt as RefBehavior,Qt as RepeatBehavior,Ut as RepeatDirective,Kt as SlottedBehavior,f as SubscriberSet,st as ViewTemplate,bt as attr,ft as booleanConverter,Xt as children,Z as compileTemplate,ut as css,Tt as customElement,V as defaultExecutionContext,Wt as elements,At as emptyArray,nt as html,pt as nullableNumberConverter,S as observable,Vt as ref,qt as repeat,A as setCurrentEvent,Gt as slotted,N as volatile,Ft 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 F(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 T(t,e,s){return Object.assign({},s,{get:function(){return B(),s.get.apply(this)}})}let N=null;function A(t){N=t}class k{constructor(){this.index=0,this.length=0,this.parent=null,this.parentContext=null}get event(){return N}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 F 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 M{constructor(){this.targetIndex=0}}class $ extends M{constructor(){super(...arguments),this.createPlaceholder=h.createInterpolationPlaceholder}}class I extends M{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 E(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 P(){this.bindingObserver.disconnect(),this.source=null,this.context=null}function _(){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 j(){this.target.removeEventListener(this.targetName,this),this.source=null,this.context=null}function R(t){h.setAttribute(this.target,this.targetName,t)}function H(t){h.setBooleanAttribute(this.target,this.targetName,t)}function z(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 Q(t){this.target[this.targetName]=t}function U(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=E,this.unbind=P,this.updateTarget=R,this.isBindingVolatile=x.isVolatileBinding(this.binding)}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=Q,"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=H;break;case"@":this.cleanedTargetName=t.substr(1),this.bind=L,this.unbind=j;break;default:this.cleanedTargetName=t,"class"===t&&(this.updateTarget=U)}}targetAtContent(){this.updateTarget=z,this.unbind=_}createBehavior(t){return new D(t,this.binding,this.isBindingVolatile,this.bind,this.unbind,this.updateTarget,this.cleanedTargetName)}}class D{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()}}class W{addFactory(t){t.targetIndex=this.targetIndex,this.behaviorFactories.push(t)}captureContentBinding(t){t.targetAtContent(),this.addFactory(t)}reset(){this.behaviorFactories=[],this.targetIndex=-1}release(){K=this}static borrow(t){const e=K||new W;return e.directives=t,e.reset(),K=null,e}}let K=null;function G(t){if(1===t.length)return t[0];let e;const s=t.length,i=t.map(t=>"string"==typeof t?()=>t:(e=t.targetName||e,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 J=l.length;function X(t,e){const s=e.split(r);if(1===s.length)return null;const i=[];for(let e=0,n=s.length;e<n;++e){const n=s[e],o=n.indexOf(l);let r;if(-1===o)r=n;else{const e=parseInt(n.substring(0,o));i.push(t.directives[e]),r=n.substring(o+J)}""!==r&&i.push(r)}return i}function Y(t,e,s=!1){const i=e.attributes;for(let n=0,o=i.length;n<o;++n){const r=i[n],l=r.value,h=X(t,l);let a=null;null===h?s&&(a=new q(()=>l),a.targetName=r.name):a=G(h),null!==a&&(e.removeAttributeNode(r),n--,o--,t.addFactory(a))}}function Z(t,e,s){const i=X(t,e.textContent);if(null!==i){let n=e;for(let o=0,r=i.length;o<r;++o){const r=i[o],l=0===o?e:n.parentNode.insertBefore(document.createTextNode(""),n.nextSibling);"string"==typeof r?l.textContent=r:(l.textContent=" ",t.captureContentBinding(r)),n=l,t.targetIndex++,l!==e&&s.nextNode()}t.targetIndex--}}function tt(t,e){const s=t.content;document.adoptNode(s);const i=W.borrow(e);Y(i,t,!0);const n=i.behaviorFactories;i.reset();const o=h.createTemplateWalker(s);let r;for(;r=o.nextNode();)switch(i.targetIndex++,r.nodeType){case 1:Y(i,r);break;case 3:Z(i,r,o);break;case 8:h.isMarker(r)&&i.addFactory(e[h.extractDirectiveIndexFromMarker(r)])}let l=0;h.isMarker(s.firstChild)&&(s.insertBefore(document.createComment(""),s.firstChild),l=-1);const a=i.behaviorFactories;return i.release(),{fragment:s,viewBehaviorFactories:a,hostBehaviorFactories:n,targetOffset:l}}const et=document.createRange();class st{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){et.setStartBefore(t[0].firstChild),et.setEndAfter(t[t.length-1].lastChild),et.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 it{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=tt(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 st(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 nt=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function ot(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 it){const t=r;r=()=>t}if("function"==typeof r&&(r=new q(r)),r instanceof $){const t=nt.exec(o);null!==t&&(r.targetName=t[2])}r instanceof M?(i+=r.createPlaceholder(s.length),s.push(r)):i+=r}return i+=t[t.length-1],new it(i,s)}
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */const rt=new Map;class lt{constructor(){this.behaviors=null}withBehaviors(...t){return this.behaviors=null===this.behaviors?t:this.behaviors.concat(t),this}withKey(t){return rt.set(t,this),this}static find(t){return rt.get(t)||null}}function ht(t){return t.map(t=>t instanceof lt?ht(t.styles):[t]).reduce((t,e)=>t.concat(e),[])}function at(t){return t.map(t=>t instanceof lt?t.behaviors:null).reduce((t,e)=>null===e?t:(null===t&&(t=[]),t.concat(e)),null)}lt.create=(()=>{if(h.supportsAdoptedStyleSheets){const t=new Map;return e=>new ct(e,t)}return t=>new ut(t)})();class ct extends lt{constructor(t,e){super(),this.styles=t,this.behaviors=null,this.behaviors=at(t),this.styleSheets=ht(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 dt=0;class ut extends lt{constructor(t){super(),this.styles=t,this.behaviors=null,this.behaviors=at(t),this.styleSheets=ht(t),this.styleClass="fast-style-class-"+ ++dt}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 ft(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 lt||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),lt.create(s)}const pt={toView:t=>t?"true":"false",fromView:t=>null!=t&&"false"!==t&&!1!==t&&0!==t},gt={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 bt{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=pt)}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 bt(t,i)):s.push(new bt(t,i.property,i.attribute,i.mode,i.converter))}}return s}}function vt(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 mt={mode:"open"},yt={},Ct=new Map;class xt{constructor(t,e=t.definition){"string"==typeof e&&(e={name:e}),this.type=t,this.name=e.name,this.template=e.template;const s=bt.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?mt:null===e.shadowOptions?void 0:Object.assign(Object.assign({},mt),e.shadowOptions),this.elementOptions=void 0===e.elementOptions?yt:Object.assign(Object.assign({},yt),e.elementOptions),this.styles=void 0===e.styles?void 0:Array.isArray(e.styles)?lt.create(e.styles):e.styles instanceof lt?e.styles:lt.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}),Ct.set(e,this),this.isDefined=!0}return t.get(this.name)||t.define(this.name,e,this.elementOptions),this}static forType(t){return Ct.get(t)}}const wt=new WeakMap,Bt={bubbles:!0,composed:!0};function Ot(t){return t.shadowRoot||wt.get(t)||null}class St 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&&wt.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=Ot(this.element)||this.element.getRootNode();if(t instanceof HTMLStyleElement)e.prepend(t);else{const s=t.behaviors;t.addStylesTo(e),null!==s&&this.addBehaviors(s)}}removeStyles(t){const e=Ot(this.element)||this.element.getRootNode();if(t instanceof HTMLStyleElement)e.removeChild(t);else{const s=t.behaviors;t.removeStylesFrom(e),null!==s&&this.removeBehaviors(s)}}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},Bt),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=Ot(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=xt.forType(t.constructor);if(void 0===s)throw new Error("Missing FASTElement definition.");return t.$fastController=new St(t,s)}}function Tt(t){return class extends t{constructor(){super(),St.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)}}}!function(t,e,s,i){var n,o=arguments.length,r=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,s,i);else for(var l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(e,s,r):n(e,s))||r);o>3&&r&&Object.defineProperty(e,s,r)}([S],St.prototype,"isConnected",void 0);const Nt=Object.assign(Tt(HTMLElement),{from:t=>Tt(t),define:(t,e)=>new xt(t,e).define().type});function At(t){return function(e){new xt(e,t).define()}}const kt=Object.freeze([]);function Vt(t,e,s){return{index:t,removed:e,addedCount:s}}function Ft(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 kt;if(e===s){const t=Vt(e,[],0);for(;n<o;)t.removed.push(i[n++]);return[t]}if(n===o)return[Vt(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=Vt(u,[],0)),d.addedCount++,u++,d.removed.push(i[f]),f++;break;case 2:void 0===d&&(d=Vt(u,[],0)),d.addedCount++,u++;break;case 3:void 0===d&&(d=Vt(u,[],0)),d.removed.push(i[f]),f++}return void 0!==d&&c.push(d),c}const Mt=Array.prototype.push;function $t(t,e,s,i){const n=Vt(e,s,i);let o=!1,r=0;for(let e=0;e<t.length;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 It(t,e){let s=[];const i=function(t){const e=[];for(let s=0,i=t.length;s<i;s++){const i=t[s];$t(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(Ft(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 Lt(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 Pt 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?It(this.source,t):Ft(this.source,0,this.source.length,e,0,e.length);this.notify(s)}}function _t(){if(Et)return;Et=!0,x.setArrayObserverFactory(t=>new Pt(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(Vt(this.length,[s],0)),s},t.push=function(){const t=s.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Lt(Vt(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(Vt(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(Lt(Vt(+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(Lt(Vt(0,[],arguments.length),this)),t}}class jt{constructor(t,e){this.target=t,this.propertyName=e}bind(t){t[this.propertyName]=this.target}unbind(){}}function Rt(t){return new I("fast-ref",jt,t)}function Ht(t,e){const s="function"==typeof e?e:()=>e;return(e,i)=>t(e,i)?s(e,i):null}const zt=Object.freeze({positioning:!1});function Qt(t,e,s,i){t.bind(e[s],i)}function Ut(t,e,s,i){const n=Object.create(i);n.index=s,n.length=e.length,t.bind(e[s],n)}class qt{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=Qt,this.itemsBindingObserver=x.binding(e,this,s),this.templateBindingObserver=x.binding(i,this,n),o.positioning&&(this.bindView=Ut)}bind(t,e){this.source=t,this.originalContext=e,this.childContext=Object.create(e),this.childContext.parent=t,this.childContext.parentContext=this.originalContext,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)&&(st.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 Dt extends M{constructor(t,e,s){super(),this.itemsBinding=t,this.templateBinding=e,this.options=s,this.createPlaceholder=h.createBlockPlaceholder,_t(),this.isItemsBindingVolatile=x.isVolatileBinding(t),this.isTemplateBindingVolatile=x.isVolatileBinding(e)}createBehavior(t){return new qt(t,this.itemsBinding,this.isItemsBindingVolatile,this.templateBinding,this.isTemplateBindingVolatile,this.options)}}function Wt(t,e,s=zt){return new Dt(t,"function"==typeof e?e:()=>e,s)}function Kt(t){return t?function(e,s,i){return 1===e.nodeType&&e.matches(t)}:function(t,e,s){return 1===t.nodeType}}class Gt{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(kt),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 Jt extends Gt{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 Xt(t){return"string"==typeof t&&(t={property:t}),new I("fast-slotted",Jt,t)}class Yt extends Gt{constructor(t,e){super(t,e),this.observer=null,e.childList=!0}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"subtree"in this.options?Array.from(this.target.querySelectorAll(this.options.selector)):Array.from(this.target.childNodes)}}function Zt(t){return"string"==typeof t&&(t={property:t}),new I("fast-children",Yt,t)}export{t as $global,I as AttachedBehaviorDirective,bt as AttributeDefinition,D as BindingBehavior,q as BindingDirective,Yt as ChildrenBehavior,St as Controller,h as DOM,M as Directive,lt as ElementStyles,k as ExecutionContext,Nt as FASTElement,xt as FASTElementDefinition,st as HTMLView,$ as NamedTargetDirective,x as Observable,p as PropertyChangeNotifier,jt as RefBehavior,qt as RepeatBehavior,Dt as RepeatDirective,Jt as SlottedBehavior,f as SubscriberSet,it as ViewTemplate,vt as attr,pt as booleanConverter,Zt as children,tt as compileTemplate,ft as css,At as customElement,V as defaultExecutionContext,Kt as elements,kt as emptyArray,_t as enableArrayObservation,ot as html,gt as nullableNumberConverter,S as observable,Rt as ref,Wt as repeat,A as setCurrentEvent,Xt as slotted,T as volatile,Ht as when};

docs/api-report.md

@@ -111,3 +111,3 @@ ## API Report File for "@microsoft/fast-element"
 // @public
-export class BindingDirective extends Directive {
+export class BindingDirective extends NamedTargetDirective {
     constructor(binding: Binding);
@@ -117,3 +117,2 @@ // (undocumented)
     createBehavior(target: Node): BindingBehavior;
-    createPlaceholder: (index: number) => string;
     targetAtContent(): void;
@@ -179,2 +178,7 @@ get targetName(): string | undefined;
 // @public
+export type Constructable<T = {}> = {
+    new (...args: any[]): T;
+};
+
+// @public
 export class Controller extends PropertyChangeNotifier {
@@ -184,3 +188,3 @@ // @internal
     addBehaviors(behaviors: ReadonlyArray<Behavior>): void;
-    addStyles(styles: ElementStyles): void;
+    addStyles(styles: ElementStyles | HTMLStyleElement): void;
     readonly definition: FASTElementDefinition;
@@ -195,3 +199,3 @@ readonly element: HTMLElement;
     removeBehaviors(behaviors: ReadonlyArray<Behavior>): void;
-    removeStyles(styles: ElementStyles): void;
+    removeStyles(styles: ElementStyles | HTMLStyleElement): void;
     get styles(): ElementStyles | null;
@@ -280,2 +284,5 @@ set styles(value: ElementStyles | null);
 // @public
+export function enableArrayObservation(): void;
+
+// @public
 export class ExecutionContext<TParent = any, TGrandparent = any> {
@@ -361,2 +368,8 @@ get event(): Event;
 // @public
+export abstract class NamedTargetDirective extends Directive {
+    createPlaceholder: (index: number) => string;
+    abstract targetName: string | undefined;
+}
+
+// @public
 export interface NodeBehaviorOptions<T = any> {
@@ -430,4 +443,2 @@ filter?(value: Node, index: number, array: Node[]): boolean;
     bind(source: TSource, context: ExecutionContext): void;
-    // Warning: (ae-forgotten-export) The symbol "Splice" needs to be exported by the entry point index.d.ts
-    //
     // @internal (undocumented)
@@ -471,2 +482,9 @@ handleChange(source: any, args: Splice[]): void;
 // @public
+export interface Splice {
+    addedCount: number;
+    index: number;
+    removed: any[];
+}
+
+// @public
 export interface StyleTarget {
@@ -473,0 +491,0 @@ adoptedStyleSheets?: CSSStyleSheet[];

docs/guide/observables-and-state.md

@@ -146,5 +146,34 @@ ---
 
+## Observing Arrays
+
+So far, we've only seen how to observe properties on objects, but it's also possible to observe arrays for changes. Given an instance of an array, it can be observed like this:
+
+**Example: Observing an Array**
+
+```ts
+const arr = [];
+const notifier = Observable.getNotifier(arr);
+const handler = {
+  handleChange(source: any, splices: Splice[]) {
+    // respond to the change here
+    // source will be the array instance
+    // splices will be an array of change records
+    // describing the mutations in the array in
+    // terms of splice operations
+  }
+};
+
+notifier.subscribe(handler);
+```
+
+There are a couple of important details to note with array observation:
+
+* The `fast-element` library's ability to observe arrays is opt-in, in order that the functionality remain tree-shakeable. If you use a `repeat` directive anywhere in your code, you will be automatically opted in. However, if you wish to use the above APIs and are not using `repeat`, you will need to enable array observation by importing and calling the `enableArrayObservation()` function.
+* The observation system cannot track changes made directly through an index update. e.g. `arr[3] = 'new value';`. This is due to a limitation in JavaScript. To work around this, update arrays with the equivalent `splice` code e.g. `arr.splice(3, 1, 'new value');`
+* If the array is a property of an object, you will often want to observe both the property and the array. Observing the property will allow you to detect when the array instance is completely replaced on the object, while observing the array will allow you to detect changes in the array instance itself. When the property changes, be sure to unsubscribe to the old array and set up a subscription to the new array instance.
+* Observing an array only notifies on changes to the array itself. It does not notify on changes to properties on objects held within the array. Separate observers would need to be set up for those individual properties. These could be set up and torn down in response to changes in the array though.
+
 ## Bindings
 
-In addition to watching basic properties, you can also watch arbitrary bindings.
+In addition to watching properties and arrays, you can also watch arbitrary bindings.
 
@@ -151,0 +180,0 @@ **Example: Subscribing to a Binding**

package.json

@@ -5,3 +5,3 @@ {
   "sideEffects": false,
-  "version": "0.19.1",
+  "version": "0.20.0",
   "author": {
@@ -26,5 +26,7 @@ "name": "Microsoft",
     "doc:ci": "api-extractor run",
-    "build": "tsc -p ./tsconfig.json && rollup -c && npm run doc",
+    "build": "yarn build:tsc && yarn build:rollup && yarn doc",
+    "build:rollup": "rollup -c",
+    "build:tsc": "tsc -p ./tsconfig.json",
     "dev": "tsc -p ./tsconfig.json -w",
-    "tdd": "npm run dev & npm run test-chrome:watch",
+    "tdd": "yarn dev & yarn test-chrome:watch",
     "prepare": "yarn clean:dist && yarn build",
@@ -64,3 +66,3 @@ "prettier": "prettier --config ../../../.prettierrc --write \"**/*.ts\"",
     "karma-coverage-istanbul-reporter": "^3.0.0",
-    "karma-firefox-launcher": "^1.3.0",
+    "karma-firefox-launcher": "^2.1.0",
     "karma-mocha": "^2.0.1",
@@ -87,3 +89,3 @@ "karma-mocha-reporter": "^2.2.5",
   },
-  "gitHead": "246038378023656f6e7a0443bee907d6d3ab1a5d"
+  "gitHead": "f31ce66fab5b6962d8f4c18eb1a065aeac06e1fc"
 }

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

877571

increased by2.23%

Lines of code

20826

increased by1.77%

No dependency changes