@microsoft/fast-element 1.6.2 → 1.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.json CHANGED
@@ -2,7 +2,142 @@
2
2
  "name": "@microsoft/fast-element",
3
3
  "entries": [
4
4
  {
5
- "date": "Sun, 31 Oct 2021 07:14:05 GMT",
5
+ "date": "Fri, 25 Feb 2022 17:06:57 GMT",
6
+ "tag": "@microsoft/fast-element_v1.7.2",
7
+ "version": "1.7.2",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "comment": "fix: defend against for/in use on arrays",
12
+ "author": "roeisenb@microsoft.com",
13
+ "commit": "76a9c866277cd13a92a9ca6b3518eae2fb625d79",
14
+ "package": "@microsoft/fast-element"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Thu, 24 Feb 2022 22:21:55 GMT",
21
+ "tag": "@microsoft/fast-element_v1.7.1",
22
+ "version": "1.7.1",
23
+ "comments": {
24
+ "patch": [
25
+ {
26
+ "comment": "fix: prevent duplicative array observation patch",
27
+ "author": "roeisenb@microsoft.com",
28
+ "commit": "9dfb9bb20afa48320eef2c6157e26ec2b10cfd3e",
29
+ "package": "@microsoft/fast-element"
30
+ }
31
+ ]
32
+ }
33
+ },
34
+ {
35
+ "date": "Sun, 23 Jan 2022 07:13:56 GMT",
36
+ "tag": "@microsoft/fast-element_v1.7.0",
37
+ "version": "1.7.0",
38
+ "comments": {
39
+ "minor": [
40
+ {
41
+ "comment": "add recyle option to repeat directive",
42
+ "author": "scomea@microsoft.com",
43
+ "commit": "897c39862b58a63ad9900426ae6ae2f95d222e1e",
44
+ "package": "@microsoft/fast-element"
45
+ }
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "date": "Wed, 12 Jan 2022 07:11:42 GMT",
51
+ "tag": "@microsoft/fast-element_v1.6.2",
52
+ "version": "1.6.2",
53
+ "comments": {
54
+ "none": [
55
+ {
56
+ "comment": "add links back to cheat sheet",
57
+ "author": "steph@huynhicode.dev",
58
+ "commit": "962ca2a330f8c277ac489613f0ff55cac08896e8",
59
+ "package": "@microsoft/fast-element"
60
+ }
61
+ ]
62
+ }
63
+ },
64
+ {
65
+ "date": "Tue, 11 Jan 2022 07:09:27 GMT",
66
+ "tag": "@microsoft/fast-element_v1.6.2",
67
+ "version": "1.6.2",
68
+ "comments": {
69
+ "none": [
70
+ {
71
+ "comment": "update rollup-plugin-filesize from 8.0.2 to 9.1.2",
72
+ "author": "john.kreitlow@microsoft.com",
73
+ "commit": "af847f2749ff605cced426e55a1580ea85c89cb0",
74
+ "package": "@microsoft/fast-element"
75
+ }
76
+ ]
77
+ }
78
+ },
79
+ {
80
+ "date": "Sun, 19 Dec 2021 07:12:39 GMT",
81
+ "tag": "@microsoft/fast-element_v1.6.2",
82
+ "version": "1.6.2",
83
+ "comments": {
84
+ "none": [
85
+ {
86
+ "comment": "minor fixes",
87
+ "author": "steph@huynhicode.dev",
88
+ "commit": "5056e83234e1c758375fa4882943d104fb476ca2",
89
+ "package": "@microsoft/fast-element"
90
+ }
91
+ ]
92
+ }
93
+ },
94
+ {
95
+ "date": "Tue, 14 Dec 2021 07:12:12 GMT",
96
+ "tag": "@microsoft/fast-element_v1.6.2",
97
+ "version": "1.6.2",
98
+ "comments": {
99
+ "none": [
100
+ {
101
+ "comment": "docs(using-directives): clarify slotted directive practices",
102
+ "author": "roeisenb@microsoft.com",
103
+ "commit": "babdb99e832319eaee76465765f9e6b72911d473",
104
+ "package": "@microsoft/fast-element"
105
+ }
106
+ ]
107
+ }
108
+ },
109
+ {
110
+ "date": "Wed, 08 Dec 2021 07:10:04 GMT",
111
+ "tag": "@microsoft/fast-element_v1.6.2",
112
+ "version": "1.6.2",
113
+ "comments": {
114
+ "none": [
115
+ {
116
+ "comment": "docs: add .NET acknowledgement",
117
+ "author": "roeisenb@microsoft.com",
118
+ "commit": "bd7d84152a823cc21aab0dfa196da9d663ad0778",
119
+ "package": "@microsoft/fast-element"
120
+ }
121
+ ]
122
+ }
123
+ },
124
+ {
125
+ "date": "Thu, 02 Dec 2021 07:11:13 GMT",
126
+ "tag": "@microsoft/fast-element_v1.6.2",
127
+ "version": "1.6.2",
128
+ "comments": {
129
+ "none": [
130
+ {
131
+ "comment": "docs: corrections to cdn links",
132
+ "author": "roeisenb@microsoft.com",
133
+ "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76",
134
+ "package": "@microsoft/fast-element"
135
+ }
136
+ ]
137
+ }
138
+ },
139
+ {
140
+ "date": "Sun, 31 Oct 2021 07:17:45 GMT",
6
141
  "tag": "@microsoft/fast-element_v1.6.2",
7
142
  "version": "1.6.2",
8
143
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,36 @@
1
1
  # Change Log - @microsoft/fast-element
2
2
 
3
- This log was last generated on Sun, 31 Oct 2021 07:14:05 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 25 Feb 2022 17:06:57 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 1.7.2
8
+
9
+ Fri, 25 Feb 2022 17:06:57 GMT
10
+
11
+ ### Patches
12
+
13
+ - fix: defend against for/in use on arrays (roeisenb@microsoft.com)
14
+
15
+ ## 1.7.1
16
+
17
+ Thu, 24 Feb 2022 22:21:55 GMT
18
+
19
+ ### Patches
20
+
21
+ - fix: prevent duplicative array observation patch (roeisenb@microsoft.com)
22
+
23
+ ## 1.7.0
24
+
25
+ Sun, 23 Jan 2022 07:13:56 GMT
26
+
27
+ ### Minor changes
28
+
29
+ - add recyle option to repeat directive (scomea@microsoft.com)
30
+
7
31
  ## 1.6.2
8
32
 
9
- Sun, 31 Oct 2021 07:14:05 GMT
33
+ Sun, 31 Oct 2021 07:17:45 GMT
10
34
 
11
35
  ### Patches
12
36
 
package/README.md CHANGED
@@ -38,7 +38,7 @@ A pre-bundled script that contains all APIs needed to build web components with
38
38
  <html lang="en">
39
39
  <head>
40
40
  <script type="module">
41
- import { FASTElement } from "https://unpkg.com/@microsoft/fast-element";
41
+ import { FASTElement } from "https://cdn.jsdelivr.net/npm/@microsoft/fast-element/dist/fast-element.min.js";
42
42
 
43
43
  // your code here
44
44
  </script>
@@ -47,10 +47,16 @@ A pre-bundled script that contains all APIs needed to build web components with
47
47
  </html>
48
48
  ```
49
49
 
50
- :::important
51
- 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.
52
- :::
50
+ 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:
51
+
52
+ ```html
53
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-element@1.6.2/dist/fast-element.min.js"></script>
54
+ ```
53
55
 
54
56
  :::note
55
57
  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.
58
+ :::
59
+
60
+ :::tip
61
+ Looking for a quick guide on building components? Check out [our Cheat Sheet](https://www.fast.design/docs/resources/cheat-sheet#building-components).
56
62
  :::
@@ -12,7 +12,11 @@ export interface RepeatOptions {
12
12
  /**
13
13
  * Enables index, length, and dependent positioning updates in item templates.
14
14
  */
15
- positioning: boolean;
15
+ positioning?: boolean;
16
+ /**
17
+ * Enables view recycling
18
+ */
19
+ recycle?: boolean;
16
20
  }
17
21
  /**
18
22
  * A behavior that renders a template for each item in an array.
@@ -26,7 +26,10 @@ class ArrayObserver extends SubscriberSet {
26
26
  this.splices = void 0;
27
27
  this.needsQueue = true;
28
28
  this.call = this.flush;
29
- source.$fastController = this;
29
+ Reflect.defineProperty(source, "$fastController", {
30
+ value: this,
31
+ enumerable: false,
32
+ });
30
33
  }
31
34
  addSplice(splice) {
32
35
  if (this.splices === void 0) {
@@ -80,15 +83,24 @@ export function enableArrayObservation() {
80
83
  Observable.setArrayObserverFactory((collection) => {
81
84
  return new ArrayObserver(collection);
82
85
  });
83
- const arrayProto = Array.prototype;
84
- const pop = arrayProto.pop;
85
- const push = arrayProto.push;
86
- const reverse = arrayProto.reverse;
87
- const shift = arrayProto.shift;
88
- const sort = arrayProto.sort;
89
- const splice = arrayProto.splice;
90
- const unshift = arrayProto.unshift;
91
- arrayProto.pop = function () {
86
+ const proto = Array.prototype;
87
+ // Don't patch Array if it has already been patched
88
+ // by another copy of fast-element.
89
+ if (proto.$fastPatch) {
90
+ return;
91
+ }
92
+ Reflect.defineProperty(proto, "$fastPatch", {
93
+ value: 1,
94
+ enumerable: false,
95
+ });
96
+ const pop = proto.pop;
97
+ const push = proto.push;
98
+ const reverse = proto.reverse;
99
+ const shift = proto.shift;
100
+ const sort = proto.sort;
101
+ const splice = proto.splice;
102
+ const unshift = proto.unshift;
103
+ proto.pop = function () {
92
104
  const notEmpty = this.length > 0;
93
105
  const methodCallResult = pop.apply(this, arguments);
94
106
  const o = this.$fastController;
@@ -97,7 +109,7 @@ export function enableArrayObservation() {
97
109
  }
98
110
  return methodCallResult;
99
111
  };
100
- arrayProto.push = function () {
112
+ proto.push = function () {
101
113
  const methodCallResult = push.apply(this, arguments);
102
114
  const o = this.$fastController;
103
115
  if (o !== void 0) {
@@ -105,7 +117,7 @@ export function enableArrayObservation() {
105
117
  }
106
118
  return methodCallResult;
107
119
  };
108
- arrayProto.reverse = function () {
120
+ proto.reverse = function () {
109
121
  let oldArray;
110
122
  const o = this.$fastController;
111
123
  if (o !== void 0) {
@@ -118,7 +130,7 @@ export function enableArrayObservation() {
118
130
  }
119
131
  return methodCallResult;
120
132
  };
121
- arrayProto.shift = function () {
133
+ proto.shift = function () {
122
134
  const notEmpty = this.length > 0;
123
135
  const methodCallResult = shift.apply(this, arguments);
124
136
  const o = this.$fastController;
@@ -127,7 +139,7 @@ export function enableArrayObservation() {
127
139
  }
128
140
  return methodCallResult;
129
141
  };
130
- arrayProto.sort = function () {
142
+ proto.sort = function () {
131
143
  let oldArray;
132
144
  const o = this.$fastController;
133
145
  if (o !== void 0) {
@@ -140,7 +152,7 @@ export function enableArrayObservation() {
140
152
  }
141
153
  return methodCallResult;
142
154
  };
143
- arrayProto.splice = function () {
155
+ proto.splice = function () {
144
156
  const methodCallResult = splice.apply(this, arguments);
145
157
  const o = this.$fastController;
146
158
  if (o !== void 0) {
@@ -148,7 +160,7 @@ export function enableArrayObservation() {
148
160
  }
149
161
  return methodCallResult;
150
162
  };
151
- arrayProto.unshift = function () {
163
+ proto.unshift = function () {
152
164
  const methodCallResult = unshift.apply(this, arguments);
153
165
  const o = this.$fastController;
154
166
  if (o !== void 0) {
@@ -6,6 +6,7 @@ import { HTMLDirective } from "./html-directive";
6
6
  import { HTMLView } from "./view";
7
7
  const defaultRepeatOptions = Object.freeze({
8
8
  positioning: false,
9
+ recycle: true,
9
10
  });
10
11
  function bindWithoutPositioning(view, items, index, context) {
11
12
  view.bind(items[index], context);
@@ -129,7 +130,9 @@ export class RepeatBehavior {
129
130
  for (; addIndex < end; ++addIndex) {
130
131
  const neighbor = views[addIndex];
131
132
  const location = neighbor ? neighbor.firstChild : this.location;
132
- const view = totalRemoved.length > 0 ? totalRemoved.shift() : template.create();
133
+ const view = this.options.recycle && totalRemoved.length > 0
134
+ ? totalRemoved.shift()
135
+ : template.create();
133
136
  views.splice(addIndex, 0, view);
134
137
  bindView(view, items, addIndex, childContext);
135
138
  view.insertBefore(location);
@@ -8180,7 +8180,7 @@
8180
8180
  "excerptTokens": [
8181
8181
  {
8182
8182
  "kind": "Content",
8183
- "text": "positioning: "
8183
+ "text": "positioning?: "
8184
8184
  },
8185
8185
  {
8186
8186
  "kind": "Content",
@@ -8197,6 +8197,31 @@
8197
8197
  "startIndex": 1,
8198
8198
  "endIndex": 2
8199
8199
  }
8200
+ },
8201
+ {
8202
+ "kind": "PropertySignature",
8203
+ "canonicalReference": "@microsoft/fast-element!RepeatOptions#recycle:member",
8204
+ "docComment": "/**\n * Enables view recycling\n */\n",
8205
+ "excerptTokens": [
8206
+ {
8207
+ "kind": "Content",
8208
+ "text": "recycle?: "
8209
+ },
8210
+ {
8211
+ "kind": "Content",
8212
+ "text": "boolean"
8213
+ },
8214
+ {
8215
+ "kind": "Content",
8216
+ "text": ";"
8217
+ }
8218
+ ],
8219
+ "releaseTag": "Public",
8220
+ "name": "recycle",
8221
+ "propertyTypeTokenRange": {
8222
+ "startIndex": 1,
8223
+ "endIndex": 2
8224
+ }
8200
8225
  }
8201
8226
  ],
8202
8227
  "extendsTokenRanges": []
@@ -1527,7 +1527,11 @@ export declare interface RepeatOptions {
1527
1527
  /**
1528
1528
  * Enables index, length, and dependent positioning updates in item templates.
1529
1529
  */
1530
- positioning: boolean;
1530
+ positioning?: boolean;
1531
+ /**
1532
+ * Enables view recycling
1533
+ */
1534
+ recycle?: boolean;
1531
1535
  }
1532
1536
 
1533
1537
  /**
@@ -3434,7 +3434,10 @@ class ArrayObserver extends SubscriberSet {
3434
3434
  this.splices = void 0;
3435
3435
  this.needsQueue = true;
3436
3436
  this.call = this.flush;
3437
- source.$fastController = this;
3437
+ Reflect.defineProperty(source, "$fastController", {
3438
+ value: this,
3439
+ enumerable: false
3440
+ });
3438
3441
  }
3439
3442
 
3440
3443
  addSplice(splice) {
@@ -3498,16 +3501,26 @@ function enableArrayObservation() {
3498
3501
  Observable.setArrayObserverFactory(collection => {
3499
3502
  return new ArrayObserver(collection);
3500
3503
  });
3501
- const arrayProto = Array.prototype;
3502
- const pop = arrayProto.pop;
3503
- const push = arrayProto.push;
3504
- const reverse = arrayProto.reverse;
3505
- const shift = arrayProto.shift;
3506
- const sort = arrayProto.sort;
3507
- const splice = arrayProto.splice;
3508
- const unshift = arrayProto.unshift;
3509
-
3510
- arrayProto.pop = function () {
3504
+ const proto = Array.prototype; // Don't patch Array if it has already been patched
3505
+ // by another copy of fast-element.
3506
+
3507
+ if (proto.$fastPatch) {
3508
+ return;
3509
+ }
3510
+
3511
+ Reflect.defineProperty(proto, "$fastPatch", {
3512
+ value: 1,
3513
+ enumerable: false
3514
+ });
3515
+ const pop = proto.pop;
3516
+ const push = proto.push;
3517
+ const reverse = proto.reverse;
3518
+ const shift = proto.shift;
3519
+ const sort = proto.sort;
3520
+ const splice = proto.splice;
3521
+ const unshift = proto.unshift;
3522
+
3523
+ proto.pop = function () {
3511
3524
  const notEmpty = this.length > 0;
3512
3525
  const methodCallResult = pop.apply(this, arguments);
3513
3526
  const o = this.$fastController;
@@ -3519,7 +3532,7 @@ function enableArrayObservation() {
3519
3532
  return methodCallResult;
3520
3533
  };
3521
3534
 
3522
- arrayProto.push = function () {
3535
+ proto.push = function () {
3523
3536
  const methodCallResult = push.apply(this, arguments);
3524
3537
  const o = this.$fastController;
3525
3538
 
@@ -3530,7 +3543,7 @@ function enableArrayObservation() {
3530
3543
  return methodCallResult;
3531
3544
  };
3532
3545
 
3533
- arrayProto.reverse = function () {
3546
+ proto.reverse = function () {
3534
3547
  let oldArray;
3535
3548
  const o = this.$fastController;
3536
3549
 
@@ -3548,7 +3561,7 @@ function enableArrayObservation() {
3548
3561
  return methodCallResult;
3549
3562
  };
3550
3563
 
3551
- arrayProto.shift = function () {
3564
+ proto.shift = function () {
3552
3565
  const notEmpty = this.length > 0;
3553
3566
  const methodCallResult = shift.apply(this, arguments);
3554
3567
  const o = this.$fastController;
@@ -3560,7 +3573,7 @@ function enableArrayObservation() {
3560
3573
  return methodCallResult;
3561
3574
  };
3562
3575
 
3563
- arrayProto.sort = function () {
3576
+ proto.sort = function () {
3564
3577
  let oldArray;
3565
3578
  const o = this.$fastController;
3566
3579
 
@@ -3578,7 +3591,7 @@ function enableArrayObservation() {
3578
3591
  return methodCallResult;
3579
3592
  };
3580
3593
 
3581
- arrayProto.splice = function () {
3594
+ proto.splice = function () {
3582
3595
  const methodCallResult = splice.apply(this, arguments);
3583
3596
  const o = this.$fastController;
3584
3597
 
@@ -3589,7 +3602,7 @@ function enableArrayObservation() {
3589
3602
  return methodCallResult;
3590
3603
  };
3591
3604
 
3592
- arrayProto.unshift = function () {
3605
+ proto.unshift = function () {
3593
3606
  const methodCallResult = unshift.apply(this, arguments);
3594
3607
  const o = this.$fastController;
3595
3608
 
@@ -3663,7 +3676,8 @@ function when(binding, templateOrTemplateBinding) {
3663
3676
  }
3664
3677
 
3665
3678
  const defaultRepeatOptions = Object.freeze({
3666
- positioning: false
3679
+ positioning: false,
3680
+ recycle: true
3667
3681
  });
3668
3682
 
3669
3683
  function bindWithoutPositioning(view, items, index, context) {
@@ -3807,7 +3821,7 @@ class RepeatBehavior {
3807
3821
  for (; addIndex < end; ++addIndex) {
3808
3822
  const neighbor = views[addIndex];
3809
3823
  const location = neighbor ? neighbor.firstChild : this.location;
3810
- const view = totalRemoved.length > 0 ? totalRemoved.shift() : template.create();
3824
+ const view = this.options.recycle && totalRemoved.length > 0 ? totalRemoved.shift() : template.create();
3811
3825
  views.splice(addIndex, 0, view);
3812
3826
  bindView(view, items, addIndex, childContext);
3813
3827
  view.insertBefore(location);
@@ -1 +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)}}const h="fast-"+Math.random().toString(36).substring(2,8),a=h+"{",c="}"+h,d=Object.freeze({supportsAdoptedStyleSheets:Array.isArray(document.adoptedStyleSheets)&&"replace"in CSSStyleSheet.prototype,setHTMLPolicy(t){if(n!==i)throw new Error("The HTML policy can only be set once.");n=t},createHTML:t=>n.createHTML(t),isMarker:t=>t&&8===t.nodeType&&t.data.startsWith(h),extractDirectiveIndexFromMarker:t=>parseInt(t.data.replace(h+":","")),createInterpolationPlaceholder:t=>`${a}${t}${c}`,createCustomAttributePlaceholder(t,e){return`${t}="${this.createInterpolationPlaceholder(e)}"`},createBlockPlaceholder:t=>`\x3c!--${h}:${t}--\x3e`,queueUpdate(t){s.length<1&&window.requestAnimationFrame(d.processUpdates),s.push(t)},processUpdates(){let t=0;for(;t<s.length;)if(l(s[t]),t++,t>1024){for(let e=0,i=s.length-t;e<i;e++)s[e]=s[e+t];s.length-=t,t=0}s.length=0},nextUpdate:()=>new Promise(t=>{d.queueUpdate(t)}),setAttribute(t,e,s){null==s?t.removeAttribute(e):t.setAttribute(e,s)},setBooleanAttribute(t,e,s){s?t.setAttribute(e,""):t.removeAttribute(e)},removeChildNodes(t){for(let e=t.firstChild;null!==e;e=t.firstChild)t.removeChild(e)},createTemplateWalker:t=>document.createTreeWalker(t,133,null,!1)});function u(t){const e=this.spillover;-1===e.indexOf(t)&&e.push(t)}function f(t){const e=this.spillover,s=e.indexOf(t);-1!==s&&e.splice(s,1)}function p(t){const e=this.spillover,s=this.source;for(let i=0,n=e.length;i<n;++i)e[i].handleChange(s,t)}function g(t){return-1!==this.spillover.indexOf(t)}class b{constructor(t,e){this.sub1=void 0,this.sub2=void 0,this.spillover=void 0,this.source=t,this.sub1=e}has(t){return this.sub1===t||this.sub2===t}subscribe(t){this.has(t)||(void 0!==this.sub1?void 0!==this.sub2?(this.spillover=[this.sub1,this.sub2,t],this.subscribe=u,this.unsubscribe=f,this.notify=p,this.has=g,this.sub1=void 0,this.sub2=void 0):this.sub2=t:this.sub1=t)}unsubscribe(t){this.sub1===t?this.sub1=void 0:this.sub2===t&&(this.sub2=void 0)}notify(t){const e=this.sub1,s=this.sub2,i=this.source;void 0!==e&&e.handleChange(i,t),void 0!==s&&s.handleChange(i,t)}}class v{constructor(t){this.subscribers={},this.sourceSubscribers=null,this.source=t}notify(t){var e;const s=this.subscribers[t];void 0!==s&&s.notify(t),null===(e=this.sourceSubscribers)||void 0===e||e.notify(t)}subscribe(t,e){var s;if(e){let s=this.subscribers[e];void 0===s&&(this.subscribers[e]=s=new b(this.source)),s.subscribe(t)}else this.sourceSubscribers=null!==(s=this.sourceSubscribers)&&void 0!==s?s:new b(this.source),this.sourceSubscribers.subscribe(t)}unsubscribe(t,e){var s;if(e){const s=this.subscribers[e];void 0!==s&&s.unsubscribe(t)}else null===(s=this.sourceSubscribers)||void 0===s||s.unsubscribe(t)}}const m=/(:|&&|\|\||if)/,y=new WeakMap,C=new WeakMap;let x=void 0,w=t=>{throw new Error("Must call enableArrayObservation before observing arrays.")};class S{constructor(t){this.name=t,this.field="_"+t,this.callback=t+"Changed"}getValue(t){return void 0!==x&&x.watch(t,this.name),t[this.field]}setValue(t,e){const s=this.field,i=t[s];if(i!==e){t[s]=e;const n=t[this.callback];"function"==typeof n&&n.call(t,i,e),T(t).notify(this.name)}}}const B=Object.freeze({setArrayObserverFactory(t){w=t},getNotifier(t){let e=t.$fastController||y.get(t);return void 0===e&&(Array.isArray(t)?e=w(t):y.set(t,e=new v(t))),e},track(t,e){void 0!==x&&x.watch(t,e)},trackVolatile(){void 0!==x&&(x.needsRefresh=!0)},notify(t,e){T(t).notify(e)},defineProperty(t,e){"string"==typeof e&&(e=new S(e)),this.getAccessors(t).push(e),Reflect.defineProperty(t,e.name,{enumerable:!0,get:function(){return e.getValue(this)},set:function(t){e.setValue(this,t)}})},getAccessors(t){let e=C.get(t);if(void 0===e){let s=Reflect.getPrototypeOf(t);for(;void 0===e&&null!==s;)e=C.get(s),s=Reflect.getPrototypeOf(s);e=void 0===e?[]:e.slice(0),C.set(t,e)}return e},binding(t,e,s=this.isVolatileBinding(t)){return new I(t,e,s)},isVolatileBinding:t=>m.test(t.toString())}),T=B.getNotifier,O=B.trackVolatile,N=d.queueUpdate;function A(t,e){B.defineProperty(t,e)}function k(t,e,s){return Object.assign({},s,{get:function(){return O(),s.get.apply(this)}})}let V=null;function F(t){V=t}class ${constructor(){this.index=0,this.length=0,this.parent=null,this.parentContext=null}get event(){return V}get isEven(){return this.index%2==0}get isOdd(){return this.index%2!=0}get isFirst(){return 0===this.index}get isInMiddle(){return!this.isFirst&&!this.isLast}get isLast(){return this.index===this.length-1}}B.defineProperty($.prototype,"index"),B.defineProperty($.prototype,"length");const _=Object.seal(new $);class I extends b{constructor(t,e,s=!1){super(t,e),this.binding=t,this.isVolatileBinding=s,this.needsRefresh=!0,this.needsQueue=!0,this.first=this,this.last=null,this.propertySource=void 0,this.propertyName=void 0,this.notifier=void 0,this.next=void 0}observe(t,e){this.needsRefresh&&null!==this.last&&this.disconnect();const s=x;x=this.needsRefresh?this:void 0,this.needsRefresh=this.isVolatileBinding;const i=this.binding(t,e);return x=s,i}disconnect(){if(null!==this.last){let t=this.first;for(;void 0!==t;)t.notifier.unsubscribe(this,t.propertyName),t=t.next;this.last=null,this.needsRefresh=this.needsQueue=!0}}watch(t,e){const s=this.last,i=T(t),n=null===s?this.first:{};if(n.propertySource=t,n.propertyName=e,n.notifier=i,i.subscribe(this,e),null!==s){if(!this.needsRefresh){let e;x=void 0,e=s.propertySource[s.propertyName],x=this,t===e&&(this.needsRefresh=!0)}s.next=n}this.last=n}handleChange(){this.needsQueue&&(this.needsQueue=!1,N(this))}call(){null!==this.last&&(this.needsQueue=!0,this.notify(this))}records(){let t=this.first;return{next:()=>{const e=t;return void 0===e?{value:void 0,done:!0}:(t=t.next,{value:e,done:!1})},[Symbol.iterator]:function(){return this}}}}class M{constructor(){this.targetIndex=0}}class E extends M{constructor(){super(...arguments),this.createPlaceholder=d.createInterpolationPlaceholder}}class L extends M{constructor(t,e,s){super(),this.name=t,this.behavior=e,this.options=s}createPlaceholder(t){return d.createCustomAttributePlaceholder(this.name,t)}createBehavior(t){return new this.behavior(t,this.options)}}function P(t,e){this.source=t,this.context=e,null===this.bindingObserver&&(this.bindingObserver=B.binding(this.binding,this,this.isBindingVolatile)),this.updateTarget(this.bindingObserver.observe(t,e))}function j(t,e){this.source=t,this.context=e,this.target.addEventListener(this.targetName,this)}function R(){this.bindingObserver.disconnect(),this.source=null,this.context=null}function z(){this.bindingObserver.disconnect(),this.source=null,this.context=null;const t=this.target.$fastView;void 0!==t&&t.isComposed&&(t.unbind(),t.needsBindOnly=!0)}function H(){this.target.removeEventListener(this.targetName,this),this.source=null,this.context=null}function U(t){d.setAttribute(this.target,this.targetName,t)}function Q(t){d.setBooleanAttribute(this.target,this.targetName,t)}function q(t){if(null==t&&(t=""),t.create){this.target.textContent="";let e=this.target.$fastView;void 0===e?e=t.create():this.target.$fastTemplate!==t&&(e.isComposed&&(e.remove(),e.unbind()),e=t.create()),e.isComposed?e.needsBindOnly&&(e.needsBindOnly=!1,e.bind(this.source,this.context)):(e.isComposed=!0,e.bind(this.source,this.context),e.insertBefore(this.target),this.target.$fastView=e,this.target.$fastTemplate=t)}else{const e=this.target.$fastView;void 0!==e&&e.isComposed&&(e.isComposed=!1,e.remove(),e.needsBindOnly?e.needsBindOnly=!1:e.unbind()),this.target.textContent=t}}function W(t){this.target[this.targetName]=t}function D(t){const e=this.classVersions||Object.create(null),s=this.target;let i=this.version||0;if(null!=t&&t.length){const n=t.split(/\s+/);for(let t=0,r=n.length;t<r;++t){const r=n[t];""!==r&&(e[r]=i,s.classList.add(r))}}if(this.classVersions=e,this.version=i+1,0!==i){i-=1;for(const t in e)e[t]===i&&s.classList.remove(t)}}class G extends E{constructor(t){super(),this.binding=t,this.bind=P,this.unbind=R,this.updateTarget=U,this.isBindingVolatile=B.isVolatileBinding(this.binding)}get targetName(){return this.originalTargetName}set targetName(t){if(this.originalTargetName=t,void 0!==t)switch(t[0]){case":":if(this.cleanedTargetName=t.substr(1),this.updateTarget=W,"innerHTML"===this.cleanedTargetName){const t=this.binding;this.binding=(e,s)=>d.createHTML(t(e,s))}break;case"?":this.cleanedTargetName=t.substr(1),this.updateTarget=Q;break;case"@":this.cleanedTargetName=t.substr(1),this.bind=j,this.unbind=H;break;default:this.cleanedTargetName=t,"class"===t&&(this.updateTarget=D)}}targetAtContent(){this.updateTarget=q,this.unbind=z}createBehavior(t){return new J(t,this.binding,this.isBindingVolatile,this.bind,this.unbind,this.updateTarget,this.cleanedTargetName)}}class J{constructor(t,e,s,i,n,r,o){this.source=null,this.context=null,this.bindingObserver=null,this.target=t,this.binding=e,this.isBindingVolatile=s,this.bind=i,this.unbind=n,this.updateTarget=r,this.targetName=o}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleEvent(t){F(t);const e=this.binding(this.source,this.context);F(null),!0!==e&&t.preventDefault()}}let K=null;class X{addFactory(t){t.targetIndex=this.targetIndex,this.behaviorFactories.push(t)}captureContentBinding(t){t.targetAtContent(),this.addFactory(t)}reset(){this.behaviorFactories=[],this.targetIndex=-1}release(){K=this}static borrow(t){const e=K||new X;return e.directives=t,e.reset(),K=null,e}}function Y(t){if(1===t.length)return t[0];let e;const s=t.length,i=t.map(t=>"string"==typeof t?()=>t:(e=t.targetName||e,t.binding)),n=new G((t,e)=>{let n="";for(let r=0;r<s;++r)n+=i[r](t,e);return n});return n.targetName=e,n}const Z=c.length;function tt(t,e){const s=e.split(a);if(1===s.length)return null;const i=[];for(let e=0,n=s.length;e<n;++e){const n=s[e],r=n.indexOf(c);let o;if(-1===r)o=n;else{const e=parseInt(n.substring(0,r));i.push(t.directives[e]),o=n.substring(r+Z)}""!==o&&i.push(o)}return i}function et(t,e,s=!1){const i=e.attributes;for(let n=0,r=i.length;n<r;++n){const o=i[n],l=o.value,h=tt(t,l);let a=null;null===h?s&&(a=new G(()=>l),a.targetName=o.name):a=Y(h),null!==a&&(e.removeAttributeNode(o),n--,r--,t.addFactory(a))}}function st(t,e,s){const i=tt(t,e.textContent);if(null!==i){let n=e;for(let r=0,o=i.length;r<o;++r){const o=i[r],l=0===r?e:n.parentNode.insertBefore(document.createTextNode(""),n.nextSibling);"string"==typeof o?l.textContent=o:(l.textContent=" ",t.captureContentBinding(o)),n=l,t.targetIndex++,l!==e&&s.nextNode()}t.targetIndex--}}function it(t,e){const s=t.content;document.adoptNode(s);const i=X.borrow(e);et(i,t,!0);const n=i.behaviorFactories;i.reset();const r=d.createTemplateWalker(s);let o;for(;o=r.nextNode();)switch(i.targetIndex++,o.nodeType){case 1:et(i,o);break;case 3:st(i,o,r);break;case 8:d.isMarker(o)&&i.addFactory(e[d.extractDirectiveIndexFromMarker(o)])}let l=0;(d.isMarker(s.firstChild)||1===s.childNodes.length&&e.length)&&(s.insertBefore(document.createComment(""),s.firstChild),l=-1);const h=i.behaviorFactories;return i.release(),{fragment:s,viewBehaviorFactories:h,hostBehaviorFactories:n,targetOffset:l}}const nt=document.createRange();class rt{constructor(t,e){this.fragment=t,this.behaviors=e,this.source=null,this.context=null,this.firstChild=t.firstChild,this.lastChild=t.lastChild}appendTo(t){t.appendChild(this.fragment)}insertBefore(t){if(this.fragment.hasChildNodes())t.parentNode.insertBefore(this.fragment,t);else{const e=t.parentNode,s=this.lastChild;let i,n=this.firstChild;for(;n!==s;)i=n.nextSibling,e.insertBefore(n,t),n=i;e.insertBefore(s,t)}}remove(){const t=this.fragment,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.appendChild(i),i=s;t.appendChild(e)}dispose(){const t=this.firstChild.parentNode,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.removeChild(i),i=s;t.removeChild(e);const n=this.behaviors,r=this.source;for(let t=0,e=n.length;t<e;++t)n[t].unbind(r)}bind(t,e){const s=this.behaviors;if(this.source!==t)if(null!==this.source){const i=this.source;this.source=t,this.context=e;for(let n=0,r=s.length;n<r;++n){const r=s[n];r.unbind(i),r.bind(t,e)}}else{this.source=t,this.context=e;for(let i=0,n=s.length;i<n;++i)s[i].bind(t,e)}}unbind(){if(null===this.source)return;const t=this.behaviors,e=this.source;for(let s=0,i=t.length;s<i;++s)t[s].unbind(e);this.source=null}static disposeContiguousBatch(t){if(0!==t.length){nt.setStartBefore(t[0].firstChild),nt.setEndAfter(t[t.length-1].lastChild),nt.deleteContents();for(let e=0,s=t.length;e<s;++e){const s=t[e],i=s.behaviors,n=s.source;for(let t=0,e=i.length;t<e;++t)i[t].unbind(n)}}}}class ot{constructor(t,e){this.behaviorCount=0,this.hasHostBehaviors=!1,this.fragment=null,this.targetOffset=0,this.viewBehaviorFactories=null,this.hostBehaviorFactories=null,this.html=t,this.directives=e}create(t){if(null===this.fragment){let t;const e=this.html;if("string"==typeof e){t=document.createElement("template"),t.innerHTML=d.createHTML(e);const s=t.content.firstElementChild;null!==s&&"TEMPLATE"===s.tagName&&(t=s)}else t=e;const s=it(t,this.directives);this.fragment=s.fragment,this.viewBehaviorFactories=s.viewBehaviorFactories,this.hostBehaviorFactories=s.hostBehaviorFactories,this.targetOffset=s.targetOffset,this.behaviorCount=this.viewBehaviorFactories.length+this.hostBehaviorFactories.length,this.hasHostBehaviors=this.hostBehaviorFactories.length>0}const e=this.fragment.cloneNode(!0),s=this.viewBehaviorFactories,i=new Array(this.behaviorCount),n=d.createTemplateWalker(e);let r=0,o=this.targetOffset,l=n.nextNode();for(let t=s.length;r<t;++r){const t=s[r],e=t.targetIndex;for(;null!==l;){if(o===e){i[r]=t.createBehavior(l);break}l=n.nextNode(),o++}}if(this.hasHostBehaviors){const e=this.hostBehaviorFactories;for(let s=0,n=e.length;s<n;++s,++r)i[r]=e[s].createBehavior(t)}return new rt(e,i)}render(t,e,s){"string"==typeof e&&(e=document.getElementById(e)),void 0===s&&(s=e);const i=this.create(s);return i.bind(t,_),i.appendTo(e),i}}const lt=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function ht(t,...e){const s=[];let i="";for(let n=0,r=t.length-1;n<r;++n){const r=t[n];let o=e[n];if(i+=r,o instanceof ot){const t=o;o=()=>t}if("function"==typeof o&&(o=new G(o)),o instanceof E){const t=lt.exec(r);null!==t&&(o.targetName=t[2])}o instanceof M?(i+=o.createPlaceholder(s.length),s.push(o)):i+=o}return i+=t[t.length-1],new ot(i,s)}class at{constructor(){this.targets=new WeakSet,this.behaviors=null}addStylesTo(t){this.targets.add(t)}removeStylesFrom(t){this.targets.delete(t)}isAttachedTo(t){return this.targets.has(t)}withBehaviors(...t){return this.behaviors=null===this.behaviors?t:this.behaviors.concat(t),this}}function ct(t){return t.map(t=>t instanceof at?ct(t.styles):[t]).reduce((t,e)=>t.concat(e),[])}function dt(t){return t.map(t=>t instanceof at?t.behaviors:null).reduce((t,e)=>null===e?t:(null===t&&(t=[]),t.concat(e)),null)}at.create=(()=>{if(d.supportsAdoptedStyleSheets){const t=new Map;return e=>new ut(e,t)}return t=>new pt(t)})();class ut extends at{constructor(t,e){super(),this.styles=t,this.styleSheetCache=e,this._styleSheets=void 0,this.behaviors=dt(t)}get styleSheets(){if(void 0===this._styleSheets){const t=this.styles,e=this.styleSheetCache;this._styleSheets=ct(t).map(t=>{if(t instanceof CSSStyleSheet)return t;let s=e.get(t);return void 0===s&&(s=new CSSStyleSheet,s.replaceSync(t),e.set(t,s)),s})}return this._styleSheets}addStylesTo(t){t.adoptedStyleSheets=[...t.adoptedStyleSheets,...this.styleSheets],super.addStylesTo(t)}removeStylesFrom(t){const e=this.styleSheets;t.adoptedStyleSheets=t.adoptedStyleSheets.filter(t=>-1===e.indexOf(t)),super.removeStylesFrom(t)}}let ft=0;class pt extends at{constructor(t){super(),this.styles=t,this.behaviors=null,this.behaviors=dt(t),this.styleSheets=ct(t),this.styleClass="fast-style-class-"+ ++ft}addStylesTo(t){const e=this.styleSheets,s=this.styleClass;t=this.normalizeTarget(t);for(let i=0;i<e.length;i++){const n=document.createElement("style");n.innerHTML=e[i],n.className=s,t.append(n)}super.addStylesTo(t)}removeStylesFrom(t){const e=(t=this.normalizeTarget(t)).querySelectorAll("."+this.styleClass);for(let s=0,i=e.length;s<i;++s)t.removeChild(e[s]);super.removeStylesFrom(t)}isAttachedTo(t){return super.isAttachedTo(this.normalizeTarget(t))}normalizeTarget(t){return t===document?document.body:t}}const gt={toView:t=>t?"true":"false",fromView:t=>null!=t&&"false"!==t&&!1!==t&&0!==t},bt={toView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e.toString()},fromView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e}};class vt{constructor(t,e,s=e.toLowerCase(),i="reflect",n){this.guards=new Set,this.Owner=t,this.name=e,this.attribute=s,this.mode=i,this.converter=n,this.fieldName="_"+e,this.callbackName=e+"Changed",this.hasCallback=this.callbackName in t.prototype,"boolean"===i&&void 0===n&&(this.converter=gt)}setValue(t,e){const s=t[this.fieldName],i=this.converter;void 0!==i&&(e=i.fromView(e)),s!==e&&(t[this.fieldName]=e,this.tryReflectToAttribute(t),this.hasCallback&&t[this.callbackName](s,e),t.$fastController.notify(this.name))}getValue(t){return B.track(t,this.name),t[this.fieldName]}onAttributeChangedCallback(t,e){this.guards.has(t)||(this.guards.add(t),this.setValue(t,e),this.guards.delete(t))}tryReflectToAttribute(t){const e=this.mode,s=this.guards;s.has(t)||"fromView"===e||d.queueUpdate(()=>{s.add(t);const i=t[this.fieldName];switch(e){case"reflect":const e=this.converter;d.setAttribute(t,this.attribute,void 0!==e?e.toView(i):i);break;case"boolean":d.setBooleanAttribute(t,this.attribute,i)}s.delete(t)})}static collect(t,...e){const s=[];e.push(t.attributes);for(let i=0,n=e.length;i<n;++i){const n=e[i];if(void 0!==n)for(let e=0,i=n.length;e<i;++e){const i=n[e];"string"==typeof i?s.push(new vt(t,i)):s.push(new vt(t,i.property,i.attribute,i.mode,i.converter))}}return s}}function mt(t,e){let s;function i(t,e){arguments.length>1&&(s.property=e);const i=t.constructor.attributes||(t.constructor.attributes=[]);i.push(s)}return arguments.length>1?(s={},void i(t,e)):(s=void 0===t?{}:t,i)}const yt={mode:"open"},Ct={},xt=new Map;class wt{constructor(t,e=t.definition){"string"==typeof e&&(e={name:e}),this.type=t,this.name=e.name,this.template=e.template;const s=vt.collect(t,e.attributes),i=new Array(s.length),n={},r={};for(let t=0,e=s.length;t<e;++t){const e=s[t];i[t]=e.attribute,n[e.name]=e,r[e.attribute]=e}this.attributes=s,this.observedAttributes=i,this.propertyLookup=n,this.attributeLookup=r,this.shadowOptions=void 0===e.shadowOptions?yt:null===e.shadowOptions?void 0:Object.assign(Object.assign({},yt),e.shadowOptions),this.elementOptions=void 0===e.elementOptions?Ct:Object.assign(Object.assign({},Ct),e.elementOptions),this.styles=void 0===e.styles?void 0:Array.isArray(e.styles)?at.create(e.styles):e.styles instanceof at?e.styles:at.create([e.styles])}define(t=customElements){const e=this.type;if(!this.isDefined){const t=this.attributes,s=e.prototype;for(let e=0,i=t.length;e<i;++e)B.defineProperty(s,t[e]);Reflect.defineProperty(e,"observedAttributes",{value:this.observedAttributes,enumerable:!0}),xt.set(e,this),this.isDefined=!0}return t.get(this.name)||t.define(this.name,e,this.elementOptions),this}static forType(t){return xt.get(t)}}const St=new WeakMap,Bt={bubbles:!0,composed:!0,cancelable:!0};function Tt(t){return t.shadowRoot||St.get(t)||null}class Ot extends v{constructor(t,e){super(t),this.boundObservables=null,this.behaviors=null,this.needsInitialization=!0,this._template=null,this._styles=null,this._isConnected=!1,this.$fastController=this,this.view=null,this.element=t,this.definition=e;const s=e.shadowOptions;if(void 0!==s){const e=t.attachShadow(s);"closed"===s.mode&&St.set(t,e)}const i=B.getAccessors(t);if(i.length>0){const e=this.boundObservables=Object.create(null);for(let s=0,n=i.length;s<n;++s){const n=i[s].name,r=t[n];void 0!==r&&(delete t[n],e[n]=r)}}}get isConnected(){return B.track(this,"isConnected"),this._isConnected}setIsConnected(t){this._isConnected=t,B.notify(this,"isConnected")}get template(){return this._template}set template(t){this._template!==t&&(this._template=t,this.needsInitialization||this.renderTemplate(t))}get styles(){return this._styles}set styles(t){this._styles!==t&&(null!==this._styles&&this.removeStyles(this._styles),this._styles=t,this.needsInitialization||null===t||this.addStyles(t))}addStyles(t){const e=Tt(this.element)||this.element.getRootNode();if(t instanceof HTMLStyleElement)e.append(t);else if(!t.isAttachedTo(e)){const s=t.behaviors;t.addStylesTo(e),null!==s&&this.addBehaviors(s)}}removeStyles(t){const e=Tt(this.element)||this.element.getRootNode();if(t instanceof HTMLStyleElement)e.removeChild(t);else if(t.isAttachedTo(e)){const s=t.behaviors;t.removeStylesFrom(e),null!==s&&this.removeBehaviors(s)}}addBehaviors(t){const e=this.behaviors||(this.behaviors=new Map),s=t.length,i=[];for(let n=0;n<s;++n){const s=t[n];e.has(s)?e.set(s,e.get(s)+1):(e.set(s,1),i.push(s))}if(this._isConnected){const t=this.element;for(let e=0;e<i.length;++e)i[e].bind(t,_)}}removeBehaviors(t,e=!1){const s=this.behaviors;if(null===s)return;const i=t.length,n=[];for(let r=0;r<i;++r){const i=t[r];if(s.has(i)){const t=s.get(i)-1;0===t||e?s.delete(i)&&n.push(i):s.set(i,t)}}if(this._isConnected){const t=this.element;for(let e=0;e<n.length;++e)n[e].unbind(t)}}onConnectedCallback(){if(this._isConnected)return;const t=this.element;this.needsInitialization?this.finishInitialization():null!==this.view&&this.view.bind(t,_);const e=this.behaviors;if(null!==e)for(const[s]of e)s.bind(t,_);this.setIsConnected(!0)}onDisconnectedCallback(){if(!this._isConnected)return;this.setIsConnected(!1);const t=this.view;null!==t&&t.unbind();const e=this.behaviors;if(null!==e){const t=this.element;for(const[s]of e)s.unbind(t)}}onAttributeChangedCallback(t,e,s){const i=this.definition.attributeLookup[t];void 0!==i&&i.onAttributeChangedCallback(this.element,s)}emit(t,e,s){return!!this._isConnected&&this.element.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign({detail:e},Bt),s)))}finishInitialization(){const t=this.element,e=this.boundObservables;if(null!==e){const s=Object.keys(e);for(let i=0,n=s.length;i<n;++i){const n=s[i];t[n]=e[n]}this.boundObservables=null}const s=this.definition;null===this._template&&(this.element.resolveTemplate?this._template=this.element.resolveTemplate():s.template&&(this._template=s.template||null)),null!==this._template&&this.renderTemplate(this._template),null===this._styles&&(this.element.resolveStyles?this._styles=this.element.resolveStyles():s.styles&&(this._styles=s.styles||null)),null!==this._styles&&this.addStyles(this._styles),this.needsInitialization=!1}renderTemplate(t){const e=this.element,s=Tt(e)||e;null!==this.view?(this.view.dispose(),this.view=null):this.needsInitialization||d.removeChildNodes(s),t&&(this.view=t.render(e,s,e))}static forCustomElement(t){const e=t.$fastController;if(void 0!==e)return e;const s=wt.forType(t.constructor);if(void 0===s)throw new Error("Missing FASTElement definition.");return t.$fastController=new Ot(t,s)}}function Nt(t){return class extends t{constructor(){super(),Ot.forCustomElement(this)}$emit(t,e,s){return this.$fastController.emit(t,e,s)}connectedCallback(){this.$fastController.onConnectedCallback()}disconnectedCallback(){this.$fastController.onDisconnectedCallback()}attributeChangedCallback(t,e,s){this.$fastController.onAttributeChangedCallback(t,e,s)}}}const At=Object.assign(Nt(HTMLElement),{from:t=>Nt(t),define:(t,e)=>new wt(t,e).define().type});function kt(t){return function(e){new wt(e,t).define()}}class Vt{createCSS(){return""}createBehavior(){}}function Ft(t,e){const s=[];let i="";const n=[];for(let r=0,o=t.length-1;r<o;++r){i+=t[r];let o=e[r];if(o instanceof Vt){const t=o.createBehavior();o=o.createCSS(),t&&n.push(t)}o instanceof at||o instanceof CSSStyleSheet?(""!==i.trim()&&(s.push(i),i=""),s.push(o)):i+=o}return i+=t[t.length-1],""!==i.trim()&&s.push(i),{styles:s,behaviors:n}}function $t(t,...e){const{styles:s,behaviors:i}=Ft(t,e),n=at.create(s);return i.length&&n.withBehaviors(...i),n}class _t extends Vt{constructor(t,e){super(),this.behaviors=e,this.css="";const s=t.reduce((t,e)=>("string"==typeof e?this.css+=e:t.push(e),t),[]);s.length&&(this.styles=at.create(s))}createBehavior(){return this}createCSS(){return this.css}bind(t){this.styles&&t.$fastController.addStyles(this.styles),this.behaviors.length&&t.$fastController.addBehaviors(this.behaviors)}unbind(t){this.styles&&t.$fastController.removeStyles(this.styles),this.behaviors.length&&t.$fastController.removeBehaviors(this.behaviors)}}function It(t,...e){const{styles:s,behaviors:i}=Ft(t,e);return new _t(s,i)}function Mt(t,e,s){return{index:t,removed:e,addedCount:s}}function Et(t,s,i,n,r,o){let l=0,h=0;const a=Math.min(i-s,o-r);if(0===s&&0===r&&(l=function(t,e,s){for(let i=0;i<s;++i)if(t[i]!==e[i])return i;return s}(t,n,a)),i===t.length&&o===n.length&&(h=function(t,e,s){let i=t.length,n=e.length,r=0;for(;r<s&&t[--i]===e[--n];)r++;return r}(t,n,a-l)),r+=l,o-=h,(i-=h)-(s+=l)==0&&o-r==0)return e;if(s===i){const t=Mt(s,[],0);for(;r<o;)t.removed.push(n[r++]);return[t]}if(r===o)return[Mt(s,[],i-s)];const c=function(t){let e=t.length-1,s=t[0].length-1,i=t[e][s];const n=[];for(;e>0||s>0;){if(0===e){n.push(2),s--;continue}if(0===s){n.push(3),e--;continue}const r=t[e-1][s-1],o=t[e-1][s],l=t[e][s-1];let h;h=o<l?o<r?o:r:l<r?l:r,h===r?(r===i?n.push(0):(n.push(1),i=r),e--,s--):h===o?(n.push(3),e--,i=o):(n.push(2),s--,i=l)}return n.reverse(),n}(function(t,e,s,i,n,r){const o=r-n+1,l=s-e+1,h=new Array(o);let a,c;for(let t=0;t<o;++t)h[t]=new Array(l),h[t][0]=t;for(let t=0;t<l;++t)h[0][t]=t;for(let s=1;s<o;++s)for(let r=1;r<l;++r)t[e+r-1]===i[n+s-1]?h[s][r]=h[s-1][r-1]:(a=h[s-1][r]+1,c=h[s][r-1]+1,h[s][r]=a<c?a:c);return h}(t,s,i,n,r,o)),d=[];let u=void 0,f=s,p=r;for(let t=0;t<c.length;++t)switch(c[t]){case 0:void 0!==u&&(d.push(u),u=void 0),f++,p++;break;case 1:void 0===u&&(u=Mt(f,[],0)),u.addedCount++,f++,u.removed.push(n[p]),p++;break;case 2:void 0===u&&(u=Mt(f,[],0)),u.addedCount++,f++;break;case 3:void 0===u&&(u=Mt(f,[],0)),u.removed.push(n[p]),p++}return void 0!==u&&d.push(u),d}const Lt=Array.prototype.push;function Pt(t,e,s,i){const n=Mt(e,s,i);let r=!1,o=0;for(let e=0;e<t.length;e++){const s=t[e];if(s.index+=o,r)continue;const i=(l=n.index,h=n.index+n.removed.length,a=s.index,c=s.index+s.addedCount,h<a||c<l?-1:h===a||c===l?0:l<a?h<c?h-a:c-a:c<h?c-l:h-l);if(i>=0){t.splice(e,1),e--,o-=s.addedCount-s.removed.length,n.addedCount+=s.addedCount-i;const l=n.removed.length+s.removed.length-i;if(n.addedCount||l){let t=s.removed;if(n.index<s.index){const e=n.removed.slice(0,s.index-n.index);Lt.apply(e,t),t=e}if(n.index+n.removed.length>s.index+s.addedCount){const e=n.removed.slice(s.index+s.addedCount-n.index);Lt.apply(t,e)}n.removed=t,s.index<n.index&&(n.index=s.index)}else r=!0}else if(n.index<s.index){r=!0,t.splice(e,0,n),e++;const i=n.addedCount-n.removed.length;s.index+=i,o+=i}}var l,h,a,c;r||t.push(n)}function jt(t,e){let s=[];const i=function(t){const e=[];for(let s=0,i=t.length;s<i;s++){const i=t[s];Pt(e,i.index,i.removed,i.addedCount)}return e}(e);for(let e=0,n=i.length;e<n;++e){const n=i[e];1!==n.addedCount||1!==n.removed.length?s=s.concat(Et(t,n.index,n.index+n.addedCount,n.removed,0,n.removed.length)):n.removed[0]!==t[n.index]&&s.push(n)}return s}let Rt=!1;function zt(t,e){let s=t.index;const i=e.length;return s>i?s=i-t.addedCount:s<0&&(s=i+t.removed.length+s-t.addedCount),s<0&&(s=0),t.index=s,t}class Ht extends b{constructor(t){super(t),this.oldCollection=void 0,this.splices=void 0,this.needsQueue=!0,this.call=this.flush,t.$fastController=this}addSplice(t){void 0===this.splices?this.splices=[t]:this.splices.push(t),this.needsQueue&&(this.needsQueue=!1,d.queueUpdate(this))}reset(t){this.oldCollection=t,this.needsQueue&&(this.needsQueue=!1,d.queueUpdate(this))}flush(){const t=this.splices,e=this.oldCollection;if(void 0===t&&void 0===e)return;this.needsQueue=!0,this.splices=void 0,this.oldCollection=void 0;const s=void 0===e?jt(this.source,t):Et(this.source,0,this.source.length,e,0,e.length);this.notify(s)}}function Ut(){if(Rt)return;Rt=!0,B.setArrayObserverFactory(t=>new Ht(t));const t=Array.prototype,e=t.pop,s=t.push,i=t.reverse,n=t.shift,r=t.sort,o=t.splice,l=t.unshift;t.pop=function(){const t=this.length>0,s=e.apply(this,arguments),i=this.$fastController;return void 0!==i&&t&&i.addSplice(Mt(this.length,[s],0)),s},t.push=function(){const t=s.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(zt(Mt(this.length-arguments.length,[],arguments.length),this)),t},t.reverse=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=i.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.shift=function(){const t=this.length>0,e=n.apply(this,arguments),s=this.$fastController;return void 0!==s&&t&&s.addSplice(Mt(0,[e],0)),e},t.sort=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=r.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.splice=function(){const t=o.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(zt(Mt(+arguments[0],t,arguments.length>2?arguments.length-2:0),this)),t},t.unshift=function(){const t=l.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(zt(Mt(0,[],arguments.length),this)),t}}class Qt{constructor(t,e){this.target=t,this.propertyName=e}bind(t){t[this.propertyName]=this.target}unbind(){}}function qt(t){return new L("fast-ref",Qt,t)}function Wt(t,e){const s="function"==typeof e?e:()=>e;return(e,i)=>t(e,i)?s(e,i):null}const Dt=Object.freeze({positioning:!1});function Gt(t,e,s,i){t.bind(e[s],i)}function Jt(t,e,s,i){const n=Object.create(i);n.index=s,n.length=e.length,t.bind(e[s],n)}class Kt{constructor(t,e,s,i,n,r){this.location=t,this.itemsBinding=e,this.templateBinding=i,this.options=r,this.source=null,this.views=[],this.items=null,this.itemsObserver=null,this.originalContext=void 0,this.childContext=void 0,this.bindView=Gt,this.itemsBindingObserver=B.binding(e,this,s),this.templateBindingObserver=B.binding(i,this,n),r.positioning&&(this.bindView=Jt)}bind(t,e){this.source=t,this.originalContext=e,this.childContext=Object.create(e),this.childContext.parent=t,this.childContext.parentContext=this.originalContext,this.items=this.itemsBindingObserver.observe(t,this.originalContext),this.template=this.templateBindingObserver.observe(t,this.originalContext),this.observeItems(!0),this.refreshAllViews()}unbind(){this.source=null,this.items=null,null!==this.itemsObserver&&this.itemsObserver.unsubscribe(this),this.unbindAllViews(),this.itemsBindingObserver.disconnect(),this.templateBindingObserver.disconnect()}handleChange(t,e){t===this.itemsBinding?(this.items=this.itemsBindingObserver.observe(this.source,this.originalContext),this.observeItems(),this.refreshAllViews()):t===this.templateBinding?(this.template=this.templateBindingObserver.observe(this.source,this.originalContext),this.refreshAllViews(!0)):this.updateViews(e)}observeItems(t=!1){if(!this.items)return void(this.items=e);const s=this.itemsObserver,i=this.itemsObserver=B.getNotifier(this.items),n=s!==i;n&&null!==s&&s.unsubscribe(this),(n||t)&&i.subscribe(this)}updateViews(t){const e=this.childContext,s=this.views,i=[],n=this.bindView;let r=0;for(let e=0,n=t.length;e<n;++e){const n=t[e],o=n.removed;i.push(...s.splice(n.index+r,o.length)),r-=n.addedCount}const o=this.items,l=this.template;for(let r=0,h=t.length;r<h;++r){const h=t[r];let a=h.index;const c=a+h.addedCount;for(;a<c;++a){const t=s[a],r=t?t.firstChild:this.location,h=i.length>0?i.shift():l.create();s.splice(a,0,h),n(h,o,a,e),h.insertBefore(r)}}for(let t=0,e=i.length;t<e;++t)i[t].dispose();if(this.options.positioning)for(let t=0,e=s.length;t<e;++t){const i=s[t].context;i.length=e,i.index=t}}refreshAllViews(t=!1){const e=this.items,s=this.childContext,i=this.template,n=this.location,r=this.bindView;let o=e.length,l=this.views,h=l.length;if((0===o||t)&&(rt.disposeContiguousBatch(l),h=0),0===h){this.views=l=new Array(o);for(let t=0;t<o;++t){const o=i.create();r(o,e,t,s),l[t]=o,o.insertBefore(n)}}else{let t=0;for(;t<o;++t)if(t<h){r(l[t],e,t,s)}else{const o=i.create();r(o,e,t,s),l.push(o),o.insertBefore(n)}const a=l.splice(t,h-t);for(t=0,o=a.length;t<o;++t)a[t].dispose()}}unbindAllViews(){const t=this.views;for(let e=0,s=t.length;e<s;++e)t[e].unbind()}}class Xt extends M{constructor(t,e,s){super(),this.itemsBinding=t,this.templateBinding=e,this.options=s,this.createPlaceholder=d.createBlockPlaceholder,Ut(),this.isItemsBindingVolatile=B.isVolatileBinding(t),this.isTemplateBindingVolatile=B.isVolatileBinding(e)}createBehavior(t){return new Kt(t,this.itemsBinding,this.isItemsBindingVolatile,this.templateBinding,this.isTemplateBindingVolatile,this.options)}}function Yt(t,e,s=Dt){return new Xt(t,"function"==typeof e?e:()=>e,s)}function Zt(t){return t?function(e,s,i){return 1===e.nodeType&&e.matches(t)}:function(t,e,s){return 1===t.nodeType}}class te{constructor(t,e){this.target=t,this.options=e,this.source=null}bind(t){const e=this.options.property;this.shouldUpdate=B.getAccessors(t).some(t=>t.name===e),this.source=t,this.updateTarget(this.computeNodes()),this.shouldUpdate&&this.observe()}unbind(){this.updateTarget(e),this.source=null,this.shouldUpdate&&this.disconnect()}handleEvent(){this.updateTarget(this.computeNodes())}computeNodes(){let t=this.getNodes();return void 0!==this.options.filter&&(t=t.filter(this.options.filter)),t}updateTarget(t){this.source[this.options.property]=t}}class ee extends te{constructor(t,e){super(t,e)}observe(){this.target.addEventListener("slotchange",this)}disconnect(){this.target.removeEventListener("slotchange",this)}getNodes(){return this.target.assignedNodes(this.options)}}function se(t){return"string"==typeof t&&(t={property:t}),new L("fast-slotted",ee,t)}class ie extends te{constructor(t,e){super(t,e),this.observer=null,e.childList=!0}observe(){null===this.observer&&(this.observer=new MutationObserver(this.handleEvent.bind(this))),this.observer.observe(this.target,this.options)}disconnect(){this.observer.disconnect()}getNodes(){return"subtree"in this.options?Array.from(this.target.querySelectorAll(this.options.selector)):Array.from(this.target.childNodes)}}function ne(t){return"string"==typeof t&&(t={property:t}),new L("fast-children",ie,t)}export{t as $global,L as AttachedBehaviorHTMLDirective,vt as AttributeDefinition,J as BindingBehavior,Vt as CSSDirective,ie as ChildrenBehavior,Ot as Controller,d as DOM,at as ElementStyles,$ as ExecutionContext,At as FASTElement,wt as FASTElementDefinition,G as HTMLBindingDirective,M as HTMLDirective,rt as HTMLView,B as Observable,v as PropertyChangeNotifier,Qt as RefBehavior,Kt as RepeatBehavior,Xt as RepeatDirective,ee as SlottedBehavior,b as SubscriberSet,E as TargetedHTMLDirective,ot as ViewTemplate,mt as attr,gt as booleanConverter,ne as children,it as compileTemplate,$t as css,It as cssPartial,kt as customElement,_ as defaultExecutionContext,Zt as elements,e as emptyArray,Ut as enableArrayObservation,ht as html,bt as nullableNumberConverter,A as observable,qt as ref,Yt as repeat,F as setCurrentEvent,se as slotted,k as volatile,Wt as when};
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)}}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 P extends M{constructor(){super(...arguments),this.createPlaceholder=d.createInterpolationPlaceholder}}class E 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 L(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 R(t,e){this.source=t,this.context=e,this.target.addEventListener(this.targetName,this)}function j(){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 P{constructor(t){super(),this.binding=t,this.bind=L,this.unbind=j,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=R,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 P){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 Pt(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 Et=Array.prototype.push;function Lt(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);Et.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);Et.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];Lt(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(Pt(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 jt=!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,Reflect.defineProperty(t,"$fastController",{value:this,enumerable:!1})}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?Rt(this.source,t):Pt(this.source,0,this.source.length,e,0,e.length);this.notify(s)}}function Ut(){if(jt)return;jt=!0,B.setArrayObserverFactory(t=>new Ht(t));const t=Array.prototype;if(t.$fastPatch)return;Reflect.defineProperty(t,"$fastPatch",{value:1,enumerable:!1});const 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 E("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 E("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 E("fast-children",ie,t)}export{t as $global,E 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,P 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};
@@ -2,10 +2,11 @@
2
2
 
3
3
  There are many great open source projects that have inspired us and enabled us to build FAST. Below are a few that stand out.
4
4
 
5
+ * [.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.
6
+ * [asap](https://github.com/kriskowal/asap) - An awesome, time-tested async task queue implementation that heavily inspired our DOM update system.
5
7
  * [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.
6
8
  * [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.
7
9
  * [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.
8
10
  * [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.
9
11
  * [Polymer](https://www.polymer-project.org/) - One of the first libraries (if not the first) to embrace Web Components.
10
12
  * [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.
11
- * [asap](https://github.com/kriskowal/asap) - An awesome, time-tested async task queue implementation that heavily inspired our DOM update system.
@@ -461,7 +461,8 @@ export class RepeatDirective<TSource = any> extends HTMLDirective {
461
461
 
462
462
  // @public
463
463
  export interface RepeatOptions {
464
- positioning: boolean;
464
+ positioning?: boolean;
465
+ recycle?: boolean;
465
466
  }
466
467
 
467
468
  // Warning: (ae-internal-missing-underscore) The name "setCurrentEvent" should be prefixed with an underscore because the declaration is marked as @internal
@@ -223,3 +223,7 @@ In the future we're planning new optimizations that will enable us to safely det
223
223
  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.
224
224
 
225
225
  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.
226
+
227
+ :::tip
228
+ Check out [our Cheat Sheet](https://www.fast.design/docs/resources/cheat-sheet#bindings) for a quick guide on bindings.
229
+ :::
@@ -47,8 +47,9 @@ import { FASTElement, customElement, attr } from '@microsoft/fast-element';
47
47
  export class NameTag extends FASTElement {
48
48
  @attr greeting: string = 'Hello';
49
49
 
50
+ // optional method
50
51
  greetingChanged() {
51
- this.shadowRoot!.innerHTML = this.greeting;
52
+ ...
52
53
  }
53
54
  }
54
55
  ```
@@ -59,7 +60,7 @@ To add attributes to your HTML element, create properties decorated by the `@att
59
60
  All properties decorated with `@attr` are also *observable*. See [observables and state](./observables-and-state) for information about how observables enable efficient rendering.
60
61
  :::
61
62
 
62
- 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.
63
+ By default, anything extending from `FASTElement` will automatically have a `ShadowRoot` attached in order to enable encapsulated rendering.
63
64
 
64
65
  To see it in action, you can use the same HTML as above, or change the default `greeting` with the following:
65
66
 
@@ -9,4 +9,6 @@ We've seen how to use `FASTElement` to declaratively build Web Components. In ad
9
9
 
10
10
  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).
11
11
 
12
+ For a quick reference on what you've learned, check out [our Cheat Sheet](https://www.fast.design/docs/resources/cheat-sheet).
13
+
12
14
  Happy componenting!
@@ -140,6 +140,19 @@ Some context properties are opt-in because they are more costly to update. So, f
140
140
  </ul>
141
141
  ```
142
142
 
143
+ 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`
144
+ 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.
145
+
146
+ **Example: List Rendering without view recycling**
147
+
148
+ ```html
149
+ <ul>
150
+ ${repeat(x => x.friends, html<string>`
151
+ <li>${(x, c) => c.index} ${x => x}</li>
152
+ `, { recycle: false })}
153
+ </ul>
154
+ ```
155
+
143
156
  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.
144
157
 
145
158
  ### Composing templates
@@ -513,15 +526,18 @@ const template = html<MyElement>`
513
526
  export class MyElement extends FASTElement {
514
527
  @observable slottedNodes: Node[];
515
528
 
516
- connectedCallback() {
517
- super.connectedCallback();
518
- console.log(this.slottedNodes);
529
+ slottedNodesChanged() {
530
+ // respond to changes in slotted node
519
531
  }
520
532
  }
521
533
  ```
522
534
 
523
535
  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`.
524
536
 
537
+ :::tip
538
+ It's best to leverage a change handler for slotted nodes rather than assuming that the nodes will be present in the `connectedCallback`.
539
+ :::
540
+
525
541
  ## Host directives
526
542
 
527
543
  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 CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@microsoft/fast-element",
3
3
  "description": "A library for constructing Web Components",
4
4
  "sideEffects": false,
5
- "version": "1.6.2",
5
+ "version": "1.7.2",
6
6
  "author": {
7
7
  "name": "Microsoft",
8
8
  "url": "https://discord.gg/FcSNfg4"
@@ -70,7 +70,7 @@
70
70
  "mocha": "^7.1.2",
71
71
  "prettier": "2.0.2",
72
72
  "rollup": "^2.7.6",
73
- "rollup-plugin-filesize": "^8.0.2",
73
+ "rollup-plugin-filesize": "^9.1.2",
74
74
  "rollup-plugin-terser": "^5.3.0",
75
75
  "rollup-plugin-transform-tagged-template": "^0.0.3",
76
76
  "rollup-plugin-typescript2": "^0.27.0",