@microsoft/fast-element 1.4.1 → 1.6.0

package/CHANGELOG.json

@@ -2,7 +2,88 @@
   "name": "@microsoft/fast-element",
   "entries": [
     {
-      "date": "Wed, 28 Jul 2021 07:14:40 GMT",
+      "date": "Fri, 08 Oct 2021 19:51:03 GMT",
+      "tag": "@microsoft/fast-element_v1.6.0",
+      "version": "1.6.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "feat(fast-element): expose a method for processing the update queue",
+            "author": "roeisenb@microsoft.com",
+            "commit": "d49d1ecc65ee74b7efb33b5a67fcad5fcead7342",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 08 Sep 2021 07:16:17 GMT",
+      "tag": "@microsoft/fast-element_v1.5.1",
+      "version": "1.5.1",
+      "comments": {
+        "patch": [
+          {
+            "comment": "perf(Controller): reduce object allocation needed for isConnected prop",
+            "author": "roeisenb@microsoft.com",
+            "commit": "bdd28c8861b3523a9984ca8feda2af9019861a8a",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 27 Aug 2021 14:14:26 GMT",
+      "tag": "@microsoft/fast-element_v1.5.0",
+      "version": "1.5.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Adds capability to Observable to subscribe to any observable property change for an object",
+            "author": "nicholasrice@users.noreply.github.com",
+            "commit": "e498f1e35232169d2bf80e366350d0cde812d76d",
+            "package": "@microsoft/fast-element"
+          },
+          {
+            "comment": "ensure HTMLStyleElement DOM order matches call addStylesTo() call order",
+            "author": "nicholasrice@users.noreply.github.com",
+            "commit": "e43c49b26457f6bdca34b91bbaa8658359e4b2d5",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 26 Aug 2021 07:17:43 GMT",
+      "tag": "@microsoft/fast-element_v1.4.2",
+      "version": "1.4.2",
+      "comments": {
+        "patch": [
+          {
+            "comment": "feat(fast-element): make the task queue resilient to task exceptions",
+            "author": "roeisenb@microsoft.com",
+            "commit": "0e03f23e37b83cd1b428c01cc0e3d4c2dd9f69bd",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 03 Aug 2021 07:17:33 GMT",
+      "tag": "@microsoft/fast-element_v1.4.1",
+      "version": "1.4.1",
+      "comments": {
+        "none": [
+          {
+            "comment": "chore: eslint fixes in fast-element",
+            "author": "mathieu.lavoie@logmein.com",
+            "commit": "65e86a86cbf2b584f7a76081a9bef5a76e78b6f3",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 28 Jul 2021 07:17:22 GMT",
       "tag": "@microsoft/fast-element_v1.4.1",
       "version": "1.4.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @microsoft/fast-element
 
-This log was last generated on Wed, 28 Jul 2021 07:14:40 GMT and should not be manually modified.
+This log was last generated on Fri, 08 Oct 2021 19:51:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.6.0
+
+Fri, 08 Oct 2021 19:51:03 GMT
+
+### Minor changes
+
+- feat(fast-element): expose a method for processing the update queue (roeisenb@microsoft.com)
+
+## 1.5.1
+
+Wed, 08 Sep 2021 07:16:17 GMT
+
+### Patches
+
+- perf(Controller): reduce object allocation needed for isConnected prop (roeisenb@microsoft.com)
+
+## 1.5.0
+
+Fri, 27 Aug 2021 14:14:26 GMT
+
+### Minor changes
+
+- Adds capability to Observable to subscribe to any observable property change for an object (nicholasrice@users.noreply.github.com)
+- ensure HTMLStyleElement DOM order matches call addStylesTo() call order (nicholasrice@users.noreply.github.com)
+
+## 1.4.2
+
+Thu, 26 Aug 2021 07:17:43 GMT
+
+### Patches
+
+- feat(fast-element): make the task queue resilient to task exceptions (roeisenb@microsoft.com)
+
 ## 1.4.1
 
-Wed, 28 Jul 2021 07:14:40 GMT
+Wed, 28 Jul 2021 07:17:22 GMT
 
 ### Patches
 

package/dist/dts/components/controller.d.ts

@@ -15,6 +15,15 @@ export declare class Controller extends PropertyChangeNotifier {
     private _template;
     private _styles;
     private _isConnected;
+    /**
+     * This allows Observable.getNotifier(...) to return the Controller
+     * when the notifier for the Controller itself is being requested. The
+     * result is that the Observable system does not need to create a separate
+     * instance of Notifier for observables on the Controller. The component and
+     * the controller will now share the same notifier, removing one-object construct
+     * per web component instance.
+     */
+    private readonly $fastController;
     /**
      * The element being controlled by this controller.
      */

package/dist/dts/dom.d.ts

@@ -68,6 +68,14 @@ export declare const DOM: Readonly<{
      * @param callable - The callable function or object to queue.
      */
     queueUpdate(callable: Callable): void;
+    /**
+     * Immediately processes all work previously scheduled
+     * through queueUpdate.
+     * @remarks
+     * This also forces nextUpdate promises
+     * to resolve.
+     */
+    processUpdates(): void;
     /**
      * Resolves with the next DOM update.
      */

package/dist/dts/observation/notifier.d.ts

@@ -97,6 +97,7 @@ export declare class SubscriberSet implements Notifier {
  */
 export declare class PropertyChangeNotifier implements Notifier {
     private subscribers;
+    private sourceSubscribers;
     /**
      * The source that property changes are being notified for.
      */
@@ -116,11 +117,11 @@ export declare class PropertyChangeNotifier implements Notifier {
      * @param subscriber - The object that is subscribing for change notification.
      * @param propertyToWatch - The name of the property that the subscriber is interested in watching for changes.
      */
-    subscribe(subscriber: Subscriber, propertyToWatch: string): void;
+    subscribe(subscriber: Subscriber, propertyToWatch?: string): void;
     /**
      * Unsubscribes from notification of changes in an object's state.
      * @param subscriber - The object that is unsubscribing from change notification.
      * @param propertyToUnwatch - The name of the property that the subscriber is no longer interested in watching.
      */
-    unsubscribe(subscriber: Subscriber, propertyToUnwatch: string): void;
+    unsubscribe(subscriber: Subscriber, propertyToUnwatch?: string): void;
 }

package/dist/dts/styles/element-styles.d.ts

@@ -9,9 +9,15 @@ export interface StyleTarget {
      */
     adoptedStyleSheets?: CSSStyleSheet[];
     /**
-     * Adds styles to the target.
+     * Adds styles to the target by appending the styles.
      * @param styles - The styles element to add.
      */
+    append(styles: HTMLStyleElement): void;
+    /**
+     * Adds styles to the target by prepending the styles.
+     * @param styles - The styles element to add.
+     * @deprecated - use append()
+     */
     prepend(styles: HTMLStyleElement): void;
     /**
      * Removes styles from the target.

package/dist/esm/components/controller.js

@@ -31,6 +31,15 @@ export class Controller extends PropertyChangeNotifier {
         this._template = null;
         this._styles = null;
         this._isConnected = false;
+        /**
+         * This allows Observable.getNotifier(...) to return the Controller
+         * when the notifier for the Controller itself is being requested. The
+         * result is that the Observable system does not need to create a separate
+         * instance of Notifier for observables on the Controller. The component and
+         * the controller will now share the same notifier, removing one-object construct
+         * per web component instance.
+         */
+        this.$fastController = this;
         /**
          * The view associated with the custom element.
          * @remarks
@@ -120,7 +129,7 @@ export class Controller extends PropertyChangeNotifier {
         const target = getShadowRoot(this.element) ||
             this.element.getRootNode();
         if (styles instanceof HTMLStyleElement) {
-            target.prepend(styles);
+            target.append(styles);
         }
         else if (!styles.isAttachedTo(target)) {
             const sourceBehaviors = styles.behaviors;

package/dist/esm/dom.js

@@ -6,29 +6,21 @@ const fastHTMLPolicy = $global.trustedTypes.createPolicy("fast-html", {
 });
 /* eslint-enable */
 let htmlPolicy = fastHTMLPolicy;
-function processQueue() {
-    const capacity = 1024;
-    let index = 0;
-    while (index < updateQueue.length) {
-        const task = updateQueue[index];
+// We use a queue so we can ensure errors are thrown in order.
+const pendingErrors = [];
+function throwFirstError() {
+    if (pendingErrors.length) {
+        throw pendingErrors.shift();
+    }
+}
+function tryRunTask(task) {
+    try {
         task.call();
-        index++;
-        // Prevent leaking memory for long chains of recursive calls to `queueMicroTask`.
-        // If we call `queueMicroTask` within a MicroTask scheduled by `queueMicroTask`, the queue will
-        // grow, but to avoid an O(n) walk for every MicroTask we execute, we don't
-        // shift MicroTasks off the queue after they have been executed.
-        // Instead, we periodically shift 1024 MicroTasks off the queue.
-        if (index > capacity) {
-            // Manually shift all values starting at the index back to the
-            // beginning of the queue.
-            for (let scan = 0, newLength = updateQueue.length - index; scan < newLength; scan++) {
-                updateQueue[scan] = updateQueue[scan + index];
-            }
-            updateQueue.length -= index;
-            index = 0;
-        }
     }
-    updateQueue.length = 0;
+    catch (error) {
+        pendingErrors.push(error);
+        setTimeout(throwFirstError, 0);
+    }
 }
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 /** @internal */
@@ -118,10 +110,40 @@ export const DOM = Object.freeze({
      */
     queueUpdate(callable) {
         if (updateQueue.length < 1) {
-            window.requestAnimationFrame(processQueue);
+            window.requestAnimationFrame(DOM.processUpdates);
         }
         updateQueue.push(callable);
     },
+    /**
+     * Immediately processes all work previously scheduled
+     * through queueUpdate.
+     * @remarks
+     * This also forces nextUpdate promises
+     * to resolve.
+     */
+    processUpdates() {
+        const capacity = 1024;
+        let index = 0;
+        while (index < updateQueue.length) {
+            tryRunTask(updateQueue[index]);
+            index++;
+            // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.
+            // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will
+            // grow, but to avoid an O(n) walk for every task we execute, we don't
+            // shift tasks off the queue after they have been executed.
+            // Instead, we periodically shift 1024 tasks off the queue.
+            if (index > capacity) {
+                // Manually shift all values starting at the index back to the
+                // beginning of the queue.
+                for (let scan = 0, newLength = updateQueue.length - index; scan < newLength; scan++) {
+                    updateQueue[scan] = updateQueue[scan + index];
+                }
+                updateQueue.length -= index;
+                index = 0;
+            }
+        }
+        updateQueue.length = 0;
+    },
     /**
      * Resolves with the next DOM update.
      */

package/dist/esm/observation/notifier.js

@@ -117,6 +117,7 @@ export class PropertyChangeNotifier {
      */
     constructor(source) {
         this.subscribers = {};
+        this.sourceSubscribers = null;
         this.source = source;
     }
     /**
@@ -124,10 +125,12 @@ export class PropertyChangeNotifier {
      * @param propertyName - The property name, passed along to subscribers during notification.
      */
     notify(propertyName) {
+        var _a;
         const subscribers = this.subscribers[propertyName];
         if (subscribers !== void 0) {
             subscribers.notify(propertyName);
         }
+        (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.notify(propertyName);
     }
     /**
      * Subscribes to notification of changes in an object's state.
@@ -135,11 +138,18 @@ export class PropertyChangeNotifier {
      * @param propertyToWatch - The name of the property that the subscriber is interested in watching for changes.
      */
     subscribe(subscriber, propertyToWatch) {
-        let subscribers = this.subscribers[propertyToWatch];
-        if (subscribers === void 0) {
-            this.subscribers[propertyToWatch] = subscribers = new SubscriberSet(this.source);
+        var _a;
+        if (propertyToWatch) {
+            let subscribers = this.subscribers[propertyToWatch];
+            if (subscribers === void 0) {
+                this.subscribers[propertyToWatch] = subscribers = new SubscriberSet(this.source);
+            }
+            subscribers.subscribe(subscriber);
+        }
+        else {
+            this.sourceSubscribers = (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);
+            this.sourceSubscribers.subscribe(subscriber);
         }
-        subscribers.subscribe(subscriber);
     }
     /**
      * Unsubscribes from notification of changes in an object's state.
@@ -147,10 +157,15 @@ export class PropertyChangeNotifier {
      * @param propertyToUnwatch - The name of the property that the subscriber is no longer interested in watching.
      */
     unsubscribe(subscriber, propertyToUnwatch) {
-        const subscribers = this.subscribers[propertyToUnwatch];
-        if (subscribers === void 0) {
-            return;
+        var _a;
+        if (propertyToUnwatch) {
+            const subscribers = this.subscribers[propertyToUnwatch];
+            if (subscribers !== void 0) {
+                subscribers.unsubscribe(subscriber);
+            }
+        }
+        else {
+            (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);
         }
-        subscribers.unsubscribe(subscriber);
     }
 }

package/dist/esm/styles/element-styles.js

@@ -125,11 +125,11 @@ export class StyleElementStyles extends ElementStyles {
         const styleSheets = this.styleSheets;
         const styleClass = this.styleClass;
         target = this.normalizeTarget(target);
-        for (let i = styleSheets.length - 1; i > -1; --i) {
+        for (let i = 0; i < styleSheets.length; i++) {
             const element = document.createElement("style");
             element.innerHTML = styleSheets[i];
             element.className = styleClass;
-            target.prepend(element);
+            target.append(element);
         }
         super.addStylesTo(target);
     }

package/dist/fast-element.api.json

@@ -3536,7 +3536,7 @@
             },
             {
               "kind": "Content",
-              "text": "): void;\n    nextUpdate(): "
+              "text": "): void;\n    processUpdates(): void;\n    nextUpdate(): "
             },
             {
               "kind": "Reference",
@@ -7204,7 +7204,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": ", propertyToWatch: "
+                  "text": ", propertyToWatch?: "
                 },
                 {
                   "kind": "Content",
@@ -7264,7 +7264,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": ", propertyToUnwatch: "
+                  "text": ", propertyToUnwatch?: "
                 },
                 {
                   "kind": "Content",
@@ -8654,10 +8654,54 @@
                 "endIndex": 3
               }
             },
+            {
+              "kind": "MethodSignature",
+              "canonicalReference": "@microsoft/fast-element!StyleTarget#append:member(1)",
+              "docComment": "/**\n * Adds styles to the target by appending the styles.\n *\n * @param styles - The styles element to add.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "append(styles: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "HTMLStyleElement",
+                  "canonicalReference": "!HTMLStyleElement:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "returnTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "releaseTag": "Public",
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "styles",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  }
+                }
+              ],
+              "name": "append"
+            },
             {
               "kind": "MethodSignature",
               "canonicalReference": "@microsoft/fast-element!StyleTarget#prepend:member(1)",
-              "docComment": "/**\n * Adds styles to the target.\n *\n * @param styles - The styles element to add.\n */\n",
+              "docComment": "/**\n * Adds styles to the target by prepending the styles.\n *\n * @deprecated\n *\n * - use append()\n *\n * @param styles - The styles element to add.\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",

package/dist/fast-element.d.ts

@@ -410,6 +410,15 @@ export declare class Controller extends PropertyChangeNotifier {
     private _template;
     private _styles;
     private _isConnected;
+    /**
+     * This allows Observable.getNotifier(...) to return the Controller
+     * when the notifier for the Controller itself is being requested. The
+     * result is that the Observable system does not need to create a separate
+     * instance of Notifier for observables on the Controller. The component and
+     * the controller will now share the same notifier, removing one-object construct
+     * per web component instance.
+     */
+    private readonly $fastController;
     /**
      * The element being controlled by this controller.
      */
@@ -631,6 +640,14 @@ export declare const DOM: Readonly<{
      * @param callable - The callable function or object to queue.
      */
     queueUpdate(callable: Callable): void;
+    /**
+     * Immediately processes all work previously scheduled
+     * through queueUpdate.
+     * @remarks
+     * This also forces nextUpdate promises
+     * to resolve.
+     */
+    processUpdates(): void;
     /**
      * Resolves with the next DOM update.
      */
@@ -1353,6 +1370,7 @@ export declare interface PartialFASTElementDefinition {
  */
 export declare class PropertyChangeNotifier implements Notifier {
     private subscribers;
+    private sourceSubscribers;
     /**
      * The source that property changes are being notified for.
      */
@@ -1372,13 +1390,13 @@ export declare class PropertyChangeNotifier implements Notifier {
      * @param subscriber - The object that is subscribing for change notification.
      * @param propertyToWatch - The name of the property that the subscriber is interested in watching for changes.
      */
-    subscribe(subscriber: Subscriber, propertyToWatch: string): void;
+    subscribe(subscriber: Subscriber, propertyToWatch?: string): void;
     /**
      * Unsubscribes from notification of changes in an object's state.
      * @param subscriber - The object that is unsubscribing from change notification.
      * @param propertyToUnwatch - The name of the property that the subscriber is no longer interested in watching.
      */
-    unsubscribe(subscriber: Subscriber, propertyToUnwatch: string): void;
+    unsubscribe(subscriber: Subscriber, propertyToUnwatch?: string): void;
 }
 
 /**
@@ -1587,8 +1605,14 @@ export declare interface StyleTarget {
      */
     adoptedStyleSheets?: CSSStyleSheet[];
     /**
-     * Adds styles to the target.
+     * Adds styles to the target by appending the styles.
+     * @param styles - The styles element to add.
+     */
+    append(styles: HTMLStyleElement): void;
+    /**
+     * Adds styles to the target by prepending the styles.
      * @param styles - The styles element to add.
+     * @deprecated - use append()
      */
     prepend(styles: HTMLStyleElement): void;
     /**

package/dist/fast-element.js

@@ -60,34 +60,23 @@ const fastHTMLPolicy = $global.trustedTypes.createPolicy("fast-html", {
 });
 /* eslint-enable */
 
-let htmlPolicy = fastHTMLPolicy;
+let htmlPolicy = fastHTMLPolicy; // We use a queue so we can ensure errors are thrown in order.
 
-function processQueue() {
-  const capacity = 1024;
-  let index = 0;
+const pendingErrors = [];
 
-  while (index < updateQueue.length) {
-    const task = updateQueue[index];
-    task.call();
-    index++; // Prevent leaking memory for long chains of recursive calls to `queueMicroTask`.
-    // If we call `queueMicroTask` within a MicroTask scheduled by `queueMicroTask`, the queue will
-    // grow, but to avoid an O(n) walk for every MicroTask we execute, we don't
-    // shift MicroTasks off the queue after they have been executed.
-    // Instead, we periodically shift 1024 MicroTasks off the queue.
-
-    if (index > capacity) {
-      // Manually shift all values starting at the index back to the
-      // beginning of the queue.
-      for (let scan = 0, newLength = updateQueue.length - index; scan < newLength; scan++) {
-        updateQueue[scan] = updateQueue[scan + index];
-      }
-
-      updateQueue.length -= index;
-      index = 0;
-    }
+function throwFirstError() {
+  if (pendingErrors.length) {
+    throw pendingErrors.shift();
   }
+}
 
-  updateQueue.length = 0;
+function tryRunTask(task) {
+  try {
+    task.call();
+  } catch (error) {
+    pendingErrors.push(error);
+    setTimeout(throwFirstError, 0);
+  }
 }
 
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
@@ -189,12 +178,46 @@ const DOM = Object.freeze({
    */
   queueUpdate(callable) {
     if (updateQueue.length < 1) {
-      window.requestAnimationFrame(processQueue);
+      window.requestAnimationFrame(DOM.processUpdates);
     }
 
     updateQueue.push(callable);
   },
 
+  /**
+   * Immediately processes all work previously scheduled
+   * through queueUpdate.
+   * @remarks
+   * This also forces nextUpdate promises
+   * to resolve.
+   */
+  processUpdates() {
+    const capacity = 1024;
+    let index = 0;
+
+    while (index < updateQueue.length) {
+      tryRunTask(updateQueue[index]);
+      index++; // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.
+      // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will
+      // grow, but to avoid an O(n) walk for every task we execute, we don't
+      // shift tasks off the queue after they have been executed.
+      // Instead, we periodically shift 1024 tasks off the queue.
+
+      if (index > capacity) {
+        // Manually shift all values starting at the index back to the
+        // beginning of the queue.
+        for (let scan = 0, newLength = updateQueue.length - index; scan < newLength; scan++) {
+          updateQueue[scan] = updateQueue[scan + index];
+        }
+
+        updateQueue.length -= index;
+        index = 0;
+      }
+    }
+
+    updateQueue.length = 0;
+  },
+
   /**
    * Resolves with the next DOM update.
    */
@@ -395,6 +418,7 @@ class PropertyChangeNotifier {
    */
   constructor(source) {
     this.subscribers = {};
+    this.sourceSubscribers = null;
     this.source = source;
   }
   /**
@@ -404,11 +428,15 @@ class PropertyChangeNotifier {
 
 
   notify(propertyName) {
+    var _a;
+
     const subscribers = this.subscribers[propertyName];
 
     if (subscribers !== void 0) {
       subscribers.notify(propertyName);
     }
+
+    (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.notify(propertyName);
   }
   /**
    * Subscribes to notification of changes in an object's state.
@@ -418,13 +446,20 @@ class PropertyChangeNotifier {
 
 
   subscribe(subscriber, propertyToWatch) {
-    let subscribers = this.subscribers[propertyToWatch];
+    var _a;
 
-    if (subscribers === void 0) {
-      this.subscribers[propertyToWatch] = subscribers = new SubscriberSet(this.source);
-    }
+    if (propertyToWatch) {
+      let subscribers = this.subscribers[propertyToWatch];
 
-    subscribers.subscribe(subscriber);
+      if (subscribers === void 0) {
+        this.subscribers[propertyToWatch] = subscribers = new SubscriberSet(this.source);
+      }
+
+      subscribers.subscribe(subscriber);
+    } else {
+      this.sourceSubscribers = (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);
+      this.sourceSubscribers.subscribe(subscriber);
+    }
   }
   /**
    * Unsubscribes from notification of changes in an object's state.
@@ -434,13 +469,17 @@ class PropertyChangeNotifier {
 
 
   unsubscribe(subscriber, propertyToUnwatch) {
-    const subscribers = this.subscribers[propertyToUnwatch];
+    var _a;
 
-    if (subscribers === void 0) {
-      return;
-    }
+    if (propertyToUnwatch) {
+      const subscribers = this.subscribers[propertyToUnwatch];
 
-    subscribers.unsubscribe(subscriber);
+      if (subscribers !== void 0) {
+        subscribers.unsubscribe(subscriber);
+      }
+    } else {
+      (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);
+    }
   }
 
 }
@@ -1976,11 +2015,11 @@ class StyleElementStyles extends ElementStyles {
     const styleClass = this.styleClass;
     target = this.normalizeTarget(target);
 
-    for (let i = styleSheets.length - 1; i > -1; --i) {
+    for (let i = 0; i < styleSheets.length; i++) {
       const element = document.createElement("style");
       element.innerHTML = styleSheets[i];
       element.className = styleClass;
-      target.prepend(element);
+      target.append(element);
     }
 
     super.addStylesTo(target);
@@ -2351,6 +2390,16 @@ class Controller extends PropertyChangeNotifier {
     this._template = null;
     this._styles = null;
     this._isConnected = false;
+    /**
+     * This allows Observable.getNotifier(...) to return the Controller
+     * when the notifier for the Controller itself is being requested. The
+     * result is that the Observable system does not need to create a separate
+     * instance of Notifier for observables on the Controller. The component and
+     * the controller will now share the same notifier, removing one-object construct
+     * per web component instance.
+     */
+
+    this.$fastController = this;
     /**
      * The view associated with the custom element.
      * @remarks
@@ -2463,7 +2512,7 @@ class Controller extends PropertyChangeNotifier {
     const target = getShadowRoot(this.element) || this.element.getRootNode();
 
     if (styles instanceof HTMLStyleElement) {
-      target.prepend(styles);
+      target.append(styles);
     } else if (!styles.isAttachedTo(target)) {
       const sourceBehaviors = styles.behaviors;
       styles.addStylesTo(target);

package/dist/fast-element.min.js

@@ -1 +1 @@
-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=Object.freeze([]),s=[],i=t.trustedTypes.createPolicy("fast-html",{createHTML:t=>t});let n=i;function r(){let t=0;for(;t<s.length;){if(s[t].call(),t++,t>1024){for(let e=0,i=s.length-t;e<i;e++)s[e]=s[e+t];s.length-=t,t=0}}s.length=0}const o="fast-"+Math.random().toString(36).substring(2,8),l=o+"{",h="}"+o,a=Object.freeze({supportsAdoptedStyleSheets:Array.isArray(document.adoptedStyleSheets)&&"replace"in CSSStyleSheet.prototype,setHTMLPolicy(t){if(n!==i)throw new Error("The HTML policy can only be set once.");n=t},createHTML:t=>n.createHTML(t),isMarker:t=>t&&8===t.nodeType&&t.data.startsWith(o),extractDirectiveIndexFromMarker:t=>parseInt(t.data.replace(o+":","")),createInterpolationPlaceholder:t=>`${l}${t}${h}`,createCustomAttributePlaceholder(t,e){return`${t}="${this.createInterpolationPlaceholder(e)}"`},createBlockPlaceholder:t=>`\x3c!--${o}:${t}--\x3e`,queueUpdate(t){s.length<1&&window.requestAnimationFrame(r),s.push(t)},nextUpdate:()=>new Promise(t=>{a.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 c(t){const e=this.spillover;-1===e.indexOf(t)&&e.push(t)}function d(t){const e=this.spillover,s=e.indexOf(t);-1!==s&&e.splice(s,1)}function u(t){const e=this.spillover,s=this.source;for(let i=0,n=e.length;i<n;++i)e[i].handleChange(s,t)}function f(t){return-1!==this.spillover.indexOf(t)}class p{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=c,this.unsubscribe=d,this.notify=u,this.has=f,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 g{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 p(this.source)),s.subscribe(t)}unsubscribe(t,e){const s=this.subscribers[e];void 0!==s&&s.unsubscribe(t)}}const b=/(:|&&|\|\||if)/,v=new WeakMap,m=new WeakMap;let y=void 0,C=t=>{throw new Error("Must call enableArrayObservation before observing arrays.")};class x{constructor(t){this.name=t,this.field="_"+t,this.callback=t+"Changed"}getValue(t){return void 0!==y&&y.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),S(t).notify(this.name)}}}const w=Object.freeze({setArrayObserverFactory(t){C=t},getNotifier(t){let e=t.$fastController||v.get(t);return void 0===e&&(Array.isArray(t)?e=C(t):v.set(t,e=new g(t))),e},track(t,e){void 0!==y&&y.watch(t,e)},trackVolatile(){void 0!==y&&(y.needsRefresh=!0)},notify(t,e){S(t).notify(e)},defineProperty(t,e){"string"==typeof e&&(e=new x(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=m.get(t);if(void 0===e){let s=Reflect.getPrototypeOf(t);for(;void 0===e&&null!==s;)e=m.get(s),s=Reflect.getPrototypeOf(s);e=void 0===e?[]:e.slice(0),m.set(t,e)}return e},binding(t,e,s=this.isVolatileBinding(t)){return new $(t,e,s)},isVolatileBinding:t=>b.test(t.toString())}),S=w.getNotifier,B=w.trackVolatile,T=a.queueUpdate;function O(t,e){w.defineProperty(t,e)}function N(t,e,s){return Object.assign({},s,{get:function(){return B(),s.get.apply(this)}})}let A=null;function k(t){A=t}class V{constructor(){this.index=0,this.length=0,this.parent=null,this.parentContext=null}get event(){return A}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}}w.defineProperty(V.prototype,"index"),w.defineProperty(V.prototype,"length");const F=Object.seal(new V);class $ extends p{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=y;y=this.needsRefresh?this:void 0,this.needsRefresh=this.isVolatileBinding;const i=this.binding(t,e);return y=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=this.needsQueue=!0}}watch(t,e){const s=this.last,i=S(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){let e;y=void 0,e=s.propertySource[s.propertyName],y=this,t===e&&(this.needsRefresh=!0)}s.next=n}this.last=n}handleChange(){this.needsQueue&&(this.needsQueue=!1,T(this))}call(){null!==this.last&&(this.needsQueue=!0,this.notify(this))}records(){let t=this.first;return{next:()=>{const e=t;return void 0===e?{value:void 0,done:!0}:(t=t.next,{value:e,done:!1})},[Symbol.iterator]:function(){return this}}}}class _{constructor(){this.targetIndex=0}}class I extends _{constructor(){super(...arguments),this.createPlaceholder=a.createInterpolationPlaceholder}}class M extends _{constructor(t,e,s){super(),this.name=t,this.behavior=e,this.options=s}createPlaceholder(t){return a.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=w.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 j(){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 R(){this.target.removeEventListener(this.targetName,this),this.source=null,this.context=null}function z(t){a.setAttribute(this.target,this.targetName,t)}function H(t){a.setBooleanAttribute(this.target,this.targetName,t)}function Q(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 U(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,r=n.length;t<r;++t){const r=n[t];""!==r&&(e[r]=i,s.classList.add(r))}}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 W extends I{constructor(t){super(),this.binding=t,this.bind=E,this.unbind=P,this.updateTarget=z,this.isBindingVolatile=w.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=U,"innerHTML"===this.cleanedTargetName){const t=this.binding;this.binding=(e,s)=>a.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=R;break;default:this.cleanedTargetName=t,"class"===t&&(this.updateTarget=q)}}targetAtContent(){this.updateTarget=Q,this.unbind=j}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,r,o){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=r,this.targetName=o}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleEvent(t){k(t);const e=this.binding(this.source,this.context);k(null),!0!==e&&t.preventDefault()}}let G=null;class J{addFactory(t){t.targetIndex=this.targetIndex,this.behaviorFactories.push(t)}captureContentBinding(t){t.targetAtContent(),this.addFactory(t)}reset(){this.behaviorFactories=[],this.targetIndex=-1}release(){G=this}static borrow(t){const e=G||new J;return e.directives=t,e.reset(),G=null,e}}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 W((t,e)=>{let n="";for(let r=0;r<s;++r)n+=i[r](t,e);return n});return n.targetName=e,n}const X=h.length;function Y(t,e){const s=e.split(l);if(1===s.length)return null;const i=[];for(let e=0,n=s.length;e<n;++e){const n=s[e],r=n.indexOf(h);let o;if(-1===r)o=n;else{const e=parseInt(n.substring(0,r));i.push(t.directives[e]),o=n.substring(r+X)}""!==o&&i.push(o)}return i}function Z(t,e,s=!1){const i=e.attributes;for(let n=0,r=i.length;n<r;++n){const o=i[n],l=o.value,h=Y(t,l);let a=null;null===h?s&&(a=new W(()=>l),a.targetName=o.name):a=K(h),null!==a&&(e.removeAttributeNode(o),n--,r--,t.addFactory(a))}}function tt(t,e,s){const i=Y(t,e.textContent);if(null!==i){let n=e;for(let r=0,o=i.length;r<o;++r){const o=i[r],l=0===r?e:n.parentNode.insertBefore(document.createTextNode(""),n.nextSibling);"string"==typeof o?l.textContent=o:(l.textContent=" ",t.captureContentBinding(o)),n=l,t.targetIndex++,l!==e&&s.nextNode()}t.targetIndex--}}function et(t,e){const s=t.content;document.adoptNode(s);const i=J.borrow(e);Z(i,t,!0);const n=i.behaviorFactories;i.reset();const r=a.createTemplateWalker(s);let o;for(;o=r.nextNode();)switch(i.targetIndex++,o.nodeType){case 1:Z(i,o);break;case 3:tt(i,o,r);break;case 8:a.isMarker(o)&&i.addFactory(e[a.extractDirectiveIndexFromMarker(o)])}let l=0;(a.isMarker(s.firstChild)||1===s.childNodes.length&&e.length)&&(s.insertBefore(document.createComment(""),s.firstChild),l=-1);const h=i.behaviorFactories;return i.release(),{fragment:s,viewBehaviorFactories:h,hostBehaviorFactories:n,targetOffset:l}}const st=document.createRange();class it{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,r=this.source;for(let t=0,e=n.length;t<e;++t)n[t].unbind(r)}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,r=s.length;n<r;++n){const r=s[n];r.unbind(i),r.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){st.setStartBefore(t[0].firstChild),st.setEndAfter(t[t.length-1].lastChild),st.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 nt{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=a.createHTML(e);const s=t.content.firstElementChild;null!==s&&"TEMPLATE"===s.tagName&&(t=s)}else t=e;const s=et(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=a.createTemplateWalker(e);let r=0,o=this.targetOffset,l=n.nextNode();for(let t=s.length;r<t;++r){const t=s[r],e=t.targetIndex;for(;null!==l;){if(o===e){i[r]=t.createBehavior(l);break}l=n.nextNode(),o++}}if(this.hasHostBehaviors){const e=this.hostBehaviorFactories;for(let s=0,n=e.length;s<n;++s,++r)i[r]=e[s].createBehavior(t)}return new it(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,F),i.appendTo(e),i}}const rt=/([ \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,r=t.length-1;n<r;++n){const r=t[n];let o=e[n];if(i+=r,o instanceof nt){const t=o;o=()=>t}if("function"==typeof o&&(o=new W(o)),o instanceof I){const t=rt.exec(r);null!==t&&(o.targetName=t[2])}o instanceof _?(i+=o.createPlaceholder(s.length),s.push(o)):i+=o}return i+=t[t.length-1],new nt(i,s)}class lt{constructor(){this.targets=new WeakSet,this.behaviors=null}addStylesTo(t){this.targets.add(t)}removeStylesFrom(t){this.targets.delete(t)}isAttachedTo(t){return this.targets.has(t)}withBehaviors(...t){return this.behaviors=null===this.behaviors?t:this.behaviors.concat(t),this}}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(a.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.styleSheetCache=e,this._styleSheets=void 0,this.behaviors=at(t)}get styleSheets(){if(void 0===this._styleSheets){const t=this.styles,e=this.styleSheetCache;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})}return this._styleSheets}addStylesTo(t){t.adoptedStyleSheets=[...t.adoptedStyleSheets,...this.styleSheets],super.addStylesTo(t)}removeStylesFrom(t){const e=this.styleSheets;t.adoptedStyleSheets=t.adoptedStyleSheets.filter(t=>-1===e.indexOf(t)),super.removeStylesFrom(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=this.normalizeTarget(t);for(let i=e.length-1;i>-1;--i){const n=document.createElement("style");n.innerHTML=e[i],n.className=s,t.prepend(n)}super.addStylesTo(t)}removeStylesFrom(t){const e=(t=this.normalizeTarget(t)).querySelectorAll("."+this.styleClass);for(let s=0,i=e.length;s<i;++s)t.removeChild(e[s]);super.removeStylesFrom(t)}isAttachedTo(t){return super.isAttachedTo(this.normalizeTarget(t))}normalizeTarget(t){return t===document?document.body:t}}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 w.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||a.queueUpdate(()=>{s.add(t);const i=t[this.fieldName];switch(e){case"reflect":const e=this.converter;a.setAttribute(t,this.attribute,void 0!==e?e.toView(i):i);break;case"boolean":a.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={},r={};for(let t=0,e=s.length;t<e;++t){const e=s[t];i[t]=e.attribute,n[e.name]=e,r[e.attribute]=e}this.attributes=s,this.observedAttributes=i,this.propertyLookup=n,this.attributeLookup=r,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)?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)w.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,cancelable:!0};function St(t){return t.shadowRoot||xt.get(t)||null}class Bt extends g{constructor(t,e){super(t),this.boundObservables=null,this.behaviors=null,this.needsInitialization=!0,this._template=null,this._styles=null,this._isConnected=!1,this.view=null,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=w.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,r=t[n];void 0!==r&&(delete t[n],e[n]=r)}}}get isConnected(){return w.track(this,"isConnected"),this._isConnected}setIsConnected(t){this._isConnected=t,w.notify(this,"isConnected")}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=St(this.element)||this.element.getRootNode();if(t instanceof HTMLStyleElement)e.prepend(t);else if(!t.isAttachedTo(e)){const s=t.behaviors;t.addStylesTo(e),null!==s&&this.addBehaviors(s)}}removeStyles(t){const e=St(this.element)||this.element.getRootNode();if(t instanceof HTMLStyleElement)e.removeChild(t);else if(t.isAttachedTo(e)){const s=t.behaviors;t.removeStylesFrom(e),null!==s&&this.removeBehaviors(s)}}addBehaviors(t){const e=this.behaviors||(this.behaviors=new Map),s=t.length,i=[];for(let n=0;n<s;++n){const s=t[n];e.has(s)?e.set(s,e.get(s)+1):(e.set(s,1),i.push(s))}if(this._isConnected){const t=this.element;for(let e=0;e<i.length;++e)i[e].bind(t,F)}}removeBehaviors(t,e=!1){const s=this.behaviors;if(null===s)return;const i=t.length,n=[];for(let r=0;r<i;++r){const i=t[r];if(s.has(i)){const t=s.get(i)-1;0===t||e?s.delete(i)&&n.push(i):s.set(i,t)}}if(this._isConnected){const t=this.element;for(let e=0;e<n.length;++e)n[e].unbind(t)}}onConnectedCallback(){if(this._isConnected)return;const t=this.element;this.needsInitialization?this.finishInitialization():null!==this.view&&this.view.bind(t,F);const e=this.behaviors;if(null!==e)for(const[s]of e)s.bind(t,F);this.setIsConnected(!0)}onDisconnectedCallback(){if(!this._isConnected)return;this.setIsConnected(!1);const t=this.view;null!==t&&t.unbind();const e=this.behaviors;if(null!==e){const t=this.element;for(const[s]of 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=St(e)||e;null!==this.view?(this.view.dispose(),this.view=null):this.needsInitialization||a.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 Bt(t,s)}}function Tt(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 Ot=Object.assign(Tt(HTMLElement),{from:t=>Tt(t),define:(t,e)=>new Ct(t,e).define().type});function Nt(t){return function(e){new Ct(e,t).define()}}class At{createCSS(){return""}createBehavior(){}}function kt(t,e){const s=[];let i="";const n=[];for(let r=0,o=t.length-1;r<o;++r){i+=t[r];let o=e[r];if(o instanceof At){const t=o.createBehavior();o=o.createCSS(),t&&n.push(t)}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),{styles:s,behaviors:n}}function Vt(t,...e){const{styles:s,behaviors:i}=kt(t,e),n=lt.create(s);return i.length&&n.withBehaviors(...i),n}class Ft extends At{constructor(t,e){super(),this.behaviors=e,this.css="";const s=t.reduce((t,e)=>("string"==typeof e?this.css+=e:t.push(e),t),[]);s.length&&(this.styles=lt.create(s))}createBehavior(){return this}createCSS(){return this.css}bind(t){this.styles&&t.$fastController.addStyles(this.styles),this.behaviors.length&&t.$fastController.addBehaviors(this.behaviors)}unbind(t){this.styles&&t.$fastController.removeStyles(this.styles),this.behaviors.length&&t.$fastController.removeBehaviors(this.behaviors)}}function $t(t,...e){const{styles:s,behaviors:i}=kt(t,e);return new Ft(s,i)}function _t(t,e,s){return{index:t,removed:e,addedCount:s}}function It(t,s,i,n,r,o){let l=0,h=0;const a=Math.min(i-s,o-r);if(0===s&&0===r&&(l=function(t,e,s){for(let i=0;i<s;++i)if(t[i]!==e[i])return i;return s}(t,n,a)),i===t.length&&o===n.length&&(h=function(t,e,s){let i=t.length,n=e.length,r=0;for(;r<s&&t[--i]===e[--n];)r++;return r}(t,n,a-l)),r+=l,o-=h,(i-=h)-(s+=l)==0&&o-r==0)return e;if(s===i){const t=_t(s,[],0);for(;r<o;)t.removed.push(n[r++]);return[t]}if(r===o)return[_t(s,[],i-s)];const c=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 r=t[e-1][s-1],o=t[e-1][s],l=t[e][s-1];let h;h=o<l?o<r?o:r:l<r?l:r,h===r?(r===i?n.push(0):(n.push(1),i=r),e--,s--):h===o?(n.push(3),e--,i=o):(n.push(2),s--,i=l)}return n.reverse(),n}(function(t,e,s,i,n,r){const o=r-n+1,l=s-e+1,h=new Array(o);let a,c;for(let t=0;t<o;++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<o;++s)for(let r=1;r<l;++r)t[e+r-1]===i[n+s-1]?h[s][r]=h[s-1][r-1]:(a=h[s-1][r]+1,c=h[s][r-1]+1,h[s][r]=a<c?a:c);return h}(t,s,i,n,r,o)),d=[];let u=void 0,f=s,p=r;for(let t=0;t<c.length;++t)switch(c[t]){case 0:void 0!==u&&(d.push(u),u=void 0),f++,p++;break;case 1:void 0===u&&(u=_t(f,[],0)),u.addedCount++,f++,u.removed.push(n[p]),p++;break;case 2:void 0===u&&(u=_t(f,[],0)),u.addedCount++,f++;break;case 3:void 0===u&&(u=_t(f,[],0)),u.removed.push(n[p]),p++}return void 0!==u&&d.push(u),d}const Mt=Array.prototype.push;function Et(t,e,s,i){const n=_t(e,s,i);let r=!1,o=0;for(let e=0;e<t.length;e++){const s=t[e];if(s.index+=o,r)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--,o-=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 r=!0}else if(n.index<s.index){r=!0,t.splice(e,0,n),e++;const i=n.addedCount-n.removed.length;s.index+=i,o+=i}}var l,h,a,c;r||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 jt(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 Rt extends p{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,a.queueUpdate(this))}reset(t){this.oldCollection=t,this.needsQueue&&(this.needsQueue=!1,a.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)}}function zt(){if(Pt)return;Pt=!0,w.setArrayObserverFactory(t=>new Rt(t));const t=Array.prototype,e=t.pop,s=t.push,i=t.reverse,n=t.shift,r=t.sort,o=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(jt(_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=r.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.splice=function(){const t=o.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(jt(_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(jt(_t(0,[],arguments.length),this)),t}}class Ht{constructor(t,e){this.target=t,this.propertyName=e}bind(t){t[this.propertyName]=this.target}unbind(){}}function Qt(t){return new M("fast-ref",Ht,t)}function Ut(t,e){const s="function"==typeof e?e:()=>e;return(e,i)=>t(e,i)?s(e,i):null}const qt=Object.freeze({positioning:!1});function Wt(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 Gt{constructor(t,e,s,i,n,r){this.location=t,this.itemsBinding=e,this.templateBinding=i,this.options=r,this.source=null,this.views=[],this.items=null,this.itemsObserver=null,this.originalContext=void 0,this.childContext=void 0,this.bindView=Wt,this.itemsBindingObserver=w.binding(e,this,s),this.templateBindingObserver=w.binding(i,this,n),r.positioning&&(this.bindView=Dt)}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(!0),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(t=!1){if(!this.items)return void(this.items=e);const s=this.itemsObserver,i=this.itemsObserver=w.getNotifier(this.items),n=s!==i;n&&null!==s&&s.unsubscribe(this),(n||t)&&i.subscribe(this)}updateViews(t){const e=this.childContext,s=this.views,i=[],n=this.bindView;let r=0;for(let e=0,n=t.length;e<n;++e){const n=t[e],o=n.removed;i.push(...s.splice(n.index+r,o.length)),r-=n.addedCount}const o=this.items,l=this.template;for(let r=0,h=t.length;r<h;++r){const h=t[r];let a=h.index;const c=a+h.addedCount;for(;a<c;++a){const t=s[a],r=t?t.firstChild:this.location,h=i.length>0?i.shift():l.create();s.splice(a,0,h),n(h,o,a,e),h.insertBefore(r)}}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,r=this.bindView;let o=e.length,l=this.views,h=l.length;if((0===o||t)&&(it.disposeContiguousBatch(l),h=0),0===h){this.views=l=new Array(o);for(let t=0;t<o;++t){const o=i.create();r(o,e,t,s),l[t]=o,o.insertBefore(n)}}else{let t=0;for(;t<o;++t)if(t<h){r(l[t],e,t,s)}else{const o=i.create();r(o,e,t,s),l.push(o),o.insertBefore(n)}const a=l.splice(t,h-t);for(t=0,o=a.length;t<o;++t)a[t].dispose()}}unbindAllViews(){const t=this.views;for(let e=0,s=t.length;e<s;++e)t[e].unbind()}}class Jt extends _{constructor(t,e,s){super(),this.itemsBinding=t,this.templateBinding=e,this.options=s,this.createPlaceholder=a.createBlockPlaceholder,zt(),this.isItemsBindingVolatile=w.isVolatileBinding(t),this.isTemplateBindingVolatile=w.isVolatileBinding(e)}createBehavior(t){return new Gt(t,this.itemsBinding,this.isItemsBindingVolatile,this.templateBinding,this.isTemplateBindingVolatile,this.options)}}function Kt(t,e,s=qt){return new Jt(t,"function"==typeof e?e:()=>e,s)}function Xt(t){return t?function(e,s,i){return 1===e.nodeType&&e.matches(t)}:function(t,e,s){return 1===t.nodeType}}class Yt{constructor(t,e){this.target=t,this.options=e,this.source=null}bind(t){const e=this.options.property;this.shouldUpdate=w.getAccessors(t).some(t=>t.name===e),this.source=t,this.updateTarget(this.computeNodes()),this.shouldUpdate&&this.observe()}unbind(){this.updateTarget(e),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 Zt extends Yt{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 te(t){return"string"==typeof t&&(t={property:t}),new M("fast-slotted",Zt,t)}class ee extends Yt{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 se(t){return"string"==typeof t&&(t={property:t}),new M("fast-children",ee,t)}export{t as $global,M as AttachedBehaviorHTMLDirective,gt as AttributeDefinition,D as BindingBehavior,At as CSSDirective,ee as ChildrenBehavior,Bt as Controller,a as DOM,lt as ElementStyles,V as ExecutionContext,Ot as FASTElement,Ct as FASTElementDefinition,W as HTMLBindingDirective,_ as HTMLDirective,it as HTMLView,w as Observable,g as PropertyChangeNotifier,Ht as RefBehavior,Gt as RepeatBehavior,Jt as RepeatDirective,Zt as SlottedBehavior,p as SubscriberSet,I as TargetedHTMLDirective,nt as ViewTemplate,bt as attr,ft as booleanConverter,se as children,et as compileTemplate,Vt as css,$t as cssPartial,Nt as customElement,F as defaultExecutionContext,Xt as elements,e as emptyArray,zt as enableArrayObservation,ot as html,pt as nullableNumberConverter,O as observable,Qt as ref,Kt as repeat,k as setCurrentEvent,te as slotted,N as volatile,Ut 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=Object.freeze([]),s=[],i=t.trustedTypes.createPolicy("fast-html",{createHTML:t=>t});let n=i;const r=[];function o(){if(r.length)throw r.shift()}function l(t){try{t.call()}catch(t){r.push(t),setTimeout(o,0)}}const h="fast-"+Math.random().toString(36).substring(2,8),a=h+"{",c="}"+h,d=Object.freeze({supportsAdoptedStyleSheets:Array.isArray(document.adoptedStyleSheets)&&"replace"in CSSStyleSheet.prototype,setHTMLPolicy(t){if(n!==i)throw new Error("The HTML policy can only be set once.");n=t},createHTML:t=>n.createHTML(t),isMarker:t=>t&&8===t.nodeType&&t.data.startsWith(h),extractDirectiveIndexFromMarker:t=>parseInt(t.data.replace(h+":","")),createInterpolationPlaceholder:t=>`${a}${t}${c}`,createCustomAttributePlaceholder(t,e){return`${t}="${this.createInterpolationPlaceholder(e)}"`},createBlockPlaceholder:t=>`\x3c!--${h}:${t}--\x3e`,queueUpdate(t){s.length<1&&window.requestAnimationFrame(d.processUpdates),s.push(t)},processUpdates(){let t=0;for(;t<s.length;)if(l(s[t]),t++,t>1024){for(let e=0,i=s.length-t;e<i;e++)s[e]=s[e+t];s.length-=t,t=0}s.length=0},nextUpdate:()=>new Promise(t=>{d.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 u(t){const e=this.spillover;-1===e.indexOf(t)&&e.push(t)}function f(t){const e=this.spillover,s=e.indexOf(t);-1!==s&&e.splice(s,1)}function p(t){const e=this.spillover,s=this.source;for(let i=0,n=e.length;i<n;++i)e[i].handleChange(s,t)}function g(t){return-1!==this.spillover.indexOf(t)}class b{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=u,this.unsubscribe=f,this.notify=p,this.has=g,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 v{constructor(t){this.subscribers={},this.sourceSubscribers=null,this.source=t}notify(t){var e;const s=this.subscribers[t];void 0!==s&&s.notify(t),null===(e=this.sourceSubscribers)||void 0===e||e.notify(t)}subscribe(t,e){var s;if(e){let s=this.subscribers[e];void 0===s&&(this.subscribers[e]=s=new b(this.source)),s.subscribe(t)}else this.sourceSubscribers=null!==(s=this.sourceSubscribers)&&void 0!==s?s:new b(this.source),this.sourceSubscribers.subscribe(t)}unsubscribe(t,e){var s;if(e){const s=this.subscribers[e];void 0!==s&&s.unsubscribe(t)}else null===(s=this.sourceSubscribers)||void 0===s||s.unsubscribe(t)}}const m=/(:|&&|\|\||if)/,y=new WeakMap,C=new WeakMap;let x=void 0,w=t=>{throw new Error("Must call enableArrayObservation before observing arrays.")};class S{constructor(t){this.name=t,this.field="_"+t,this.callback=t+"Changed"}getValue(t){return void 0!==x&&x.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),T(t).notify(this.name)}}}const B=Object.freeze({setArrayObserverFactory(t){w=t},getNotifier(t){let e=t.$fastController||y.get(t);return void 0===e&&(Array.isArray(t)?e=w(t):y.set(t,e=new v(t))),e},track(t,e){void 0!==x&&x.watch(t,e)},trackVolatile(){void 0!==x&&(x.needsRefresh=!0)},notify(t,e){T(t).notify(e)},defineProperty(t,e){"string"==typeof e&&(e=new S(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=C.get(t);if(void 0===e){let s=Reflect.getPrototypeOf(t);for(;void 0===e&&null!==s;)e=C.get(s),s=Reflect.getPrototypeOf(s);e=void 0===e?[]:e.slice(0),C.set(t,e)}return e},binding(t,e,s=this.isVolatileBinding(t)){return new I(t,e,s)},isVolatileBinding:t=>m.test(t.toString())}),T=B.getNotifier,O=B.trackVolatile,N=d.queueUpdate;function A(t,e){B.defineProperty(t,e)}function k(t,e,s){return Object.assign({},s,{get:function(){return O(),s.get.apply(this)}})}let V=null;function F(t){V=t}class ${constructor(){this.index=0,this.length=0,this.parent=null,this.parentContext=null}get event(){return V}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}}B.defineProperty($.prototype,"index"),B.defineProperty($.prototype,"length");const _=Object.seal(new $);class I extends b{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=x;x=this.needsRefresh?this:void 0,this.needsRefresh=this.isVolatileBinding;const i=this.binding(t,e);return x=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=this.needsQueue=!0}}watch(t,e){const s=this.last,i=T(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){let e;x=void 0,e=s.propertySource[s.propertyName],x=this,t===e&&(this.needsRefresh=!0)}s.next=n}this.last=n}handleChange(){this.needsQueue&&(this.needsQueue=!1,N(this))}call(){null!==this.last&&(this.needsQueue=!0,this.notify(this))}records(){let t=this.first;return{next:()=>{const e=t;return void 0===e?{value:void 0,done:!0}:(t=t.next,{value:e,done:!1})},[Symbol.iterator]:function(){return this}}}}class M{constructor(){this.targetIndex=0}}class E extends M{constructor(){super(...arguments),this.createPlaceholder=d.createInterpolationPlaceholder}}class L extends M{constructor(t,e,s){super(),this.name=t,this.behavior=e,this.options=s}createPlaceholder(t){return d.createCustomAttributePlaceholder(this.name,t)}createBehavior(t){return new this.behavior(t,this.options)}}function P(t,e){this.source=t,this.context=e,null===this.bindingObserver&&(this.bindingObserver=B.binding(this.binding,this,this.isBindingVolatile)),this.updateTarget(this.bindingObserver.observe(t,e))}function j(t,e){this.source=t,this.context=e,this.target.addEventListener(this.targetName,this)}function R(){this.bindingObserver.disconnect(),this.source=null,this.context=null}function z(){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 H(){this.target.removeEventListener(this.targetName,this),this.source=null,this.context=null}function U(t){d.setAttribute(this.target,this.targetName,t)}function Q(t){d.setBooleanAttribute(this.target,this.targetName,t)}function q(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 W(t){this.target[this.targetName]=t}function D(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,r=n.length;t<r;++t){const r=n[t];""!==r&&(e[r]=i,s.classList.add(r))}}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 G extends E{constructor(t){super(),this.binding=t,this.bind=P,this.unbind=R,this.updateTarget=U,this.isBindingVolatile=B.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=W,"innerHTML"===this.cleanedTargetName){const t=this.binding;this.binding=(e,s)=>d.createHTML(t(e,s))}break;case"?":this.cleanedTargetName=t.substr(1),this.updateTarget=Q;break;case"@":this.cleanedTargetName=t.substr(1),this.bind=j,this.unbind=H;break;default:this.cleanedTargetName=t,"class"===t&&(this.updateTarget=D)}}targetAtContent(){this.updateTarget=q,this.unbind=z}createBehavior(t){return new J(t,this.binding,this.isBindingVolatile,this.bind,this.unbind,this.updateTarget,this.cleanedTargetName)}}class J{constructor(t,e,s,i,n,r,o){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=r,this.targetName=o}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleEvent(t){F(t);const e=this.binding(this.source,this.context);F(null),!0!==e&&t.preventDefault()}}let K=null;class X{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 X;return e.directives=t,e.reset(),K=null,e}}function Y(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 G((t,e)=>{let n="";for(let r=0;r<s;++r)n+=i[r](t,e);return n});return n.targetName=e,n}const Z=c.length;function tt(t,e){const s=e.split(a);if(1===s.length)return null;const i=[];for(let e=0,n=s.length;e<n;++e){const n=s[e],r=n.indexOf(c);let o;if(-1===r)o=n;else{const e=parseInt(n.substring(0,r));i.push(t.directives[e]),o=n.substring(r+Z)}""!==o&&i.push(o)}return i}function et(t,e,s=!1){const i=e.attributes;for(let n=0,r=i.length;n<r;++n){const o=i[n],l=o.value,h=tt(t,l);let a=null;null===h?s&&(a=new G(()=>l),a.targetName=o.name):a=Y(h),null!==a&&(e.removeAttributeNode(o),n--,r--,t.addFactory(a))}}function st(t,e,s){const i=tt(t,e.textContent);if(null!==i){let n=e;for(let r=0,o=i.length;r<o;++r){const o=i[r],l=0===r?e:n.parentNode.insertBefore(document.createTextNode(""),n.nextSibling);"string"==typeof o?l.textContent=o:(l.textContent=" ",t.captureContentBinding(o)),n=l,t.targetIndex++,l!==e&&s.nextNode()}t.targetIndex--}}function it(t,e){const s=t.content;document.adoptNode(s);const i=X.borrow(e);et(i,t,!0);const n=i.behaviorFactories;i.reset();const r=d.createTemplateWalker(s);let o;for(;o=r.nextNode();)switch(i.targetIndex++,o.nodeType){case 1:et(i,o);break;case 3:st(i,o,r);break;case 8:d.isMarker(o)&&i.addFactory(e[d.extractDirectiveIndexFromMarker(o)])}let l=0;(d.isMarker(s.firstChild)||1===s.childNodes.length&&e.length)&&(s.insertBefore(document.createComment(""),s.firstChild),l=-1);const h=i.behaviorFactories;return i.release(),{fragment:s,viewBehaviorFactories:h,hostBehaviorFactories:n,targetOffset:l}}const nt=document.createRange();class rt{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,r=this.source;for(let t=0,e=n.length;t<e;++t)n[t].unbind(r)}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,r=s.length;n<r;++n){const r=s[n];r.unbind(i),r.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){nt.setStartBefore(t[0].firstChild),nt.setEndAfter(t[t.length-1].lastChild),nt.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 ot{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=d.createHTML(e);const s=t.content.firstElementChild;null!==s&&"TEMPLATE"===s.tagName&&(t=s)}else t=e;const s=it(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=d.createTemplateWalker(e);let r=0,o=this.targetOffset,l=n.nextNode();for(let t=s.length;r<t;++r){const t=s[r],e=t.targetIndex;for(;null!==l;){if(o===e){i[r]=t.createBehavior(l);break}l=n.nextNode(),o++}}if(this.hasHostBehaviors){const e=this.hostBehaviorFactories;for(let s=0,n=e.length;s<n;++s,++r)i[r]=e[s].createBehavior(t)}return new rt(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,_),i.appendTo(e),i}}const lt=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function ht(t,...e){const s=[];let i="";for(let n=0,r=t.length-1;n<r;++n){const r=t[n];let o=e[n];if(i+=r,o instanceof ot){const t=o;o=()=>t}if("function"==typeof o&&(o=new G(o)),o instanceof E){const t=lt.exec(r);null!==t&&(o.targetName=t[2])}o instanceof M?(i+=o.createPlaceholder(s.length),s.push(o)):i+=o}return i+=t[t.length-1],new ot(i,s)}class at{constructor(){this.targets=new WeakSet,this.behaviors=null}addStylesTo(t){this.targets.add(t)}removeStylesFrom(t){this.targets.delete(t)}isAttachedTo(t){return this.targets.has(t)}withBehaviors(...t){return this.behaviors=null===this.behaviors?t:this.behaviors.concat(t),this}}function ct(t){return t.map(t=>t instanceof at?ct(t.styles):[t]).reduce((t,e)=>t.concat(e),[])}function dt(t){return t.map(t=>t instanceof at?t.behaviors:null).reduce((t,e)=>null===e?t:(null===t&&(t=[]),t.concat(e)),null)}at.create=(()=>{if(d.supportsAdoptedStyleSheets){const t=new Map;return e=>new ut(e,t)}return t=>new pt(t)})();class ut extends at{constructor(t,e){super(),this.styles=t,this.styleSheetCache=e,this._styleSheets=void 0,this.behaviors=dt(t)}get styleSheets(){if(void 0===this._styleSheets){const t=this.styles,e=this.styleSheetCache;this._styleSheets=ct(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})}return this._styleSheets}addStylesTo(t){t.adoptedStyleSheets=[...t.adoptedStyleSheets,...this.styleSheets],super.addStylesTo(t)}removeStylesFrom(t){const e=this.styleSheets;t.adoptedStyleSheets=t.adoptedStyleSheets.filter(t=>-1===e.indexOf(t)),super.removeStylesFrom(t)}}let ft=0;class pt extends at{constructor(t){super(),this.styles=t,this.behaviors=null,this.behaviors=dt(t),this.styleSheets=ct(t),this.styleClass="fast-style-class-"+ ++ft}addStylesTo(t){const e=this.styleSheets,s=this.styleClass;t=this.normalizeTarget(t);for(let i=0;i<e.length;i++){const n=document.createElement("style");n.innerHTML=e[i],n.className=s,t.append(n)}super.addStylesTo(t)}removeStylesFrom(t){const e=(t=this.normalizeTarget(t)).querySelectorAll("."+this.styleClass);for(let s=0,i=e.length;s<i;++s)t.removeChild(e[s]);super.removeStylesFrom(t)}isAttachedTo(t){return super.isAttachedTo(this.normalizeTarget(t))}normalizeTarget(t){return t===document?document.body:t}}const gt={toView:t=>t?"true":"false",fromView:t=>null!=t&&"false"!==t&&!1!==t&&0!==t},bt={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 vt{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=gt)}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 B.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||d.queueUpdate(()=>{s.add(t);const i=t[this.fieldName];switch(e){case"reflect":const e=this.converter;d.setAttribute(t,this.attribute,void 0!==e?e.toView(i):i);break;case"boolean":d.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 vt(t,i)):s.push(new vt(t,i.property,i.attribute,i.mode,i.converter))}}return s}}function mt(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 yt={mode:"open"},Ct={},xt=new Map;class wt{constructor(t,e=t.definition){"string"==typeof e&&(e={name:e}),this.type=t,this.name=e.name,this.template=e.template;const s=vt.collect(t,e.attributes),i=new Array(s.length),n={},r={};for(let t=0,e=s.length;t<e;++t){const e=s[t];i[t]=e.attribute,n[e.name]=e,r[e.attribute]=e}this.attributes=s,this.observedAttributes=i,this.propertyLookup=n,this.attributeLookup=r,this.shadowOptions=void 0===e.shadowOptions?yt:null===e.shadowOptions?void 0:Object.assign(Object.assign({},yt),e.shadowOptions),this.elementOptions=void 0===e.elementOptions?Ct:Object.assign(Object.assign({},Ct),e.elementOptions),this.styles=void 0===e.styles?void 0:Array.isArray(e.styles)?at.create(e.styles):e.styles instanceof at?e.styles:at.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)B.defineProperty(s,t[e]);Reflect.defineProperty(e,"observedAttributes",{value:this.observedAttributes,enumerable:!0}),xt.set(e,this),this.isDefined=!0}return t.get(this.name)||t.define(this.name,e,this.elementOptions),this}static forType(t){return xt.get(t)}}const St=new WeakMap,Bt={bubbles:!0,composed:!0,cancelable:!0};function Tt(t){return t.shadowRoot||St.get(t)||null}class Ot extends v{constructor(t,e){super(t),this.boundObservables=null,this.behaviors=null,this.needsInitialization=!0,this._template=null,this._styles=null,this._isConnected=!1,this.$fastController=this,this.view=null,this.element=t,this.definition=e;const s=e.shadowOptions;if(void 0!==s){const e=t.attachShadow(s);"closed"===s.mode&&St.set(t,e)}const i=B.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,r=t[n];void 0!==r&&(delete t[n],e[n]=r)}}}get isConnected(){return B.track(this,"isConnected"),this._isConnected}setIsConnected(t){this._isConnected=t,B.notify(this,"isConnected")}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=Tt(this.element)||this.element.getRootNode();if(t instanceof HTMLStyleElement)e.append(t);else if(!t.isAttachedTo(e)){const s=t.behaviors;t.addStylesTo(e),null!==s&&this.addBehaviors(s)}}removeStyles(t){const e=Tt(this.element)||this.element.getRootNode();if(t instanceof HTMLStyleElement)e.removeChild(t);else if(t.isAttachedTo(e)){const s=t.behaviors;t.removeStylesFrom(e),null!==s&&this.removeBehaviors(s)}}addBehaviors(t){const e=this.behaviors||(this.behaviors=new Map),s=t.length,i=[];for(let n=0;n<s;++n){const s=t[n];e.has(s)?e.set(s,e.get(s)+1):(e.set(s,1),i.push(s))}if(this._isConnected){const t=this.element;for(let e=0;e<i.length;++e)i[e].bind(t,_)}}removeBehaviors(t,e=!1){const s=this.behaviors;if(null===s)return;const i=t.length,n=[];for(let r=0;r<i;++r){const i=t[r];if(s.has(i)){const t=s.get(i)-1;0===t||e?s.delete(i)&&n.push(i):s.set(i,t)}}if(this._isConnected){const t=this.element;for(let e=0;e<n.length;++e)n[e].unbind(t)}}onConnectedCallback(){if(this._isConnected)return;const t=this.element;this.needsInitialization?this.finishInitialization():null!==this.view&&this.view.bind(t,_);const e=this.behaviors;if(null!==e)for(const[s]of e)s.bind(t,_);this.setIsConnected(!0)}onDisconnectedCallback(){if(!this._isConnected)return;this.setIsConnected(!1);const t=this.view;null!==t&&t.unbind();const e=this.behaviors;if(null!==e){const t=this.element;for(const[s]of 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=Tt(e)||e;null!==this.view?(this.view.dispose(),this.view=null):this.needsInitialization||d.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=wt.forType(t.constructor);if(void 0===s)throw new Error("Missing FASTElement definition.");return t.$fastController=new Ot(t,s)}}function Nt(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 At=Object.assign(Nt(HTMLElement),{from:t=>Nt(t),define:(t,e)=>new wt(t,e).define().type});function kt(t){return function(e){new wt(e,t).define()}}class Vt{createCSS(){return""}createBehavior(){}}function Ft(t,e){const s=[];let i="";const n=[];for(let r=0,o=t.length-1;r<o;++r){i+=t[r];let o=e[r];if(o instanceof Vt){const t=o.createBehavior();o=o.createCSS(),t&&n.push(t)}o instanceof at||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),{styles:s,behaviors:n}}function $t(t,...e){const{styles:s,behaviors:i}=Ft(t,e),n=at.create(s);return i.length&&n.withBehaviors(...i),n}class _t extends Vt{constructor(t,e){super(),this.behaviors=e,this.css="";const s=t.reduce((t,e)=>("string"==typeof e?this.css+=e:t.push(e),t),[]);s.length&&(this.styles=at.create(s))}createBehavior(){return this}createCSS(){return this.css}bind(t){this.styles&&t.$fastController.addStyles(this.styles),this.behaviors.length&&t.$fastController.addBehaviors(this.behaviors)}unbind(t){this.styles&&t.$fastController.removeStyles(this.styles),this.behaviors.length&&t.$fastController.removeBehaviors(this.behaviors)}}function It(t,...e){const{styles:s,behaviors:i}=Ft(t,e);return new _t(s,i)}function Mt(t,e,s){return{index:t,removed:e,addedCount:s}}function Et(t,s,i,n,r,o){let l=0,h=0;const a=Math.min(i-s,o-r);if(0===s&&0===r&&(l=function(t,e,s){for(let i=0;i<s;++i)if(t[i]!==e[i])return i;return s}(t,n,a)),i===t.length&&o===n.length&&(h=function(t,e,s){let i=t.length,n=e.length,r=0;for(;r<s&&t[--i]===e[--n];)r++;return r}(t,n,a-l)),r+=l,o-=h,(i-=h)-(s+=l)==0&&o-r==0)return e;if(s===i){const t=Mt(s,[],0);for(;r<o;)t.removed.push(n[r++]);return[t]}if(r===o)return[Mt(s,[],i-s)];const c=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 r=t[e-1][s-1],o=t[e-1][s],l=t[e][s-1];let h;h=o<l?o<r?o:r:l<r?l:r,h===r?(r===i?n.push(0):(n.push(1),i=r),e--,s--):h===o?(n.push(3),e--,i=o):(n.push(2),s--,i=l)}return n.reverse(),n}(function(t,e,s,i,n,r){const o=r-n+1,l=s-e+1,h=new Array(o);let a,c;for(let t=0;t<o;++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<o;++s)for(let r=1;r<l;++r)t[e+r-1]===i[n+s-1]?h[s][r]=h[s-1][r-1]:(a=h[s-1][r]+1,c=h[s][r-1]+1,h[s][r]=a<c?a:c);return h}(t,s,i,n,r,o)),d=[];let u=void 0,f=s,p=r;for(let t=0;t<c.length;++t)switch(c[t]){case 0:void 0!==u&&(d.push(u),u=void 0),f++,p++;break;case 1:void 0===u&&(u=Mt(f,[],0)),u.addedCount++,f++,u.removed.push(n[p]),p++;break;case 2:void 0===u&&(u=Mt(f,[],0)),u.addedCount++,f++;break;case 3:void 0===u&&(u=Mt(f,[],0)),u.removed.push(n[p]),p++}return void 0!==u&&d.push(u),d}const Lt=Array.prototype.push;function Pt(t,e,s,i){const n=Mt(e,s,i);let r=!1,o=0;for(let e=0;e<t.length;e++){const s=t[e];if(s.index+=o,r)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--,o-=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);Lt.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);Lt.apply(t,e)}n.removed=t,s.index<n.index&&(n.index=s.index)}else r=!0}else if(n.index<s.index){r=!0,t.splice(e,0,n),e++;const i=n.addedCount-n.removed.length;s.index+=i,o+=i}}var l,h,a,c;r||t.push(n)}function jt(t,e){let s=[];const i=function(t){const e=[];for(let s=0,i=t.length;s<i;s++){const i=t[s];Pt(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(Et(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 Rt=!1;function zt(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 Ht extends b{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,d.queueUpdate(this))}reset(t){this.oldCollection=t,this.needsQueue&&(this.needsQueue=!1,d.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?jt(this.source,t):Et(this.source,0,this.source.length,e,0,e.length);this.notify(s)}}function Ut(){if(Rt)return;Rt=!0,B.setArrayObserverFactory(t=>new Ht(t));const t=Array.prototype,e=t.pop,s=t.push,i=t.reverse,n=t.shift,r=t.sort,o=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(Mt(this.length,[s],0)),s},t.push=function(){const t=s.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(zt(Mt(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(Mt(0,[e],0)),e},t.sort=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=r.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.splice=function(){const t=o.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(zt(Mt(+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(zt(Mt(0,[],arguments.length),this)),t}}class Qt{constructor(t,e){this.target=t,this.propertyName=e}bind(t){t[this.propertyName]=this.target}unbind(){}}function qt(t){return new L("fast-ref",Qt,t)}function Wt(t,e){const s="function"==typeof e?e:()=>e;return(e,i)=>t(e,i)?s(e,i):null}const Dt=Object.freeze({positioning:!1});function Gt(t,e,s,i){t.bind(e[s],i)}function Jt(t,e,s,i){const n=Object.create(i);n.index=s,n.length=e.length,t.bind(e[s],n)}class Kt{constructor(t,e,s,i,n,r){this.location=t,this.itemsBinding=e,this.templateBinding=i,this.options=r,this.source=null,this.views=[],this.items=null,this.itemsObserver=null,this.originalContext=void 0,this.childContext=void 0,this.bindView=Gt,this.itemsBindingObserver=B.binding(e,this,s),this.templateBindingObserver=B.binding(i,this,n),r.positioning&&(this.bindView=Jt)}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(!0),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(t=!1){if(!this.items)return void(this.items=e);const s=this.itemsObserver,i=this.itemsObserver=B.getNotifier(this.items),n=s!==i;n&&null!==s&&s.unsubscribe(this),(n||t)&&i.subscribe(this)}updateViews(t){const e=this.childContext,s=this.views,i=[],n=this.bindView;let r=0;for(let e=0,n=t.length;e<n;++e){const n=t[e],o=n.removed;i.push(...s.splice(n.index+r,o.length)),r-=n.addedCount}const o=this.items,l=this.template;for(let r=0,h=t.length;r<h;++r){const h=t[r];let a=h.index;const c=a+h.addedCount;for(;a<c;++a){const t=s[a],r=t?t.firstChild:this.location,h=i.length>0?i.shift():l.create();s.splice(a,0,h),n(h,o,a,e),h.insertBefore(r)}}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,r=this.bindView;let o=e.length,l=this.views,h=l.length;if((0===o||t)&&(rt.disposeContiguousBatch(l),h=0),0===h){this.views=l=new Array(o);for(let t=0;t<o;++t){const o=i.create();r(o,e,t,s),l[t]=o,o.insertBefore(n)}}else{let t=0;for(;t<o;++t)if(t<h){r(l[t],e,t,s)}else{const o=i.create();r(o,e,t,s),l.push(o),o.insertBefore(n)}const a=l.splice(t,h-t);for(t=0,o=a.length;t<o;++t)a[t].dispose()}}unbindAllViews(){const t=this.views;for(let e=0,s=t.length;e<s;++e)t[e].unbind()}}class Xt extends M{constructor(t,e,s){super(),this.itemsBinding=t,this.templateBinding=e,this.options=s,this.createPlaceholder=d.createBlockPlaceholder,Ut(),this.isItemsBindingVolatile=B.isVolatileBinding(t),this.isTemplateBindingVolatile=B.isVolatileBinding(e)}createBehavior(t){return new Kt(t,this.itemsBinding,this.isItemsBindingVolatile,this.templateBinding,this.isTemplateBindingVolatile,this.options)}}function Yt(t,e,s=Dt){return new Xt(t,"function"==typeof e?e:()=>e,s)}function Zt(t){return t?function(e,s,i){return 1===e.nodeType&&e.matches(t)}:function(t,e,s){return 1===t.nodeType}}class te{constructor(t,e){this.target=t,this.options=e,this.source=null}bind(t){const e=this.options.property;this.shouldUpdate=B.getAccessors(t).some(t=>t.name===e),this.source=t,this.updateTarget(this.computeNodes()),this.shouldUpdate&&this.observe()}unbind(){this.updateTarget(e),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 ee extends te{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 se(t){return"string"==typeof t&&(t={property:t}),new L("fast-slotted",ee,t)}class ie extends te{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 ne(t){return"string"==typeof t&&(t={property:t}),new L("fast-children",ie,t)}export{t as $global,L as AttachedBehaviorHTMLDirective,vt as AttributeDefinition,J as BindingBehavior,Vt as CSSDirective,ie as ChildrenBehavior,Ot as Controller,d as DOM,at as ElementStyles,$ as ExecutionContext,At as FASTElement,wt as FASTElementDefinition,G as HTMLBindingDirective,M as HTMLDirective,rt as HTMLView,B as Observable,v as PropertyChangeNotifier,Qt as RefBehavior,Kt as RepeatBehavior,Xt as RepeatDirective,ee as SlottedBehavior,b as SubscriberSet,E as TargetedHTMLDirective,ot as ViewTemplate,mt as attr,gt as booleanConverter,ne as children,it as compileTemplate,$t as css,It as cssPartial,kt as customElement,_ as defaultExecutionContext,Zt as elements,e as emptyArray,Ut as enableArrayObservation,ht as html,bt as nullableNumberConverter,A as observable,qt as ref,Yt as repeat,F as setCurrentEvent,se as slotted,k as volatile,Wt as when};

package/docs/ACKNOWLEDGEMENTS.md

@@ -7,4 +7,5 @@ There are many great open source projects that have inspired us and enabled us t
 * [Knockout](https://knockoutjs.com/) - One of the first JavaScript libraries (if not the first) to implement an observer system. The original techniques for observables and computed observables have influenced many libraries over the years. Re-interpreting these ideas in terms of modern JavaScript and DOM has helped us to build a powerful and robust system.
 * [lit-html](https://lit-html.polymer-project.org/) - One of the first libraries to leverage standard JavaScript tagged template literals for HTML templates. We were inspired by this technique and wanted to explore whether it could be combined with our idea of arrow function binding expressions.
 * [Polymer](https://www.polymer-project.org/) - One of the first libraries (if not the first) to embrace Web Components.
-* [Vue](https://vuejs.org/) - We liked the terseness of the `:` and `@` syntax in templates, so we adapted it along with some modifications in our templates.
+* [Vue](https://vuejs.org/) - We liked the terseness of the `:` and `@` syntax in templates, so we adapted it along with some modifications in our templates.
+* [asap](https://github.com/kriskowal/asap) - An awesome, time-tested async task queue implementation that heavily inspired our DOM update system.

package/docs/api-report.md

@@ -216,6 +216,7 @@ export const DOM: Readonly<{
     createCustomAttributePlaceholder(attributeName: string, index: number): string;
     createBlockPlaceholder(index: number): string;
     queueUpdate(callable: Callable): void;
+    processUpdates(): void;
     nextUpdate(): Promise<void>;
     setAttribute(element: HTMLElement, attributeName: string, value: any): void;
     setBooleanAttribute(element: HTMLElement, attributeName: string, value: boolean): void;
@@ -425,8 +426,8 @@ export class PropertyChangeNotifier implements Notifier {
     constructor(source: any);
     notify(propertyName: string): void;
     readonly source: any;
-    subscribe(subscriber: Subscriber, propertyToWatch: string): void;
-    unsubscribe(subscriber: Subscriber, propertyToUnwatch: string): void;
+    subscribe(subscriber: Subscriber, propertyToWatch?: string): void;
+    unsubscribe(subscriber: Subscriber, propertyToUnwatch?: string): void;
 }
 
 // @public
@@ -493,6 +494,8 @@ export interface Splice {
 // @public
 export interface StyleTarget {
     adoptedStyleSheets?: CSSStyleSheet[];
+    append(styles: HTMLStyleElement): void;
+    // @deprecated
     prepend(styles: HTMLStyleElement): void;
     querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
     removeChild(styles: HTMLStyleElement): void;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@microsoft/fast-element",
   "description": "A library for constructing Web Components",
   "sideEffects": false,
-  "version": "1.4.1",
+  "version": "1.6.0",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"