@microsoft/fast-element 1.5.1 → 1.7.0

package/CHANGELOG.json

@@ -2,7 +2,172 @@
   "name": "@microsoft/fast-element",
   "entries": [
     {
-      "date": "Wed, 08 Sep 2021 07:13:43 GMT",
+      "date": "Sun, 23 Jan 2022 07:11:35 GMT",
+      "tag": "@microsoft/fast-element_v1.7.0",
+      "version": "1.7.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "add recyle option to repeat directive",
+            "author": "scomea@microsoft.com",
+            "commit": "897c39862b58a63ad9900426ae6ae2f95d222e1e",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 12 Jan 2022 07:11:42 GMT",
+      "tag": "@microsoft/fast-element_v1.6.2",
+      "version": "1.6.2",
+      "comments": {
+        "none": [
+          {
+            "comment": "add links back to cheat sheet",
+            "author": "steph@huynhicode.dev",
+            "commit": "962ca2a330f8c277ac489613f0ff55cac08896e8",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 11 Jan 2022 07:09:27 GMT",
+      "tag": "@microsoft/fast-element_v1.6.2",
+      "version": "1.6.2",
+      "comments": {
+        "none": [
+          {
+            "comment": "update rollup-plugin-filesize from 8.0.2 to 9.1.2",
+            "author": "john.kreitlow@microsoft.com",
+            "commit": "af847f2749ff605cced426e55a1580ea85c89cb0",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Sun, 19 Dec 2021 07:12:39 GMT",
+      "tag": "@microsoft/fast-element_v1.6.2",
+      "version": "1.6.2",
+      "comments": {
+        "none": [
+          {
+            "comment": "minor fixes",
+            "author": "steph@huynhicode.dev",
+            "commit": "5056e83234e1c758375fa4882943d104fb476ca2",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 14 Dec 2021 07:12:12 GMT",
+      "tag": "@microsoft/fast-element_v1.6.2",
+      "version": "1.6.2",
+      "comments": {
+        "none": [
+          {
+            "comment": "docs(using-directives): clarify slotted directive practices",
+            "author": "roeisenb@microsoft.com",
+            "commit": "babdb99e832319eaee76465765f9e6b72911d473",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 08 Dec 2021 07:10:04 GMT",
+      "tag": "@microsoft/fast-element_v1.6.2",
+      "version": "1.6.2",
+      "comments": {
+        "none": [
+          {
+            "comment": "docs: add .NET acknowledgement",
+            "author": "roeisenb@microsoft.com",
+            "commit": "bd7d84152a823cc21aab0dfa196da9d663ad0778",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 02 Dec 2021 07:11:13 GMT",
+      "tag": "@microsoft/fast-element_v1.6.2",
+      "version": "1.6.2",
+      "comments": {
+        "none": [
+          {
+            "comment": "docs: corrections to cdn links",
+            "author": "roeisenb@microsoft.com",
+            "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Sun, 31 Oct 2021 07:17:45 GMT",
+      "tag": "@microsoft/fast-element_v1.6.2",
+      "version": "1.6.2",
+      "comments": {
+        "patch": [
+          {
+            "comment": "update fast eslint package version",
+            "author": "chhol@microsoft.com",
+            "commit": "a150068ee196e73fe7a4f7b538a38752e0e506ba",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 13 Oct 2021 22:45:16 GMT",
+      "tag": "@microsoft/fast-element_v1.6.1",
+      "version": "1.6.1",
+      "comments": {
+        "patch": [
+          {
+            "comment": "build(fast-element): exclude empty js files from esm index.js",
+            "author": "markwhitfeld@users.noreply.github.com",
+            "commit": "49d27d20bf430ea4639978ba363e017fc5aa88e4",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 13 Oct 2021 01:53:37 GMT",
+      "tag": "@microsoft/fast-element_v1.6.0",
+      "version": "1.6.0",
+      "comments": {
+        "none": [
+          {
+            "comment": "Fill color design token update",
+            "author": "skawian@gmail.com",
+            "commit": "1dd6243d7564f00d8af77d1335ab96b0e8153c2e",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 08 Oct 2021 19:53:11 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": {

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @microsoft/fast-element
 
-This log was last generated on Wed, 08 Sep 2021 07:13:43 GMT and should not be manually modified.
+This log was last generated on Sun, 23 Jan 2022 07:11:35 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.7.0
+
+Sun, 23 Jan 2022 07:11:35 GMT
+
+### Minor changes
+
+- add recyle option to repeat directive (scomea@microsoft.com)
+
+## 1.6.2
+
+Sun, 31 Oct 2021 07:17:45 GMT
+
+### Patches
+
+- update fast eslint package version (chhol@microsoft.com)
+
+## 1.6.1
+
+Wed, 13 Oct 2021 22:45:16 GMT
+
+### Patches
+
+- build(fast-element): exclude empty js files from esm index.js (markwhitfeld@users.noreply.github.com)
+
+## 1.6.0
+
+Fri, 08 Oct 2021 19:53:11 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:13:43 GMT
+Wed, 08 Sep 2021 07:16:17 GMT
 
 ### Patches
 

package/README.md

@@ -38,7 +38,7 @@ A pre-bundled script that contains all APIs needed to build web components with
 <html lang="en">
     <head>
         <script type="module">
-          import { FASTElement } from "https://unpkg.com/@microsoft/fast-element";
+          import { FASTElement } from "https://cdn.jsdelivr.net/npm/@microsoft/fast-element/dist/fast-element.min.js";
 
           // your code here
         </script>
@@ -47,10 +47,16 @@ A pre-bundled script that contains all APIs needed to build web components with
 </html>
 ```
 
-:::important
-The above CDN location points to the latest release of `fast-element`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with.
-:::
+The markup above always references the latest release. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that:
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-element@1.6.2/dist/fast-element.min.js"></script>
+```
 
 :::note
 For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL.
+:::
+
+:::tip
+Looking for a quick guide on building components?  Check out [our Cheat Sheet](https://www.fast.design/docs/resources/cheat-sheet#building-components).
 :::

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/index.d.ts

@@ -4,7 +4,7 @@ export * from "./components/fast-element";
 export { FASTElementDefinition, PartialFASTElementDefinition, } from "./components/fast-definitions";
 export * from "./components/attributes";
 export * from "./components/controller";
-export * from "./interfaces";
+export type { Callable, Constructable, Mutable } from "./interfaces";
 export * from "./templating/compiler";
 export { ElementStyles, ElementStyleFactory, ComposableStyles, StyleTarget, } from "./styles/element-styles";
 export { css, cssPartial } from "./styles/css";
@@ -15,7 +15,7 @@ export * from "./observation/notifier";
 export { Splice } from "./observation/array-change-records";
 export { enableArrayObservation } from "./observation/array-observer";
 export { DOM } from "./dom";
-export * from "./observation/behavior";
+export type { Behavior } from "./observation/behavior";
 export * from "./templating/binding";
 export * from "./templating/html-directive";
 export * from "./templating/ref";

package/dist/dts/templating/repeat.d.ts

@@ -12,7 +12,11 @@ export interface RepeatOptions {
     /**
      * Enables index, length, and dependent positioning updates in item templates.
      */
-    positioning: boolean;
+    positioning?: boolean;
+    /**
+     * Enables view recycling
+     */
+    recycle?: boolean;
 }
 /**
  * A behavior that renders a template for each item in an array.

package/dist/esm/dom.js

@@ -22,29 +22,6 @@ function tryRunTask(task) {
         setTimeout(throwFirstError, 0);
     }
 }
-function processQueue() {
-    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;
-}
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 /** @internal */
 export const _interpolationStart = `${marker}{`;
@@ -133,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/index.js

@@ -4,7 +4,6 @@ export * from "./components/fast-element";
 export { FASTElementDefinition, } from "./components/fast-definitions";
 export * from "./components/attributes";
 export * from "./components/controller";
-export * from "./interfaces";
 export * from "./templating/compiler";
 export { ElementStyles, } from "./styles/element-styles";
 export { css, cssPartial } from "./styles/css";
@@ -14,7 +13,6 @@ export * from "./observation/observable";
 export * from "./observation/notifier";
 export { enableArrayObservation } from "./observation/array-observer";
 export { DOM } from "./dom";
-export * from "./observation/behavior";
 export * from "./templating/binding";
 export * from "./templating/html-directive";
 export * from "./templating/ref";

package/dist/esm/templating/binding.js

@@ -167,7 +167,6 @@ export class HTMLBindingDirective extends TargetedHTMLDirective {
                 this.updateTarget = updatePropertyTarget;
                 if (this.cleanedTargetName === "innerHTML") {
                     const binding = this.binding;
-                    /* eslint-disable-next-line */
                     this.binding = (s, c) => DOM.createHTML(binding(s, c));
                 }
                 break;

package/dist/esm/templating/repeat.js

@@ -6,6 +6,7 @@ import { HTMLDirective } from "./html-directive";
 import { HTMLView } from "./view";
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
+    recycle: true,
 });
 function bindWithoutPositioning(view, items, index, context) {
     view.bind(items[index], context);
@@ -129,7 +130,9 @@ export class RepeatBehavior {
             for (; addIndex < end; ++addIndex) {
                 const neighbor = views[addIndex];
                 const location = neighbor ? neighbor.firstChild : this.location;
-                const view = totalRemoved.length > 0 ? totalRemoved.shift() : template.create();
+                const view = this.options.recycle && totalRemoved.length > 0
+                    ? totalRemoved.shift()
+                    : template.create();
                 views.splice(addIndex, 0, view);
                 bindView(view, items, addIndex, childContext);
                 view.insertBefore(location);

package/dist/esm/templating/template.js

@@ -8,6 +8,7 @@ import { HTMLBindingDirective } from "./binding";
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public
  */
+/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 export class ViewTemplate {
     /**
      * Creates an instance of ViewTemplate.
@@ -103,7 +104,7 @@ export class ViewTemplate {
 }
 // Much thanks to LitHTML for working this out!
 const lastAttributeNameRegex = 
-// eslint-disable-next-line no-control-regex
+/* eslint-disable-next-line no-control-regex */
 /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
 /**
  * Transforms a template literal string into a renderable ViewTemplate.

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",
@@ -8180,7 +8180,7 @@
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "positioning: "
+                  "text": "positioning?: "
                 },
                 {
                   "kind": "Content",
@@ -8197,6 +8197,31 @@
                 "startIndex": 1,
                 "endIndex": 2
               }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@microsoft/fast-element!RepeatOptions#recycle:member",
+              "docComment": "/**\n * Enables view recycling\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "recycle?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "releaseTag": "Public",
+              "name": "recycle",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
             }
           ],
           "extendsTokenRanges": []

package/dist/fast-element.d.ts

@@ -640,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.
      */
@@ -1519,7 +1527,11 @@ export declare interface RepeatOptions {
     /**
      * Enables index, length, and dependent positioning updates in item templates.
      */
-    positioning: boolean;
+    positioning?: boolean;
+    /**
+     * Enables view recycling
+     */
+    recycle?: boolean;
 }
 
 /**

package/dist/fast-element.js

@@ -79,33 +79,6 @@ function tryRunTask(task) {
   }
 }
 
-function processQueue() {
-  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;
-}
-
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 /** @internal */
 
@@ -205,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.
    */
@@ -1175,7 +1182,6 @@ class HTMLBindingDirective extends TargetedHTMLDirective {
 
         if (this.cleanedTargetName === "innerHTML") {
           const binding = this.binding;
-          /* eslint-disable-next-line */
 
           this.binding = (s, c) => DOM.createHTML(binding(s, c));
         }
@@ -1695,6 +1701,8 @@ class HTMLView {
  * @public
  */
 
+/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+
 class ViewTemplate {
   /**
    * Creates an instance of ViewTemplate.
@@ -1802,7 +1810,8 @@ class ViewTemplate {
 
 } // Much thanks to LitHTML for working this out!
 
-const lastAttributeNameRegex = // eslint-disable-next-line no-control-regex
+const lastAttributeNameRegex =
+/* eslint-disable-next-line no-control-regex */
 /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
 /**
  * Transforms a template literal string into a renderable ViewTemplate.
@@ -3654,7 +3663,8 @@ function when(binding, templateOrTemplateBinding) {
 }
 
 const defaultRepeatOptions = Object.freeze({
-  positioning: false
+  positioning: false,
+  recycle: true
 });
 
 function bindWithoutPositioning(view, items, index, context) {
@@ -3798,7 +3808,7 @@ class RepeatBehavior {
       for (; addIndex < end; ++addIndex) {
         const neighbor = views[addIndex];
         const location = neighbor ? neighbor.firstChild : this.location;
-        const view = totalRemoved.length > 0 ? totalRemoved.shift() : template.create();
+        const view = this.options.recycle && totalRemoved.length > 0 ? totalRemoved.shift() : template.create();
         views.splice(addIndex, 0, view);
         bindView(view, items, addIndex, childContext);
         view.insertBefore(location);

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

@@ -2,10 +2,11 @@
 
 There are many great open source projects that have inspired us and enabled us to build FAST. Below are a few that stand out.
 
+* [.NET](https://dotnet.microsoft.com/) - Many thanks to the .NET team for sharing their policies and practices upon which our issue management and release planning docs and practices were based.
+* [asap](https://github.com/kriskowal/asap) - An awesome, time-tested async task queue implementation that heavily inspired our DOM update system.
 * [Aurelia 1 and Aurelia 2](https://aurelia.io/) - Various details of Aurelia 2's decorator and metadata model inspired us in the design of `fast-element`. Additionally, Aurelia 1's mechanisms for array observation, binding, and template compilation also guided us in our work.
 * [faastjs](https://github.com/faastjs) - A project with a similar name but a very different purpose. Their API documentation approach leveraging [api-extractor](https://api-extractor.com/) was a huge help to us.
 * [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.
-* [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;
@@ -460,7 +461,8 @@ export class RepeatDirective<TSource = any> extends HTMLDirective {
 
 // @public
 export interface RepeatOptions {
-    positioning: boolean;
+    positioning?: boolean;
+    recycle?: boolean;
 }
 
 // Warning: (ae-internal-missing-underscore) The name "setCurrentEvent" should be prefixed with an underscore because the declaration is marked as @internal

package/docs/guide/declaring-templates.md

@@ -223,3 +223,7 @@ In the future we're planning new optimizations that will enable us to safely det
 In most cases, the template that `FASTElement` renders is determined by the `template` property of the Custom Element's configuration. However, you can also implement a method on your Custom Element class named `resolveTemplate()` that returns a template instance. If this method is present, it will be called during `connectedCallback` to obtain the template to use. This allows the element author to dynamically select completely different templates based on the state of the element at the time of connection.
 
 In addition to dynamic template selection during the `connectedCallback`, the `$fastController` property of `FASTElement` enables dynamically changing the template at any time through setting the controller's `template` property to any valid template.
+
+:::tip
+Check out [our Cheat Sheet](https://www.fast.design/docs/resources/cheat-sheet#bindings) for a quick guide on bindings.
+:::

package/docs/guide/defining-elements.md

@@ -47,8 +47,9 @@ import { FASTElement, customElement, attr } from '@microsoft/fast-element';
 export class NameTag extends FASTElement {
   @attr greeting: string = 'Hello';
 
+  // optional method 
   greetingChanged() {
-    this.shadowRoot!.innerHTML = this.greeting;
+    ...
   }
 }
 ```
@@ -59,7 +60,7 @@ To add attributes to your HTML element, create properties decorated by the `@att
 All properties decorated with `@attr` are also *observable*. See [observables and state](./observables-and-state) for information about how observables enable efficient rendering.
 :::
 
-By default, anything extending from `FASTElement` will automatically have a `ShadowRoot` attached in order to enable encapsulated rendering. The example above references the `shadowRoot` to set its `innerHTML` any time the `greeting` property changes.
+By default, anything extending from `FASTElement` will automatically have a `ShadowRoot` attached in order to enable encapsulated rendering. 
 
 To see it in action, you can use the same HTML as above, or change the default `greeting` with the following:
 

package/docs/guide/leveraging-css.md

@@ -33,7 +33,7 @@ const styles = css`
     display: inline-block;
     contain: content;
     color: white;
-    background: var(--background-color);
+    background: var(--fill-color);
     border-radius: var(--border-radius);
     min-width: 325px;
     text-align: center;
@@ -75,7 +75,7 @@ const styles = css`
 
   .footer {
     height: 16px;
-    background: var(--background-color);
+    background: var(--fill-color);
     border-radius: 0 0 var(--border-radius) var(--border-radius);
   }
 `;
@@ -111,7 +111,7 @@ const styles = css`
     display: inline-block;
     contain: content;
     color: white;
-    background: var(--background-color);
+    background: var(--fill-color);
     border-radius: var(--border-radius);
     min-width: 325px;
     text-align: center;

package/docs/guide/next-steps.md

@@ -9,4 +9,6 @@ We've seen how to use `FASTElement` to declaratively build Web Components. In ad
 
 Now that you're familiar with the robust and powerful features of `FASTElement`, you're ready to build your own components and apps. But you don't have to start from scratch there either! If you haven't already explored them, check out our [FAST Components](../components/getting-started), which provide all the basic UI building-blocks you'd expect in a modern component library. You can also leverage the same adaptive design system that our own components use to enable robust theming throughout all you create. Read more on that in [Styling Components](../design/introduction). Finally, you'll want to take advantage of a modern toolset by installing [a powerful editor and plugins](../tools/vscode).
 
+For a quick reference on what you've learned, check out [our Cheat Sheet](https://www.fast.design/docs/resources/cheat-sheet).
+
 Happy componenting!

package/docs/guide/using-directives.md

@@ -140,6 +140,19 @@ Some context properties are opt-in because they are more costly to update. So, f
 </ul>
 ```
 
+Whether or not a repeat directive re-uses item views can be controlled with the `recycle` option setting. When `recycle: true`, which is the default value, the repeat directive may reuse views rather than create new ones from the template.  When `recycle: false` 
+previously used views are always discarded and each item will always be assigned a new view. Recyling previously used views may improve performance in some situations but may also be "dirty" from the previously displayed item.
+
+**Example: List Rendering without view recycling**
+
+```html
+<ul>
+  ${repeat(x => x.friends, html<string>`
+    <li>${(x, c) => c.index} ${x => x}</li>
+  `, { recycle: false })}
+</ul>
+```
+
 In addition to providing a template to render the items with, you can also provide an expression that evaluates to a template. This enables you to dynamically change what you are using to render the items. Each item will still be rendered with the same template, but you can use techniques from "Composing Templates" below to render a different template depending on the item itself.
 
 ### Composing templates
@@ -513,15 +526,18 @@ const template = html<MyElement>`
 export class MyElement extends FASTElement {
   @observable slottedNodes: Node[];
 
-  connectedCallback() {
-    super.connectedCallback();
-    console.log(this.slottedNodes);
+  slottedNodesChanged() {
+    // respond to changes in slotted node
   }
 }
 ```
 
 Similar to the `children` directive, the `slotted` directive will populate the `slottedNodes` property with nodes assigned to the slot. If `slottedNodes` is decorated with `@observable` then it will be updated dynamically as the assigned nodes change. Like any observable, you can optionally implement a *propertyName*Changed method to be notified when the nodes change. Additionally, you can provide an `options` object to the `slotted` directive to specify a customized configuration for the underlying [assignedNodes() API call](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedNodes) or specify a `filter`.
 
+:::tip
+It's best to leverage a change handler for slotted nodes rather than assuming that the nodes will be present in the `connectedCallback`.
+:::
+
 ## Host directives
 
 So far, our bindings and directives have only affected elements within the Shadow DOM of the component. However, sometimes you want to affect the host element itself, based on property state. For example, a progress component might want to write various `aria` attributes to the host, based on the progress state. In order to facilitate scenarios like this, you can use a `template` element as the root of your template, and it will represent the host element. Any attribute or directive you place on the `template` element will be applied to the host itself.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@microsoft/fast-element",
   "description": "A library for constructing Web Components",
   "sideEffects": false,
-  "version": "1.5.1",
+  "version": "1.7.0",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -70,7 +70,7 @@
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
     "rollup": "^2.7.6",
-    "rollup-plugin-filesize": "^8.0.2",
+    "rollup-plugin-filesize": "^9.1.2",
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-transform-tagged-template": "^0.0.3",
     "rollup-plugin-typescript2": "^0.27.0",