https://dailycaller.com/dist/main.js?version=1789745286093.6274

1(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
2"use strict";
3
4Object.defineProperty(exports, "__esModule", {
5  value: true
6});
7exports.accordionItemStyles = void 0;
8
9var _fastElement = require("@microsoft/fast-element");
10
11var _fastFoundation = require("@microsoft/fast-foundation");
12
13var _fastWebUtilities = require("@microsoft/fast-web-utilities");
14
15var _designTokens = require("../../design-tokens");
16
17var _focus = require("../../styles/focus");
18
19var _typeRamp = require("../../styles/patterns/type-ramp");
20
21var _size = require("../../styles/size");
22
23const neutralFillStealthRestOnNeutralFillLayerRest = _fastFoundation.DesignToken.create('neutral-fill-stealth-rest-on-neutral-fill-layer-rest').withDefault(target => {
24  const baseRecipe = _designTokens.neutralFillLayerRecipe.getValueFor(target);
25
26  const buttonRecipe = _designTokens.neutralFillStealthRecipe.getValueFor(target);
27
28  return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).rest;
29});
30
31const neutralFillStealthHoverOnNeutralFillLayerRest = _fastFoundation.DesignToken.create('neutral-fill-stealth-hover-on-neutral-fill-layer-rest').withDefault(target => {
32  const baseRecipe = _designTokens.neutralFillLayerRecipe.getValueFor(target);
33
34  const buttonRecipe = _designTokens.neutralFillStealthRecipe.getValueFor(target);
35
36  return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover;
37});
38
39const neutralFillStealthActiveOnNeutralFillLayerRest = _fastFoundation.DesignToken.create('neutral-fill-stealth-active-on-neutral-fill-layer-rest').withDefault(target => {
40  const baseRecipe = _designTokens.neutralFillLayerRecipe.getValueFor(target);
41
42  const buttonRecipe = _designTokens.neutralFillStealthRecipe.getValueFor(target);
43
44  return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).active;
45});
46
47const accordionItemStyles = (context, definition) => (0, _fastElement.css)`
48    ${(0, _fastFoundation.display)('flex')} :host {
49      box-sizing: border-box;
50      ${_typeRamp.typeRampBase};
51      flex-direction: column;
52      background: ${_designTokens.neutralFillLayerRest};
53      color: ${_designTokens.neutralForegroundRest};
54      border: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeLayerRest};
55      border-radius: calc(${_designTokens.layerCornerRadius} * 1px);
56    }
57
58    .region {
59      display: none;
60      padding: calc(${_designTokens.designUnit} * 2 * 1px);
61      background: ${_designTokens.neutralFillLayerAltRest};
62    }
63
64    .heading {
65      display: grid;
66      position: relative;
67      grid-template-columns: auto 1fr auto auto;
68      align-items: center;
69    }
70
71    .button {
72      appearance: none;
73      border: none;
74      background: none;
75      grid-column: 2;
76      grid-row: 1;
77      outline: none;
78      margin: calc(${_designTokens.designUnit} * 3 * 1px) 0;
79      padding: 0 calc(${_designTokens.designUnit} * 2 * 1px);
80      text-align: left;
81      color: inherit;
82      cursor: pointer;
83      font: inherit;
84    }
85
86    .button::before {
87      content: '';
88      position: absolute;
89      top: calc(${_designTokens.strokeWidth} * -1px);
90      left: calc(${_designTokens.strokeWidth} * -1px);
91      right: calc(${_designTokens.strokeWidth} * -1px);
92      bottom: calc(${_designTokens.strokeWidth} * -1px);
93      cursor: pointer;
94    }
95
96    .button:${_fastFoundation.focusVisible}::before {
97      ${_focus.focusTreatmentBase}
98      border-radius: calc(${_designTokens.layerCornerRadius} * 1px);
99    }
100
101    :host(.expanded) .button:${_fastFoundation.focusVisible}::before {
102      border-bottom-left-radius: 0;
103      border-bottom-right-radius: 0;
104    }
105
106    :host(.expanded) .region {
107      display: block;
108      border-top: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeLayerRest};
109      border-bottom-left-radius: calc((${_designTokens.layerCornerRadius} - ${_designTokens.strokeWidth}) * 1px);
110      border-bottom-right-radius: calc((${_designTokens.layerCornerRadius} - ${_designTokens.strokeWidth}) * 1px);
111    }
112
113    .icon {
114      display: flex;
115      align-items: center;
116      justify-content: center;
117      grid-column: 4;
118      pointer-events: none;
119      background: ${neutralFillStealthRestOnNeutralFillLayerRest};
120      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
121      fill: currentcolor;
122      width: calc(${_size.heightNumber} * 1px);
123      height: calc(${_size.heightNumber} * 1px);
124      margin: calc(${_designTokens.designUnit} * 2 * 1px);
125    }
126
127    .heading:hover .icon {
128      background: ${neutralFillStealthHoverOnNeutralFillLayerRest};
129    }
130
131    .heading:active .icon {
132      background: ${neutralFillStealthActiveOnNeutralFillLayerRest};
133    }
134
135    slot[name='collapsed-icon'] {
136      display: flex;
137    }
138
139    :host(.expanded) slot[name='collapsed-icon'] {
140      display: none;
141    }
142
143    slot[name='expanded-icon'] {
144      display: none;
145    }
146
147    :host(.expanded) slot[name='expanded-icon'] {
148      display: flex;
149    }
150
151    .start {
152      display: flex;
153      align-items: center;
154      padding-inline-start: calc(${_designTokens.designUnit} * 2 * 1px);
155      justify-content: center;
156      grid-column: 1;
157    }
158
159    .end {
160      display: flex;
161      align-items: center;
162      justify-content: center;
163      grid-column: 3;
164    }
165
166    .icon,
167    .start,
168    .end {
169      position: relative;
170    }
171  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
172        .button:${_fastFoundation.focusVisible}::before {
173          outline-color: ${_fastWebUtilities.SystemColors.Highlight};
174        }
175        .icon {
176          fill: ${_fastWebUtilities.SystemColors.ButtonText};
177        }
178      `));
179
180exports.accordionItemStyles = accordionItemStyles;
181
182},{"../../design-tokens":53,"../../styles/focus":96,"../../styles/patterns/type-ramp":101,"../../styles/size":102,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],2:[function(require,module,exports){
183"use strict";
184
185Object.defineProperty(exports, "__esModule", {
186  value: true
187});
188Object.defineProperty(exports, "AccordionItem", {
189  enumerable: true,
190  get: function () {
191    return _fastFoundation.AccordionItem;
192  }
193});
194exports.fluentAccordionItem = exports.accordionItemStyles = void 0;
195
196var _fastFoundation = require("@microsoft/fast-foundation");
197
198var _accordionItem = require("./accordion-item.styles");
199
200/**
201 * The Fluent Accordion Item Element. Implements {@link @microsoft/fast-foundation#AccordionItem},
202 * {@link @microsoft/fast-foundation#accordionItemTemplate}
203 *
204 *
205 * @public
206 * @remarks
207 * HTML Element: \<fluent-accordion-item\>
208 */
209const fluentAccordionItem = _fastFoundation.AccordionItem.compose({
210  baseName: 'accordion-item',
211  template: _fastFoundation.accordionItemTemplate,
212  styles: _accordionItem.accordionItemStyles,
213  collapsedIcon: `
214    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
215      <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"/>
216    </svg>
217  `,
218  expandedIcon: `
219    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
220      <path d="M2.15 7.35c.2.2.5.2.7 0L6 4.21l3.15 3.14a.5.5 0 10.7-.7l-3.5-3.5a.5.5 0 00-.7 0l-3.5 3.5a.5.5 0 000 .7z"/>
221    </svg>
222  `
223});
224/**
225 * Styles for AccordionItem
226 * @public
227 */
228
229
230exports.fluentAccordionItem = fluentAccordionItem;
231const accordionItemStyles = _accordionItem.accordionItemStyles;
232exports.accordionItemStyles = accordionItemStyles;
233
234},{"./accordion-item.styles":1,"@microsoft/fast-foundation":256}],3:[function(require,module,exports){
235"use strict";
236
237Object.defineProperty(exports, "__esModule", {
238  value: true
239});
240exports.accordionStyles = void 0;
241
242var _fastElement = require("@microsoft/fast-element");
243
244var _fastFoundation = require("@microsoft/fast-foundation");
245
246var _designTokens = require("../design-tokens");
247
248var _typeRamp = require("../styles/patterns/type-ramp");
249
250const accordionStyles = (context, definition) => (0, _fastElement.css)`
251    ${(0, _fastFoundation.display)('flex')} :host {
252      box-sizing: border-box;
253      flex-direction: column;
254      ${_typeRamp.typeRampBase}
255      color: ${_designTokens.neutralForegroundRest};
256      gap: calc(${_designTokens.designUnit} * 1px);
257    }
258  `;
259
260exports.accordionStyles = accordionStyles;
261
262},{"../design-tokens":53,"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],4:[function(require,module,exports){
263"use strict";
264
265Object.defineProperty(exports, "__esModule", {
266  value: true
267});
268var _exportNames = {
269  fluentAccordion: true,
270  accordionStyles: true,
271  Accordion: true
272};
273Object.defineProperty(exports, "Accordion", {
274  enumerable: true,
275  get: function () {
276    return _fastFoundation.Accordion;
277  }
278});
279exports.fluentAccordion = exports.accordionStyles = void 0;
280
281var _fastFoundation = require("@microsoft/fast-foundation");
282
283var _accordion = require("./accordion.styles");
284
285var _index = require("./accordion-item/index");
286

287Object.keys(_index).forEach(function (key) {
288  if (key === "default" || key === "__esModule") return;
289  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
290  if (key in exports && exports[key] === _index[key]) return;
291  Object.defineProperty(exports, key, {
292    enumerable: true,
293    get: function () {
294      return _index[key];
295    }
296  });
297});
298
299/**
300 * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion},
301 * {@link @microsoft/fast-foundation#accordionTemplate}
302 *
303 *
304 * @public
305 * @remarks
306 * HTML Element: \<fluent-accordion\>
307 */
308const fluentAccordion = _fastFoundation.Accordion.compose({
309  baseName: 'accordion',
310  template: _fastFoundation.accordionTemplate,
311  styles: _accordion.accordionStyles
312});
313/**
314 * Styles for Accordion
315 * @public
316 */
317
318
319exports.fluentAccordion = fluentAccordion;
320const accordionStyles = _accordion.accordionStyles;
321/**
322 * Base class for Accordion
323 * @public
324 */
325
326exports.accordionStyles = accordionStyles;
327
328},{"./accordion-item/index":2,"./accordion.styles":3,"@microsoft/fast-foundation":256}],5:[function(require,module,exports){
329"use strict";
330
331Object.defineProperty(exports, "__esModule", {
332  value: true
333});
334exports.anchorStyles = void 0;
335
336var _styles = require("../styles/");
337
338var _behaviors = require("../utilities/behaviors");
339
340const interactivitySelector = '[href]';
341
342const anchorStyles = (context, definition) => (0, _styles.baseButtonStyles)(context, definition, interactivitySelector).withBehaviors((0, _behaviors.appearanceBehavior)('neutral', (0, _styles.NeutralButtonStyles)(context, definition, interactivitySelector)), (0, _behaviors.appearanceBehavior)('accent', (0, _styles.AccentButtonStyles)(context, definition, interactivitySelector)), (0, _behaviors.appearanceBehavior)('hypertext', (0, _styles.HypertextStyles)(context, definition, interactivitySelector)), (0, _behaviors.appearanceBehavior)('lightweight', (0, _styles.LightweightButtonStyles)(context, definition, interactivitySelector)), (0, _behaviors.appearanceBehavior)('outline', (0, _styles.OutlineButtonStyles)(context, definition, interactivitySelector)), (0, _behaviors.appearanceBehavior)('stealth', (0, _styles.StealthButtonStyles)(context, definition, interactivitySelector)));
343
344exports.anchorStyles = anchorStyles;
345
346},{"../styles/":97,"../utilities/behaviors":123}],6:[function(require,module,exports){
347"use strict";
348
349Object.defineProperty(exports, "__esModule", {
350  value: true
351});
352exports.fluentAnchor = exports.anchorStyles = exports.Anchor = void 0;
353
354var _tslib = require("tslib");
355
356var _fastElement = require("@microsoft/fast-element");
357
358var _fastFoundation = require("@microsoft/fast-foundation");
359
360var _anchor = require("./anchor.styles");
361
362/**
363 * The Fluent version of Anchor
364 * @internal
365 */
366class Anchor extends _fastFoundation.Anchor {
367  appearanceChanged(oldValue, newValue) {
368    if (oldValue !== newValue) {
369      this.classList.add(newValue);
370      this.classList.remove(oldValue);
371    }
372  }
373  /**
374   * @internal
375   */
376
377
378  connectedCallback() {
379    super.connectedCallback();
380
381    if (!this.appearance) {
382      this.appearance = 'neutral';
383    }
384  }
385  /**
386   * Applies 'icon-only' class when there is only an SVG in the default slot
387   *
388   * @internal
389   */
390
391
392  defaultSlottedContentChanged() {
393    var _a, _b;
394
395    const slottedElements = this.defaultSlottedContent.filter(x => x.nodeType === Node.ELEMENT_NODE);
396
397    if (slottedElements.length === 1 && slottedElements[0] instanceof SVGElement) {

398      (_a = this.control) === null || _a === void 0 ? void 0 : _a.classList.add('icon-only');
399    } else {
400      (_b = this.control) === null || _b === void 0 ? void 0 : _b.classList.remove('icon-only');
401    }
402  }
403
404}
405
406exports.Anchor = Anchor;
407(0, _tslib.__decorate)([_fastElement.attr], Anchor.prototype, "appearance", void 0);
408/**
409 * Styles for Anchor
410 * @public
411 */
412
413const anchorStyles = _anchor.anchorStyles;
414/**
415 * The Fluent Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor},
416 * {@link @microsoft/fast-foundation#anchorTemplate}
417 *
418 *
419 * @public
420 * @remarks
421 * HTML Element: \<fluent-anchor\>
422 *
423 * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
424 */
425
426exports.anchorStyles = anchorStyles;
427const fluentAnchor = Anchor.compose({
428  baseName: 'anchor',
429  baseClass: _fastFoundation.Anchor,
430  template: _fastFoundation.anchorTemplate,
431  styles: _anchor.anchorStyles,
432  shadowOptions: {
433    delegatesFocus: true
434  }
435});
436exports.fluentAnchor = fluentAnchor;
437
438},{"./anchor.styles":5,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"tslib":466}],7:[function(require,module,exports){
439"use strict";
440
441Object.defineProperty(exports, "__esModule", {
442  value: true
443});
444exports.anchoredRegionStyles = void 0;
445
446var _fastElement = require("@microsoft/fast-element");
447
448const anchoredRegionStyles = (context, definition) => (0, _fastElement.css)`
449  :host {
450    contain: layout;
451    display: block;
452  }
453`;
454
455exports.anchoredRegionStyles = anchoredRegionStyles;
456
457},{"@microsoft/fast-element":151}],8:[function(require,module,exports){
458"use strict";
459
460Object.defineProperty(exports, "__esModule", {
461  value: true
462});
463Object.defineProperty(exports, "AnchoredRegion", {
464  enumerable: true,
465  get: function () {
466    return _fastFoundation.AnchoredRegion;
467  }
468});
469exports.fluentAnchoredRegion = exports.anchoredRegionStyles = void 0;
470
471var _fastFoundation = require("@microsoft/fast-foundation");
472
473var _anchoredRegion = require("./anchored-region.styles");
474
475/**
476 * The Fluent AnchoredRegion Element. Implements {@link @microsoft/fast-foundation#AnchoredRegion},
477 * {@link @microsoft/fast-foundation#anchoredRegionTemplate}
478 *
479 *
480 * @beta
481 * @remarks
482 * HTML Element: \<fluent-anchored-region\>
483 */
484const fluentAnchoredRegion = _fastFoundation.AnchoredRegion.compose({
485  baseName: 'anchored-region',
486  template: _fastFoundation.anchoredRegionTemplate,
487  styles: _anchoredRegion.anchoredRegionStyles
488});
489/**
490 * Styles for AnchoredRegion
491 * @public
492 */
493
494
495exports.fluentAnchoredRegion = fluentAnchoredRegion;
496const anchoredRegionStyles = _anchoredRegion.anchoredRegionStyles;
497/**
498 * Base class for AnchoredRegion
499 * @public
500 */
501
502exports.anchoredRegionStyles = anchoredRegionStyles;
503
504},{"./anchored-region.styles":7,"@microsoft/fast-foundation":256}],9:[function(require,module,exports){
505"use strict";
506
507Object.defineProperty(exports, "__esModule", {
508  value: true
509});
510exports.badgeStyles = void 0;
511
512var _fastElement = require("@microsoft/fast-element");
513
514var _fastFoundation = require("@microsoft/fast-foundation");
515
516var _designTokens = require("../design-tokens");
517
518var _typeRamp = require("../styles/patterns/type-ramp");
519
520const badgeStyles = (context, definition) => (0, _fastElement.css)`
521    ${(0, _fastFoundation.display)('inline-block')} :host {
522      box-sizing: border-box;
523      ${_typeRamp.typeRampMinus1};
524    }
525
526    .control {
527      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
528      padding: calc(((${_designTokens.designUnit} * 0.5) - ${_designTokens.strokeWidth}) * 1px) calc((${_designTokens.designUnit} - ${_designTokens.strokeWidth}) * 1px);
529      border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
530    }
531
532    :host(.lightweight) .control {
533      background: transparent;
534      color: ${_designTokens.neutralForegroundRest};
535      font-weight: 600;
536    }
537
538    :host(.accent) .control {
539      background: ${_designTokens.accentFillRest};
540      color: ${_designTokens.foregroundOnAccentRest};
541    }
542
543    :host(.neutral) .control {
544      background: ${_designTokens.neutralFillSecondaryRest};
545      color: ${_designTokens.neutralForegroundRest};
546    }
547
548    :host([circular]) .control {
549      border-radius: 100px;
550      min-width: calc(${_designTokens.typeRampMinus1LineHeight} - calc(${_designTokens.designUnit} * 1px));
551      display: flex;
552      align-items: center;
553      justify-content: center;
554    }
555  `;
556
557exports.badgeStyles = badgeStyles;
558
559},{"../design-tokens":53,"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],10:[function(require,module,exports){
560"use strict";
561
562Object.defineProperty(exports, "__esModule", {
563  value: true
564});

565exports.fluentBadge = exports.badgeStyles = exports.Badge = void 0;
566
567var _tslib = require("tslib");
568
569var _fastElement = require("@microsoft/fast-element");
570
571var _fastFoundation = require("@microsoft/fast-foundation");
572
573var _badge = require("./badge.styles");
574
575/**
576 * The Fluent Badge class
577 * @internal
578 */
579class Badge extends _fastFoundation.Badge {
580  constructor() {
581    super(...arguments);
582    this.appearance = 'lightweight';
583  }
584
585  appearanceChanged(oldValue, newValue) {
586    if (oldValue !== newValue) {
587      _fastElement.DOM.queueUpdate(() => {
588        this.classList.add(newValue);
589        this.classList.remove(oldValue);
590      });
591    }
592  }
593
594}
595
596exports.Badge = Badge;
597(0, _tslib.__decorate)([(0, _fastElement.attr)({
598  mode: 'fromView'
599})], Badge.prototype, "appearance", void 0);
600/**
601 * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge},
602 * {@link @microsoft/fast-foundation#badgeTemplate}
603 *
604 *
605 * @public
606 * @remarks
607 * HTML Element: \<fluent-badge\>
608 */
609
610const fluentBadge = Badge.compose({
611  baseName: 'badge',
612  baseClass: _fastFoundation.Badge,
613  template: _fastFoundation.badgeTemplate,
614  styles: _badge.badgeStyles
615});
616/**
617 * Styles for Badge
618 * @public
619 */
620
621exports.fluentBadge = fluentBadge;
622const badgeStyles = _badge.badgeStyles;
623exports.badgeStyles = badgeStyles;
624
625},{"./badge.styles":9,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"tslib":466}],11:[function(require,module,exports){
626"use strict";
627
628Object.defineProperty(exports, "__esModule", {
629  value: true
630});
631exports.breadcrumbItemStyles = void 0;
632
633var _fastElement = require("@microsoft/fast-element");
634
635var _fastFoundation = require("@microsoft/fast-foundation");
636
637var _fastWebUtilities = require("@microsoft/fast-web-utilities");
638
639var _designTokens = require("../design-tokens");
640
641var _typeRamp = require("../styles/patterns/type-ramp");
642
643var _index = require("../styles/index");
644
645var _focus = require("../styles/focus");
646
647const breadcrumbItemStyles = (context, definition) => (0, _fastElement.css)`
648    ${(0, _fastFoundation.display)('inline-flex')} :host {
649      background: transparent;
650      color: ${_designTokens.neutralForegroundRest};
651      fill: currentcolor;
652      box-sizing: border-box;
653      ${_typeRamp.typeRampBase};
654      min-width: calc(${_index.heightNumber} * 1px);
655      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
656    }
657
658    .listitem {
659      display: flex;
660      align-items: center;
661      border-radius: inherit;
662    }
663
664    .control {
665      position: relative;
666      align-items: center;
667      box-sizing: border-box;
668      color: inherit;
669      fill: inherit;
670      cursor: pointer;
671      display: flex;
672      outline: none;
673      text-decoration: none;
674      white-space: nowrap;
675      border-radius: inherit;
676    }
677
678    .control:hover {
679      color: ${_designTokens.neutralForegroundHover};
680    }
681
682    .control:active {
683      color: ${_designTokens.neutralForegroundActive};
684    }
685
686    .control:${_fastFoundation.focusVisible} {
687      ${_focus.focusTreatmentTight}
688    }
689
690    :host(:not([href])),
691    :host([aria-current]) .control {
692      color: ${_designTokens.neutralForegroundRest};
693      fill: currentcolor;
694      cursor: default;
695    }
696
697    .start {
698      display: flex;
699      margin-inline-end: 6px;
700    }
701
702    .end {
703      display: flex;
704      margin-inline-start: 6px;
705    }
706
707    .separator {
708      display: flex;
709    }
710  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
711        :host(:not([href])),
712        .start,
713        .end,
714        .separator {
715          background: ${_fastWebUtilities.SystemColors.ButtonFace};
716          color: ${_fastWebUtilities.SystemColors.ButtonText};
717          fill: currentcolor;
718        }
719        .separator {
720          fill: ${_fastWebUtilities.SystemColors.ButtonText};
721        }
722        :host([href]) {
723          forced-color-adjust: none;
724          background: ${_fastWebUtilities.SystemColors.ButtonFace};
725          color: ${_fastWebUtilities.SystemColors.LinkText};
726        }
727        :host([href]) .control:hover {
728          background: ${_fastWebUtilities.SystemColors.LinkText};
729          color: ${_fastWebUtilities.SystemColors.HighlightText};
730          fill: currentcolor;
731        }
732        .control:${_fastFoundation.focusVisible} {
733          outline-color: ${_fastWebUtilities.SystemColors.LinkText};
734        }
735      `));
736
737exports.breadcrumbItemStyles = breadcrumbItemStyles;
738
739},{"../design-tokens":53,"../styles/focus":96,"../styles/index":97,"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],12:[function(require,module,exports){
740"use strict";
741
742Object.defineProperty(exports, "__esModule", {
743  value: true
744});
745Object.defineProperty(exports, "BreadcrumbItem", {
746  enumerable: true,
747  get: function () {
748    return _fastFoundation.BreadcrumbItem;
749  }
750});
751exports.fluentBreadcrumbItem = exports.breadcrumbItemStyles = void 0;
752
753var _fastFoundation = require("@microsoft/fast-foundation");
754
755var _breadcrumbItem = require("./breadcrumb-item.styles");
756
757/**
758 * The Fluent BreadcrumbItem Element. Implements {@link @microsoft/fast-foundation#BreadcrumbItem},
759 * {@link @microsoft/fast-foundation#breadcrumbItemTemplate}
760 *
761 *
762 * @public
763 * @remarks
764 * HTML Element: \<fluent-breadcrumb-item\>
765 */
766const fluentBreadcrumbItem = _fastFoundation.BreadcrumbItem.compose({
767  baseName: 'breadcrumb-item',
768  template: _fastFoundation.breadcrumbItemTemplate,
769  styles: _breadcrumbItem.breadcrumbItemStyles,
770  shadowOptions: {
771    delegatesFocus: true
772  },
773  separator: `
774    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
775      <path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"/>
776    </svg>
777  `
778});
779/**
780 * Styles for BreadcrumbItem
781 * @public
782 */
783
784
785exports.fluentBreadcrumbItem = fluentBreadcrumbItem;
786const breadcrumbItemStyles = _breadcrumbItem.breadcrumbItemStyles;
787/**
788 * Base class for BreadcrumbItem
789 * @public
790 */
791
792exports.breadcrumbItemStyles = breadcrumbItemStyles;
793
794},{"./breadcrumb-item.styles":11,"@microsoft/fast-foundation":256}],13:[function(require,module,exports){
795"use strict";
796
797Object.defineProperty(exports, "__esModule", {
798  value: true
799});
800exports.breadcrumbStyles = void 0;
801
802var _fastElement = require("@microsoft/fast-element");
803
804var _fastFoundation = require("@microsoft/fast-foundation");
805
806var _typeRamp = require("../styles/patterns/type-ramp");
807
808const breadcrumbStyles = (context, definition) => (0, _fastElement.css)`
809  ${(0, _fastFoundation.display)('inline-block')} :host {
810    box-sizing: border-box;
811    ${_typeRamp.typeRampBase};
812  }
813
814  .list {
815    display: flex;
816  }
817`;
818
819exports.breadcrumbStyles = breadcrumbStyles;
820
821},{"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],14:[function(require,module,exports){
822"use strict";
823
824Object.defineProperty(exports, "__esModule", {
825  value: true
826});
827Object.defineProperty(exports, "Breadcrumb", {
828  enumerable: true,
829  get: function () {
830    return _fastFoundation.Breadcrumb;
831  }
832});
833exports.fluentBreadcrumb = exports.breadcrumbStyles = void 0;
834
835var _fastFoundation = require("@microsoft/fast-foundation");
836
837var _breadcrumb = require("./breadcrumb.styles");
838
839/**
840 * The Fluent Breadcrumb Element. Implements {@link @microsoft/fast-foundation#Breadcrumb},
841 * {@link @microsoft/fast-foundation#breadcrumbTemplate}
842 *
843 *
844 * @public
845 * @remarks
846 * HTML Element: \<fluent-breadcrumb\>
847 */
848const fluentBreadcrumb = _fastFoundation.Breadcrumb.compose({
849  baseName: 'breadcrumb',
850  template: _fastFoundation.breadcrumbTemplate,
851  styles: _breadcrumb.breadcrumbStyles
852}

852);
853/**
854 * Styles for Breadcrumb
855 * @public
856 */
857
858
859exports.fluentBreadcrumb = fluentBreadcrumb;
860const breadcrumbStyles = _breadcrumb.breadcrumbStyles;
861/**
862 * Base class for Breadcrumb
863 * @public
864 */
865
866exports.breadcrumbStyles = breadcrumbStyles;
867
868},{"./breadcrumb.styles":13,"@microsoft/fast-foundation":256}],15:[function(require,module,exports){
869"use strict";
870
871Object.defineProperty(exports, "__esModule", {
872  value: true
873});
874exports.buttonStyles = void 0;
875
876var _fastElement = require("@microsoft/fast-element");
877
878var _fastFoundation = require("@microsoft/fast-foundation");
879
880var _styles = require("../styles/");
881
882var _behaviors = require("../utilities/behaviors");
883
884var _designTokens = require("../design-tokens");
885
886const interactivitySelector = ':not([disabled])';
887const nonInteractivitySelector = '[disabled]';
888
889const buttonStyles = (context, definition) => (0, _fastElement.css)`
890    :host(${interactivitySelector}) .control {
891      cursor: pointer;
892    }
893
894    :host(${nonInteractivitySelector}) .control {
895      cursor: ${_fastFoundation.disabledCursor};
896    }
897
898    @media (forced-colors: none) {
899      :host(${nonInteractivitySelector}) .control {
900        opacity: ${_designTokens.disabledOpacity};
901      }
902    }
903
904    ${(0, _styles.baseButtonStyles)(context, definition, interactivitySelector, nonInteractivitySelector)}
905  `.withBehaviors((0, _behaviors.appearanceBehavior)('neutral', (0, _styles.NeutralButtonStyles)(context, definition, interactivitySelector, nonInteractivitySelector)), (0, _behaviors.appearanceBehavior)('accent', (0, _styles.AccentButtonStyles)(context, definition, interactivitySelector, nonInteractivitySelector)), (0, _behaviors.appearanceBehavior)('lightweight', (0, _styles.LightweightButtonStyles)(context, definition, interactivitySelector, nonInteractivitySelector)), (0, _behaviors.appearanceBehavior)('outline', (0, _styles.OutlineButtonStyles)(context, definition, interactivitySelector, nonInteractivitySelector)), (0, _behaviors.appearanceBehavior)('stealth', (0, _styles.StealthButtonStyles)(context, definition, interactivitySelector, nonInteractivitySelector)));
906
907exports.buttonStyles = buttonStyles;
908
909},{"../design-tokens":53,"../styles/":97,"../utilities/behaviors":123,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],16:[function(require,module,exports){
910"use strict";
911
912Object.defineProperty(exports, "__esModule", {
913  value: true
914});
915exports.fluentButton = exports.buttonStyles = exports.Button = void 0;
916
917var _tslib = require("tslib");
918
919var _fastElement = require("@microsoft/fast-element");
920
921var _fastFoundation = require("@microsoft/fast-foundation");
922
923var _button = require("./button.styles");
924
925/**
926 * The Fluent button class
927 * @internal
928 */
929class Button extends _fastFoundation.Button {
930  appearanceChanged(oldValue, newValue) {
931    if (oldValue !== newValue) {
932      this.classList.add(newValue);
933      this.classList.remove(oldValue);
934    }
935  }
936  /**
937   * @internal
938   */
939
940
941  connectedCallback() {
942    super.connectedCallback();
943
944    if (!this.appearance) {
945      this.appearance = 'neutral';
946    }
947  }
948  /**
949   * Applies 'icon-only' class when there is only an SVG in the default slot
950   *
951   * @internal
952   */
953
954
955  defaultSlottedContentChanged() {
956    const slottedElements = this.defaultSlottedContent.filter(x => x.nodeType === Node.ELEMENT_NODE);
957
958    if (slottedElements.length === 1 && slottedElements[0] instanceof SVGElement) {
959      this.control.classList.add('icon-only');
960    } else {
961      this.control.classList.remove('icon-only');
962    }
963  }
964
965}
966
967exports.Button = Button;
968(0, _tslib.__decorate)([_fastElement.attr], Button.prototype, "appearance", void 0);
969/**
970 * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button},
971 * {@link @microsoft/fast-foundation#buttonTemplate}
972 *
973 *
974 * @public
975 * @remarks
976 * HTML Element: \<fluent-button\>
977 *
978 * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
979 */
980
981const fluentButton = Button.compose({
982  baseName: 'button',
983  baseClass: _fastFoundation.Button,
984  template: _fastFoundation.buttonTemplate,
985  styles: _button.buttonStyles,
986  shadowOptions: {
987    delegatesFocus: true
988  }
989});
990/**
991 * Styles for Button
992 * @public
993 */
994
995exports.fluentButton = fluentButton;
996const buttonStyles = _button.buttonStyles;
997exports.buttonStyles = buttonStyles;
998
999},{"./button.styles":15,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"tslib":466}],17:[function(require,module,exports){
1000"use strict";
1001
1002Object.defineProperty(exports, "__esModule", {
1003  value: true
1004});
1005exports.calendarStyles = void 0;
1006
1007var _fastElement = require("@microsoft/fast-element");
1008
1009var _fastFoundation = require("@microsoft/fast-foundation");
1010
1011var _fastWebUtilities = require("@microsoft/fast-web-utilities");
1012
1013var _designTokens = require("../design-tokens");
1014
1015var _styles = require("../styles");
1016
1017var _typeRamp = require("../styles/patterns/type-ramp");
1018
1019/**
1020 * LTR styles for calendar
1021 * @internal
1022 */
1023const ltrStyles = (0, _fastElement.css)`
1024.day.disabled::before {
1025  transform: translate(-50%, 0) rotate(45deg);
1026}
1027`;
1028/**
1029 * RTL styles for calendar
1030 * @internal
1031 */
1032
1033const rtlStyles = (0, _fastElement.css)`
1034.day.disabled::before {
1035  transform: translate(50%, 0) rotate(-45deg);
1036}
1037`;
1038/**
1039 * Styles for calendar
1040 * @public
1041 */
1042
1043const calendarStyles = (context, definition) => (0, _fastElement.css)`
1044${(0, _fastFoundation.display)("inline-block")} :host {
1045  --calendar-cell-size: calc((${_designTokens.baseHeightMultiplier} + 2 + ${_designTokens.density}) * ${_designTokens.designUnit} * 1px);
1046  --calendar-gap: 2px;
1047  ${_typeRamp.typeRampBase}
1048  color: ${_designTokens.neutralForegroundRest};
1049}
1050
1051.title {
1052  padding: calc(${_designTokens.designUnit} * 2px);
1053  font-weight: 600;
1054}
1055
1056.days {
1057  text-align: center;
1058}
1059
1060.week-days,
1061.week {
1062  display: grid;
1063  grid-template-columns: repeat(7, 1fr);
1064  grid-gap: var(--calendar-gap);
1065  border: 0;
1066  padding: 0;
1067}
1068
1069.day,
1070.week-day {
1071  border: 0;
1072  width: var(--calendar-cell-size);
1073  height: var(--calendar-cell-size);
1074  line-height: var(--calendar-cell-size);
1075  padding: 0;
1076  box-sizing: initial;
1077}
1078
1079.week-day {
1080  font-weight: 600;
1081}
1082
1083.day {
1084  border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
1085  border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
1086}
1087
1088.interact .day {
1089  cursor: pointer;
1090}
1091
1092.date {
1093  height: 100%;
1094}
1095
1096.inactive .date,
1097.inactive.disabled::before {
1098  color: ${_designTokens.neutralForegroundHint};
1099}
1100
1101.disabled::before {
1102  content: '';
1103  display: inline-block;
1104  width: calc(var(--calendar-cell-size) * .8);
1105  height: calc(${_designTokens.strokeWidth} * 1px);
1106  background: currentColor;
1107  position: absolute;
1108  margin-top: calc(var(--calendar-cell-size) / 2);
1109  transform-origin: center;
1110  z-index: 1;
1111}
1112
1113.selected {
1114  color: ${_designTokens.accentFillRest};
1115  border: 1px solid ${_designTokens.accentFillRest};
1116  background: ${_designTokens.fillColor};
1117}
1118
1119.selected + .selected {
1120  border-start-start-radius: 0;
1121  border-end-start-radius: 0;
1122  border-inline-start-width: 0;
1123  padding-inline-start: calc(var(--calendar-gap) + (${_designTokens.strokeWidth} + ${_designTokens.controlCornerRadius}) * 1px);
1124  margin-inline-start: calc((${_designTokens.controlCornerRadius} * -1px) - var(--calendar-gap));
1125}
1126
1127.today.disabled::before {
1128  color: ${_designTokens.foregroundOnAccentRest};
1129}
1130
1131.today .date {
1132  color: ${_designTokens.foregroundOnAccentRest};
1133  background: ${_designTokens.accentFillRest};
1134  border-radius: 50%;
1135  position: relative;
1136}
1137`.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
1138          .day.selected {
1139              color: ${_fastWebUtilities.SystemColors.Highlight};
1140          }
1141
1142          .today .date {
1143              background: ${_fastWebUtilities.SystemColors.Highlight};
1144              color: ${_fastWebUtilities.SystemColors.HighlightText};
1145          }
1146      `), new _styles.DirectionalStyleSheetBehavior(ltrStyles, rtlStyles));
1147
1148exports.calendarStyles = calendarStyles;
1149
1150},{"../design-tokens":53,"../styles":97,"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],18:[function(require,module,exports){
1151"use strict";
1152
1153Object.defineProperty(exports, "__esModule", {
1154  value: true
1155});
1156exports.Calendar = void 0;
1157Object.defineProperty(exports, "calendarStyles", {
1158  enumerable: true,
1159  get: function () {
1160    return _calendar.calendarStyles;
1161  }
1162});
1163exports.fluentCalendar = void 0;
1164
1165var _tslib = require("tslib");
1166
1167var _fastElement = require("@microsoft/fast-element");
1168
1169var _fastFoundation = require("@microsoft/fast-foundation");
1170
1171var _calendar = require("./calendar.styles");
1172
1173/**
1174 * Updated Calendar class that is readonly by default
1175 */
1176class Calendar extends _fastFoundation.Calendar {
1177  constructor() {
1178    super(...arguments);
1179    this.readonly = true;
1180  }
1181
1182}
1183
1184exports.Calendar = Calendar;
1185(0, _tslib.__decorate)([(0, _fastElement.attr)({
1186  converter: _fastElement.booleanConverter
1187})], Calendar.prototype, "readonly", void 0);
1188/**
1189 * The Fluent Calendar Element. Implements {@link @microsoft/fast-foundation#Calendar},
1190 * {@link @microsoft/fast-foundation#calendarTemplate}
1191 *
1192 * @public
1193 * @remarks
1194 * HTML Element \<fluent-calendar\>
1195 */
1196
1197const fluentCalendar = Calendar.compose({
1198  baseName: 'calendar',
1199  template: _fastFoundation.calendarTemplate,
1200  styles: _calendar.calendarStyles,
1201  title: _fastFoundation.CalendarTitleTemplate
1202});
1203exports.fluentCalendar = fluentCalendar;
1204
1205},{"./calendar.styles":17,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"tslib":466}],19:[function(require,module,exports){
1206"use strict";
1207
1208Object.defineProperty(exports, "__esModule", {
1209  value: true
1210});
1211exports.cardStyles = void 0;
1212
1213var _fastElement = require("@microsoft/fast-element");
1214
1215var _fastFoundation = require("@microsoft/fast-foundation");
1216
1217var _fastWebUtilities = require("@microsoft/fast-web-utilities");
1218
1219var _designTokens = require("../design-tokens");
1220
1221var _styles = require("../styles");
1222
1223const cardStyles = (context, definition) => (0, _fastElement.css)`
1224    ${(0, _fastFoundation.display)('block')} :host {
1225      display: block;
1226      contain: content;
1227      height: var(--card-height, 100%);
1228      width: var(--card-width, 100%);
1229      box-sizing: border-box;
1230      background: ${_designTokens.fillColor};
1231      color: ${_designTokens.neutralForegroundRest};
1232      border: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeLayerRest};
1233      border-radius: calc(${_designTokens.layerCornerRadius} * 1px);
1234      box-shadow: ${_styles.elevationShadowCardRest};
1235    }
1236
1237    :host {
1238      content-visibility: auto;
1239    }
1240  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
1241        :host {
1242          background: ${_fastWebUtilities.SystemColors.Canvas};
1243          color: ${_fastWebUtilities.SystemColors.CanvasText};
1244        }
1245      `));
1246
1247exports.cardStyles = cardStyles;
1248
1249},{"../design-tokens":53,"../styles":97,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],20:[function(require,module,exports){
1250"use strict";
1251
1252Object.defineProperty(exports, "__esModule", {
1253  value: true
1254});

1255exports.fluentCard = exports.cardStyles = exports.Card = void 0;
1256
1257var _tslib = require("tslib");
1258
1259var _fastFoundation = require("@microsoft/fast-foundation");
1260
1261var _fastElement = require("@microsoft/fast-element");
1262
1263var _fastColors = require("@microsoft/fast-colors");
1264
1265var _designTokens = require("../design-tokens");
1266
1267var _swatch = require("../color/swatch");
1268
1269var _palette = require("../color/palette");
1270
1271var _card = require("./card.styles");
1272
1273/**
1274 * @public
1275 */
1276class Card extends _fastFoundation.Card {
1277  cardFillColorChanged(prev, next) {
1278    if (next) {
1279      const parsedColor = (0, _fastColors.parseColorHexRGB)(next);
1280
1281      if (parsedColor !== null) {
1282        this.neutralPaletteSource = next;
1283
1284        _designTokens.fillColor.setValueFor(this, _swatch.SwatchRGB.create(parsedColor.r, parsedColor.g, parsedColor.b));
1285      }
1286    }
1287  }
1288
1289  neutralPaletteSourceChanged(prev, next) {
1290    if (next) {
1291      const color = (0, _fastColors.parseColorHexRGB)(next);
1292
1293      const swatch = _swatch.SwatchRGB.create(color.r, color.g, color.b);
1294
1295      _designTokens.neutralPalette.setValueFor(this, _palette.PaletteRGB.create(swatch));
1296    }
1297  }
1298  /**
1299   * @internal
1300   */
1301
1302
1303  handleChange(source, propertyName) {
1304    if (!this.cardFillColor) {
1305      _designTokens.fillColor.setValueFor(this, target => _designTokens.neutralFillLayerRecipe.getValueFor(target).evaluate(target, _designTokens.fillColor.getValueFor(source)).rest);
1306    }
1307  }
1308
1309  connectedCallback() {
1310    super.connectedCallback();
1311    const parent = (0, _fastFoundation.composedParent)(this);
1312
1313    if (parent) {
1314      const parentNotifier = _fastElement.Observable.getNotifier(parent);
1315
1316      parentNotifier.subscribe(this, 'fillColor');
1317      parentNotifier.subscribe(this, 'neutralPalette');
1318      this.handleChange(parent, 'fillColor');
1319    }
1320  }
1321
1322}
1323
1324exports.Card = Card;
1325(0, _tslib.__decorate)([(0, _fastElement.attr)({
1326  attribute: 'card-fill-color',
1327  mode: 'fromView'
1328})], Card.prototype, "cardFillColor", void 0);
1329(0, _tslib.__decorate)([(0, _fastElement.attr)({
1330  attribute: 'neutral-palette-source',
1331  mode: 'fromView'
1332})], Card.prototype, "neutralPaletteSource", void 0);
1333/**
1334 * The Fluent Card Element. Implements {@link @microsoft/fast-foundation#Card},
1335 * {@link @microsoft/fast-foundation#CardTemplate}
1336 *
1337 *
1338 * @public
1339 * @remarks
1340 * HTML Element: \<fluent-card\>
1341 */
1342
1343const fluentCard = Card.compose({
1344  baseName: 'card',
1345  baseClass: _fastFoundation.Card,
1346  template: _fastFoundation.cardTemplate,
1347  styles: _card.cardStyles
1348});
1349/**
1350 * Styles for Card
1351 * @public
1352 */
1353
1354exports.fluentCard = fluentCard;
1355const cardStyles = _card.cardStyles;
1356exports.cardStyles = cardStyles;
1357
1358},{"../color/palette":23,"../color/swatch":38,"../design-tokens":53,"./card.styles":19,"@microsoft/fast-colors":139,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"tslib":466}],21:[function(require,module,exports){
1359"use strict";
1360
1361Object.defineProperty(exports, "__esModule", {
1362  value: true
1363});
1364exports.checkboxStyles = void 0;
1365
1366var _fastElement = require("@microsoft/fast-element");
1367
1368var _fastFoundation = require("@microsoft/fast-foundation");
1369
1370var _fastWebUtilities = require("@microsoft/fast-web-utilities");
1371
1372var _styles = require("../styles");
1373
1374var _designTokens = require("../design-tokens");
1375
1376var _typeRamp = require("../styles/patterns/type-ramp");
1377
1378var _focus = require("../styles/focus");
1379
1380const checkboxStyles = (context, definition) => (0, _fastElement.css)`
1381    ${(0, _fastFoundation.display)('inline-flex')} :host {
1382      align-items: center;
1383      outline: none;
1384      ${
1385/*
1386 * Chromium likes to select label text or the default slot when
1387 * the checkbox is clicked. Maybe there is a better solution here?
1388 */
1389''} user-select: none;
1390    }
1391
1392    .control {
1393      position: relative;
1394      width: calc((${_styles.heightNumber} / 2 + ${_designTokens.designUnit}) * 1px);
1395      height: calc((${_styles.heightNumber} / 2 + ${_designTokens.designUnit}) * 1px);
1396      box-sizing: border-box;
1397      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
1398      border: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeStrongRest};
1399      background: ${_designTokens.neutralFillInputAltRest};
1400      cursor: pointer;
1401    }
1402
1403    .label__hidden {
1404      display: none;
1405      visibility: hidden;
1406    }
1407
1408    .label {
1409      ${_typeRamp.typeRampBase}
1410      color: ${_designTokens.neutralForegroundRest};
1411      ${

1412/* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */
1413''} padding-inline-start: calc(${_designTokens.designUnit} * 2px + 2px);
1414      margin-inline-end: calc(${_designTokens.designUnit} * 2px + 2px);
1415      cursor: pointer;
1416    }
1417
1418    slot[name='checked-indicator'],
1419    slot[name='indeterminate-indicator'] {
1420      display: flex;
1421      align-items: center;
1422      justify-content: center;
1423      width: 100%;
1424      height: 100%;
1425      fill: ${_designTokens.neutralForegroundRest};
1426      opacity: 0;
1427      pointer-events: none;
1428    }
1429
1430    slot[name='indeterminate-indicator'] {
1431      position: absolute;
1432      top: 0;
1433    }
1434
1435    :host(.checked) slot[name='checked-indicator'],
1436    :host(.checked) slot[name='indeterminate-indicator'] {
1437      fill: ${_designTokens.foregroundOnAccentRest};
1438    }
1439
1440    :host(:not(.disabled):hover) .control {
1441      background: ${_designTokens.neutralFillInputAltHover};
1442      border-color: ${_designTokens.neutralStrokeStrongHover};
1443    }
1444
1445    :host(:not(.disabled):active) .control {
1446      background: ${_designTokens.neutralFillInputAltActive};
1447      border-color: ${_designTokens.neutralStrokeStrongActive};
1448    }
1449
1450    :host(:${_fastFoundation.focusVisible}) .control {
1451      background: ${_designTokens.neutralFillInputAltFocus};
1452      ${_focus.focusTreatmentTight}
1453    }
1454
1455    :host(.checked) .control {
1456      background: ${_designTokens.accentFillRest};
1457      border-color: transparent;
1458    }
1459
1460    :host(.checked:not(.disabled):hover) .control {
1461      background: ${_designTokens.accentFillHover};
1462      border-color: transparent;
1463    }
1464
1465    :host(.checked:not(.disabled):active) .control {
1466      background: ${_designTokens.accentFillActive};
1467      border-color: transparent;
1468    }
1469
1470    :host(.disabled) .label,
1471    :host(.readonly) .label,
1472    :host(.readonly) .control,
1473    :host(.disabled) .control {
1474      cursor: ${_fastFoundation.disabledCursor};
1475    }
1476
1477    :host(.checked:not(.indeterminate)) slot[name='checked-indicator'],
1478    :host(.indeterminate) slot[name='indeterminate-indicator'] {
1479      opacity: 1;
1480    }
1481
1482    :host(.disabled) {
1483      opacity: ${_designTokens.disabledOpacity};
1484    }
1485  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
1486        .control {
1487          border-color: ${_fastWebUtilities.SystemColors.FieldText};
1488          background: ${_fastWebUtilities.SystemColors.Field};
1489        }
1490        :host(:not(.disabled):hover) .control,
1491        :host(:not(.disabled):active) .control {
1492          border-color: ${_fastWebUtilities.SystemColors.Highlight};
1493          background: ${_fastWebUtilities.SystemColors.Field};
1494        }
1495        slot[name='checked-indicator'],
1496        slot[name='indeterminate-indicator'] {
1497          fill: ${_fastWebUtilities.SystemColors.FieldText};
1498        }
1499        :host(:${_fastFoundation.focusVisible}) .control {
1500          forced-color-adjust: none;
1501          outline-color: ${_fastWebUtilities.SystemColors.FieldText};
1502          background: ${_fastWebUtilities.SystemColors.Field};
1503          border-color: ${_fastWebUtilities.SystemColors.Highlight};
1504        }
1505        :host(.checked) .control {
1506          background: ${_fastWebUtilities.SystemColors.Highlight};
1507          border-color: ${_fastWebUtilities.SystemColors.Highlight};
1508        }
1509        :host(.checked:not(.disabled):hover) .control,
1510        :host(.checked:not(.disabled):active) .control {
1511          background: ${_fastWebUtilities.SystemColors.HighlightText};
1512          border-color: ${_fastWebUtilities.SystemColors.Highlight};
1513        }
1514        :host(.checked) slot[name='checked-indicator'],
1515        :host(.checked) slot[name='indeterminate-indicator'] {
1516          fill: ${_fastWebUtilities.SystemColors.HighlightText};
1517        }
1518        :host(.checked:hover ) .control slot[name='checked-indicator'],
1519        :host(.checked:hover ) .control slot[name='indeterminate-indicator'] {
1520          fill: ${_fastWebUtilities.SystemColors.Highlight};
1521        }
1522        :host(.disabled) {
1523          opacity: 1;
1524        }
1525        :host(.disabled) .control {
1526          border-color: ${_fastWebUtilities.SystemColors.GrayText};
1527          background: ${_fastWebUtilities.SystemColors.Field};
1528        }
1529        :host(.disabled) slot[name='checked-indicator'],
1530        :host(.checked.disabled:hover) .control slot[name='checked-indicator'],
1531        :host(.disabled) slot[name='indeterminate-indicator'],
1532        :host(.checked.disabled:hover) .control slot[name='indeterminate-indicator'] {
1533          fill: ${_fastWebUtilities.SystemColors.GrayText};
1534        }
1535      `));
1536
1537exports.checkboxStyles = checkboxStyles;
1538
1539},{"../design-tokens":53,"../styles":97,"../styles/focus":96,"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],22:[function(require,module,exports){
1540"use strict";
1541
1542Object.defineProperty(exports, "__esModule", {
1543  value: true
1544});

1545exports.fluentCheckbox = exports.checkboxStyles = void 0;
1546
1547var _fastFoundation = require("@microsoft/fast-foundation");
1548
1549var _checkbox = require("./checkbox.styles");
1550
1551/**
1552 * The Fluent Checkbox Element. Implements {@link @microsoft/fast-foundation#Checkbox},
1553 * {@link @microsoft/fast-foundation#checkboxTemplate}
1554 *
1555 *
1556 * @public
1557 * @remarks
1558 * HTML Element: \<fluent-checkbox\>
1559 */
1560const fluentCheckbox = _fastFoundation.Checkbox.compose({
1561  baseName: 'checkbox',
1562  template: _fastFoundation.checkboxTemplate,
1563  styles: _checkbox.checkboxStyles,
1564  checkedIndicator: `
1565    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
1566      <path d="M13.86 3.66a.5.5 0 01-.02.7l-7.93 7.48a.6.6 0 01-.84-.02L2.4 9.1a.5.5 0 01.72-.7l2.4 2.44 7.65-7.2a.5.5 0 01.7.02z"/>
1567    </svg>
1568  `,
1569  indeterminateIndicator: `
1570    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
1571      <path d="M3 8c0-.28.22-.5.5-.5h9a.5.5 0 010 1h-9A.5.5 0 013 8z"/>
1572    </svg>
1573  `
1574});
1575/**
1576 * Styles for Checkbox
1577 * @public
1578 */
1579
1580
1581exports.fluentCheckbox = fluentCheckbox;
1582const checkboxStyles = _checkbox.checkboxStyles;
1583exports.checkboxStyles = checkboxStyles;
1584
1585},{"./checkbox.styles":21,"@microsoft/fast-foundation":256}],23:[function(require,module,exports){
1586"use strict";
1587
1588Object.defineProperty(exports, "__esModule", {
1589  value: true
1590});
1591exports.PaletteRGB = void 0;
1592
1593var _fastColors = require("@microsoft/fast-colors");
1594
1595var _swatch = require("./swatch");
1596
1597var _binarySearch = require("./utilities/binary-search");
1598
1599var _directionByIsDark = require("./utilities/direction-by-is-dark");
1600
1601var _relativeLuminance = require("./utilities/relative-luminance");
1602
1603const defaultPaletteRGBOptions = {
1604  stepContrast: 1.03,
1605  stepContrastRamp: 0.03,
1606  preserveSource: false
1607};
1608
1609function create(rOrSource, g, b) {
1610  if (typeof rOrSource === 'number') {
1611    return PaletteRGB.from(_swatch.SwatchRGB.create(rOrSource, g, b));
1612  } else {
1613    return PaletteRGB.from(rOrSource);
1614  }
1615}
1616
1617function from(source, options) {
1618  return (0, _swatch.isSwatchRGB)(source) ? PaletteRGBImpl.from(source, options) : PaletteRGBImpl.from(_swatch.SwatchRGB.create(source.r, source.g, source.b), options);
1619}
1620/** @public */
1621
1622
1623const PaletteRGB = Object.freeze({
1624  create,
1625  from
1626});
1627/**
1628 * A {@link Palette} representing RGB swatch values.
1629 * @public
1630 */
1631
1632exports.PaletteRGB = PaletteRGB;
1633
1634class PaletteRGBImpl {
1635  /**
1636   *
1637   * @param source - The source color for the palette
1638   * @param swatches - All swatches in the palette
1639   */
1640  constructor(source, swatches) {
1641    this.closestIndexCache = new Map();
1642    this.source = source;
1643    this.swatches = swatches;
1644    this.reversedSwatches = Object.freeze([...this.swatches].reverse());
1645    this.lastIndex = this.swatches.length - 1;
1646  }
1647  /**
1648   * {@inheritdoc Palette.colorContrast}
1649   */
1650
1651
1652  colorContrast(reference, contrastTarget, initialSearchIndex, direction) {
1653    if (initialSearchIndex === undefined) {
1654      initialSearchIndex = this.closestIndexOf(reference);
1655    }
1656
1657    let source = this.swatches;
1658    const endSearchIndex = this.lastIndex;
1659    let startSearchIndex = initialSearchIndex;
1660
1661    if (direction === undefined) {
1662      direction = (0, _directionByIsDark.directionByIsDark)(reference);
1663    }
1664
1665    const condition = value => (0, _relativeLuminance.contrast)(reference, value) >= contrastTarget;
1666
1667    if (direction === -1) {
1668      source = this.reversedSwatches;
1669      startSearchIndex = endSearchIndex - startSearchIndex;
1670    }
1671
1672    return (0, _binarySearch.binarySearch)(source, condition, startSearchIndex, endSearchIndex);
1673  }
1674  /**
1675   * {@inheritdoc Palette.get}
1676   */
1677
1678
1679  get(index) {
1680    return this.swatches[index] || this.swatches[(0, _fastColors.clamp)(index, 0, this.lastIndex)];
1681  }
1682  /**
1683   * {@inheritdoc Palette.closestIndexOf}
1684   */
1685
1686
1687  closestIndexOf(reference) {
1688    if (this.closestIndexCache.has(reference.relativeLuminance)) {
1689      return this.closestIndexCache.get(reference.relativeLuminance);
1690    }
1691
1692    let index = this.swatches.indexOf(reference);
1693
1694    if (index !== -1) {
1695      this.closestIndexCache.set(reference.relativeLuminance, index);
1696      return index;
1697    }
1698
1699    const closest = this.swatches.reduce((previous, next) => Math.abs(next.relativeLuminance - reference.relativeLuminance) < Math.abs(previous.relativeLuminance - reference.relativeLuminance) ? next : previous);
1700    index = this.swatches.indexOf(closest);
1701    this.closestIndexCache.set(reference.relativeLuminance, index);
1702    return index;
1703  }
1704  /**
1705   * Bump the saturation if it falls below the reference color saturation.
1706   * @param reference Color with target saturation
1707   * @param color Color to check and bump if below target saturation
1708   * @returns Original or adjusted color
1709   */
1710
1711
1712  static saturationBump(reference, color) {
1713    const hslReference = (0, _fastColors.rgbToHSL)(reference);
1714    const saturationTarget = hslReference.s;
1715    const hslColor = (0, _fastColors.rgbToHSL)(color);
1716
1717    if (hslColor.s < saturationTarget) {
1718      const hslNew = new _fastColors.ColorHSL(hslColor.h, saturationTarget, hslColor.l);
1719      return (0, _fastColors.hslToRGB)(hslNew);
1720    }
1721
1722    return color;
1723  }
1724  /**
1725   * Scales input from 0 to 100 to 0 to 0.5.
1726   * @param l Input number, 0 to 100
1727   * @returns Output number, 0 to 0.5
1728   */
1729
1730
1731  static ramp(l) {
1732    const inputval = l / 100;
1733    if (inputval > 0.5) return (inputval - 0.5) / 0.5; //from 0.500001in = 0.00000001out to 1.0in = 1.0out
1734
1735    return 2 * inputval; //from 0in = 0out to 0.5in = 1.0out
1736  }
1737  /**
1738   * Create a palette following the desired curve and many steps to build a smaller palette from.
1739   * @param source The source swatch to create a palette from
1740   * @returns The palette
1741   */
1742
1743
1744  static createHighResolutionPalette(source) {
1745    const swatches = [];
1746    const labSource = (0, _fastColors.rgbToLAB)(_fastColors.ColorRGBA64.fromObject(source).roundToPrecision(4));
1747    const lab0 = (0, _fastColors.labToRGB)(new _fastColors.ColorLAB(0, labSource.a, labSource.b)).clamp().roun

1747dToPrecision(4);
1748    const lab50 = (0, _fastColors.labToRGB)(new _fastColors.ColorLAB(50, labSource.a, labSource.b)).clamp().roundToPrecision(4);
1749    const lab100 = (0, _fastColors.labToRGB)(new _fastColors.ColorLAB(100, labSource.a, labSource.b)).clamp().roundToPrecision(4);
1750    const rgbMin = new _fastColors.ColorRGBA64(0, 0, 0);
1751    const rgbMax = new _fastColors.ColorRGBA64(1, 1, 1);
1752    const lAbove = lab100.equalValue(rgbMax) ? 0 : 14;
1753    const lBelow = lab0.equalValue(rgbMin) ? 0 : 14; // 257 levels max, depending on whether lab0 or lab100 are black or white respectively.
1754
1755    for (let l = 100 + lAbove; l >= 0 - lBelow; l -= 0.5) {
1756      let rgb;
1757
1758      if (l < 0) {
1759        // For L less than 0, scale from black to L=0
1760        const percentFromRgbMinToLab0 = l / lBelow + 1;
1761        rgb = (0, _fastColors.interpolateRGB)(percentFromRgbMinToLab0, rgbMin, lab0);
1762      } else if (l <= 50) {
1763        // For L less than 50, we scale from L=0 to the base color
1764        rgb = (0, _fastColors.interpolateRGB)(PaletteRGBImpl.ramp(l), lab0, lab50);
1765      } else if (l <= 100) {
1766        // For L less than 100, scale from the base color to L=100
1767        rgb = (0, _fastColors.interpolateRGB)(PaletteRGBImpl.ramp(l), lab50, lab100);
1768      } else {
1769        // For L greater than 100, scale from L=100 to white
1770        const percentFromLab100ToRgbMax = (l - 100.0) / lAbove;
1771        rgb = (0, _fastColors.interpolateRGB)(percentFromLab100ToRgbMax, lab100, rgbMax);
1772      }
1773
1774      rgb = PaletteRGBImpl.saturationBump(lab50, rgb).roundToPrecision(4);
1775      swatches.push(_swatch.SwatchRGB.from(rgb));
1776    }
1777
1778    return new PaletteRGBImpl(source, swatches);
1779  }
1780  /**
1781   * Adjust one end of the contrast-based palette so it doesn't abruptly fall to black (or white).
1782   * @param swatchContrast Function to get the target contrast for the next swatch
1783   * @param referencePalette The high resolution palette
1784   * @param targetPalette The contrast-based palette to adjust
1785   * @param direction The end to adjust
1786   */
1787
1788
1789  static adjustEnd(swatchContrast, referencePalette, targetPalette, direction) {
1790    // Careful with the use of referencePalette as only the refSwatches is reversed.
1791    const refSwatches = direction === -1 ? referencePalette.swatches : referencePalette.reversedSwatches;
1792
1793    const refIndex = swatch => {
1794      const index = referencePalette.closestIndexOf(swatch);
1795      return direction === 1 ? referencePalette.lastIndex - index : index;
1796    }; // Only operates on the 'end' end of the array, so flip if we're adjusting the 'beginning'
1797
1798
1799    if (direction === 1) {
1800      targetPalette.reverse();
1801    }
1802
1803    const targetContrast = swatchContrast(targetPalette[targetPalette.length - 2]);
1804    const actualContrast = (0, _fastColors.roundToPrecisionSmall)((0, _relativeLuminance.contrast)(targetPalette[targetPalette.length - 1], targetPalette[targetPalette.length - 2]), 2);
1805
1806    if (actualContrast < targetContrast) {
1807      // Remove last swatch if not sufficient contrast
1808      targetPalette.pop(); // Distribute to the last swatch
1809
1810      const safeSecondSwatch = referencePalette.colorContrast(refSwatches[referencePalette.lastIndex], targetContrast, undefined, direction);
1811      const safeSecondRefIndex = refIndex(safeSecondSwatch);
1812      const targetSwatchCurrentRefIndex = refIndex(targetPalette[targetPalette.length - 2]);
1813      const swatchesToSpace = safeSecondRefIndex - targetSwatchCurrentRefIndex;
1814      let space = 1;
1815
1816      for (let i = targetPalette.length - swatchesToSpace - 1; i < targetPalette.length; i++) {
1817        const currentRefIndex = refIndex(targetPalette[i]);
1818        const nextRefIndex = i === targetPalette.length - 1 ? referencePalette.lastIndex : currentRefIndex + space;
1819        targetPalette[i] = refSwatches[nextRefIndex];
1820        space++;
1821      }
1822    }
1823
1824    if (direction === 1) {
1825      targetPalette.reverse();
1826    }
1827  }
1828  /**
1829   * Generate a palette with consistent minimum contrast between swatches.
1830   * @param source The source color
1831   * @param options Palette generation options
1832   * @returns A palette meeting the requested contrast between swatches.
1833   */
1834
1835
1836  static createColorPaletteByContrast(source, options) {
1837    const referencePalette = PaletteRGBImpl.createHighResolutionPalette(source); // Ramp function to increase contrast as the swatches get darker
1838
1839    const nextContrast = swatch => {
1840      const c = options.stepContrast + options.stepContrast * (1 - swatch.relativeLuminance) * options.stepContrastRamp;

1841      return (0, _fastColors.roundToPrecisionSmall)(c, 2);
1842    };
1843
1844    const swatches = []; // Start with the source color or the light end color
1845
1846    let ref = options.preserveSource ? source : referencePalette.swatches[0];
1847    swatches.push(ref); // Add swatches with contrast toward dark
1848
1849    do {
1850      const targetContrast = nextContrast(ref);
1851      ref = referencePalette.colorContrast(ref, targetContrast, undefined, 1);
1852      swatches.push(ref);
1853    } while (ref.relativeLuminance > 0); // Add swatches with contrast toward light
1854
1855
1856    if (options.preserveSource) {
1857      ref = source;
1858
1859      do {
1860        // This is off from the dark direction because `ref` here is the darker swatch, probably subtle
1861        const targetContrast = nextContrast(ref);
1862        ref = referencePalette.colorContrast(ref, targetContrast, undefined, -1);
1863        swatches.unshift(ref);
1864      } while (ref.relativeLuminance < 1);
1865    } // Validate dark end
1866
1867
1868    this.adjustEnd(nextContrast, referencePalette, swatches, -1); // Validate light end
1869
1870    if (options.preserveSource) {
1871      this.adjustEnd(nextContrast, referencePalette, swatches, 1);
1872    }
1873
1874    return swatches;
1875  }
1876  /**
1877   * Create a color palette from a provided swatch
1878   * @param source - The source swatch to create a palette from
1879   * @returns
1880   */
1881
1882
1883  static from(source, options) {
1884    const opts = options === void 0 || null ? defaultPaletteRGBOptions : Object.assign(Object.assign({}, defaultPaletteRGBOptions), options);
1885    return new PaletteRGBImpl(source, Object.freeze(PaletteRGBImpl.createColorPaletteByContrast(source, opts)));
1886  }
1887
1888}
1889
1890},{"./swatch":38,"./utilities/binary-search":40,"./utilities/direction-by-is-dark":42,"./utilities/relative-luminance":44,"@microsoft/fast-colors":139}],24:[function(require,module,exports){
1891"use strict";
1892
1893Object.defineProperty(exports, "__esModule", {
1894  value: true
1895});
1896exports.contrastAndDeltaSwatchSet = contrastAndDeltaSwatchSet;
1897exports.contrastAndDeltaSwatchSetByLuminance = contrastAndDeltaSwatchSetByLuminance;
1898
1899var _directionByIsDark = require("../utilities/direction-by-is-dark");
1900
1901var _isDark = require("../utilities/is-dark");
1902
1903/**
1904 * @internal
1905 */
1906function contrastAndDeltaSwatchSet(palette, reference, baseContrast, restDelta, hoverDelta, activeDelta, focusDelta, direction) {
1907  if (direction === null || direction === void 0) {
1908    direction = (0, _directionByIsDark.directionByIsDark)(reference);
1909  }
1910
1911  const baseIndex = palette.closestIndexOf(palette.colorContrast(reference, baseContrast));
1912  return {
1913    rest: palette.get(baseIndex + direction * restDelta),
1914    hover: palette.get(baseIndex + direction * hoverDelta),
1915    active: palette.get(baseIndex + direction * activeDelta),
1916    focus: palette.get(baseIndex + direction * focusDelta)
1917  };
1918}
1919/**
1920 * @internal
1921 */
1922
1923
1924function contrastAndDeltaSwatchSetByLuminance(palette, reference, lightBaseContrast, lightRestDelta, lightHoverDelta, lightActiveDelta, lightFocusDelta, lightDirection = undefined, darkBaseContrast, darkRestDelta, darkHoverDelta, darkActiveDelta, darkFocusDelta, darkDirection = undefined) {
1925  if ((0, _isDark.isDark)(reference)) {
1926    return contrastAndDeltaSwatchSet(palette, reference, darkBaseContrast, darkRestDelta, darkHoverDelta, darkActiveDelta, darkFocusDelta, darkDirection);
1927  } else {
1928    return contrastAndDeltaSwatchSet(palette, reference, lightBaseContrast, lightRestDelta, lightHoverDelta, lightActiveDelta, lightFocusDelta, lightDirection);
1929  }
1930}
1931
1932},{"../utilities/direction-by-is-dark":42,"../utilities/is-dark":43}],25:[function(require,module,exports){
1933"use strict";
1934
1935Object.defineProperty(exports, "__esModule", {
1936  value: true
1937});
1938exports.contrastSwatch = contrastSwatch;
1939
1940/**
1941 * Color algorithm using contrast from the reference color.
1942 *
1943 * @param palette - The palette to operate on
1944 * @param reference - The reference color
1945 * @param contrast - The desired minimum contrast
1946 *
1947 * @internal
1948 */
1949function contrastSwatch(palette, reference, contrast) {
1950  return palette.colorContrast(reference, contrast);
1951}
1952
1953},{}],26:[function(require,module,exports){
1954"use strict";
1955
1956Object.defineProperty(exports, "__esModule", {
1957  value: true
1958});
1959exports.deltaSwatchSet = deltaSwatchSet;
1960exports.deltaSwatchSetByLuminance = deltaSwatchSetByLuminance;
1961
1962var _directionByIsDark = require("../utilities/direction-by-is-dark");
1963
1964var _isDark = require("../utilities/is-dark");
1965
1966/**
1967 * Color algorithm using deltas from the reference color for states.
1968 *
1969 * @param palette The palette to operate on
1970 * @param reference The reference color to calculate a color for
1971 * @param restDelta The rest state offset from reference
1972 * @param hoverDelta The hover state offset from reference
1973 * @param activeDelta The active state offset from reference
1974 * @param focusDelta The focus state offset from reference
1975 * @param direction The direction the deltas move on the ramp, default goes darker for light references and lighter for dark references
1976 *
1977 * @internal
1978 */
1979function deltaSwatchSet(palette, reference, restDelta, hoverDelta, activeDelta, focusDelta, direction) {
1980  const referenceIndex = palette.closestIndexOf(reference);
1981
1982  if (direction === null || direction === void 0) {
1983    direction = (0, _directionByIsDark.directionByIsDark)(reference);
1984  }
1985
1986  return {
1987    rest: palette.get(referenceIndex + direction * restDelta),
1988    hover: palette.get(referenceIndex + direction * hoverDelta),
1989    active: palette.get(referenceIndex + direction * activeDelta),
1990    focus: palette.get(referenceIndex + direction * focusDelta)
1991  };
1992}
1993/**
1994 * Color algorithm using deltas from the reference color for states, allowing different deltas based on a light or dark reference color.
1995 *
1996 * @param palette The palette to operate on
1997 * @param reference The reference color to calculate a color for
1998 * @param lightRestDelta The rest offset for a light reference
1999 * @param lightHoverDelta The hover offset for a light reference
2000 * @param lightActiveDelta The rest offset for a light reference
2001 * @param lightFocusDelta The hover offset for a light reference
2002 * @param lightDirection The direction the deltas move on the ramp, default goes darker for light references
2003 * @param darkRestDelta The rest offset for a dark reference
2004 * @param darkHoverDelta The hover offset for a dark reference
2005 * @param darkActiveDelta The rest offset for a dark reference
2006 * @param darkFocusDelta The hover offset for a dark reference
2007 * @param darkDirection The direction the deltas move on the ramp, default goes lighter for dark references
2008 *
2009 * @internal
2010 */
2011
2012
2013function deltaSwatchSetByLuminance(palette, reference, lightRestDelta, lightHoverDelta, lightActiveDelta, lightFocusDelta, lightDirection = undefined, darkRestDelta, darkHoverDelta, darkActiveDelta, darkFocusDelta, darkDirection = undefined) {
2014  if ((0, _isDark.isDark)(reference)) {
2015    return deltaSwatchSet(palette, reference, darkRestDelta, darkHoverDelta, darkActiveDelta, darkFocusDelta, darkDirection);
2016  } else {
2017    return deltaSwatchSet(palette, reference, lightRestDelta, lightHoverDelta, lightActiveDelta, lightFocusDelta, lightDirection);
2018  }
2019}
2020
2021},{"../utilities/direction-by-is-dark":42,"../utilities/is-dark":43}],27:[function(require,module,exports){
2022"use strict";
2023
2024Object.defineProperty(exports, "__esModule", {
2025  value: true
2026});
2027exports.deltaSwatch = deltaSwatch;
2028
2029var _directionByIsDark = require("../utilities/direction-by-is-dark");
2030
2031/**
2032 * Color algorithm using a delta from the reference color.
2033 *
2034 * @param palette - The palette to operate on
2035 * @param reference - The reference color
2036 * @param delta - The offset from the reference
2037 *
2038 * @internal
2039 */
2040function deltaSwatch(palette, reference, delta) {
2041  return palette.get(palette.closestIndexOf(reference) + (0, _directionByIsDark.directionByIsDark)(reference) * delta);
2042}
2043
2044},{"../utilities/direction-by-is-dark":42}],28:[function(require,module,exports){
2045"use strict";
2046
2047Object.defineProperty(exports, "__esModule", {
2048  value: true
2049});
2050exports.focusStrokeInner = focusStrokeInner;
2051exports.focusStrokeOuter = focusStrokeOuter;
2052
2053var _colorConstants = require("../utilities/color-constants");
2054
2055var _isDark = require("../utilities/is-dark");
2056
2057/**
2058 * @internal
2059 */
2060function focusStrokeOuter(palette, reference) {
2061  return (0, _isDark.isDark)(reference) ? _colorConstants.white : _colorConstants.black;
2062}
2063/**
2064 * @internal
2065 */
2066
2067
2068function focusStrokeInner(palette, reference, focusColor) {
2069  return (0, _isDark.isDark)(reference) ? _colorConstants.black : _colorConstants.white;
2070}
2071
2072},{"../utilities/color-constants":41,"../utilities/is-dark":43}],29:[function(require,module,exports){
2073"use strict";
2074
2075Object.defineProperty(exports, "__esModule", {
2076  value: true
2077});
2078exports.foregroundOnAccent = foregroundOnAccent;
2079exports.foregroundOnAccentSet = foregroundOnAccentSet;
2080
2081var _colorConstants = require("../utilities/color-constants");
2082
2083/**
2084 * @internal
2085 */
2086function foregroundOnAccent(reference, contrastTarget) {
2087  return reference.contrast(_colorConstants.white) >= contrastTarget ? _colorConstants.white : _colorConstants.black;
2088}
2089
2090function foregroundOnAccentSet(restFill, hoverFill, activeFill, focusFill, contrastTarget) {
2091  const defaultRule = fill => fill.contrast(_colorConstants.white) >= contrastTarget ? _colorConstants.white : _colorConstants.black;
2092
2093  const restForeground = defaultRule(restFill);
2094  const hoverForeground = defaultRule(hoverFill); // Active doe not have contrast requirements, so if rest and hover use the same color, use that for active even if it would not have passed the contrast check.
2095
2096  const activeForeground = restForeground.relativeLuminance === hoverForeground.relativeLuminance ? restForeground : defaultRule(activeFill);
2097  const focusForeground = defaultRule(focusFill);
2098  return {
2099    rest: restForeground,
2100    hover: hoverForeground,
2101    active: activeForeground,
2102    focus: focusForeground
2103  };
2104}
2105
2106},{"../utilities/color-constants":41}],30:[function(require,module,exports){
2107"use strict";
2108
2109Object.defineProperty(exports, "__esModule", {
2110  value: true
2111});
2112exports.gradientShadowStroke = gradientShadowStroke;
2113
2114var _fastColors = require("@microsoft/fast-colors");
2115
2116var _swatch = require("../swatch");
2117
2118var _directionByIsDark = require("../utilities/direction-by-is-dark");
2119
2120var _gradientSwatch = require("./gradient-swatch");
2121
2122const black = new _fastColors.ColorRGBA64(0, 0, 0);
2123const white = new _fastColors.ColorRGBA64(1, 1, 1);
2124/**
2125 * @internal
2126 */
2127
2128function gradientShadowStroke(palette, reference, restDelta, hoverDelta, activeDelta, focusDelta, shadowDelta, direction, shadowPercentage = 10, blendWithReference = false) {
2129  const referenceIndex = palette.closestIndexOf(reference);
2130
2131  if (direction === void 0) {
2132    direction = (0, _directionByIsDark.directionByIsDark)(reference);
2133  }
2134
2135  function overlayHelper(color) {
2136    if (blendWithReference) {
2137      const refIndex = palette.closestIndexOf(reference);
2138      const refSwatch = palette.get(refIndex);
2139      const overlaySolid = color.relativeLuminance < reference.relativeLuminance ? black : white;
2140      const overlayColor = (0, _fastColors.calculateOverlayColor)((0, _fastColors.parseColorHexRGB)(color.toColorString()), (0, _fastColors.parseColorHexRGB)(refSwatch.toColorString()), overlaySolid).roundToPrecision(2);
2141      const blend = (0, _fastColors.computeAlphaBlend)((0, _fastColors.parseColorHexRGB)(reference.toColorString()), overlayColor);
2142      return _swatch.SwatchRGB.from(blend);
2143    } else {
2144      return color;
2145    }
2146  }
2147
2148  const restIndex = referenceIndex + direction * restDelta;
2149  const hoverIndex = restIndex + direction * (hoverDelta - restDelta);
2150  const activeIndex = restIndex + direction * (activeDelta - restDelta);
2151  const focusIndex = restIndex + direction * (focusDelta - restDelta);
2152  const startPosition = direction === -1 ? 0 : 100 - shadowPercentage;
2153  const endPosition = direction === -1 ? shadowPercentage : 100;
2154
2155  function gradientHelper(index, applyShadow) {
2156    const color = palette.get(index);
2157

2158    if (applyShadow) {
2159      // Shadow is actually "highlight" on top in dark mode.
2160      const shadowColor = palette.get(index + direction * shadowDelta);
2161      const startColor = direction === -1 ? shadowColor : color;
2162      const endColor = direction === -1 ? color : shadowColor;
2163      const g = `linear-gradient(${overlayHelper(startColor).toColorString()} ${startPosition}%, ${overlayHelper(endColor).toColorString()} ${endPosition}%)`;
2164      return _gradientSwatch.GradientSwatchRGB.fromObject(startColor, g);
2165    } else {
2166      return overlayHelper(color);
2167    }
2168  }
2169
2170  return {
2171    rest: gradientHelper(restIndex, true),
2172    hover: gradientHelper(hoverIndex, true),
2173    active: gradientHelper(activeIndex, false),
2174    focus: gradientHelper(focusIndex, true)
2175  };
2176}
2177
2178},{"../swatch":38,"../utilities/direction-by-is-dark":42,"./gradient-swatch":31,"@microsoft/fast-colors":139}],31:[function(require,module,exports){
2179"use strict";
2180
2181Object.defineProperty(exports, "__esModule", {
2182  value: true
2183});
2184exports.GradientSwatchRGB = void 0;
2185
2186var _fastColors = require("@microsoft/fast-colors");
2187
2188var _relativeLuminance = require("../utilities/relative-luminance");
2189
2190/**
2191 * An implementation of {@link Swatch} that produces a gradient.
2192 * This assumes a subtle gradient such that `relativeLuminance` is still meaningful,
2193 * either with consistent luminance across the steps or a small edge of larger change.
2194 * @internal
2195 */
2196class GradientSwatchRGB {
2197  /**
2198   *
2199   * @param red Red channel expressed as a number between 0 and 1
2200   * @param green Green channel expressed as a number between 0 and 1
2201   * @param blue Blue channel expressed as a number between 0 and 1
2202   */
2203  constructor(red, green, blue, cssGradient) {
2204    this.toColorString = () => this.cssGradient;
2205
2206    this.contrast = _relativeLuminance.contrast.bind(null, this);
2207    this.createCSS = this.toColorString;
2208    this.color = new _fastColors.ColorRGBA64(red, green, blue);
2209    this.cssGradient = cssGradient;
2210    this.relativeLuminance = (0, _fastColors.rgbToRelativeLuminance)(this.color);
2211    this.r = red;
2212    this.g = green;
2213    this.b = blue;
2214  }
2215  /**
2216   * Creates a GradientSwatch from a base color and gradient definition
2217   * @param obj The base color object, used for relative luminance
2218   * @param cssGradient The actual gradient to be rendered
2219   * @returns New GradientSwatch object
2220   */
2221
2222
2223  static fromObject(obj, cssGradient) {
2224    return new GradientSwatchRGB(obj.r, obj.g, obj.b, cssGradient);
2225  }
2226
2227}
2228
2229exports.GradientSwatchRGB = GradientSwatchRGB;
2230
2231},{"../utilities/relative-luminance":44,"@microsoft/fast-colors":139}],32:[function(require,module,exports){
2232"use strict";
2233
2234Object.defineProperty(exports, "__esModule", {
2235  value: true
2236});
2237exports.neutralLayer1 = neutralLayer1;
2238exports.neutralLayer1Index = neutralLayer1Index;
2239
2240var _baseLayerLuminance = require("../utilities/base-layer-luminance");
2241
2242/**
2243 * @internal
2244 */
2245function neutralLayer1Index(palette, baseLayerLuminance) {
2246  return palette.closestIndexOf((0, _baseLayerLuminance.baseLayerLuminanceSwatch)(baseLayerLuminance));
2247}
2248/**
2249 * @internal
2250 */
2251
2252
2253function neutralLayer1(palette, baseLayerLuminance) {
2254  return palette.get(neutralLayer1Index(palette, baseLayerLuminance));
2255}
2256
2257},{"../utilities/base-layer-luminance":39}],33:[function(require,module,exports){
2258"use strict";
2259
2260Object.defineProperty(exports, "__esModule", {
2261  value: true
2262});
2263exports.neutralLayer2 = neutralLayer2;
2264
2265var _neutralLayer = require("./neutral-layer-1");
2266
2267/**
2268 * @internal
2269 */
2270function neutralLayer2(palette, baseLayerLuminance, layerDelta) {
2271  return palette.get((0, _neutralLayer.neutralLayer1Index)(palette, baseLayerLuminance) + layerDelta * -1);
2272}
2273
2274},{"./neutral-layer-1":32}],34:[function(require,module,exports){
2275"use strict";
2276
2277Object.defineProperty(exports, "__esModule", {
2278  value: true
2279});
2280exports.neutralLayer3 = neutralLayer3;
2281
2282var _neutralLayer = require("./neutral-layer-1");
2283
2284/**
2285 * @internal
2286 */
2287function neutralLayer3(palette, baseLayerLuminance, layerDelta) {
2288  return palette.get((0, _neutralLayer.neutralLayer1Index)(palette, baseLayerLuminance) + layerDelta * -1 * 2);
2289}
2290
2291},{"./neutral-layer-1":32}],35:[function(require,module,exports){
2292"use strict";
2293
2294Object.defineProperty(exports, "__esModule", {
2295  value: true
2296});
2297exports.neutralLayer4 = neutralLayer4;
2298
2299var _neutralLayer = require("./neutral-layer-1");
2300
2301/**
2302 * @internal
2303 */
2304function neutralLayer4(palette, baseLayerLuminance, layerDelta) {
2305  return palette.get((0, _neutralLayer.neutralLayer1Index)(palette, baseLayerLuminance) + layerDelta * -1 * 3);
2306}
2307
2308},{"./neutral-layer-1":32}],36:[function(require,module,exports){
2309"use strict";
2310
2311Object.defineProperty(exports, "__esModule", {
2312  value: true
2313});
2314exports.neutralLayerFloating = neutralLayerFloating;
2315
2316var _neutralLayer = require("./neutral-layer-1");
2317
2318/**
2319 * @internal
2320 */
2321function neutralLayerFloating(palette, baseLayerLuminance, layerDelta) {
2322  return palette.get((0, _neutralLayer.neutralLayer1Index)(palette, baseLayerLuminance) + layerDelta);
2323}
2324
2325},{"./neutral-layer-1":32}],37:[function(require,module,exports){
2326"use strict";
2327
2328Object.defineProperty(exports, "__esModule", {
2329  value: true
2330});
2331exports.underlineStroke = underlineStroke;
2332
2333var _directionByIsDark = require("../utilities/direction-by-is-dark");
2334
2335var _gradientSwatch = require("./gradient-swatch");
2336
2337/**
2338 * @internal
2339 */
2340function underlineStroke(palette, reference, restDelta, hoverDelta, activeDelta, focusDelta, shadowDelta, width) {
2341  const referenceIndex = palette.closestIndexOf(reference);
2342  const direction = (0, _directionByIsDark.directionByIsDark)(reference);
2343  const restIndex = referenceIndex + direction * restDelta;
2344  const hoverIndex = restIndex + direction * (hoverDelta - restDelta);
2345  const activeIndex = restIndex + direction * (activeDelta - restDelta);
2346  const focusIndex = restIndex + direction * (focusDelta - restDelta);
2347  const midPosition = `calc(100% - ${width})`;
2348
2349  function gradientHelper(index, applyShadow) {
2350    const color = palette.get(index);
2351

2352    if (applyShadow) {
2353      const underlineColor = palette.get(index + direction * shadowDelta);
2354      const g = `linear-gradient(${color.toColorString()} ${midPosition}, ${underlineColor.toColorString()} ${midPosition}, ${underlineColor.toColorString()})`;
2355      return _gradientSwatch.GradientSwatchRGB.fromObject(color, g);
2356    } else {
2357      return color;
2358    }
2359  }
2360
2361  return {
2362    rest: gradientHelper(restIndex, true),
2363    hover: gradientHelper(hoverIndex, true),
2364    active: gradientHelper(activeIndex, false),
2365    focus: gradientHelper(focusIndex, true)
2366  };
2367}
2368
2369},{"../utilities/direction-by-is-dark":42,"./gradient-swatch":31}],38:[function(require,module,exports){
2370"use strict";
2371
2372Object.defineProperty(exports, "__esModule", {
2373  value: true
2374});
2375exports.SwatchRGB = void 0;
2376exports.isSwatchRGB = isSwatchRGB;
2377
2378var _fastColors = require("@microsoft/fast-colors");
2379
2380var _relativeLuminance = require("./utilities/relative-luminance");
2381
2382/** @public */
2383const SwatchRGB = Object.freeze({
2384  create(r, g, b) {
2385    return new SwatchRGBImpl(r, g, b);
2386  },
2387
2388  from(obj) {
2389    return new SwatchRGBImpl(obj.r, obj.g, obj.b);
2390  }
2391
2392});
2393/**
2394 * Runtime test for an objects conformance with the SwatchRGB interface.
2395 * @internal
2396 */
2397
2398exports.SwatchRGB = SwatchRGB;
2399
2400function isSwatchRGB(value) {
2401  const test = {
2402    r: 0,
2403    g: 0,
2404    b: 0,
2405    toColorString: () => '',
2406    contrast: () => 0,
2407    relativeLuminance: 0
2408  };
2409
2410  for (const key in test) {
2411    if (typeof test[key] !== typeof value[key]) {
2412      return false;
2413    }
2414  }
2415
2416  return true;
2417}
2418/**
2419 * An RGB implementation of {@link Swatch}
2420 * @internal
2421 */
2422
2423
2424class SwatchRGBImpl extends _fastColors.ColorRGBA64 {
2425  /**
2426   *
2427   * @param red - Red channel expressed as a number between 0 and 1
2428   * @param green - Green channel expressed as a number between 0 and 1
2429   * @param blue - Blue channel expressed as a number between 0 and 1
2430   */
2431  constructor(red, green, blue) {
2432    super(red, green, blue, 1);
2433    this.toColorString = this.toStringHexRGB;
2434    this.contrast = _relativeLuminance.contrast.bind(null, this);
2435    this.createCSS = this.toColorString;
2436    this.relativeLuminance = (0, _fastColors.rgbToRelativeLuminance)(this);
2437  }
2438
2439  static fromObject(obj) {
2440    return new SwatchRGBImpl(obj.r, obj.g, obj.b);
2441  }
2442
2443}
2444
2445},{"./utilities/relative-luminance":44,"@microsoft/fast-colors":139}],39:[function(require,module,exports){
2446"use strict";
2447
2448Object.defineProperty(exports, "__esModule", {
2449  value: true
2450});
2451exports.StandardLuminance = void 0;
2452exports.baseLayerLuminanceSwatch = baseLayerLuminanceSwatch;
2453
2454var _swatch = require("../swatch");
2455
2456function baseLayerLuminanceSwatch(luminance) {
2457  return _swatch.SwatchRGB.create(luminance, luminance, luminance);
2458}
2459/**
2460 * Recommended values for light and dark mode for {@link @fluentui/web-components#baseLayerLuminance}.
2461 *
2462 * @public
2463 */
2464
2465
2466var StandardLuminance;
2467exports.StandardLuminance = StandardLuminance;
2468
2469(function (StandardLuminance) {
2470  StandardLuminance[StandardLuminance["LightMode"] = 0.98] = "LightMode";
2471  StandardLuminance[StandardLuminance["DarkMode"] = 0.15] = "DarkMode";
2472})(StandardLuminance || (exports.StandardLuminance = StandardLuminance = {}));
2473
2474},{"../swatch":38}],40:[function(require,module,exports){
2475"use strict";
2476
2477Object.defineProperty(exports, "__esModule", {
2478  value: true
2479});
2480exports.binarySearch = binarySearch;
2481
2482/**
2483 * @internal
2484 */
2485function binarySearch(valuesToSearch, searchCondition, startIndex = 0, endIndex = valuesToSearch.length - 1) {
2486  if (endIndex === startIndex) {
2487    return valuesToSearch[startIndex];
2488  }
2489
2490  const middleIndex = Math.floor((endIndex - startIndex) / 2) + startIndex; // Check to see if this passes on the item in the center of the array
2491  // if it does check the previous values
2492
2493  return searchCondition(valuesToSearch[middleIndex]) ? binarySearch(valuesToSearch, searchCondition, startIndex, middleIndex) : binarySearch(valuesToSearch, searchCondition, middleIndex + 1, // exclude this index because it failed the search condition
2494  endIndex);
2495}
2496
2497},{}],41:[function(require,module,exports){
2498"use strict";
2499
2500Object.defineProperty(exports, "__esModule", {
2501  value: true
2502});

2503exports.white = exports.middleGrey = exports.black = exports.accentBase = void 0;
2504
2505var _fastColors = require("@microsoft/fast-colors");
2506
2507var _swatch = require("../swatch");
2508
2509/**
2510 * @internal
2511 */
2512const white = _swatch.SwatchRGB.create(1, 1, 1);
2513/**
2514 * @internal
2515 */
2516
2517
2518exports.white = white;
2519
2520const black = _swatch.SwatchRGB.create(0, 0, 0);
2521/**
2522 * @internal
2523 */
2524
2525
2526exports.black = black;
2527
2528const middleGrey = _swatch.SwatchRGB.create(0.5, 0.5, 0.5);
2529/**
2530 * @internal
2531 */
2532
2533
2534exports.middleGrey = middleGrey;
2535const base = (0, _fastColors.parseColorHexRGB)('#0078D4');
2536
2537const accentBase = _swatch.SwatchRGB.create(base.r, base.g, base.b);
2538
2539exports.accentBase = accentBase;
2540
2541},{"../swatch":38,"@microsoft/fast-colors":139}],42:[function(require,module,exports){
2542"use strict";
2543
2544Object.defineProperty(exports, "__esModule", {
2545  value: true
2546});
2547exports.directionByIsDark = directionByIsDark;
2548
2549var _isDark = require("./is-dark");
2550
2551/**
2552 * @internal
2553 */
2554function directionByIsDark(color) {
2555  return (0, _isDark.isDark)(color) ? -1 : 1;
2556}
2557
2558},{"./is-dark":43}],43:[function(require,module,exports){
2559"use strict";
2560
2561Object.defineProperty(exports, "__esModule", {
2562  value: true
2563});
2564exports.isDark = isDark;
2565
2566/*
2567 * A color is in "dark" if there is more contrast between #000000 and a reference
2568 * color than #FFFFFF and the reference color. That threshold can be expressed as a relative luminance
2569 * using the contrast formula as (1 + 0.5) / (R + 0.05) === (R + 0.05) / (0 + 0.05),
2570 * which reduces to the following, where 'R' is the relative luminance of the reference color
2571 */
2572const target = (-0.1 + Math.sqrt(0.21)) / 2;
2573/**
2574 * Determines if a color should be considered Dark Mode
2575 * @param color - The color to check to mode of
2576 * @returns boolean
2577 *
2578 * @internal
2579 */
2580
2581function isDark(color) {
2582  return color.relativeLuminance <= target;
2583}
2584
2585},{}],44:[function(require,module,exports){
2586"use strict";
2587
2588Object.defineProperty(exports, "__esModule", {
2589  value: true
2590});
2591exports.contrast = contrast;
2592
2593/**
2594 * @internal
2595 */
2596function contrast(a, b) {
2597  const L1 = a.relativeLuminance > b.relativeLuminance ? a : b;
2598  const L2 = a.relativeLuminance > b.relativeLuminance ? b : a;
2599  return (L1.relativeLuminance + 0.05) / (L2.relativeLuminance + 0.05);
2600}
2601
2602},{}],45:[function(require,module,exports){
2603"use strict";
2604
2605Object.defineProperty(exports, "__esModule", {
2606  value: true
2607});
2608exports.comboboxStyles = void 0;
2609
2610var _fastElement = require("@microsoft/fast-element");
2611
2612var _fastFoundation = require("@microsoft/fast-foundation");
2613
2614var _select = require("../select/select.styles");
2615
2616var _behaviors = require("../utilities/behaviors");
2617
2618var _designTokens = require("../design-tokens");
2619
2620var _typeRamp = require("../styles/patterns/type-ramp");
2621
2622var _styles = require("../styles");
2623
2624const logicalControlSelector = '.control';
2625const interactivitySelector = ':not([disabled]):not([open])';
2626
2627const comboboxStyles = (context, definition) => (0, _fastElement.css)`
2628    ${(0, _select.baseSelectStyles)(context, definition)}
2629
2630    ${(0, _styles.inputStateStyles)(context, definition, logicalControlSelector)}
2631
2632    :host(:empty) .listbox {
2633      display: none;
2634    }
2635
2636    :host([disabled]) *,
2637    :host([disabled]) {
2638      cursor: ${_fastFoundation.disabledCursor};
2639      user-select: none;
2640    }
2641
2642    :host(:active) .selected-value {
2643      user-select: none;
2644    }
2645
2646    .selected-value {
2647      -webkit-appearance: none;
2648      background: transparent;
2649      border: none;
2650      color: inherit;
2651      ${_typeRamp.typeRampBase}
2652      height: calc(100% - ${_designTokens.strokeWidth} * 1px));
2653      margin: auto 0;
2654      width: 100%;
2655      outline: none;
2656    }
2657  `.withBehaviors((0, _behaviors.appearanceBehavior)('outline', (0, _styles.inputOutlineStyles)(context, definition, logicalControlSelector, interactivitySelector)), (0, _behaviors.appearanceBehavior)('filled', (0, _styles.inputFilledStyles)(context, definition, logicalControlSelector, interactivitySelector)), (0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _styles.inputForcedColorStyles)(context, definition, logicalControlSelector, interactivitySelector)));
2658
2659exports.comboboxStyles = comboboxStyles;
2660
2661},{"../design-tokens":53,"../select/select.styles":87,"../styles":97,"../styles/patterns/type-ramp":101,"../utilities/behaviors":123,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],46:[function(require,module,exports){
2662"use strict";
2663
2664Object.defineProperty(exports, "__esModule", {
2665  value: true
2666});

2667exports.fluentCombobox = exports.comboboxStyles = exports.Combobox = void 0;
2668
2669var _tslib = require("tslib");
2670
2671var _fastElement = require("@microsoft/fast-element");
2672
2673var _fastFoundation = require("@microsoft/fast-foundation");
2674
2675var _designTokens = require("../design-tokens");
2676
2677var _combobox = require("./combobox.styles");
2678
2679/**
2680 * The Fluent combobox class
2681 * @internal
2682 */
2683class Combobox extends _fastFoundation.Combobox {
2684  /**
2685   * @internal
2686   */
2687  appearanceChanged(oldValue, newValue) {
2688    if (oldValue !== newValue) {
2689      this.classList.add(newValue);
2690      this.classList.remove(oldValue);
2691    }
2692  }
2693  /**
2694   * @internal
2695   */
2696
2697
2698  connectedCallback() {
2699    super.connectedCallback();
2700
2701    if (!this.appearance) {
2702      this.appearance = 'outline';
2703    }
2704
2705    if (this.listbox) {
2706      _designTokens.fillColor.setValueFor(this.listbox, _designTokens.neutralLayerFloating);
2707    }
2708  }
2709
2710}
2711
2712exports.Combobox = Combobox;
2713(0, _tslib.__decorate)([(0, _fastElement.attr)({
2714  mode: 'fromView'
2715})], Combobox.prototype, "appearance", void 0);
2716/**
2717 * The Fluent Combobox Custom Element. Implements {@link @microsoft/fast-foundation#Combobox},
2718 * {@link @microsoft/fast-foundation#comboboxTemplate}
2719 *
2720 * @public
2721 * @remarks
2722 * HTML Element: \<fluent-combobox\>
2723 *
2724 */
2725
2726const fluentCombobox = Combobox.compose({
2727  baseName: 'combobox',
2728  baseClass: _fastFoundation.Combobox,
2729  shadowOptions: {
2730    delegatesFocus: true
2731  },
2732  template: _fastFoundation.comboboxTemplate,
2733  styles: _combobox.comboboxStyles,
2734  indicator: `
2735    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
2736      <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"/>
2737    </svg>
2738  `
2739});
2740/**
2741 * Styles for combobox
2742 * @public
2743 */
2744
2745exports.fluentCombobox = fluentCombobox;
2746const comboboxStyles = _combobox.comboboxStyles;
2747exports.comboboxStyles = comboboxStyles;
2748
2749},{"../design-tokens":53,"./combobox.styles":45,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"tslib":466}],47:[function(require,module,exports){
2750"use strict";
2751
2752Object.defineProperty(exports, "__esModule", {
2753  value: true
2754});
2755exports.allComponents = void 0;
2756Object.defineProperty(exports, "fluentAccordion", {
2757  enumerable: true,
2758  get: function () {
2759    return _index.fluentAccordion;
2760  }
2761});
2762Object.defineProperty(exports, "fluentAccordionItem", {
2763  enumerable: true,
2764  get: function () {
2765    return _index.fluentAccordionItem;
2766  }
2767});
2768Object.defineProperty(exports, "fluentAnchor", {
2769  enumerable: true,
2770  get: function () {
2771    return _index2.fluentAnchor;
2772  }
2773});
2774Object.defineProperty(exports, "fluentAnchoredRegion", {
2775  enumerable: true,
2776  get: function () {
2777    return _index3.fluentAnchoredRegion;
2778  }
2779});
2780Object.defineProperty(exports, "fluentBadge", {
2781  enumerable: true,
2782  get: function () {
2783    return _index4.fluentBadge;
2784  }
2785});
2786Object.defineProperty(exports, "fluentBreadcrumb", {
2787  enumerable: true,
2788  get: function () {
2789    return _index5.fluentBreadcrumb;
2790  }
2791});
2792Object.defineProperty(exports, "fluentBreadcrumbItem", {
2793  enumerable: true,
2794  get: function () {
2795    return _index6.fluentBreadcrumbItem;
2796  }
2797});
2798Object.defineProperty(exports, "fluentButton", {
2799  enumerable: true,
2800  get: function () {
2801    return _index7.fluentButton;
2802  }
2803});
2804Object.defineProperty(exports, "fluentCalendar", {
2805  enumerable: true,
2806  get: function () {
2807    return _index8.fluentCalendar;
2808  }
2809});
2810Object.defineProperty(exports, "fluentCard", {
2811  enumerable: true,
2812  get: function () {
2813    return _index9.fluentCard;
2814  }
2815});
2816Object.defineProperty(exports, "fluentCheckbox", {
2817  enumerable: true,
2818  get: function () {
2819    return _index10.fluentCheckbox;
2820  }
2821});
2822Object.defineProperty(exports, "fluentCombobox", {
2823  enumerable: true,
2824  get: function () {
2825    return _index11.fluentCombobox;
2826  }
2827});
2828Object.defineProperty(exports, "fluentDataGrid", {
2829  enumerable: true,
2830  get: function () {
2831    return _index12.fluentDataGrid;
2832  }
2833});
2834Object.defineProperty(exports, "fluentDataGridCell", {
2835  enumerable: true,
2836  get: function () {
2837    return _index12.fluentDataGridCell;
2838  }
2839});
2840Object.defineProperty(exports, "fluentDataGridRow", {
2841  enumerable: true,
2842  get: function () {
2843    return _index12.fluentDataGridRow;
2844  }
2845});
2846Object.defineProperty(exports, "fluentDesignSystemProvider", {
2847  enumerable: true,
2848  get: function () {
2849    return _index13.fluentDesignSystemProvider;
2850  }
2851});
2852Object.defineProperty(exports, "fluentDialog", {
2853  enumerable: true,
2854  get: function () {
2855    return _index14.fluentDialog;
2856  }
2857});
2858Object.defineProperty(exports, "fluentDivider", {
2859  enumerable: true,
2860  get: function () {
2861    return _index15.fluentDivider;
2862  }
2863});
2864Object.defineProperty(exports, "fluentFlipper", {
2865  enumerable: true,
2866  get: function () {
2867    return _index16.fluentFlipper;
2868  }
2869});
2870Object.defineProperty(exports, "fluentHorizontalScroll", {
2871  enumerable: true,
2872  get: function () {
2873    return _index17.fluentHorizontalScroll;
2874  }
2875});
2876Object.defineProperty(exports, "fluentListbox", {
2877  enumerable: true,
2878  get: function () {
2879    return _index18.fluentListbox;
2880  }
2881});
2882Object.defineProperty(exports, "fluentMenu", {
2883  enumerable: true,
2884  get: function () {
2885    return _index20.fluentMenu;
2886  }
2887});
2888Object.defineProperty(exports, "fluentMenuItem", {
2889  enumerable: true,
2890  get: function () {
2891    return _index21.fluentMenuItem;
2892  }
2893});
2894Object.defineProperty(exports, "fluentNumberField", {
2895  enumerable: true,
2896  get: function () {
2897    return _index22.fluentNumberField;
2898  }
2899});
2900Object.defineProperty(exports, "fluentOption", {
2901  enumerable: true,
2902  get: function () {
2903    return _index19.fluentOption;
2904  }
2905});
2906Object.defineProperty(exports, "fluentProgress", {
2907  enumerable: true,
2908  get: function () {
2909    return _index23.fluentProgress;
2910  }
2911});
2912Object.defineProperty(exports, "fluentProgressRing", {
2913  enumerable: true,
2914  get: function () {
2915    return _index23.fluentProgressRing;
2916  }
2917});
2918Object.defineProperty(exports, "fluentRadio", {
2919  enumerable: true,
2920  get: function () {
2921    return _index24.fluentRadio;
2922  }
2923});
2924Object.defineProperty(exports, "fluentRadioGroup", {
2925  enumerable: true,
2926  get: function () {
2927    return _index25.fluentRadioGroup;
2928  }
2929});
2930Object.defineProperty(exports, "fluentSearch", {
2931  enumerable: true,
2932  get: function () {
2933    return _index26.fluentSearch;
2934  }
2935});
2936Object.defineProperty(exports, "fluentSelect", {
2937  enumerable: true,
2938  get: function () {
2939    return _index27.fluentSelect;
2940  }
2941});
2942Object.defineProperty(exports, "fluentSkeleton", {
2943  enumerable: true,
2944  get: function () {
2945    return _index28.fluentSkeleton;
2946  }
2947});
2948Object.defineProperty(exports, "fluentSlider", {
2949  enumerable: true,
2950  get: function () {
2951    return _index29.fluentSlider;
2952  }
2953});
2954Object.defineProperty(exports, "fluentSliderLabel", {
2955  enumerable: true,
2956  get: function () {
2957    return _index30.fluentSliderLabel;
2958  }
2959});
2960Object.defineProperty(exports, "fluentSwitch", {
2961  enumerable: true,
2962  get: function () {
2963    return _index31.fluentSwitch;
2964  }
2965});
2966Object.defineProperty(exports, "fluentTab", {
2967  enumerable: true,
2968  get: function () {
2969    return _index32.fluentTab;
2970  }
2971});
2972Object.defineProperty(exports, "fluentTabPanel", {
2973  enumerable: true,
2974  get: function () {
2975    return _index32.fluentTabPanel;
2976  }
2977});
2978Object.defineProperty(exports, "fluentTabs", {
2979  enumerable: true,
2980  get: function () {
2981    return _index32.fluentTabs;
2982  }
2983});
2984Object.defineProperty(exports, "fluentTextArea", {
2985  enumerable: true,
2986  get: function () {
2987    return _index33.fluentTextArea;
2988  }
2989});
2990Object.defineProperty(exports, "fluentTextField", {
2991  enumerable: true,
2992  get: function () {
2993    return _index34.fluentTextField;
2994  }
2995});
2996Object.defineProperty(exports, "fluentToolbar", {
2997  enumerable: true,
2998  get: function () {
2999    return _index35.fluentToolbar;
3000  }
3001});
3002Object.defineProperty(exports, "fluentTooltip", {
3003  enumerable: true,
3004  get: function () {
3005    return _index36.fluentTooltip;
3006  }
3007});
3008Object.defineProperty(exports, "fluentTreeItem", {
3009  enumerable: true,
3010  get: function () {
3011    return _index38.fluentTreeItem;
3012  }
3013});
3014Object.defineProperty(exports, "fluentTreeView", {
3015  enumerable: true,
3016  get: function () {
3017    return _index37.fluentTreeView;
3018  }
3019});
3020
3021var _index = require("./accordion/index");
3022
3023var _index2 = require("./anchor/index");
3024
3025var _index3 = require("./anchored-region/index");
3026
3027var _index4 = require("./badge/index");
3028
3029var _index5 = require("./breadcrumb/index");
3030
3031var _index6 = require("./breadcrumb-item/index");
3032
3033var _index7 = require("./button/index");
3034
3035var _index8 = require("./calendar/index");
3036
3037var _index9 = require("./card/index");
3038
3039var _index10 = require("./checkbox/index");
3040
3041var _index11 = require("./combobox/index");
3042
3043var _index12 = require("./data-grid/index");
3044
3045var _index13 = require("./design-system-provider/index");
3046
3047var _index14 = require("./dialog/index");
3048
3049var _index15 = require("./divider/index");
3050
3051var _index16 = require("./flipper/index");
3052
3053var _index17 = require("./horizontal-scroll/index");
3054
3055var _index18 = require("./listbox/index");
3056
3057var _index19 = require("./listbox-option/index");
3058
3059var _index20 = require("./menu/index");
3060
3061var _index21 = require("./menu-item/index");
3062
3063var _index22 = require("./number-field/index");
3064
3065var _index23 = require("./progress/index");
3066
3067var _index24 = require("./radio/index");
3068
3069var _index25 = require("./radio-group/index");
3070
3071var _index26 = require("./search/index");
3072
3073var _index27 = require("./select/index");
3074
3075var _index28 = require("./skeleton/index");
3076

3077var _index29 = require("./slider/index");
3078
3079var _index30 = require("./slider-label/index");
3080
3081var _index31 = require("./switch/index");
3082
3083var _index32 = require("./tabs/index");
3084
3085var _index33 = require("./text-area/index");
3086
3087var _index34 = require("./text-field/index");
3088
3089var _index35 = require("./toolbar/index");
3090
3091var _index36 = require("./tooltip/index");
3092
3093var _index37 = require("./tree-view/index");
3094
3095var _index38 = require("./tree-item/index");
3096
3097/**
3098 * All Fluent UI Web Components
3099 * @public
3100 */
3101const allComponents = {
3102  fluentAccordion: _index.fluentAccordion,
3103  fluentAccordionItem: _index.fluentAccordionItem,
3104  fluentAnchor: _index2.fluentAnchor,
3105  fluentAnchoredRegion: _index3.fluentAnchoredRegion,
3106  fluentBadge: _index4.fluentBadge,
3107  fluentBreadcrumb: _index5.fluentBreadcrumb,
3108  fluentBreadcrumbItem: _index6.fluentBreadcrumbItem,
3109  fluentButton: _index7.fluentButton,
3110  fluentCalendar: _index8.fluentCalendar,
3111  fluentCard: _index9.fluentCard,
3112  fluentCheckbox: _index10.fluentCheckbox,
3113  fluentCombobox: _index11.fluentCombobox,
3114  fluentDataGrid: _index12.fluentDataGrid,
3115  fluentDataGridCell: _index12.fluentDataGridCell,
3116  fluentDataGridRow: _index12.fluentDataGridRow,
3117  fluentDesignSystemProvider: _index13.fluentDesignSystemProvider,
3118  fluentDialog: _index14.fluentDialog,
3119  fluentDivider: _index15.fluentDivider,
3120  fluentFlipper: _index16.fluentFlipper,
3121  fluentHorizontalScroll: _index17.fluentHorizontalScroll,
3122  fluentListbox: _index18.fluentListbox,
3123  fluentOption: _index19.fluentOption,
3124  fluentMenu: _index20.fluentMenu,
3125  fluentMenuItem: _index21.fluentMenuItem,
3126  fluentNumberField: _index22.fluentNumberField,
3127  fluentProgress: _index23.fluentProgress,
3128  fluentProgressRing: _index23.fluentProgressRing,
3129  fluentRadio: _index24.fluentRadio,
3130  fluentRadioGroup: _index25.fluentRadioGroup,
3131  fluentSearch: _index26.fluentSearch,
3132  fluentSelect: _index27.fluentSelect,
3133  fluentSkeleton: _index28.fluentSkeleton,
3134  fluentSlider: _index29.fluentSlider,
3135  fluentSliderLabel: _index30.fluentSliderLabel,
3136  fluentSwitch: _index31.fluentSwitch,
3137  fluentTabs: _index32.fluentTabs,
3138  fluentTab: _index32.fluentTab,
3139  fluentTabPanel: _index32.fluentTabPanel,
3140  fluentTextArea: _index33.fluentTextArea,
3141  fluentTextField: _index34.fluentTextField,
3142  fluentToolbar: _index35.fluentToolbar,
3143  fluentTooltip: _index36.fluentTooltip,
3144  fluentTreeView: _index37.fluentTreeView,
3145  fluentTreeItem: _index38.fluentTreeItem,
3146
3147  register(container, ...rest) {
3148    if (!container) {
3149      // preserve backward compatibility with code that loops through
3150      // the values of this object and calls them as funcs with no args
3151      return;
3152    }
3153
3154    for (const key in this) {
3155      if (key === 'register') {
3156        continue;
3157      }
3158
3159      this[key]().register(container, ...rest);
3160    }
3161  }
3162
3163};
3164exports.allComponents = allComponents;
3165
3166},{"./accordion/index":4,"./anchor/index":6,"./anchored-region/index":8,"./badge/index":10,"./breadcrumb-item/index":12,"./breadcrumb/index":14,"./button/index":16,"./calendar/index":18,"./card/index":20,"./checkbox/index":22,"./combobox/index":46,"./data-grid/index":51,"./design-system-provider/index":52,"./dialog/index":55,"./divider/index":57,"./flipper/index":59,"./horizontal-scroll/index":62,"./listbox-option/index":64,"./listbox/index":66,"./menu-item/index":68,"./menu/index":70,"./number-field/index":72,"./progress/index":74,"./radio-group/index":79,"./radio/index":81,"./search/index":83,"./select/index":86,"./skeleton/index":88,"./slider-label/index":90,"./slider/index":92,"./switch/index":103,"./tabs/index":105,"./text-area/index":111,"./text-field/index":113,"./toolbar/index":115,"./tooltip/index":117,"./tree-item/index":119,"./tree-view/index":121}],48:[function(require,module,exports){
3167"use strict";
3168
3169Object.defineProperty(exports, "__esModule", {
3170  value: true
3171});
3172exports.dataGridCellStyles = void 0;
3173
3174var _fastElement = require("@microsoft/fast-element");
3175
3176var _fastWebUtilities = require("@microsoft/fast-web-utilities");
3177
3178var _fastFoundation = require("@microsoft/fast-foundation");
3179
3180var _designTokens = require("../design-tokens");
3181
3182var _typeRamp = require("../styles/patterns/type-ramp");
3183
3184var _focus = require("../styles/focus");
3185
3186const dataGridCellStyles = (context, definition) => (0, _fastElement.css)`
3187    :host {
3188      padding: calc((${_designTokens.designUnit} + ${_designTokens.focusStrokeWidth} - ${_designTokens.strokeWidth}) * 1px) calc(((${_designTokens.designUnit} * 3) + ${_designTokens.focusStrokeWidth} - ${_designTokens.strokeWidth}) * 1px);
3189      color: ${_designTokens.neutralForegroundRest};
3190      box-sizing: border-box;
3191      ${_typeRamp.typeRampBase}
3192      border: transparent calc(${_designTokens.strokeWidth} * 1px) solid;
3193      overflow: hidden;
3194      white-space: nowrap;
3195      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
3196    }
3197
3198    :host(.column-header) {
3199      font-weight: 600;
3200    }
3201
3202    :host(:${_fastFoundation.focusVisible}) {
3203      ${_focus.focusTreatmentBase}
3204    }
3205  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
3206        :host {
3207          forced-color-adjust: none;
3208          background: ${_fastWebUtilities.SystemColors.Field};
3209          color: ${_fastWebUtilities.SystemColors.FieldText};
3210        }
3211
3212        :host(:${_fastFoundation.focusVisible}) {
3213          outline-color: ${_fastWebUtilities.SystemColors.FieldText};
3214        }
3215      `));
3216
3217exports.dataGridCellStyles = dataGridCellStyles;
3218
3219},{"../design-tokens":53,"../styles/focus":96,"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],49:[function(require,module,exports){
3220"use strict";
3221
3222Object.defineProperty(exports, "__esModule", {
3223  value: true
3224});
3225exports.dataGridRowStyles = void 0;
3226
3227var _fastElement = require("@microsoft/fast-element");
3228
3229var _fastFoundation = require("@microsoft/fast-foundation");
3230
3231var _designTokens = require("../design-tokens");
3232
3233const dataGridRowStyles = (context, definition) => (0, _fastElement.css)`
3234    :host {
3235      display: grid;
3236      padding: 1px 0;
3237      box-sizing: border-box;
3238      width: 100%;
3239      border-bottom: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeDividerRest};
3240    }
3241
3242    :host(.header) {
3243    }
3244
3245    :host(.sticky-header) {
3246      background: ${_designTokens.fillColor};
3247      position: sticky;
3248      top: 0;
3249    }
3250  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
3251        :host {
3252        }
3253      `));
3254
3255exports.dataGridRowStyles = dataGridRowStyles;
3256
3257},{"../design-tokens":53,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],50:[function(require,module,exports){
3258"use strict";
3259
3260Object.defineProperty(exports, "__esModule", {
3261  value: true
3262});
3263exports.dataGridStyles = void 0;
3264
3265var _fastElement = require("@microsoft/fast-element");
3266
3267const dataGridStyles = (context, definition) => (0, _fastElement.css)`
3268  :host {
3269    display: flex;
3270    position: relative;
3271    flex-direction: column;
3272  }
3273`;
3274
3275exports.dataGridStyles = dataGridStyles;
3276
3277},{"@microsoft/fast-element":151}],51:[function(require,module,exports){
3278"use strict";
3279
3280Object.defineProperty(exports, "__esModule", {
3281  value: true
3282});
3283Object.defineProperty(exports, "DataGrid", {
3284  enumerable: true,
3285  get: function () {
3286    return _fastFoundation.DataGrid;
3287  }
3288});
3289Object.defineProperty(exports, "DataGridCell", {
3290  enumerable: true,
3291  get: function () {
3292    return _fastFoundation.DataGridCell;
3293  }
3294});
3295Object.defineProperty(exports, "DataGridRow", {
3296  enumerable: true,
3297  get: function () {
3298    return _fastFoundation.DataGridRow;
3299  }
3300});
3301exports.fluentDataGridRow = exports.fluentDataGridCell = exports.fluentDataGrid = exports.dataGridStyles = exp

3301orts.dataGridRowStyles = exports.dataGridCellStyles = void 0;
3302
3303var _fastFoundation = require("@microsoft/fast-foundation");
3304
3305var _dataGrid = require("./data-grid.styles");
3306
3307var _dataGridRow = require("./data-grid-row.styles");
3308
3309var _dataGridCell = require("./data-grid-cell.styles");
3310
3311/**
3312 * The Fluent Data Grid Cell Element.
3313 *
3314 * @public
3315 * @remarks
3316 * HTML Element: \<fluent-data-grid-cell\>
3317 */
3318const fluentDataGridCell = _fastFoundation.DataGridCell.compose({
3319  baseName: 'data-grid-cell',
3320  template: _fastFoundation.dataGridCellTemplate,
3321  styles: _dataGridCell.dataGridCellStyles
3322});
3323/**
3324 * Styles for DataGrid cell
3325 * @public
3326 */
3327
3328
3329exports.fluentDataGridCell = fluentDataGridCell;
3330const dataGridCellStyles = _dataGridCell.dataGridCellStyles;
3331/**
3332 * The Fluent Data Grid Row Element.
3333 *
3334 * @public
3335 * @remarks
3336 * HTML Element: \<fluent-data-grid-row\>
3337 */
3338
3339exports.dataGridCellStyles = dataGridCellStyles;
3340
3341const fluentDataGridRow = _fastFoundation.DataGridRow.compose({
3342  baseName: 'data-grid-row',
3343  template: _fastFoundation.dataGridRowTemplate,
3344  styles: _dataGridRow.dataGridRowStyles
3345});
3346/**
3347 * Styles for DataGrid row
3348 * @public
3349 */
3350
3351
3352exports.fluentDataGridRow = fluentDataGridRow;
3353const dataGridRowStyles = _dataGridRow.dataGridRowStyles;
3354/**
3355 * The Fluent Data Grid Element.
3356 *
3357 * @public
3358 * @remarks
3359 * HTML Element: \<fluent-data-grid\>
3360 */
3361
3362exports.dataGridRowStyles = dataGridRowStyles;
3363
3364const fluentDataGrid = _fastFoundation.DataGrid.compose({
3365  baseName: 'data-grid',
3366  template: _fastFoundation.dataGridTemplate,
3367  styles: _dataGrid.dataGridStyles
3368});
3369/**
3370 * Styles for DataGrid
3371 * @public
3372 */
3373
3374
3375exports.fluentDataGrid = fluentDataGrid;
3376const dataGridStyles = _dataGrid.dataGridStyles;
3377/**
3378 * Data grid base class definitions
3379 * @public
3380 */
3381
3382exports.dataGridStyles = dataGridStyles;
3383
3384},{"./data-grid-cell.styles":48,"./data-grid-row.styles":49,"./data-grid.styles":50,"@microsoft/fast-foundation":256}],52:[function(require,module,exports){
3385"use strict";
3386
3387Object.defineProperty(exports, "__esModule", {
3388  value: true
3389});
3390exports.fluentDesignSystemProvider = exports.DesignSystemProvider = void 0;
3391
3392var _tslib = require("tslib");
3393
3394var _fastColors = require("@microsoft/fast-colors");
3395
3396var _fastElement = require("@microsoft/fast-element");
3397
3398var _fastFoundation = require("@microsoft/fast-foundation");
3399
3400var _fastWebUtilities = require("@microsoft/fast-web-utilities");
3401
3402var _swatch = require("../color/swatch");
3403
3404var _designTokens = require("../design-tokens");
3405
3406/**
3407 * A {@link ValueConverter} that converts to and from `Swatch` values.
3408 * @remarks
3409 * This converter allows for colors represented as string hex values, returning `null` if the
3410 * input was `null` or `undefined`.
3411 * @internal
3412 */
3413const swatchConverter = {
3414  toView(value) {
3415    if (value === null || value === undefined) {
3416      return null;
3417    }
3418
3419    return value === null || value === void 0 ? void 0 : value.toColorString();
3420  },
3421
3422  fromView(value) {
3423    if (value === null || value === undefined) {
3424      return null;
3425    }
3426
3427    const color = (0, _fastColors.parseColorHexRGB)(value);
3428    return color ? _swatch.SwatchRGB.create(color.r, color.g, color.b) : null;
3429  }
3430
3431};
3432const backgroundStyles = (0, _fastElement.css)`
3433  :host {
3434    background-color: ${_designTokens.fillColor};
3435    color: ${_designTokens.neutralForegroundRest};
3436  }
3437`.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
3438      :host {
3439        background-color: ${_fastWebUtilities.SystemColors.Canvas};
3440        box-shadow: 0 0 0 1px ${_fastWebUtilities.SystemColors.CanvasText};
3441        color: ${_fastWebUtilities.SystemColors.CanvasText};
3442      }
3443    `));
3444
3445function designToken(token) {
3446  return (source, key) => {
3447    source[key + 'Changed'] = function (prev, next) {
3448      if (next !== undefined && next !== null) {
3449        token.setValueFor(this, next);
3450      } else {
3451        token.deleteValueFor(this);
3452      }
3453    };
3454  };
3455}
3456/**
3457 * The Fluent DesignSystemProvider Element.
3458 * @public
3459 */
3460
3461
3462class DesignSystemProvider extends _fastFoundation.FoundationElement {
3463  constructor() {
3464    super();
3465    /**
3466     * Used to instruct the FluentDesignSystemProvider
3467     * that it should not set the CSS
3468     * background-color and color properties
3469     *
3470     * @remarks
3471     * HTML boolean attribute: no-paint
3472     */
3473
3474    this.noPaint = false; // If fillColor or baseLayerLuminance change, we need to
3475    // re-evaluate whether we should have paint styles applied
3476
3477    const subscriber = {
3478      handleChange: this.noPaintChanged.bind(this)
3479    };
3480
3481    _fastElement.Observable.getNotifier(this).subscribe(subscriber, 'fillColor');
3482
3483    _fastElement.Observable.getNotifier(this).subscribe(subscriber, 'base

3483LayerLuminance');
3484  }
3485
3486  connectedCallback() {
3487    super.connectedCallback();
3488    this.noPaintChanged();
3489  }
3490
3491  noPaintChanged() {
3492    if (!this.noPaint && (this.fillColor !== void 0 || this.baseLayerLuminance)) {
3493      this.$fastController.addStyles(backgroundStyles);
3494    } else {
3495      this.$fastController.removeStyles(backgroundStyles);
3496    }
3497  }
3498
3499}
3500
3501exports.DesignSystemProvider = DesignSystemProvider;
3502(0, _tslib.__decorate)([(0, _fastElement.attr)({
3503  attribute: 'no-paint',
3504  mode: 'boolean'
3505})], DesignSystemProvider.prototype, "noPaint", void 0);
3506(0, _tslib.__decorate)([(0, _fastElement.attr)({
3507  attribute: 'fill-color',
3508  converter: swatchConverter,
3509  mode: 'fromView'
3510}), designToken(_designTokens.fillColor)], DesignSystemProvider.prototype, "fillColor", void 0);
3511(0, _tslib.__decorate)([(0, _fastElement.attr)({
3512  attribute: 'accent-base-color',
3513  converter: swatchConverter,
3514  mode: 'fromView'
3515}), designToken(_designTokens.accentBaseColor)], DesignSystemProvider.prototype, "accentBaseColor", void 0);
3516(0, _tslib.__decorate)([(0, _fastElement.attr)({
3517  attribute: 'neutral-base-color',
3518  converter: swatchConverter,
3519  mode: 'fromView'
3520}), designToken(_designTokens.neutralBaseColor)], DesignSystemProvider.prototype, "neutralBaseColor", void 0);
3521(0, _tslib.__decorate)([(0, _fastElement.attr)({
3522  converter: _fastElement.nullableNumberConverter
3523}), designToken(_designTokens.density)], DesignSystemProvider.prototype, "density", void 0);
3524(0, _tslib.__decorate)([(0, _fastElement.attr)({
3525  attribute: 'design-unit',
3526  converter: _fastElement.nullableNumberConverter
3527}), designToken(_designTokens.designUnit)], DesignSystemProvider.prototype, "designUnit", void 0);
3528(0, _tslib.__decorate)([(0, _fastElement.attr)({
3529  attribute: 'direction'
3530}), designToken(_designTokens.direction)], DesignSystemProvider.prototype, "direction", void 0);
3531(0, _tslib.__decorate)([(0, _fastElement.attr)({
3532  attribute: 'base-height-multiplier',
3533  converter: _fastElement.nullableNumberConverter
3534}), designToken(_designTokens.baseHeightMultiplier)], DesignSystemProvider.prototype, "baseHeightMultiplier", void 0);
3535(0, _tslib.__decorate)([(0, _fastElement.attr)({
3536  attribute: 'base-horizontal-spacing-multiplier',
3537  converter: _fastElement.nullableNumberConverter
3538}), designToken(_designTokens.baseHorizontalSpacingMultiplier)], DesignSystemProvider.prototype, "baseHorizontalSpacingMultiplier", void 0);
3539(0, _tslib.__decorate)([(0, _fastElement.attr)({
3540  attribute: 'control-corner-radius',
3541  converter: _fastElement.nullableNumberConverter
3542}), designToken(_designTokens.controlCornerRadius)], DesignSystemProvider.prototype, "controlCornerRadius", void 0);
3543(0, _tslib.__decorate)([(0, _fastElement.attr)({
3544  attribute: 'layer-corner-radius',
3545  converter: _fastElement.nullableNumberConverter
3546}), designToken(_designTokens.layerCornerRadius)], DesignSystemProvider.prototype, "layerCornerRadius", void 0);
3547(0, _tslib.__decorate)([(0, _fastElement.attr)({
3548  attribute: 'stroke-width',
3549  converter: _fastElement.nullableNumberConverter
3550}), designToken(_designTokens.strokeWidth)], DesignSystemProvider.prototype, "strokeWidth", void 0);
3551(0, _tslib.__decorate)([(0, _fastElement.attr)({
3552  attribute: 'focus-stroke-width',
3553  converter: _fastElement.nullableNumberConverter
3554}), designToken(_designTokens.focusStrokeWidth)], DesignSystemProvider.prototype, "focusStrokeWidth", void 0);
3555(0, _tslib.__decorate)([(0, _fastElement.attr)({
3556  attribute: 'disabled-opacity',
3557  converter: _fastElement.nullableNumberConverter
3558}), designToken(_designTokens.disabledOpacity)], DesignSystemProvider.prototype, "disabledOpacity", void 0);
3559(0, _tslib.__decorate)([(0, _fastElement.attr)({
3560  attribute: 'type-ramp-minus-2-font-size'
3561}), designToken(_designTokens.typeRampMinus2FontSize)], DesignSystemProvider.prototype, "typeRampMinus2FontSize", void 0);
3562(0, _tslib.__decorate)([(0, _fastElement.attr)({
3563  attribute: 'type-ramp-minus-2-line-height'
3564}), designToken(_designTokens.typeRampMinus2LineHeight)], DesignSystemProvider.prototype, "typeRampMinus2LineHeight", void 0);
3565(0, _tslib.__decorate)([(0, _fastElement.attr)({
3566  attribute: 'type-ramp-minus-1-font-size'
3567}), designToken(_designTokens.typeRampMinus1FontSize)], DesignSystemProvider.prototype, "typeRampMinus1FontSize", void 0);
3568(0, _tslib.__decorate)([(0, _fastElement.attr)({
3569  attribute: 'type-ramp-minus-1-line-height'
3570}), designToken(_designTokens.typeRampMinus1LineHeight)], DesignSystemProvider.prototype, "typeRampMinus1LineHeight", void 0);
3571(0, _tslib.__decorate)([(0, _fastElement.attr)({
3572  attribute: 'type-ramp-base-font-size'
3573}), designToken(_designTokens.typeRampBaseFontSize)], DesignSystemProvider.prototype, "typeRampBaseFontSize", void 0);
3574(0, _tslib.__decorate)([(0, _fastElement.attr)({
3575  attribute: 'type-ramp-base-line-height'
3576}), designToken(_designTokens.typeRampBaseLineHeight)], DesignSystemProvider.prototype, "typeRampBaseLineHeight", void 0);
3577(0, _tslib.__decorate)([(0, _fastElement.attr)({
3578  attribute: 'type-ramp-plus-1-font-size'
3579}), designToken(_designTokens.typeRampPlus1FontSize)], DesignSystemProvider.prototype, "typeRampPlus1FontSize", void 0);
3580(0, _tslib.__decorate)([(0, _fastElement.attr)({
3581  attribute: 'type-ramp-plus-1-line-height'
3582}), designToken(_designTokens.typeRampPlus1LineHeight)], DesignSystemProvider.prototype, "typeRampPlus1LineHeight", void 0);
3583(0, _tslib.__decorate)([(0, _fastElement.attr)({
3584  attribute: 'type-ramp-plus-2-font-size'
3585}), designToken(_designTokens.typeRampPlus2FontSize)], DesignSystemProvider.prototype, "typeRampPlus2FontSize", void 0);
3586(0, _tslib.__decorate)([(0, _fastElement.attr)({
3587  attribute: 'type-ramp-plus-2-line-height'
3588}), designToken(_designTokens.typeRampPlus2LineHeight)], DesignSystemProvider.prototype, "typeRampPlus2LineHeight", void 0);
3589(0, _tslib.__decorate)([(0, _fastElement.attr)({
3590  attribute: 'type-ramp-plus-3-font-size'
3591}), designToken(_designTokens.typeRampPlus3FontSize)], DesignSystemProvider.prototype, "typeRampPlus3FontSize", void 0);
3592(0, _tslib.__decorate)([(0, _fastElement.attr)({
3593  attribute: 'type-ramp-plus-3-line-height'
3594}), designToken(_designTokens.typeRampPlus3LineHeight)], DesignSystemProvider.prototype, "typeRampPlus3LineHeight", void 0);
3595(0, _tslib.__decorate)([(0, _fastElement.attr)({
3596  attribute: 'type-ramp-plus-4-font-size'
3597}), designToken(_designTokens.typeRampPlus4FontSize)], DesignSystemProvider.prototype, "typeRampPlus4FontSize", void 0);
3598(0, _tslib.__decorate)([(0, _fastElement.attr)({
3599  attribute: 'type-ramp-plus-4-line-height'
3600}), designToken(_designTokens.typeRampPlus4LineHeight)], DesignSystemProvider.prototype, "typeRampPlus4LineHeight", void 0);
3601(0, _tslib.__decorate)([(0, _fastElement.attr)({
3602  attribute: 'type-ramp-plus-5-font-size'
3603}), designToken(_designTokens.typeRampPlus5FontSize)], DesignSystemProvider.prototype, "typeRampPlus5FontSize", void 0);
3604(0, _tslib.__decorate)([(0, _fastElement.attr)({
3605  attribute: 'type-ramp-plus-5-line-height'
3606}), designToken(_designTokens.typeRampPlus5LineHeight)], DesignSystemProvider.prototype, "typeRampPlus5LineHeight", void 0);
3607(0, _tslib.__decorate)([(0, _fastElement.attr)({
3608  attribute: 'type-ramp-plus-6-font-size'
3609}), designToken(_designTokens.typeRampPlus6FontSize)], DesignSystemProvider.prototype, "typeRampPlus6FontSize", void 0);
3610(0, _tslib.__decorate)([(0, _fastElement.attr)({
3611  attribute: 'type-ramp-plus-6-line-height'
3612}), designToken(_designTokens.typeRampPlus6LineHeight)], DesignSystemProvider.prototype, "typeRampPlus6LineHeight", void 0);
3613(0, _tslib.__decorate)([(0, _fastElement.attr)({
3614  attribute: 'accent-fill-rest-delta',
3615  converter: _fastElement.nullableNumberConverter
3616}), designToken(_designTokens.accentFillRestDelta)], DesignSystemProvider.prototype, "accentFillRestDelta", void 0);
3617(0, _tslib.__decorate)([(0, _fastElement.attr)({
3618  attribute: 'accent-fill-hover-delta',
3619  converter: _fastElement.nullableNumberConverter
3620}), designToken(_designTokens.accentFillHoverDelta)], DesignSystemProvider.prototype, "accentFillHoverDelta", void 0);
3621(0, _tslib.__decorate)([(0, _fastElement.attr)({
3622  attribute: 'accent-fill-active-delta',
3623  converter: _fastElement.nullableNumberConverter
3624}), designToken(_designTokens.accentFillActiveDelta)], DesignSystemProvider.prototype, "accentFillActiveDelta", void 0);
3625(0, _tslib.__decorate)([(0, _fastElement.attr)({
3626  attribute: 'accent-fill-focus-delta',
3627  converter: _fastElement.nullableNumberConverter
3628}), designToken(_designTokens.accentFillFocusDelta)], DesignSystemProvider.prototype, "accentFillFocusDelta", void 0);
3629(0, _tslib.__decorate)([(0, _fastElement.attr)({
3630  attribute: 'accent-foreground-rest-delta',
3631  converter: _fastElement.nullableNumberConverter
3632}), designToken(_designTokens.accentForegroundRestDelta)], DesignSystemProvider.prototype, "accentForegroundRestDelta", void 0);
3633(0, _tslib.__decorate)([(0, _fastElement.attr)({
3634  attribute: 'accent-foreground-hover-delta',
3635  converter: _fastElement.nullableNumberConverter
3636}), designToken(_designTokens.accentForegroundHoverDelta)], DesignSystemProvider.prototype, "accentForegroundHoverDelta", void 0);
3637(0, _tslib.__decorate)([(0, _fastElement.attr)({
3638  attribute: 'accent-foreground-active-delta',
3639  converter: _fastElement.nullableNumberConverter
3640}), designToken(_designTokens.accentForegroundActiveDelta)], DesignSystemProvider.prototype, "accentForegroundActiveDelta", void 0);
3641(0, _tslib.__decorate)([(0, _fastElement.attr)({
3642  attribute: 'accent-foreground-focus-delta',
3643  converter: _fastElement.nullableNumberConverter
3644}), designToken(_designTokens.accentForegroundFocusDelta)], DesignSystemProvider.prototype, "accentForegroundFocusDelta", void 0);
3645(0, _tslib.__decorate)([(0, _fastElement.attr)({
3646  attribute: 'neutral-fill-rest-delta',
3647  converter: _fastElement.nullableNumberConverter
3648}), designToken(_designTokens.neutralFillRestDelta)], DesignSystemProvider.prototype, "neutralFillRestDelta", void 0);
3649(0, _tslib.__decorate)([(0, _fastElement.attr)({
3650  attribute: 'neutral-fill-hover-delta',
3651  converter: _fastElement.nullableNumberConverter
3652}), designToken(_designTokens.neutralFillHoverDelta)], DesignSystemProvider.prototype, "neutralFillHoverDelta", void 0);
3653(0, _tslib.__decorate)([(0, _fastElement.attr)({
3654  attribute: 'neutral-fill-active-delta',
3655  converter: _fastElement.nullableNumberConverter
3656}), designToken(_designTokens.neutralFillActiveDelta)], DesignSystemProvider.prototype, "neutralFillActiveDelta", void 0);
3657(0, _tslib.__decorate)([(0, _fastElement.attr)({
3658  attribute: 'neutral-fill-focus-delta',
3659  converter: _fastElement.nullableNumberConverter
3660}), designToken(_designTokens.neutralFillFocusDelta)], DesignSystemProvider.prototype, "neutralFillFocusDelta", void 0);
3661(0, _tslib.__decorate)([(0, _fastElement.attr)({
3662  attribute: 'neutral-fill-input-rest-delta',
3663  converter: _fastElement.nullableNumberConverter
3664}), designToken(_designTokens.neutralFillInputRestDelta)], DesignSystemProvider.prototype, "neutralFillInputRestDelta", void 0);
3665(0, _tslib.__decorate)([(0, _fastElement.attr)({
3666  attribute: 'neutral-fill-input-hover-delta',
3667  converter: _fastElement.nullableNumberConverter
3668}), designToken(_designTokens.neutralFillInputHoverDelta)], DesignSystemProvider.prototype, "neutralFillInputHoverDelta", void 0);
3669(0, _tslib.__decorate)([(0, _fastElement.attr)({
3670  attribute: 'neutral-fill-input-active-delta',
3671  converter: _fastElement.nullableNumberConverter
3672}), designToken(_designTokens.neutralFillInputActiveDelta)], DesignSystemProvider.prototype, "neutralFillInputActiveDelta", void 0);
3673(0, _tslib.__decorate)([(0, _fastElement.attr)({
3674  attribute: 'neutral-fill-input-focus-delta',
3675  converter: _fastElement.nullableNumberConverter
3676}), designToken(_designTokens.neutralFillInputFocusDelta)], DesignSystemProvider.prototype, "neutralFillInputFocusDelta", void 0);
3677(0, _tslib.__decorate)([(0, _fastElement.attr)({

3678  attribute: 'neutral-fill-layer-rest-delta',
3679  converter: _fastElement.nullableNumberConverter
3680}), designToken(_designTokens.neutralFillLayerRestDelta)], DesignSystemProvider.prototype, "neutralFillLayerRestDelta", void 0);
3681(0, _tslib.__decorate)([(0, _fastElement.attr)({
3682  attribute: 'neutral-fill-stealth-rest-delta',
3683  converter: _fastElement.nullableNumberConverter
3684}), designToken(_designTokens.neutralFillStealthRestDelta)], DesignSystemProvider.prototype, "neutralFillStealthRestDelta", void 0);
3685(0, _tslib.__decorate)([(0, _fastElement.attr)({
3686  attribute: 'neutral-fill-stealth-hover-delta',
3687  converter: _fastElement.nullableNumberConverter
3688}), designToken(_designTokens.neutralFillStealthHoverDelta)], DesignSystemProvider.prototype, "neutralFillStealthHoverDelta", void 0);
3689(0, _tslib.__decorate)([(0, _fastElement.attr)({
3690  attribute: 'neutral-fill-stealth-active-delta',
3691  converter: _fastElement.nullableNumberConverter
3692}), designToken(_designTokens.neutralFillStealthActiveDelta)], DesignSystemProvider.prototype, "neutralFillStealthActiveDelta", void 0);
3693(0, _tslib.__decorate)([(0, _fastElement.attr)({
3694  attribute: 'neutral-fill-stealth-focus-delta',
3695  converter: _fastElement.nullableNumberConverter
3696}), designToken(_designTokens.neutralFillStealthFocusDelta)], DesignSystemProvider.prototype, "neutralFillStealthFocusDelta", void 0);
3697(0, _tslib.__decorate)([(0, _fastElement.attr)({
3698  attribute: 'neutral-fill-strong-hover-delta',
3699  converter: _fastElement.nullableNumberConverter
3700}), designToken(_designTokens.neutralFillStrongHoverDelta)], DesignSystemProvider.prototype, "neutralFillStrongHoverDelta", void 0);
3701(0, _tslib.__decorate)([(0, _fastElement.attr)({
3702  attribute: 'neutral-fill-strong-active-delta',
3703  converter: _fastElement.nullableNumberConverter
3704}), designToken(_designTokens.neutralFillStrongActiveDelta)], DesignSystemProvider.prototype, "neutralFillStrongActiveDelta", void 0);
3705(0, _tslib.__decorate)([(0, _fastElement.attr)({
3706  attribute: 'neutral-fill-strong-focus-delta',
3707  converter: _fastElement.nullableNumberConverter
3708}), designToken(_designTokens.neutralFillStrongFocusDelta)], DesignSystemProvider.prototype, "neutralFillStrongFocusDelta", void 0);
3709(0, _tslib.__decorate)([(0, _fastElement.attr)({
3710  attribute: 'base-layer-luminance',
3711  converter: _fastElement.nullableNumberConverter
3712}), designToken(_designTokens.baseLayerLuminance)], DesignSystemProvider.prototype, "baseLayerLuminance", void 0);
3713(0, _tslib.__decorate)([(0, _fastElement.attr)({
3714  attribute: 'neutral-stroke-divider-rest-delta',
3715  converter: _fastElement.nullableNumberConverter
3716}), designToken(_designTokens.neutralStrokeDividerRestDelta)], DesignSystemProvider.prototype, "neutralStrokeDividerRestDelta", void 0);
3717(0, _tslib.__decorate)([(0, _fastElement.attr)({
3718  attribute: 'neutral-stroke-rest-delta',
3719  converter: _fastElement.nullableNumberConverter
3720}), designToken(_designTokens.neutralStrokeRestDelta)], DesignSystemProvider.prototype, "neutralStrokeRestDelta", void 0);
3721(0, _tslib.__decorate)([(0, _fastElement.attr)({
3722  attribute: 'neutral-stroke-hover-delta',
3723  converter: _fastElement.nullableNumberConverter
3724}), designToken(_designTokens.neutralStrokeHoverDelta)], DesignSystemProvider.prototype, "neutralStrokeHoverDelta", void 0);
3725(0, _tslib.__decorate)([(0, _fastElement.attr)({
3726  attribute: 'neutral-stroke-active-delta',
3727  converter: _fastElement.nullableNumberConverter
3728}), designToken(_designTokens.neutralStrokeActiveDelta)], DesignSystemProvider.prototype, "neutralStrokeActiveDelta", void 0);
3729(0, _tslib.__decorate)([(0, _fastElement.attr)({
3730  attribute: 'neutral-stroke-focus-delta',
3731  converter: _fastElement.nullableNumberConverter
3732}), designToken(_designTokens.neutralStrokeFocusDelta)], DesignSystemProvider.prototype, "neutralStrokeFocusDelta", void 0);
3733/**
3734 * The Fluent Design System Provider Element.
3735 *
3736 * @public
3737 * @remarks
3738 * HTML Element: \<fluent-design-system-provider\>
3739 */
3740
3741const fluentDesignSystemProvider = DesignSystemProvider.compose({
3742  baseName: 'design-system-provider',
3743  template: (0, _fastElement.html)` <slot></slot> `,
3744  styles: (0, _fastElement.css)`
3745    ${(0, _fastFoundation.display)('block')}
3746  `
3747});
3748exports.fluentDesignSystemProvider = fluentDesignSystemProvider;
3749
3750},{"../color/swatch":38,"../design-tokens":53,"@microsoft/fast-colors":139,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379,"tslib":466}],53:[function(require,module,exports){
3751"use strict";
3752
3753Object.defineProperty(exports, "__esModule", {
3754  value: true
3755});
3756exports.neutralFillInverseHoverDelta = exports.neutralFillInverseHover = exports.neutralFillInverseFocusDelta = exports.neutralFillInverseFocus = exports.neutralFillInverseActiveDelta = exports.neutralFillInverseActive = exports.neutralFillInputRestDelta = exports.neutralFillInputRest = exports.neutralFillInputRecipe = exports.neutralFillInputHoverDelta = exports.neutralFillInputHover = exports.neutralFillInputFocusDelta = exports.neutralFillInputFocus = exports.neutralFillInputAltRestDelta = exports.neutralFillInputAltRest = exports.neutralFillInputAltRecipe = exports.neutralFillInputAltHoverDelta = exports.neutralFillInputAltHover = exports.neutralFillInputAltFocusDelta = exports.neutralFillInputAltFocus = exports.neutralFillInputAltActiveDelta = exports.neutralFillInputAltActive = exports.neutralFillInputActiveDelta = exports.neutralFillInputActive = exports.neutralFillHoverDelta = exports.neutralFillHover = exports.neutralFillFocusDelta = exports.neutralFillFocus = exports.neutralFillCardDelta = exports.neutralFillCard = exports.neutralFillActiveDelta = exports.neutralFillActive = exports.neutralDividerRestDelta = exports.neutralDivider = exports.neutralContrastFillRestDelta = exports.neutralContrastFillRest = exports.neutralContrastFillHoverDelta = exports.neutralContrastFillHover = exports.neutralContrastFillFocusDelta = exports.neutralContrastFillFocus = exports.neutralContrastFillActiveDelta = exports.neutralContrastFillActive = exports.neutralBaseColor = exports.layerCornerRadius = exports.foregroundOnAccentRestLarge = exports.foregroundOnAccentRest = exports.foregroundOnAccentRecipe = exports.foregroundOnAccentLargeRecipe = exports.foregroundOnAccentHoverLarge = exports.foregroundOnAccentHover = exports.foregroundOnAccentFocusLarge = exports.foregroundOnAccentFocus = exports.foregroundOnAccentActiveLarge = exports.foregroundOnAccentActive = exports.fontWeight = exports.focusStrokeWidth = exports.focusStrokeOuterRecipe = exports.focusStrokeOuter = exports.focusStrokeInnerRecipe = exports.focusStrokeInner = exports.focusOutlineWidth = exports.fillColor = exports.elevatedCornerRadius = exports.disabledOpacity = exp

3756orts.direction = exports.designUnit = exports.density = exports.cornerRadius = exports.controlCornerRadius = exports.bodyFont = exports.baseLayerLuminance = exports.baseHorizontalSpacingMultiplier = exports.baseHeightMultiplier = exports.accentStrokeControlRest = exports.accentStrokeControlRecipe = exports.accentStrokeControlHover = exports.accentStrokeControlFocus = exports.accentStrokeControlActive = exports.accentPalette = exports.accentForegroundRestDelta = exports.accentForegroundRest = exports.accentForegroundRecipe = exports.accentForegroundHoverDelta = exports.accentForegroundHover = exports.accentForegroundFocusDelta = exports.accentForegroundFocus = exports.accentForegroundCutLarge = exports.accentForegroundCut = exports.accentForegroundActiveDelta = exports.accentForegroundActive = exports.accentFillRestDelta = exports.accentFillRest = exports.accentFillRecipe = exports.accentFillHoverDelta = exports.accentFillHover = exports.accentFillFocusDelta = exports.accentFillFocus = exports.accentFillActiveDelta = exports.accentFillActive = exports.accentBaseColor = void 0;
3757exports.neutralStrokeInputActive = exports.neutralStrokeHoverDelta = exports.neutralStrokeHover = exports.neutralStrokeFocusDelta = exports.neutralStrokeFocus = exports.neutralStrokeDividerRestDelta = exports.neutralStrokeDividerRest = exports.neutralStrokeDividerRecipe = exports.neutralStrokeControlRestDelta = exports.neutralStrokeControlRest = exports.neutralStrokeControlRecipe = exports.neutralStrokeControlHoverDelta = exports.neutralStrokeControlHover = exports.neutralStrokeControlFocusDelta = exports.neutralStrokeControlFocus = exports.neutralStrokeControlActiveDelta = exports.neutralStrokeControlActive = exports.neutralStrokeActiveDelta = exports.neutralStrokeActive = exports.neutralPalette = exports.neutralOutlineRest = exports.neutralOutlineHover = exports.neutralOutlineFocus = exports.neutralOutlineActive = exports.neutralLayerL4 = exports.neutralLayerL3 = exports.neutralLayerL2 = exports.neutralLayerL1 = exports.neutralLayerFloatingRecipe = exports.neutralLayerFloating = exports.neutralLayerCardContainerRecipe = exports.neutralLayerCardContainer = exports.neutralLayer4Recipe = exports.neutralLayer4 = exports.neutralLayer3Recipe = exports.neutralLayer3 = exports.neutralLayer2Recipe = exports.neutralLayer2 = exports.neutralLayer1Recipe = exports.neutralLayer1 = exports.neutralForegroundRest = exports.neutralForegroundRecipe = exports.neutralForegroundHover = exports.neutralForegroundHintRecipe = exports.neutralForegroundHint = exports.neutralForegroundFocus = exports.neutralForegroundActive = exports.neutralFocusInnerAccent = exports.neutralFocus = exports.neutralFillToggleRestDelta = exports.neutralFillToggleRest = exports.neutralFillToggleHoverDelta = exports.neutralFillToggleHover = exports.neutralFillToggleFocusDelta = exports.neutralFillToggleFocus = exports.neutralFillToggleActiveDelta = exports.neutralFillToggleActive = exports.neutralFillStrongRestDelta = exports.neutralFillStrongRest = exports.neutralFillStrongRecipe = exports.neutralFillStrongHoverDelta = exports.neutralFillStrongHover = exports.neutralFillStrongFocusDelta = exports.neutralFillStrongFocus = exports.neutralFillStrongActiveDelta = exports.neutralFillStrongActive = exports.neutralFillStealthRestDelta = exports.neutralFillStealthRest = exports.neutralFillStealthRecipe = exports.neutralFillStealthHoverDelta = exports.neutralFillStealthHover = exports.neutralFillStealthFocusDelta = exports.neutralFillStealthFocus = exports.neutralFillStealthActiveDelta = exports.neutralFillStealthActive = exports.neutralFillSecondaryRestDelta = exports.neutralFillSecondaryRest = exports.neutralFillSecondaryRecipe = exports.neutralFillSecondaryHoverDelta = exports.neutralFillSecondaryHover = exports.neutralFillSecondaryFocusDelta = exports.neutralFillSecondaryFocus = exports.neutralFillSecondaryActiveDelta = exports.neutralFillSecondaryActive = exports.neutralFillRestDelta = exports.neutralFillRest = exports.neutralFillRecipe = exports.neutralFillLayerRestDelta = exports.neutralFillLayerRest = exports.neutralFillLayerRecipe = exports.neutralFillLayerHoverDelta = exports.neutralFillLayerHover = exports.neutralFillLayerAltRestDelta = exports.neutralFillLayerAltRest = exports.neutralFillLayerAltRecipe = exports.neutralFillLayerActiveDelta = exports.neutralFillLayerActive = exports.neutralFillInverseRestDelta = exports.neutralFillInverseRest = exports.neutralFillInverseRecipe = exports.neutralFillInverseHoverDelta = exports.neutralFillInverseHover = exports.neutralFillInverseFocusDelta = exports.neutralFillInverseFocus = exports.neutralFillInverseActiveDelta = exports.neutralFillInverseActive = exports.neutralFillInputRestDelta = exports.neutralFillInputRest = exports.neutralFillInputRecipe = exports.neutralFillInputHoverDelta = exports.neutralFillInputHover = exports.neutralFillInputFocusDelta = exports.neutralFillInputFocus = exports.neutralFillInputAltRestDelta = exports.neutralFillInputAltRest = exports.neutralFillInputAltRecipe = exports.neutralFillInputAltHoverDelta = exports.neutralFillInputAltHover = exports.neutralFillInputAltFocusDelta = exports.neutralFillInputAltFocus = exports.neutralFillInputAltActiveDelta = exports.neutralFillInputAltActive = exports.neutralFillInputActiveDelta = exports.neutralFillInputActive = exports.neutralFillHoverDelta = exports.neutralFillHover = exports.neutralFillFocusDelta = exports.neutralFillFocus = exports.neutralFillCardDelta = exports.neutralFillCard = exports.neutralFillActiveDelta = exports.neutralFillActive = exports.neutralDividerRestDelta = exports.neutralDivider = exports.neutralContrastFillRestDelta = exports.neutralContrastFillRest = exports.neutralContrastFillHoverDelta = exports.neutralContrastFillHover = exports.neutralContrastFillFocusDelta = exports.neutralContrastFillFocus = exports.neutralContrastFillActiveDelta = exports.neutralContrastFillActive = exports.neutralBaseColor = exports.layerCornerRadius = exports.foregroundOnAccentRestLarge = exports.foregroundOnAccentRest = exports.foregroundOnAccentRecipe = exports.foregroundOnAccentLargeRecipe = exports.foregroundOnAccentHoverLarge = exports.foregroundOnAccentHover = exports.foregroundOnAccentFocusLarge = exports.foregroundOnAccentFocus = exports.foregroundOnAccentActiveLarge = exports.foregroundOnAccentActive = exports.fontWeight = exports.focusStrokeWidth = exports.focusStrokeOuterRecipe = exports.focusStrokeOuter = exports.focusStrokeInnerRecipe = exports.focusStrokeInner = exports.focusOutlineWidth = exports.fillColor = exports.elevatedCornerRadius = exports.disabledOpacity = exp

3757orts.direction = exports.designUnit = exports.density = exports.cornerRadius = exports.controlCornerRadius = exports.bodyFont = exports.baseLayerLuminance = exports.baseHorizontalSpacingMultiplier = exports.baseHeightMultiplier = exports.accentStrokeControlRest = exports.accentStrokeControlRecipe = exports.accentStrokeControlHover = exports.accentStrokeControlFocus = exports.accentStrokeControlActive = exports.accentPalette = exports.accentForegroundRestDelta = exports.accentForegroundRest = exports.accentForegroundRecipe = exports.accentForegroundHoverDelta = exports.accentForegroundHover = exports.accentForegroundFocusDelta = exports.accentForegroundFocus = exports.accentForegroundCutLarge = exports.accentForegroundCut = exports.accentForegroundActiveDelta = exports.accentForegroundActive = exports.accentFillRestDelta = exports.accentFillRest = exports.accentFillRecipe = exports.accentFillHoverDelta = exports.accentFillHover = exports.accentFillFocusDelta = exports.accentFillFocus = exports.accentFillActiveDelta = exports.accentFillActive = exports.accentBaseColor = void 0;
3758exports.typeRampPlus6LineHeight = exports.typeRampPlus6FontVariations = exports.typeRampPlus6FontSize = exports.typeRampPlus5LineHeight = exports.typeRampPlus5FontVariations = exports.typeRampPlus5FontSize = exports.typeRampPlus4LineHeight = exports.typeRampPlus4FontVariations = exports.typeRampPlus4FontSize = exports.typeRampPlus3LineHeight = exports.typeRampPlus3FontVariations = exports.typeRampPlus3FontSize = exports.typeRampPlus2LineHeight = exports.typeRampPlus2FontVariations = exports.typeRampPlus2FontSize = exports.typeRampPlus1LineHeight = exports.typeRampPlus1FontVariations = exports.typeRampPlus1FontSize = exports.typeRampMinus2LineHeight = exports.typeRampMinus2FontVariations = exports.typeRampMinus2FontSize = exports.typeRampMinus1LineHeight = exports.typeRampMinus1FontVariations = exports.typeRampMinus1FontSize = exports.typeRampBaseLineHeight = exports.typeRampBaseFontVariations = exports.typeRampBaseFontSize = exports.strokeWidth = exports.outlineWidth = exports.neutralStrokeStrongRest = exports.neutralStrokeStrongRecipe = exports.neutralStrokeStrongHoverDelta = exports.neutralStrokeStrongHover = exports.neutralStrokeStrongFocusDelta = exports.neutralStrokeStrongFocus = exports.neutralStrokeStrongActiveDelta = exports.neutralStrokeStrongActive = exports.neutralStrokeRestDelta = exports.neutralStrokeRest = exports.neutralStrokeRecipe = exports.neutralStrokeLayerRestDelta = exports.neutralStrokeLayerRest = exports.neutralStrokeLayerRecipe = exports.neutralStrokeLayerHoverDelta = exports.neutralStrokeLayerHover = exports.neutralStrokeLayerActiveDelta = exports.neutralStrokeLayerActive = exports.neutralStrokeInputRest = exports.neutralStrokeInputRecipe = exports.neutralStrokeInputHover = exports.neutralStrokeInputFocus = exports.neutralStrokeInputActive = exports.neutralStrokeHoverDelta = exports.neutralStrokeHover = exports.neutralStrokeFocusDelta = exports.neutralStrokeFocus = exports.neutralStrokeDividerRestDelta = exports.neutralStrokeDividerRest = exports.neutralStrokeDividerRecipe = exports.neutralStrokeControlRestDelta = exports.neutralStrokeControlRest = exports.neutralStrokeControlRecipe = exports.neutralStrokeControlHoverDelta = exports.neutralStrokeControlHover = exports.neutralStrokeControlFocusDelta = exports.neutralStrokeControlFocus = exports.neutralStrokeControlActiveDelta = exports.neutralStrokeControlActive = exports.neutralStrokeActiveDelta = exports.neutralStrokeActive = exports.neutralPalette = exports.neutralOutlineRest = exports.neutralOutlineHover = exports.neutralOutlineFocus = exports.neutralOutlineActive = exports.neutralLayerL4 = exports.neutralLayerL3 = exports.neutralLayerL2 = exports.neutralLayerL1 = exports.neutralLayerFloatingRecipe = exports.neutralLayerFloating = exports.neutralLayerCardContainerRecipe = exports.neutralLayerCardContainer = exports.neutralLayer4Recipe = exports.neutralLayer4 = exports.neutralLayer3Recipe = exports.neutralLayer3 = exports.neutralLayer2Recipe = exports.neutralLayer2 = exports.neutralLayer1Recipe = exports.neutralLayer1 = exp

3758orts.neutralForegroundRest = exports.neutralForegroundRecipe = exports.neutralForegroundHover = exports.neutralForegroundHintRecipe = exports.neutralForegroundHint = exports.neutralForegroundFocus = exports.neutralForegroundActive = exports.neutralFocusInnerAccent = exports.neutralFocus = exports.neutralFillToggleRestDelta = exports.neutralFillToggleRest = exports.neutralFillToggleHoverDelta = exports.neutralFillToggleHover = exports.neutralFillToggleFocusDelta = exports.neutralFillToggleFocus = exports.neutralFillToggleActiveDelta = exports.neutralFillToggleActive = exports.neutralFillStrongRestDelta = exports.neutralFillStrongRest = exports.neutralFillStrongRecipe = exports.neutralFillStrongHoverDelta = exports.neutralFillStrongHover = exports.neutralFillStrongFocusDelta = exports.neutralFillStrongFocus = exports.neutralFillStrongActiveDelta = exports.neutralFillStrongActive = exports.neutralFillStealthRestDelta = exports.neutralFillStealthRest = exports.neutralFillStealthRecipe = exports.neutralFillStealthHoverDelta = exports.neutralFillStealthHover = exports.neutralFillStealthFocusDelta = exports.neutralFillStealthFocus = exports.neutralFillStealthActiveDelta = exports.neutralFillStealthActive = exports.neutralFillSecondaryRestDelta = exports.neutralFillSecondaryRest = exports.neutralFillSecondaryRecipe = exports.neutralFillSecondaryHoverDelta = exports.neutralFillSecondaryHover = exports.neutralFillSecondaryFocusDelta = exports.neutralFillSecondaryFocus = exports.neutralFillSecondaryActiveDelta = exports.neutralFillSecondaryActive = exports.neutralFillRestDelta = exports.neutralFillRest = exports.neutralFillRecipe = exports.neutralFillLayerRestDelta = exports.neutralFillLayerRest = exports.neutralFillLayerRecipe = exports.neutralFillLayerHoverDelta = exports.neutralFillLayerHover = exports.neutralFillLayerAltRestDelta = exports.neutralFillLayerAltRest = exports.neutralFillLayerAltRecipe = exports.neutralFillLayerActiveDelta = exports.neutralFillLayerActive = exports.neutralFillInverseRestDelta = exports.neutralFillInverseRest = exports.neutralFillInverseRecipe = exports.neutralFillInverseHoverDelta = exports.neutralFillInverseHover = exports.neutralFillInverseFocusDelta = exports.neutralFillInverseFocus = exports.neutralFillInverseActiveDelta = exports.neutralFillInverseActive = exports.neutralFillInputRestDelta = exports.neutralFillInputRest = exports.neutralFillInputRecipe = exports.neutralFillInputHoverDelta = exports.neutralFillInputHover = exports.neutralFillInputFocusDelta = exports.neutralFillInputFocus = exports.neutralFillInputAltRestDelta = exports.neutralFillInputAltRest = exports.neutralFillInputAltRecipe = exports.neutralFillInputAltHoverDelta = exports.neutralFillInputAltHover = exports.neutralFillInputAltFocusDelta = exports.neutralFillInputAltFocus = exports.neutralFillInputAltActiveDelta = exports.neutralFillInputAltActive = exports.neutralFillInputActiveDelta = exports.neutralFillInputActive = exports.neutralFillHoverDelta = exports.neutralFillHover = exports.neutralFillFocusDelta = exports.neutralFillFocus = exports.neutralFillCardDelta = exports.neutralFillCard = exports.neutralFillActiveDelta = exports.neutralFillActive = exports.neutralDividerRestDelta = exports.neutralDivider = exports.neutralContrastFillRestDelta = exports.neutralContrastFillRest = exports.neutralContrastFillHoverDelta = exports.neutralContrastFillHover = exports.neutralContrastFillFocusDelta = exports.neutralContrastFillFocus = exports.neutralContrastFillActiveDelta = exports.neutralContrastFillActive = exports.neutralBaseColor = exports.layerCornerRadius = exports.foregroundOnAccentRestLarge = exports.foregroundOnAccentRest = exports.foregroundOnAccentRecipe = exports.foregroundOnAccentLargeRecipe = exports.foregroundOnAccentHoverLarge = exports.foregroundOnAccentHover = exports.foregroundOnAccentFocusLarge = exports.foregroundOnAccentFocus = exports.foregroundOnAccentActiveLarge = exports.foregroundOnAccentActive = exports.fontWeight = exports.focusStrokeWidth = exports.focusStrokeOuterRecipe = exports.focusStrokeOuter = exports.focusStrokeInnerRecipe = exports.focusStrokeInner = exports.focusOutlineWidth = exports.fillColor = exports.elevatedCornerRadius = exports.disabledOpacity = exp

3758orts.direction = exports.designUnit = exports.density = exports.cornerRadius = exports.controlCornerRadius = exports.bodyFont = exports.baseLayerLuminance = exports.baseHorizontalSpacingMultiplier = exports.baseHeightMultiplier = exports.accentStrokeControlRest = exports.accentStrokeControlRecipe = exports.accentStrokeControlHover = exports.accentStrokeControlFocus = exports.accentStrokeControlActive = exports.accentPalette = exports.accentForegroundRestDelta = exports.accentForegroundRest = exports.accentForegroundRecipe = exports.accentForegroundHoverDelta = exports.accentForegroundHover = exports.accentForegroundFocusDelta = exports.accentForegroundFocus = exports.accentForegroundCutLarge = exports.accentForegroundCut = exports.accentForegroundActiveDelta = exports.accentForegroundActive = exports.accentFillRestDelta = exports.accentFillRest = exports.accentFillRecipe = exports.accentFillHoverDelta = exports.accentFillHover = exports.accentFillFocusDelta = exports.accentFillFocus = exports.accentFillActiveDelta = exports.accentFillActive = exports.accentBaseColor = void 0;
3759
3760var _fastFoundation = require("@microsoft/fast-foundation");
3761
3762var _fastWebUtilities = require("@microsoft/fast-web-utilities");
3763
3764var _palette = require("./color/palette");
3765
3766var _foregroundOnAccent = require("./color/recipes/foreground-on-accent");
3767
3768var _gradientShadowStroke = require("./color/recipes/gradient-shadow-stroke");
3769
3770var _underlineStroke = require("./color/recipes/underline-stroke");
3771
3772var _contrastSwatch = require("./color/recipes/contrast-swatch");
3773
3774var _contrastAndDeltaSwatchSet = require("./color/recipes/contrast-and-delta-swatch-set");
3775
3776var _deltaSwatch = require("./color/recipes/delta-swatch");
3777
3778var _deltaSwatchSet = require("./color/recipes/delta-swatch-set");
3779
3780var _focusStroke = require("./color/recipes/focus-stroke");
3781
3782var _neutralLayerFloating = require("./color/recipes/neutral-layer-floating");
3783
3784var _neutralLayer = require("./color/recipes/neutral-layer-1");
3785
3786var _neutralLayer2 = require("./color/recipes/neutral-layer-2");
3787
3788var _neutralLayer3 = require("./color/recipes/neutral-layer-3");
3789
3790var _neutralLayer4 = require("./color/recipes/neutral-layer-4");
3791
3792var _colorConstants = require("./color/utilities/color-constants");
3793
3794var _baseLayerLuminance = require("./color/utilities/base-layer-luminance");
3795
3796var _directionByIsDark = require("./color/utilities/direction-by-is-dark");
3797
3798var _typeRamp = require("./utilities/type-ramp");
3799
3800const {
3801  create
3802} = _fastFoundation.DesignToken;
3803
3804function createNonCss(name) {
3805  return _fastFoundation.DesignToken.create({
3806    name,
3807    cssCustomPropertyName: null
3808  });
3809} // General tokens
3810
3811/** @public */
3812
3813
3814const direction = create('direction').withDefault(_fastWebUtilities.Direction.ltr);
3815/** @public */
3816
3817exports.direction = direction;
3818const disabledOpacity = create('disabled-opacity').withDefault(0.3); // Density tokens
3819
3820/** @public */
3821
3822exports.disabledOpacity = disabledOpacity;
3823const baseHeightMultiplier = create('base-height-multiplier').withDefault(8);
3824/** @public */
3825
3826exports.baseHeightMultiplier = baseHeightMultiplier;
3827const baseHorizontalSpacingMultiplier = create('base-horizontal-spacing-multiplier').withDefault(3);
3828/** @public */
3829
3830exports.baseHorizontalSpacingMultiplier = baseHorizontalSpacingMultiplier;
3831const density = create('density').withDefault(0);
3832/** @public */
3833
3834exports.density = density;
3835const designUnit = create('design-unit').withDefault(4); // Appearance tokens
3836
3837/** @public */
3838
3839exports.designUnit = designUnit;
3840const controlCornerRadius = create('control-corner-radius').withDefault(4);
3841/** @public */
3842
3843exports.controlCornerRadius = controlCornerRadius;
3844const layerCornerRadius = create('layer-corner-radius').withDefault(8);
3845/** @public */
3846
3847exports.layerCornerRadius = layerCornerRadius;
3848const strokeWidth = create('stroke-width').withDefault(1);
3849/** @public */
3850
3851exports.strokeWidth = strokeWidth;
3852const focusStrokeWidth = create('focus-stroke-width').withDefault(2); // Typography values
3853
3854/** @public */
3855
3856exports.focusStrokeWidth = focusStrokeWidth;
3857const bodyFont = create('body-font').withDefault('"Segoe UI Variable", "Segoe UI", sans-serif');
3858/** @public */
3859
3860exports.bodyFont = bodyFont;
3861const fontWeight = create('font-weight').withDefault(_typeRamp.StandardFontWeight.Normal);

3862exports.fontWeight = fontWeight;
3863
3864function fontVariations(sizeToken) {
3865  return element => {
3866    const size = sizeToken.getValueFor(element);
3867    const weight = fontWeight.getValueFor(element);
3868
3869    if (size.endsWith('px')) {
3870      const px = Number.parseFloat(size.replace('px', ''));
3871
3872      if (px <= 12) {
3873        return `"wght" ${weight}, "opsz" 8`;
3874      } else if (px > 24) {
3875        return `"wght" ${weight}, "opsz" 36`;
3876      }
3877    }
3878
3879    return `"wght" ${weight}, "opsz" 10.5`;
3880  };
3881}
3882/** @public */
3883
3884
3885const typeRampBaseFontSize = create('type-ramp-base-font-size').withDefault('14px');
3886/** @public */
3887
3888exports.typeRampBaseFontSize = typeRampBaseFontSize;
3889const typeRampBaseLineHeight = create('type-ramp-base-line-height').withDefault('20px');
3890/** @public */
3891
3892exports.typeRampBaseLineHeight = typeRampBaseLineHeight;
3893const typeRampBaseFontVariations = create('type-ramp-base-font-variations').withDefault(fontVariations(typeRampBaseFontSize));
3894/** @public */
3895
3896exports.typeRampBaseFontVariations = typeRampBaseFontVariations;
3897const typeRampMinus1FontSize = create('type-ramp-minus-1-font-size').withDefault('12px');
3898/** @public */
3899
3900exports.typeRampMinus1FontSize = typeRampMinus1FontSize;
3901const typeRampMinus1LineHeight = create('type-ramp-minus-1-line-height').withDefault('16px');
3902/** @public */
3903
3904exports.typeRampMinus1LineHeight = typeRampMinus1LineHeight;
3905const typeRampMinus1FontVariations = create('type-ramp-minus-1-font-variations').withDefault(fontVariations(typeRampMinus1FontSize));
3906/** @public */
3907
3908exports.typeRampMinus1FontVariations = typeRampMinus1FontVariations;
3909const typeRampMinus2FontSize = create('type-ramp-minus-2-font-size').withDefault('10px');
3910/** @public */
3911
3912exports.typeRampMinus2FontSize = typeRampMinus2FontSize;
3913const typeRampMinus2LineHeight = create('type-ramp-minus-2-line-height').withDefault('14px');
3914/** @public */
3915
3916exports.typeRampMinus2LineHeight = typeRampMinus2LineHeight;
3917const typeRampMinus2FontVariations = create('type-ramp-minus-2-font-variations').withDefault(fontVariations(typeRampMinus2FontSize));
3918/** @public */
3919
3920exports.typeRampMinus2FontVariations = typeRampMinus2FontVariations;
3921const typeRampPlus1FontSize = create('type-ramp-plus-1-font-size').withDefault('16px');
3922/** @public */
3923
3924exports.typeRampPlus1FontSize = typeRampPlus1FontSize;
3925const typeRampPlus1LineHeight = create('type-ramp-plus-1-line-height').withDefault('22px');
3926/** @public */
3927
3928exports.typeRampPlus1LineHeight = typeRampPlus1LineHeight;
3929const typeRampPlus1FontVariations = create('type-ramp-plus-1-font-variations').withDefault(fontVariations(typeRampPlus1FontSize));
3930/** @public */
3931
3932exports.typeRampPlus1FontVariations = typeRampPlus1FontVariations;
3933const typeRampPlus2FontSize = create('type-ramp-plus-2-font-size').withDefault('20px');
3934/** @public */
3935
3936exports.typeRampPlus2FontSize = typeRampPlus2FontSize;
3937const typeRampPlus2LineHeight = create('type-ramp-plus-2-line-height').withDefault('26px');
3938/** @public */
3939
3940exports.typeRampPlus2LineHeight = typeRampPlus2LineHeight;
3941const typeRampPlus2FontVariations = create('type-ramp-plus-2-font-variations').withDefault(fontVariations(typeRampPlus2FontSize));
3942/** @public */
3943
3944exports.typeRampPlus2FontVariations = typeRampPlus2FontVariations;
3945const typeRampPlus3FontSize = create('type-ramp-plus-3-font-size').withDefault('24px');
3946/** @public */
3947
3948exports.typeRampPlus3FontSize = typeRampPlus3FontSize;
3949const typeRampPlus3LineHeight = create('type-ramp-plus-3-line-height').withDefault('32px');
3950/** @public */
3951
3952exports.typeRampPlus3LineHeight = typeRampPlus3LineHeight;
3953const typeRampPlus3FontVariations = create('type-ramp-plus-3-font-variations').withDefault(fontVariations(typeRampPlus3FontSize));
3954/** @public */
3955
3956exports.typeRampPlus3FontVariations = typeRampPlus3FontVariations;
3957const typeRampPlus4FontSize = create('type-ramp-plus-4-font-size').withDefault('28px');
3958/** @public */
3959
3960exports.typeRampPlus4FontSize = typeRampPlus4FontSize;
3961const typeRampPlus4LineHeight = create('type-ramp-plus-4-line-height').withDefault('36px');
3962/** @public */
3963
3964exports.typeRampPlus4LineHeight = typeRampPlus4LineHeight;
3965const typeRampPlus4FontVariations = create('type-ramp-plus-4-font-variations').withDefault(fontVariations(typeRampPlus4FontSize));
3966/** @public */
3967
3968exports.typeRampPlus4FontVariations = typeRampPlus4FontVariations;
3969const typeRampPlus5FontSize = create('type-ramp-plus-5-font-size').withDefault('32px');
3970/** @public */
3971
3972exports.typeRampPlus5FontSize = typeRampPlus5FontSize;
3973const typeRampPlus5LineHeight = create('type-ramp-plus-5-line-height').withDefault('40px');
3974/** @public */
3975
3976exports.typeRampPlus5LineHeight = typeRampPlus5LineHeight;
3977const typeRampPlus5FontVariations = create('type-ramp-plus-5-font-variations').withDefault(fontVariations(typeRampPlus5FontSize));
3978/** @public */
3979
3980exports.typeRampPlus5FontVariations = typeRampPlus5FontVariations;
3981const typeRampPlus6FontSize = create('type-ramp-plus-6-font-size').withDefault('40px');
3982/** @public */
3983
3984exports.typeRampPlus6FontSize = typeRampPlus6FontSize;
3985const typeRampPlus6LineHeight = create('type-ramp-plus-6-line-height').withDefault('52px');
3986/** @public */
3987
3988exports.typeRampPlus6LineHeight = typeRampPlus6LineHeight;
3989const typeRampPlus6FontVariations = create('type-ramp-plus-6-font-variations').withDefault(fontVariations(typeRampPlus6FontSize)); // Color recipe values
3990

3991/** @public */
3992
3993exports.typeRampPlus6FontVariations = typeRampPlus6FontVariations;
3994const baseLayerLuminance = create('base-layer-luminance').withDefault(_baseLayerLuminance.StandardLuminance.LightMode);
3995/** @public */
3996
3997exports.baseLayerLuminance = baseLayerLuminance;
3998const accentFillRestDelta = createNonCss('accent-fill-rest-delta').withDefault(0);
3999/** @public */
4000
4001exports.accentFillRestDelta = accentFillRestDelta;
4002const accentFillHoverDelta = createNonCss('accent-fill-hover-delta').withDefault(-2);
4003/** @public */
4004
4005exports.accentFillHoverDelta = accentFillHoverDelta;
4006const accentFillActiveDelta = createNonCss('accent-fill-active-delta').withDefault(-5);
4007/** @public */
4008
4009exports.accentFillActiveDelta = accentFillActiveDelta;
4010const accentFillFocusDelta = createNonCss('accent-fill-focus-delta').withDefault(0);
4011/** @public */
4012
4013exports.accentFillFocusDelta = accentFillFocusDelta;
4014const accentForegroundRestDelta = createNonCss('accent-foreground-rest-delta').withDefault(0);
4015/** @public */
4016
4017exports.accentForegroundRestDelta = accentForegroundRestDelta;
4018const accentForegroundHoverDelta = createNonCss('accent-foreground-hover-delta').withDefault(3);
4019/** @public */
4020
4021exports.accentForegroundHoverDelta = accentForegroundHoverDelta;
4022const accentForegroundActiveDelta = createNonCss('accent-foreground-active-delta').withDefault(-8);
4023/** @public */
4024
4025exports.accentForegroundActiveDelta = accentForegroundActiveDelta;
4026const accentForegroundFocusDelta = createNonCss('accent-foreground-focus-delta').withDefault(0);
4027/** @public */
4028
4029exports.accentForegroundFocusDelta = accentForegroundFocusDelta;
4030const neutralFillRestDelta = createNonCss('neutral-fill-rest-delta').withDefault(-1);
4031/** @public */
4032
4033exports.neutralFillRestDelta = neutralFillRestDelta;
4034const neutralFillHoverDelta = createNonCss('neutral-fill-hover-delta').withDefault(1);
4035/** @public */
4036
4037exports.neutralFillHoverDelta = neutralFillHoverDelta;
4038const neutralFillActiveDelta = createNonCss('neutral-fill-active-delta').withDefault(0);
4039/** @public */
4040
4041exports.neutralFillActiveDelta = neutralFillActiveDelta;
4042const neutralFillFocusDelta = createNonCss('neutral-fill-focus-delta').withDefault(0);
4043/** @public */
4044
4045exports.neutralFillFocusDelta = neutralFillFocusDelta;
4046const neutralFillInputRestDelta = createNonCss('neutral-fill-input-rest-delta').withDefault(-1);
4047/** @public */
4048
4049exports.neutralFillInputRestDelta = neutralFillInputRestDelta;
4050const neutralFillInputHoverDelta = createNonCss('neutral-fill-input-hover-delta').withDefault(1);
4051/** @public */
4052
4053exports.neutralFillInputHoverDelta = neutralFillInputHoverDelta;
4054const neutralFillInputActiveDelta = createNonCss('neutral-fill-input-active-delta').withDefault(0);
4055/** @public */
4056
4057exports.neutralFillInputActiveDelta = neutralFillInputActiveDelta;
4058const neutralFillInputFocusDelta = createNonCss('neutral-fill-input-focus-delta').withDefault(-2);
4059/** @public */
4060
4061exports.neutralFillInputFocusDelta = neutralFillInputFocusDelta;
4062const neutralFillInputAltRestDelta = createNonCss('neutral-fill-input-alt-rest-delta').withDefault(2);
4063/** @public */
4064
4065exports.neutralFillInputAltRestDelta = neutralFillInputAltRestDelta;
4066const neutralFillInputAltHoverDelta = createNonCss('neutral-fill-input-alt-hover-delta').withDefault(4);
4067/** @public */
4068
4069exports.neutralFillInputAltHoverDelta = neutralFillInputAltHoverDelta;
4070const neutralFillInputAltActiveDelta = createNonCss('neutral-fill-input-alt-active-delta').withDefault(6);
4071/** @public */
4072
4073exports.neutralFillInputAltActiveDelta = neutralFillInputAltActiveDelta;
4074const neutralFillInputAltFocusDelta = createNonCss('neutral-fill-input-alt-focus-delta').withDefault(2);
4075/** @public */
4076
4077exports.neutralFillInputAltFocusDelta = neutralFillInputAltFocusDelta;
4078const neutralFillLayerRestDelta = createNonCss('neutral-fill-layer-rest-delta').withDefault(-2);
4079/** @public */
4080
4081exports.neutralFillLayerRestDelta = neutralFillLayerRestDelta;
4082const neutralFillLayerHoverDelta = createNonCss('neutral-fill-layer-hover-delta').withDefault(-3);
4083/** @public */
4084
4085exports.neutralFillLayerHoverDelta = neutralFillLayerHoverDelta;
4086const neutralFillLayerActiveDelta = createNonCss('neutral-fill-layer

4086-active-delta').withDefault(-3);
4087/** @public */
4088
4089exports.neutralFillLayerActiveDelta = neutralFillLayerActiveDelta;
4090const neutralFillLayerAltRestDelta = createNonCss('neutral-fill-layer-alt-rest-delta').withDefault(-1);
4091/** @public */
4092
4093exports.neutralFillLayerAltRestDelta = neutralFillLayerAltRestDelta;
4094const neutralFillSecondaryRestDelta = createNonCss('neutral-fill-secondary-rest-delta').withDefault(3);
4095/** @public */
4096
4097exports.neutralFillSecondaryRestDelta = neutralFillSecondaryRestDelta;
4098const neutralFillSecondaryHoverDelta = createNonCss('neutral-fill-secondary-hover-delta').withDefault(2);
4099/** @public */
4100
4101exports.neutralFillSecondaryHoverDelta = neutralFillSecondaryHoverDelta;
4102const neutralFillSecondaryActiveDelta = createNonCss('neutral-fill-secondary-active-delta').withDefault(1);
4103/** @public */
4104
4105exports.neutralFillSecondaryActiveDelta = neutralFillSecondaryActiveDelta;
4106const neutralFillSecondaryFocusDelta = createNonCss('neutral-fill-secondary-focus-delta').withDefault(3);
4107/** @public */
4108
4109exports.neutralFillSecondaryFocusDelta = neutralFillSecondaryFocusDelta;
4110const neutralFillStealthRestDelta = createNonCss('neutral-fill-stealth-rest-delta').withDefault(0);
4111/** @public */
4112
4113exports.neutralFillStealthRestDelta = neutralFillStealthRestDelta;
4114const neutralFillStealthHoverDelta = createNonCss('neutral-fill-stealth-hover-delta').withDefault(3);
4115/** @public */
4116
4117exports.neutralFillStealthHoverDelta = neutralFillStealthHoverDelta;
4118const neutralFillStealthActiveDelta = createNonCss('neutral-fill-stealth-active-delta').withDefault(2);
4119/** @public */
4120
4121exports.neutralFillStealthActiveDelta = neutralFillStealthActiveDelta;
4122const neutralFillStealthFocusDelta = createNonCss('neutral-fill-stealth-focus-delta').withDefault(0);
4123/** @public */
4124
4125exports.neutralFillStealthFocusDelta = neutralFillStealthFocusDelta;
4126const neutralFillStrongRestDelta = createNonCss('neutral-fill-strong-rest-delta').withDefault(0);
4127/** @public */
4128
4129exports.neutralFillStrongRestDelta = neutralFillStrongRestDelta;
4130const neutralFillStrongHoverDelta = createNonCss('neutral-fill-strong-hover-delta').withDefault(8);
4131/** @public */
4132
4133exports.neutralFillStrongHoverDelta = neutralFillStrongHoverDelta;
4134const neutralFillStrongActiveDelta = createNonCss('neutral-fill-strong-active-delta').withDefault(-5);
4135/** @public */
4136
4137exports.neutralFillStrongActiveDelta = neutralFillStrongActiveDelta;
4138const neutralFillStrongFocusDelta = createNonCss('neutral-fill-strong-focus-delta').withDefault(0);
4139/** @public */
4140
4141exports.neutralFillStrongFocusDelta = neutralFillStrongFocusDelta;
4142const neutralStrokeRestDelta = createNonCss('neutral-stroke-rest-delta').withDefault(8);
4143/** @public */
4144
4145exports.neutralStrokeRestDelta = neutralStrokeRestDelta;
4146const neutralStrokeHoverDelta = createNonCss('neutral-stroke-hover-delta').withDefault(12);
4147/** @public */
4148
4149exports.neutralStrokeHoverDelta = neutralStrokeHoverDelta;
4150const neutralStrokeActiveDelta = createNonCss('neutral-stroke-active-delta').withDefault(6);
4151/** @public */
4152
4153exports.neutralStrokeActiveDelta = neutralStrokeActiveDelta;
4154const neutralStrokeFocusDelta = createNonCss('neutral-stroke-focus-delta').withDefault(8);
4155/** @public */
4156
4157exports.neutralStrokeFocusDelta = neutralStrokeFocusDelta;
4158const neutralStrokeControlRestDelta = createNonCss('neutral-stroke-control-rest-delta').withDefault(3);
4159/** @public */
4160
4161exports.neutralStrokeControlRestDelta = neutralStrokeControlRestDelta;
4162const neutralStrokeControlHoverDelta = createNonCss('neutral-stroke-control-hover-delta').withDefault(5);
4163/** @public */
4164
4165exports.neutralStrokeControlHoverDelta = neutralStrokeControlHoverDelta;
4166const neutralStrokeControlActiveDelta = createNonCss('neutral-stroke-control-active-delta').withDefault(5);
4167/** @public */
4168
4169exports.neutralStrokeControlActiveDelta = neutralStrokeControlActiveDelta;
4170const neutralStrokeControlFocusDelta = createNonCss('neutral-stroke-control-focus-delta').withDefault(5);
4171/** @public */
4172
4173exports.neutralStrokeControlFocusDelta = neutralStrokeControlFocusDelta;
4174const neutralStrokeDividerRestDelta = createNonCss('neutral-stroke-divider-rest-delta').withDefault(4);
4175/** @public */
4176
4177exports.neutralStrokeDividerRestDelta = neutralStrokeDividerRestDelta;
4178const neutralStrokeLayerRestDelta = createNonCss('neutral-stroke-layer-rest-delta').withDefault(3);
4179/** @public */
4180
4181exports.neutralStrokeLayerRestDelta = neutralStrokeLayerRestDelta;
4182const neutralStrokeLayerHoverDelta = createNonCss('neutral-stroke-layer-hover-delta').withDefault(3);
4183/** @public */
4184
4185exports.neutralStrokeLayerHoverDelta = neutralStrokeLayerHoverDelta;
4186const neutralStrokeLayerActiveDelta = createNonCss('neutral-stroke-layer-active-delta').withDefault(3);
4187/** @public */
4188
4189exports.neutralStrokeLayerActiveDelta = neutralStrokeLayerActiveDelta;
4190const neutralStrokeStrongHoverDelta = createNonCss('neutral-stroke-strong-hover-delta').withDefault(0);
4191/** @public */
4192
4193exports.neutralStrokeStrongHoverDelta = neutralStrokeStrongHoverDelta;
4194const neutralStrokeStrongActiveDelta = createNonCss('neutral-stroke-strong-active-delta').withDefault(0);
4195/** @public */
4196
4197exports.neutralStrokeStrongActiveDelta = neutralStrokeStrongActiveDelta;
4198const neutralStrokeStrongFocusDelta = createNonCss('neutral-stroke-strong-focus-delta').withDefault(0); // Color recipes
4199
4200/** @public */
4201
4202exports.neutralStrokeStrongFocusDelta = neutralStrokeStrongFocusDelta;
4203const neutralBaseColor = create('neutral-base-color').withDefault(_colorConstants.middleGrey);
4204/** @public */
4205
4206exports.neutralBaseColor = neutralBaseColor;
4207const neutralPalette = createNonCss('neutral-palette').withDefault(element => _palette.PaletteRGB.from(neutralBaseColor.getValueFor(element)));
4208/** @public */
4209
4210exports.neutralPalette = neutralPalette;
4211const accentBaseColor = create('accent-base-color').withDefault(_colorConstants.accentBase);
4212/** @public */
4213
4214exports.accentBaseColor = accentBaseColor;
4215const accentPalette = createNonCss('accent-palette').withDefault(element => _palette.PaletteRGB.from(accentBaseColor.getValueFor(element))); // Neutral Layer Card Container
4216
4217/** @public */
4218
4219exports.accentPalette = accentPalette;
4220const neutralLayerCardContainerRecipe = createNonCss('neutral-layer-card-container-recipe').withDefault({
4221  evaluate: element => (0, _neutralLayer2.neutralLayer2)(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element))
4222});
4223/** @public */
4224
4225exports.neutralLayerCardContainerRecipe = neutralLayerCardContainerRecipe;
4226const neutralLayerCardContainer = create('neutral-layer-card-container').withDefault(element => neutralLayerCardContainerRecipe.getValueFor(element).evaluate(element)); // Neutral Layer Floating
4227
4228/** @public */
4229
4230exports.neutralLayerCardContainer = neutralLayerCardContainer;
4231const neutralLayerFloatingRecipe = createNonCss('neutral-layer-floating-recipe').withDefault({
4232  evaluate: element => (0, _neutralLayerFloating.neutralLayerFloating)(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element))
4233});
4234/** @public */
4235
4236exports.neutralLayerFloatingRecipe = neutralLayerFloatingRecipe;
4237const neutralLayerFloating = create('neutral-layer-floating').withDefault(element => neutralLayerFloatingRecipe.getValueFor(element).evaluate(element)); // Neutral Layer 1
4238
4239/** @public */
4240
4241exports.neutralLayerFloating = neutralLayerFloating;
4242const neutralLayer1Recipe = createNonCss('neutral-layer-1-recipe').withDefault({
4243  evaluate: element => (0, _neutralLayer.neutralLayer1)(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element))
4244});
4245/** @public */
4246
4247exports.neutralLayer1Recipe = neutralLayer1Recipe;
4248const neutralLayer1 = create('neutral-layer-1').withDefault(element => neutralLayer1Recipe.getValueFor(element).evaluate(element)); // Neutral Layer 2
4249
4250/** @public */
4251
4252exports.neutralLayer1 = neutralLayer1;
4253const neutralLayer2Recipe = createNonCss('neutral-layer-2-recipe').withDefault({
4254  evaluate: element => (0, _neutralLayer2.neutralLayer2)(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element))
4255});
4256/** @public */
4257
4258exports.neutralLayer2Recipe = neutralLayer2Recipe;
4259const neutralLayer2 = create('neutral-layer-2').withDefault(element => neutralLayer2Recipe.getValueFor(element).evaluate(element)); // Neutral Layer 3
4260
4261/** @public */
4262
4263exports.neutralLayer2 = neutralLayer2;
4264const neutralLayer3Recipe = createNonCss('neutral-layer-3-recipe').withDefault({
4265  evaluate: element => (0, _neutralLayer3.neutralLayer3)(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element))
4266});
4267/** @public */
4268
4269exports.neutralLayer3Recipe = neutralLayer3Recipe;
4270const neutralLayer3 = create('neutral-layer-3').withDefault(element => neutralLayer3Recipe.getValueFor(element).evaluate(element)); // Neutral Layer 4
4271
4272/** @public */
4273
4274exports.neutralLayer3 = neutralLayer3;
4275const neutralLayer4Recipe = createNonCss('neutral-layer-4-recipe').withDefault({
4276  evaluate: element => (0, _neutralLayer4.neutralLayer4)(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element))
4277});
4278/** @public */
4279
4280exports.neutralLayer4Recipe = neutralLayer4Recipe;
4281const neutralLayer4 = create('neutral-layer-4').withDefault(element => neutralLayer4Recipe.getValueFor(element).evaluate(element));
4282/** @public */
4283
4284exports.neutralLayer4 = neutralLayer4;
4285const fillColor = create('fill-color').withDefault(element => neutralLayer1.getValueFor(element));
4286exports.fillColor = fillColor;
4287var ContrastTarget;
4288
4289(function (ContrastTarget) {

4290  ContrastTarget[ContrastTarget["normal"] = 4.5] = "normal";
4291  ContrastTarget[ContrastTarget["large"] = 3] = "large";
4292})(ContrastTarget || (ContrastTarget = {})); // Accent Fill
4293
4294/** @public */
4295
4296
4297const accentFillRecipe = createNonCss('accent-fill-recipe').withDefault({
4298  evaluate: (element, reference) => (0, _contrastAndDeltaSwatchSet.contrastAndDeltaSwatchSetByLuminance)(accentPalette.getValueFor(element), reference || fillColor.getValueFor(element), 5, accentFillRestDelta.getValueFor(element), accentFillHoverDelta.getValueFor(element), accentFillActiveDelta.getValueFor(element), accentFillFocusDelta.getValueFor(element), undefined, 8, accentFillRestDelta.getValueFor(element), accentFillHoverDelta.getValueFor(element), accentFillActiveDelta.getValueFor(element), accentFillFocusDelta.getValueFor(element), undefined)
4299});
4300/** @public */
4301
4302exports.accentFillRecipe = accentFillRecipe;
4303const accentFillRest = create('accent-fill-rest').withDefault(element => {
4304  return accentFillRecipe.getValueFor(element).evaluate(element).rest;
4305});
4306/** @public */
4307
4308exports.accentFillRest = accentFillRest;
4309const accentFillHover = create('accent-fill-hover').withDefault(element => {
4310  return accentFillRecipe.getValueFor(element).evaluate(element).hover;
4311});
4312/** @public */
4313
4314exports.accentFillHover = accentFillHover;
4315const accentFillActive = create('accent-fill-active').withDefault(element => {
4316  return accentFillRecipe.getValueFor(element).evaluate(element).active;
4317});
4318/** @public */
4319
4320exports.accentFillActive = accentFillActive;
4321const accentFillFocus = create('accent-fill-focus').withDefault(element => {
4322  return accentFillRecipe.getValueFor(element).evaluate(element).focus;
4323}); // Foreground On Accent
4324
4325/** @public */
4326
4327exports.accentFillFocus = accentFillFocus;
4328const foregroundOnAccentRecipe = createNonCss('foreground-on-accent-recipe').withDefault({
4329  evaluate: element => (0, _foregroundOnAccent.foregroundOnAccentSet)(accentFillRest.getValueFor(element), accentFillHover.getValueFor(element), accentFillActive.getValueFor(element), accentFillFocus.getValueFor(element), ContrastTarget.normal)
4330});
4331/** @public */
4332
4333exports.foregroundOnAccentRecipe = foregroundOnAccentRecipe;
4334const foregroundOnAccentRest = create('foreground-on-accent-rest').withDefault(element => foregroundOnAccentRecipe.getValueFor(element).evaluate(element).rest);
4335/** @public */
4336
4337exports.foregroundOnAccentRest = foregroundOnAccentRest;
4338const foregroundOnAccentHover = create('foreground-on-accent-hover').withDefault(element => foregroundOnAccentRecipe.getValueFor(element).evaluate(element).hover);
4339/** @public */
4340
4341exports.foregroundOnAccentHover = foregroundOnAccentHover;
4342const foregroundOnAccentActive = create('foreground-on-accent-active').withDefault(element => foregroundOnAccentRecipe.getValueFor(element).evaluate(element).active);
4343/** @public */
4344
4345exports.foregroundOnAccentActive = foregroundOnAccentActive;
4346const foregroundOnAccentFocus = create('foreground-on-accent-focus').withDefault(element => foregroundOnAccentRecipe.getValueFor(element).evaluate(element).focus); // Accent Foreground
4347
4348/** @public */
4349
4350exports.foregroundOnAccentFocus = foregroundOnAccentFocus;
4351const accentForegroundRecipe = createNonCss('accent-foreground-recipe').withDefault({
4352  evaluate: (element, reference) => (0, _contrastAndDeltaSwatchSet.contrastAndDeltaSwatchSet)(accentPalette.getValueFor(element), reference || fillColor.getValueFor(element), 9.5, accentForegroundRestDelta.getValueFor(element), accentForegroundHoverDelta.getValueFor(element), accentForegroundActiveDelta.getValueFor(element), accentForegroundFocusDelta.getValueFor(element))
4353});
4354/** @public */
4355
4356exports.accentForegroundRecipe = accentForegroundRecipe;
4357const accentForegroundRest = create('accent-foreground-rest').withDefault(element => accentForegroundRecipe.getValueFor(element).evaluate(element).rest);
4358/** @public */
4359
4360exports.accentForegroundRest = accentForegroundRest;
4361const accentForegroundHover = create('accent-foreground-hover').withDefault(element => accentForegroundRecipe.getValueFor(element).evaluate(element).hover);
4362/** @public */
4363
4364exports.accentForegroundHover = accentForegroundHover;
4365const accentForegroundActive = create('accent-foreground-active').withDefault(element => accentForegroundRecipe.getValueFor(element).evaluate(element).active);
4366/** @public */
4367
4368exports.accentForegroundActive = accentForegroundActive;
4369const accentForegroundFocus = create('accent-foreground-focus').withDefault(element => accentForegroundRecipe.getValueFor(element).evaluate(element).focus);

4369 // Accent Stroke Control
4370
4371/** @public */
4372
4373exports.accentForegroundFocus = accentForegroundFocus;
4374const accentStrokeControlRecipe = createNonCss('accent-stroke-control-recipe').withDefault({
4375  evaluate: (element, reference) => {
4376    return (0, _gradientShadowStroke.gradientShadowStroke)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), -3, -3, -3, -3, 10, 1, undefined, true);
4377  }
4378});
4379/** @public */
4380
4381exports.accentStrokeControlRecipe = accentStrokeControlRecipe;
4382const accentStrokeControlRest = create('accent-stroke-control-rest').withDefault(element => accentStrokeControlRecipe.getValueFor(element).evaluate(element, accentFillRest.getValueFor(element)).rest);
4383/** @public */
4384
4385exports.accentStrokeControlRest = accentStrokeControlRest;
4386const accentStrokeControlHover = create('accent-stroke-control-hover').withDefault(element => accentStrokeControlRecipe.getValueFor(element).evaluate(element, accentFillHover.getValueFor(element)).hover);
4387/** @public */
4388
4389exports.accentStrokeControlHover = accentStrokeControlHover;
4390const accentStrokeControlActive = create('accent-stroke-control-active').withDefault(element => accentStrokeControlRecipe.getValueFor(element).evaluate(element, accentFillActive.getValueFor(element)).active);
4391/** @public */
4392
4393exports.accentStrokeControlActive = accentStrokeControlActive;
4394const accentStrokeControlFocus = create('accent-stroke-control-focus').withDefault(element => accentStrokeControlRecipe.getValueFor(element).evaluate(element, accentFillFocus.getValueFor(element)).focus); // Neutral Fill
4395
4396/** @public */
4397
4398exports.accentStrokeControlFocus = accentStrokeControlFocus;
4399const neutralFillRecipe = createNonCss('neutral-fill-recipe').withDefault({
4400  evaluate: (element, reference) => (0, _deltaSwatchSet.deltaSwatchSetByLuminance)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), neutralFillFocusDelta.getValueFor(element), undefined, 2, 3, 1, 2, undefined)
4401});
4402/** @public */
4403
4404exports.neutralFillRecipe = neutralFillRecipe;
4405const neutralFillRest = create('neutral-fill-rest').withDefault(element => neutralFillRecipe.getValueFor(element).evaluate(element).rest);
4406/** @public */
4407
4408exports.neutralFillRest = neutralFillRest;
4409const neutralFillHover = create('neutral-fill-hover').withDefault(element => neutralFillRecipe.getValueFor(element).evaluate(element).hover);
4410/** @public */
4411
4412exports.neutralFillHover = neutralFillHover;
4413const neutralFillActive = create('neutral-fill-active').withDefault(element => neutralFillRecipe.getValueFor(element).evaluate(element).active);
4414/** @public */
4415
4416exports.neutralFillActive = neutralFillActive;
4417const neutralFillFocus = create('neutral-fill-focus').withDefault(element => neutralFillRecipe.getValueFor(element).evaluate(element).focus); // Neutral Fill Input
4418
4419/** @public */
4420
4421exports.neutralFillFocus = neutralFillFocus;
4422const neutralFillInputRecipe = createNonCss('neutral-fill-input-recipe').withDefault({
4423  evaluate: (element, reference) => (0, _deltaSwatchSet.deltaSwatchSetByLuminance)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillInputRestDelta.getValueFor(element), neutralFillInputHoverDelta.getValueFor(element), neutralFillInputActiveDelta.getValueFor(element), neutralFillInputFocusDelta.getValueFor(element), undefined, 2, 3, 1, 0, undefined)
4424});
4425/** @public */
4426
4427exports.neutralFillInputRecipe = neutralFillInputRecipe;
4428const neutralFillInputRest = create('neutral-fill-input-rest').withDefault(element => neutralFillInputRecipe.getValueFor(element).evaluate(element).rest);
4429/** @public */
4430
4431exports.neutralFillInputRest = neutralFillInputRest;
4432const neutralFillInputHover = create('neutral-fill-input-hover').withDefault(element => neutralFillInputRecipe.getValueFor(element).evaluate(element).hover);
4433/** @public */
4434
4435exports.neutralFillInputHover = neutralFillInputHover;
4436const neutralFillInputActive = create('neutral-fill-input-active').withDefault(element => neutralFillInputRecipe.getValueFor(element).evaluate(element).active);
4437/** @public */
4438
4439exports.neutralFillInputActive = neutralFillInputActive;
4440const neutralFillInputFocus = create('neutral-fill-input-focus').withDefault(element => neutralFillInputRecipe.getValueFor(element).evaluate(element).focus); // Neutral Fill Input Alt
4441
4442/** @public */
4443
4444exports.neutralFillInputFocus = neutralFillInputFocus;
4445const neutralFillInputAltRecipe = createNonCss('neutral-fill-input-alt-recipe').withDefault({
4446  evaluate: (element, reference) => (0, _deltaSwatchSet.deltaSwatchSetByLuminance)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillInputAltRestDelta.getValueFor(element), neutralFillInputAltHoverDelta.getValueFor(element), neutralFillInputAltActiveDelta.getValueFor(element), neutralFillInputAltFocusDelta.getValueFor(element), 1, neutralFillInputAltRestDelta.getValueFor(element), neutralFillInputAltRestDelta.getValueFor(element) - neutralFillInputAltHoverDelta.getValueFor(element), neutralFillInputAltRestDelta.getValueFor(element) - neutralFillInputAltActiveDelta.getValueFor(element), neutralFillInputAltFocusDelta.getValueFor(element), 1)
4447});
4448/** @public */
4449
4450exports.neutralFillInputAltRecipe = neutralFillInputAltRecipe;
4451const neutralFillInputAltRest = create('neutral-fill-input-alt-rest').withDefault(element => neutralFillInputAltRecipe.getValueFor(element).evaluate(element).rest);
4452/** @public */
4453
4454exports.neutralFillInputAltRest = neutralFillInputAltRest;
4455const neutralFillInputAltHover = create('neutral-fill-input-alt-hover').withDefault(element => neutralFillInputAltRecipe.getValueFor(element).evaluate(element).hover);
4456/** @public */
4457
4458exports.neutralFillInputAltHover = neutralFillInputAltHover;
4459const neutralFillInputAltActive = create('neutral-fill-input-alt-active').withDefault(element => neutralFillInputAltRecipe.getValueFor(element).evaluate(element).active);
4460/** @public */
4461
4462exports.neutralFillInputAltActive = neutralFillInputAltActive;
4463const neutralFillInputAltFocus = create('neutral-fill-input-alt-focus').withDefault(element => neutralFillInputAltRecipe.getValueFor(element).evaluate(element).focus); // Neutral Fill Layer
4464
4465/** @public */
4466
4467exports.neutralFillInputAltFocus = neutralFillInputAltFocus;

4468const neutralFillLayerRecipe = createNonCss('neutral-fill-layer-recipe').withDefault({
4469  evaluate: (element, reference) => (0, _deltaSwatchSet.deltaSwatchSet)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element), neutralFillLayerHoverDelta.getValueFor(element), neutralFillLayerActiveDelta.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element), 1)
4470});
4471/** @public */
4472
4473exports.neutralFillLayerRecipe = neutralFillLayerRecipe;
4474const neutralFillLayerRest = create('neutral-fill-layer-rest').withDefault(element => neutralFillLayerRecipe.getValueFor(element).evaluate(element).rest);
4475/** @public */
4476
4477exports.neutralFillLayerRest = neutralFillLayerRest;
4478const neutralFillLayerHover = create('neutral-fill-layer-hover').withDefault(element => neutralFillLayerRecipe.getValueFor(element).evaluate(element).hover);
4479/** @public */
4480
4481exports.neutralFillLayerHover = neutralFillLayerHover;
4482const neutralFillLayerActive = create('neutral-fill-layer-active').withDefault(element => neutralFillLayerRecipe.getValueFor(element).evaluate(element).active); // Neutral Fill Layer Alt
4483
4484/** @public */
4485
4486exports.neutralFillLayerActive = neutralFillLayerActive;
4487const neutralFillLayerAltRecipe = createNonCss('neutral-fill-layer-alt-recipe').withDefault({
4488  evaluate: (element, reference) => (0, _deltaSwatchSet.deltaSwatchSet)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillLayerAltRestDelta.getValueFor(element), neutralFillLayerAltRestDelta.getValueFor(element), neutralFillLayerAltRestDelta.getValueFor(element), neutralFillLayerAltRestDelta.getValueFor(element))
4489});
4490/** @public */
4491
4492exports.neutralFillLayerAltRecipe = neutralFillLayerAltRecipe;
4493const neutralFillLayerAltRest = create('neutral-fill-layer-alt-rest').withDefault(element => neutralFillLayerAltRecipe.getValueFor(element).evaluate(element).rest); // Neutral Fill Secondary
4494
4495/** @public */
4496
4497exports.neutralFillLayerAltRest = neutralFillLayerAltRest;
4498const neutralFillSecondaryRecipe = createNonCss('neutral-fill-secondary-recipe').withDefault({
4499  evaluate: (element, reference) => (0, _deltaSwatchSet.deltaSwatchSet)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillSecondaryRestDelta.getValueFor(element), neutralFillSecondaryHoverDelta.getValueFor(element), neutralFillSecondaryActiveDelta.getValueFor(element), neutralFillSecondaryFocusDelta.getValueFor(element))
4500});
4501/** @public */
4502
4503exports.neutralFillSecondaryRecipe = neutralFillSecondaryRecipe;
4504const neutralFillSecondaryRest = create('neutral-fill-secondary-rest').withDefault(element => neutralFillSecondaryRecipe.getValueFor(element).evaluate(element).rest);
4505/** @public */
4506
4507exports.neutralFillSecondaryRest = neutralFillSecondaryRest;
4508const neutralFillSecondaryHover = create('neutral-fill-secondary-hover').withDefault(element => neutralFillSecondaryRecipe.getValueFor(element).evaluate(element).hover);
4509/** @public */
4510
4511exports.neutralFillSecondaryHover = neutralFillSecondaryHover;
4512const neutralFillSecondaryActive = create('neutral-fill-secondary-active').withDefault(element => neutralFillSecondaryRecipe.getValueFor(element).evaluate(element).active);
4513/** @public */
4514
4515exports.neutralFillSecondaryActive = neutralFillSecondaryActive;
4516const neutralFillSecondaryFocus = create('neutral-fill-secondary-focus').withDefault(element => neutralFillSecondaryRecipe.getValueFor(element).evaluate(element).focus); // Neutral Fill Stealth
4517
4518/** @public */
4519
4520exports.neutralFillSecondaryFocus = neutralFillSecondaryFocus;
4521const neutralFillStealthRecipe = createNonCss('neutral-fill-stealth-recipe').withDefault({
4522  evaluate: (element, reference) => (0, _deltaSwatchSet.deltaSwatchSet)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillStealthRestDelta.getValueFor(element), neutralFillStealthHoverDelta.getValueFor(element), neutralFillStealthActiveDelta.getValueFor(element), neutralFillStealthFocusDelta.getValueFor(element))
4523});
4524/** @public */
4525
4526exports.neutralFillStealthRecipe = neutralFillStealthRecipe;
4527const neutralFillStealthRest = create('neutral-fill-stealth-rest').withDefault(element => neutralFillStealthRecipe.getValueFor(element).evaluate(element).rest);
4528/** @public */
4529
4530exports.neutralFillStealthRest = neutralFillStealthRest;
4531const neutralFillStealthHover = create('neutral-fill-stealth-hover').withDefault(element => neutralFillStealthRecipe.getValueFor(element).evaluate(element).hover);
4532/** @public */
4533
4534exports.neutralFillStealthHover = neutralFillStealthHover;
4535const neutralFillStealthActive = create('neutral-fill-stealth-active').withDefault(element => neutralFillStealthRecipe.getValueFor(element).evaluate(element).active);
4536/** @public */
4537
4538exports.neutralFillStealthActive = neutralFillStealthActive;
4539const neutralFillStealthFocus = create('neutral-fill-stealth-focus').withDefault(element => neutralFillStealthRecipe.getValueFor(element).evaluate(element).focus); // Neutral Fill Strong
4540
4541/** @public */
4542
4543exports.neutralFillStealthFocus = neutralFillStealthFocus;
4544const neutralFillStrongRecipe = createNonCss('neutral-fill-strong-recipe').withDefault({
4545  evaluate: (element, reference) => (0, _contrastAndDeltaSwatchSet.contrastAndDeltaSwatchSet)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), 4.5, neutralFillStrongRestDelta.getValueFor(element), neutralFillStrongHoverDelta.getValueFor(element), neutralFillStrongActiveDelta.getValueFor(element), neutralFillStrongFocusDelta.getValueFor(element))
4546});
4547/** @public */
4548
4549exports.neutralFillStrongRecipe = neutralFillStrongRecipe;
4550const neutralFillStrongRest = create('neutral-fill-strong-rest').withDefault(element => neutralFillStrongRecipe.getValueFor(element).evaluate(element).rest);
4551/** @public */
4552
4553exports.neutralFillStrongRest = neutralFillStrongRest;
4554const neutralFillStrongHover = create('neutral-fill-strong-hover').withDefault(element => neutralFillStrongRecipe.getValueFor(element).evaluate(element).hover);
4555/** @public */
4556
4557exports.neutralFillStrongHover = neutralFillStrongHover;
4558const neutralFillStrongActive = create('neutral-fill-strong-active').withDefault(element => neutralFillStrongRecipe.getValueFor(element).evaluate(element).active);
4559/** @public */
4560
4561exports.neutralFillStrongActive = neutralFillStrongActive;
4562const neutralFillStrongFocus = create('neutral-fill-strong-focus').withDefault(element => neutralFillStrongRecipe.getValueFor(element).evaluate(element).focus); // Neutral Foreground
4563
4564/** @public */
4565
4566exports.neutralFillStrongFocus = neutralFillStrongFocus;
4567const neutralForegroundRecipe = createNonCss('neutral-foreground-recipe').withDefault({
4568  evaluate: (element, reference) => (0, _contrastAndDeltaSwatchSet.contrastAndDeltaSwatchSet)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), 16, 0, -19, -30, 0)
4569});
4570/** @public */
4571
4572exports.neutralForegroundRecipe = neutralForegroundRecipe;
4573const neutralForegroundRest = create('neutral-foreground-rest').withDefault(element => neutralForegroundRecipe.getValueFor(element).evaluate(element).rest);
4574/** @public */
4575
4576exports.neutralForegroundRest = neutralForegroundRest;
4577const neutralForegroundHover = create('neutral-foreground-hover').withDefault(element => neutralForegroundRecipe.getValueFor(element).evaluate(element).hover);
4578/** @public */
4579
4580exports.neutralForegroundHover = neutralForegroundHover;
4581const neutralForegroundActive = create('neutral-foreground-active').withDefault(element => neutralForegroundRecipe.getValueFor(element).evaluate(element).active);
4582/** @public */
4583
4584exports.neutralForegroundActive = neutralForegroundActive;
4585const neutralForegroundFocus = create('neutral-foreground-focus').withDefault(element => neutralForegroundRecipe.getValueFor(element).evaluate(element).focus); // Neutral Foreground Hint
4586
4587/** @public */
4588
4589exports.neutralForegroundFocus = neutralForegroundFocus;
4590const neutralForegroundHintRecipe = createNonCss('neutral-foreground-hint-recipe').withDefault({
4591  evaluate: (element, reference) => (0, _contrastSwatch.contrastSwatch)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), 4.5)
4592}

4592);
4593/** @public */
4594
4595exports.neutralForegroundHintRecipe = neutralForegroundHintRecipe;
4596const neutralForegroundHint = create('neutral-foreground-hint').withDefault(element => neutralForegroundHintRecipe.getValueFor(element).evaluate(element)); // Neutral Stroke
4597
4598/** @public */
4599
4600exports.neutralForegroundHint = neutralForegroundHint;
4601const neutralStrokeRecipe = createNonCss('neutral-stroke-recipe').withDefault({
4602  evaluate: (element, reference) => {
4603    return (0, _deltaSwatchSet.deltaSwatchSet)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralStrokeRestDelta.getValueFor(element), neutralStrokeHoverDelta.getValueFor(element), neutralStrokeActiveDelta.getValueFor(element), neutralStrokeFocusDelta.getValueFor(element));
4604  }
4605});
4606/** @public */
4607
4608exports.neutralStrokeRecipe = neutralStrokeRecipe;
4609const neutralStrokeRest = create('neutral-stroke-rest').withDefault(element => neutralStrokeRecipe.getValueFor(element).evaluate(element).rest);
4610/** @public */
4611
4612exports.neutralStrokeRest = neutralStrokeRest;
4613const neutralStrokeHover = create('neutral-stroke-hover').withDefault(element => neutralStrokeRecipe.getValueFor(element).evaluate(element).hover);
4614/** @public */
4615
4616exports.neutralStrokeHover = neutralStrokeHover;
4617const neutralStrokeActive = create('neutral-stroke-active').withDefault(element => neutralStrokeRecipe.getValueFor(element).evaluate(element).active);
4618/** @public */
4619
4620exports.neutralStrokeActive = neutralStrokeActive;
4621const neutralStrokeFocus = create('neutral-stroke-focus').withDefault(element => neutralStrokeRecipe.getValueFor(element).evaluate(element).focus); // Neutral Stroke Control
4622
4623/** @public */
4624
4625exports.neutralStrokeFocus = neutralStrokeFocus;
4626const neutralStrokeControlRecipe = createNonCss('neutral-stroke-control-recipe').withDefault({
4627  evaluate: (element, reference) => {
4628    return (0, _gradientShadowStroke.gradientShadowStroke)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralStrokeControlRestDelta.getValueFor(element), neutralStrokeControlHoverDelta.getValueFor(element), neutralStrokeControlActiveDelta.getValueFor(element), neutralStrokeControlFocusDelta.getValueFor(element), 5);
4629  }
4630});
4631/** @public */
4632
4633exports.neutralStrokeControlRecipe = neutralStrokeControlRecipe;
4634const neutralStrokeControlRest = create('neutral-stroke-control-rest').withDefault(element => neutralStrokeControlRecipe.getValueFor(element).evaluate(element).rest);
4635/** @public */
4636
4637exports.neutralStrokeControlRest = neutralStrokeControlRest;
4638const neutralStrokeControlHover = create('neutral-stroke-control-hover').withDefault(element => neutralStrokeControlRecipe.getValueFor(element).evaluate(element).hover);
4639/** @public */
4640
4641exports.neutralStrokeControlHover = neutralStrokeControlHover;
4642const neutralStrokeControlActive = create('neutral-stroke-control-active').withDefault(element => neutralStrokeControlRecipe.getValueFor(element).evaluate(element).active);
4643/** @public */
4644
4645exports.neutralStrokeControlActive = neutralStrokeControlActive;
4646const neutralStrokeControlFocus = create('neutral-stroke-control-focus').withDefault(element => neutralStrokeControlRecipe.getValueFor(element).evaluate(element).focus); // Neutral Stroke Divider
4647
4648/** @public */
4649
4650exports.neutralStrokeControlFocus = neutralStrokeControlFocus;
4651const neutralStrokeDividerRecipe = createNonCss('neutral-stroke-divider-recipe').withDefault({
4652  evaluate: (element, reference) => (0, _deltaSwatch.deltaSwatch)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralStrokeDividerRestDelta.getValueFor(element))
4653});
4654/** @public */
4655
4656exports.neutralStrokeDividerRecipe = neutralStrokeDividerRecipe;
4657const neutralStrokeDividerRest = create('neutral-stroke-divider-rest').withDefault(element => neutralStrokeDividerRecipe.getValueFor(element).evaluate(element)); // Neutral Stroke Input
4658
4659/** @public */
4660
4661exports.neutralStrokeDividerRest = neutralStrokeDividerRest;
4662const neutralStrokeInputRecipe = createNonCss('neutral-stroke-input-recipe').withDefault({
4663  evaluate: (element, reference) => {
4664    return (0, _underlineStroke.underlineStroke)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralStrokeControlRestDelta.getValueFor(element), neutralStrokeControlHoverDelta.getValueFor(element), neutralStrokeControlActiveDelta.getValueFor(element), neutralStrokeControlFocusDelta.getValueFor(element), 20, strokeWidth.getValueFor(element) + 'px');
4665  }
4666});
4667/** @public */
4668
4669exports.neutralStrokeInputRecipe = neutralStrokeInputRecipe;
4670const neutralStrokeInputRest = create('neutral-stroke-input-rest').withDefault(element => neutralStrokeInputRecipe.getValueFor(element).evaluate(element).rest);
4671/** @public */
4672
4673exports.neutralStrokeInputRest = neutralStrokeInputRest;
4674const neutralStrokeInputHover = create('neutral-stroke-input-hover').withDefault(element => neutralStrokeInputRecipe.getValueFor(element).evaluate(element).hover);
4675/** @public */
4676
4677exports.neutralStrokeInputHover = neutralStrokeInputHover;
4678const neutralStrokeInputActive = create('neutral-stroke-input-active').withDefault(element => neutralStrokeInputRecipe.getValueFor(element).evaluate(element).active);
4679/** @public */
4680
4681exports.neutralStrokeInputActive = neutralStrokeInputActive;
4682const neutralStrokeInputFocus = create('neutral-stroke-input-focus').withDefault(element => neutralStrokeInputRecipe.getValueFor(element).evaluate(element).focus); // Neutral Stroke Layer
4683
4684/** @public */
4685
4686exports.neutralStrokeInputFocus = neutralStrokeInputFocus;
4687const neutralStrokeLayerRecipe = createNonCss('neutral-stroke-layer-recipe').withDefault({
4688  evaluate: (element, reference) => {
4689    return (0, _deltaSwatchSet.deltaSwatchSet)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralStrokeLayerRestDelta.getValueFor(element), neutralStrokeLayerHoverDelta.getValueFor(element), neutralStrokeLayerActiveDelta.getValueFor(element), neutralStrokeLayerRestDelta.getValueFor(element));
4690  }
4691});
4692/** @public */
4693
4694exports.neutralStrokeLayerRecipe = neutralStrokeLayerRecipe;
4695const neutralStrokeLayerRest = create('neutral-stroke-layer-rest').withDefault(element => neutralStrokeLayerRecipe.getValueFor(element).evaluate(element).rest);
4696/** @public */
4697
4698exports.neutralStrokeLayerRest = neutralStrokeLayerRest;
4699const neutralStrokeLayerHover = create('neutral-stroke-layer-hover').withDefault(element => neutralStrokeLayerRecipe.getValueFor(element).evaluate(element).hover);
4700/** @public */
4701
4702exports.neutralStrokeLayerHover = neutralStrokeLayerHover;
4703const neutralStrokeLayerActive = create('neutral-stroke-layer-active').withDefault(element => neutralStrokeLayerRecipe.getValueFor(element).evaluate(element).active); // Neutral Stroke Strong
4704
4705/** @public */
4706
4707exports.neutralStrokeLayerActive = neutralStrokeLayerActive;
4708const neutralStrokeStrongRecipe = createNonCss('neutral-stroke-strong-recipe').withDefault({
4709  evaluate: (element, reference) => (0, _contrastAndDeltaSwatchSet.contrastAndDeltaSwatchSet)(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), 5.5, 0, neutralStrokeStrongHoverDelta.getValueFor(element), neutralStrokeStrongActiveDelta.getValueFor(element), neutralStrokeStrongFocusDelta.getValueFor(element))
4710});
4711/** @public */
4712
4713exports.neutralStrokeStrongRecipe = neutralStrokeStrongRecipe;
4714const neutralStrokeStrongRest = create('neutral-stroke-strong-rest').withDefault(element => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).rest);
4715/** @public */
4716
4717exports.neutralStrokeStrongRest = neutralStrokeStrongRest;
4718const neutralStrokeStrongHover = create('neutral-stroke-strong-hover').withDefault(element => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).hover);
4719/** @public */
4720
4721exports.neutralStrokeStrongHover = neutralStrokeStrongHover;
4722const neutralStrokeStrongActive = create('neutral-stroke-strong-active').withDefault(element => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).active);
4723/** @public */
4724
4725exports.neutralStrokeStrongActive = neutralStrokeStrongActive;
4726const neutralStrokeStrongFocus = create('neutral-stroke-strong-focus').withDefault(element => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).focus); // Focus Stroke Outer
4727
4728/** @public */
4729
4730exports.neutralStrokeStrongFocus = neutralStrokeStrongFocus;
4731const focusStrokeOuterRecipe = createNonCss('focus-stroke-outer-recipe').withDefault({
4732  evaluate: element => (0, _focusStroke.focusStrokeOuter)(neutralPalette.getValueFor(element), fillColor.getValueFor(element))
4733});
4734/** @public */
4735
4736exports.focusStrokeOuterRecipe = focusStrokeOuterRecipe;
4737const focusStrokeOuter = create('focus-stroke-outer').withDefault(element => focusStrokeOuterRecipe.getValueFor(element).evaluate(element)); // Focus Stroke Inner
4738
4739/** @public */
4740
4741exports.focusStrokeOuter = focusStrokeOuter;
4742const focusStrokeInnerRecipe = createNonCss('focus-stroke-inner-recipe').withDefault({
4743  evaluate: element => (0, _focusStroke.focusStrokeInner)(accentPalette.getValueFor(element), fillColor.getValueFor(element), focusStrokeOuter.getValueFor(element))
4744});
4745/** @public */
4746
4747exports.focusStrokeInnerRecipe = focusStrokeInnerRecipe;
4748const focusStrokeInner = create('focus-stroke-inner').withDefault(element => focusStrokeInnerRecipe.getValueFor(element).evaluate(element)); // Deprecated tokens
4749// Foreground On Accent
4750
4751/** @public @deprecated Not used */
4752
4753exports.focusStrokeInner = focusStrokeInner;
4754const foregroundOnAccentLargeRecipe = createNonCss('foreground-on-accent-large-recipe').withDefault({
4755  evaluate: element => (0, _foregroundOnAccent.foregroundOnAccentSet)(accentFillRest.getValueFor(element), accentFillHover.getValueFor(element), accentFillActive.getValueFor(element), accentFillFocus.getValueFor(element), ContrastTarget.large)
4756});
4757/** @public @deprecated Not used */
4758
4759exports.foregroundOnAccentLargeRecipe = foregroundOnAccentLargeRecipe;
4760const foregroundOnAccentRestLarge = create('foreground-on-accent-rest-large').withDefault(element => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element).rest);
4761/** @public @deprecated Not used */
4762
4763exports.foregroundOnAccentRestLarge = foregroundOnAccentRestLarge;
4764const foregroundOnAccentHoverLarge = create('foreground-on-accent-hover-large').withDefault(element => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element, accentFillHover.getValueFor(element)).hover);
4765/** @public @deprecated Not used */
4766
4767exports.foregroundOnAccentHoverLarge = foregroundOnAccentHoverLarge;
4768const foregroundOnAccentActiveLarge = create('foreground-on-accent-active-large').withDefault(element => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element, accentFillActive.getValueFor(element)).active);
4769/** @public @deprecated Not used */
4770
4771exports.foregroundOnAccentActiveLarge = foregroundOnAccentActiveLarge;
4772const foregroundOnAccentFocusLarge = create('foreground-on-accent-focus-large').withDefault(element => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element, accentFillFocus.getValueFor(element)).focus); // Neutral Fill Inverse
4773
4774/** @public @deprecated Not used */
4775
4776exports.foregroundOnAccentFocusLarge = foregroundOnAccentFocusLarge;
4777const neutralFillInverseRestDelta = create('neutral-fill-inverse-rest-delta').withDefault(0);
4778/** @public @deprecated Not used */
4779
4780exports.neutralFillInverseRestDelta = neutralFillInverseRestDelta;
4781const neutralFillInverseHoverDelta = create('neutral-fill-inverse-hover-delta').withDefault(-3);
4782/** @public @deprecated Not used */
4783
4784exports.neutralFillInverseHoverDelta = neutralFillInverseHoverDelta;
4785const neutralFillInverseActiveDelta = create('neutral-fill-inverse-active-delta').withDefault(7);
4786/** @public @deprecated Not used */
4787
4788exports.neutralFillInverseActiveDelta = neutralFillInverseActiveDelta;
4789const neutralFillInverseFocusDelta = create('neutral-fill-inverse-focus-delta').withDefault(0);
4790/** @deprecated Not used */
4791
4792exports.neutralFillInverseFocusDelta = neutralFillInverseFocusDelta;
4793
4794function neutralFillInverse(palette, reference, restDelta, hoverDelta, activeDelta, focusDelta) {
4795  const direction = (0, _directionByIsDark.directionByIsDark)(reference);
4796  const accessibleIndex = palette.closestIndexOf(palette.colorContrast(reference, 14));
4797  const accessibleIndex2 = accessibleIndex + direction * Math.abs(restDelta - hoverDelta);
4798  const indexOneIsRest = direction === 1 ? restDelta < hoverDelta : direction * restDelta > direction * hoverDelta;
4799  let restIndex;
4800  let hoverIndex;
4801
4802  if (indexOneIsRest) {
4803    restIndex = accessibleIndex;
4804    hoverIndex = accessibleIndex2;
4805  } else {
4806    restIndex = accessibleIndex2;
4807    hoverIndex = accessibleIndex;
4808  }
4809
4810  return {
4811    rest: palette.get(restIndex),
4812    hover: palette.get(hoverIndex),
4813    active: palette.get(restIndex + direction * activeDelta),
4814    focus: palette.get(restIndex + direction * focusDelta)
4815  };
4816}
4817/** @public @deprecated Not used */
4818
4819
4820const neutralFillInverseRecipe = createNonCss('neutral-fill-inverse-recipe').withDefault({
4821  evaluate: (element, reference) => neutralFillInverse(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillInverseRestDelta.getValueFor(element), neutralFillInverseHoverDelta.getValueFor(element), neutralFillInverseActiveDelta.getValueFor(element), neutralFillInverseFocusDelta.getValueFor(element))
4822});
4823/** @public @deprecated Not used */
4824
4825exports.neutralFillInverseRecipe = neutralFillInverseRecipe;
4826const neutralFillInverseRest = create('neutral-fill-inverse-rest').withDefault(element => neutralFillInverseRecipe.getValueFor(element).evaluate(element).rest);
4827/** @public @deprecated Not used */
4828
4829exports.neutralFillInverseRest = neutralFillInverseRest;
4830const neutralFillInverseHover = create('neutral-fill-inverse-hover').withDefault(element => neutralFillInverseRecipe.getValueFor(element).evaluate(element).hover);
4831/** @public @deprecated Not used */
4832
4833exports.neutralFillInverseHover = neutralFillInverseHover;
4834const neutralFillInverseActive = create('neutral-fill-inverse-active').withDefault(element => neutralFillInverseRecipe.getValueFor(element).evaluate(element).active);
4835/** @public @deprecated Not used */
4836
4837exports.neutralFillInverseActive = neutralFillInverseActive;
4838const neutralFillInverseFocus = create('neutral-fill-inverse-focus').withDefault(element => neutralFillInverseRecipe.getValueFor(element).evaluate(element).focus);
4839/** @public @deprecated Use controlCornerRadius */
4840
4841exports.neutralFillInverseFocus = neutralFillInverseFocus;
4842const cornerRadius = controlCornerRadius;
4843/** @public @deprecated Use layerCornerRadius */
4844
4845exports.cornerRadius = cornerRadius;
4846const elevatedCornerRadius = layerCornerRadius;
4847/** @public @deprecated Use strokeWidth */
4848
4849exports.elevatedCornerRadius = elevatedCornerRadius;
4850const outlineWidth = strokeWidth;
4851/** @public @deprecated Use focusStrokeWidth */
4852
4853exports.outlineWidth = outlineWidth;
4854const focusOutlineWidth = focusStrokeWidth;
4855/** @public @deprecated Use neutralFillInverseRestDelta */
4856
4857exports.focusOutlineWidth = focusOutlineWidth;
4858const neutralContrastFillRestDelta = neutralFillInverseRestDelta;
4859/** @public @deprecated Use neutralFillInverseHoverDelta */
4860
4861exports.neutralContrastFillRestDelta = neutralContrastFillRestDelta;
4862const neutralContrastFillHoverDelta = neutralFillInverseHoverDelta;
4863/** @public @deprecated Use neutralFillInverseActiveDelta */
4864
4865exports.neutralContrastFillHoverDelta = neutralContrastFillHoverDelta;
4866const neutralContrastFillActiveDelta = neutralFillInverseActiveDelta;
4867/** @public @deprecated Use neutralFillInverseFocusDelta */
4868
4869exports.neutralContrastFillActiveDelta = neutralContrastFillActiveDelta;
4870const neutralContrastFillFocusDelta = neutralFillInverseFocusDelta;
4871/** @public @deprecated Use neutralFillLayerRestDelta */
4872
4873exports.neutralContrastFillFocusDelta = neutralContrastFillFocusDelta;
4874const neutralFillCardDelta = neutralFillLayerRestDelta;
4875/** @public @deprecated Use neutralFillStrongRestDelta */
4876
4877exports.neutralFillCardDelta = neutralFillCardDelta;
4878const neutralFillToggleRestDelta = neutralFillStrongRestDelta;
4879/** @public @deprecated Use neutralFillStrongHoverDelta */
4880
4881exports.neutralFillToggleRestDelta = neutralFillToggleRestDelta;
4882const neutralFillToggleHoverDelta = neutralFillStrongHoverDelta;
4883/** @public @deprecated Use neutralFillStrongActiveDelta */
4884
4885exports.neutralFillToggleHoverDe

4885lta = neutralFillToggleHoverDelta;
4886const neutralFillToggleActiveDelta = neutralFillStrongActiveDelta;
4887/** @public @deprecated Use neutralFillStrongFocusDelta */
4888
4889exports.neutralFillToggleActiveDelta = neutralFillToggleActiveDelta;
4890const neutralFillToggleFocusDelta = neutralFillStrongFocusDelta;
4891/** @public @deprecated Use neutralStrokeDividerRestDelta */
4892
4893exports.neutralFillToggleFocusDelta = neutralFillToggleFocusDelta;
4894const neutralDividerRestDelta = neutralStrokeDividerRestDelta;
4895/** @public @deprecated Use neutralLayer1 */
4896
4897exports.neutralDividerRestDelta = neutralDividerRestDelta;
4898const neutralLayerL1 = neutralLayer1;
4899/** @public @deprecated Use neutralLayer2 */
4900
4901exports.neutralLayerL1 = neutralLayerL1;
4902const neutralLayerL2 = neutralLayer2;
4903/** @public @deprecated Use neutralLayer3 */
4904
4905exports.neutralLayerL2 = neutralLayerL2;
4906const neutralLayerL3 = neutralLayer3;
4907/** @public @deprecated Use neutralLayer4 */
4908
4909exports.neutralLayerL3 = neutralLayerL3;
4910const neutralLayerL4 = neutralLayer4;
4911/** @public @deprecated Use foregroundOnAccentRest */
4912
4913exports.neutralLayerL4 = neutralLayerL4;
4914const accentForegroundCut = foregroundOnAccentRest;
4915/** @public @deprecated Use foregroundOnAccentRestLarge */
4916
4917exports.accentForegroundCut = accentForegroundCut;
4918const accentForegroundCutLarge = foregroundOnAccentRestLarge;
4919/** @public @deprecated Use neutralStrokeDividerRest */
4920
4921exports.accentForegroundCutLarge = accentForegroundCutLarge;
4922const neutralDivider = neutralStrokeDividerRest;
4923/** @public @deprecated Use neutralFillLayerRest */
4924
4925exports.neutralDivider = neutralDivider;
4926const neutralFillCard = neutralFillLayerRest;
4927/** @public @deprecated Use neutralFillInverseRest */
4928
4929exports.neutralFillCard = neutralFillCard;
4930const neutralContrastFillRest = neutralFillInverseRest;
4931/** @public @deprecated Use neutralFillInverseHover */
4932
4933exports.neutralContrastFillRest = neutralContrastFillRest;
4934const neutralContrastFillHover = neutralFillInverseHover;
4935/** @public @deprecated Use neutralFillInverseActive */
4936
4937exports.neutralContrastFillHover = neutralContrastFillHover;
4938const neutralContrastFillActive = neutralFillInverseActive;
4939/** @public @deprecated Use neutralFillInverseFocus */
4940
4941exports.neutralContrastFillActive = neutralContrastFillActive;
4942const neutralContrastFillFocus = neutralFillInverseFocus;
4943/** @public @deprecated Use neutralFillStrongRest */
4944
4945exports.neutralContrastFillFocus = neutralContrastFillFocus;
4946const neutralFillToggleRest = neutralFillStrongRest;
4947/** @public @deprecated Use neutralFillStrongHover */
4948
4949exports.neutralFillToggleRest = neutralFillToggleRest;
4950const neutralFillToggleHover = neutralFillStrongHover;
4951/** @public @deprecated Use neutralFillStrongActive */
4952
4953exports.neutralFillToggleHover = neutralFillToggleHover;
4954const neutralFillToggleActive = neutralFillStrongActive;
4955/** @public @deprecated Use neutralFillStrongFocus */
4956
4957exports.neutralFillToggleActive = neutralFillToggleActive;
4958const neutralFillToggleFocus = neutralFillStrongFocus;
4959/** @public @deprecated Use focusStrokeOuter */
4960
4961exports.neutralFillToggleFocus = neutralFillToggleFocus;
4962const neutralFocus = focusStrokeOuter;
4963/** @public @deprecated Use focusStrokeInner */
4964
4965exports.neutralFocus = neutralFocus;
4966const neutralFocusInnerAccent = focusStrokeInner;
4967/** @public @deprecated Use neutralStrokeRest */
4968
4969exports.neutralFocusInnerAccent = neutralFocusInnerAccent;
4970const neutralOutlineRest = neutralStrokeRest;
4971/** @public @deprecated Use neutralStrokeHover */
4972
4973exports.neutralOutlineRest = neutralOutlineRest;
4974const neutralOutlineHover = neutralStrokeHover;
4975/** @public @deprecated Use neutralStrokeActive */
4976
4977exports.neutralOutlineHover = neutralOutlineHover;
4978const neutralOutlineActive = neutralStrokeActive;
4979/** @public @deprecated Use neutralStrokeFocus */
4980
4981exports.neutralOutlineActive = neutralOutlineActive;
4982const neutralOutlineFocus = neutralStrokeFocus;
4983exports.neutralOutlineFocus = neutralOutlineFocus;
4984
4985},{"./color/palette":23,"./color/recipes/contrast-and-delta-swatch-set":24,"./color/recipes/contrast-swatch":25,"./color/recipes/delta-swatch":27,"./color/recipes/delta-swatch-set":26,"./color/recipes/focus-stroke":28,"./color/recipes/foreground-on-accent":29,"./color/recipes/gradient-shadow-stroke":30,"./color/recipes/neutral-layer-1":32,"./color/recipes/neutral-layer-2":33,"./color/recipes/neutral-layer-3":34,"./color/recipes/neutral-layer-4":35,"./color/recipes/neutral-layer-floating":36,"./color/recipes/underline-stroke":37,"./color/utilities/base-layer-luminance":39,"./color/utilities/color-constants":41,"./color/utilities/direction-by-is-dark":42,"./utilities/type-ramp":124,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],54:[function(require,module,exports){
4986"use strict";
4987
4988Object.defineProperty(exports, "__esModule", {
4989  value: true
4990});
4991exports.dialogStyles = void 0;
4992
4993var _fastElement = require("@microsoft/fast-element");
4994
4995var _styles = require("../styles");
4996
4997var _designTokens = require("../design-tokens");
4998
4999const dialogStyles = (context, definition) => (0, _fastElement.css)`
5000  :host([hidden]) {
5001    display: none;
5002  }
5003
5004  :host {
5005    --dialog-height: 480px;
5006    --dialog-width: 640px;
5007    display: block;
5008  }
5009
5010  .overlay {
5011    position: fixed;
5012    top: 0;
5013    left: 0;
5014    right: 0;
5015    bottom: 0;
5016    background: rgba(0, 0, 0, 0.3);
5017    touch-action: none;
5018  }
5019
5020  .positioning-region {
5021    display: flex;
5022    justify-content: center;
5023    position: fixed;
5024    top: 0;
5025    bottom: 0;
5026    left: 0;
5027    right: 0;
5028    overflow: auto;
5029  }
5030
5031  .control {
5032    box-shadow: ${_styles.elevationShadowDialog};
5033    margin-top: auto;
5034    margin-bottom: auto;
5035    border-radius: calc(${_designTokens.layerCornerRadius} * 1px);
5036    width: var(--dialog-width);
5037    height: var(--dialog-height);
5038    background: ${_designTokens.fillColor};
5039    z-index: 1;
5040    border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
5041  }
5042`;
5043
5044exports.dialogStyles = dialogStyles;
5045
5046},{"../design-tokens":53,"../styles":97,"@microsoft/fast-element":151}],55:[function(require,module,exports){
5047"use strict";
5048
5049Object.defineProperty(exports, "__esModule", {
5050  value: true
5051});
5052Object.defineProperty(exports, "Dialog", {
5053  enumerable: true,
5054  get: function () {
5055    return _fastFoundation.Dialog;
5056  }
5057});
5058exports.fluentDialog = exports.dialogStyles = void 0;
5059
5060var _fastFoundation = require("@microsoft/fast-foundation");
5061
5062var _dialog = require("./dialog.styles");
5063
5064/**
5065 * The Fluent Dialog Element. Implements {@link @microsoft/fast-foundation#Dialog},
5066 * {@link @microsoft/fast-foundation#dialogTemplate}
5067 *
5068 *
5069 * @public
5070 * @remarks
5071 * HTML Element: \<fluent-dialog\>
5072 */
5073const fluentDialog = _fastFoundation.Dialog.compose({
5074  baseName: 'dialog',
5075  template: _fastFoundation.dialogTemplate,
5076  styles: _dialog.dialogStyles
5077}

5077);
5078/**
5079 * Styles for Dialog
5080 * @public
5081 */
5082
5083
5084exports.fluentDialog = fluentDialog;
5085const dialogStyles = _dialog.dialogStyles;
5086/**
5087 * Base Dialog Class
5088 * @public
5089 */
5090
5091exports.dialogStyles = dialogStyles;
5092
5093},{"./dialog.styles":54,"@microsoft/fast-foundation":256}],56:[function(require,module,exports){
5094"use strict";
5095
5096Object.defineProperty(exports, "__esModule", {
5097  value: true
5098});
5099exports.dividerStyles = void 0;
5100
5101var _fastElement = require("@microsoft/fast-element");
5102
5103var _fastFoundation = require("@microsoft/fast-foundation");
5104
5105var _designTokens = require("../design-tokens");
5106
5107const dividerStyles = (context, definition) => (0, _fastElement.css)`
5108    ${(0, _fastFoundation.display)('block')} :host {
5109      box-sizing: content-box;
5110      height: 0;
5111      border: none;
5112      border-top: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeDividerRest};
5113    }
5114
5115    :host([orientation="vertical"]) {
5116      border: none;
5117      height: 100%;
5118      margin: 0 calc(${_designTokens.designUnit} * 1px);
5119      border-left: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeDividerRest};
5120  }
5121  `;
5122
5123exports.dividerStyles = dividerStyles;
5124
5125},{"../design-tokens":53,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],57:[function(require,module,exports){
5126"use strict";
5127
5128Object.defineProperty(exports, "__esModule", {
5129  value: true
5130});
5131Object.defineProperty(exports, "Divider", {
5132  enumerable: true,
5133  get: function () {
5134    return _fastFoundation.Divider;
5135  }
5136});
5137exports.fluentDivider = exports.dividerStyles = void 0;
5138
5139var _fastFoundation = require("@microsoft/fast-foundation");
5140
5141var _divider = require("./divider.styles");
5142
5143/**
5144 * The Fluent Divider Element. Implements {@link @microsoft/fast-foundation#Divider},
5145 * {@link @microsoft/fast-foundation#dividerTemplate}
5146 *
5147 *
5148 * @public
5149 * @remarks
5150 * HTML Element: \<fluent-divider\>
5151 */
5152const fluentDivider = _fastFoundation.Divider.compose({
5153  baseName: 'divider',
5154  template: _fastFoundation.dividerTemplate,
5155  styles: _divider.dividerStyles
5156});
5157/**
5158 * Styles for Divider
5159 * @public
5160 */
5161
5162
5163exports.fluentDivider = fluentDivider;
5164const dividerStyles = _divider.dividerStyles;
5165/**
5166 * Base class for Fluent Divider
5167 * @public
5168 */
5169
5170exports.dividerStyles = dividerStyles;
5171
5172},{"./divider.styles":56,"@microsoft/fast-foundation":256}],58:[function(require,module,exports){
5173"use strict";
5174
5175Object.defineProperty(exports, "__esModule", {
5176  value: true
5177});
5178exports.flipperStyles = void 0;
5179
5180var _fastElement = require("@microsoft/fast-element");
5181
5182var _fastFoundation = require("@microsoft/fast-foundation");
5183
5184var _fastWebUtilities = require("@microsoft/fast-web-utilities");
5185
5186var _styles = require("../styles");
5187
5188var _designTokens = require("../design-tokens");
5189
5190var _focus = require("../styles/focus");
5191
5192const flipperStyles = (context, definition) => (0, _fastElement.css)`
5193    ${(0, _fastFoundation.display)('inline-flex')} :host {
5194      height: calc((${_styles.heightNumber} + ${_designTokens.designUnit}) * 1px);
5195      justify-content: center;
5196      align-items: center;
5197      fill: currentcolor;
5198      color: ${_designTokens.neutralFillStrongRest};
5199      background: padding-box linear-gradient(${_designTokens.neutralFillRest}, ${_designTokens.neutralFillRest}),
5200        border-box ${_designTokens.neutralStrokeControlRest};
5201      box-sizing: border-box;
5202      border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
5203      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
5204      padding: 0;
5205    }
5206
5207    :host(.disabled) {
5208      opacity: ${_designTokens.disabledOpacity};
5209      cursor: ${_fastFoundation.disabledCursor};
5210      pointer-events: none;
5211    }
5212
5213    .next,
5214    .previous {
5215      display: flex;
5216    }
5217
5218    :host(:not(.disabled):hover) {
5219      cursor: pointer;
5220    }
5221
5222    :host(:not(.disabled):hover) {
5223      color: ${_designTokens.neutralFillStrongHover};
5224    }
5225
5226    :host(:not(.disabled):active) {
5227      color: ${_designTokens.neutralFillStrongActive};
5228    }
5229
5230    :host(:${_fastFoundation.focusVisible}) {
5231      ${_focus.focusTreatmentBase}
5232    }
5233
5234    :host::-moz-focus-inner {
5235      border: 0;
5236    }
5237  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
5238        :host {
5239          background: ${_fastWebUtilities.SystemColors.ButtonFace};
5240          border-color: ${_fastWebUtilities.SystemColors.ButtonText};
5241        }
5242        :host .next,
5243        :host .previous {
5244          color: ${_fastWebUtilities.SystemColors.ButtonText};
5245          fill: currentcolor;
5246        }
5247        :host(:not(.disabled):hover) {
5248          background: ${_fastWebUtilities.SystemColors.Highlight};
5249        }
5250        :host(:not(.disabled):hover) .next,
5251        :host(:not(.disabled):hover) .previous {
5252          color: ${_fastWebUtilities.SystemColors.HighlightText};
5253          fill: currentcolor;
5254        }
5255        :host(.disabled) {
5256          opacity: 1;
5257        }
5258        :host(.disabled),
5259        :host(.disabled) .next,
5260        :host(.disabled) .previous {
5261          border-color: ${_fastWebUtilities.SystemColors.GrayText};
5262          color: ${_fastWebUtilities.SystemColors.GrayText};
5263          fill: currentcolor;
5264        }
5265        :host(:${_fastFoundation.focusVisible}) {
5266          forced-color-adjust: none;
5267          outline-color: ${_fastWebUtilities.SystemColors.Highlight};
5268        }
5269      `));
5270
5271exports.flipperStyles = flipperStyles;
5272
5273},{"../design-tokens":53,"../styles":97,"../styles/focus":96,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],59:[function(require,module,exports){
5274"use strict";
5275
5276Object.defineProperty(exports, "__esModule", {
5277  value: true
5278});
5279Object.defineProperty(exports, "Flipper", {
5280  enumerable: true,
5281  get: function () {
5282    return _fastFoundation.Flipper;
5283  }
5284});
5285exports.fluentFlipper = exports.flipperStyles = void 0;
5286
5287var _fastFoundation = require("@microsoft/fast-foundation");
5288
5289var _flipper = require("./flipper.styles");
5290
5291/**
5292 * The Fluent Flipper Element. Implements {@link @microsoft/fast-foundation#Flipper},
5293 * {@link @microsoft/fast-foundation#flipperTemplate}
5294 *
5295 *
5296 * @public
5297 * @remarks
5298 * HTML Element: \<fluent-flipper\>
5299 */
5300const fluentFlipper = _fastFoundation.Flipper.compose({
5301  baseName: 'flipper',
5302  template: _fastFoundation.flipperTemplate,
5303  styles: _flipper.flipperStyles,
5304  next: `
5305    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
5306      <path d="M7.57 11.84A1 1 0 016 11.02V4.98a1 1 0 011.57-.82l3.79 2.62c.85.59.85 1.85 0 2.44l-3.79 2.62z"/>
5307    </svg>
5308  `,
5309  previous: `
5310    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
5311      <path d="M9.43 11.84a1 1 0 001.57-.82V4.98a1 1 0 00-1.57-.82L5.64 6.78c-.85.59-.85 1.85 0 2.44l3.79 2.62z"/>
5312    </svg>
5313  `
5314});
5315/**
5316 * Styles for Flipper
5317 * @public
5318 */
5319
5320
5321exports.fluentFlipper = fluentFlipper;
5322const flipperStyles = _flipper.flipperStyles;
5323/**
5324 * Base class for Flipper
5325 * @public
5326 */
5327
5328exports.flipperStyles = flipperStyles;
5329
5330},{"./flipper.styles":58,"@microsoft/fast-foundation":256}],60:[function(require,module,exports){
5331"use strict";
5332
5333Object.defineProperty(exports, "__esModule", {
5334  value: true
5335});
5336exports.provideFluentDesignSystem = provideFluentDesignSystem;
5337
5338var _fastFoundation = require("@microsoft/fast-foundation");
5339
5340/**

5341 * Provides a design system for the specified element either by returning one that was
5342 * already created for that element or creating one.
5343 * @param element - The element to root the design system at. By default, this is the body.
5344 * @returns A Fluent Design System
5345 * @public
5346 */
5347function provideFluentDesignSystem(element) {
5348  return _fastFoundation.DesignSystem.getOrCreate(element).withPrefix('fluent');
5349}
5350
5351},{"@microsoft/fast-foundation":256}],61:[function(require,module,exports){
5352"use strict";
5353
5354Object.defineProperty(exports, "__esModule", {
5355  value: true
5356});
5357exports.horizontalScrollStyles = exports.ActionsStyles = void 0;
5358
5359var _fastElement = require("@microsoft/fast-element");
5360
5361var _fastFoundation = require("@microsoft/fast-foundation");
5362
5363var _styles = require("../styles");
5364
5365const ltrActionsStyles = (0, _fastElement.css)`
5366  .scroll-prev {
5367    right: auto;
5368    left: 0;
5369  }
5370
5371  .scroll.scroll-next::before,
5372  .scroll-next .scroll-action {
5373    left: auto;
5374    right: 0;
5375  }
5376
5377  .scroll.scroll-next::before {
5378    background: linear-gradient(to right, transparent, var(--scroll-fade-next));
5379  }
5380
5381  .scroll-next .scroll-action {
5382    transform: translate(50%, -50%);
5383  }
5384`;
5385const rtlActionsStyles = (0, _fastElement.css)`
5386  .scroll.scroll-next {
5387    right: auto;
5388    left: 0;
5389  }
5390
5391  .scroll.scroll-next::before {
5392    background: linear-gradient(to right, var(--scroll-fade-next), transparent);
5393    left: auto;
5394    right: 0;
5395  }
5396
5397  .scroll.scroll-prev::before {
5398    background: linear-gradient(to right, transparent, var(--scroll-fade-previous));
5399  }
5400
5401  .scroll-prev .scroll-action {
5402    left: auto;
5403    right: 0;
5404    transform: translate(50%, -50%);
5405  }
5406`;
5407/**
5408 * Styles used for the flipper container and gradient fade
5409 * @public
5410 */
5411
5412const ActionsStyles = (0, _fastElement.css)`
5413  .scroll-area {
5414    position: relative;
5415  }
5416
5417  div.scroll-view {
5418    overflow-x: hidden;
5419  }
5420
5421  .scroll {
5422    bottom: 0;
5423    pointer-events: none;
5424    position: absolute;
5425    right: 0;
5426    top: 0;
5427    user-select: none;
5428    width: 100px;
5429  }
5430
5431  .scroll.disabled {
5432    display: none;
5433  }
5434
5435  .scroll::before,
5436  .scroll-action {
5437    left: 0;
5438    position: absolute;
5439  }
5440
5441  .scroll::before {
5442    background: linear-gradient(to right, var(--scroll-fade-previous), transparent);
5443    content: '';
5444    display: block;
5445    height: 100%;
5446    width: 100%;
5447  }
5448
5449  .scroll-action {
5450    pointer-events: auto;
5451    right: auto;
5452    top: 50%;
5453    transform: translate(-50%, -50%);
5454  }
5455
5456  ::slotted(fluent-flipper) {
5457    opacity: 0;
5458    transition: opacity 0.2s ease-in-out;
5459  }
5460
5461  .scroll-area:hover ::slotted(fluent-flipper) {
5462    opacity: 1;
5463  }
5464`.withBehaviors(new _styles.DirectionalStyleSheetBehavior(ltrActionsStyles, rtlActionsStyles));
5465/**
5466 * Styles handling the scroll container and content
5467 * @public
5468 */
5469
5470exports.ActionsStyles = ActionsStyles;
5471
5472const horizontalScrollStyles = (context, definition) => (0, _fastElement.css)`
5473  ${(0, _fastFoundation.display)('block')} :host {
5474    --scroll-align: center;
5475    --scroll-item-spacing: 4px;
5476    contain: layout;
5477    position: relative;
5478  }
5479
5480  .scroll-view {
5481    overflow-x: auto;
5482    scrollbar-width: none;
5483  }
5484
5485  ::-webkit-scrollbar {

5486    display: none;
5487  }
5488
5489  .content-container {
5490    align-items: var(--scroll-align);
5491    display: inline-flex;
5492    flex-wrap: nowrap;
5493    position: relative;
5494  }
5495
5496  .content-container ::slotted(*) {
5497    margin-right: var(--scroll-item-spacing);
5498  }
5499
5500  .content-container ::slotted(*:last-child) {
5501    margin-right: 0;
5502  }
5503`;
5504
5505exports.horizontalScrollStyles = horizontalScrollStyles;
5506
5507},{"../styles":97,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],62:[function(require,module,exports){
5508"use strict";
5509
5510Object.defineProperty(exports, "__esModule", {
5511  value: true
5512});
5513exports.horizontalScrollStyles = exports.fluentHorizontalScroll = exports.HorizontalScroll = void 0;
5514
5515var _fastElement = require("@microsoft/fast-element");
5516
5517var _fastFoundation = require("@microsoft/fast-foundation");
5518
5519var _horizontalScroll = require("./horizontal-scroll.styles");
5520
5521/**
5522 * @internal
5523 */
5524class HorizontalScroll extends _fastFoundation.HorizontalScroll {
5525  /**
5526   * @public
5527   */
5528  connectedCallback() {
5529    super.connectedCallback();
5530
5531    if (this.view !== 'mobile') {
5532      this.$fastController.addStyles(_horizontalScroll.ActionsStyles);
5533    }
5534  }
5535
5536}
5537/**
5538 * The Fluent HorizontalScroll Element. Implements {@link @microsoft/fast-foundation#HorizontalScroll},
5539 * {@link @microsoft/fast-foundation#horizontalScrollTemplate}
5540 *
5541 *
5542 * @public
5543 * @remarks
5544 * HTML Element: \<fluent-horizontal-scroll\>
5545 */
5546
5547
5548exports.HorizontalScroll = HorizontalScroll;
5549const fluentHorizontalScroll = HorizontalScroll.compose({
5550  baseName: 'horizontal-scroll',
5551  baseClass: _fastFoundation.HorizontalScroll,
5552  template: _fastFoundation.horizontalScrollTemplate,
5553  styles: _horizontalScroll.horizontalScrollStyles,
5554  nextFlipper: (0, _fastElement.html)`
5555    <fluent-flipper @click="${x => x.scrollToNext()}" aria-hidden="${x => x.flippersHiddenFromAT}"></fluent-flipper>
5556  `,
5557  previousFlipper: (0, _fastElement.html)`
5558    <fluent-flipper
5559      @click="${x => x.scrollToPrevious()}"
5560      direction="previous"
5561      aria-hidden="${x => x.flippersHiddenFromAT}"
5562    ></fluent-flipper>
5563  `
5564});
5565/**
5566 * Styles for horizontal scroll
5567 * @public
5568 */
5569
5570exports.fluentHorizontalScroll = fluentHorizontalScroll;
5571const horizontalScrollStyles = _horizontalScroll.horizontalScrollStyles;
5572exports.horizontalScrollStyles = horizontalScrollStyles;
5573
5574},{"./horizontal-scroll.styles":61,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],63:[function(require,module,exports){
5575"use strict";
5576
5577Object.defineProperty(exports, "__esModule", {
5578  value: true
5579});
5580var _exportNames = {
5581  PaletteRGB: true,
5582  SwatchRGB: true,
5583  isDark: true,
5584  StandardLuminance: true
5585};
5586Object.defineProperty(exports, "PaletteRGB", {
5587  enumerable: true,
5588  get: function () {
5589    return _palette.PaletteRGB;
5590  }
5591});
5592Object.defineProperty(exports, "StandardLuminance", {
5593  enumerable: true,
5594  get: function () {
5595    return _baseLayerLuminance.StandardLuminance;
5596  }
5597});
5598Object.defineProperty(exports, "SwatchRGB", {
5599  enumerable: true,
5600  get: function () {
5601    return _swatch.SwatchRGB;
5602  }
5603});
5604Object.defineProperty(exports, "isDark", {
5605  enumerable: true,
5606  get: function () {
5607    return _isDark.isDark;
5608  }
5609});
5610
5611var _customElements = require("./custom-elements");
5612
5613Object.keys(_customElements).forEach(function (key) {
5614  if (key === "default" || key === "__esModule") return;
5615  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5616  if (key in exports && exports[key] === _customElements[key]) return;
5617  Object.defineProperty(exports, key, {
5618    enumerable: true,
5619    get: function () {
5620      return _customElements[key];
5621    }
5622  });
5623});
5624
5625var _fluentDesignSystem = require("./fluent-design-system");
5626
5627Object.keys(_fluentDesignSystem).forEach(function (key) {
5628  if (key === "default" || key === "__esModule") return;
5629  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5630  if (key in exports && exports[key] === _fluentDesignSystem[key]) return;
5631  Object.defineProperty(exports, key, {
5632    enumerable: true,
5633    get: function () {
5634      return _fluentDesignSystem[key];
5635    }
5636  });
5637});
5638
5639var _accordion = require("./accordion/");
5640

5641Object.keys(_accordion).forEach(function (key) {
5642  if (key === "default" || key === "__esModule") return;
5643  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5644  if (key in exports && exports[key] === _accordion[key]) return;
5645  Object.defineProperty(exports, key, {
5646    enumerable: true,
5647    get: function () {
5648      return _accordion[key];
5649    }
5650  });
5651});
5652
5653var _anchor = require("./anchor/");
5654
5655Object.keys(_anchor).forEach(function (key) {
5656  if (key === "default" || key === "__esModule") return;
5657  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5658  if (key in exports && exports[key] === _anchor[key]) return;
5659  Object.defineProperty(exports, key, {
5660    enumerable: true,
5661    get: function () {
5662      return _anchor[key];
5663    }
5664  });
5665});
5666
5667var _anchoredRegion = require("./anchored-region");
5668
5669Object.keys(_anchoredRegion).forEach(function (key) {
5670  if (key === "default" || key === "__esModule") return;
5671  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5672  if (key in exports && exports[key] === _anchoredRegion[key]) return;
5673  Object.defineProperty(exports, key, {
5674    enumerable: true,
5675    get: function () {
5676      return _anchoredRegion[key];
5677    }
5678  });
5679});
5680
5681var _badge = require("./badge/");
5682
5683Object.keys(_badge).forEach(function (key) {
5684  if (key === "default" || key === "__esModule") return;
5685  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5686  if (key in exports && exports[key] === _badge[key]) return;
5687  Object.defineProperty(exports, key, {
5688    enumerable: true,
5689    get: function () {
5690      return _badge[key];
5691    }
5692  });
5693});
5694
5695var _breadcrumb = require("./breadcrumb");
5696
5697Object.keys(_breadcrumb).forEach(function (key) {
5698  if (key === "default" || key === "__esModule") return;
5699  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5700  if (key in exports && exports[key] === _breadcrumb[key]) return;
5701  Object.defineProperty(exports, key, {
5702    enumerable: true,
5703    get: function () {
5704      return _breadcrumb[key];
5705    }
5706  });
5707});
5708
5709var _breadcrumbItem = require("./breadcrumb-item");
5710
5711Object.keys(_breadcrumbItem).forEach(function (key) {
5712  if (key === "default" || key === "__esModule") return;
5713  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5714  if (key in exports && exports[key] === _breadcrumbItem[key]) return;
5715  Object.defineProperty(exports, key, {
5716    enumerable: true,
5717    get: function () {
5718      return _breadcrumbItem[key];
5719    }
5720  });
5721});
5722
5723var _button = require("./button/");
5724
5725Object.keys(_button).forEach(function (key) {
5726  if (key === "default" || key === "__esModule") return;
5727  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5728  if (key in exports && exports[key] === _button[key]) return;
5729  Object.defineProperty(exports, key, {
5730    enumerable: true,
5731    get: function () {
5732      return _button[key];
5733    }
5734  });
5735});
5736
5737var _card = require("./card/");
5738
5739Object.keys(_card).forEach(function (key) {
5740  if (key === "default" || key === "__esModule") return;
5741  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5742  if (key in exports && exports[key] === _card[key]) return;
5743  Object.defineProperty(exports, key, {
5744    enumerable: true,
5745    get: function () {
5746      return _card[key];
5747    }
5748  });
5749});
5750
5751var _checkbox = require("./checkbox/");
5752
5753Object.keys(_checkbox).forEach(function (key) {
5754  if (key === "default" || key === "__esModule") return;
5755  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5756  if (key in exports && exports[key] === _checkbox[key]) return;
5757  Object.defineProperty(exports, key, {
5758    enumerable: true,
5759    get: function () {
5760      return _checkbox[key];
5761    }
5762  });
5763});
5764
5765var _combobox = require("./combobox/");
5766
5767Object.keys(_combobox).forEach(function (key) {
5768  if (key === "default" || key === "__esModule") return;
5769  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5770  if (key in exports && exports[key] === _combobox[key]) return;
5771  Object.defineProperty(exports, key, {
5772    enumerable: true,
5773    get: function () {
5774      return _combobox[key];
5775    }
5776  });
5777});
5778
5779var _dataGrid = require("./data-grid");
5780

5781Object.keys(_dataGrid).forEach(function (key) {
5782  if (key === "default" || key === "__esModule") return;
5783  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5784  if (key in exports && exports[key] === _dataGrid[key]) return;
5785  Object.defineProperty(exports, key, {
5786    enumerable: true,
5787    get: function () {
5788      return _dataGrid[key];
5789    }
5790  });
5791});
5792
5793var _designSystemProvider = require("./design-system-provider/");
5794
5795Object.keys(_designSystemProvider).forEach(function (key) {
5796  if (key === "default" || key === "__esModule") return;
5797  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5798  if (key in exports && exports[key] === _designSystemProvider[key]) return;
5799  Object.defineProperty(exports, key, {
5800    enumerable: true,
5801    get: function () {
5802      return _designSystemProvider[key];
5803    }
5804  });
5805});
5806
5807var _dialog = require("./dialog/");
5808
5809Object.keys(_dialog).forEach(function (key) {
5810  if (key === "default" || key === "__esModule") return;
5811  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5812  if (key in exports && exports[key] === _dialog[key]) return;
5813  Object.defineProperty(exports, key, {
5814    enumerable: true,
5815    get: function () {
5816      return _dialog[key];
5817    }
5818  });
5819});
5820
5821var _divider = require("./divider/");
5822
5823Object.keys(_divider).forEach(function (key) {
5824  if (key === "default" || key === "__esModule") return;
5825  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5826  if (key in exports && exports[key] === _divider[key]) return;
5827  Object.defineProperty(exports, key, {
5828    enumerable: true,
5829    get: function () {
5830      return _divider[key];
5831    }
5832  });
5833});
5834
5835var _flipper = require("./flipper/");
5836
5837Object.keys(_flipper).forEach(function (key) {
5838  if (key === "default" || key === "__esModule") return;
5839  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5840  if (key in exports && exports[key] === _flipper[key]) return;
5841  Object.defineProperty(exports, key, {
5842    enumerable: true,
5843    get: function () {
5844      return _flipper[key];
5845    }
5846  });
5847});
5848
5849var _horizontalScroll = require("./horizontal-scroll/");
5850
5851Object.keys(_horizontalScroll).forEach(function (key) {
5852  if (key === "default" || key === "__esModule") return;
5853  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5854  if (key in exports && exports[key] === _horizontalScroll[key]) return;
5855  Object.defineProperty(exports, key, {
5856    enumerable: true,
5857    get: function () {
5858      return _horizontalScroll[key];
5859    }
5860  });
5861});
5862
5863var _listbox = require("./listbox");
5864
5865Object.keys(_listbox).forEach(function (key) {
5866  if (key === "default" || key === "__esModule") return;
5867  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5868  if (key in exports && exports[key] === _listbox[key]) return;
5869  Object.defineProperty(exports, key, {
5870    enumerable: true,
5871    get: function () {
5872      return _listbox[key];
5873    }
5874  });
5875});
5876
5877var _listboxOption = require("./listbox-option");
5878
5879Object.keys(_listboxOption).forEach(function (key) {
5880  if (key === "default" || key === "__esModule") return;
5881  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5882  if (key in exports && exports[key] === _listboxOption[key]) return;
5883  Object.defineProperty(exports, key, {
5884    enumerable: true,
5885    get: function () {
5886      return _listboxOption[key];
5887    }
5888  });
5889});
5890
5891var _menu = require("./menu/");
5892
5893Object.keys(_menu).forEach(function (key) {
5894  if (key === "default" || key === "__esModule") return;
5895  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5896  if (key in exports && exports[key] === _menu[key]) return;
5897  Object.defineProperty(exports, key, {
5898    enumerable: true,
5899    get: function () {
5900      return _menu[key];
5901    }
5902  });
5903});
5904
5905var _menuItem = require("./menu-item/");
5906
5907Object.keys(_menuItem).forEach(function (key) {
5908  if (key === "default" || key === "__esModule") return;
5909  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5910  if (key in exports && exports[key] === _menuItem[key]) return;
5911  Object.defineProperty(exports, key, {
5912    enumerable: true,
5913    get: function () {
5914      return _menuItem[key];
5915    }
5916  });
5917});
5918
5919var _numberField = require("./number-field/");
5920

5921Object.keys(_numberField).forEach(function (key) {
5922  if (key === "default" || key === "__esModule") return;
5923  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5924  if (key in exports && exports[key] === _numberField[key]) return;
5925  Object.defineProperty(exports, key, {
5926    enumerable: true,
5927    get: function () {
5928      return _numberField[key];
5929    }
5930  });
5931});
5932
5933var _progress = require("./progress/");
5934
5935Object.keys(_progress).forEach(function (key) {
5936  if (key === "default" || key === "__esModule") return;
5937  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5938  if (key in exports && exports[key] === _progress[key]) return;
5939  Object.defineProperty(exports, key, {
5940    enumerable: true,
5941    get: function () {
5942      return _progress[key];
5943    }
5944  });
5945});
5946
5947var _radio = require("./radio/");
5948
5949Object.keys(_radio).forEach(function (key) {
5950  if (key === "default" || key === "__esModule") return;
5951  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5952  if (key in exports && exports[key] === _radio[key]) return;
5953  Object.defineProperty(exports, key, {
5954    enumerable: true,
5955    get: function () {
5956      return _radio[key];
5957    }
5958  });
5959});
5960
5961var _radioGroup = require("./radio-group/");
5962
5963Object.keys(_radioGroup).forEach(function (key) {
5964  if (key === "default" || key === "__esModule") return;
5965  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5966  if (key in exports && exports[key] === _radioGroup[key]) return;
5967  Object.defineProperty(exports, key, {
5968    enumerable: true,
5969    get: function () {
5970      return _radioGroup[key];
5971    }
5972  });
5973});
5974
5975var _search = require("./search/");
5976
5977Object.keys(_search).forEach(function (key) {
5978  if (key === "default" || key === "__esModule") return;
5979  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5980  if (key in exports && exports[key] === _search[key]) return;
5981  Object.defineProperty(exports, key, {
5982    enumerable: true,
5983    get: function () {
5984      return _search[key];
5985    }
5986  });
5987});
5988
5989var _select = require("./select");
5990
5991Object.keys(_select).forEach(function (key) {
5992  if (key === "default" || key === "__esModule") return;
5993  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
5994  if (key in exports && exports[key] === _select[key]) return;
5995  Object.defineProperty(exports, key, {
5996    enumerable: true,
5997    get: function () {
5998      return _select[key];
5999    }
6000  });
6001});
6002
6003var _skeleton = require("./skeleton/");
6004
6005Object.keys(_skeleton).forEach(function (key) {
6006  if (key === "default" || key === "__esModule") return;
6007  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
6008  if (key in exports && exports[key] === _skeleton[key]) return;
6009  Object.defineProperty(exports, key, {
6010    enumerable: true,
6011    get: function () {
6012      return _skeleton[key];
6013    }
6014  });
6015});
6016

6017var _slider = require("./slider/");
6018
6019Object.keys(_slider).forEach(function (key) {
6020  if (key === "default" || key === "__esModule") return;
6021  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
6022  if (key in exports && exports[key] === _slider[key]) return;
6023  Object.defineProperty(exports, key, {
6024    enumerable: true,
6025    get: function () {
6026      return _slider[key];
6027    }
6028  });
6029});
6030
6031var _sliderLabel = require("./slider-label/");
6032
6033Object.keys(_sliderLabel).forEach(function (key) {
6034  if (key === "default" || key === "__esModule") return;
6035  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
6036  if (key in exports && exports[key] === _sliderLabel[key]) return;
6037  Object.defineProperty(exports, key, {
6038    enumerable: true,
6039    get: function () {
6040      return _sliderLabel[key];
6041    }
6042  });
6043});
6044
6045var _switch = require("./switch/");
6046
6047Object.keys(_switch).forEach(function (key) {
6048  if (key === "default" || key === "__esModule") return;
6049  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
6050  if (key in exports && exports[key] === _switch[key]) return;
6051  Object.defineProperty(exports, key, {
6052    enumerable: true,
6053    get: function () {
6054      return _switch[key];
6055    }
6056  });
6057});
6058
6059var _tabs = require("./tabs/");
6060
6061Object.keys(_tabs).forEach(function (key) {
6062  if (key === "default" || key === "__esModule") return;
6063  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
6064  if (key in exports && exports[key] === _tabs[key]) return;
6065  Object.defineProperty(exports, key, {
6066    enumerable: true,
6067    get: function () {
6068      return _tabs[key];
6069    }
6070  });
6071});
6072
6073var _textArea = require("./text-area/");
6074
6075Object.keys(_textArea).forEach(function (key) {
6076  if (key === "default" || key === "__esModule") return;
6077  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
6078  if (key in exports && exports[key] === _textArea[key]) return;
6079  Object.defineProperty(exports, key, {
6080    enumerable: true,
6081    get: function () {
6082      return _textArea[key];
6083    }
6084  });
6085});
6086
6087var _textField = require("./text-field/");
6088
6089Object.keys(_textField).forEach(function (key) {
6090  if (key === "default" || key === "__esModule") return;
6091  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
6092  if (key in exports && exports[key] === _textField[key]) return;
6093  Object.defineProperty(exports, key, {
6094    enumerable: true,
6095    get: function () {
6096      return _textField[key];
6097    }
6098  });
6099});
6100
6101var _toolbar = require("./toolbar");
6102
6103Object.keys(_toolbar).forEach(function (key) {
6104  if (key === "default" || key === "__esModule") return;
6105  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
6106  if (key in exports && exports[key] === _toolbar[key]) return;
6107  Object.defineProperty(exports, key, {
6108    enumerable: true,
6109    get: function () {
6110      return _toolbar[key];
6111    }
6112  });
6113});
6114
6115var _tooltip = require("./tooltip");
6116
6117Object.keys(_tooltip).forEach(function (key) {
6118  if (key === "default" || key === "__esModule") return;
6119  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
6120  if (key in exports && exports[key] === _tooltip[key]) return;
6121  Object.defineProperty(exports, key, {
6122    enumerable: true,
6123    get: function () {
6124      return _tooltip[key];
6125    }
6126  });
6127});
6128
6129var _treeItem = require("./tree-item/");
6130
6131Object.keys(_treeItem).forEach(function (key) {
6132  if (key === "default" || key === "__esModule") return;
6133  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
6134  if (key in exports && exports[key] === _treeItem[key]) return;
6135  Object.defineProperty(exports, key, {
6136    enumerable: true,
6137    get: function () {
6138      return _treeItem[key];
6139    }
6140  });
6141});
6142
6143var _treeView = require("./tree-view/");
6144
6145Object.keys(_treeView).forEach(function (key) {
6146  if (key === "default" || key === "__esModule") return;
6147  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
6148  if (key in exports && exports[key] === _treeView[key]) return;
6149  Object.defineProperty(exports, key, {
6150    enumerable: true,
6151    get: function () {
6152      return _treeView[key];
6153    }
6154  });
6155});
6156
6157var _designTokens = require("./design-tokens");
6158

6159Object.keys(_designTokens).forEach(function (key) {
6160  if (key === "default" || key === "__esModule") return;
6161  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
6162  if (key in exports && exports[key] === _designTokens[key]) return;
6163  Object.defineProperty(exports, key, {
6164    enumerable: true,
6165    get: function () {
6166      return _designTokens[key];
6167    }
6168  });
6169});
6170
6171var _styles = require("./styles");
6172
6173Object.keys(_styles).forEach(function (key) {
6174  if (key === "default" || key === "__esModule") return;
6175  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
6176  if (key in exports && exports[key] === _styles[key]) return;
6177  Object.defineProperty(exports, key, {
6178    enumerable: true,
6179    get: function () {
6180      return _styles[key];
6181    }
6182  });
6183});
6184
6185var _palette = require("./color/palette");
6186
6187var _swatch = require("./color/swatch");
6188
6189var _isDark = require("./color/utilities/is-dark");
6190
6191var _baseLayerLuminance = require("./color/utilities/base-layer-luminance");
6192
6193},{"./accordion/":4,"./anchor/":6,"./anchored-region":8,"./badge/":10,"./breadcrumb":14,"./breadcrumb-item":12,"./button/":16,"./card/":20,"./checkbox/":22,"./color/palette":23,"./color/swatch":38,"./color/utilities/base-layer-luminance":39,"./color/utilities/is-dark":43,"./combobox/":46,"./custom-elements":47,"./data-grid":51,"./design-system-provider/":52,"./design-tokens":53,"./dialog/":55,"./divider/":57,"./flipper/":59,"./fluent-design-system":60,"./horizontal-scroll/":62,"./listbox":66,"./listbox-option":64,"./menu-item/":68,"./menu/":70,"./number-field/":72,"./progress/":74,"./radio-group/":79,"./radio/":81,"./search/":83,"./select":86,"./skeleton/":88,"./slider-label/":90,"./slider/":92,"./styles":97,"./switch/":103,"./tabs/":105,"./text-area/":111,"./text-field/":113,"./toolbar":115,"./tooltip":117,"./tree-item/":119,"./tree-view/":121}],64:[function(require,module,exports){
6194"use strict";
6195
6196Object.defineProperty(exports, "__esModule", {
6197  value: true
6198});
6199exports.fluentOption = exports.OptionStyles = void 0;
6200
6201var _fastFoundation = require("@microsoft/fast-foundation");
6202
6203var _listboxOption = require("./listbox-option.styles");
6204
6205/**
6206 * The Fluent option Custom Element. Implements {@link @microsoft/fast-foundation#ListboxOption}
6207 * {@link @microsoft/fast-foundation#listboxOptionTemplate}
6208 *
6209 *
6210 * @public
6211 * @remarks
6212 * HTML Element: \<fluent-option\>
6213 *
6214 */
6215const fluentOption = _fastFoundation.ListboxOption.compose({
6216  baseName: 'option',
6217  template: _fastFoundation.listboxOptionTemplate,
6218  styles: _listboxOption.optionStyles
6219});
6220/**
6221 * Styles for Option
6222 * @public
6223 */
6224
6225
6226exports.fluentOption = fluentOption;
6227const OptionStyles = _listboxOption.optionStyles;
6228exports.OptionStyles = OptionStyles;
6229
6230},{"./listbox-option.styles":65,"@microsoft/fast-foundation":256}],65:[function(require,module,exports){
6231"use strict";
6232
6233Object.defineProperty(exports, "__esModule", {
6234  value: true
6235});
6236exports.optionStyles = void 0;
6237
6238var _fastElement = require("@microsoft/fast-element");
6239
6240var _fastFoundation = require("@microsoft/fast-foundation");
6241
6242var _fastWebUtilities = require("@microsoft/fast-web-utilities");
6243
6244var _size = require("../styles/size");
6245
6246var _designTokens = require("../design-tokens");
6247
6248var _typeRamp = require("../styles/patterns/type-ramp");
6249
6250var _focus = require("../styles/focus");
6251
6252var _direction = require("../styles/direction");
6253
6254const optionStyles = (context, definition) => (0, _fastElement.css)`
6255    ${(0, _fastFoundation.display)('inline-flex')} :host {
6256      position: relative;
6257      ${_typeRamp.typeRampBase}
6258      background: ${_designTokens.neutralFillStealthRest};
6259      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
6260      border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
6261      box-sizing: border-box;
6262      color: ${_designTokens.neutralForegroundRest};
6263      cursor: pointer;
6264      fill: currentcolor;
6265      height: calc(${_size.heightNumber} * 1px);
6266      overflow: hidden;
6267      align-items: center;
6268      padding: 0 calc(((${_designTokens.designUnit} * 3) - ${_designTokens.strokeWidth} - 1) * 1px);
6269      user-select: none;
6270      white-space: nowrap;
6271    }
6272
6273    :host::before {
6274      content: '';
6275      display: block;
6276      position: absolute;
6277      left: calc((${_designTokens.focusStrokeWidth} - ${_designTokens.strokeWidth}) * 1px);
6278      top: calc((${_size.heightNumber} / 4) - ${_designTokens.focusStrokeWidth} * 1px);
6279      width: 3px;
6280      height: calc((${_size.heightNumber} / 2) * 1px);
6281      background: transparent;
6282      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
6283    }
6284
6285    :host(:not([disabled]):hover) {
6286      background: ${_designTokens.neutralFillStealthHover};
6287    }
6288
6289    :host(:not([disabled]):active) {
6290      background: ${_designTokens.neutralFillStealthActive};
6291    }
6292
6293    :host(:not([disabled]):active)::before {
6294      background: ${_designTokens.accentFillRest};
6295      height: calc(((${_size.heightNumber} / 2) - 6) * 1px);
6296    }
6297
6298    :host([aria-selected='true'])::before {
6299      background: ${_designTokens.accentFillRest};
6300    }
6301
6302    :host(:${_fastFoundation.focusVisible}) {
6303      ${_focus.focusTreatmentBase}
6304      background: ${_designTokens.neutralFillStealthFocus};
6305    }
6306
6307    :host([aria-selected='true']) {
6308      background: ${_designTokens.neutralFillSecondaryRest};
6309    }
6310
6311    :host(:not([disabled])[aria-selected='true']:hover) {
6312      background: ${_designTokens.neutralFillSecondaryHover};
6313    }
6314
6315    :host(:not([disabled])[aria-selected='true']:active) {
6316      background: ${_designTokens.neutralFillSecondaryActive};
6317    }
6318
6319    :host(:not([disabled]):not([aria-selected='true']):hover) {
6320      background: ${_designTokens.neutralFillStealthHover};
6321    }
6322
6323    :host(:not([disabled]):not([aria-selected='true']):active) {
6324      background: ${_designTokens.neutralFillStealthActive};
6325    }
6326
6327    :host([disabled]) {
6328      cursor: ${_fastFoundation.disabledCursor};
6329      opacity: ${_designTokens.disabledOpacity};
6330    }
6331
6332    .content {
6333      grid-column-start: 2;
6334      justify-self: start;
6335      overflow: hidden;
6336      text-overflow: ellipsis;
6337    }
6338
6339    .start,
6340    .end,
6341    ::slotted(svg) {
6342      display: flex;
6343    }
6344
6345    ::slotted([slot='end']) {
6346      margin-inline-start: 1ch;
6347    }
6348
6349    ::slotted([slot='start']) {
6350      margin-inline-end: 1ch;
6351    }
6352  `.withBehaviors(new _direction.DirectionalStyleSheetBehavior(null, (0, _fastElement.css)`
6353      :host::before {
6354        right: calc((${_designTokens.focusStrokeWidth} - ${_designTokens.strokeWidth}) * 1px);
6355      }
6356    `), (0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
6357        :host {
6358          background: ${_fastWebUtilities.SystemColors.ButtonFace};
6359          border-color: ${_fastWebUtilities.SystemColors.ButtonFace};
6360          color: ${_fastWebUtilities.SystemColors.ButtonText};
6361        }
6362        :host(:not([disabled]):not([aria-selected="true"]):hover),
6363        :host(:not([disabled])[aria-selected="true"]:hover),
6364        :host([aria-selected="true"]) {
6365          forced-color-adjust: none;
6366          background: ${_fastWebUtilities.SystemColors.Highlight};
6367          color: ${_fastWebUtilities.SystemColors.HighlightText};
6368        }
6369        :host(:not([disabled]):active)::before,
6370        :host([aria-selected='true'])::before {
6371          background: ${_fastWebUtilities.SystemColors.HighlightText};
6372        }
6373        :host([disabled]),
6374        :host([disabled]:not([aria-selected='true']):hover) {
6375          background: ${_fastWebUtilities.SystemColors.Canvas};
6376          color: ${_fastWebUtilities.SystemColors.GrayText};
6377          fill: currentcolor;
6378          opacity: 1;
6379        }
6380        :host(:${_fastFoundation.focusVisible}) {
6381          outline-color: ${_fastWebUtilities.SystemColors.CanvasText};
6382        }
6383      `));
6384
6385exports.optionStyles = optionStyles;
6386
6387},{"../design-tokens":53,"../styles/direction":94,"../styles/focus":96,"../styles/patterns/type-ramp":101,"../styles/size":102,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],66:[function(require,module,exports){
6388"use strict";
6389
6390Object.defineProperty(exports, "__esModule", {
6391  value: true
6392});

6393exports.listboxStyles = exports.fluentListbox = exports.Listbox = void 0;
6394
6395var _fastFoundation = require("@microsoft/fast-foundation");
6396
6397var _listbox = require("./listbox.styles");
6398
6399class Listbox extends _fastFoundation.Listbox {}
6400/**
6401 * The Fluent listbox Custom Element. Implements, {@link @microsoft/fast-foundation#Listbox}
6402 * {@link @microsoft/fast-foundation#listboxTemplate}
6403 *
6404 *
6405 * @public
6406 * @remarks
6407 * HTML Element: \<fluent-listbox\>
6408 *
6409 */
6410
6411
6412exports.Listbox = Listbox;
6413const fluentListbox = Listbox.compose({
6414  baseName: 'listbox',
6415  template: _fastFoundation.listboxTemplate,
6416  styles: _listbox.listboxStyles
6417});
6418/**
6419 * Styles for Listbox
6420 * @public
6421 */
6422
6423exports.fluentListbox = fluentListbox;
6424const listboxStyles = _listbox.listboxStyles;
6425exports.listboxStyles = listboxStyles;
6426
6427},{"./listbox.styles":67,"@microsoft/fast-foundation":256}],67:[function(require,module,exports){
6428"use strict";
6429
6430Object.defineProperty(exports, "__esModule", {
6431  value: true
6432});
6433exports.listboxStyles = void 0;
6434
6435var _fastElement = require("@microsoft/fast-element");
6436
6437var _fastFoundation = require("@microsoft/fast-foundation");
6438
6439var _designTokens = require("../design-tokens");
6440
6441var _focus = require("../styles/focus");
6442
6443const listboxStyles = (context, definition) => (0, _fastElement.css)`
6444    ${(0, _fastFoundation.display)('inline-flex')} :host {
6445      border: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeRest};
6446      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
6447      box-sizing: border-box;
6448      flex-direction: column;
6449      padding: calc(${_designTokens.designUnit} * 1px) 0;
6450    }
6451
6452    ::slotted(${context.tagFor(_fastFoundation.ListboxOption)}) {
6453      margin: 0 calc(${_designTokens.designUnit} * 1px);
6454    }
6455
6456    :host(:focus-within:not([disabled])) {
6457      ${_focus.focusTreatmentBase}
6458    }
6459  `;
6460
6461exports.listboxStyles = listboxStyles;
6462
6463},{"../design-tokens":53,"../styles/focus":96,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],68:[function(require,module,exports){
6464"use strict";
6465
6466Object.defineProperty(exports, "__esModule", {
6467  value: true
6468});
6469Object.defineProperty(exports, "MenuItem", {
6470  enumerable: true,
6471  get: function () {
6472    return _fastFoundation.MenuItem;
6473  }
6474});
6475exports.menuItemStyles = exports.fluentMenuItem = void 0;
6476
6477var _fastFoundation = require("@microsoft/fast-foundation");
6478
6479var _menuItem = require("./menu-item.styles");
6480
6481/**
6482 * The Fluent Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem},
6483 * {@link @microsoft/fast-foundation#menuItemTemplate}
6484 *
6485 *
6486 * @public
6487 * @remarks
6488 * HTML Element: \<fluent-menu-item\>
6489 */
6490const fluentMenuItem = _fastFoundation.MenuItem.compose({
6491  baseName: 'menu-item',
6492  template: _fastFoundation.menuItemTemplate,
6493  styles: _menuItem.menuItemStyles,
6494  checkboxIndicator: `
6495    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
6496      <path d="M13.86 3.66a.5.5 0 01-.02.7l-7.93 7.48a.6.6 0 01-.84-.02L2.4 9.1a.5.5 0 01.72-.7l2.4 2.44 7.65-7.2a.5.5 0 01.7.02z"/>
6497    </svg>
6498  `,
6499  expandCollapseGlyph: `
6500    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
6501      <path d="M5.65 3.15a.5.5 0 000 .7L9.79 8l-4.14 4.15a.5.5 0 00.7.7l4.5-4.5a.5.5 0 000-.7l-4.5-4.5a.5.5 0 00-.7 0z"/>
6502    </svg>
6503  `,
6504  radioIndicator: `
6505    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
6506      <circle cx="8" cy="8" r="2"/>
6507    </svg>
6508  `
6509});
6510/**
6511 * Styles for MenuItem
6512 * @public
6513 */
6514
6515
6516exports.fluentMenuItem = fluentMenuItem;
6517const menuItemStyles = _menuItem.menuItemStyles;
6518/**
6519 * Menu item base class
6520 * @public
6521 */
6522
6523exports.menuItemStyles = menuItemStyles;
6524
6525},{"./menu-item.styles":69,"@microsoft/fast-foundation":256}],69:[function(require,module,exports){
6526"use strict";
6527
6528Object.defineProperty(exports, "__esModule", {
6529  value: true
6530});
6531exports.menuItemStyles = void 0;
6532
6533var _fastElement = require("@microsoft/fast-element");
6534
6535var _fastFoundation = require("@microsoft/fast-foundation");
6536
6537var _fastWebUtilities = require("@microsoft/fast-web-utilities");
6538
6539var _index = require("../styles/index");
6540
6541var _designTokens = require("../design-tokens");
6542
6543var _typeRamp = require("../styles/patterns/type-ramp");
6544
6545var _focus = require("../styles/focus");
6546
6547const menuItemStyles = (context, definition) => (0, _fastElement.css)`
6548    ${(0, _fastFoundation.display)('grid')} :host {
6549      contain: layout;
6550      overflow: visible;
6551      ${_typeRamp.typeRampBase}
6552      box-sizing: border-box;
6553      height: calc(${_index.heightNumber} * 1px);
6554      grid-template-columns: minmax(32px, auto) 1fr minmax(32px, auto);
6555      grid-template-rows: auto;
6556      justify-items: center;
6557      align-items: center;
6558      padding: 0;
6559      white-space: nowrap;
6560      color: ${_designTokens.neutralForegroundRest};
6561      fill: currentcolor;
6562      cursor: pointer;
6563      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
6564      border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
6565      position: relative;
6566    }
6567
6568    :host(.indent-0) {
6569      grid-template-columns: auto 1fr minmax(32px, auto);
6570    }
6571
6572    :host(.indent-0) .content {
6573      grid-column: 1;
6574      grid-row: 1;
6575      margin-inline-start: 10px;
6576    }
6577
6578    :host(.indent-0) .expand-collapse-glyph-container {
6579      grid-column: 5;
6580      grid-row: 1;
6581    }
6582
6583    :host(.indent-2) {
6584      grid-template-columns: minmax(32px, auto) minmax(32px, auto) 1fr minmax(32px, auto) minmax(32px, auto);
6585    }
6586
6587    :host(.indent-2) .content {
6588      grid-column: 3;
6589      grid-row: 1;
6590      margin-inline-start: 10px;
6591    }
6592
6593    :host(.indent-2) .expand-collapse-glyph-container {
6594      grid-column: 5;
6595      grid-row: 1;
6596    }
6597
6598    :host(.indent-2) .start {
6599      grid-column: 2;
6600    }
6601
6602    :host(.indent-2) .end {
6603      grid-column: 4;
6604    }
6605
6606    :host(:${_fastFoundation.focusVisible}) {
6607      ${_focus.focusTreatmentBase}
6608    }
6609
6610    :host(:not([disabled]):hover) {
6611      background: ${_designTokens.neutralFillStealthHover};
6612    }
6613
6614    :host(:not([disabled]):active),
6615    :host(.expanded) {
6616      background: ${_designTokens.neutralFillStealthActive};
6617      color: ${_designTokens.neutralForegroundRest};
6618      z-index: 2;
6619    }
6620
6621    :host([disabled]) {
6622      cursor: ${_fastFoundation.disabledCursor};
6623      opacity: ${_designTokens.disabledOpacity};
6624    }
6625
6626    .content {
6627      grid-column-start: 2;
6628      justify-self: start;
6629      overflow: hidden;
6630      text-overflow: ellipsis;
6631    }
6632
6633    .start,
6634    .end {
6635      display: flex;
6636      justify-content: center;
6637    }
6638
6639    :host(.indent-0[aria-haspopup='menu']) {
6640      display: grid;
6641      grid-template-columns: minmax(32px, auto) auto 1fr minmax(32px, auto) minmax(32px, auto);
6642      align-items: center;
6643      min-height: 32px;
6644    }
6645
6646    :host(.indent-1[aria-haspopup='menu']),
6647    :host(.indent-1[role='menuitemcheckbox']),
6648    :host(.indent-1[role='menuitemradio']) {
6649      display: grid;
6650      grid-template-columns: minmax(32px, auto) auto 1fr minmax(32px, auto) minmax(32px, auto);
6651      align-items: center;
6652      min-height: 32px;
6653    }
6654
6655    :host(.indent-2:not([aria-haspopup='menu'])) .end {
6656      grid-column: 5;
6657    }
6658
6659    :host .input-container,
6660    :host .expand-collapse-glyph-container {
6661      display: none;
6662    }
6663
6664    :host([aria-haspopup='menu']) .expand-collapse-glyph-container,
6665    :host([role='menuitemcheckbox']) .input-container,
6666    :host([role='menuitemradio']) .input-container {
6667      display: grid;
6668    }
6669
6670    :host([aria-haspopup='menu']) .content,
6671    :host([role='menuitemcheckbox']) .content,
6672    :host([role='menuitemradio']) .content {
6673      grid-column-start: 3;
6674    }
6675
6676    :host([aria-haspopup='menu'].indent-0) .content {
6677      grid-column-start: 1;
6678    }
6679
6680    :host([aria-haspopup='menu']) .end,
6681    :host([role='menuitemcheckbox']) .end,
6682    :host([role='menuitemradio']) .end {
6683      grid-column-start: 4;
6684    }
6685
6686    :host .expand-collapse,
6687    :host .checkbox,
6688    :host .radio {
6689      display: flex;
6690      align-items: center;
6691      justify-content: center;
6692      position: relative;
6693      box-sizing: border-box;
6694    }
6695
6696    :host .checkbox-indicator,
6697    :host .radio-indicator,
6698    slot[name='checkbox-indicator'],
6699    slot[name='radio-indicator'] {
6700      display: none;
6701    }
6702
6703    ::slotted([slot='end']:not(svg)) {
6704      margin-inline-end: 10px;
6705      color: ${_designTokens.neutralForegroundHint};
6706    }
6707
6708    :host([aria-checked='true']) .checkbox-indicator,
6709    :host([aria-checked='true']) slot[name='checkbox-indicator'],
6710    :host([aria-checked='true']) .radio-indicator,
6711    :host([aria-checked='true']) slot[name='radio-indicator'] {
6712      display: flex;
6713    }
6714  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
6715        :host,
6716        ::slotted([slot='end']:not(svg)) {
6717          forced-color-adjust: none;
6718          color: ${_fastWebUtilities.SystemColors.ButtonText};
6719          fill: currentcolor;
6720        }
6721        :host(:not([disabled]):hover) {
6722          background: ${_fastWebUtilities.SystemColors.Highlight};
6723          color: ${_fastWebUtilities.SystemColors.HighlightText};
6724          fill: currentcolor;
6725        }
6726        :host(:hover) .start,
6727        :host(:hover) .end,
6728        :host(:hover)::slotted(svg),
6729        :host(:active) .start,
6730        :host(:active) .end,
6731        :host(:active)::slotted(svg),
6732        :host(:hover) ::slotted([slot='end']:not(svg)),
6733        :host(:${_fastFoundation.focusVisible}) ::slotted([slot='end']:not(svg)) {
6734          color: ${_fastWebUtilities.SystemColors.HighlightText};
6735          fill: currentcolor;
6736        }
6737        :host(.expanded) {
6738          background: ${_fastWebUtilities.SystemColors.Highlight};
6739          color: ${_fastWebUtilities.SystemColors.HighlightText};
6740        }
6741        :host(:${_fastFoundation.focusVisible}) {
6742          background: ${_fastWebUtilities.SystemColors.Highlight};
6743          outline-color: ${_fastWebUtilities.SystemColors.ButtonText};
6744          color: ${_fastWebUtilities.SystemColors.HighlightText};
6745          fill: currentcolor;
6746        }
6747        :host([disabled]),
6748        :host([disabled]:hover),
6749        :host([disabled]:hover) .start,
6750        :host([disabled]:hover) .end,
6751        :host([disabled]:hover)::slotted(svg),
6752        :host([disabled]:${_fastFoundation.focusVisible}) {
6753          background: ${_fastWebUtilities.SystemColors.ButtonFace};
6754          color: ${_fastWebUtilities.SystemColors.GrayText};
6755          fill: currentcolor;
6756          opacity: 1;
6757        }
6758        :host([disabled]:${_fastFoundation.focusVisible}) {
6759          outline-color: ${_fastWebUtilities.SystemColors.GrayText};
6760        }
6761        :host .expanded-toggle,
6762        :host .checkbox,
6763        :host .radio {
6764          border-color: ${_fastWebUtilities.SystemColors.ButtonText};
6765          background: ${_fastWebUtilities.SystemColors.HighlightText};
6766        }
6767        :host([checked]) .checkbox,
6768        :host([checked]) .radio {
6769          background: ${_fastWebUtilities.SystemColors.HighlightText};
6770          border-color: ${_fastWebUtilities.SystemColors.HighlightText};
6771        }
6772        :host(:hover) .expanded-toggle,
6773            :host(:hover) .checkbox,
6774            :host(:hover) .radio,
6775            :host(:${_fastFoundation.focusVisible}) .expanded-toggle,
6776            :host(:${_fastFoundation.focusVisible}) .checkbox,
6777            :host(:${_fastFoundation.focusVisible}) .radio,
6778            :host([checked]:hover) .checkbox,
6779            :host([checked]:hover) .radio,
6780            :host([checked]:${_fastFoundation.focusVisible}) .checkbox,
6781            :host([checked]:${_fastFoundation.focusVisible}) .radio {
6782          border-color: ${_fastWebUtilities.SystemColors.HighlightText};
6783        }
6784        :host([aria-checked='true']) {
6785          background: ${_fastWebUtilities.SystemColors.Highlight};
6786          color: ${_fastWebUtilities.SystemColors.HighlightText};
6787        }
6788        :host([aria-checked='true']) .checkbox-indicator,
6789        :host([aria-checked='true']) ::slotted([slot='checkbox-indicator']),
6790        :host([aria-checked='true']) ::slotted([slot='radio-indicator']) {
6791          fill: ${_fastWebUtilities.SystemColors.Highlight};
6792        }
6793        :host([aria-checked='true']) .radio-indicator {
6794          background: ${_fastWebUtilities.SystemColors.Highlight};
6795        }
6796      `), new _index.DirectionalStyleSheetBehavior((0, _fastElement.css)`
6797        .expand-collapse-glyph-container {
6798          transform: rotate(0deg);
6799        }
6800      `, (0, _fastElement.css)`
6801        .expand-collapse-glyph-container {
6802          transform: rotate(180deg);
6803        }
6804      `));
6805
6806exports.menuItemStyles = menuItemStyles;
6807
6808},{"../design-tokens":53,"../styles/focus":96,"../styles/index":97,"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],70:[function(require,module,exports){
6809"use strict";
6810
6811Object.defineProperty(exports, "__esModule", {
6812  value: true
6813});

6814exports.menuStyles = exports.fluentMenu = exports.Menu = void 0;
6815
6816var _fastFoundation = require("@microsoft/fast-foundation");
6817
6818var _designTokens = require("../design-tokens");
6819
6820var _menu = require("./menu.styles");
6821
6822/**
6823 * The Fluent menu class
6824 * @public
6825 */
6826class Menu extends _fastFoundation.Menu {
6827  /**
6828   * @internal
6829   */
6830  connectedCallback() {
6831    super.connectedCallback();
6832
6833    _designTokens.fillColor.setValueFor(this, _designTokens.neutralLayerFloating);
6834  }
6835
6836}
6837/**
6838 * The Fluent Menu Element. Implements {@link @microsoft/fast-foundation#Menu},
6839 * {@link @microsoft/fast-foundation#menuTemplate}
6840 *
6841 *
6842 * @public
6843 * @remarks
6844 * HTML Element: \<fluent-menu\>
6845 */
6846
6847
6848exports.Menu = Menu;
6849const fluentMenu = Menu.compose({
6850  baseName: 'menu',
6851  baseClass: _fastFoundation.Menu,
6852  template: _fastFoundation.menuTemplate,
6853  styles: _menu.menuStyles
6854});
6855/**
6856 * Styles for Menu
6857 * @public
6858 */
6859
6860exports.fluentMenu = fluentMenu;
6861const menuStyles = _menu.menuStyles;
6862exports.menuStyles = menuStyles;
6863
6864},{"../design-tokens":53,"./menu.styles":71,"@microsoft/fast-foundation":256}],71:[function(require,module,exports){
6865"use strict";
6866
6867Object.defineProperty(exports, "__esModule", {
6868  value: true
6869});
6870exports.menuStyles = void 0;
6871
6872var _fastElement = require("@microsoft/fast-element");
6873
6874var _fastFoundation = require("@microsoft/fast-foundation");
6875
6876var _fastWebUtilities = require("@microsoft/fast-web-utilities");
6877
6878var _index = require("../styles/index");
6879
6880var _designTokens = require("../design-tokens");
6881
6882const menuStyles = (context, definition) => (0, _fastElement.css)`
6883    ${(0, _fastFoundation.display)('block')} :host {
6884      background: ${_designTokens.neutralLayerFloating};
6885      border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
6886      border-radius: calc(${_designTokens.layerCornerRadius} * 1px);
6887      box-shadow: ${_index.elevationShadowFlyout};
6888      padding: calc((${_designTokens.designUnit} - ${_designTokens.strokeWidth}) * 1px) 0;
6889      max-width: 368px;
6890      min-width: 64px;
6891    }
6892
6893    :host([slot='submenu']) {
6894      width: max-content;
6895      margin: 0 calc(${_designTokens.designUnit} * 2px);
6896    }
6897
6898    ::slotted(${context.tagFor(_fastFoundation.MenuItem)}) {
6899      margin: 0 calc(${_designTokens.designUnit} * 1px);
6900    }
6901
6902    ::slotted(${context.tagFor(_fastFoundation.Divider)}) {
6903      margin: calc(${_designTokens.designUnit} * 1px) 0;
6904    }
6905
6906    ::slotted(hr) {
6907      box-sizing: content-box;
6908      height: 0;
6909      margin: calc(${_designTokens.designUnit} * 1px) 0;
6910      border: none;
6911      border-top: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeDividerRest};
6912    }
6913  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
6914        :host([slot='submenu']) {
6915          background: ${_fastWebUtilities.SystemColors.Canvas};
6916          border-color: ${_fastWebUtilities.SystemColors.CanvasText};
6917        }
6918      `));
6919
6920exports.menuStyles = menuStyles;
6921
6922},{"../design-tokens":53,"../styles/index":97,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],72:[function(require,module,exports){
6923"use strict";
6924
6925Object.defineProperty(exports, "__esModule", {
6926  value: true
6927});
6928exports.numberFieldStyles = exports.fluentNumberField = exports.NumberField = void 0;
6929
6930var _tslib = require("tslib");
6931
6932var _fastElement = require("@microsoft/fast-element");
6933
6934var _fastFoundation = require("@microsoft/fast-foundation");
6935
6936var _numberField = require("./number-field.styles");
6937
6938/**
6939 * The Fluent number field class
6940 * @internal
6941 */
6942class NumberField extends _fastFoundation.NumberField {
6943  /**
6944   * @internal
6945   */
6946  connectedCallback() {
6947    super.connectedCallback();
6948
6949    if (!this.appearance) {
6950      this.appearance = 'outline';
6951    }
6952  }
6953
6954}
6955
6956exports.NumberField = NumberField;
6957(0, _tslib.__decorate)([_fastElement.attr], NumberField.prototype, "appearance", void 0);
6958/**
6959 * Styles for NumberField
6960 * @public
6961 */
6962
6963const numberFieldStyles = _numberField.numberFieldStyles;
6964/**
6965 * The Fluent Number Field Custom Element. Implements {@link @microsoft/fast-foundation#NumberField},
6966 * {@link @microsoft/fast-foundation#numberFieldTemplate}
6967 *
6968 *
6969 * @public
6970 * @remarks
6971 * HTML Element: \<fluent-number-field\>
6972 *
6973 * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
6974 */
6975
6976exports.numberFieldStyles = numberFieldStyles;
6977const fluentNumberField = NumberField.compose({
6978  baseName: 'number-field',
6979  baseClass: _fastFoundation.NumberField,
6980  styles: _numberField.numberFieldStyles,
6981  template: _fastFoundation.numberFieldTemplate,
6982  shadowOptions: {
6983    delegatesFocus: true
6984  },
6985  stepDownGlyph: `
6986    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
6987      <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"/>
6988    </svg>
6989  `,
6990  stepUpGlyph: `
6991    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
6992      <path d="M2.15 7.35c.2.2.5.2.7 0L6 4.21l3.15 3.14a.5.5 0 10.7-.7l-3.5-3.5a.5.5 0 00-.7 0l-3.5 3.5a.5.5 0 000 .7z"/>
6993    </svg>
6994`
6995});
6996exports.fluentNumberField = fluentNumberField;
6997
6998},{"./number-field.styles":73,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"tslib":466}],73:[function(require,module,exports){
6999"use strict";
7000
7001Object.defineProperty(exports, "__esModule", {
7002  value: true
7003});
7004exports.numberFieldStyles = void 0;
7005
7006var _fastElement = require("@microsoft/fast-element");
7007
7008var _fastFoundation = require("@microsoft/fast-foundation");
7009
7010var _index = require("../styles/index");
7011
7012var _behaviors = require("../utilities/behaviors");
7013
7014var _designTokens = require("../design-tokens");
7015
7016const logicalControlSelector = '.root';
7017
7018const numberFieldStyles = (context, definition) => (0, _fastElement.css)`
7019    ${(0, _fastFoundation.display)('inline-block')}
7020
7021    ${(0, _index.baseInputStyles)(context, definition, logicalControlSelector)}
7022
7023    ${(0, _index.inputStateStyles)(context, definition, logicalControlSelector)}
7024
7025    .root {
7026      display: flex;
7027      flex-direction: row;
7028    }
7029
7030    .control {
7031      -webkit-appearance: none;
7032      color: inherit;
7033      background: transparent;
7034      border: 0;
7035      height: calc(100% - 4px);
7036      margin-top: auto;
7037      margin-bottom: auto;
7038      padding: 0 calc(${_designTokens.designUnit} * 2px + 1px);
7039      font-family: inherit;
7040      font-size: inherit;
7041      line-height: inherit;
7042    }
7043
7044    .start,
7045    .end {
7046      margin: auto;
7047      fill: currentcolor;
7048    }
7049
7050    .start {
7051      display: flex;
7052      margin-inline-start: 11px;
7053    }
7054
7055    .end {
7056      display: flex;
7057      margin-inline-end: 11px;
7058    }
7059
7060    .controls {
7061      opacity: 0;
7062      position: relative;
7063      top: -1px;
7064      z-index: 3;
7065    }
7066
7067    :host(:hover:not([disabled])) .controls,
7068    :host(:focus-within:not([disabled])) .controls {
7069      opacity: 1;
7070    }
7071
7072    .step-up,
7073    .step-down {
7074      display: flex;
7075      padding: 0 8px;
7076      cursor: pointer;
7077    }
7078
7079    .step-up {
7080      padding-top: 3px;
7081    }
7082  `.withBehaviors((0, _behaviors.appearanceBehavior)('outline', (0, _index.inputOutlineStyles)(context, definition, logicalControlSelector)), (0, _behaviors.appearanceBehavior)('filled', 

7082(0, _index.inputFilledStyles)(context, definition, logicalControlSelector)), (0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _index.inputForcedColorStyles)(context, definition, logicalControlSelector)));
7083
7084exports.numberFieldStyles = numberFieldStyles;
7085
7086},{"../design-tokens":53,"../styles/index":97,"../utilities/behaviors":123,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],74:[function(require,module,exports){
7087"use strict";
7088
7089Object.defineProperty(exports, "__esModule", {
7090  value: true
7091});
7092
7093var _progress = require("./progress/");
7094
7095Object.keys(_progress).forEach(function (key) {
7096  if (key === "default" || key === "__esModule") return;
7097  if (key in exports && exports[key] === _progress[key]) return;
7098  Object.defineProperty(exports, key, {
7099    enumerable: true,
7100    get: function () {
7101      return _progress[key];
7102    }
7103  });
7104});
7105
7106var _progressRing = require("./progress-ring/");
7107
7108Object.keys(_progressRing).forEach(function (key) {
7109  if (key === "default" || key === "__esModule") return;
7110  if (key in exports && exports[key] === _progressRing[key]) return;
7111  Object.defineProperty(exports, key, {
7112    enumerable: true,
7113    get: function () {
7114      return _progressRing[key];
7115    }
7116  });
7117});
7118
7119},{"./progress-ring/":75,"./progress/":77}],75:[function(require,module,exports){
7120"use strict";
7121
7122Object.defineProperty(exports, "__esModule", {
7123  value: true
7124});
7125exports.progressRingStyles = exports.fluentProgressRing = exports.ProgressRing = void 0;
7126
7127var _fastFoundation = require("@microsoft/fast-foundation");
7128
7129var _progressRing = require("./progress-ring.styles");
7130
7131/**
7132 * Progress Ring base class
7133 * @public
7134 */
7135class ProgressRing extends _fastFoundation.BaseProgress {}
7136/**
7137 * The Fluent Progress Ring Element. Implements {@link @microsoft/fast-foundation#BaseProgress},
7138 * {@link @microsoft/fast-foundation#progressRingTemplate}
7139 *
7140 *
7141 * @public
7142 * @remarks
7143 * HTML Element: \<fluent-progress-ring\>
7144 */
7145
7146
7147exports.ProgressRing = ProgressRing;
7148const fluentProgressRing = ProgressRing.compose({
7149  baseName: 'progress-ring',
7150  template: _fastFoundation.progressRingTemplate,
7151  styles: _progressRing.progressRingStyles,
7152  indeterminateIndicator: `
7153    <svg class="progress" part="progress" viewBox="0 0 16 16">
7154        <circle
7155            class="background"
7156            part="background"
7157            cx="8px"
7158            cy="8px"
7159            r="7px"
7160        ></circle>
7161        <circle
7162            class="indeterminate-indicator-1"
7163            part="indeterminate-indicator-1"
7164            cx="8px"
7165            cy="8px"
7166            r="7px"
7167        ></circle>
7168    </svg>
7169  `
7170});
7171/**
7172 * Styles for ProgressRing
7173 * @public
7174 */
7175
7176exports.fluentProgressRing = fluentProgressRing;
7177const progressRingStyles = _progressRing.progressRingStyles;
7178exports.progressRingStyles = progressRingStyles;
7179
7180},{"./progress-ring.styles":76,"@microsoft/fast-foundation":256}],76:[function(require,module,exports){
7181"use strict";
7182
7183Object.defineProperty(exports, "__esModule", {
7184  value: true
7185});
7186exports.progressRingStyles = void 0;
7187
7188var _fastElement = require("@microsoft/fast-element");
7189
7190var _fastWebUtilities = require("@microsoft/fast-web-utilities");
7191
7192var _fastFoundation = require("@microsoft/fast-foundation");
7193
7194var _styles = require("../../styles");
7195
7196var _designTokens = require("../../design-tokens");
7197
7198const progressRingStyles = (context, definition) => (0, _fastElement.css)`
7199    ${(0, _fastFoundation.display)('flex')} :host {
7200      align-items: center;
7201      height: calc(${_styles.heightNumber} * 1px);
7202      width: calc(${_styles.heightNumber} * 1px);
7203    }
7204
7205    .progress {
7206      height: 100%;
7207      width: 100%;
7208    }
7209
7210    .background {
7211      fill: none;
7212      stroke-width: 2px;
7213    }
7214
7215    .determinate {
7216      stroke: ${_designTokens.accentFillRest};
7217      fill: none;
7218      stroke-width: 2px;
7219      stroke-linecap: round;
7220      transform-origin: 50% 50%;
7221      transform: rotate(-90deg);
7222      transition: all 0.2s ease-in-out;
7223    }
7224
7225    .indeterminate-indicator-1 {
7226      stroke: ${_designTokens.accentFillRest};
7227      fill: none;
7228      stroke-width: 2px;
7229      stroke-linecap: round;
7230      transform-origin: 50% 50%;
7231      transform: rotate(-90deg);
7232      transition: all 0.2s ease-in-out;
7233      animation: spin-infinite 2s linear infinite;
7234    }
7235
7236    :host(.paused) .indeterminate-indicator-1 {
7237      animation: none;
7238      stroke: ${_designTokens.neutralForegroundHint};
7239    }
7240
7241    :host(.paused) .determinate {
7242      stroke: ${_designTokens.neutralForegroundHint};
7243    }
7244

7245    @keyframes spin-infinite {
7246      0% {
7247        stroke-dasharray: 0.01px 43.97px;
7248        transform: rotate(0deg);
7249      }
7250      50% {
7251        stroke-dasharray: 21.99px 21.99px;
7252        transform: rotate(450deg);
7253      }
7254      100% {
7255        stroke-dasharray: 0.01px 43.97px;
7256        transform: rotate(1080deg);
7257      }
7258    }
7259  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
7260        .background {
7261          stroke: ${_fastWebUtilities.SystemColors.Field};
7262        }
7263        .determinate,
7264        .indeterminate-indicator-1 {
7265          stroke: ${_fastWebUtilities.SystemColors.ButtonText};
7266        }
7267        :host(.paused) .determinate,
7268        :host(.paused) .indeterminate-indicator-1 {
7269          stroke: ${_fastWebUtilities.SystemColors.GrayText};
7270        }
7271      `));
7272
7273exports.progressRingStyles = progressRingStyles;
7274
7275},{"../../design-tokens":53,"../../styles":97,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],77:[function(require,module,exports){
7276"use strict";
7277
7278Object.defineProperty(exports, "__esModule", {
7279  value: true
7280});
7281exports.progressStyles = exports.fluentProgress = exports.Progress = void 0;
7282
7283var _fastFoundation = require("@microsoft/fast-foundation");
7284
7285var _progress = require("./progress.styles");
7286
7287/**
7288 * Progress base class
7289 * @public
7290 */
7291class Progress extends _fastFoundation.BaseProgress {}
7292/**
7293 * The Fluent Progress Element. Implements {@link @microsoft/fast-foundation#BaseProgress},
7294 * {@link @microsoft/fast-foundation#progressTemplate}
7295 *
7296 *
7297 * @public
7298 * @remarks
7299 * HTML Element: \<fluent-progress\>
7300 */
7301
7302
7303exports.Progress = Progress;
7304const fluentProgress = Progress.compose({
7305  baseName: 'progress',
7306  template: _fastFoundation.progressTemplate,
7307  styles: _progress.progressStyles,
7308  indeterminateIndicator1: `
7309    <span class="indeterminate-indicator-1" part="indeterminate-indicator-1"></span>
7310  `,
7311  indeterminateIndicator2: `
7312    <span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>
7313  `
7314});
7315/**
7316 * Styles for Progress
7317 * @public
7318 */
7319
7320exports.fluentProgress = fluentProgress;
7321const progressStyles = _progress.progressStyles;
7322exports.progressStyles = progressStyles;
7323
7324},{"./progress.styles":78,"@microsoft/fast-foundation":256}],78:[function(require,module,exports){
7325"use strict";
7326
7327Object.defineProperty(exports, "__esModule", {
7328  value: true
7329});
7330exports.progressStyles = void 0;
7331
7332var _fastElement = require("@microsoft/fast-element");
7333
7334var _fastWebUtilities = require("@microsoft/fast-web-utilities");
7335
7336var _fastFoundation = require("@microsoft/fast-foundation");
7337
7338var _designTokens = require("../../design-tokens");
7339
7340const progressStyles = (context, definition) => (0, _fastElement.css)`
7341    ${(0, _fastFoundation.display)('flex')} :host {
7342      align-items: center;
7343      height: calc((${_designTokens.strokeWidth} * 3) * 1px);
7344    }
7345
7346    .progress {
7347      background-color: ${_designTokens.neutralStrokeStrongRest};
7348      border-radius: calc(${_designTokens.designUnit} * 1px);
7349      width: 100%;
7350      height: calc(${_designTokens.strokeWidth} * 1px);
7351      display: flex;
7352      align-items: center;
7353      position: relative;
7354    }
7355
7356    .determinate {
7357      background-color: ${_designTokens.accentFillRest};
7358      border-radius: calc(${_designTokens.designUnit} * 1px);
7359      height: calc((${_designTokens.strokeWidth} * 3) * 1px);
7360      transition: all 0.2s ease-in-out;
7361      display: flex;
7362    }
7363
7364    .indeterminate {
7365      height: calc((${_designTokens.strokeWidth} * 3) * 1px);
7366      border-radius: calc(${_designTokens.designUnit} * 1px);
7367      display: flex;
7368      width: 100%;
7369      position: relative;
7370      overflow: hidden;
7371    }
7372
7373    .indeterminate-indicator-1 {
7374      position: absolute;
7375      opacity: 0;
7376      height: 100%;
7377      background-color: ${_designTokens.accentFillRest};
7378      border-radius: calc(${_designTokens.designUnit} * 1px);
7379      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
7380      width: 40%;
7381      animation: indeterminate-1 2s infinite;
7382    }
7383
7384    .indeterminate-indicator-2 {
7385      position: absolute;
7386      opacity: 0;
7387      height: 100%;
7388      background-color: ${_designTokens.accentFillRest};
7389      border-radius: calc(${_designTokens.designUnit} * 1px);
7390      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
7391      width: 60%;
7392      animation: indeterminate-2 2s infinite;
7393    }
7394
7395    :host(.paused) .indeterminate-indicator-1,
7396    :host(.paused) .indeterminate-indicator-2 {
7397      animation: none;
7398      background-color: ${_designTokens.neutralForegroundHint};
7399      width: 100%;
7400      opacity: 1;
7401    }
7402
7403    :host(.paused) .determinate {
7404      background-color: ${_designTokens.neutralForegroundHint};
7405    }
7406

7407    @keyframes indeterminate-1 {
7408      0% {
7409        opacity: 1;
7410        transform: translateX(-100%);
7411      }
7412      70% {
7413        opacity: 1;
7414        transform: translateX(300%);
7415      }
7416      70.01% {
7417        opacity: 0;
7418      }
7419      100% {
7420        opacity: 0;
7421        transform: translateX(300%);
7422      }
7423    }
7424
7425    @keyframes indeterminate-2 {
7426      0% {
7427        opacity: 0;
7428        transform: translateX(-150%);
7429      }
7430      29.99% {
7431        opacity: 0;
7432      }
7433      30% {
7434        opacity: 1;
7435        transform: translateX(-150%);
7436      }
7437      100% {
7438        transform: translateX(166.66%);
7439        opacity: 1;
7440      }
7441    }
7442  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
7443        .indeterminate-indicator-1,
7444        .indeterminate-indicator-2,
7445        .determinate,
7446        .progress {
7447          background-color: ${_fastWebUtilities.SystemColors.ButtonText};
7448        }
7449        :host(.paused) .indeterminate-indicator-1,
7450        :host(.paused) .indeterminate-indicator-2,
7451        :host(.paused) .determinate {
7452          background-color: ${_fastWebUtilities.SystemColors.GrayText};
7453        }
7454      `));
7455
7456exports.progressStyles = progressStyles;
7457
7458},{"../../design-tokens":53,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],79:[function(require,module,exports){
7459"use strict";
7460
7461Object.defineProperty(exports, "__esModule", {
7462  value: true
7463});
7464Object.defineProperty(exports, "RadioGroup", {
7465  enumerable: true,
7466  get: function () {
7467    return _fastFoundation.RadioGroup;
7468  }
7469});
7470exports.radioGroupStyles = exports.fluentRadioGroup = void 0;
7471
7472var _fastFoundation = require("@microsoft/fast-foundation");
7473
7474var _radioGroup = require("./radio-group.styles");
7475
7476/**
7477 * The Fluent Radio Group Element. Implements {@link @microsoft/fast-foundation#RadioGroup},
7478 * {@link @microsoft/fast-foundation#radioGroupTemplate}
7479 *
7480 *
7481 * @public
7482 * @remarks
7483 * HTML Element: \<fluent-radio-group\>
7484 */
7485const fluentRadioGroup = _fastFoundation.RadioGroup.compose({
7486  baseName: 'radio-group',
7487  template: _fastFoundation.radioGroupTemplate,
7488  styles: _radioGroup.radioGroupStyles
7489});
7490/**
7491 * Styles for RadioGroup
7492 * @public
7493 */
7494
7495
7496exports.fluentRadioGroup = fluentRadioGroup;
7497const radioGroupStyles = _radioGroup.radioGroupStyles;
7498/**
7499 * Radio group base class
7500 * @public
7501 */
7502
7503exports.radioGroupStyles = radioGroupStyles;
7504
7505},{"./radio-group.styles":80,"@microsoft/fast-foundation":256}],80:[function(require,module,exports){
7506"use strict";
7507
7508Object.defineProperty(exports, "__esModule", {
7509  value: true
7510});
7511exports.radioGroupStyles = void 0;
7512
7513var _fastElement = require("@microsoft/fast-element");
7514
7515var _fastFoundation = require("@microsoft/fast-foundation");
7516
7517const radioGroupStyles = (context, definition) => (0, _fastElement.css)`
7518  ${(0, _fastFoundation.display)('flex')} :host {
7519    align-items: flex-start;
7520    flex-direction: column;
7521  }
7522
7523  .positioning-region {
7524    display: flex;
7525    flex-wrap: wrap;
7526  }
7527
7528  :host([orientation='vertical']) .positioning-region {
7529    flex-direction: column;
7530  }
7531
7532  :host([orientation='horizontal']) .positioning-region {
7533    flex-direction: row;
7534  }
7535`;
7536
7537exports.radioGroupStyles = radioGroupStyles;
7538
7539},{"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],81:[function(require,module,exports){
7540"use strict";
7541
7542Object.defineProperty(exports, "__esModule", {
7543  value: true
7544});
7545Object.defineProperty(exports, "Radio", {
7546  enumerable: true,
7547  get: function () {
7548    return _fastFoundation.Radio;
7549  }
7550});
7551exports.fluentRadio = exports.RadioStyles = void 0;
7552
7553var _fastFoundation = require("@microsoft/fast-foundation");
7554
7555var _radio = require("./radio.styles");
7556
7557/**
7558 * The Fluent Radio Element. Implements {@link @microsoft/fast-foundation#Radio},
7559 * {@link @microsoft/fast-foundation#radioTemplate}
7560 *
7561 *
7562 * @public
7563 * @remarks
7564 * HTML Element: \<fluent-radio\>
7565 */
7566const fluentRadio = _fastFoundation.Radio.compose({
7567  baseName: 'radio',
7568  template: _fastFoundation.radioTemplate,
7569  styles: _radio.radioStyles,
7570  checkedIndicator: `
7571    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
7572      <circle cx="8" cy="8" r="4"/>
7573    </svg>
7574  `
7575});
7576/**
7577 * Styles for Radio
7578 * @public
7579 */
7580
7581
7582exports.fluentRadio = fluentRadio;
7583const RadioStyles = _radio.radioStyles;
7584/**
7585 * Radio base class
7586 * @public
7587 */
7588
7589exports.RadioStyles = RadioStyles;
7590
7591},{"./radio.styles":82,"@microsoft/fast-foundation":256}],82:[function(require,module,exports){
7592"use strict";
7593
7594Object.defineProperty(exports, "__esModule", {
7595  value: true
7596});
7597exports.radioStyles = void 0;
7598
7599var _fastElement = require("@microsoft/fast-element");
7600
7601var _fastWebUtilities = require("@microsoft/fast-web-utilities");
7602
7603var _fastFoundation = require("@microsoft/fast-foundation");
7604
7605var _styles = require("../styles");
7606
7607var _designTokens = require("../design-tokens");
7608
7609var _typeRamp = require("../styles/patterns/type-ramp");
7610
7611var _focus = require("../styles/focus");
7612
7613const radioStyles = (context, definition) => (0, _fastElement.css)`
7614    ${(0, _fastFoundation.display)('inline-flex')} :host {
7615      --input-size: calc((${_styles.heightNumber} / 2) + ${_designTokens.designUnit});
7616      align-items: center;
7617      outline: none;
7618      ${
7619/*
7620 * Chromium likes to select label text or the default slot when
7621 * the radio button is clicked. Maybe there is a better solution here?
7622 */
7623''} user-select: none;
7624      position: relative;
7625      flex-direction: row;
7626      transition: all 0.2s ease-in-out;
7627    }
7628
7629    .control {
7630      position: relative;
7631      width: calc(var(--input-size) * 1px);
7632      height: calc(var(--input-size) * 1px);
7633      box-sizing: border-box;
7634      border-radius: 50%;
7635      border: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeStrongRest};
7636      background: ${_designTokens.neutralFillInputAltRest};
7637      cursor: pointer;
7638    }
7639
7640    .label__hidden {
7641      display: none;
7642      visibility: hidden;
7643    }
7644
7645    .label {
7646      ${_typeRamp.typeRampBase}
7647      color: ${_designTokens.neutralForegroundRest};
7648      ${

7649/* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */
7650''} padding-inline-start: calc(${_designTokens.designUnit} * 2px + 2px);
7651      margin-inline-end: calc(${_designTokens.designUnit} * 2px + 2px);
7652      cursor: pointer;
7653    }
7654
7655    .control,
7656    slot[name='checked-indicator'] {
7657      flex-shrink: 0;
7658    }
7659
7660    slot[name='checked-indicator'] {
7661      display: flex;
7662      align-items: center;
7663      justify-content: center;
7664      width: 100%;
7665      height: 100%;
7666      fill: ${_designTokens.foregroundOnAccentRest};
7667      opacity: 0;
7668      pointer-events: none;
7669    }
7670
7671    :host(:not(.disabled):hover) .control {
7672      background: ${_designTokens.neutralFillInputAltHover};
7673      border-color: ${_designTokens.neutralStrokeStrongHover};
7674    }
7675
7676    :host(:not(.disabled):active) .control {
7677      background: ${_designTokens.neutralFillInputAltActive};
7678      border-color: ${_designTokens.neutralStrokeStrongActive};
7679    }
7680
7681    :host(:not(.disabled):active) slot[name='checked-indicator'] {
7682      opacity: 1;
7683    }
7684
7685    :host(:${_fastFoundation.focusVisible}) .control {
7686      ${_focus.focusTreatmentTight}
7687      background: ${_designTokens.neutralFillInputAltFocus};
7688    }
7689
7690    :host(.checked) .control {
7691      background: ${_designTokens.accentFillRest};
7692      border-color: transparent;
7693    }
7694
7695    :host(.checked:not(.disabled):hover) .control {
7696      background: ${_designTokens.accentFillHover};
7697      border-color: transparent;
7698    }
7699
7700    :host(.checked:not(.disabled):active) .control {
7701      background: ${_designTokens.accentFillActive};
7702      border-color: transparent;
7703    }
7704
7705    :host(.disabled) .label,
7706    :host(.readonly) .label,
7707    :host(.readonly) .control,
7708    :host(.disabled) .control {
7709      cursor: ${_fastFoundation.disabledCursor};
7710    }
7711
7712    :host(.checked) slot[name='checked-indicator'] {
7713      opacity: 1;
7714    }
7715
7716    :host(.disabled) {
7717      opacity: ${_designTokens.disabledOpacity};
7718    }
7719  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
7720        .control {
7721          background: ${_fastWebUtilities.SystemColors.Field};
7722          border-color: ${_fastWebUtilities.SystemColors.FieldText};
7723        }
7724        :host(:not(.disabled):hover) .control,
7725        :host(:not(.disabled):active) .control {
7726          border-color: ${_fastWebUtilities.SystemColors.Highlight};
7727        }
7728        :host(:${_fastFoundation.focusVisible}) .control {
7729          forced-color-adjust: none;
7730          background: ${_fastWebUtilities.SystemColors.Field};
7731          outline-color: ${_fastWebUtilities.SystemColors.FieldText};
7732        }
7733        :host(.checked:not(.disabled):hover) .control,
7734        :host(.checked:not(.disabled):active) .control {
7735          border-color: ${_fastWebUtilities.SystemColors.Highlight};
7736          background: ${_fastWebUtilities.SystemColors.Highlight};
7737        }
7738        :host(.checked) slot[name='checked-indicator'] {
7739          fill: ${_fastWebUtilities.SystemColors.Highlight};
7740        }
7741        :host(.checked:hover) .control slot[name='checked-indicator'] {
7742          fill: ${_fastWebUtilities.SystemColors.HighlightText};
7743        }
7744        :host(.disabled) {
7745          opacity: 1;
7746        }
7747        :host(.disabled) .label {
7748          color: ${_fastWebUtilities.SystemColors.GrayText};
7749        }
7750        :host(.disabled) .control,
7751        :host(.checked.disabled) .control {
7752          background: ${_fastWebUtilities.SystemColors.Field};
7753          border-color: ${_fastWebUtilities.SystemColors.GrayText};
7754        }
7755        :host(.disabled) slot[name='checked-indicator'],
7756        :host(.checked.disabled) slot[name='checked-indicator'] {
7757          fill: ${_fastWebUtilities.SystemColors.GrayText};
7758        }
7759      `));
7760
7761exports.radioStyles = radioStyles;
7762
7763},{"../design-tokens":53,"../styles":97,"../styles/focus":96,"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],83:[function(require,module,exports){
7764"use strict";
7765
7766Object.defineProperty(exports, "__esModule", {
7767  value: true
7768});
7769var _exportNames = {
7770  Search: true,
7771  fluentSearch: true,
7772  searchStyles: true
7773};

7774exports.searchStyles = exports.fluentSearch = exports.Search = void 0;
7775
7776var _tslib = require("tslib");
7777
7778var _fastElement = require("@microsoft/fast-element");
7779
7780var _fastFoundation = require("@microsoft/fast-foundation");
7781
7782var _search = require("./search.template");
7783
7784Object.keys(_search).forEach(function (key) {
7785  if (key === "default" || key === "__esModule") return;
7786  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
7787  if (key in exports && exports[key] === _search[key]) return;
7788  Object.defineProperty(exports, key, {
7789    enumerable: true,
7790    get: function () {
7791      return _search[key];
7792    }
7793  });
7794});
7795
7796var _search2 = require("./search.styles");
7797
7798/**
7799 * The Fluent search class
7800 * @internal
7801 */
7802class Search extends _fastFoundation.Search {
7803  constructor() {
7804    super(...arguments);
7805    /**
7806     * The appearance of the element.
7807     *
7808     * @public
7809     * @remarks
7810     * HTML Attribute: appearance
7811     */
7812
7813    this.appearance = 'outline';
7814  }
7815
7816}
7817
7818exports.Search = Search;
7819(0, _tslib.__decorate)([_fastElement.attr], Search.prototype, "appearance", void 0);
7820/**
7821 * The Fluent Search Custom Element. Implements {@link @microsoft/fast-foundation#Search},
7822 * {@link @microsoft/fast-foundation#searchTemplate}
7823 *
7824 *
7825 * @public
7826 * @remarks
7827 * HTML Element: \<fluent-search\>
7828 *
7829 * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
7830 */
7831
7832const fluentSearch = Search.compose({
7833  baseName: 'search',
7834  baseClass: _fastFoundation.Search,
7835  template: _search.searchTemplate,
7836  styles: _search2.searchStyles,
7837  start: `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg%22%3E"><path d="M8.5 3a5.5 5.5 0 0 1 4.23 9.02l4.12 4.13a.5.5 0 0 1-.63.76l-.07-.06-4.13-4.12A5.5 5.5 0 1 1 8.5 3Zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"/></svg>`,
7838  shadowOptions: {
7839    delegatesFocus: true
7840  }
7841});
7842exports.fluentSearch = fluentSearch;
7843
7844/**
7845 * Styles for Search
7846 * @public
7847 */
7848const searchStyles = _search2.searchStyles;
7849exports.searchStyles = searchStyles;
7850
7851},{"./search.styles":84,"./search.template":85,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"tslib":466}],84:[function(require,module,exports){
7852"use strict";
7853
7854Object.defineProperty(exports, "__esModule", {
7855  value: true
7856});
7857exports.searchStyles = void 0;
7858
7859var _fastElement = require("@microsoft/fast-element");
7860
7861var _fastFoundation = require("@microsoft/fast-foundation");
7862
7863var _styles = require("../styles");
7864
7865var _behaviors = require("../utilities/behaviors");
7866
7867var _designTokens = require("../design-tokens");
7868
7869var _typeRamp = require("../styles/patterns/type-ramp");
7870
7871const logicalControlSelector = '.root';
7872
7873const clearButtonHover = _fastFoundation.DesignToken.create("clear-button-hover").withDefault(target => {
7874  const buttonRecipe = _designTokens.neutralFillStealthRecipe.getValueFor(target);
7875
7876  const inputRecipe = _designTokens.neutralFillInputRecipe.getValueFor(target);
7877
7878  return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).hover;
7879});
7880
7881const clearButtonActive = _fastFoundation.DesignToken.create("clear-button-active").withDefault(target => {
7882  const buttonRecipe = _designTokens.neutralFillStealthRecipe.getValueFor(target);
7883
7884  const inputRecipe = _designTokens.neutralFillInputRecipe.getValueFor(target);
7885
7886  return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).active;
7887});
7888
7889const searchStyles = (context, definition) => (0, _fastElement.css)`
7890    ${(0, _fastFoundation.display)('inline-block')}
7891
7892    ${(0, _styles.baseInputStyles)(context, definition, logicalControlSelector)}
7893
7894    ${(0, _styles.inputStateStyles)(context, definition, logicalControlSelector)}
7895
7896    .root {
7897      display: flex;
7898      flex-direction: row;
7899    }
7900    .control {
7901      -webkit-appearance: none;
7902      color: inherit;
7903      background: transparent;
7904      border: 0;
7905      height: calc(100% - 4px);
7906      margin-top: auto;
7907      margin-bottom: auto;
7908      padding: 0 calc(${_designTokens.designUnit} * 2px + 1px);
7909      font-family: inherit;
7910      font-size: inherit;
7911      line-height: inherit;
7912    }
7913    .clear-button {
7914      display: inline-flex;
7915      align-items: center;
7916      margin: 1px;
7917      height: calc(100% - 2px);
7918      opacity: 0;
7919      background: transparent;
7920      color: ${_designTokens.neutralForegroundRest};
7921      fill: currentcolor;
7922      border: none;
7923      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
7924      min-width: calc(${_styles.heightNumber} * 1px);
7925      ${_typeRamp.typeRampBase}
7926      outline: none;
7927      padding: 0 calc((10 + (${_designTokens.designUnit} * 2 * ${_designTokens.density})) * 1px);
7928    }
7929    .clear-button:hover {
7930      background: ${clearButtonHover};
7931    }
7932    .clear-button:active {
7933      background: ${clearButtonActive};
7934    }
7935    :host(:hover:not([disabled], [readOnly])) .clear-button,
7936    :host(:active:not([disabled], [readOnly])) .clear-button,
7937    :host(:focus-within:not([disabled], [readOnly])) .clear-button {
7938        opacity: 1;
7939    }
7940    :host(:hover:not([disabled], [readOnly])) .clear-button__hidden,
7941    :host(:active:not([disabled], [readOnly])) .clear-button__hidden,
7942    :host(:focus-within:not([disabled], [readOnly])) .clear-button__hidden {
7943        opacity: 0;
7944    }
7945    .control::-webkit-search-cancel-button {
7946      -webkit-appearance: none;
7947    }
7948    .input-wrapper {
7949      display: flex;
7950      position: relative;
7951      width: 100%;
7952    }
7953    .start,
7954    .end {
7955      display: flex;
7956      margin: 1px;
7957      align-items: center;
7958    }
7959    .start {
7960      display: flex;
7961      margin-inline-start: 11px;
7962    }
7963    ::slotted([slot="end"]) {
7964      height: 100%
7965    }
7966    .clear-button__hidden {
7967      opacity: 0;
7968    }
7969    .end {
7970        margin-inline-end: 11px;
7971    }
7972    ::slotted(${context.tagFor(_fastFoundation.Button)}) {
7973      margin-inline-end: 1px;
7974    }
7975  `.withBehaviors((0, _behaviors.appearanceBehavior)('outline', (0, _styles.inputOutlineStyles)(context, definition, logicalControlSelector)), (0, _behaviors.appearanceBehavior)('filled', 

7975(0, _styles.inputFilledStyles)(context, definition, logicalControlSelector)), (0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _styles.inputForcedColorStyles)(context, definition, logicalControlSelector)));
7976
7977exports.searchStyles = searchStyles;
7978
7979},{"../design-tokens":53,"../styles":97,"../styles/patterns/type-ramp":101,"../utilities/behaviors":123,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],85:[function(require,module,exports){
7980"use strict";
7981
7982Object.defineProperty(exports, "__esModule", {
7983  value: true
7984});
7985exports.searchTemplate = void 0;
7986
7987var _fastElement = require("@microsoft/fast-element");
7988
7989var _fastFoundation = require("@microsoft/fast-foundation");
7990
7991/**
7992 * @public
7993 */
7994const searchTemplate = (context, definition) => (0, _fastElement.html)`
7995  <template
7996    class="
7997            ${x => x.readOnly ? 'readonly' : ''}
7998        "
7999  >
8000    <label
8001      part="label"
8002      for="control"
8003      class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? 'label' : 'label label__hidden'}"
8004    >
8005      <slot ${(0, _fastElement.slotted)({
8006  property: 'defaultSlottedNodes',
8007  filter: _fastFoundation.whitespaceFilter
8008})}></slot>
8009    </label>
8010    <div class="root" part="root" ${(0, _fastElement.ref)('root')}>
8011      ${(0, _fastFoundation.startSlotTemplate)(context, definition)}
8012      <div class="input-wrapper" part="input-wrapper">
8013        <input
8014          class="control"
8015          part="control"
8016          id="control"
8017          @input="${x => x.handleTextInput()}"
8018          @change="${x => x.handleChange()}"
8019          ?autofocus="${x => x.autofocus}"
8020          ?disabled="${x => x.disabled}"
8021          list="${x => x.list}"
8022          maxlength="${x => x.maxlength}"
8023          minlength="${x => x.minlength}"
8024          pattern="${x => x.pattern}"
8025          placeholder="${x => x.placeholder}"
8026          ?readonly="${x => x.readOnly}"
8027          ?required="${x => x.required}"
8028          size="${x => x.size}"
8029          ?spellcheck="${x => x.spellcheck}"
8030          :value="${x => x.value}"
8031          type="search"
8032          aria-atomic="${x => x.ariaAtomic}"
8033          aria-busy="${x => x.ariaBusy}"
8034          aria-controls="${x => x.ariaControls}"
8035          aria-current="${x => x.ariaCurrent}"
8036          aria-describedby="${x => x.ariaDescribedby}"
8037          aria-details="${x => x.ariaDetails}"
8038          aria-disabled="${x => x.ariaDisabled}"
8039          aria-errormessage="${x => x.ariaErrormessage}"
8040          aria-flowto="${x => x.ariaFlowto}"
8041          aria-haspopup="${x => x.ariaHaspopup}"
8042          aria-hidden="${x => x.ariaHidden}"
8043          aria-invalid="${x => x.ariaInvalid}"
8044          aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
8045          aria-label="${x => x.ariaLabel}"
8046          aria-labelledby="${x => x.ariaLabelledby}"
8047          aria-live="${x => x.ariaLive}"
8048          aria-owns="${x => x.ariaOwns}"
8049          aria-relevant="${x => x.ariaRelevant}"
8050          aria-roledescription="${x => x.ariaRoledescription}"
8051          ${(0, _fastElement.ref)('control')}
8052        />
8053        <slot name="clear-button">
8054          <button
8055            class="clear-button ${x => x.value ? '' : 'clear-button__hidden'}"
8056            part="clear-button"
8057            tabindex="-1"
8058            @click=${x => x.handleClearInput()}
8059          >
8060            <slot name="clear-glyph">
8061              <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
8062                <path
8063                  d="m2.09 2.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L6 5.29l3.15-3.14a.5.5 0 1 1 .7.7L6.71 6l3.14 3.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L6 6.71 2.85 9.85a.5.5 0 0 1-.7-.7L5.29 6 2.15 2.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
8064                />
8065              </svg>
8066            </slot>
8067          </button>
8068        </slot>
8069      </div>
8070      ${(0, _fastFoundation.endSlotTemplate)(context, definition)}
8071    </div>
8072  </template>
8073`;
8074
8075exports.searchTemplate = searchTemplate;
8076
8077},{"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],86:[function(require,module,exports){
8078"use strict";
8079
8080Object.defineProperty(exports, "__esModule", {
8081  value: true
8082});

8083exports.selectStyles = exports.fluentSelect = exports.Select = void 0;
8084
8085var _tslib = require("tslib");
8086
8087var _fastElement = require("@microsoft/fast-element");
8088
8089var _fastFoundation = require("@microsoft/fast-foundation");
8090
8091var _designTokens = require("../design-tokens");
8092
8093var _select = require("./select.styles");
8094
8095/**
8096 * The Fluent select class
8097 * @internal
8098 */
8099class Select extends _fastFoundation.Select {
8100  /**
8101   * @internal
8102   */
8103  appearanceChanged(oldValue, newValue) {
8104    if (oldValue !== newValue) {
8105      this.classList.add(newValue);
8106      this.classList.remove(oldValue);
8107    }
8108  }
8109  /**
8110   * @internal
8111   */
8112
8113
8114  connectedCallback() {
8115    super.connectedCallback();
8116
8117    if (!this.appearance) {
8118      this.appearance = 'outline';
8119    }
8120
8121    if (this.listbox) {
8122      _designTokens.fillColor.setValueFor(this.listbox, _designTokens.neutralLayerFloating);
8123    }
8124  }
8125
8126}
8127
8128exports.Select = Select;
8129(0, _tslib.__decorate)([(0, _fastElement.attr)({
8130  mode: 'fromView'
8131})], Select.prototype, "appearance", void 0);
8132/**
8133 * The Fluent select Custom Element. Implements, {@link @microsoft/fast-foundation#Select}
8134 * {@link @microsoft/fast-foundation#selectTemplate}
8135 *
8136 *
8137 * @public
8138 * @remarks
8139 * HTML Element: \<fluent-select\>
8140 *
8141 */
8142
8143const fluentSelect = Select.compose({
8144  baseName: 'select',
8145  baseClass: _fastFoundation.Select,
8146  template: _fastFoundation.selectTemplate,
8147  styles: _select.selectStyles,
8148  indicator: `
8149    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
8150      <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"/>
8151    </svg>
8152  `
8153});
8154/**
8155 * Styles for Select
8156 * @public
8157 */
8158
8159exports.fluentSelect = fluentSelect;
8160const selectStyles = _select.selectStyles;
8161exports.selectStyles = selectStyles;
8162
8163},{"../design-tokens":53,"./select.styles":87,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"tslib":466}],87:[function(require,module,exports){
8164"use strict";
8165
8166Object.defineProperty(exports, "__esModule", {
8167  value: true
8168});
8169exports.selectStyles = exports.baseSelectStyles = exports.baseSelectForcedColorStyles = void 0;
8170
8171var _fastElement = require("@microsoft/fast-element");
8172
8173var _fastFoundation = require("@microsoft/fast-foundation");
8174
8175var _fastWebUtilities = require("@microsoft/fast-web-utilities");
8176
8177var _elevation = require("../styles/elevation");
8178
8179var _size = require("../styles/size");
8180
8181var _behaviors = require("../utilities/behaviors");
8182
8183var _designTokens = require("../design-tokens");
8184
8185var _typeRamp = require("../styles/patterns/type-ramp");
8186
8187var _focus = require("../styles/focus");
8188
8189var _styles = require("../styles");
8190
8191const logicalControlSelector = '.control';
8192const interactivitySelector = ':not([disabled]):not([open])';
8193const nonInteractivitySelector = '[disabled]';
8194/**
8195 * The base styles for a select and combobox, without `appearance` visual differences.
8196 *
8197 * @internal
8198 */
8199
8200const baseSelectStyles = (context, definition) => (0, _fastElement.css)`
8201    ${(0, _fastFoundation.display)('inline-flex')}
8202    
8203    :host {
8204      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
8205      box-sizing: border-box;
8206      color: ${_designTokens.neutralForegroundRest};
8207      fill: currentcolor;
8208      font-family: ${_designTokens.bodyFont};
8209      position: relative;
8210      user-select: none;
8211      min-width: 250px;
8212      vertical-align: top;
8213    }
8214
8215    .listbox {
8216      box-shadow: ${_elevation.elevationShadowFlyout};
8217      background: ${_designTokens.fillColor};
8218      border-radius: calc(${_designTokens.layerCornerRadius} * 1px);
8219      box-sizing: border-box;
8220      display: inline-flex;
8221      flex-direction: column;
8222      left: 0;
8223      max-height: calc(var(--max-height) - (${_size.heightNumber} * 1px));
8224      padding: calc((${_designTokens.designUnit} - ${_designTokens.strokeWidth} ) * 1px);
8225      overflow-y: auto;
8226      position: absolute;
8227      width: 100%;
8228      z-index: 1;
8229      margin: 1px 0;
8230      border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
8231    }
8232
8233    .listbox[hidden] {
8234      display: none;
8235    }
8236
8237    .control {
8238      border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
8239      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
8240      height: calc(${_size.heightNumber} * 1px);
8241      align-items: center;
8242      box-sizing: border-box;
8243      cursor: pointer;
8244      display: flex;
8245      ${_typeRamp.typeRampBase}
8246      min-height: 100%;
8247      padding: 0 calc(${_designTokens.designUnit} * 2.25px);
8248      width: 100%;
8249    }
8250
8251    :host(:${_fastFoundation.focusVisible}) {
8252      ${_focus.focusTreatmentBase}
8253    }
8254
8255    :host([disabled]) .control {
8256      cursor: ${_fastFoundation.disabledCursor};
8257      opacity: ${_designTokens.disabledOpacity};
8258      user-select: none;
8259    }
8260
8261    :host([open][position='above']) .listbox {
8262      bottom: calc((${_size.heightNumber} + ${_designTokens.designUnit} * 2) * 1px);
8263    }
8264
8265    :host([open][position='below']) .listbox {
8266      top: calc((${_size.heightNumber} + ${_designTokens.designUnit} * 2) * 1px);
8267    }
8268
8269    .selected-value {
8270      font-family: inherit;
8271      flex: 1 1 auto;
8272      text-align: start;
8273    }
8274
8275    .indicator {
8276      flex: 0 0 auto;
8277      margin-inline-start: 1em;
8278    }
8279
8280    slot[name='listbox'] {
8281      display: none;
8282      width: 100%;
8283    }
8284
8285    :host([open]) slot[name='listbox'] {
8286      display: flex;
8287      position: absolute;
8288    }
8289
8290    .start {
8291      margin-inline-end: 11px;
8292    }
8293
8294    .end {
8295      margin-inline-start: 11px;
8296    }
8297
8298    .start,
8299    .end,
8300    .indicator,
8301    ::slotted(svg) {
8302      display: flex;
8303    }
8304
8305    ::slotted([role='option']) {
8306      flex: 0 0 auto;
8307    }
8308  `;
8309/**
8310 * @internal
8311 */
8312
8313
8314exports.baseSelectStyles = baseSelectStyles;
8315
8316const baseSelectForcedColorStyles = (context, definition) => (0, _fastElement.css)`
8317    :host([open]) .listbox {
8318      background: ${_fastWebUtilities.SystemColors.ButtonFace};
8319      border-color: ${_fastWebUtilities.SystemColors.CanvasText};
8320    }
8321  `;
8322
8323exports.baseSelectForcedColorStyles = baseSelectForcedColorStyles;
8324
8325const selectStyles = (context, definition) => baseSelectStyles(context, definition).withBehaviors((0, _behaviors.appearanceBehavior)('outline', (0, _styles.NeutralButtonStyles)(context, definition, interactivitySelector, nonInteractivitySelector)), (0, _behaviors.appearanceBehavior)('filled', 

8325(0, _styles.inputFilledStyles)(context, definition, logicalControlSelector, interactivitySelector).withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _styles.inputForcedColorStyles)(context, definition, logicalControlSelector, interactivitySelector)))), (0, _behaviors.appearanceBehavior)('stealth', (0, _styles.StealthButtonStyles)(context, definition, interactivitySelector, nonInteractivitySelector)), (0, _fastFoundation.forcedColorsStylesheetBehavior)(baseSelectForcedColorStyles(context, definition)));
8326
8327exports.selectStyles = selectStyles;
8328
8329},{"../design-tokens":53,"../styles":97,"../styles/elevation":95,"../styles/focus":96,"../styles/patterns/type-ramp":101,"../styles/size":102,"../utilities/behaviors":123,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],88:[function(require,module,exports){
8330"use strict";
8331
8332Object.defineProperty(exports, "__esModule", {
8333  value: true
8334});
8335Object.defineProperty(exports, "Skeleton", {
8336  enumerable: true,
8337  get: function () {
8338    return _fastFoundation.Skeleton;
8339  }
8340});
8341exports.skeletonStyles = exports.fluentSkeleton = void 0;
8342
8343var _fastFoundation = require("@microsoft/fast-foundation");
8344
8345var _skeleton = require("./skeleton.styles");
8346
8347/**
8348 * The Fluent Skeleton Element. Implements {@link @microsoft/fast-foundation#Skeleton},
8349 * {@link @microsoft/fast-foundation#skeletonTemplate}
8350 *
8351 *
8352 * @public
8353 * @remarks
8354 * HTML Element: \<fluent-skeleton\>
8355 */
8356const fluentSkeleton = _fastFoundation.Skeleton.compose({
8357  baseName: 'skeleton',
8358  template: _fastFoundation.skeletonTemplate,
8359  styles: _skeleton.skeletonStyles
8360});
8361/**
8362 * Styles for Skeleton
8363 * @public
8364 */
8365
8366
8367exports.fluentSkeleton = fluentSkeleton;
8368const skeletonStyles = _skeleton.skeletonStyles;
8369/**
8370 * Skeleton base class
8371 * @public
8372 */
8373
8374exports.skeletonStyles = skeletonStyles;
8375
8376},{"./skeleton.styles":89,"@microsoft/fast-foundation":256}],89:[function(require,module,exports){
8377"use strict";
8378
8379Object.defineProperty(exports, "__esModule", {
8380  value: true
8381});
8382exports.skeletonStyles = void 0;
8383
8384var _fastElement = require("@microsoft/fast-element");
8385
8386var _fastFoundation = require("@microsoft/fast-foundation");
8387
8388var _fastWebUtilities = require("@microsoft/fast-web-utilities");
8389
8390var _designTokens = require("../design-tokens");
8391
8392const skeletonStyles = (context, definition) => (0, _fastElement.css)`
8393    ${(0, _fastFoundation.display)('block')} :host {
8394      --skeleton-fill-default: ${_designTokens.neutralFillSecondaryRest};
8395      overflow: hidden;
8396      width: 100%;
8397      position: relative;
8398      background-color: var(--skeleton-fill, var(--skeleton-fill-default));
8399      --skeleton-animation-gradient-default: linear-gradient(
8400        270deg,
8401        var(--skeleton-fill, var(--skeleton-fill-default)) 0%,
8402        ${_designTokens.neutralFillSecondaryHover} 51%,
8403        var(--skeleton-fill, var(--skeleton-fill-default)) 100%
8404      );
8405      --skeleton-animation-timing-default: ease-in-out;
8406    }
8407
8408    :host(.rect) {
8409      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
8410    }
8411
8412    :host(.circle) {
8413      border-radius: 100%;
8414      overflow: hidden;
8415    }
8416
8417    object {
8418      position: absolute;
8419      width: 100%;
8420      height: auto;
8421      z-index: 2;
8422    }
8423
8424    object img {
8425      width: 100%;
8426      height: auto;
8427    }
8428
8429    ${(0, _fastFoundation.display)('block')} span.shimmer {
8430      position: absolute;
8431      width: 100%;
8432      height: 100%;
8433      background-image: var(--skeleton-animation-gradient, var(--skeleton-animation-gradient-default));
8434      background-size: 0px 0px / 90% 100%;
8435      background-repeat: no-repeat;
8436      background-color: var(--skeleton-animation-fill, ${_designTokens.neutralFillSecondaryRest});
8437      animation: shimmer 2s infinite;
8438      animation-timing-function: var(--skeleton-animation-timing, var(--skeleton-timing-default));
8439      animation-direction: normal;
8440      z-index: 1;
8441    }
8442
8443    ::slotted(svg) {
8444      z-index: 2;
8445    }
8446
8447    ::slotted(.pattern) {
8448      width: 100%;
8449      height: 100%;
8450    }
8451
8452    @keyframes shimmer {
8453      0% {
8454        transform: translateX(-100%);
8455      }
8456      100% {
8457        transform: translateX(100%);
8458      }
8459    }
8460  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
8461        :host{
8462          background-color: ${_fastWebUtilities.SystemColors.CanvasText};
8463        }
8464      `));
8465
8466exports.skeletonStyles = skeletonStyles;
8467
8468},{"../design-tokens":53,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],90:[function(require,module,exports){
8469"use strict";
8470
8471Object.defineProperty(exports, "__esModule", {
8472  value: true
8473});
8474Object.defineProperty(exports, "SliderLabel", {
8475  enumerable: true,
8476  get: function () {
8477    return _fastFoundation.SliderLabel;
8478  }
8479});

8480exports.sliderLabelStyles = exports.fluentSliderLabel = void 0;
8481
8482var _fastFoundation = require("@microsoft/fast-foundation");
8483
8484var _sliderLabel = require("./slider-label.styles");
8485
8486/**
8487 * The Fluent Slider Label Custom Element. Implements {@link @microsoft/fast-foundation#SliderLabel},
8488 * {@link @microsoft/fast-foundation#sliderLabelTemplate}
8489 *
8490 *
8491 * @public
8492 * @remarks
8493 * HTML Element: \<fluent-slider-label\>
8494 */
8495const fluentSliderLabel = _fastFoundation.SliderLabel.compose({
8496  baseName: 'slider-label',
8497  template: _fastFoundation.sliderLabelTemplate,
8498  styles: _sliderLabel.sliderLabelStyles
8499});
8500/**
8501 * Styles for SliderLabel
8502 * @public
8503 */
8504
8505
8506exports.fluentSliderLabel = fluentSliderLabel;
8507const sliderLabelStyles = _sliderLabel.sliderLabelStyles;
8508/**
8509 * Slider label base class
8510 * @public
8511 */
8512
8513exports.sliderLabelStyles = sliderLabelStyles;
8514
8515},{"./slider-label.styles":91,"@microsoft/fast-foundation":256}],91:[function(require,module,exports){
8516"use strict";
8517
8518Object.defineProperty(exports, "__esModule", {
8519  value: true
8520});
8521exports.sliderLabelStyles = void 0;
8522
8523var _fastElement = require("@microsoft/fast-element");
8524
8525var _fastWebUtilities = require("@microsoft/fast-web-utilities");
8526
8527var _fastFoundation = require("@microsoft/fast-foundation");
8528
8529var _designTokens = require("../design-tokens");
8530
8531var _typeRamp = require("../styles/patterns/type-ramp");
8532
8533const sliderLabelStyles = (context, definition) => (0, _fastElement.css)`
8534    ${(0, _fastFoundation.display)('block')} :host {
8535      ${_typeRamp.typeRampMinus1}
8536    }
8537    .root {
8538      position: absolute;
8539      display: grid;
8540    }
8541    :host(.horizontal) {
8542      align-self: start;
8543      grid-row: 2;
8544      margin-top: -4px;
8545    }
8546    :host(.vertical) {
8547      justify-self: start;
8548      grid-column: 2;
8549      margin-left: 2px;
8550    }
8551    .container {
8552      display: grid;
8553      justify-self: center;
8554    }
8555    :host(.horizontal) .container {
8556      grid-template-rows: auto auto;
8557      grid-template-columns: 0;
8558    }
8559    :host(.vertical) .container {
8560      grid-template-columns: auto auto;
8561      grid-template-rows: 0;
8562      min-width: calc(var(--thumb-size) * 1px);
8563      height: calc(var(--thumb-size) * 1px);
8564    }
8565    .label {
8566      justify-self: center;
8567      align-self: center;
8568      white-space: nowrap;
8569      max-width: 30px;
8570      margin: 2px 0;
8571    }
8572    .mark {
8573      width: calc(${_designTokens.strokeWidth} * 1px);
8574      height: calc(${_designTokens.designUnit} * 1px);
8575      background: ${_designTokens.neutralStrokeStrongRest};
8576      justify-self: center;
8577    }
8578    :host(.vertical) .mark {
8579      transform: rotate(90deg);
8580      align-self: center;
8581    }
8582    :host(.vertical) .label {
8583      margin-left: calc((${_designTokens.designUnit} / 2) * 2px);
8584      align-self: center;
8585    }
8586    :host(.disabled) {
8587      opacity: ${_designTokens.disabledOpacity};
8588    }
8589  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
8590        .mark {
8591          forced-color-adjust: none;
8592          background: ${_fastWebUtilities.SystemColors.FieldText};
8593        }
8594        :host(.disabled) {
8595          forced-color-adjust: none;
8596          opacity: 1;
8597        }
8598        :host(.disabled) .label {
8599          color: ${_fastWebUtilities.SystemColors.GrayText};
8600        }
8601        :host(.disabled) .mark {
8602          background: ${_fastWebUtilities.SystemColors.GrayText};
8603        }
8604      `));
8605
8606exports.sliderLabelStyles = sliderLabelStyles;
8607
8608},{"../design-tokens":53,"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],92:[function(require,module,exports){
8609"use strict";
8610
8611Object.defineProperty(exports, "__esModule", {
8612  value: true
8613});
8614Object.defineProperty(exports, "Slider", {
8615  enumerable: true,
8616  get: function () {
8617    return _fastFoundation.Slider;
8618  }
8619});
8620exports.sliderStyles = exports.fluentSlider = void 0;
8621
8622var _fastFoundation = require("@microsoft/fast-foundation");
8623

8624var _slider = require("./slider.styles");
8625
8626/**
8627 * The Fluent Slider Custom Element. Implements {@link @microsoft/fast-foundation#(Slider:class)},
8628 * {@link @microsoft/fast-foundation#sliderTemplate}
8629 *
8630 *
8631 * @public
8632 * @remarks
8633 * HTML Element: \<fluent-slider\>
8634 */
8635const fluentSlider = _fastFoundation.Slider.compose({
8636  baseName: 'slider',
8637  template: _fastFoundation.sliderTemplate,
8638  styles: _slider.sliderStyles,
8639  thumb: `
8640    <div class="thumb-cursor"></div>
8641  `
8642});
8643/**
8644 * Styles for Slider
8645 * @public
8646 */
8647
8648
8649exports.fluentSlider = fluentSlider;
8650const sliderStyles = _slider.sliderStyles;
8651/**
8652 * Slider base class
8653 * @public
8654 */
8655
8656exports.sliderStyles = sliderStyles;
8657
8658},{"./slider.styles":93,"@microsoft/fast-foundation":256}],93:[function(require,module,exports){
8659"use strict";
8660
8661Object.defineProperty(exports, "__esModule", {
8662  value: true
8663});
8664exports.sliderStyles = void 0;
8665
8666var _fastElement = require("@microsoft/fast-element");
8667
8668var _fastWebUtilities = require("@microsoft/fast-web-utilities");
8669
8670var _fastFoundation = require("@microsoft/fast-foundation");
8671
8672var _styles = require("../styles");
8673
8674var _designTokens = require("../design-tokens");
8675
8676const sliderStyles = (context, definition) => (0, _fastElement.css)`
8677    ${(0, _fastFoundation.display)('inline-grid')} :host {
8678      --thumb-size: calc((${_styles.heightNumber} / 2) + ${_designTokens.designUnit} + (${_designTokens.strokeWidth} * 2));
8679      --thumb-translate: calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);
8680      --track-overhang: calc((${_designTokens.designUnit} / 2) * -1);
8681      --track-width: ${_designTokens.designUnit};
8682      align-items: center;
8683      width: 100%;
8684      user-select: none;
8685      box-sizing: border-box;
8686      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
8687      outline: none;
8688      cursor: pointer;
8689    }
8690    :host(.horizontal) .positioning-region {
8691      position: relative;
8692      margin: 0 8px;
8693      display: grid;
8694      grid-template-rows: calc(var(--thumb-size) * 1px) 1fr;
8695    }
8696    :host(.vertical) .positioning-region {
8697      position: relative;
8698      margin: 0 8px;
8699      display: grid;
8700      height: 100%;
8701      grid-template-columns: calc(var(--thumb-size) * 1px) 1fr;
8702    }
8703    :host(:${_fastFoundation.focusVisible}) .thumb-cursor {
8704      box-shadow: 0 0 0 2px ${_designTokens.fillColor}, 0 0 0 4px ${_designTokens.focusStrokeOuter};
8705    }
8706    .thumb-container {
8707      position: absolute;
8708      height: calc(var(--thumb-size) * 1px);
8709      width: calc(var(--thumb-size) * 1px);
8710      transition: all 0.2s ease;
8711    }
8712    .thumb-cursor {
8713      display: flex;
8714      position: relative;
8715      border: none;
8716      width: calc(var(--thumb-size) * 1px);
8717      height: calc(var(--thumb-size) * 1px);
8718      background: padding-box linear-gradient(${_designTokens.neutralFillRest}, ${_designTokens.neutralFillRest}),
8719        border-box ${_designTokens.neutralStrokeControlRest};
8720      border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
8721      border-radius: 50%;
8722      box-sizing: border-box;
8723    }
8724    .thumb-cursor::after {
8725      content: '';
8726      display: block;
8727      border-radius: 50%;
8728      width: 100%;
8729      margin: 4px;
8730      background: ${_designTokens.accentFillRest};
8731    }
8732    :host(:not(.disabled)) .thumb-cursor:hover::after {
8733      background: ${_designTokens.accentFillHover};
8734      margin: 3px;
8735    }
8736    :host(:not(.disabled)) .thumb-cursor:active::after {
8737      background: ${_designTokens.accentFillActive};
8738      margin: 5px;
8739    }
8740    :host(:not(.disabled)) .thumb-cursor:hover {
8741      background: padding-box linear-gradient(${_designTokens.neutralFillRest}, ${_designTokens.neutralFillRest}),
8742        border-box ${_designTokens.neutralStrokeControlHover};
8743    }
8744    :host(:not(.disabled)) .thumb-cursor:active {
8745      background: padding-box linear-gradient(${_designTokens.neutralFillRest}, ${_designTokens.neutralFillRest}),
8746        border-box ${_designTokens.neutralStrokeControlActive};
8747    }
8748    .track-start {
8749      background: ${_designTokens.accentFillRest};
8750      position: absolute;
8751      height: 100%;
8752      left: 0;
8753      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
8754    }

8755    :host(.horizontal) .thumb-container {
8756      transform: translateX(calc(var(--thumb-size) * 0.5px)) translateY(calc(var(--thumb-translate) * 1px));
8757    }
8758    :host(.vertical) .thumb-container {
8759      transform: translateX(calc(var(--thumb-translate) * 1px)) translateY(calc(var(--thumb-size) * 0.5px));
8760    }
8761    :host(.horizontal) {
8762      min-width: calc(var(--thumb-size) * 1px);
8763    }
8764    :host(.horizontal) .track {
8765      right: calc(var(--track-overhang) * 1px);
8766      left: calc(var(--track-overhang) * 1px);
8767      align-self: start;
8768      height: calc(var(--track-width) * 1px);
8769    }
8770    :host(.vertical) .track {
8771      top: calc(var(--track-overhang) * 1px);
8772      bottom: calc(var(--track-overhang) * 1px);
8773      width: calc(var(--track-width) * 1px);
8774      height: 100%;
8775    }
8776    .track {
8777      background: ${_designTokens.neutralFillStrongRest};
8778      border: 1px solid ${_designTokens.neutralStrokeStrongRest};
8779      border-radius: 2px;
8780      box-sizing: border-box;
8781      position: absolute;
8782    }
8783    :host(.vertical) {
8784      height: 100%;
8785      min-height: calc(${_designTokens.designUnit} * 60px);
8786      min-width: calc(${_designTokens.designUnit} * 20px);
8787    }
8788    :host(.vertical) .track-start {
8789      height: auto;
8790      width: 100%;
8791      top: 0;
8792    }
8793    :host(.disabled),
8794    :host(.readonly) {
8795      cursor: ${_fastFoundation.disabledCursor};
8796    }
8797    :host(.disabled) {
8798      opacity: ${_designTokens.disabledOpacity};
8799    }
8800  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
8801        .thumb-cursor {
8802          forced-color-adjust: none;
8803          border-color: ${_fastWebUtilities.SystemColors.FieldText};
8804          background: ${_fastWebUtilities.SystemColors.FieldText};
8805        }
8806        :host(:not(.disabled)) .thumb-cursor:hover,
8807        :host(:not(.disabled)) .thumb-cursor:active {
8808          background: ${_fastWebUtilities.SystemColors.Highlight};
8809        }
8810        .track {
8811          forced-color-adjust: none;
8812          background: ${_fastWebUtilities.SystemColors.FieldText};
8813        }
8814        .thumb-cursor::after,
8815        :host(:not(.disabled)) .thumb-cursor:hover::after,
8816        :host(:not(.disabled)) .thumb-cursor:active::after {
8817          background: ${_fastWebUtilities.SystemColors.Field};
8818        }
8819        :host(:${_fastFoundation.focusVisible}) .thumb-cursor {
8820          background: ${_fastWebUtilities.SystemColors.Highlight};
8821          border-color: ${_fastWebUtilities.SystemColors.Highlight};
8822          box-shadow: 0 0 0 1px ${_fastWebUtilities.SystemColors.Field}, 0 0 0 3px ${_fastWebUtilities.SystemColors.FieldText};
8823        }
8824        :host(.disabled) {
8825          opacity: 1;
8826        }
8827        :host(.disabled) .track,
8828        :host(.disabled) .thumb-cursor {
8829          forced-color-adjust: none;
8830          background: ${_fastWebUtilities.SystemColors.GrayText};
8831        }
8832      `));
8833
8834exports.sliderStyles = sliderStyles;
8835
8836},{"../design-tokens":53,"../styles":97,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],94:[function(require,module,exports){
8837"use strict";
8838
8839Object.defineProperty(exports, "__esModule", {
8840  value: true
8841});
8842exports.DirectionalStyleSheetBehavior = void 0;
8843
8844var _designTokens = require("../design-tokens");
8845
8846/**
8847 * Behavior to conditionally apply LTR and RTL stylesheets. To determine which to apply,
8848 * the behavior will use the nearest DesignSystemProvider's 'direction' design system value.
8849 *
8850 * @public
8851 * @example
8852 * ```ts
8853 * import { css } from "@microsoft/fast-element";
8854 * import { DirectionalStyleSheetBehavior } from "@microsoft/fast-foundation";
8855 *
8856 * css`
8857 *  // ...
8858 * `.withBehaviors(new DirectionalStyleSheetBehavior(
8859 *   css`:host { content: "ltr"}`),
8860 *   css`:host { content: "rtl"}`),
8861 * )
8862 * ```
8863 */
8864class DirectionalStyleSheetBehavior {
8865  constructor(ltr, rtl) {
8866    this.cache = new WeakMap();
8867    this.ltr = ltr;
8868    this.rtl = rtl;
8869  }
8870  /**
8871   * @internal
8872   */
8873
8874
8875  bind(source) {
8876    this.attach(source);
8877  }
8878  /**
8879   * @internal
8880   */
8881
8882
8883  unbind(source) {
8884    const cache = this.cache.get(source);
8885
8886    if (cache) {
8887      _designTokens.direction.unsubscribe(cache);
8888    }
8889  }
8890
8891  attach(source) {
8892    const subscriber = this.cache.get(source) || new DirectionalStyleSheetBehaviorSubscription(this.ltr, this.rtl, source);
8893
8894    const value = _designTokens.direction.getValueFor(source);
8895
8896    _designTokens.direction.subscribe(subscriber);
8897
8898    subscriber.attach(value);
8899    this.cache.set(source, subscriber);
8900  }
8901
8902}
8903/**
8904 * Subscription for {@link DirectionalStyleSheetBehavior}
8905 */
8906
8907
8908exports.DirectionalStyleSheetBehavior = DirectionalStyleSheetBehavior;
8909
8910class DirectionalStyleSheetBehaviorSubscription {
8911  constructor(ltr, rtl, source) {
8912    this.ltr = ltr;
8913    this.rtl = rtl;
8914    this.source = source;
8915    this.attached = null;
8916  }
8917
8918  handleChange({
8919    target,
8920    token
8921  }) {
8922    this.attach(token.getValueFor(this.source));
8923  }
8924
8925  attach(direction) {
8926    if (this.attached !== this[direction]) {
8927      if (this.attached !== null) {
8928        this.source.$fastController.removeStyles(this.attached);
8929      }
8930
8931      this.attached = this[direction];
8932
8933      if (this.attached !== null) {
8934        this.source.$fastController.addStyles(this.attached);
8935      }
8936    }
8937  }
8938
8939}
8940
8941},{"../design-tokens":53}],95:[function(require,module,exports){
8942"use strict";
8943
8944Object.defineProperty(exports, "__esModule", {
8945  value: true
8946});
8947exports.elevationShadowTooltipSize = exports.elevationShadowTooltip = exp

8947orts.elevationShadowRecipe = exports.elevationShadowFlyoutSize = exports.elevationShadowFlyout = exports.elevationShadowDialogSize = exports.elevationShadowDialog = exports.elevationShadowCardRestSize = exports.elevationShadowCardRest = exports.elevationShadowCardHoverSize = exports.elevationShadowCardHover = exports.elevationShadowCardFocusSize = exports.elevationShadowCardFocus = exports.elevationShadowCardActiveSize = exports.elevationShadowCardActive = exports.elevation = exports.directionalShadow = exports.ambientShadow = void 0;
8948
8949var _fastFoundation = require("@microsoft/fast-foundation");
8950
8951/**
8952 * Define shadow algorithms.
8953 *
8954 * TODO: The --background-luminance will need to be derived from JavaScript. For now
8955 * this is hard-coded to a 1, the relative luminance of pure white.
8956 * https://github.com/microsoft/fast/issues/2778
8957 * opacity was `calc(.11 * (2 - var(--background-luminance, 1)))`
8958 *
8959 * @internal
8960 * @deprecated Use elevationShadow design token
8961 */
8962const ambientShadow = '0 0 2px rgba(0, 0, 0, 0.14)';
8963/**
8964 * @internal
8965 * @deprecated Use elevationShadow design token
8966 */
8967
8968exports.ambientShadow = ambientShadow;
8969const directionalShadow = '0 calc(var(--elevation) * 0.5px) calc((var(--elevation) * 1px)) rgba(0, 0, 0, 0.2)';
8970/**
8971 * Applies the box-shadow CSS rule set to the elevation formula.
8972 * Control this formula with the --elevation CSS Custom Property
8973 * by setting --elevation to a number.
8974 *
8975 * @public
8976 * @deprecated Use elevationShadow design token
8977 */
8978
8979exports.directionalShadow = directionalShadow;
8980const elevation = `box-shadow: ${ambientShadow}, ${directionalShadow};`;
8981/**
8982 * @public
8983 */
8984
8985exports.elevation = elevation;
8986
8987const elevationShadowRecipe = _fastFoundation.DesignToken.create({
8988  name: 'elevation-shadow',
8989  cssCustomPropertyName: null
8990}).withDefault({
8991  evaluate: (element, size, reference) => {
8992    let ambientOpacity = 0.12;
8993    let directionalOpacity = 0.14;
8994
8995    if (size > 16) {
8996      ambientOpacity = 0.2;
8997      directionalOpacity = 0.24;
8998    }
8999
9000    const ambient = `0 0 2px rgba(0, 0, 0, ${ambientOpacity})`;
9001    const directional = `0 calc(${size} * 0.5px) calc((${size} * 1px)) rgba(0, 0, 0, ${directionalOpacity})`;
9002    return `${ambient}, ${directional}`;
9003  }
9004});
9005/** @public */
9006
9007
9008exports.elevationShadowRecipe = elevationShadowRecipe;
9009
9010const elevationShadowCardRestSize = _fastFoundation.DesignToken.create('elevation-shadow-card-rest-size').withDefault(4);
9011/** @public */
9012
9013
9014exports.elevationShadowCardRestSize = elevationShadowCardRestSize;
9015
9016const elevationShadowCardHoverSize = _fastFoundation.DesignToken.create('elevation-shadow-card-hover-size').withDefault(8);
9017/** @public */
9018
9019
9020exports.elevationShadowCardHoverSize = elevationShadowCardHoverSize;
9021
9022const elevationShadowCardActiveSize = _fastFoundation.DesignToken.create('elevation-shadow-card-active-size').withDefault(0);
9023/** @public */
9024
9025
9026exports.elevationShadowCardActiveSize = elevationShadowCardActiveSize;
9027
9028const elevationShadowCardFocusSize = _fastFoundation.DesignToken.create('elevation-shadow-card-focus-size').withDefault(8);
9029/** @public */
9030
9031
9032exports.elevationShadowCardFocusSize = elevationShadowCardFocusSize;
9033
9034const elevationShadowCardRest = _fastFoundation.DesignToken.create('elevation-shadow-card-rest').withDefault(element => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardRestSize.getValueFor(element)));
9035/** @public */
9036
9037
9038exports.elevationShadowCardRest = elevationShadowCardRest;
9039
9040const elevationShadowCardHover = _fastFoundation.DesignToken.create('elevation-shadow-card-hover').withDefault(element => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardHoverSize.getValueFor(element)));
9041/** @public */
9042
9043
9044exports.elevationShadowCardHover = elevationShadowCardHover;
9045
9046const elevationShadowCardActive = _fastFoundation.DesignToken.create('elevation-shadow-card-active').withDefault(element => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardActiveSize.getValueFor(element)));
9047/** @public */
9048
9049
9050exports.elevationShadowCardActive = elevationShadowCardActive;
9051
9052const elevationShadowCardFocus = _fastFoundation.DesignToken.create('elevation-shadow-card-focus').withDefault(element => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardFocusSize.getValueFor(element)));
9053/** @public */
9054
9055
9056exports.elevationShadowCardFocus = elevationShadowCardFocus;
9057
9058const elevationShadowTooltipSize = _fastFoundation.DesignToken.create('elevation-shadow-tooltip-size').withDefault(16);
9059/** @public */
9060
9061
9062exports.elevationShadowTooltipSize = elevationShadowTooltipSize;
9063
9064const elevationShadowTooltip = _fastFoundation.DesignToken.create('elevation-shadow-tooltip').withDefault(element => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowTooltipSize.getValueFor(element)));
9065/** @public */
9066
9067
9068exports.elevationShadowTooltip = elevationShadowTooltip;
9069
9070const elevationShadowFlyoutSize = _fastFoundation.DesignToken.create('elevation-shadow-flyout-size').withDefault(32);
9071/** @public */
9072
9073
9074exports.elevationShadowFlyoutSize = elevationShadowFlyoutSize;
9075
9076const elevationShadowFlyout = _fastFoundation.DesignToken.create('elevation-shadow-flyout').withDefault(element => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowFlyoutSize.getValueFor(element)));
9077/** @public */
9078
9079
9080exports.elevationShadowFlyout = elevationShadowFlyout;
9081
9082const elevationShadowDialogSize = _fastFoundation.DesignToken.create('elevation-shadow-dialog-size').withDefault(128);
9083/** @public */
9084
9085
9086exports.elevationShadowDialogSize = elevationShadowDialogSize;
9087
9088const elevationShadowDialog = _fastFoundation.DesignToken.create('elevation-shadow-dialog').withDefault(element => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowDialogSize.getValueFor(element)));
9089
9090exports.elevationShadowDialog = elevationShadowDialog;
9091
9092},{"@microsoft/fast-foundation":256}],96:[function(require,module,exports){
9093"use strict";
9094
9095Object.defineProperty(exports, "__esModule", {
9096  value: true
9097});
9098exports.focusTreatmentTight = exports.focusTreatmentBase = void 0;
9099
9100var _fastElement = require("@microsoft/fast-element");
9101
9102var _designTokens = require("../design-tokens");
9103
9104/**
9105 * Partial CSS for the focus treatment for most typical sized components like Button, Menu Item, etc.
9106 *
9107 * @public
9108 */
9109const focusTreatmentBase = (0, _fastElement.cssPartial)`
9110  outline: calc(${_designTokens.focusStrokeWidth} * 1px) solid ${_designTokens.focusStrokeOuter};
9111  outline-offset: calc(${_designTokens.focusStrokeWidth} * -1px);
9112`;
9113/**
9114 * Partial CSS for the focus treatment for tighter components with spacing constraints, like Checkbox
9115 * and Radio, or plain text like Hypertext appearance Anchor or Breadcrumb Item.
9116 *
9117 * @public
9118 */
9119
9120exports.focusTreatmentBase = focusTreatmentBase;
9121const focusTreatmentTight = (0, _fastElement.cssPartial)`
9122  outline: calc(${_designTokens.focusStrokeWidth} * 1px) solid ${_designTokens.focusStrokeOuter};
9123  outline-offset: calc(${_designTokens.strokeWidth} * 1px);
9124`;
9125exports.focusTreatmentTight = focusTreatmentTight;
9126
9127},{"../design-tokens":53,"@microsoft/fast-element":151}],97:[function(require,module,exports){
9128"use strict";
9129
9130Object.defineProperty(exports, "__esModule", {
9131  value: true
9132});
9133
9134var _direction = require("./direction");
9135

9136Object.keys(_direction).forEach(function (key) {
9137  if (key === "default" || key === "__esModule") return;
9138  if (key in exports && exports[key] === _direction[key]) return;
9139  Object.defineProperty(exports, key, {
9140    enumerable: true,
9141    get: function () {
9142      return _direction[key];
9143    }
9144  });
9145});
9146
9147var _elevation = require("./elevation");
9148
9149Object.keys(_elevation).forEach(function (key) {
9150  if (key === "default" || key === "__esModule") return;
9151  if (key in exports && exports[key] === _elevation[key]) return;
9152  Object.defineProperty(exports, key, {
9153    enumerable: true,
9154    get: function () {
9155      return _elevation[key];
9156    }
9157  });
9158});
9159
9160var _focus = require("./focus");
9161
9162Object.keys(_focus).forEach(function (key) {
9163  if (key === "default" || key === "__esModule") return;
9164  if (key in exports && exports[key] === _focus[key]) return;
9165  Object.defineProperty(exports, key, {
9166    enumerable: true,
9167    get: function () {
9168      return _focus[key];
9169    }
9170  });
9171});
9172
9173var _patterns = require("./patterns/");
9174
9175Object.keys(_patterns).forEach(function (key) {
9176  if (key === "default" || key === "__esModule") return;
9177  if (key in exports && exports[key] === _patterns[key]) return;
9178  Object.defineProperty(exports, key, {
9179    enumerable: true,
9180    get: function () {
9181      return _patterns[key];
9182    }
9183  });
9184});
9185
9186var _size = require("./size");
9187
9188Object.keys(_size).forEach(function (key) {
9189  if (key === "default" || key === "__esModule") return;
9190  if (key in exports && exports[key] === _size[key]) return;
9191  Object.defineProperty(exports, key, {
9192    enumerable: true,
9193    get: function () {
9194      return _size[key];
9195    }
9196  });
9197});
9198
9199},{"./direction":94,"./elevation":95,"./focus":96,"./patterns/":99,"./size":102}],98:[function(require,module,exports){
9200"use strict";
9201
9202Object.defineProperty(exports, "__esModule", {
9203  value: true
9204});
9205exports.baseButtonStyles = exports.StealthButtonStyles = exports.OutlineButtonStyles = exports.NeutralButtonStyles = exports.LightweightButtonStyles = exports.HypertextStyles = exports.AccentButtonStyles = void 0;
9206
9207var _fastElement = require("@microsoft/fast-element");
9208
9209var _fastWebUtilities = require("@microsoft/fast-web-utilities");
9210
9211var _fastFoundation = require("@microsoft/fast-foundation");
9212
9213var _size = require("../size");
9214
9215var _designTokens = require("../../design-tokens");
9216
9217var _typeRamp = require("../../styles/patterns/type-ramp");
9218
9219var _focus = require("../focus");
9220
9221/**
9222 * The base styles for button controls, without `appearance` visual differences.
9223 *
9224 * @internal
9225 */
9226const baseButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => (0, _fastElement.css)`
9227    ${(0, _fastFoundation.display)('inline-flex')}
9228    
9229    :host {
9230      position: relative;
9231      box-sizing: border-box;
9232      ${_typeRamp.typeRampBase}
9233      height: calc(${_size.heightNumber} * 1px);
9234      min-width: calc(${_size.heightNumber} * 1px);
9235      color: ${_designTokens.neutralForegroundRest};
9236      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
9237      fill: currentcolor;
9238    }
9239
9240    .control {
9241      border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
9242      flex-grow: 1;
9243      box-sizing: border-box;
9244      display: inline-flex;
9245      justify-content: center;
9246      align-items: center;
9247      padding: 0 calc((10 + (${_designTokens.designUnit} * 2 * ${_designTokens.density})) * 1px);
9248      white-space: nowrap;
9249      outline: none;
9250      text-decoration: none;
9251      color: inherit;
9252      border-radius: inherit;
9253      fill: inherit;
9254      font-family: inherit;
9255    }
9256
9257    .control,
9258    .end,
9259    .start {
9260      font: inherit;
9261    }
9262
9263    .control.icon-only {
9264      padding: 0;
9265      line-height: 0;
9266    }
9267
9268    .control:${_fastFoundation.focusVisible} {
9269      ${_focus.focusTreatmentBase}
9270    }
9271
9272    .control::-moz-focus-inner {
9273      border: 0;
9274    }
9275
9276    .content {
9277      pointer-events: none;
9278    }
9279
9280    .start,
9281    .end {
9282      display: flex;
9283      pointer-events: none;
9284    }
9285
9286    .start {
9287      margin-inline-end: 11px;
9288    }
9289
9290    .end {
9291      margin-inline-start: 11px;
9292    }
9293  `;
9294/**
9295 * @internal
9296 */
9297
9298
9299exports.baseButtonStyles = baseButtonStyles;
9300
9301const NeutralButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => (0, _fastElement.css)`
9302    .control {
9303      background: padding-box linear-gradient(${_designTokens.neutralFillRest}, ${_designTokens.neutralFillRest}),
9304        border-box ${_designTokens.neutralStrokeControlRest};
9305    }
9306
9307    :host(${interactivitySelector}

9307:hover) .control {
9308      background: padding-box linear-gradient(${_designTokens.neutralFillHover}, ${_designTokens.neutralFillHover}),
9309        border-box ${_designTokens.neutralStrokeControlHover};
9310    }
9311
9312    :host(${interactivitySelector}:active) .control {
9313      background: padding-box linear-gradient(${_designTokens.neutralFillActive}, ${_designTokens.neutralFillActive}),
9314        border-box ${_designTokens.neutralStrokeControlActive};
9315    }
9316
9317    :host(${nonInteractivitySelector}) .control {
9318      background: padding-box linear-gradient(${_designTokens.neutralFillRest}, ${_designTokens.neutralFillRest}),
9319        border-box ${_designTokens.neutralStrokeRest};
9320    }
9321  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
9322        .control {
9323          background: ${_fastWebUtilities.SystemColors.ButtonFace};
9324          border-color: ${_fastWebUtilities.SystemColors.ButtonText};
9325          color: ${_fastWebUtilities.SystemColors.ButtonText};
9326        }
9327
9328        :host(${interactivitySelector}:hover) .control,
9329        :host(${interactivitySelector}:active) .control {
9330          forced-color-adjust: none;
9331          background: ${_fastWebUtilities.SystemColors.HighlightText};
9332          border-color: ${_fastWebUtilities.SystemColors.Highlight};
9333          color: ${_fastWebUtilities.SystemColors.Highlight};
9334        }
9335
9336        :host(${nonInteractivitySelector}) .control {
9337          background: transparent;
9338          border-color: ${_fastWebUtilities.SystemColors.GrayText};
9339          color: ${_fastWebUtilities.SystemColors.GrayText};
9340        }
9341
9342        .control:${_fastFoundation.focusVisible} {
9343          outline-color: ${_fastWebUtilities.SystemColors.CanvasText};
9344        }
9345
9346        :host([href]) .control {
9347          background: transparent;
9348          border-color: ${_fastWebUtilities.SystemColors.LinkText};
9349          color: ${_fastWebUtilities.SystemColors.LinkText};
9350        }
9351
9352        :host([href]:hover) .control,
9353        :host([href]:active) .control {
9354          background: transparent;
9355          border-color: ${_fastWebUtilities.SystemColors.CanvasText};
9356          color: ${_fastWebUtilities.SystemColors.CanvasText};
9357        }
9358    `));
9359/**
9360 * @internal
9361 */
9362
9363
9364exports.NeutralButtonStyles = NeutralButtonStyles;
9365
9366const AccentButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => (0, _fastElement.css)`
9367    .control {
9368      background: padding-box linear-gradient(${_designTokens.accentFillRest}, ${_designTokens.accentFillRest}),
9369        border-box ${_designTokens.accentStrokeControlRest};
9370      color: ${_designTokens.foregroundOnAccentRest};
9371    }
9372
9373    :host(${interactivitySelector}:hover) .control {
9374      background: padding-box linear-gradient(${_designTokens.accentFillHover}, ${_designTokens.accentFillHover}),
9375        border-box ${_designTokens.accentStrokeControlHover};
9376      color: ${_designTokens.foregroundOnAccentHover};
9377    }
9378
9379    :host(${interactivitySelector}:active) .control {
9380      background: padding-box linear-gradient(${_designTokens.accentFillActive}, ${_designTokens.accentFillActive}),
9381        border-box ${_designTokens.accentStrokeControlActive};
9382      color: ${_designTokens.foregroundOnAccentActive};
9383    }
9384
9385    :host(${nonInteractivitySelector}) .control {
9386      background: ${_designTokens.accentFillRest};
9387    }
9388
9389    .control:${_fastFoundation.focusVisible} {
9390      box-shadow: 0 0 0 calc(${_designTokens.focusStrokeWidth} * 1px) ${_designTokens.focusStrokeInner} inset !important;
9391    }
9392  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
9393        .control {
9394          forced-color-adjust: none;
9395          background: ${_fastWebUtilities.SystemColors.Highlight};
9396          color: ${_fastWebUtilities.SystemColors.HighlightText};
9397        }
9398
9399        :host(${interactivitySelector}:hover) .control,
9400        :host(${interactivitySelector}:active) .control {
9401          background: ${_fastWebUtilities.SystemColors.HighlightText};
9402          border-color: ${_fastWebUtilities.SystemColors.Highlight};
9403          color: ${_fastWebUtilities.SystemColors.Highlight};
9404        }
9405
9406        :host(${nonInteractivitySelector}) .control {
9407          background: transparent;
9408          border-color: ${_fastWebUtilities.SystemColors.GrayText};
9409          color: ${_fastWebUtilities.SystemColors.GrayText};
9410        }
9411
9412        .control:${_fastFoundation.focusVisible} {
9413          outline-color: ${_fastWebUtilities.SystemColors.CanvasText};
9414          box-shadow: 0 0 0 calc(${_designTokens.focusStrokeWidth} * 1px) ${_fastWebUtilities.SystemColors.HighlightText} inset !important;
9415        }
9416
9417        :host([href]) .control {
9418          background: ${_fastWebUtilities.SystemColors.LinkText};
9419          color: ${_fastWebUtilities.SystemColors.HighlightText};
9420        }
9421
9422        :host([href]:hover) .control,
9423        :host([href]:active) .control {
9424          background: ${_fastWebUtilities.SystemColors.ButtonFace};
9425          border-color: ${_fastWebUtilities.SystemColors.LinkText};
9426          color: ${_fastWebUtilities.SystemColors.LinkText};
9427        }
9428      `));
9429/**
9430 * @internal
9431 */
9432
9433
9434exports.AccentButtonStyles = AccentButtonStyles;
9435
9436const HypertextStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => (0, _fastElement.css)`
9437    :host {
9438      height: auto;
9439      font-family: inherit;
9440      font-size: inherit;
9441      line-height: inherit;
9442      min-width: 0;
9443    }
9444
9445    .control {
9446      display: inline;
9447      padding: 0;
9448      border: none;
9449      box-shadow: none;
9450      line-height: 1;
9451    }
9452
9453    :host(${interactivitySelector}) .control {
9454      color: ${_designTokens.accentForegroundRest};
9455      text-decoration: underline 1px;
9456    }
9457
9458    :host(${interactivitySelector}

9458:hover) .control {
9459      color: ${_designTokens.accentForegroundHover};
9460      text-decoration: none;
9461    }
9462
9463    :host(${interactivitySelector}:active) .control {
9464      color: ${_designTokens.accentForegroundActive};
9465      text-decoration: none;
9466    }
9467
9468    .control:${_fastFoundation.focusVisible} {
9469      ${_focus.focusTreatmentTight}
9470    }
9471  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
9472        :host(${interactivitySelector}) .control {
9473          color: ${_fastWebUtilities.SystemColors.LinkText};
9474        }
9475
9476        :host(${interactivitySelector}:hover) .control,
9477        :host(${interactivitySelector}:active) .control {
9478          color: ${_fastWebUtilities.SystemColors.CanvasText};
9479        }
9480
9481        .control:${_fastFoundation.focusVisible} {
9482          outline-color: ${_fastWebUtilities.SystemColors.CanvasText};
9483        }
9484      `));
9485/**
9486 * @internal
9487 */
9488
9489
9490exports.HypertextStyles = HypertextStyles;
9491
9492const LightweightButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => (0, _fastElement.css)`
9493    :host {
9494      color: ${_designTokens.accentForegroundRest};
9495    }
9496
9497    .control {
9498      background: ${_designTokens.neutralFillStealthRest};
9499    }
9500
9501    :host(${interactivitySelector}:hover) .control {
9502      background: ${_designTokens.neutralFillStealthHover};
9503      color: ${_designTokens.accentForegroundHover};
9504    }
9505
9506    :host(${interactivitySelector}:active) .control {
9507      background: ${_designTokens.neutralFillStealthActive};
9508      color: ${_designTokens.accentForegroundActive};
9509    }
9510
9511    :host(${nonInteractivitySelector}) .control {
9512      background: ${_designTokens.neutralFillStealthRest};
9513    }
9514  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
9515        :host {
9516          color: ${_fastWebUtilities.SystemColors.ButtonText};
9517        }
9518
9519        .control {
9520          forced-color-adjust: none;
9521          background: transparent;
9522        }
9523
9524        :host(${interactivitySelector}:hover) .control,
9525        :host(${interactivitySelector}:active) .control {
9526          background: transparent;
9527          border-color: ${_fastWebUtilities.SystemColors.ButtonText};
9528          color: ${_fastWebUtilities.SystemColors.ButtonText};
9529        }
9530
9531        :host(${nonInteractivitySelector}) .control {
9532          background: transparent;
9533          color: ${_fastWebUtilities.SystemColors.GrayText};
9534        }
9535
9536        .control:${_fastFoundation.focusVisible} {
9537          outline-color: ${_fastWebUtilities.SystemColors.CanvasText};
9538        }
9539
9540        :host([href]) .control {
9541          color: ${_fastWebUtilities.SystemColors.LinkText};
9542        }
9543
9544        :host([href]:hover) .control,
9545        :host([href]:active) .control {
9546          border-color: ${_fastWebUtilities.SystemColors.LinkText};
9547          color: ${_fastWebUtilities.SystemColors.LinkText};
9548        }
9549      `));
9550/**
9551 * @internal
9552 */
9553
9554
9555exports.LightweightButtonStyles = LightweightButtonStyles;
9556
9557const OutlineButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => (0, _fastElement.css)`
9558    .control {
9559      background: transparent !important;
9560      border-color: ${_designTokens.neutralStrokeRest};
9561    }
9562
9563    :host(${interactivitySelector}:hover) .control {
9564      border-color: ${_designTokens.neutralStrokeHover};
9565    }
9566
9567    :host(${interactivitySelector}:active) .control {
9568      border-color: ${_designTokens.neutralStrokeActive};
9569    }
9570
9571    :host(${nonInteractivitySelector}) .control {
9572      background: transparent !important;
9573      border-color: ${_designTokens.neutralStrokeRest};
9574    }
9575  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
9576        .control {
9577          border-color: ${_fastWebUtilities.SystemColors.ButtonText};
9578          color: ${_fastWebUtilities.SystemColors.ButtonText};
9579        }
9580
9581        :host(${interactivitySelector}:hover) .control,
9582        :host(${interactivitySelector}:active) .control {
9583          background: ${_fastWebUtilities.SystemColors.HighlightText};
9584          border-color: ${_fastWebUtilities.SystemColors.Highlight};
9585          color: ${_fastWebUtilities.SystemColors.Highlight};
9586        }
9587
9588        :host(${nonInteractivitySelector}) .control {
9589          border-color: ${_fastWebUtilities.SystemColors.GrayText};
9590          color: ${_fastWebUtilities.SystemColors.GrayText};
9591        }
9592
9593        .control:${_fastFoundation.focusVisible} {
9594          outline-color: ${_fastWebUtilities.SystemColors.CanvasText};
9595        }
9596
9597        :host([href]) .control {
9598          border-color: ${_fastWebUtilities.SystemColors.LinkText};
9599          color: ${_fastWebUtilities.SystemColors.LinkText};
9600        }
9601
9602        :host([href]:hover) .control,
9603        :host([href]:active) .control {
9604          border-color: ${_fastWebUtilities.SystemColors.CanvasText};
9605          color: ${_fastWebUtilities.SystemColors.CanvasText};
9606        }
9607      `));
9608/**
9609 * @internal
9610 */
9611
9612
9613exports.OutlineButtonStyles = OutlineButtonStyles;
9614
9615const StealthButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => (0, _fastElement.css)`
9616    .control {
9617      background: ${_designTokens.neutralFillStealthRest};
9618    }
9619
9620    :host(${interactivitySelector}

9620:hover) .control {
9621      background: ${_designTokens.neutralFillStealthHover};
9622    }
9623
9624    :host(${interactivitySelector}:active) .control {
9625      background: ${_designTokens.neutralFillStealthActive};
9626    }
9627
9628    :host(${nonInteractivitySelector}) .control {
9629      background: ${_designTokens.neutralFillStealthRest};
9630    }
9631  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
9632        .control {
9633          forced-color-adjust: none;
9634          background: transparent;
9635          color: ${_fastWebUtilities.SystemColors.ButtonText};
9636        }
9637
9638        :host(${interactivitySelector}:hover) .control,
9639        :host(${interactivitySelector}:active) .control {
9640          background: transparent;
9641          border-color: ${_fastWebUtilities.SystemColors.ButtonText};
9642          color: ${_fastWebUtilities.SystemColors.ButtonText};
9643        }
9644
9645        :host(${nonInteractivitySelector}) .control {
9646          background: transparent;
9647          color: ${_fastWebUtilities.SystemColors.GrayText};
9648        }
9649        
9650        .control:${_fastFoundation.focusVisible} {
9651          outline-color: ${_fastWebUtilities.SystemColors.CanvasText};
9652        }
9653
9654        :host([href]) .control {
9655          color: ${_fastWebUtilities.SystemColors.LinkText};
9656        }
9657
9658        :host([href]:hover) .control,
9659        :host([href]:active) .control {
9660          background: transparent;
9661          border-color: ${_fastWebUtilities.SystemColors.LinkText};
9662          color: ${_fastWebUtilities.SystemColors.LinkText};
9663        }
9664      `));
9665
9666exports.StealthButtonStyles = StealthButtonStyles;
9667
9668},{"../../design-tokens":53,"../../styles/patterns/type-ramp":101,"../focus":96,"../size":102,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],99:[function(require,module,exports){
9669"use strict";
9670
9671Object.defineProperty(exports, "__esModule", {
9672  value: true
9673});
9674
9675var _button = require("./button.styles");
9676
9677Object.keys(_button).forEach(function (key) {
9678  if (key === "default" || key === "__esModule") return;
9679  if (key in exports && exports[key] === _button[key]) return;
9680  Object.defineProperty(exports, key, {
9681    enumerable: true,
9682    get: function () {
9683      return _button[key];
9684    }
9685  });
9686});
9687
9688var _input = require("./input.styles");
9689
9690Object.keys(_input).forEach(function (key) {
9691  if (key === "default" || key === "__esModule") return;
9692  if (key in exports && exports[key] === _input[key]) return;
9693  Object.defineProperty(exports, key, {
9694    enumerable: true,
9695    get: function () {
9696      return _input[key];
9697    }
9698  });
9699});
9700
9701var _typeRamp = require("./type-ramp");
9702
9703Object.keys(_typeRamp).forEach(function (key) {
9704  if (key === "default" || key === "__esModule") return;
9705  if (key in exports && exports[key] === _typeRamp[key]) return;
9706  Object.defineProperty(exports, key, {
9707    enumerable: true,
9708    get: function () {
9709      return _typeRamp[key];
9710    }
9711  });
9712});
9713
9714},{"./button.styles":98,"./input.styles":100,"./type-ramp":101}],100:[function(require,module,exports){
9715"use strict";
9716
9717Object.defineProperty(exports, "__esModule", {
9718  value: true
9719});
9720exports.inputStateStyles = exports.inputOutlineStyles = exports.inputForcedColorStyles = exports.inputFilledStyles = exports.baseInputStyles = void 0;
9721
9722var _fastElement = require("@microsoft/fast-element");
9723
9724var _fastFoundation = require("@microsoft/fast-foundation");
9725
9726var _fastWebUtilities = require("@microsoft/fast-web-utilities");
9727
9728var _designTokens = require("../../design-tokens");
9729
9730var _typeRamp = require("../patterns/type-ramp");
9731
9732var _size = require("../size");
9733
9734var _focus = require("../focus");
9735
9736const placeholderRest = _fastFoundation.DesignToken.create('input-placeholder-rest').withDefault(target => {
9737  const baseRecipe = _designTokens.neutralFillInputRecipe.getValueFor(target);
9738
9739  const hintRecipe = _designTokens.neutralForegroundHintRecipe.getValueFor(target);
9740
9741  return hintRecipe.evaluate(target, baseRecipe.evaluate(target).rest);
9742});
9743
9744const placeholderHover = _fastFoundation.DesignToken.create('input-placeholder-hover').withDefault(target => {
9745  const baseRecipe = _designTokens.neutralFillInputRecipe.getValueFor(target);
9746
9747  const hintRecipe = _designTokens.neutralForegroundHintRecipe.getValueFor(target);
9748
9749  return hintRecipe.evaluate(target, baseRecipe.evaluate(target).hover);
9750});
9751
9752const filledPlaceholderRest = _fastFoundation.DesignToken.create('input-filled-placeholder-rest').withDefault(target => {
9753  const baseRecipe = _designTokens.neutralFillSecondaryRecipe.getValueFor(target);
9754
9755  const hintRecipe = _designTokens.neutralForegroundHintRecipe.getValueFor(target);
9756
9757  return hintRecipe.evaluate(target, baseRecipe.evaluate(target).rest);
9758});
9759
9760const filledPlaceholderHover = _fastFoundation.DesignToken.create('input-filled-placeholder-hover').withDefault(target => {
9761  const baseRecipe = _designTokens.neutralFillSecondaryRecipe.getValueFor(target);
9762
9763  const hintRecipe = _designTokens.neutralForegroundHintRecipe.getValueFor(target);
9764
9765  return hintRecipe.evaluate(target, baseRecipe.evaluate(target).hover);
9766});
9767/**
9768 * The base styles for input controls, without `appearance` visual differences.
9769 *
9770 * @internal
9771 */
9772
9773
9774const baseInputStyles = (context, definition, logicalControlSelector) => (0, _fastElement.css)`
9775  :host {
9776    ${_typeRamp.typeRampBase}
9777    color: ${_designTokens.neutralForegroundRest};
9778    fill: currentcolor;
9779    user-select: none;
9780    position: relative;
9781  }
9782
9783  ${logicalControlSelector} {
9784    box-sizing: border-box;
9785    position: relative;
9786    color: inherit;
9787    border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
9788    border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
9789    height: calc(${_size.heightNumber} * 1px);
9790    font-family: inherit;
9791    font-size: inherit;
9792    line-height: inherit;
9793  }
9794
9795  .control {
9796    width: 100%;
9797    outline: none;
9798  }
9799
9800  .label {
9801    display: block;
9802    color: ${_designTokens.neutralForegroundRest};
9803    cursor: pointer;
9804    ${_typeRamp.typeRampBase}
9805    margin-bottom: 4px;
9806  }
9807
9808  .label__hidden {
9809    display: none;
9810    visibility: hidden;
9811  }
9812
9813  :host([disabled]) ${logicalControlSelector},
9814  :host([readonly]) ${logicalControlSelector},
9815  :host([disabled]) .label,
9816  :host([readonly]) .label,
9817  :host([disabled]) .control,
9818  :host([readonly]) .control {
9819    cursor: ${_fastFoundation.disabledCursor};
9820  }
9821
9822  :host([disabled]) {
9823    opacity: ${_designTokens.disabledOpacity};
9824  }
9825`;
9826/**
9827 * The styles for active and focus interactions for input controls.
9828 *
9829 * @internal
9830 */
9831
9832
9833exports.baseInputStyles = baseInputStyles;
9834
9835const inputStateStyles = (context, definition, logicalControlSelector) => (0, _fastElement.css)`
9836  @media (forced-colors: none) {
9837    :host(:not([disabled]):active)::after {
9838      left: 50%;
9839      width: 40%;
9840      transform: translateX(-50%);
9841      border-bottom-left-radius: 0;
9842      border-bottom-right-radius: 0;
9843    }
9844
9845    :host(:not([disabled]):focus-within)::after {
9846      left: 0;
9847      width: 100%;
9848      transform: none;
9849    }
9850
9851    :host(:not([disabled]):active)::after,
9852    :host(:not([disabled]):focus-within:not(:active))::after {
9853      content: '';
9854      position: absolute;
9855      height: calc(${_designTokens.focusStrokeWidth} * 1px);
9856      bottom: 0;
9857      border-bottom: calc(${_designTokens.focusStrokeWidth} * 1px) solid ${_designTokens.accentFillRest};
9858      border-bottom-left-radius: calc(${_designTokens.controlCornerRadius} * 1px);
9859      border-bottom-right-radius: calc(${_designTokens.controlCornerRadius} * 1px);
9860      z-index: 2;
9861      transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
9862    }
9863  }
9864`;
9865/**
9866 * The visual styles for inputs with `appearance='outline'`.
9867 *
9868 * @internal
9869 */
9870
9871
9872exports.inputStateStyles = inputStateStyles;
9873
9874const inputOutlineStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => (0, _fastElement.css)`
9875  ${logicalControlSelector} {
9876    background: padding-box linear-gradient(${_designTokens.neutralFillInputRest}, ${_designTokens.neutralFillInputRest}),
9877      border-box ${_designTokens.neutralStrokeInputRest};
9878  }
9879
9880  :host(${interactivitySelector}

9880:hover) ${logicalControlSelector} {
9881    background: padding-box linear-gradient(${_designTokens.neutralFillInputHover}, ${_designTokens.neutralFillInputHover}),
9882      border-box ${_designTokens.neutralStrokeInputHover};
9883  }
9884
9885  :host(:not([disabled]):focus-within) ${logicalControlSelector} {
9886    background: padding-box linear-gradient(${_designTokens.neutralFillInputFocus}, ${_designTokens.neutralFillInputFocus}),
9887      border-box ${_designTokens.neutralStrokeInputRest};
9888  }
9889  
9890  :host([disabled]) ${logicalControlSelector} {
9891    background: padding-box linear-gradient(${_designTokens.neutralFillInputRest}, ${_designTokens.neutralFillInputRest}),
9892      border-box ${_designTokens.neutralStrokeRest};
9893  }
9894
9895  .control::placeholder {
9896    color: ${placeholderRest};
9897  }
9898
9899  :host(${interactivitySelector}:hover) .control::placeholder {
9900    color: ${placeholderHover};
9901  }
9902`;
9903/**
9904 * The visual styles for inputs with `appearance='filled'`.
9905 *
9906 * @internal
9907 */
9908
9909
9910exports.inputOutlineStyles = inputOutlineStyles;
9911
9912const inputFilledStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => (0, _fastElement.css)`
9913  ${logicalControlSelector} {
9914    background: ${_designTokens.neutralFillSecondaryRest};
9915  }
9916
9917  :host(${interactivitySelector}:hover) ${logicalControlSelector} {
9918    background: ${_designTokens.neutralFillSecondaryHover};
9919  }
9920
9921  :host(:not([disabled]):focus-within) ${logicalControlSelector} {
9922    background: ${_designTokens.neutralFillSecondaryFocus};
9923  }
9924
9925  :host([disabled]) ${logicalControlSelector} {
9926    background: ${_designTokens.neutralFillSecondaryRest};
9927  }
9928
9929  .control::placeholder {
9930    color: ${filledPlaceholderRest};
9931  }
9932
9933  :host(${interactivitySelector}:hover) .control::placeholder {
9934    color: ${filledPlaceholderHover};
9935  }
9936`;
9937/**
9938 * @internal
9939 */
9940
9941
9942exports.inputFilledStyles = inputFilledStyles;
9943
9944const inputForcedColorStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => (0, _fastElement.css)`
9945  :host {
9946    color: ${_fastWebUtilities.SystemColors.ButtonText};
9947  }
9948
9949  ${logicalControlSelector} {
9950    background: ${_fastWebUtilities.SystemColors.ButtonFace};
9951    border-color: ${_fastWebUtilities.SystemColors.ButtonText};
9952  }
9953
9954  :host(${interactivitySelector}:hover) ${logicalControlSelector},
9955  :host(:not([disabled]):focus-within) ${logicalControlSelector} {
9956    border-color: ${_fastWebUtilities.SystemColors.Highlight};
9957  }
9958
9959  :host([disabled]) ${logicalControlSelector} {
9960    opacity: 1;
9961    background: ${_fastWebUtilities.SystemColors.ButtonFace};
9962    border-color: ${_fastWebUtilities.SystemColors.GrayText};
9963  }
9964
9965  .control::placeholder,
9966  :host(${interactivitySelector}:hover) .control::placeholder {
9967    color: ${_fastWebUtilities.SystemColors.CanvasText};
9968  }
9969
9970  :host(:not([disabled]):focus) ${logicalControlSelector} {
9971    ${_focus.focusTreatmentBase}
9972    outline-color: ${_fastWebUtilities.SystemColors.Highlight};
9973  }
9974
9975  :host([disabled]) {
9976    opacity: 1;
9977    color: ${_fastWebUtilities.SystemColors.GrayText};
9978  }
9979
9980  :host([disabled]) ::placeholder,
9981  :host([disabled]) ::-webkit-input-placeholder {
9982    color: ${_fastWebUtilities.SystemColors.GrayText};
9983  }
9984`;
9985
9986exports.inputForcedColorStyles = inputForcedColorStyles;
9987
9988},{"../../design-tokens":53,"../focus":96,"../patterns/type-ramp":101,"../size":102,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],101:[function(require,module,exports){
9989"use strict";
9990
9991Object.defineProperty(exports, "__esModule", {
9992  value: true
9993});
9994exports.typeRampPlus6 = exports.typeRampPlus5 = exports.typeRampPlus4 = exports.typeRampPlus3 = exports.typeRampPlus2 = exports.typeRampPlus1 = exports.typeRampMinus2 = exports.typeRampMinus1 = exports.typeRampBase = void 0;
9995
9996var _fastElement = require("@microsoft/fast-element");
9997
9998var _designTokens = require("../../design-tokens");
9999
10000/** @public */
10001const typeRampBase = (0, _fastElement.cssPartial)`
10002  font-family: ${_designTokens.bodyFont};
10003  font-size: ${_designTokens.typeRampBaseFontSize};
10004  line-height: ${_designTokens.typeRampBaseLineHeight};
10005  font-weight: initial;
10006  font-variation-settings: ${_designTokens.typeRampBaseFontVariations};
10007`;
10008/** @public */
10009
10010exports.typeRampBase = typeRampBase;
10011const typeRampMinus1 = (0, _fastElement.cssPartial)`

10012  font-family: ${_designTokens.bodyFont};
10013  font-size: ${_designTokens.typeRampMinus1FontSize};
10014  line-height: ${_designTokens.typeRampMinus1LineHeight};
10015  font-weight: initial;
10016  font-variation-settings: ${_designTokens.typeRampMinus1FontVariations};
10017`;
10018/** @public */
10019
10020exports.typeRampMinus1 = typeRampMinus1;
10021const typeRampMinus2 = (0, _fastElement.cssPartial)`
10022  font-family: ${_designTokens.bodyFont};
10023  font-size: ${_designTokens.typeRampMinus2FontSize};
10024  line-height: ${_designTokens.typeRampMinus2LineHeight};
10025  font-weight: initial;
10026  font-variation-settings: ${_designTokens.typeRampMinus2FontVariations};
10027`;
10028/** @public */
10029
10030exports.typeRampMinus2 = typeRampMinus2;
10031const typeRampPlus1 = (0, _fastElement.cssPartial)`
10032  font-family: ${_designTokens.bodyFont};
10033  font-size: ${_designTokens.typeRampPlus1FontSize};
10034  line-height: ${_designTokens.typeRampPlus1LineHeight};
10035  font-weight: initial;
10036  font-variation-settings: ${_designTokens.typeRampPlus1FontVariations};
10037`;
10038/** @public */
10039
10040exports.typeRampPlus1 = typeRampPlus1;
10041const typeRampPlus2 = (0, _fastElement.cssPartial)`
10042  font-family: ${_designTokens.bodyFont};
10043  font-size: ${_designTokens.typeRampPlus2FontSize};
10044  line-height: ${_designTokens.typeRampPlus2LineHeight};
10045  font-weight: initial;
10046  font-variation-settings: ${_designTokens.typeRampPlus2FontVariations};
10047`;
10048/** @public */
10049
10050exports.typeRampPlus2 = typeRampPlus2;
10051const typeRampPlus3 = (0, _fastElement.cssPartial)`
10052  font-family: ${_designTokens.bodyFont};
10053  font-size: ${_designTokens.typeRampPlus3FontSize};
10054  line-height: ${_designTokens.typeRampPlus3LineHeight};
10055  font-weight: initial;
10056  font-variation-settings: ${_designTokens.typeRampPlus3FontVariations};
10057`;
10058/** @public */
10059
10060exports.typeRampPlus3 = typeRampPlus3;
10061const typeRampPlus4 = (0, _fastElement.cssPartial)`
10062  font-family: ${_designTokens.bodyFont};
10063  font-size: ${_designTokens.typeRampPlus4FontSize};
10064  line-height: ${_designTokens.typeRampPlus4LineHeight};
10065  font-weight: initial;
10066  font-variation-settings: ${_designTokens.typeRampPlus4FontVariations};
10067`;
10068/** @public */
10069
10070exports.typeRampPlus4 = typeRampPlus4;
10071const typeRampPlus5 = (0, _fastElement.cssPartial)`
10072  font-family: ${_designTokens.bodyFont};
10073  font-size: ${_designTokens.typeRampPlus5FontSize};
10074  line-height: ${_designTokens.typeRampPlus5LineHeight};
10075  font-weight: initial;
10076  font-variation-settings: ${_designTokens.typeRampPlus5FontVariations};
10077`;
10078/** @public */
10079
10080exports.typeRampPlus5 = typeRampPlus5;
10081const typeRampPlus6 = (0, _fastElement.cssPartial)`
10082  font-family: ${_designTokens.bodyFont};
10083  font-size: ${_designTokens.typeRampPlus6FontSize};
10084  line-height: ${_designTokens.typeRampPlus6LineHeight};
10085  font-weight: initial;
10086  font-variation-settings: ${_designTokens.typeRampPlus6FontVariations};
10087`;
10088exports.typeRampPlus6 = typeRampPlus6;
10089
10090},{"../../design-tokens":53,"@microsoft/fast-element":151}],102:[function(require,module,exports){
10091"use strict";
10092
10093Object.defineProperty(exports, "__esModule", {
10094  value: true
10095});
10096exports.heightNumber = void 0;
10097
10098var _fastElement = require("@microsoft/fast-element");
10099
10100var _designTokens = require("../design-tokens");
10101
10102/**
10103 * A formula to retrieve the control height.
10104 * Use this as the value of any CSS property that
10105 * accepts a pixel size.
10106 * @public
10107 */
10108const heightNumber = (0, _fastElement.cssPartial)`(${_designTokens.baseHeightMultiplier} + ${_designTokens.density}) * ${_designTokens.designUnit}`;
10109exports.heightNumber = heightNumber;
10110
10111},{"../design-tokens":53,"@microsoft/fast-element":151}],103:[function(require,module,exports){
10112"use strict";
10113
10114Object.defineProperty(exports, "__esModule", {
10115  value: true
10116});
10117Object.defineProperty(exports, "Switch", {
10118  enumerable: true,
10119  get: function () {
10120    return _fastFoundation.Switch;
10121  }
10122});
10123exports.switchStyles = exports.fluentSwitch = void 0;
10124
10125var _fastFoundation = require("@microsoft/fast-foundation");
10126
10127var _switch = require("./switch.styles");
10128
10129/**
10130 * The Fluent Switch Custom Element. Implements {@link @microsoft/fast-foundation#Switch},
10131 * {@link @microsoft/fast-foundation#SwitchTemplate}
10132 *
10133 *
10134 * @public
10135 * @remarks
10136 * HTML Element: \<fluent-switch\>
10137 */
10138const fluentSwitch = _fastFoundation.Switch.compose({
10139  baseName: 'switch',
10140  template: _fastFoundation.switchTemplate,
10141  styles: _switch.switchStyles,
10142  switch: `

10143    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
10144      <rect x="2" y="2" width="12" height="12" rx="6"/>
10145    </svg>
10146  `
10147});
10148/**
10149 * Styles for Switch
10150 * @public
10151 */
10152
10153
10154exports.fluentSwitch = fluentSwitch;
10155const switchStyles = _switch.switchStyles;
10156/**
10157 * Switch Base class
10158 * @public
10159 */
10160
10161exports.switchStyles = switchStyles;
10162
10163},{"./switch.styles":104,"@microsoft/fast-foundation":256}],104:[function(require,module,exports){
10164"use strict";
10165
10166Object.defineProperty(exports, "__esModule", {
10167  value: true
10168});
10169exports.switchStyles = void 0;
10170
10171var _fastElement = require("@microsoft/fast-element");
10172
10173var _fastWebUtilities = require("@microsoft/fast-web-utilities");
10174
10175var _fastFoundation = require("@microsoft/fast-foundation");
10176
10177var _styles = require("../styles");
10178
10179var _designTokens = require("../design-tokens");
10180
10181var _typeRamp = require("../styles/patterns/type-ramp");
10182
10183var _focus = require("../styles/focus");
10184
10185const switchStyles = (context, definition) => (0, _fastElement.css)`
10186    :host([hidden]) {
10187      display: none;
10188    }
10189
10190    ${(0, _fastFoundation.display)('inline-flex')} :host {
10191      align-items: center;
10192      outline: none;
10193      font-family: ${_designTokens.bodyFont};
10194      ${
10195/*
10196 * Chromium likes to select label text or the default slot when
10197 * the checkbox is clicked. Maybe there is a better solution here?
10198 */
10199''} user-select: none;
10200    }
10201
10202    :host(.disabled) {
10203      opacity: ${_designTokens.disabledOpacity};
10204    }
10205
10206    :host(.disabled) .label,
10207    :host(.readonly) .label,
10208    :host(.disabled) .switch,
10209    :host(.readonly) .switch,
10210    :host(.disabled) .status-message,
10211    :host(.readonly) .status-message {
10212      cursor: ${_fastFoundation.disabledCursor};
10213    }
10214
10215    .switch {
10216      position: relative;
10217      box-sizing: border-box;
10218      width: calc(((${_styles.heightNumber} / 2) + ${_designTokens.designUnit}) * 2px);
10219      height: calc(((${_styles.heightNumber} / 2) + ${_designTokens.designUnit}) * 1px);
10220      background: ${_designTokens.neutralFillInputAltRest};
10221      border-radius: calc(${_styles.heightNumber} * 1px);
10222      border: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeStrongRest};
10223      cursor: pointer;
10224    }
10225
10226    :host(:not(.disabled):hover) .switch {
10227      background: ${_designTokens.neutralFillInputAltHover};
10228      border-color: ${_designTokens.neutralStrokeStrongHover};
10229    }
10230
10231    :host(:not(.disabled):active) .switch {
10232      background: ${_designTokens.neutralFillInputAltActive};
10233      border-color: ${_designTokens.neutralStrokeStrongActive};
10234    }
10235
10236    :host(:${_fastFoundation.focusVisible}) .switch {
10237      ${_focus.focusTreatmentTight}
10238      background: ${_designTokens.neutralFillInputAltFocus};
10239    }
10240
10241    :host(.checked) .switch {
10242      background: ${_designTokens.accentFillRest};
10243      border-color: transparent;
10244    }
10245
10246    :host(.checked:not(.disabled):hover) .switch {
10247      background: ${_designTokens.accentFillHover};
10248      border-color: transparent;
10249    }
10250
10251    :host(.checked:not(.disabled):active) .switch {
10252      background: ${_designTokens.accentFillActive};
10253      border-color: transparent;
10254    }
10255
10256    slot[name='switch'] {
10257      position: absolute;
10258      display: flex;
10259      border: 1px solid transparent; /* Spacing included in the transform reference box */
10260      fill: ${_designTokens.neutralForegroundRest};
10261      transition: all 0.2s ease-in-out;
10262    }
10263
10264    .status-message {
10265      color: ${_designTokens.neutralForegroundRest};
10266      cursor: pointer;
10267      ${_typeRamp.typeRampBase}
10268    }
10269
10270    .label__hidden {
10271      display: none;
10272      visibility: hidden;
10273    }
10274
10275    .label {
10276      color: ${_designTokens.neutralForegroundRest};
10277      ${_typeRamp.typeRampBase}
10278      margin-inline-end: calc(${_designTokens.designUnit} * 2px + 2px);
10279      cursor: pointer;
10280    }
10281
10282    ::slotted([slot="checked-message"]),
10283    ::slotted([slot="unchecked-message"]) {
10284        margin-inline-start: calc(${_designTokens.designUnit} * 2px + 2px);
10285    }
10286
10287    :host(.checked) .switch {
10288      background: ${_designTokens.accentFillRest};
10289    }
10290
10291    :host(.checked) .switch slot[name='switch'] {
10292      fill: ${_designTokens.foregroundOnAccentRest};
10293      filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15));
10294    }
10295
10296    :host(.checked:not(.disabled)) .switch:hover {
10297      background: ${_designTokens.accentFillHover};
10298    }
10299
10300    :host(.checked:not(.disabled)) .switch:hover slot[name='switch'] {
10301      fill: ${_designTokens.foregroundOnAccentHover};
10302    }
10303
10304    :host(.checked:not(.disabled)) .switch:active {
10305      background: ${_designTokens.accentFillActive};
10306    }
10307
10308    :host(.checked:not(.disabled)) .switch:active slot[name='switch'] {
10309      fill: ${_designTokens.foregroundOnAccentActive};
10310    }
10311
10312    .unchecked-message {
10313      display: block;
10314    }
10315
10316    .checked-message {
10317      display: none;
10318    }
10319
10320    :host(.checked) .unchecked-message {
10321      display: none;
10322    }
10323
10324    :host(.checked) .checked-message {
10325      display: block;
10326    }
10327  `.withBehaviors(new _styles.DirectionalStyleSheetBehavior((0, _fastElement.css)`
10328        slot[name='switch'] {
10329          left: 0;
10330        }
10331
10332        :host(.checked) slot[name='switch'] {
10333          left: 100%;
10334          transform: translateX(-100%);
10335        }
10336      `, (0, _fastElement.css)`
10337        slot[name='switch'] {
10338          right: 0;
10339        }
10340
10341        :host(.checked) slot[name='switch'] {
10342          right: 100%;
10343          transform: translateX(100%);
10344        }
10345      `), (0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
10346        :host(:not(.disabled)) .switch slot[name='switch'] {
10347          forced-color-adjust: none;
10348          fill: ${_fastWebUtilities.SystemColors.FieldText};
10349        }
10350        .switch {
10351          background: ${_fastWebUtilities.SystemColors.Field};
10352          border-color: ${_fastWebUtilities.SystemColors.FieldText};
10353        }
10354        :host(.checked) .switch {
10355          background: ${_fastWebUtilities.SystemColors.Highlight};
10356          border-color: ${_fastWebUtilities.SystemColors.Highlight};
10357        }
10358        :host(:not(.disabled):hover) .switch ,
10359        :host(:not(.disabled):active) .switch,
10360        :host(.checked:not(.disabled):hover) .switch {
10361          background: ${_fastWebUtilities.SystemColors.HighlightText};
10362          border-color: ${_fastWebUtilities.SystemColors.Highlight};
10363        }
10364        :host(.checked:not(.disabled)) .switch slot[name="switch"] {
10365          fill: ${_fastWebUtilities.SystemColors.HighlightText};
10366        }
10367        :host(.checked:not(.disabled):hover) .switch slot[name='switch'] {
10368          fill: ${_fastWebUtilities.SystemColors.Highlight};
10369        }
10370        :host(:${_fastFoundation.focusVisible}) .switch {
10371          forced-color-adjust: none;
10372          background: ${_fastWebUtilities.SystemColors.Field}; 
10373          border-color: ${_fastWebUtilities.SystemColors.Highlight};
10374          outline-color: ${_fastWebUtilities.SystemColors.FieldText};
10375        }
10376        :host(.disabled) {
10377          opacity: 1;
10378        }
10379        :host(.disabled) slot[name='switch'] {
10380          forced-color-adjust: none;
10381          fill: ${_fastWebUtilities.SystemColors.GrayText};
10382        }
10383        :host(.disabled) .switch {
10384          background: ${_fastWebUtilities.SystemColors.Field};
10385          border-color: ${_fastWebUtilities.SystemColors.GrayText};
10386        }
10387        .status-message,
10388        .label {
10389          color: ${_fastWebUtilities.SystemColors.FieldText};
10390        }
10391      `));
10392
10393exports.switchStyles = switchStyles;
10394
10395},{"../design-tokens":53,"../styles":97,"../styles/focus":96,"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],105:[function(require,module,exports){
10396"use strict";
10397
10398Object.defineProperty(exports, "__esModule", {
10399  value: true
10400});
10401var _exportNames = {
10402  fluentTabs: true,
10403  tabsStyles: true,
10404  Tabs: true
10405};
10406Object.defineProperty(exports, "Tabs", {
10407  enumerable: true,
10408  get: function () {
10409    return _fastFoundation.Tabs;
10410  }
10411});

10412exports.tabsStyles = exports.fluentTabs = void 0;
10413
10414var _fastFoundation = require("@microsoft/fast-foundation");
10415
10416var _tabs = require("./tabs.styles");
10417
10418var _tab = require("./tab");
10419
10420Object.keys(_tab).forEach(function (key) {
10421  if (key === "default" || key === "__esModule") return;
10422  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
10423  if (key in exports && exports[key] === _tab[key]) return;
10424  Object.defineProperty(exports, key, {
10425    enumerable: true,
10426    get: function () {
10427      return _tab[key];
10428    }
10429  });
10430});
10431
10432var _tabPanel = require("./tab-panel");
10433
10434Object.keys(_tabPanel).forEach(function (key) {
10435  if (key === "default" || key === "__esModule") return;
10436  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
10437  if (key in exports && exports[key] === _tabPanel[key]) return;
10438  Object.defineProperty(exports, key, {
10439    enumerable: true,
10440    get: function () {
10441      return _tabPanel[key];
10442    }
10443  });
10444});
10445
10446/**
10447 * The Fluent Tabs Custom Element. Implements {@link @microsoft/fast-foundation#Tabs},
10448 * {@link @microsoft/fast-foundation#tabsTemplate}
10449 *
10450 *
10451 * @public
10452 * @remarks
10453 * HTML Element: \<fluent-tabs\>
10454 */
10455const fluentTabs = _fastFoundation.Tabs.compose({
10456  baseName: 'tabs',
10457  template: _fastFoundation.tabsTemplate,
10458  styles: _tabs.tabsStyles
10459});
10460
10461exports.fluentTabs = fluentTabs;
10462
10463/**
10464 * Styles for Tabs
10465 * @public
10466 */
10467const tabsStyles = _tabs.tabsStyles;
10468/**
10469 * Tabs base class
10470 * @public
10471 */
10472
10473exports.tabsStyles = tabsStyles;
10474
10475},{"./tab":108,"./tab-panel":106,"./tabs.styles":110,"@microsoft/fast-foundation":256}],106:[function(require,module,exports){
10476"use strict";
10477
10478Object.defineProperty(exports, "__esModule", {
10479  value: true
10480});
10481Object.defineProperty(exports, "TabPanel", {
10482  enumerable: true,
10483  get: function () {
10484    return _fastFoundation.TabPanel;
10485  }
10486});
10487exports.tabPanelStyles = exports.fluentTabPanel = void 0;
10488
10489var _fastFoundation = require("@microsoft/fast-foundation");
10490
10491var _tabPanel = require("./tab-panel.styles");
10492
10493/**
10494 * The Fluent Tab Panel Custom Element. Implements {@link @microsoft/fast-foundation#TabPanel},
10495 * {@link @microsoft/fast-foundation#tabPanelTemplate}
10496 *
10497 *
10498 * @public
10499 * @remarks
10500 * HTML Element: \<fluent-tab-panel\>
10501 */
10502const fluentTabPanel = _fastFoundation.TabPanel.compose({
10503  baseName: 'tab-panel',
10504  template: _fastFoundation.tabPanelTemplate,
10505  styles: _tabPanel.tabPanelStyles
10506}

10506);
10507/**
10508 * Styles for TabPanel
10509 * @public
10510 */
10511
10512
10513exports.fluentTabPanel = fluentTabPanel;
10514const tabPanelStyles = _tabPanel.tabPanelStyles;
10515/**
10516 * Tab panel base styles
10517 * @public
10518 */
10519
10520exports.tabPanelStyles = tabPanelStyles;
10521
10522},{"./tab-panel.styles":107,"@microsoft/fast-foundation":256}],107:[function(require,module,exports){
10523"use strict";
10524
10525Object.defineProperty(exports, "__esModule", {
10526  value: true
10527});
10528exports.tabPanelStyles = void 0;
10529
10530var _fastElement = require("@microsoft/fast-element");
10531
10532var _fastFoundation = require("@microsoft/fast-foundation");
10533
10534var _designTokens = require("../../design-tokens");
10535
10536var _typeRamp = require("../../styles/patterns/type-ramp");
10537
10538const tabPanelStyles = (context, definition) => (0, _fastElement.css)`
10539  ${(0, _fastFoundation.display)('block')} :host {
10540    box-sizing: border-box;
10541    ${_typeRamp.typeRampBase}
10542    padding: 0 calc((6 + (${_designTokens.designUnit} * 2 * ${_designTokens.density})) * 1px);
10543  }
10544`;
10545
10546exports.tabPanelStyles = tabPanelStyles;
10547
10548},{"../../design-tokens":53,"../../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],108:[function(require,module,exports){
10549"use strict";
10550
10551Object.defineProperty(exports, "__esModule", {
10552  value: true
10553});
10554Object.defineProperty(exports, "Tab", {
10555  enumerable: true,
10556  get: function () {
10557    return _fastFoundation.Tab;
10558  }
10559});
10560exports.tabStyles = exports.fluentTab = void 0;
10561
10562var _fastFoundation = require("@microsoft/fast-foundation");
10563
10564var _tab = require("./tab.styles");
10565
10566/**
10567 * The Fluent Tab Custom Element. Implements {@link @microsoft/fast-foundation#Tab},
10568 * {@link @microsoft/fast-foundation#tabTemplate}
10569 *
10570 *
10571 * @public
10572 * @remarks
10573 * HTML Element: \<fluent-tab\>
10574 */
10575const fluentTab = _fastFoundation.Tab.compose({
10576  baseName: 'tab',
10577  template: _fastFoundation.tabTemplate,
10578  styles: _tab.tabStyles
10579});
10580/**
10581 * Styles for Tab
10582 * @public
10583 */
10584
10585
10586exports.fluentTab = fluentTab;
10587const tabStyles = _tab.tabStyles;
10588/**
10589 * Tab base class
10590 * @public
10591 */
10592
10593exports.tabStyles = tabStyles;
10594
10595},{"./tab.styles":109,"@microsoft/fast-foundation":256}],109:[function(require,module,exports){
10596"use strict";
10597
10598Object.defineProperty(exports, "__esModule", {
10599  value: true
10600});
10601exports.tabStyles = void 0;
10602
10603var _fastElement = require("@microsoft/fast-element");
10604
10605var _fastWebUtilities = require("@microsoft/fast-web-utilities");
10606
10607var _fastFoundation = require("@microsoft/fast-foundation");
10608
10609var _styles = require("../../styles");
10610
10611var _designTokens = require("../../design-tokens");
10612
10613var _typeRamp = require("../../styles/patterns/type-ramp");
10614
10615var _focus = require("../../styles/focus");
10616
10617const tabStyles = (context, definition) => (0, _fastElement.css)`
10618      ${(0, _fastFoundation.display)('inline-flex')} :host {
10619        box-sizing: border-box;
10620        ${_typeRamp.typeRampBase}
10621        height: calc((${_styles.heightNumber} + (${_designTokens.designUnit} * 2)) * 1px);
10622        padding: 0 calc((6 + (${_designTokens.designUnit} * 2 * ${_designTokens.density})) * 1px);
10623        color: ${_designTokens.neutralForegroundRest};
10624        border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
10625        border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
10626        align-items: center;
10627        justify-content: center;
10628        grid-row: 1 / 3;
10629        cursor: pointer;
10630      }
10631
10632      :host([aria-selected='true']) {
10633        z-index: 2;
10634      }
10635
10636      :host(:hover),
10637      :host(:active) {
10638        color: ${_designTokens.neutralForegroundRest};
10639      }
10640
10641      :host(:${_fastFoundation.focusVisible}) {
10642        ${_focus.focusTreatmentBase}
10643      }
10644
10645      :host(.vertical) {
10646        justify-content: start;
10647        grid-column: 1 / 3;
10648      }
10649
10650      :host(.vertical[aria-selected='true']) {
10651        z-index: 2;
10652      }
10653
10654      :host(.vertical:hover),
10655      :host(.vertical:active) {
10656        color: ${_designTokens.neutralForegroundRest};
10657      }
10658
10659      :host(.vertical:hover[aria-selected='true']) {
10660      }
10661    `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
10662          :host {
10663            forced-color-adjust: none;
10664            border-color: transparent;
10665            color: ${_fastWebUtilities.SystemColors.ButtonText};
10666            fill: currentcolor;
10667          }
10668          :host(:hover),
10669          :host(.vertical:hover),
10670          :host([aria-selected='true']:hover) {
10671            background: transparent;
10672            color: ${_fastWebUtilities.SystemColors.Highlight};
10673            fill: currentcolor;
10674          }
10675          :host([aria-selected='true']) {
10676            background: transparent;
10677            color: ${_fastWebUtilities.SystemColors.Highlight};
10678            fill: currentcolor;
10679          }
10680          :host(:${_fastFoundation.focusVisible}) {
10681            background: transparent;
10682            outline-color: ${_fastWebUtilities.SystemColors.ButtonText};
10683          }
10684        `));
10685
10686exports.tabStyles = tabStyles;
10687
10688},{"../../design-tokens":53,"../../styles":97,"../../styles/focus":96,"../../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],110:[function(require,module,exports){
10689"use strict";
10690
10691Object.defineProperty(exports, "__esModule", {
10692  value: true
10693});
10694exports.tabsStyles = void 0;
10695
10696var _fastElement = require("@microsoft/fast-element");
10697
10698var _fastWebUtilities = require("@microsoft/fast-web-utilities");
10699
10700var _fastFoundation = require("@microsoft/fast-foundation");
10701
10702var _designTokens = require("../design-tokens");
10703
10704var _styles = require("../styles");
10705
10706var _typeRamp = require("../styles/patterns/type-ramp");
10707
10708const tabsStyles = (context, definition) => (0, _fastElement.css)`
10709      ${(0, _fastFoundation.display)('grid')} :host {
10710        box-sizing: border-box;
10711        ${_typeRamp.typeRampBase}
10712        color: ${_designTokens.neutralForegroundRest};
10713        grid-template-columns: auto 1fr auto;
10714        grid-template-rows: auto 1fr;
10715      }
10716
10717      .tablist {
10718        display: grid;
10719        grid-template-rows: calc(${_styles.heightNumber} * 1px); auto;
10720        grid-template-columns: auto;
10721        position: relative;
10722        width: max-content;
10723        align-self: end;
10724      }
10725
10726      .start,
10727      .end {
10728        align-self: center;
10729      }
10730
10731      .activeIndicator {
10732        grid-row: 2;
10733        grid-column: 1;

10734        width: 20px;
10735        height: 3px;
10736        border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
10737        justify-self: center;
10738        background: ${_designTokens.accentFillRest};
10739      }
10740
10741      .activeIndicatorTransition {
10742        transition: transform 0.2s ease-in-out;
10743      }
10744
10745      .tabpanel {
10746        grid-row: 2;
10747        grid-column-start: 1;
10748        grid-column-end: 4;
10749        position: relative;
10750      }
10751
10752      :host(.vertical) {
10753        grid-template-rows: auto 1fr auto;
10754        grid-template-columns: auto 1fr;
10755      }
10756
10757      :host(.vertical) .tablist {
10758        grid-row-start: 2;
10759        grid-row-end: 2;
10760        display: grid;
10761        grid-template-rows: auto;
10762        grid-template-columns: auto 1fr;
10763        position: relative;
10764        width: max-content;
10765        justify-self: end;
10766        align-self: flex-start;
10767        width: 100%;
10768      }
10769
10770      :host(.vertical) .tabpanel {
10771        grid-column: 2;
10772        grid-row-start: 1;
10773        grid-row-end: 4;
10774      }
10775
10776      :host(.vertical) .end {
10777        grid-row: 3;
10778      }
10779
10780      :host(.vertical) .activeIndicator {
10781        grid-column: 1;
10782        grid-row: 1;
10783        width: 3px;
10784        height: 20px;
10785        margin-inline-start: calc(${_designTokens.focusStrokeWidth} * 1px);
10786        border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
10787        align-self: center;
10788        background: ${_designTokens.accentFillRest};
10789      }
10790
10791      :host(.vertical) .activeIndicatorTransition {
10792        transition: transform 0.2s linear;
10793      }
10794    `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
10795        .activeIndicator,
10796        :host(.vertical) .activeIndicator {
10797          background: ${_fastWebUtilities.SystemColors.Highlight};
10798        }
10799      `));
10800
10801exports.tabsStyles = tabsStyles;
10802
10803},{"../design-tokens":53,"../styles":97,"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],111:[function(require,module,exports){
10804"use strict";
10805
10806Object.defineProperty(exports, "__esModule", {
10807  value: true
10808});
10809exports.textAreaStyles = exports.fluentTextArea = exports.TextArea = void 0;
10810
10811var _tslib = require("tslib");
10812
10813var _fastElement = require("@microsoft/fast-element");
10814
10815var _fastFoundation = require("@microsoft/fast-foundation");
10816
10817var _textArea = require("./text-area.styles");
10818
10819/**
10820 * The Fluent TextArea class
10821 * @internal
10822 */
10823class TextArea extends _fastFoundation.TextArea {
10824  /**
10825   * @internal
10826   */
10827  appearanceChanged(oldValue, newValue) {
10828    if (oldValue !== newValue) {
10829      this.classList.add(newValue);
10830      this.classList.remove(oldValue);
10831    }
10832  }
10833  /**
10834   * @internal
10835   */
10836
10837
10838  connectedCallback() {
10839    super.connectedCallback();
10840
10841    if (!this.appearance) {
10842      this.appearance = 'outline';
10843    }
10844  }
10845
10846}
10847
10848exports.TextArea = TextArea;
10849(0, _tslib.__decorate)([_fastElement.attr], TextArea.prototype, "appearance", void 0);
10850/**
10851 * The Fluent Text Area Custom Element. Implements {@link @microsoft/fast-foundation#TextArea},
10852 * {@link @microsoft/fast-foundation#textAreaTemplate}
10853 *
10854 *
10855 * @public
10856 * @remarks
10857 * HTML Element: \<fluent-text-area\>
10858 *
10859 * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
10860 */
10861
10862const fluentTextArea = TextArea.compose({
10863  baseName: 'text-area',
10864  baseClass: _fastFoundation.TextArea,
10865  template: _fastFoundation.textAreaTemplate,
10866  styles: _textArea.textAreaStyles,
10867  shadowOptions: {
10868    delegatesFocus: true
10869  }
10870});
10871/**
10872 * Styles for TextArea
10873 * @public
10874 */
10875
10876exports.fluentTextArea = fluentTextArea;
10877const textAreaStyles = _textArea.textAreaStyles;
10878exports.textAreaStyles = textAreaStyles;
10879
10880},{"./text-area.styles":112,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"tslib":466}],112:[function(require,module,exports){
10881"use strict";
10882
10883Object.defineProperty(exports, "__esModule", {
10884  value: true
10885});
10886exports.textAreaStyles = void 0;
10887
10888var _fastElement = require("@microsoft/fast-element");
10889
10890var _fastFoundation = require("@microsoft/fast-foundation");
10891
10892var _styles = require("../styles");
10893
10894var _behaviors = require("../utilities/behaviors");
10895
10896var _designTokens = require("../design-tokens");
10897
10898const logicalControlSelector = '.control';
10899
10900const textAreaStyles = (context, definition) => (0, _fastElement.css)`
10901    ${(0, _fastFoundation.display)('inline-flex')}
10902
10903    ${(0, _styles.baseInputStyles)(context, definition, logicalControlSelector)}
10904
10905    ${(0, _styles.inputStateStyles)(context, definition, logicalControlSelector)}
10906
10907    :host {
10908      flex-direction: column;
10909      vertical-align: bottom;
10910    }
10911
10912    .control {
10913      height: calc((${_styles.heightNumber} * 2) * 1px);
10914      padding: calc(${_designTokens.designUnit}

10914 * 1.5px) calc(${_designTokens.designUnit} * 2px + 1px);
10915    }
10916
10917    :host .control {
10918      resize: none;
10919    }
10920
10921    :host(.resize-both) .control {
10922      resize: both;
10923    }
10924
10925    :host(.resize-horizontal) .control {
10926      resize: horizontal;
10927    }
10928
10929    :host(.resize-vertical) .control {
10930      resize: vertical;
10931    }
10932
10933    :host([cols]) {
10934      width: initial;
10935    }
10936
10937    :host([rows]) .control {
10938      height: initial;
10939    }
10940  `.withBehaviors((0, _behaviors.appearanceBehavior)('outline', (0, _styles.inputOutlineStyles)(context, definition, logicalControlSelector)), (0, _behaviors.appearanceBehavior)('filled', (0, _styles.inputFilledStyles)(context, definition, logicalControlSelector)), (0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _styles.inputForcedColorStyles)(context, definition, logicalControlSelector)));
10941
10942exports.textAreaStyles = textAreaStyles;
10943
10944},{"../design-tokens":53,"../styles":97,"../utilities/behaviors":123,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],113:[function(require,module,exports){
10945"use strict";
10946
10947Object.defineProperty(exports, "__esModule", {
10948  value: true
10949});
10950exports.textFieldStyles = exports.fluentTextField = exports.TextField = void 0;
10951
10952var _tslib = require("tslib");
10953
10954var _fastElement = require("@microsoft/fast-element");
10955
10956var _fastFoundation = require("@microsoft/fast-foundation");
10957
10958var _textField = require("./text-field.styles");
10959
10960/**
10961 * The Fluent text field class
10962 * @internal
10963 */
10964class TextField extends _fastFoundation.TextField {
10965  /**
10966   * @internal
10967   */
10968  appearanceChanged(oldValue, newValue) {
10969    if (oldValue !== newValue) {
10970      this.classList.add(newValue);
10971      this.classList.remove(oldValue);
10972    }
10973  }
10974  /**
10975   * @internal
10976   */
10977
10978
10979  connectedCallback() {
10980    super.connectedCallback();
10981
10982    if (!this.appearance) {
10983      this.appearance = 'outline';
10984    }
10985  }
10986
10987}
10988
10989exports.TextField = TextField;
10990(0, _tslib.__decorate)([_fastElement.attr], TextField.prototype, "appearance", void 0);
10991/**
10992 * The Fluent Text Field Custom Element. Implements {@link @microsoft/fast-foundation#TextField},
10993 * {@link @microsoft/fast-foundation#textFieldTemplate}
10994 *
10995 *
10996 * @public
10997 * @remarks
10998 * HTML Element: \<fluent-text-field\>
10999 *
11000 * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
11001 */
11002
11003const fluentTextField = TextField.compose({
11004  baseName: 'text-field',
11005  baseClass: _fastFoundation.TextField,
11006  template: _fastFoundation.textFieldTemplate,
11007  styles: _textField.textFieldStyles,
11008  shadowOptions: {
11009    delegatesFocus: true
11010  }
11011});
11012/**
11013 * Styles for TextField
11014 * @public
11015 */
11016
11017exports.fluentTextField = fluentTextField;
11018const textFieldStyles = _textField.textFieldStyles;
11019exports.textFieldStyles = textFieldStyles;
11020
11021},{"./text-field.styles":114,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"tslib":466}],114:[function(require,module,exports){
11022"use strict";
11023
11024Object.defineProperty(exports, "__esModule", {
11025  value: true
11026});
11027exports.textFieldStyles = void 0;
11028
11029var _fastElement = require("@microsoft/fast-element");
11030
11031var _fastFoundation = require("@microsoft/fast-foundation");
11032
11033var _styles = require("../styles");
11034
11035var _behaviors = require("../utilities/behaviors");
11036
11037var _designTokens = require("../design-tokens");
11038
11039const logicalControlSelector = '.root';
11040
11041const textFieldStyles = (context, definition) => (0, _fastElement.css)`
11042    ${(0, _fastFoundation.display)('inline-block')}
11043
11044    ${(0, _styles.baseInputStyles)(context, definition, logicalControlSelector)}
11045
11046    ${(0, _styles.inputStateStyles)(context, definition, logicalControlSelector)}
11047
11048    .root {
11049      display: flex;
11050      flex-direction: row;
11051    }
11052
11053    .control {
11054      -webkit-appearance: none;
11055      color: inherit;
11056      background: transparent;
11057      border: 0;
11058      height: calc(100% - 4px);
11059      margin-top: auto;
11060      margin-bottom: auto;
11061      padding: 0 calc(${_designTokens.designUnit} * 2px + 1px);
11062      font-family: inherit;
11063      font-size: inherit;
11064      line-height: inherit;
11065    }
11066
11067    .start,
11068    .end {
11069      display: flex;
11070      margin: auto;
11071    }
11072
11073    .start {
11074      display: flex;
11075      margin-inline-start: 11px;
11076    }
11077
11078    .end {
11079      display: flex;
11080      margin-inline-end: 11px;
11081    }
11082  `.withBehaviors((0, _behaviors.appearanceBehavior)('outline', (0, _styles.inputOutlineStyles)(context, definition, logicalControlSelector)), (0, _behaviors.appearanceBehavior)('filled', 

11082(0, _styles.inputFilledStyles)(context, definition, logicalControlSelector)), (0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _styles.inputForcedColorStyles)(context, definition, logicalControlSelector)));
11083
11084exports.textFieldStyles = textFieldStyles;
11085
11086},{"../design-tokens":53,"../styles":97,"../utilities/behaviors":123,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],115:[function(require,module,exports){
11087"use strict";
11088
11089Object.defineProperty(exports, "__esModule", {
11090  value: true
11091});
11092exports.fluentToolbar = exports.Toolbar = void 0;
11093
11094var _fastFoundation = require("@microsoft/fast-foundation");
11095
11096var _toolbar = require("./toolbar.styles");
11097
11098/**
11099 * The Fluent toolbar class
11100 * @internal
11101 */
11102class Toolbar extends _fastFoundation.Toolbar {}
11103/**
11104 * The Fluent Toolbar Custom Element. Implements {@link @microsoft/fast-foundation#Toolbar},
11105 * {@link @microsoft/fast-foundation#toolbarTemplate}
11106 *
11107 *
11108 * @public
11109 * @remarks
11110 * HTML Element: \<fluent-toolbar\>
11111 */
11112
11113
11114exports.Toolbar = Toolbar;
11115const fluentToolbar = Toolbar.compose({
11116  baseName: 'toolbar',
11117  baseClass: _fastFoundation.Toolbar,
11118  template: _fastFoundation.toolbarTemplate,
11119  styles: _toolbar.toolbarStyles
11120});
11121exports.fluentToolbar = fluentToolbar;
11122
11123},{"./toolbar.styles":116,"@microsoft/fast-foundation":256}],116:[function(require,module,exports){
11124"use strict";
11125
11126Object.defineProperty(exports, "__esModule", {
11127  value: true
11128});
11129exports.toolbarStyles = void 0;
11130
11131var _fastElement = require("@microsoft/fast-element");
11132
11133var _fastFoundation = require("@microsoft/fast-foundation");
11134
11135var _fastWebUtilities = require("@microsoft/fast-web-utilities");
11136
11137var _designTokens = require("../design-tokens");
11138
11139var _focus = require("../styles/focus");
11140
11141const toolbarStyles = (context, definition) => (0, _fastElement.css)`
11142    ${(0, _fastFoundation.display)('inline-flex')} :host {
11143      --toolbar-item-gap: calc(${_designTokens.designUnit} * 1px);
11144      background: ${_designTokens.fillColor};
11145      fill: currentcolor;
11146      padding: var(--toolbar-item-gap);
11147      box-sizing: border-box;
11148      align-items: center;
11149    }
11150
11151    :host(${_fastFoundation.focusVisible}) {
11152      ${_focus.focusTreatmentBase}
11153    }
11154
11155    .positioning-region {
11156      align-items: center;
11157      display: inline-flex;
11158      flex-flow: row wrap;
11159      justify-content: flex-start;
11160      flex-grow: 1;
11161    }
11162
11163    :host([orientation='vertical']) .positioning-region {
11164      flex-direction: column;
11165      align-items: start;
11166    }
11167
11168    ::slotted(:not([slot])) {
11169      flex: 0 0 auto;
11170      margin: 0 var(--toolbar-item-gap);
11171    }
11172
11173    :host([orientation='vertical']) ::slotted(:not([slot])) {
11174      margin: var(--toolbar-item-gap) 0;
11175    }
11176
11177    :host([orientation='vertical']) {
11178      display: inline-flex;
11179      flex-direction: column;
11180    }
11181
11182    .start,
11183    .end {
11184      display: flex;
11185      align-items: center;
11186    }
11187
11188    .end {
11189      margin-inline-start: auto;
11190    }
11191
11192    .start__hidden,
11193    .end__hidden {
11194      display: none;
11195    }
11196
11197    ::slotted(svg) {
11198      ${
11199/* Glyph size is temporary - replace when adaptive typography is figured out */
11200''}
11201      width: 16px;
11202      height: 16px;
11203    }
11204  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
11205        :host(:${_fastFoundation.focusVisible}) {
11206          outline-color: ${_fastWebUtilities.SystemColors.Highlight};
11207          color: ${_fastWebUtilities.SystemColors.ButtonText};
11208          forced-color-adjust: none;
11209        }
11210      `));
11211
11212exports.toolbarStyles = toolbarStyles;
11213
11214},{"../design-tokens":53,"../styles/focus":96,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],117:[function(require,module,exports){
11215"use strict";
11216
11217Object.defineProperty(exports, "__esModule", {
11218  value: true
11219});
11220exports.fluentTooltip = exports.Tooltip = void 0;
11221
11222var _fastFoundation = require("@microsoft/fast-foundation");
11223
11224var _designTokens = require("../design-tokens");
11225
11226var _tooltip = require("./tooltip.styles");
11227
11228/**
11229 * The Fluent tooltip class
11230 * @internal
11231 */
11232class Tooltip extends _fastFoundation.Tooltip {
11233  /**
11234   * @internal
11235   */
11236  connectedCallback() {
11237    super.connectedCallback();
11238
11239    _designTokens.fillColor.setValueFor(this, _designTokens.neutralLayerFloating);
11240  }
11241
11242}
11243/**
11244 * The Fluent Tooltip Custom Element. Implements {@link @microsoft/fast-foundation#Tooltip},
11245 * {@link @microsoft/fast-foundation#tooltipTemplate}
11246 *
11247 *
11248 * @public
11249 * @remarks
11250 * HTML Element: \<fluent-tooltip\>
11251 */
11252
11253
11254exports.Tooltip = Tooltip;
11255const fluentTooltip = Tooltip.compose({
11256  baseName: 'tooltip',
11257  baseClass: _fastFoundation.Tooltip,
11258  template: _fastFoundation.tooltipTemplate,
11259  styles: _tooltip.tooltipStyles
11260});
11261exports.fluentTooltip = fluentTooltip;
11262
11263},{"../design-tokens":53,"./tooltip.styles":118,"@microsoft/fast-foundation":256}],118:[function(require,module,exports){
11264"use strict";
11265
11266Object.defineProperty(exports, "__esModule", {
11267  value: true
11268});
11269exports.tooltipStyles = void 0;
11270
11271var _fastElement = require("@microsoft/fast-element");
11272
11273var _fastFoundation = require("@microsoft/fast-foundation");
11274
11275var _index = require("../styles/index");
11276
11277var _designTokens = require("../design-tokens");
11278
11279var _typeRamp = require("../styles/patterns/type-ramp");
11280
11281const tooltipStyles = (context, definition) => (0, _fastElement.css)`
11282    :host {
11283      position: relative;
11284      contain: layout;
11285      overflow: visible;
11286      height: 0;
11287      width: 0;
11288      z-index: 10000;
11289    }
11290
11291    .tooltip {
11292      box-sizing: border-box;
11293      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
11294      border: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeLayerRest};
11295      background: ${_designTokens.fillColor};
11296      color: ${_designTokens.neutralForegroundRest};
11297      padding: 4px 12px;
11298      height: fit-content;
11299      width: fit-content;
11300      ${_typeRamp.typeRampBase}
11301      white-space: nowrap;
11302      box-shadow: ${_index.elevationShadowTooltip};
11303    }
11304
11305    ${context.tagFor(_fastFoundation.AnchoredRegion)} {
11306      display: flex;
11307      justify-content: center;
11308      align-items: center;
11309      overflow: visible;
11310      flex-direction: row;
11311    }
11312
11313    ${context.tagFor(_fastFoundation.AnchoredRegion)}.right,
11314    ${context.tagFor(_fastFoundation.AnchoredRegion)}.left {
11315      flex-direction: column;
11316    }
11317
11318    ${context.tagFor(_fastFoundation.AnchoredRegion)}.top .tooltip::after,
11319    ${context.tagFor(_fastFoundation.AnchoredRegion)}.bottom .tooltip::after,
11320    ${context.tagFor(_fastFoundation.AnchoredRegion)}.left .tooltip::after,
11321    ${context.tagFor(_fastFoundation.AnchoredRegion)}.right .tooltip::after {
11322      content: '';
11323      width: 12px;
11324      height: 12px;
11325      background: ${_designTokens.fillColor};
11326      border-top: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeLayerRest};
11327      border-left: calc(${_designTokens.strokeWidth} * 1px) solid ${_designTokens.neutralStrokeLayerRest};
11328      position: absolute;
11329    }
11330
11331    ${context.tagFor(_fastFoundation.AnchoredRegion)}.top .tooltip::after {
11332      transform: translateX(-50%) rotate(225deg);
11333      bottom: 5px;
11334      left: 50%;
11335    }
11336
11337    ${context.tagFor(_fastFoundation.AnchoredRegion)}.top .tooltip {
11338      margin-bottom: 12px;
11339    }
11340
11341    ${context.tagFor(_fastFoundation.AnchoredRegion)}.bottom .tooltip::after {
11342      transform: translateX(-50%) rotate(45deg);
11343      top: 5px;
11344      left: 50%;
11345    }
11346
11347    ${context.tagFor(_fastFoundation.AnchoredRegion)}.bottom .tooltip {
11348      margin-top: 12px;
11349    }
11350
11351    ${context.tagFor(_fastFoundation.AnchoredRegion)}.left .tooltip::after {
11352      transform: translateY(-50%) rotate(135deg);
11353      top: 50%;
11354      right: 5px;
11355    }
11356
11357    ${context.tagFor(_fastFoundation.AnchoredRegion)}.left .tooltip {
11358      margin-right: 12px;
11359    }
11360
11361    ${context.tagFor(_fastFoundation.AnchoredRegion)}.right .tooltip::after {
11362      transform: translateY(-50%) rotate(-45deg);
11363      top: 50%;
11364      left: 5px;
11365    }
11366
11367    ${context.tagFor(_fastFoundation.AnchoredRegion)}.right .tooltip {
11368      margin-left: 12px;
11369    }
11370  `.withBehaviors((0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
11371        :host([disabled]) {
11372          opacity: 1;
11373        }
11374        ${context.tagFor(_fastFoundation.AnchoredRegion)}.top .tooltip::after,
11375        ${context.tagFor(_fastFoundation.AnchoredRegion)}.bottom .tooltip::after,
11376        ${context.tagFor(_fastFoundation.AnchoredRegion)}.left .tooltip::after,
11377        ${context.tagFor(_fastFoundation.AnchoredRegion)}.right .tooltip::after {
11378          content: '';
11379          width: unset;
11380          height: unset;
11381        }
11382      `));
11383
11384exports.tooltipStyles = tooltipStyles;
11385
11386},{"../design-tokens":53,"../styles/index":97,"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],119:[function(require,module,exports){
11387"use strict";
11388
11389Object.defineProperty(exports, "__esModule", {
11390  value: true
11391});
11392Object.defineProperty(exports, "TreeItem", {
11393  enumerable: true,
11394  get: function () {
11395    return _fastFoundation.TreeItem;
11396  }
11397});

11398exports.treeItemStyles = exports.fluentTreeItem = void 0;
11399
11400var _fastFoundation = require("@microsoft/fast-foundation");
11401
11402var _treeItem = require("./tree-item.styles");
11403
11404/**
11405 * The Fluent tree item Custom Element. Implements, {@link @microsoft/fast-foundation#TreeItem}
11406 * {@link @microsoft/fast-foundation#treeItemTemplate}
11407 *
11408 *
11409 * @public
11410 * @remarks
11411 * HTML Element: \<fluent-tree-item\>
11412 *
11413 */
11414const fluentTreeItem = _fastFoundation.TreeItem.compose({
11415  baseName: 'tree-item',
11416  template: _fastFoundation.treeItemTemplate,
11417  styles: _treeItem.treeItemStyles,
11418  expandCollapseGlyph: `
11419    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
11420      <path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"/>
11421    </svg>
11422  `
11423});
11424/**
11425 * Styles for TreeItem
11426 * @public
11427 */
11428
11429
11430exports.fluentTreeItem = fluentTreeItem;
11431const treeItemStyles = _treeItem.treeItemStyles;
11432/**
11433 * Tree item base class
11434 * @public
11435 */
11436
11437exports.treeItemStyles = treeItemStyles;
11438
11439},{"./tree-item.styles":120,"@microsoft/fast-foundation":256}],120:[function(require,module,exports){
11440"use strict";
11441
11442Object.defineProperty(exports, "__esModule", {
11443  value: true
11444});
11445exports.treeItemStyles = exports.expandCollapseButtonSize = void 0;
11446
11447var _fastElement = require("@microsoft/fast-element");
11448
11449var _fastFoundation = require("@microsoft/fast-foundation");
11450
11451var _fastWebUtilities = require("@microsoft/fast-web-utilities");
11452
11453var _index = require("../styles/index");
11454
11455var _designTokens = require("../design-tokens");
11456
11457var _typeRamp = require("../styles/patterns/type-ramp");
11458
11459var _focus = require("../styles/focus");
11460
11461const ltr = (0, _fastElement.css)`
11462  .expand-collapse-button svg {
11463    transform: rotate(0deg);
11464  }
11465  :host(.nested) .expand-collapse-button {
11466    left: var(--expand-collapse-button-nested-width, calc(${_index.heightNumber} * -1px));
11467  }
11468  :host([selected])::after {
11469    left: calc(${_designTokens.focusStrokeWidth} * 1px);
11470  }
11471  :host([expanded]) > .positioning-region .expand-collapse-button svg {
11472    transform: rotate(90deg);
11473  }
11474`;
11475const rtl = (0, _fastElement.css)`
11476  .expand-collapse-button svg {
11477    transform: rotate(180deg);
11478  }
11479  :host(.nested) .expand-collapse-button {
11480    right: var(--expand-collapse-button-nested-width, calc(${_index.heightNumber} * -1px));
11481  }
11482  :host([selected])::after {
11483    right: calc(${_designTokens.focusStrokeWidth} * 1px);
11484  }
11485  :host([expanded]) > .positioning-region .expand-collapse-button svg {
11486    transform: rotate(90deg);
11487  }
11488`;
11489const expandCollapseButtonSize = (0, _fastElement.cssPartial)`((${_designTokens.baseHeightMultiplier} / 2) * ${_designTokens.designUnit}) + ((${_designTokens.designUnit} * ${_designTokens.density}) / 2)`;
11490exports.expandCollapseButtonSize = expandCollapseButtonSize;
11491
11492const expandCollapseHover = _fastFoundation.DesignToken.create('tree-item-expand-collapse-hover').withDefault(target => {
11493  const recipe = _designTokens.neutralFillStealthRecipe.getValueFor(target);
11494
11495  return recipe.evaluate(target, recipe.evaluate(target).hover).hover;
11496});
11497
11498const selectedExpandCollapseHover = _fastFoundation.DesignToken.create('tree-item-expand-collapse-selected-hover').withDefault(target => {
11499  const baseRecipe = _designTokens.neutralFillSecondaryRecipe.getValueFor(target);
11500
11501  const buttonRecipe = _designTokens.neutralFillStealthRecipe.getValueFor(target);
11502
11503  return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover;
11504});
11505
11506const treeItemStyles = (context, definition) => (0, _fastElement.css)`
11507    ${(0, _fastFoundation.display)('block')} :host {
11508      contain: content;
11509      position: relative;
11510      outline: none;
11511      color: ${_designTokens.neutralForegroundRest};
11512      fill: currentcolor;
11513      cursor: pointer;
11514      font-family: ${_designTokens.bodyFont};
11515      --expand-collapse-button-size: calc(${_index.heightNumber} * 1px);
11516      --tree-item-nested-width: 0;
11517    }
11518
11519    .positioning-region {
11520      display: flex;
11521      position: relative;
11522      box-sizing: border-box;
11523      background: ${_designTokens.neutralFillStealthRest};
11524      border: calc(${_designTokens.strokeWidth} * 1px) solid transparent;
11525      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
11526      height: calc((${_index.heightNumber} + 1) * 1px);
11527    }
11528
11529    :host(:${_fastFoundation.focusVisible}) .positioning-region {
11530      ${_focus.focusTreatmentBase}
11531    }
11532
11533    .positioning-region::before {
11534      content: '';
11535      display: block;
11536      width: var(--tree-item-nested-width);
11537      flex-shrink: 0;
11538    }
11539
11540    :host(:not([disabled])) .positioning-region:hover {
11541      background: ${_designTokens.neutralFillStealthHover};
11542    }
11543
11544    :host(:not([disabled])) .positioning-region:active {
11545      background: ${_designTokens.neutralFillStealthActive};
11546    }
11547
11548    .content-region {
11549      display: inline-flex;
11550      align-items: center;
11551      white-space: nowrap;
11552      width: 100%;
11553      height: calc(${_index.heightNumber} * 1px);
11554      margin-inline-start: calc(${_designTokens.designUnit} * 2px + 8px);
11555      ${_typeRamp.typeRampBase}
11556    }
11557
11558    .items {
11559      display: none;
11560      ${
11561/* Font size should be based off calc(1em + (design-unit + glyph-size-number) * 1px) -
11562    update when density story is figured out */
11563''} font-size: calc(1em + (${_designTokens.designUnit} + 16) * 1px);
11564    }
11565
11566    .expand-collapse-button {
11567      background: none;
11568      border: none;
11569      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
11570      ${
11571/* Width and Height should be based off calc(glyph-size-number + (design-unit * 4) * 1px) -
11572    update when density story is figured out */
11573''} width: calc((${expandCollapseButtonSize} + (${_designTokens.designUnit} * 2)) * 1px);
11574      height: calc((${expandCollapseButtonSize} + (${_designTokens.designUnit} * 2)) * 1px);
11575      padding: 0;
11576      display: flex;
11577      justify-content: center;
11578      align-items: center;
11579      cursor: pointer;
11580      margin: 0 6px;
11581    }
11582
11583    .expand-collapse-button svg {
11584      transition: transform 0.1s linear;
11585      pointer-events: none;
11586    }
11587
11588    .start,
11589    .end {
11590      display: flex;
11591    }
11592
11593    .start {
11594      ${
11595/* need to swap out once we understand how horizontalSpacing will work */
11596''} margin-inline-end: calc(${_designTokens.designUnit} * 2px + 2px);
11597    }
11598
11599    .end {
11600      ${
11601/* need to swap out once we understand how horizontalSpacing will work */
11602''} margin-inline-start: calc(${_designTokens.designUnit} * 2px + 2px);
11603    }
11604
11605    :host(.expanded) > .items {
11606      display: block;
11607    }
11608
11609    :host([disabled]) {
11610      opacity: ${_designTokens.disabledOpacity};
11611      cursor: ${_fastFoundation.disabledCursor};
11612    }
11613
11614    :host(.nested) .content-region {
11615      position: relative;
11616      margin-inline-start: var(--expand-collapse-button-size);
11617    }
11618
11619    :host(.nested) .expand-collapse-button {
11620      position: absolute;
11621    }
11622
11623    :host(.nested) .expand-collapse-button:hover {
11624      background: ${expandCollapseHover};
11625    }
11626
11627    :host(:not([disabled])[selected]) .positioning-region {
11628      background: ${_designTokens.neutralFillSecondaryRest};
11629    }
11630
11631    :host(:not([disabled])[selected]) .expand-collapse-button:hover {
11632      background: ${selectedExpandCollapseHover};
11633    }
11634
11635    :host([selected])::after {
11636      content: '';
11637      display: block;
11638      position: absolute;
11639      top: calc((${_index.heightNumber} / 4) * 1px);
11640      width: 3px;
11641      height: calc((${_index.heightNumber} / 2) * 1px);
11642      ${
11643/* The french fry background needs to be calculated based on the selected background state for this control.
11644    We currently have no way of changing that, so setting to accent-foreground-rest for the time being */
11645''} background: ${_designTokens.accentFillRest};
11646      border-radius: calc(${_designTokens.controlCornerRadius} * 1px);
11647    }
11648
11649    ::slotted(fluent-tree-item) {
11650      --tree-item-nested-width: 1em;
11651      --expand-collapse-button-nested-width: calc(${_index.heightNumber} * -1px);
11652    }
11653  `.withBehaviors(new _index.DirectionalStyleSheetBehavior(ltr, rtl), (0, _fastFoundation.forcedColorsStylesheetBehavior)((0, _fastElement.css)`
11654        :host {
11655          color: ${_fastWebUtilities.SystemColors.ButtonText};
11656        }
11657        .positioning-region {
11658          border-color: ${_fastWebUtilities.SystemColors.ButtonFace};
11659          background: ${_fastWebUtilities.SystemColors.ButtonFace};
11660        }
11661        :host(:not([disabled])) .positioning-region:hover,
11662        :host(:not([disabled])) .positioning-region:active,
11663        :host(:not([disabled])[selected]) .positioning-region {
11664          background: ${_fastWebUtilities.SystemColors.Highlight};
11665        }
11666        :host .positioning-region:hover .content-region,
11667        :host([selected]) .positioning-region .content-region {
11668          forced-color-adjust: none;
11669          color: ${_fastWebUtilities.SystemColors.HighlightText};
11670        }
11671        :host([disabled][selected]) .positioning-region .content-region {
11672          color: ${_fastWebUtilities.SystemColors.GrayText};
11673        }
11674        :host([selected])::after {
11675          background: ${_fastWebUtilities.SystemColors.HighlightText};
11676        }
11677        :host(:${_fastFoundation.focusVisible}) .positioning-region {
11678          forced-color-adjust: none;
11679          outline-color: ${_fastWebUtilities.SystemColors.ButtonFace};
11680        }
11681        :host([disabled]),
11682        :host([disabled]) .content-region,
11683        :host([disabled]) .positioning-region:hover .content-region {
11684          opacity: 1;
11685          color: ${_fastWebUtilities.SystemColors.GrayText};
11686        }
11687        :host(.nested) .expand-collapse-button:hover,
11688        :host(:not([disabled])[selected]) .expand-collapse-button:hover {
11689          background: ${_fastWebUtilities.SystemColors.ButtonFace};
11690          fill: ${_fastWebUtilities.SystemColors.ButtonText};
11691        }
11692      `));
11693
11694exports.treeItemStyles = treeItemStyles;
11695
11696},{"../design-tokens":53,"../styles/focus":96,"../styles/index":97,"../styles/patterns/type-ramp":101,"@microsoft/fast-element":151,"@microsoft/fast-foundation":256,"@microsoft/fast-web-utilities":379}],121:[function(require,module,exports){
11697"use strict";
11698
11699Object.defineProperty(exports, "__esModule", {
11700  value: true
11701});
11702Object.defineProperty(exports, "TreeView", {
11703  enumerable: true,
11704  get: function () {
11705    return _fastFoundation.TreeView;
11706  }
11707});

11708exports.treeViewStyles = exports.fluentTreeView = void 0;
11709
11710var _fastFoundation = require("@microsoft/fast-foundation");
11711
11712var _treeView = require("./tree-view.styles");
11713
11714/**
11715 * The Fluent tree view Custom Element. Implements, {@link @microsoft/fast-foundation#TreeView}
11716 * {@link @microsoft/fast-foundation#treeViewTemplate}
11717 *
11718 *
11719 * @public
11720 * @remarks
11721 * HTML Element: \<fluent-tree-view\>
11722 *
11723 */
11724const fluentTreeView = _fastFoundation.TreeView.compose({
11725  baseName: 'tree-view',
11726  template: _fastFoundation.treeViewTemplate,
11727  styles: _treeView.treeViewStyles
11728});
11729/**
11730 * Styles for TreeView
11731 * @public
11732 */
11733
11734
11735exports.fluentTreeView = fluentTreeView;
11736const treeViewStyles = _treeView.treeViewStyles;
11737/**
11738 * Tree View base class
11739 * @public
11740 */
11741
11742exports.treeViewStyles = treeViewStyles;
11743
11744},{"./tree-view.styles":122,"@microsoft/fast-foundation":256}],122:[function(require,module,exports){
11745"use strict";
11746
11747Object.defineProperty(exports, "__esModule", {
11748  value: true
11749});
11750exports.treeViewStyles = void 0;
11751
11752var _fastElement = require("@microsoft/fast-element");
11753
11754var _fastFoundation = require("@microsoft/fast-foundation");
11755
11756const treeViewStyles = (context, definition) => (0, _fastElement.css)`
11757  :host([hidden]) {
11758    display: none;
11759  }
11760
11761  ${(0, _fastFoundation.display)('flex')} :host {
11762    flex-direction: column;
11763    align-items: stretch;
11764    min-width: fit-content;
11765    font-size: 0;
11766  }
11767`;
11768
11769exports.treeViewStyles = treeViewStyles;
11770
11771},{"@microsoft/fast-element":151,"@microsoft/fast-foundation":256}],123:[function(require,module,exports){
11772"use strict";
11773
11774Object.defineProperty(exports, "__esModule", {
11775  value: true
11776});
11777exports.appearanceBehavior = appearanceBehavior;
11778
11779var _fastFoundation = require("@microsoft/fast-foundation");
11780
11781/**
11782 * Behavior that will conditionally apply a stylesheet based on the elements
11783 * appearance property
11784 *
11785 * @param value - The value of the appearance property
11786 * @param styles - The styles to be applied when condition matches
11787 *
11788 * @public
11789 */
11790function appearanceBehavior(value, styles) {
11791  return new _fastFoundation.PropertyStyleSheetBehavior('appearance', value, styles);
11792}
11793
11794},{"@microsoft/fast-foundation":256}],124:[function(require,module,exports){
11795"use strict";
11796
11797Object.defineProperty(exports, "__esModule", {
11798  value: true
11799});
11800exports.StandardFontWeight = void 0;
11801
11802/** @public */
11803const StandardFontWeight = {
11804  Thin: 100,
11805  ExtraLight: 200,
11806  Light: 300,
11807  Normal: 400,
11808  Medium: 500,
11809  SemiBold: 600,
11810  Bold: 700,
11811  ExtraBold: 800,
11812  Black: 900
11813};
11814exports.StandardFontWeight = StandardFontWeight;
11815
11816},{}],125:[function(require,module,exports){
11817"use strict";
11818
11819Object.defineProperty(exports, "__esModule", {
11820  value: true
11821});
11822exports.ColorBlendMode = void 0;
11823exports.blend = blend;
11824exports.blendBurn = blendBurn;
11825exports.blendBurnChannel = blendBurnChannel;
11826exports.blendColor = blendColor;
11827exports.blendDarken = blendDarken;
11828exports.blendDarkenChannel = blendDarkenChannel;
11829exports.blendDodge = blendDodge;
11830exports.blendDodgeChannel = blendDodgeChannel;
11831exports.blendLighten = blendLighten;
11832exports.blendLightenChannel = blendLightenChannel;
11833exports.blendMultiply = blendMultiply;
11834exports.blendMultiplyChannel = blendMultiplyChannel;
11835exports.blendOverlay = blendOverlay;
11836exports.blendOverlayChannel = blendOverlayChannel;
11837exports.blendScreen = blendScreen;
11838exports.blendScreenChannel = blendScreenChannel;
11839exports.computeAlphaBlend = computeAlphaBlend;
11840exports.darkenViaLAB = darkenViaLAB;
11841exports.desaturateViaLCH = desaturateViaLCH;
11842exports.lightenViaLAB = lightenViaLAB;
11843exports.saturateViaLCH = saturateViaLCH;
11844
11845var _colorConverters = require("./color-converters.js");
11846
11847var _colorHsl = require("./color-hsl.js");
11848
11849var _colorLab = require("./color-lab.js");
11850
11851var _colorLch = require("./color-lch.js");
11852
11853var _colorRgba = require("./color-rgba-64.js");
11854
11855var _mathUtilities = require("./math-utilities.js");
11856
11857/**
11858 * Saturate a color using LCH color space
11859 *
11860 * @remarks
11861 * The alpha channel of the input is ignored
11862 *
11863 * @public
11864 */
11865function saturateViaLCH(input, saturation, saturationConstant = 18) {
11866  const lch = (0, _colorConverters.rgbToLCH)(input);
11867  let sat = lch.c + saturation * saturationConstant;
11868
11869  if (sat < 0) {
11870    sat = 0;
11871  }
11872
11873  return (0, _colorConverters.lchToRGB)(new _colorLch.ColorLCH(lch.l, sat, lch.h));
11874}
11875/**
11876 * De-saturate a color using LCH color space
11877 *
11878 * @remarks
11879 * The alpha channel of the input is ignored
11880 *
11881 * @public
11882 */
11883
11884
11885function desaturateViaLCH(input, saturation, saturationConstant = 18) {
11886  return saturateViaLCH(input, -1 * saturation, saturationConstant);
11887}
11888/**
11889 * Darken a color using LAB color space
11890 *
11891 * @remarks
11892 * The alpha channel of the input is ignored
11893 *
11894 * @public
11895 */
11896
11897
11898function darkenViaLAB(input, amount, darkenConstant = 18) {
11899  const lab = (0, _colorConverters.rgbToLAB)(input);

11900  const darkened = lab.l - amount * darkenConstant;
11901  return (0, _colorConverters.labToRGB)(new _colorLab.ColorLAB(darkened, lab.a, lab.b));
11902}
11903/**
11904 * Lighten a color using LAB color space
11905 *
11906 * @remarks
11907 * The alpha channel of the input is ignored
11908 *
11909 * @public
11910 */
11911
11912
11913function lightenViaLAB(input, amount, darkenConstant = 18) {
11914  return darkenViaLAB(input, -1 * amount, darkenConstant);
11915}
11916/**
11917 * @public
11918 */
11919
11920
11921function blendBurnChannel(bottom, top) {
11922  if (top === 0.0) {
11923    // Despite the discontinuity, other sources seem to use 0.0 here instead of 1
11924    return 0.0;
11925  }
11926
11927  return 1.0 - (1.0 - bottom) / top;
11928}
11929/**
11930 * Blends two colors with the burn mode
11931 *
11932 * @remarks
11933 * The alpha channel of the input is ignored
11934 *
11935 * @public
11936 */
11937
11938
11939function blendBurn(bottom, top) {
11940  return new _colorRgba.ColorRGBA64(blendBurnChannel(bottom.r, top.r), blendBurnChannel(bottom.g, top.g), blendBurnChannel(bottom.b, top.b), 1);
11941}
11942/**
11943 * Blends two colors
11944 *
11945 * @remarks
11946 * The alpha channel of the input is ignored
11947 *
11948 * @public
11949 */
11950
11951
11952function blendColor(bottom, top) {
11953  const bottomHSL = (0, _colorConverters.rgbToHSL)(bottom);
11954  const topHSL = (0, _colorConverters.rgbToHSL)(top);
11955
11956  if (topHSL.s === 0) {
11957    return new _colorRgba.ColorRGBA64(bottomHSL.l, bottomHSL.l, bottomHSL.l, 1);
11958  }
11959
11960  return (0, _colorConverters.hslToRGB)(new _colorHsl.ColorHSL(topHSL.h, topHSL.s, bottomHSL.l));
11961}
11962/**
11963 * @public
11964 */
11965
11966
11967function blendDarkenChannel(bottom, top) {
11968  return Math.min(bottom, top);
11969}
11970/**
11971 * Blends two colors with the darken mode
11972 *
11973 * @remarks
11974 * The alpha channel of the input is ignored
11975 *
11976 * @public
11977 */
11978
11979
11980function blendDarken(bottom, top) {
11981  return new _colorRgba.ColorRGBA64(blendDarkenChannel(bottom.r, top.r), blendDarkenChannel(bottom.g, top.g), blendDarkenChannel(bottom.b, top.b), 1);
11982}
11983/**
11984 * @public
11985 */
11986
11987
11988function blendDodgeChannel(bottom, top) {
11989  if (top >= 1.0) {
11990    return 1.0;
11991  }
11992
11993  const retVal = bottom / (1.0 - top);
11994
11995  if (retVal >= 1.0) {
11996    return 1.0;
11997  }
11998
11999  return retVal;
12000}
12001/**
12002 * Blends two colors with the dodge mode
12003 *
12004 * @remarks
12005 * The alpha channel of the input is ignored
12006 *
12007 * @public
12008 */
12009
12010
12011function blendDodge(bottom, top) {
12012  return new _colorRgba.ColorRGBA64(blendDodgeChannel(bottom.r, top.r), blendDodgeChannel(bottom.g, top.g), blendDodgeChannel(bottom.b, top.b), 1);
12013}
12014/**
12015 * @public
12016 */
12017
12018
12019function blendLightenChannel(bottom, top) {
12020  return Math.max(bottom, top);
12021}
12022/**
12023 * Blends two colors with the lighten mode
12024 *
12025 * @remarks
12026 * The alpha channel of the input is ignored
12027 *
12028 * @public
12029 */
12030
12031
12032function blendLighten(bottom, top) {
12033  return new _colorRgba.ColorRGBA64(blendLightenChannel(bottom.r, top.r), blendLightenChannel(bottom.g, top.g), blendLightenChannel(bottom.b, top.b), 1);
12034}
12035/**
12036 * @public
12037 */
12038
12039
12040function blendMultiplyChannel(bottom, top) {
12041  return bottom * top;
12042}
12043/**
12044 * Blends two colors with the multiply mode
12045 *
12046 * @remarks
12047 * The alpha channel of the input is ignored
12048 *
12049 * @public
12050 */
12051
12052
12053function blendMultiply(bottom, top) {
12054  return new _colorRgba.ColorRGBA64(blendMultiplyChannel(bottom.r, top.r), blendMultiplyChannel(bottom.g, top.g), blendMultiplyChannel(bottom.b, top.b), 1);
12055}
12056/**
12057 * @public
12058 */
12059
12060
12061function blendOverlayChannel(bottom, top) {
12062  if (bottom < 0.5) {
12063    return (0, _mathUtilities.clamp)(2.0 * top * bottom, 0, 1);
12064  }
12065
12066  return (0, _mathUtilities.clamp)(1.0 - 2.0 * (1.0 - top) * (1.0 - bottom), 0, 1);
12067}
12068/**
12069 * Blends two colors with the overlay mode
12070 *
12071 * @remarks
12072 * The alpha channel of the input is ignored
12073 *
12074 * @public
12075 */
12076
12077
12078function blendOverlay(bottom, top) {
12079  return new _colorRgba.ColorRGBA64(blendOverlayChannel(bottom.r, top.r), blendOverlayChannel(bottom.g, top.g), blendOverlayChannel(bottom.b, top.b), 1);
12080}
12081/**
12082 * @public
12083 */
12084
12085
12086function blendScreenChannel(bottom, top) {
12087  return 1.0 - (1.0 - top) * (1.0 - bottom);
12088}
12089/**
12090 * Blends two colors with the screen mode
12091 *
12092 * @remarks
12093 * The alpha channel of the input is ignored
12094 *
12095 * @public
12096 */
12097
12098
12099function blendScreen(bottom, top) {
12100  return new _colorRgba.ColorRGBA64(blendScreenChannel(bottom.r, top.r), blendScreenChannel(bottom.g, top.g), blendScreenChannel(bottom.b, top.b), 1);
12101}
12102/**
12103 * Color blend modes.
12104 * @public
12105 */
12106
12107
12108var ColorBlendMode;
12109exports.ColorBlendMode = ColorBlendMode;
12110
12111(function (ColorBlendMode) {
12112  ColorBlendMode[ColorBlendMode["Burn"] = 0] = "Burn";
12113  ColorBlendMode[ColorBlendMode["Color"] = 1] = "Color";
12114  ColorBlendMode[ColorBlendMode["Darken"] = 2] = "Darken";
12115  ColorBlendMode[ColorBlendMode["Dodge"] = 3] = "Dodge";

12116  ColorBlendMode[ColorBlendMode["Lighten"] = 4] = "Lighten";
12117  ColorBlendMode[ColorBlendMode["Multiply"] = 5] = "Multiply";
12118  ColorBlendMode[ColorBlendMode["Overlay"] = 6] = "Overlay";
12119  ColorBlendMode[ColorBlendMode["Screen"] = 7] = "Screen";
12120})(ColorBlendMode || (exports.ColorBlendMode = ColorBlendMode = {}));
12121/**
12122 * Blend two colors.
12123 *
12124 * @remarks
12125 * The alpha channel of the input is ignored
12126 *
12127 * @public
12128 */
12129
12130
12131function blend(mode, bottom, top) {
12132  switch (mode) {
12133    case ColorBlendMode.Burn:
12134      return blendBurn(bottom, top);
12135
12136    case ColorBlendMode.Color:
12137      return blendColor(bottom, top);
12138
12139    case ColorBlendMode.Darken:
12140      return blendDarken(bottom, top);
12141
12142    case ColorBlendMode.Dodge:
12143      return blendDodge(bottom, top);
12144
12145    case ColorBlendMode.Lighten:
12146      return blendLighten(bottom, top);
12147
12148    case ColorBlendMode.Multiply:
12149      return blendMultiply(bottom, top);
12150
12151    case ColorBlendMode.Overlay:
12152      return blendOverlay(bottom, top);
12153
12154    case ColorBlendMode.Screen:
12155      return blendScreen(bottom, top);
12156
12157    default:
12158      throw new Error("Unknown blend mode");
12159  }
12160}
12161/**
12162 * Alpha channel of bottom is ignored
12163 * The returned color always has an alpha channel of 1
12164 * Different programs (eg: paint.net, photoshop) will give different answers than this occasionally but within +/- 1/255 in each channel. Just depends on the details of how they round off decimals
12165 *
12166 * @public
12167 */
12168
12169
12170function computeAlphaBlend(bottom, top) {
12171  if (top.a >= 1) {
12172    return top;
12173  } else if (top.a <= 0) {
12174    return new _colorRgba.ColorRGBA64(bottom.r, bottom.g, bottom.b, 1);
12175  }
12176
12177  const r = top.a * top.r + (1 - top.a) * bottom.r;
12178  const g = top.a * top.g + (1 - top.a) * bottom.g;
12179  const b = top.a * top.b + (1 - top.a) * bottom.b;
12180  return new _colorRgba.ColorRGBA64(r, g, b, 1);
12181}
12182
12183},{"./color-converters.js":126,"./color-hsl.js":127,"./color-lab.js":130,"./color-lch.js":131,"./color-rgba-64.js":134,"./math-utilities.js":140}],126:[function(require,module,exports){
12184"use strict";
12185
12186Object.defineProperty(exports, "__esModule", {
12187  value: true
12188});
12189exports.calculateOverlayColor = calculateOverlayColor;
12190exports.contrastRatio = contrastRatio;
12191exports.hslToRGB = hslToRGB;
12192exports.hsvToRGB = hsvToRGB;
12193exports.labToLCH = labToLCH;
12194exports.labToRGB = labToRGB;
12195exports.labToXYZ = labToXYZ;
12196exports.lchToLAB = lchToLAB;
12197exports.lchToRGB = lchToRGB;
12198exports.rgbToHSL = rgbToHSL;
12199exports.rgbToHSV = rgbToHSV;
12200exports.rgbToLAB = rgbToLAB;
12201exports.rgbToLCH = rgbToLCH;
12202exports.rgbToLinearLuminance = rgbToLinearLuminance;
12203exports.rgbToRelativeLuminance = rgbToRelativeLuminance;
12204exports.rgbToTemperature = rgbToTemperature;
12205exports.rgbToXYZ = rgbToXYZ;
12206exports.temperatureToRGB = temperatureToRGB;
12207exports.xyzToLAB = xyzToLAB;
12208exports.xyzToRGB = xyzToRGB;
12209
12210var _colorHsl = require("./color-hsl.js");
12211
12212var _colorHsv = require("./color-hsv.js");
12213
12214var _colorLab = require("./color-lab.js");
12215
12216var _colorLch = require("./color-lch.js");
12217
12218var _colorRgba = require("./color-rgba-64.js");
12219
12220var _colorXyz = require("./color-xyz.js");
12221
12222var _mathUtilities = require("./math-utilities.js");
12223
12224// All hue values are in degrees rather than radians or normalized
12225// All conversions use the D65 2 degree white point for XYZ
12226// Info on conversions and constants used can be found in the following:
12227// https://en.wikipedia.org/wiki/CIELAB_color_space
12228// https://en.wikipedia.org/wiki/Illuminant_D65
12229// https://ninedegreesbelow.com/photography/xyz-rgb.html
12230// http://user.engineering.uiowa.edu/~aip/Misc/ColorFAQ.html
12231// https://web.stanford.edu/~sujason/ColorBalancing/adaptation.html
12232// http://brucelindbloom.com/index.html
12233
12234/**
12235 * Get the luminance of a color in the linear RGB space.
12236 * This is not the same as the relative luminance in the sRGB space for WCAG contrast calculations. Use rgbToRelativeLuminance instead.
12237 * @param rgb - The input color
12238 *
12239 * @public
12240 */
12241function rgbToLinearLuminance(rgb) {
12242  return rgb.r * 0.2126 + rgb.g * 0.7152 + rgb.b * 0.0722;
12243}
12244/**
12245 * Get the relative luminance of a color.
12246 * Adjusts the color to sRGB space, which is necessary for the WCAG contrast spec.
12247 * The alpha channel of the input is ignored.
12248 * @param rgb - The input color
12249 *
12250 * @public
12251 */
12252
12253
12254function rgbToRelativeLuminance(rgb) {
12255  function luminanceHelper(i) {
12256    if (i <= 0.03928) {
12257      return i / 12.92;
12258    }
12259
12260    return Math.pow((i + 0.055) / 1.055, 2.4);
12261  }
12262
12263  return rgbToLinearLuminance(new _colorRgba.ColorRGBA64(luminanceHelper(rgb.r), luminanceHelper(rgb.g), luminanceHelper(rgb.b), 1));
12264}
12265
12266const calculateContrastRatio = (a, b) => (a + 0.05) / (b + 0.05);
12267/**
12268 * Calculate the contrast ratio between two colors. Uses the formula described by {@link https://www.w3.org/TR/WCAG20-TECHS/G17.html | WCAG 2.0}.
12269 *
12270 * @remarks
12271 * The alpha channel of the input is ignored
12272 *
12273 * @public
12274 */
12275
12276
12277function contrastRatio(a, b) {
12278  const luminanceA = rgbToRelativeLuminance(a);
12279  const luminanceB = rgbToRelativeLuminance(b);
12280  return luminanceA > luminanceB ? calculateContrastRatio(luminanceA, luminanceB) : calculateContrastRatio(luminanceB, luminanceA);
12281}
12282
12283function calcChannelOverlay(match, background, overlay) {
12284  if (overlay - background === 0) {
12285    return 0;
12286  } else {
12287    return (match - background) / (overlay - background);
12288  }
12289}
12290

12291function calcRgbOverlay(rgbMatch, rgbBackground, rgbOverlay) {
12292  const rChannel = calcChannelOverlay(rgbMatch.r, rgbBackground.r, rgbOverlay.r);
12293  const gChannel = calcChannelOverlay(rgbMatch.g, rgbBackground.g, rgbOverlay.g);
12294  const bChannel = calcChannelOverlay(rgbMatch.b, rgbBackground.b, rgbOverlay.b);
12295  return (rChannel + gChannel + bChannel) / 3;
12296}
12297/**
12298 * Calculate an overlay color that uses rgba (rgb + alpha) that matches the appearance of a given solid color when placed on the same background
12299 * @param rgbMatch - The solid color the overlay should match in appearance when placed over the rgbBackground
12300 * @param rgbBackground - The background on which the overlay rests
12301 * @param rgbOverlay - The rgb color of the overlay. Typically this is either pure white or pure black and when not provided will be determined automatically. This color will be used in the returned output
12302 * @returns The rgba (rgb + alpha) color of the overlay
12303 *
12304 * @public
12305 */
12306
12307
12308function calculateOverlayColor(rgbMatch, rgbBackground, rgbOverlay = null) {
12309  let alpha = 0;
12310  let overlay = rgbOverlay;
12311
12312  if (overlay !== null) {
12313    alpha = calcRgbOverlay(rgbMatch, rgbBackground, overlay);
12314  } else {
12315    overlay = new _colorRgba.ColorRGBA64(0, 0, 0, 1);
12316    alpha = calcRgbOverlay(rgbMatch, rgbBackground, overlay);
12317
12318    if (alpha <= 0) {
12319      overlay = new _colorRgba.ColorRGBA64(1, 1, 1, 1);
12320      alpha = calcRgbOverlay(rgbMatch, rgbBackground, overlay);
12321    }
12322  }
12323
12324  alpha = Math.round(alpha * 1000) / 1000;
12325  return new _colorRgba.ColorRGBA64(overlay.r, overlay.g, overlay.b, alpha);
12326}
12327/**
12328 * Converts a {@link @microsoft/fast-colors#ColorRGBA64} to a {@link @microsoft/fast-colors#ColorHSL}
12329 * @param rgb - the rgb color to convert
12330 *
12331 * @remarks
12332 * The alpha channel of the input is ignored
12333 *
12334 * @public
12335 */
12336
12337
12338function rgbToHSL(rgb) {
12339  const max = Math.max(rgb.r, rgb.g, rgb.b);
12340  const min = Math.min(rgb.r, rgb.g, rgb.b);
12341  const delta = max - min;
12342  let hue = 0;
12343
12344  if (delta !== 0) {
12345    if (max === rgb.r) {
12346      hue = 60 * ((rgb.g - rgb.b) / delta % 6);
12347    } else if (max === rgb.g) {
12348      hue = 60 * ((rgb.b - rgb.r) / delta + 2);
12349    } else {
12350      hue = 60 * ((rgb.r - rgb.g) / delta + 4);
12351    }
12352  }
12353
12354  if (hue < 0) {
12355    hue += 360;
12356  }
12357
12358  const lum = (max + min) / 2;
12359  let sat = 0;
12360
12361  if (delta !== 0) {
12362    sat = delta / (1 - Math.abs(2 * lum - 1));
12363  }
12364
12365  return new _colorHsl.ColorHSL(hue, sat, lum);
12366}
12367/**
12368 * Converts a {@link @microsoft/fast-colors#ColorHSL} to a {@link @microsoft/fast-colors#ColorRGBA64}
12369 * @param hsl - the hsl color to convert
12370 * @param alpha - the alpha value
12371 *
12372 * @public
12373 */
12374
12375
12376function hslToRGB(hsl, alpha = 1) {
12377  const c = (1 - Math.abs(2 * hsl.l - 1)) * hsl.s;
12378  const x = c * (1 - Math.abs(hsl.h / 60 % 2 - 1));
12379  const m = hsl.l - c / 2;
12380  let r = 0;
12381  let g = 0;
12382  let b = 0;
12383
12384  if (hsl.h < 60) {
12385    r = c;
12386    g = x;
12387    b = 0;
12388  } else if (hsl.h < 120) {
12389    r = x;
12390    g = c;
12391    b = 0;
12392  } else if (hsl.h < 180) {
12393    r = 0;
12394    g = c;
12395    b = x;
12396  } else if (hsl.h < 240) {
12397    r = 0;
12398    g = x;
12399    b = c;
12400  } else if (hsl.h < 300) {
12401    r = x;
12402    g = 0;
12403    b = c;
12404  } else if (hsl.h < 360) {
12405    r = c;
12406    g = 0;
12407    b = x;
12408  }
12409
12410  return new _colorRgba.ColorRGBA64(r + m, g + m, b + m, alpha);
12411}
12412/**
12413 * Converts a {@link @microsoft/fast-colors#ColorRGBA64} to a {@link @microsoft/fast-colors#ColorHSV}
12414 * @param rgb - the rgb color to convert
12415 *
12416 * @remarks
12417 * The alpha channel of the input is ignored
12418 *
12419 * @public
12420 */
12421
12422
12423function rgbToHSV(rgb) {
12424  const max = Math.max(rgb.r, rgb.g, rgb.b);
12425  const min = Math.min(rgb.r, rgb.g, rgb.b);
12426  const delta = max - min;
12427  let hue = 0;
12428
12429  if (delta !== 0) {
12430    if (max === rgb.r) {
12431      hue = 60 * ((rgb.g - rgb.b) / delta % 6);
12432    } else if (max === rgb.g) {
12433      hue = 60 * ((rgb.b - rgb.r) / delta + 2);
12434    } else {
12435      hue = 60 * ((rgb.r - rgb.g) / delta + 4);
12436    }
12437  }
12438
12439  if (hue < 0) {
12440    hue += 360;
12441  }
12442
12443  let sat = 0;
12444
12445  if (max !== 0) {
12446    sat = delta / max;
12447  }
12448
12449  return new _colorHsv.ColorHSV(hue, sat, max);
12450}
12451/**
12452 * Converts a {@link @microsoft/fast-colors#ColorHSV} to a {@link @microsoft/fast-colors#ColorRGBA64}
12453 * @param hsv - the hsv color to convert
12454 * @param alpha - the alpha value
12455 *
12456 * @public
12457 */
12458
12459
12460function hsvToRGB(hsv, alpha = 1) {
12461  const c = hsv.s * hsv.v;
12462  const x = c * (1 - Math.abs(hsv.h / 60 % 2 - 1));
12463  const m = hsv.v - c;
12464  let r = 0;
12465  let g = 0;
12466  let b = 0;
12467
12468  if (hsv.h < 60) {
12469    r = c;
12470    g = x;
12471    b = 0;
12472  } else if (hsv.h < 120) {
12473    r = x;
12474    g = c;
12475    b = 0;
12476  } else if (hsv.h < 180) {
12477    r = 0;
12478    g = c;
12479    b = x;
12480  } else if (hsv.h < 240) {
12481    r = 0;
12482    g = x;
12483    b = c;
12484  } else if (hsv.h < 300) {
12485    r = x;
12486    g = 0;
12487    b = c;
12488  } else if (hsv.h < 360) {
12489    r = c;
12490    g = 0;
12491    b = x;
12492  }
12493
12494  return new _colorRgba.ColorRGBA64(r + m, g + m, b + m, alpha);
12495}
12496/**
12497 * Converts a {@link @microsoft/fast-colors#ColorLCH} to a {@link @microsoft/fast-colors#ColorLAB}
12498 * @param lch - the lch color to convert
12499 *
12500 * @public
12501 */
12502
12503
12504function lchToLAB(lch) {
12505  let a = 0;
12506  let b = 0;
12507
12508  if (lch.h !== 0) {
12509    a = Math.cos((0, _mathUtilities.degreesToRadians)(lch.h)) * lch.c;
12510    b = Math.sin((0, _mathUtilities.degreesToRadians)(lch.h)) * lch.c;
12511  }
12512
12513  return new _colorLab.ColorLAB(lch.l, a, b);
12514}
12515/**
12516 * Converts a {@link @microsoft/fast-colors#ColorLAB} to a {@link @microsoft/fast-colors#ColorLCH}
12517 * @param lab - the lab color to convert
12518 *
12519 * @remarks
12520 * The discontinuity in the C parameter at 0 means that floating point errors will often result in values near 0 giving unpredictable results.
12521 * EG: 0.0000001 gives a very different result than -0.0000001
12522 * In cases where both a and b are very near zero this function will return an LCH color with an H of 0
12523 * More info about the atan2 function: {@link https://en.wikipedia.org/wiki/Atan2}
12524 * @public
12525 */
12526
12527
12528function labToLCH(lab) {
12529  let h = 0; // Because of the discontinuity at 0 if a number is very close to 0 - often due to floating point errors - then
12530  // it gives unexpected results. EG: 0.000000000001 gives a different result than 0. So just avoid any number
12531  // that has both a and b very close to zero and lump it in with the h = 0 case.
12532
12533  if (Math.abs(lab.b) > 0.001 || Math.abs(lab.a) > 0.001) {
12534    h = (0, _mathUtilities.radiansToDegrees)(Math.atan2(lab.b, lab.a));
12535  }
12536
12537  if (h < 0) {
12538    h += 360;
12539  }
12540
12541  const c = Math.sqrt(lab.a * lab.a + lab.b * lab.b);
12542  return new _colorLch.ColorLCH(lab.l, c, h);
12543}
12544/**
12545 * Converts a {@link @microsoft/fast-colors#ColorLAB} to a {@link @microsoft/fast-colors#ColorXYZ}
12546 * @param lab - the lab color to convert
12547 *
12548 * @public
12549 */
12550
12551
12552function labToXYZ(lab) {
12553  const fy = (lab.l + 16) / 116;
12554  const fx = fy + lab.a / 500;
12555  const fz = fy - lab.b / 200;
12556  const xcubed = Math.pow(fx, 3);
12557  const ycubed = Math.pow(fy, 3);
12558  const zcubed = Math.pow(fz, 3);
12559  let x = 0;
12560
12561  if (xcubed > _colorLab.ColorLAB.epsilon) {
12562    x = xcubed;
12563  } else {
12564    x = (116 * fx - 16) / _colorLab.ColorLAB.kappa;
12565  }
12566
12567  let y = 0;
12568
12569  if (lab.l > _colorLab.ColorLAB.epsilon * _colorLab.ColorLAB.kappa) {
12570    y = ycubed;
12571  } else {
12572    y = lab.l / _colorLab.ColorLAB.kappa;
12573  }
12574
12575  let z = 0;
12576
12577  if (zcubed > _colorLab.ColorLAB.epsilon) {
12578    z = zcubed;
12579  } else {
12580    z = (116 * fz - 16) / _colorLab.ColorLAB.kappa;
12581  }
12582
12583  x = _colorXyz.ColorXYZ.whitePoint.x * x;
12584  y = _colorXyz.ColorXYZ.whitePoint.y * y;
12585  z = _colorXyz.ColorXYZ.whitePoint.z * z;
12586  return new _colorXyz.ColorXYZ(x, y, z);
12587}
12588/**
12589 * Converts a {@link @microsoft/fast-colors#ColorXYZ} to a {@link @microsoft/fast-colors#ColorLAB}
12590 * @param xyz - the xyz color to convert
12591 *
12592 * @public
12593 */
12594
12595
12596function xyzToLAB(xyz) {
12597  function xyzToLABHelper(i) {
12598    if (i > _colorLab.ColorLAB.epsilon) {
12599      return Math.pow(i, 1 / 3);
12600    }
12601
12602    return (_colorLab.ColorLAB.kappa * i + 16) / 116;
12603  }
12604
12605  const x = xyzToLABHelper(xyz.x / _colorXyz.ColorXYZ.whitePoint.x);
12606  const y = xyzToLABHelper(xyz.y / _colorXyz.ColorXYZ.whitePoint.y);
12607  const z = xyzToLABHelper(xyz.z / _colorXyz.ColorXYZ.whitePoint.z);
12608  const l = 116 * y - 16;
12609  const a = 500 * (x - y);
12610  const b = 200 * (y - z);
12611  return new _colorLab.ColorLAB(l, a, b);
12612}
12613/**
12614 * Converts a {@link @microsoft/fast-colors#ColorRGBA64} to a {@link @microsoft/fast-colors#ColorXYZ}
12615 * @param rgb - the rgb color to convert
12616 *
12617 * @remarks
12618 * The alpha channel of the input is ignored
12619 * @public
12620 */
12621
12622
12623function rgbToXYZ(rgb) {
12624  function rgbToXYZHelper(i) {
12625    if (i <= 0.04045) {
12626      return i / 12.92;
12627    }
12628
12629    return Math.pow((i + 0.055) / 1.055, 2.4);
12630  }
12631
12632  const r = rgbToXYZHelper(rgb.r);
12633  const g = rgbToXYZHelper(rgb.g);
12634  const b = rgbToXYZHelper(rgb.b);
12635  const x = r * 0.4124564 + g * 0.3575761 + b * 0.1804375;
12636  const y = r * 0.2126729 + g * 0.7151522 + b * 0.072175;
12637  const z = r * 0.0193339 + g * 0.119192 + b * 0.9503041;
12638  return new _colorXyz.ColorXYZ(x, y, z);
12639}
12640/**
12641 * Converts a {@link @microsoft/fast-colors#ColorXYZ} to a {@link @microsoft/fast-colors#ColorRGBA64}
12642 * @param xyz - the xyz color to convert
12643 * @param alpha - the alpha value
12644 *
12645 * @remarks
12646 * Note that the xyz color space is significantly larger than sRGB. As such, this can return colors rgb values greater than 1 or less than 0
12647 * @public
12648 */
12649
12650
12651function xyzToRGB(xyz, alpha = 1) {
12652  function xyzToRGBHelper(i) {
12653    if (i <= 0.0031308) {
12654      return i * 12.92;
12655    }
12656
12657    return 1.055 * Math.pow(i, 1 / 2.4) - 0.055;
12658  }
12659
12660  const r = xyzToRGBHelper(xyz.x * 3.2404542 - xyz.y * 1.5371385 - xyz.z * 0.4985314);
12661  const g = xyzToRGBHelper(xyz.x * -0.969266 + xyz.y * 1.8760108 + xyz.z * 0.041556);
12662  const b = xyzToRGBHelper(xyz.x * 0.0556434 - xyz.y * 0.2040259 + xyz.z * 1.0572252);
12663  return new _colorRgba.ColorRGBA64(r, g, b, alpha);
12664}
12665/**
12666 * Converts a {@link @microsoft/fast-colors#ColorRGBA64} to a {@link @microsoft/fast-colors#ColorLAB}
12667 * @param rgb - the rgb color to convert
12668 *
12669 * @remarks
12670 * The alpha channel of the input is ignored
12671 *
12672 * @public
12673 */
12674
12675
12676function rgbToLAB(rgb) {
12677  return xyzToLAB(rgbToXYZ(rgb));
12678}
12679/**
12680 * Converts a {@link @microsoft/fast-colors#ColorLAB} to a {@link @microsoft/fast-colors#ColorRGBA64}
12681 * @param lab - the LAB color to convert
12682 * @param alpha - the alpha value
12683 *
12684 * @remarks
12685 * Note that the xyz color space (which the conversion from LAB uses) is significantly larger than sRGB. As such, this can return colors rgb values greater than 1 or less than 0
12686 *
12687 * @public
12688 */
12689
12690
12691function labToRGB(lab, alpha = 1) {
12692  return xyzToRGB(labToXYZ(lab), alpha);
12693}
12694/**
12695 * Convert a {@link @microsoft/fast-colors#ColorRGBA64} to a {@link @microsoft/fast-colors#ColorLCH}
12696 *
12697 * @param rgb - the rgb color to convert
12698 *
12699 * @remarks
12700 * The alpha channel of the input is ignored
12701 *
12702 * @public
12703 */
12704
12705
12706function rgbToLCH(rgb) {
12707  return labToLCH(rgbToLAB(rgb));
12708}
12709/**
12710 * Convert a {@link @microsoft/fast-colors#ColorLCH} to a {@link @microsoft/fast-colors#ColorRGBA64}
12711 * @param lch - the LCH color to convert
12712 * @param alpha - the alpha value
12713 *
12714 * @public
12715 */
12716
12717
12718function lchToRGB(lch, alpha = 1) {

12719  return labToRGB(lchToLAB(lch), alpha);
12720}
12721/**
12722 * Converts a color temperature to a {@link @microsoft/fast-colors#ColorRGBA64}
12723 * @param tempKelvin - the temperature to convert
12724 * @param alpha - the alpha value
12725 *
12726 * @public
12727 */
12728
12729
12730function temperatureToRGB(tempKelvin, alpha = 1) {
12731  // The constants I could find assumed a decimal range of [0,255] for each channel. Just going to put a /255.0 at the end
12732  let r = 0;
12733  let g = 0;
12734  let b = 0;
12735
12736  if (tempKelvin <= 1000) {
12737    tempKelvin = 1000;
12738  } else if (tempKelvin >= 40000) {
12739    tempKelvin = 40000;
12740  }
12741
12742  if (tempKelvin < 6600.0) {
12743    r = 255.0;
12744    g = tempKelvin / 100.0 - 2.0;
12745    g = -155.25485562709179 - 0.44596950469579133 * g + 104.49216199393888 * Math.log(g);
12746  } else {
12747    r = tempKelvin / 100.0 - 55.0;
12748    r = 351.97690566805693 + 0.114206453784165 * r - 40.25366309332127 * Math.log(r);
12749    g = tempKelvin / 100.0 - 50.0;
12750    g = 325.4494125711974 + 0.07943456536662342 * g - 28.0852963507957 * Math.log(g);
12751  }
12752
12753  if (tempKelvin >= 6600.0) {
12754    b = 255.0;
12755  } else if (tempKelvin < 2000.0) {
12756    b = 0.0;
12757  } else {
12758    b = tempKelvin / 100.0 - 10;
12759    b = -254.76935184120902 + 0.8274096064007395 * b + 115.67994401066147 * Math.log(b);
12760  }
12761
12762  return new _colorRgba.ColorRGBA64(r / 255, g / 255, b / 255, alpha);
12763}
12764/**
12765 * Convert a rgb color to a color temperature
12766 * @param rgb - the color to convert
12767 *
12768 * @remarks
12769 * The alpha channel of the input is ignored
12770 *
12771 * @public
12772 */
12773
12774
12775function rgbToTemperature(rgb) {
12776  let t = 0;
12777  let min = 1000;
12778  let max = 40000;
12779
12780  while (max - min > 0.4) {
12781    t = (max + min) / 2.0;
12782    const testColor = temperatureToRGB(t);
12783
12784    if (testColor.b / testColor.r >= rgb.b / rgb.r) {
12785      max = t;
12786    } else {
12787      min = t;
12788    }
12789  }
12790
12791  return Math.round(t);
12792}
12793
12794},{"./color-hsl.js":127,"./color-hsv.js":128,"./color-lab.js":130,"./color-lch.js":131,"./color-rgba-64.js":134,"./color-xyz.js":136,"./math-utilities.js":140}],127:[function(require,module,exports){
12795"use strict";
12796
12797Object.defineProperty(exports, "__esModule", {
12798  value: true
12799});
12800exports.ColorHSL = void 0;
12801
12802var _mathUtilities = require("./math-utilities.js");
12803
12804/**
12805 * This uses Hue values in "degree" format. So expect a range of [0,360]. Some other implementations instead uses radians or a normalized Hue with range [0,1]. Be aware of this when checking values or using other libraries.
12806 *
12807 * @public
12808 */
12809class ColorHSL {
12810  constructor(hue, sat, lum) {
12811    this.h = hue;
12812    this.s = sat;
12813    this.l = lum;
12814  }
12815  /**
12816   * Construct a {@link ColorHSL} from a config object.
12817   */
12818
12819
12820  static fromObject(data) {
12821    if (data && !isNaN(data.h) && !isNaN(data.s) && !isNaN(data.l)) {
12822      return new ColorHSL(data.h, data.s, data.l);
12823    }
12824
12825    return null;
12826  }
12827  /**
12828   * Determines if a color is equal to another
12829   * @param rhs - the value to compare
12830   */
12831
12832
12833  equalValue(rhs) {
12834    return this.h === rhs.h && this.s === rhs.s && this.l === rhs.l;
12835  }
12836  /**
12837   * Returns a new {@link ColorHSL} rounded to the provided precision
12838   * @param precision - the precision to round to
12839   */
12840
12841
12842  roundToPrecision(precision) {
12843    return new ColorHSL((0, _mathUtilities.roundToPrecisionSmall)(this.h, precision), (0, _mathUtilities.roundToPrecisionSmall)(this.s, precision), (0, _mathUtilities.roundToPrecisionSmall)(this.l, precision));
12844  }
12845  /**
12846   * Returns the {@link ColorHSL} formatted as an object.
12847   */
12848
12849
12850  toObject() {
12851    return {
12852      h: this.h,
12853      s: this.s,
12854      l: this.l
12855    };
12856  }
12857
12858}
12859
12860exports.ColorHSL = ColorHSL;
12861
12862},{"./math-utilities.js":140}],128:[function(require,module,exports){
12863"use strict";
12864
12865Object.defineProperty(exports, "__esModule", {
12866  value: true
12867});
12868exports.ColorHSV = void 0;
12869
12870var _mathUtilities = require("./math-utilities.js");
12871
12872/**
12873 * This uses Hue values in "degree" format. So expect a range of [0,360]. Some other implementations instead uses radians or a normalized Hue with range [0,1]. Be aware of this when checking values or using other libraries.
12874 *
12875 * @public
12876 */
12877class ColorHSV {
12878  constructor(hue, sat, val) {
12879    this.h = hue;
12880    this.s = sat;
12881    this.v = val;
12882  }
12883  /**
12884   * Construct a {@link ColorHSV} from a config object.
12885   */
12886
12887
12888  static fromObject(data) {
12889    if (data && !isNaN(data.h) && !isNaN(data.s) && !isNaN(data.v)) {
12890      return new ColorHSV(data.h, data.s, data.v);
12891    }
12892
12893    return null;
12894  }
12895  /**
12896   * Determines if a color is equal to another
12897   * @param rhs - the value to compare
12898   */
12899
12900
12901  equalValue(rhs) {
12902    return this.h === rhs.h && this.s === rhs.s && this.v === rhs.v;
12903  }
12904  /**
12905   * Returns a new {@link ColorHSV} rounded to the provided precision
12906   * @param precision - the precision to round to
12907   */
12908
12909
12910  roundToPrecision(precision) {
12911    return new ColorHSV((0, _mathUtilities.roundToPrecisionSmall)(this.h, precision), (0, _mathUtilities.roundToPrecisionSmall)(this.s, precision), (0, _mathUtilities.roundToPrecisionSmall)(this.v, precision));
12912  }
12913  /**
12914   * Returns the {@link ColorHSV} formatted as an object.
12915   */
12916
12917
12918  toObject() {
12919    return {
12920      h: this.h,
12921      s: this.s,
12922      v: this.v
12923    };
12924  }
12925
12926}
12927
12928exports.ColorHSV = ColorHSV;
12929
12930},{"./math-utilities.js":140}],129:[function(require,module,exports){
12931"use strict";
12932
12933Object.defineProperty(exports, "__esModule", {
12934  value: true
12935});
12936exports.ColorInterpolationSpace = void 0;
12937exports.interpolateByColorSpace = interpolateByColorSpace;
12938exports.interpolateHSL = interpolateHSL;
12939exports.interpolateHSV = interpolateHSV;
12940exports.interpolateLAB = interpolateLAB;
12941exports.interpolateLCH = interpolateLCH;
12942exports.interpolateRGB = interpolateRGB;
12943exports.interpolateXYZ = interpolateXYZ;
12944
12945var _colorConverters = require("./color-converters.js");
12946
12947var _colorHsl = require("./color-hsl.js");
12948
12949var _colorHsv = require("./color-hsv.js");
12950
12951var _colorLab = require("./color-lab.js");
12952
12953var _colorLch = require("./color-lch.js");
12954
12955var _colorRgba = require("./color-rgba-64.js");
12956
12957var _colorXyz = require("./color-xyz.js");
12958
12959var _mathUtilities = require("./math-utilities.js");
12960
12961/**
12962 * Interpolate by RGB color space
12963 *
12964 * @public
12965 */
12966function interpolateRGB(position, left, right) {
12967  if (isNaN(position) || position <= 0) {
12968    return left;
12969  } else if (position >= 1) {
12970    return right;
12971  }
12972
12973  return new _colorRgba.ColorRGBA64((0, _mathUtilities.lerp)(position, left.r, right.r), (0, _mathUtilities.lerp)(position, left.g, right.g), (0, _mathUtilities.lerp)(position, left.b, right.b), (0, _mathUtilities.lerp)(position, left.a, right.a));
12974}
12975/**
12976 * Interpolate by HSL color space
12977 *
12978 * @public
12979 */
12980
12981
12982function interpolateHSL(position, left, right) {
12983  if (isNaN(position) || position <= 0) {
12984    return left;
12985  } else if (position >= 1) {
12986    return right;
12987  }
12988
12989  return new _colorHsl.ColorHSL((0, _mathUtilities.lerpAnglesInDegrees)(position, left.h, right.h), (0, _mathUtilities.lerp)(position, left.s, right.s), (0, _mathUtilities.lerp)(position, left.l, right.l));
12990}
12991/**
12992 * Interpolate by HSV color space
12993 *
12994 * @public
12995 */
12996
12997
12998function interpolateHSV(position, left, right) {
12999  if (isNaN(position) || position <= 0) {
13000    return left;
13001  } else if (position >= 1) {
13002    return right;
13003  }
13004
13005  return new _colorHsv.ColorHSV((0, _mathUtilities.lerpAnglesInDegrees)(position, left.h, right.h), (0, _mathUtilities.lerp)(position, left.s, right.s), (0, _mathUtilities.lerp)(position, left.v, right.v));
13006}
13007/**
13008 * Interpolate by XYZ color space
13009 *
13010 * @public
13011 */
13012
13013
13014function interpolateXYZ(position, left, right) {
13015  if (isNaN(position) || position <= 0) {
13016    return left;
13017  } else if (position >= 1) {
13018    return right;
13019  }
13020
13021  return new _colorXyz.ColorXYZ((0, _mathUtilities.lerp)(position, left.x, right.x), (0, _mathUtilities.lerp)(position, left.y, right.y), (0, _mathUtilities.lerp)(position, left.z, right.z));
13022}
13023/**
13024 * Interpolate by LAB color space
13025 *
13026 * @public
13027 */
13028
13029

13030function interpolateLAB(position, left, right) {
13031  if (isNaN(position) || position <= 0) {
13032    return left;
13033  } else if (position >= 1) {
13034    return right;
13035  }
13036
13037  return new _colorLab.ColorLAB((0, _mathUtilities.lerp)(position, left.l, right.l), (0, _mathUtilities.lerp)(position, left.a, right.a), (0, _mathUtilities.lerp)(position, left.b, right.b));
13038}
13039/**
13040 * Interpolate by LCH color space
13041 *
13042 * @public
13043 */
13044
13045
13046function interpolateLCH(position, left, right) {
13047  if (isNaN(position) || position <= 0) {
13048    return left;
13049  } else if (position >= 1) {
13050    return right;
13051  }
13052
13053  return new _colorLch.ColorLCH((0, _mathUtilities.lerp)(position, left.l, right.l), (0, _mathUtilities.lerp)(position, left.c, right.c), (0, _mathUtilities.lerpAnglesInDegrees)(position, left.h, right.h));
13054}
13055/**
13056 * Color interpolation spaces
13057 *
13058 * @public
13059 */
13060
13061
13062var ColorInterpolationSpace;
13063exports.ColorInterpolationSpace = ColorInterpolationSpace;
13064
13065(function (ColorInterpolationSpace) {
13066  ColorInterpolationSpace[ColorInterpolationSpace["RGB"] = 0] = "RGB";
13067  ColorInterpolationSpace[ColorInterpolationSpace["HSL"] = 1] = "HSL";
13068  ColorInterpolationSpace[ColorInterpolationSpace["HSV"] = 2] = "HSV";
13069  ColorInterpolationSpace[ColorInterpolationSpace["XYZ"] = 3] = "XYZ";
13070  ColorInterpolationSpace[ColorInterpolationSpace["LAB"] = 4] = "LAB";
13071  ColorInterpolationSpace[ColorInterpolationSpace["LCH"] = 5] = "LCH";
13072})(ColorInterpolationSpace || (exports.ColorInterpolationSpace = ColorInterpolationSpace = {}));
13073/**
13074 * Interpolate by color space
13075 *
13076 * @public
13077 */
13078
13079
13080function interpolateByColorSpace(position, space, left, right) {
13081  if (isNaN(position) || position <= 0) {
13082    return left;
13083  } else if (position >= 1) {
13084    return right;
13085  }
13086
13087  switch (space) {
13088    case ColorInterpolationSpace.HSL:
13089      return (0, _colorConverters.hslToRGB)(interpolateHSL(position, (0, _colorConverters.rgbToHSL)(left), (0, _colorConverters.rgbToHSL)(right)));
13090
13091    case ColorInterpolationSpace.HSV:
13092      return (0, _colorConverters.hsvToRGB)(interpolateHSV(position, (0, _colorConverters.rgbToHSV)(left), (0, _colorConverters.rgbToHSV)(right)));
13093
13094    case ColorInterpolationSpace.XYZ:
13095      return (0, _colorConverters.xyzToRGB)(interpolateXYZ(position, (0, _colorConverters.rgbToXYZ)(left), (0, _colorConverters.rgbToXYZ)(right)));
13096
13097    case ColorInterpolationSpace.LAB:
13098      return (0, _colorConverters.labToRGB)(interpolateLAB(position, (0, _colorConverters.rgbToLAB)(left), (0, _colorConverters.rgbToLAB)(right)));
13099
13100    case ColorInterpolationSpace.LCH:
13101      return (0, _colorConverters.lchToRGB)(interpolateLCH(position, (0, _colorConverters.rgbToLCH)(left), (0, _colorConverters.rgbToLCH)(right)));
13102
13103    default:
13104      return interpolateRGB(position, left, right);
13105  }
13106}
13107
13108},{"./color-converters.js":126,"./color-hsl.js":127,"./color-hsv.js":128,"./color-lab.js":130,"./color-lch.js":131,"./color-rgba-64.js":134,"./color-xyz.js":136,"./math-utilities.js":140}],130:[function(require,module,exports){
13109"use strict";
13110
13111Object.defineProperty(exports, "__esModule", {
13112  value: true
13113});
13114exports.ColorLAB = void 0;
13115
13116var _mathUtilities = require("./math-utilities.js");
13117
13118/**
13119 * {@link https://en.wikipedia.org/wiki/CIELAB_color_space | CIELAB color space}
13120 * This implementation uses the D65 constants for 2 degrees. That determines the constants used for the pure white point of the XYZ space of 0.95047, 1.0, 1.08883.
13121 * {@link https://en.wikipedia.org/wiki/Illuminant_D65}
13122 * These constants determine how the XYZ, LCH and LAB colors convert to/from RGB.
13123 *
13124 * @public
13125 */
13126class ColorLAB {
13127  constructor(l, a, b) {
13128    this.l = l;
13129    this.a = a;
13130    this.b = b;
13131  }
13132  /**
13133   * Construct a {@link ColorLAB} from a config object.
13134   */
13135
13136
13137  static fromObject(data) {
13138    if (data && !isNaN(data.l) && !isNaN(data.a) && !isNaN(data.b)) {
13139      return new ColorLAB(data.l, data.a, data.b);
13140    }
13141
13142    return null;
13143  }
13144  /**
13145   * Determines if a color is equal to another
13146   * @param rhs - the value to compare
13147   */
13148
13149
13150  equalValue(rhs) {
13151    return this.l === rhs.l && this.a === rhs.a && this.b === rhs.b;
13152  }
13153  /**
13154   * Returns a new {@link ColorLAB} rounded to the provided precision
13155   * @param precision - the precision to round to
13156   */
13157
13158
13159  roundToPrecision(precision) {
13160    return new ColorLAB((0, _mathUtilities.roundToPrecisionSmall)(this.l, precision), (0, _mathUtilities.roundToPrecisionSmall)(this.a, precision), (0, _mathUtilities.roundToPrecisionSmall)(this.b, precision));
13161  }
13162  /**
13163   * Returns the {@link ColorLAB} formatted as an object.
13164   */
13165
13166
13167  toObject() {
13168    return {
13169      l: this.l,
13170      a: this.a,
13171      b: this.b
13172    };
13173  }
13174
13175}
13176
13177exports.ColorLAB = ColorLAB;
13178ColorLAB.epsilon = 216 / 24389;
13179ColorLAB.kappa = 24389 / 27;
13180
13181},{"./math-utilities.js":140}],131:[function(require,module,exports){
13182"use strict";
13183
13184Object.defineProperty(exports, "__esModule", {
13185  value: true
13186});
13187exports.ColorLCH = void 0;
13188
13189var _mathUtilities = require("./math-utilities.js");
13190
13191/**
13192 *
13193 * {@link https://en.wikipedia.org/wiki/CIELAB_color_space | CIELCH color space}
13194 *
13195 * This is a cylindrical representation of the CIELAB space useful for saturation operations
13196 * This uses Hue values in "degree" format. So expect a range of [0,360]. Some other implementations instead uses radians or a normalized Hue with range [0,1]. Be aware of this when checking values or using other libraries.
13197 * This implementation uses the D65 constants for 2 degrees. That determines the constants used for the pure white point of the XYZ space of 0.95047, 1.0, 1.08883.
13198 * {@link https://en.wikipedia.org/wiki/Illuminant_D65}
13199 * These constants determine how the XYZ, LCH and LAB colors convert to/from RGB.
13200 *
13201 * @public
13202 */
13203class ColorLCH {
13204  constructor(l, c, h) {
13205    this.l = l;
13206    this.c = c;
13207    this.h = h;
13208  }
13209  /**
13210   * Construct a {@link ColorLCH} from a config object.
13211   * @param data - the config object
13212   */
13213
13214
13215  static fromObject(data) {
13216    if (data && !isNaN(data.l) && !isNaN(data.c) && !isNaN(data.h)) {
13217      return new ColorLCH(data.l, data.c, data.h);
13218    }
13219
13220    return null;
13221  }
13222  /**
13223   * Determines if one color is equal to another.
13224   * @param rhs - the color to compare
13225   */
13226
13227
13228  equalValue(rhs) {
13229    return this.l === rhs.l && this.c === rhs.c && this.h === rhs.h;
13230  }
13231  /**
13232   * Returns a new {@link ColorLCH} rounded to the provided precision
13233   * @param precision - the precision to round to
13234   */
13235
13236
13237  roundToPrecision(precision) {
13238    return new ColorLCH((0, _mathUtilities.roundToPrecisionSmall)(this.l, precision), (0, _mathUtilities.roundToPrecisionSmall)(this.c, precision), (0, _mathUtilities.roundToPrecisionSmall)(this.h, precision));
13239  }
13240  /**
13241   * Converts the {@link ColorLCH} to a config object.
13242   */
13243
13244
13245  toObject() {
13246    return {
13247      l: this.l,
13248      c: this.c,
13249      h: this.h
13250    };
13251  }
13252
13253}
13254
13255exports.ColorLCH = ColorLCH;
13256
13257},{"./math-utilities.js":140}],132:[function(require,module,exports){
13258"use strict";
13259
13260Object.defineProperty(exports, "__esModule", {
13261  value: true
13262});
13263exports.ColorPalette = void 0;
13264exports.centeredRescale = centeredRescale;
13265exports.defaultCenteredRescaleConfig = void 0;
13266exports.generateOffCenterPalette = generateOffCenterPalette;
13267exports.generateScaledPalettes = generateScaledPalettes;
13268exports.matchLightnessIndex = matchLightnessIndex;

13269exports.rescale = rescale;
13270
13271var _colorBlending = require("./color-blending.js");
13272
13273var _colorConverters = require("./color-converters.js");
13274
13275var _colorInterpolation = require("./color-interpolation.js");
13276
13277var _colorRgba = require("./color-rgba-64.js");
13278
13279var _colorScale = require("./color-scale.js");
13280
13281var _parseColor = require("./parse-color.js");
13282
13283/**
13284 * Generates a color palette
13285 * @public
13286 */
13287class ColorPalette {
13288  constructor(config) {
13289    this.config = Object.assign({}, ColorPalette.defaultPaletteConfig, config);
13290    this.palette = [];
13291    this.updatePaletteColors();
13292  }
13293
13294  updatePaletteGenerationValues(newConfig) {
13295    let changed = false;
13296
13297    for (const key in newConfig) {
13298      if (this.config[key]) {
13299        if (this.config[key].equalValue) {
13300          if (!this.config[key].equalValue(newConfig[key])) {
13301            this.config[key] = newConfig[key];
13302            changed = true;
13303          }
13304        } else {
13305          if (newConfig[key] !== this.config[key]) {
13306            this.config[key] = newConfig[key];
13307            changed = true;
13308          }
13309        }
13310      }
13311    }
13312
13313    if (changed) {
13314      this.updatePaletteColors();
13315    }
13316
13317    return changed;
13318  }
13319
13320  updatePaletteColors() {
13321    const scale = this.generatePaletteColorScale();
13322
13323    for (let i = 0; i < this.config.steps; i++) {
13324      this.palette[i] = scale.getColor(i / (this.config.steps - 1), this.config.interpolationMode);
13325    }
13326  }
13327
13328  generatePaletteColorScale() {
13329    // Even when config.baseScalePosition is specified, using 0.5 for the baseColor
13330    // in the baseScale gives better results. Otherwise very off-center palettes
13331    // tend to go completely grey at the end furthest from the specified base color.
13332    const baseColorHSL = (0, _colorConverters.rgbToHSL)(this.config.baseColor);
13333    const baseScale = new _colorScale.ColorScale([{
13334      position: 0,
13335      color: this.config.scaleColorLight
13336    }, {
13337      position: 0.5,
13338      color: this.config.baseColor
13339    }, {
13340      position: 1,
13341      color: this.config.scaleColorDark
13342    }]);
13343    const trimmedScale = baseScale.trim(this.config.clipLight, 1 - this.config.clipDark);
13344    const trimmedLight = trimmedScale.getColor(0);
13345    const trimmedDark = trimmedScale.getColor(1);
13346    let adjustedLight = trimmedLight;
13347    let adjustedDark = trimmedDark;
13348
13349    if (baseColorHSL.s >= this.config.saturationAdjustmentCutoff) {
13350      adjustedLight = (0, _colorBlending.saturateViaLCH)(adjustedLight, this.config.saturationLight);
13351      adjustedDark = (0, _colorBlending.saturateViaLCH)(adjustedDark, this.config.saturationDark);
13352    }
13353
13354    if (this.config.multiplyLight !== 0) {
13355      const multiply = (0, _colorBlending.blendMultiply)(this.config.baseColor, adjustedLight);
13356      adjustedLight = (0, _colorInterpolation.interpolateByColorSpace)(this.config.multiplyLight, this.config.interpolationMode, adjustedLight, multiply);
13357    }
13358
13359    if (this.config.multiplyDark !== 0) {
13360      const multiply = (0, _colorBlending.blendMultiply)(this.config.baseColor, adjustedDark);
13361      adjustedDark = (0, _colorInterpolation.interpolateByColorSpace)(this.config.multiplyDark, this.config.interpolationMode, adjustedDark, multiply);
13362    }
13363
13364    if (this.config.overlayLight !== 0) {
13365      const overlay = (0, _colorBlending.blendOverlay)(this.config.baseColor, adjustedLight);
13366      adjustedLight = (0, _colorInterpolation.interpolateByColorSpace)(this.config.overlayLight, this.config.interpolationMode, adjustedLight, overlay);
13367    }
13368
13369    if (this.config.overlayDark !== 0) {
13370      const overlay = (0, _colorBlending.blendOverlay)(this.config.baseColor, adjustedDark);
13371      adjustedDark = (0, _colorInterpolation.interpolateByColorSpace)(this.config.overlayDark, this.config.interpolationMode, adjustedDark, overlay);
13372    }
13373
13374    if (this.config.baseScalePosition) {
13375      if (this.config.baseScalePosition <= 0) {
13376        return new _colorScale.ColorScale([{
13377          position: 0,
13378          color: this.config.baseColor
13379        }, {
13380          position: 1,
13381          color: adjustedDark.clamp()
13382        }]);
13383      } else if (this.config.baseScalePosition >= 1) {
13384        return new _colorScale.ColorScale([{
13385          position: 0,
13386          color: adjustedLight.clamp()
13387        }, {
13388          position: 1,
13389          color: this.config.baseColor
13390        }]);
13391      }
13392
13393      return new _colorScale.ColorScale([{
13394        position: 0,
13395        color: adjustedLight.clamp()
13396      }, {
13397        position: this.config.baseScalePosition,
13398        color: this.config.baseColor
13399      }, {
13400        position: 1,
13401        color: adjustedDark.clamp()
13402      }]);
13403    }
13404
13405    return new _colorScale.ColorScale([{
13406      position: 0,
13407      color: adjustedLight.clamp()
13408    }, {

13409      position: 0.5,
13410      color: this.config.baseColor
13411    }, {
13412      position: 1,
13413      color: adjustedDark.clamp()
13414    }]);
13415  }
13416
13417}
13418
13419exports.ColorPalette = ColorPalette;
13420ColorPalette.defaultPaletteConfig = {
13421  baseColor: (0, _parseColor.parseColorHexRGB)("#808080"),
13422  steps: 11,
13423  interpolationMode: _colorInterpolation.ColorInterpolationSpace.RGB,
13424  scaleColorLight: new _colorRgba.ColorRGBA64(1, 1, 1, 1),
13425  scaleColorDark: new _colorRgba.ColorRGBA64(0, 0, 0, 1),
13426  clipLight: 0.185,
13427  clipDark: 0.16,
13428  saturationAdjustmentCutoff: 0.05,
13429  saturationLight: 0.35,
13430  saturationDark: 1.25,
13431  overlayLight: 0,
13432  overlayDark: 0.25,
13433  multiplyLight: 0,
13434  multiplyDark: 0,
13435  baseScalePosition: 0.5
13436};
13437ColorPalette.greyscalePaletteConfig = {
13438  baseColor: (0, _parseColor.parseColorHexRGB)("#808080"),
13439  steps: 11,
13440  interpolationMode: _colorInterpolation.ColorInterpolationSpace.RGB,
13441  scaleColorLight: new _colorRgba.ColorRGBA64(1, 1, 1, 1),
13442  scaleColorDark: new _colorRgba.ColorRGBA64(0, 0, 0, 1),
13443  clipLight: 0,
13444  clipDark: 0,
13445  saturationAdjustmentCutoff: 0,
13446  saturationLight: 0,
13447  saturationDark: 0,
13448  overlayLight: 0,
13449  overlayDark: 0,
13450  multiplyLight: 0,
13451  multiplyDark: 0,
13452  baseScalePosition: 0.5
13453};
13454/**
13455 * Takes the input color and compares it to each color in the reference array to find the index with the closest Lightness value in HSL color space
13456 * @public
13457 */
13458
13459function matchLightnessIndex(input, reference) {
13460  const hsl = (0, _colorConverters.rgbToHSL)(input);
13461  let bestFitValue = Number.MAX_VALUE;
13462  let bestFitIndex = 0;
13463
13464  for (let i = 0; i < reference.length; i++) {
13465    const ihsl = (0, _colorConverters.rgbToHSL)(reference[i]);
13466    const fitValue = Math.abs(ihsl.l - hsl.l);
13467
13468    if (fitValue < bestFitValue) {
13469      bestFitValue = fitValue;
13470      bestFitIndex = i;
13471    }
13472  }
13473
13474  return bestFitIndex;
13475}
13476/**
13477 * Generates a greyscale palette using greyscaleConfig. The Lightness (in HSL) of the input color is then compared to the greyscale palette to determine how far off center the input color should be placed. The output palette is then generated with outputSteps number of steps using colorConfig.
13478 * @public
13479 */
13480
13481
13482function generateOffCenterPalette(input, outputSteps, greyscaleConfig = ColorPalette.greyscalePaletteConfig, colorConfig = ColorPalette.defaultPaletteConfig) {
13483  const greyscale = new ColorPalette(Object.assign(Object.assign({}, greyscaleConfig), {
13484    steps: outputSteps
13485  }));
13486  const scaleIndex = matchLightnessIndex(input, greyscale.palette);
13487  return new ColorPalette(Object.assign(Object.assign({}, colorConfig), {
13488    steps: outputSteps,
13489    baseColor: input,
13490    baseScalePosition: scaleIndex / (outputSteps - 1)
13491  }));
13492}
13493/**
13494 * Take the input array of colors and extrapolates them to a larger palette of size targetSize. If preserveInputColors is false the input colors are evenly distributed into the output. Otherwise, the positions of the input colors are adjusted from a perfectly even distribution in order to ensure that the exact color values appearing in the input array also appear in the output array. The larger targetSize is compared to input.length the smaller those adjustments will be.
13495 *
13496 * @public
13497 */
13498
13499
13500function rescale(input, targetSize, preserveInputColors) {
13501  if (input.length <= 1 || targetSize <= 1) {
13502    throw new Error("The input array and targetSize must both be greater than 1");
13503  }
13504
13505  if (preserveInputColors && targetSize <= input.length) {
13506    throw new Error("If preserveInputColors is true then targetSize must be greater than the length of the input array");
13507  }
13508
13509  const stops = new Array(input.length);
13510
13511  if (preserveInputColors) {
13512    for (let i = 0; i < input.length; i++) {
13513      const p = i / (input.length - 1);
13514      let bestFitValue = 2;
13515      let bestFitIndex = 0;
13516
13517      for (let j = 0; j < targetSize; j++) {
13518        const fitValue = Math.abs(j / (targetSize - 1) - p);
13519
13520        if (fitValue < bestFitValue) {
13521          bestFitValue = fitValue;
13522          bestFitIndex = j;
13523        }
13524
13525        if (fitValue === 0) {
13526          break;
13527        }
13528      }
13529
13530      stops[i] = {
13531        color: input[i],
13532        position: bestFitIndex / (targetSize - 1)
13533      };
13534    }
13535  } else {
13536    for (let i = 0; i < stops.length; i++) {
13537      stops[i] = {

13538        color: input[i],
13539        position: i / (input.length - 1)
13540      };
13541    }
13542  }
13543
13544  const scale = new _colorScale.ColorScale(stops);
13545  const retVal = new Array(targetSize);
13546
13547  for (let i = 0; i < targetSize; i++) {
13548    retVal[i] = scale.getColor(i / (targetSize - 1));
13549  }
13550
13551  return retVal;
13552}
13553/**
13554 * @public
13555 */
13556
13557
13558const defaultCenteredRescaleConfig = {
13559  targetSize: 63,
13560  spacing: 4,
13561  scaleColorLight: ColorPalette.defaultPaletteConfig.scaleColorLight,
13562  scaleColorDark: ColorPalette.defaultPaletteConfig.scaleColorDark
13563};
13564/**
13565 * Takes an input array of colors and extrapolates them to a larger palette. The mapping first takes the input array and extrapolates between each color so that they are separated by spacing-1 slots. Then it adds to either end enough new colors to make up the desired targetSize. All output color slots between the defined stops are interpolated.
13566 * @example
13567 * For an input array with length 5, a targetSize of 17 and spacing of 3 the output would be:
13568 *  0: scaleColorLight
13569 *  1:
13570 *  2: input 0
13571 *  3:
13572 *  4:
13573 *  5: input 1
13574 *  6:
13575 *  7:
13576 *  8: input 2
13577 *  9:
13578 * 10:
13579 * 11: input 3
13580 * 12:
13581 * 13:
13582 * 14: input 4
13583 * 15:
13584 * 16: scaleColorDark
13585 *
13586 * @public
13587 */
13588
13589exports.defaultCenteredRescaleConfig = defaultCenteredRescaleConfig;
13590
13591function centeredRescale(input, config = defaultCenteredRescaleConfig) {
13592  if (input.length === 0) {
13593    return [];
13594  }
13595
13596  const offset = Math.floor((config.targetSize - ((input.length - 1) * config.spacing + 1)) / 2);
13597
13598  if (offset < 0) {
13599    throw new Error("(targetSize - ((input.length - 1) * spacing + 1)) / 2 must be >= 0");
13600  }
13601
13602  const stops = new Array(input.length + 2);
13603  stops[0] = {
13604    position: 0,
13605    color: config.scaleColorLight
13606  };
13607  stops[stops.length - 1] = {
13608    position: 1,
13609    color: config.scaleColorDark
13610  };
13611
13612  for (let i = 0; i < input.length; i++) {
13613    stops[i + 1] = {
13614      color: input[i],
13615      position: (i * config.spacing + offset) / (config.targetSize - 1)
13616    };
13617  }
13618
13619  const scale = new _colorScale.ColorScale(stops);
13620  const retVal = new Array(config.targetSize);
13621
13622  for (let i = 0; i < config.targetSize; i++) {
13623    retVal[i] = scale.getColor(i / (config.targetSize - 1));
13624  }
13625
13626  return retVal;
13627}
13628/**
13629 * Generates two palettes of length shortPaletteLength and longPaletteLength from a base color. The base color is compared to the default greyscale palette to determine where it should be placed. The short palette is then fed into centeredRescale to create the long palette. The colors in the short palette are always contained within the long.
13630 * @public
13631 */
13632
13633
13634function generateScaledPalettes(input, shortPaletteLength = 11, config = defaultCenteredRescaleConfig) {
13635  const shortPalette = generateOffCenterPalette(input, shortPaletteLength);
13636  const longPalette = centeredRescale(shortPalette.palette, config);
13637  return {
13638    short: shortPalette.palette,
13639    long: longPalette
13640  };
13641}
13642
13643},{"./color-blending.js":125,"./color-converters.js":126,"./color-interpolation.js":129,"./color-rgba-64.js":134,"./color-scale.js":135,"./parse-color.js":143}],133:[function(require,module,exports){
13644"use strict";
13645
13646Object.defineProperty(exports, "__esModule", {
13647  value: true
13648});
13649exports.defaultQuantizeConfig = void 0;
13650exports.quantize = quantize;
13651exports.quantizeHistogram = quantizeHistogram;
13652
13653var _histogram = require("./histogram.js");
13654
13655var _pixelBox = require("./pixel-box.js");
13656
13657function countValidBoxes(queue, isBoxValid) {
13658  if (isBoxValid === null) {
13659    return queue.length;
13660  }
13661
13662  let retVal = 0;
13663
13664  for (let i = 0; i < queue.length; i++) {
13665    if (isBoxValid(queue[i])) {
13666      retVal++;
13667    }
13668  }
13669
13670  return retVal;
13671}
13672/**
13673 * The default quantize configuration.
13674 * @public
13675 */
13676
13677
13678const defaultQuantizeConfig = {
13679  significantBits: 5,
13680  pixelSkipping: 5,
13681  targetPaletteSize: 64,
13682  fractionByPopulation: 0.85,
13683  isBoxValid: box => {
13684    if (box.pixelCount < 5) {
13685      // Screen out outlier results that aren't present in the original image
13686      return false;
13687    }
13688
13689    return true;
13690  },
13691  isHistogramPixelValid: pixel => {
13692    if (pixel[3] < 128) {
13693      // Ignore pixels that are too transparent
13694      return false;

13695    }
13696
13697    return true;
13698  },
13699  maxIterations: 1000
13700};
13701/**
13702 * The data in the color histogram is reduced down to a small set of colors.
13703 * It can be useful to create the Histogram manually in cases where one wants to remove or alter the colors in it
13704 * or to re-use it in order to quantize multiple times with different config settings.
13705 * Based on the Modified Median Cut Quantization implementation from https://github.com/DanBloomberg/leptonica/blob/master/src/colorquant2.c
13706 *
13707 * @public
13708 */
13709
13710exports.defaultQuantizeConfig = defaultQuantizeConfig;
13711
13712function quantizeHistogram(histogram, config = defaultQuantizeConfig) {
13713  const initialBox = new _pixelBox.PixelBox(histogram, histogram.minRed, histogram.maxRed, histogram.minGreen, histogram.maxGreen, histogram.minBlue, histogram.maxBlue);
13714  const queue = [initialBox];
13715  let count = countValidBoxes(queue, config.isBoxValid); // For a final palette of size targetPaletteSize, we determine the first fractionByPopulation*targetPaletteSize
13716  // using population as the only factor when determening sort order. For the rest of the colors the
13717  // sort order is population * colorVolume. This helps highly contrasting colors in a small area to show
13718  // up in some of the final output.
13719
13720  const colorsByPopulation = Math.floor(config.targetPaletteSize * config.fractionByPopulation);
13721
13722  const popSort = box => {
13723    return box.pixelCount;
13724  };
13725
13726  let iterationCount = 0;
13727
13728  while (iterationCount <= config.maxIterations) {
13729    if (queue.length > 0) {
13730      const currentBox = queue.shift();
13731      const cutBoxes = currentBox.modifiedMedianCut();
13732
13733      if (cutBoxes[0] !== null) {
13734        (0, _pixelBox.insertIntoSortedList)(queue, cutBoxes[0], popSort);
13735      }
13736
13737      if (cutBoxes[1] !== null) {
13738        (0, _pixelBox.insertIntoSortedList)(queue, cutBoxes[1], popSort);
13739      }
13740    }
13741
13742    count = countValidBoxes(queue, config.isBoxValid);
13743
13744    if (count >= colorsByPopulation || queue.length <= 1) {
13745      break;
13746    }
13747
13748    iterationCount++;
13749  }
13750
13751  if (count < config.targetPaletteSize) {
13752    const popAndVolumeSort = box => {
13753      return box.pixelCount * box.colorVolume;
13754    };
13755
13756    queue.sort((a, b) => {
13757      const aSort = popAndVolumeSort(a);
13758      const bSort = popAndVolumeSort(b);
13759
13760      if (aSort === bSort) {
13761        return 0;
13762      } else if (aSort > bSort) {
13763        return -1;
13764      }
13765
13766      return 1;
13767    });
13768    iterationCount = 0;
13769
13770    while (iterationCount <= config.maxIterations) {
13771      if (queue.length > 0) {
13772        const currentBox = queue.shift();
13773        const cutBoxes = currentBox.modifiedMedianCut();
13774
13775        if (cutBoxes[0] !== null) {
13776          (0, _pixelBox.insertIntoSortedList)(queue, cutBoxes[0], popAndVolumeSort);
13777        }
13778
13779        if (cutBoxes[1] !== null) {
13780          (0, _pixelBox.insertIntoSortedList)(queue, cutBoxes[1], popAndVolumeSort);
13781        }
13782      }
13783
13784      count = countValidBoxes(queue, config.isBoxValid);
13785
13786      if (count >= config.targetPaletteSize || queue.length <= 1) {
13787        break;
13788      }
13789
13790      iterationCount++;
13791    }
13792  }
13793
13794  const retVal = new Array(count);
13795  let index = 0;
13796
13797  for (let i = 0; i < queue.length; i++) {
13798    if (!config.isBoxValid || config.isBoxValid(queue[i])) {
13799      retVal[index] = {
13800        color: queue[i].averageColor,
13801        pixelCount: queue[i].pixelCount,
13802        colorVolume: queue[i].colorVolume
13803      };
13804      index++;
13805    }
13806  }
13807
13808  return retVal;
13809}
13810/**
13811 * The image stored in the source PixelBlob is reduced down to a small set of colors.
13812 * Based on the Modified Median Cut Quantization implementation from https://github.com/DanBloomberg/leptonica/blob/master/src/colorquant2.c
13813 *
13814 * @public
13815 */
13816
13817
13818function quantize(source, config = defaultQuantizeConfig) {
13819  const histogram = new _histogram.Histogram(source, config.significantBits, config.pixelSkipping, config.isHistogramPixelValid);
13820  return quantizeHistogram(histogram, config);
13821}
13822
13823},{"./histogram.js":138,"./pixel-box.js":145}],134:[function(require,module,exports){
13824"use strict";
13825
13826Object.defineProperty(exports, "__esModule", {
13827  value: true
13828});
13829exports.ColorRGBA64 = void 0;
13830
13831var _mathUtilities = require("./math-utilities.js");
13832
13833/**
13834 * A RGBA color with 64 bit channels.
13835 *
13836 * @example
13837 * ```ts
13838 * new ColorRGBA64(1, 0, 0, 1) // red
13839 * ```
13840 * @public
13841 */
13842class ColorRGBA64 {
13843  /**
13844   *
13845   * @param red - the red value
13846   * @param green - the green value
13847   * @param blue - the blue value
13848   * @param alpha - the alpha value
13849   */
13850  constructor(red, green, blue, alpha) {
13851    this.r = red;
13852    this.g = green;
13853    this.b = blue;
13854    this.a = typeof alpha === "number" && !isNaN(alpha) ? alpha : 1;
13855  }
13856  /**
13857   * Construct a {@link ColorRGBA64} from a {@link ColorRGBA64Config}
13858   * @param data - the config object
13859   */
13860
13861
13862  static fromObject(data) {
13863    return data && !isNaN(data.r) && !isNaN(data.g) && !isNaN(data.b) ? new ColorRGBA64(data.r, data.g, data.b, data.a) : null;
13864  }
13865  /**
13866   * Determines if one color is equal to another.
13867   * @param rhs - the color to compare
13868   */
13869
13870
13871  equalValue(rhs) {
13872    return this.r === rhs.r && this.g === rhs.g && this.b === rhs.b && this.a === rhs.a;
13873  }
13874  /**
13875   * Returns the color formatted as a string; #RRGGBB
13876   */
13877
13878
13879  toStringHexRGB() {
13880    return "#" + [this.r, this.g, this.b].map(this.formatHexValue).join("");
13881  }
13882  /**
13883   * Returns the color formatted as a string; #RRGGBBAA
13884   */
13885
13886
13887  toStringHexRGBA() {
13888    return this.toStringHexRGB() + this.formatHexValue(this.a);
13889  }
13890  /**
13891   * Returns the color formatted as a string; #AARRGGBB
13892   */
13893
13894
13895  toStringHexARGB() {
13896    return "#" + [this.a, this.r, this.g, this.b].map(this.formatHexValue).join("");
13897  }
13898  /**
13899   * Returns the color formatted as a string; "rgb(0xRR, 0xGG, 0xBB)"
13900   */
13901
13902
13903  toStringWebRGB() {
13904    return `rgb(${Math.round((0, _mathUtilities.denormalize)(this.r, 0.0, 255.0))},${Math.round((0, _mathUtilities.denormalize)(this.g, 0.0, 255.0))}

13904,${Math.round((0, _mathUtilities.denormalize)(this.b, 0.0, 255.0))})`;
13905  }
13906  /**
13907   * Returns the color formatted as a string; "rgba(0xRR, 0xGG, 0xBB, a)"
13908   * @remarks
13909   * Note that this follows the convention of putting alpha in the range [0.0,1.0] while the other three channels are [0,255]
13910   */
13911
13912
13913  toStringWebRGBA() {
13914    return `rgba(${Math.round((0, _mathUtilities.denormalize)(this.r, 0.0, 255.0))},${Math.round((0, _mathUtilities.denormalize)(this.g, 0.0, 255.0))},${Math.round((0, _mathUtilities.denormalize)(this.b, 0.0, 255.0))},${(0, _mathUtilities.clamp)(this.a, 0, 1)})`;
13915  }
13916  /**
13917   * Returns a new {@link ColorRGBA64} rounded to the provided precision
13918   * @param precision - the precision to round to
13919   */
13920
13921
13922  roundToPrecision(precision) {
13923    return new ColorRGBA64((0, _mathUtilities.roundToPrecisionSmall)(this.r, precision), (0, _mathUtilities.roundToPrecisionSmall)(this.g, precision), (0, _mathUtilities.roundToPrecisionSmall)(this.b, precision), (0, _mathUtilities.roundToPrecisionSmall)(this.a, precision));
13924  }
13925  /**
13926   * Returns a new {@link ColorRGBA64} with channel values clamped between 0 and 1.
13927   */
13928
13929
13930  clamp() {
13931    return new ColorRGBA64((0, _mathUtilities.clamp)(this.r, 0, 1), (0, _mathUtilities.clamp)(this.g, 0, 1), (0, _mathUtilities.clamp)(this.b, 0, 1), (0, _mathUtilities.clamp)(this.a, 0, 1));
13932  }
13933  /**
13934   * Converts the {@link ColorRGBA64} to a {@link ColorRGBA64Config}.
13935   */
13936
13937
13938  toObject() {
13939    return {
13940      r: this.r,
13941      g: this.g,
13942      b: this.b,
13943      a: this.a
13944    };
13945  }
13946
13947  formatHexValue(value) {
13948    return (0, _mathUtilities.getHexStringForByte)((0, _mathUtilities.denormalize)(value, 0.0, 255.0));
13949  }
13950
13951}
13952
13953exports.ColorRGBA64 = ColorRGBA64;
13954
13955},{"./math-utilities.js":140}],135:[function(require,module,exports){
13956"use strict";
13957
13958Object.defineProperty(exports, "__esModule", {
13959  value: true
13960});
13961exports.ColorScale = void 0;
13962
13963var _colorConverters = require("./color-converters.js");
13964
13965var _colorInterpolation = require("./color-interpolation.js");
13966
13967/**
13968 * A color scale created from linear stops
13969 * @public
13970 */
13971class ColorScale {
13972  constructor(stops) {
13973    if (stops == null || stops.length === 0) {
13974      throw new Error("The stops argument must be non-empty");
13975    } else {
13976      this.stops = this.sortColorScaleStops(stops);
13977    }
13978  }
13979
13980  static createBalancedColorScale(colors) {
13981    if (colors == null || colors.length === 0) {
13982      throw new Error("The colors argument must be non-empty");
13983    }
13984
13985    const stops = new Array(colors.length);
13986
13987    for (let i = 0; i < colors.length; i++) {
13988      // Special case first and last in order to avoid floating point jaggies
13989      if (i === 0) {
13990        stops[i] = {
13991          color: colors[i],
13992          position: 0
13993        };
13994      } else if (i === colors.length - 1) {
13995        stops[i] = {
13996          color: colors[i],
13997          position: 1
13998        };
13999      } else {
14000        stops[i] = {
14001          color: colors[i],
14002          position: i * (1 / (colors.length - 1))
14003        };
14004      }
14005    }
14006
14007    return new ColorScale(stops);
14008  }
14009
14010  getColor(position, interpolationMode = _colorInterpolation.ColorInterpolationSpace.RGB) {
14011    if (this.stops.length === 1) {
14012      return this.stops[0].color;
14013    } else if (position <= 0) {
14014      return this.stops[0].color;
14015    } else if (position >= 1) {
14016      return this.stops[this.stops.length - 1].color;
14017    }
14018
14019    let lowerIndex = 0;
14020
14021    for (let i = 0; i < this.stops.length; i++) {
14022      if (this.stops[i].position <= position) {
14023        lowerIndex = i;
14024      }
14025    }
14026
14027    let upperIndex = lowerIndex + 1;
14028
14029    if (upperIndex >= this.stops.length) {
14030      upperIndex = this.stops.length - 1;
14031    }
14032
14033    const scalePosition = (position - this.stops[lowerIndex].position) * (1.0 / (this.stops[upperIndex].position - this.stops[lowerIndex].position));
14034    return (0, _colorInterpolation.interpolateByColorSpace)(scalePosition, interpolationMode, this.stops[lowerIndex].color, this.stops[upperIndex].color);
14035  }
14036
14037  trim(lowerBound, upperBound, interpolationMode = _colorInterpolation.ColorInterpolationSpace.RGB) {
14038    if (lowerBound < 0 || upperBound > 1 || upperBound < lowerBound) {
14039      throw new Error("Invalid bounds");
14040    }
14041
14042    if (lowerBound === upperBound) {
14043      return new ColorScale([{
14044        color: this.getColor(lowerBound, interpolationMode),
14045        position: 0
14046      }]);
14047    }
14048
14049    const containedStops = [];
14050
14051    for (let i = 0; i < this.stops.length; i++) {
14052      if (this.stops[i].position >= lowerBound && this.stops[i].position <= upperBound) {
14053        containedStops.push(this.stops[i]);
14054      }
14055    }
14056
14057    if (containedStops.length === 0) {
14058      return new ColorScale([{
14059        color: this.getColor(lowerBound),
14060        position: lowerBound
14061      }, {
14062        color: this.getColor(upperBound),
14063        position: upperBound
14064      }]);
14065    }
14066
14067    if (containedStops[0].position !== lowerBound) {
14068      containedStops.unshift({
14069        color: this.getColor(lowerBound),
14070        position: lowerBound
14071      });
14072    }
14073
14074    if (containedStops[containedStops.length - 1].position !== upperBound) {
14075      containedStops.push({
14076        color: this.getColor(upperBound),
14077        position: upperBound
14078      });
14079    }
14080
14081    const range = upperBound - lowerBound;
14082    const finalStops = new Array(containedStops.length);
14083
14084    for (let i = 0; i < containedStops.length; i++) {
14085      finalStops[i] = {
14086        color: containedStops[i].color,
14087        position: (containedStops[i].position - lowerBound) / range
14088      };
14089    }
14090
14091    return new ColorScale(finalStops);
14092  }
14093
14094  findNextColor(position, contrast, searchDown = false, interpolationMode = _colorInterpolation.ColorInterpolationSpace.RGB, contrastErrorMargin = 0.005, maxSearchIterations = 32) {
14095    if (isNaN(position) || position <= 0) {
14096      position = 0;
14097    } else if (position >= 1) {
14098      position = 1;
14099    }
14100
14101    const startingColor = this.getColor(position, interpolationMode);
14102    const finalPosition = searchDown ? 0 : 1;
14103    const finalColor = this.getColor(finalPosition, interpolationMode);
14104    const finalContrast = (0, _colorConverters.contrastRatio)(startingColor, finalColor);
14105
14106    if (finalContrast <= contrast) {
14107      return finalPosition;
14108    }
14109
14110    let testRangeMin = searchDown ? 0 : position;
14111    let testRangeMax = searchDown ? position : 0;
14112    let mid = finalPosition;
14113    let iterations = 0;
14114
14115    while (iterations <= maxSearchIterations) {
14116      mid = Math.abs(testRangeMax - testRangeMin) / 2 + testRangeMin;
14117      const midColor = this.getColor(mid, interpolationMode);
14118      const midContrast = (0, _colorConverters.contrastRatio)(startingColor, midColor);
14119
14120      if (Math.abs(midContrast - contrast) <= contrastErrorMargin) {
14121        return mid;
14122      } else if (midContrast > contrast) {
14123        if (searchDown) {
14124          testRangeMin = mid;
14125        } else {
14126          testRangeMax = mid;
14127        }
14128      } else {
14129        if (searchDown) {
14130          testRangeMax = mid;
14131        } else {
14132          testRangeMin = mid;
14133        }
14134      }
14135
14136      iterations++;
14137    }
14138
14139    return mid;
14140  }
14141
14142  clone() {
14143    const newStops = new Array(this.stops.length);
14144
14145    for (let i = 0; i < newStops.length; i++) {
14146      newStops[i] = {
14147        color: this.stops[i].color,
14148        position: this.stops[i].position
14149      };
14150    }
14151
14152    return new ColorScale(newStops);
14153  }
14154
14155  sortColorScaleStops(stops) {
14156    return stops.sort((a, b) => {
14157      const A = a.position;
14158      const B = b.position;
14159
14160      if (A < B) {
14161        return -1;
14162      } else if (A > B) {
14163        return 1;
14164      } else {
14165        return 0;
14166      }
14167    });
14168  }
14169
14170}
14171
14172exports.ColorScale = ColorScale;
14173
14174},{"./color-converters.js":126,"./color-interpolation.js":129}],136:[function(require,module,exports){
14175"use strict";
14176
14177Object.defineProperty(exports, "__esModule", {
14178  value: true
14179});
14180exports.ColorXYZ = void 0;
14181
14182var _mathUtilities = require("./math-utilities.js");
14183
14184/**
14185 * {@link https://en.wikipedia.org/wiki/CIE_1931_color_space | XYZ color space}
14186 *
14187 * This implementation uses the D65 constants for 2 degrees. That determines the constants used for the pure white point of the XYZ space of 0.95047, 1.0, 1.08883.
14188 * {@link https://en.wikipedia.org/wiki/Illuminant_D65}
14189 * These constants determine how the XYZ, LCH and LAB colors convert to/from RGB.
14190 *
14191 * @public
14192 */
14193class ColorXYZ {
14194  constructor(x, y, z) {
14195    this.x = x;
14196    this.y = y;
14197    this.z = z;
14198  }
14199  /**
14200   * Construct a {@link ColorXYZ} from a config object.
14201   */
14202
14203
14204  static fromObject(data) {
14205    if (data && !isNaN(data.x) && !isNaN(data.y) && !isNaN(data.z)) {
14206      return new ColorXYZ(data.x, data.y, data.z);
14207    }
14208
14209    return null;
14210  }
14211  /**
14212   * Determines if a color is equal to another
14213   * @param rhs - the value to compare
14214   */
14215
14216
14217  equalValue(rhs) {
14218    return this.x === rhs.x && this.y === rhs.y && this.z === rhs.z;
14219  }
14220  /**
14221   * Returns a new {@link ColorXYZ} rounded to the provided precision
14222   * @param precision - the precision to round to
14223   */
14224
14225
14226  roundToPrecision(precision) {
14227    return new ColorXYZ((0, _mathUtilities.roundToPrecisionSmall)(this.x, precision), (0, _mathUtilities.roundToPrecisionSmall)(this.y, precision), (0, _mathUtilities.roundToPrecisionSmall)(this.z, precision));
14228  }
14229  /**
14230   * Returns the {@link ColorXYZ} formatted as an object.
14231   */
14232
14233
14234  toObject() {
14235    return {
14236      x: this.x,
14237      y: this.y,
14238      z: this.z
14239    };
14240  }
14241
14242}
14243/**
14244 * D65 2 degree white point
14245 */
14246
14247
14248exports.ColorXYZ = ColorXYZ;
14249ColorXYZ.whitePoint = new ColorXYZ(0.95047, 1.0, 1.08883);
14250
14251},{"./math-utilities.js":140}],137:[function(require,module,exports){
14252"use strict";
14253
14254Object.defineProperty(exports, "__esModule", {
14255  value: true
14256});
14257exports.ComponentStateColorPalette = void 0;
14258
14259var _colorRgba = require("./color-rgba-64.js");
14260
14261var _colorPalette = require("./color-palette.js");
14262
14263var _colorConverters = require("./color-converters.js");
14264
14265var _colorScale = require("./color-scale.js");
14266
14267var _colorHsl = require("./color-hsl.js");
14268
14269var _colorInterpolation = require("./color-interpolation.js");
14270
14271var _parseColor = require("./parse-color.js");
14272
14273/**
14274 * Creates a color palette for UI components
14275 * @public
14276 */
14277class ComponentStateColorPalette {
14278  constructor(config) {
14279    this.palette = [];
14280    this.config = Object.assign({}, ComponentStateColorPalette.defaultPaletteConfig, config);
14281    this.regenPalettes();
14282  }
14283
14284  regenPalettes() {
14285    let steps = this.config.steps;
14286
14287    if (isNaN(steps) || steps < 3) {
14288      steps = 3;
14289    } // This palette is tuned to go as dark as differences between the levels can be perceived according to tests

14290    // on numerous monitors in different conditions. Stay linear from white until this first cutoff.
14291
14292
14293    const darkLum = 0.14; // In the dark compression, this is the last luminance value before full black.
14294
14295    const darkestLum = 0.06; // The Color for the luminance value above, placed on the ramp at it's normal position, so darker colors after
14296    // it can be compressed.
14297
14298    const darkLumColor = new _colorRgba.ColorRGBA64(darkLum, darkLum, darkLum, 1); // The number of steps in the ramp that has been tuned for default use. This coincides with the size of the
14299    // default ramp, but the palette could be generated with fewer steps to increase final contrast. This number
14300    // should however stay the same.
14301
14302    const stepsForLuminanceRamp = 94; // Create the reference, dark-compressed, grey palette, like:
14303    // F------------------------------------------------------------------------------------[dark]------[darkest]0
14304    //                                                                                      |--compressed area--|
14305
14306    const r = new _colorPalette.ColorPalette(Object.assign(Object.assign({}, _colorPalette.ColorPalette.greyscalePaletteConfig), {
14307      baseColor: darkLumColor,
14308      baseScalePosition: (1 - darkLum) * 100 / stepsForLuminanceRamp,
14309      steps
14310    }));
14311    const referencePalette = r.palette; // Find the requested base color on the adjusted luminance reference ramp.
14312    // There is no _right_ way to desaturate a color, and both methods we've tested have value, so average them out.
14313
14314    const baseColorLum1 = (0, _colorConverters.rgbToLinearLuminance)(this.config.baseColor);
14315    const baseColorLum2 = (0, _colorConverters.rgbToHSL)(this.config.baseColor).l;
14316    const baseColorLum = (baseColorLum1 + baseColorLum2) / 2;
14317    const baseColorRefIndex = this.matchRelativeLuminanceIndex(baseColorLum, referencePalette);
14318    const baseColorPercent = baseColorRefIndex / (steps - 1); // Find the luminance location for the dark cutoff.
14319
14320    const darkRefIndex = this.matchRelativeLuminanceIndex(darkLum, referencePalette);
14321    const darkPercent = darkRefIndex / (steps - 1); // Issue https://github.com/microsoft/fast/issues/1904
14322    // Creating a color from H, S, and a known L value is not the inverse of getting the relative
14323    // luminace as above. Need to derive a relative luminance version of the color to better match on the dark end.
14324    // Find the dark cutoff and darkest variations of the requested base color.
14325
14326    const baseColorHSL = (0, _colorConverters.rgbToHSL)(this.config.baseColor);
14327    const darkBaseColor = (0, _colorConverters.hslToRGB)(_colorHsl.ColorHSL.fromObject({
14328      h: baseColorHSL.h,
14329      s: baseColorHSL.s,
14330      l: darkLum
14331    }));
14332    const darkestBaseColor = (0, _colorConverters.hslToRGB)(_colorHsl.ColorHSL.fromObject({
14333      h: baseColorHSL.h,
14334      s: baseColorHSL.s,
14335      l: darkestLum
14336    })); // Create the gradient stops, including the base color and anchor colors for the dark end compression.
14337
14338    const fullColorScaleStops = new Array(5);
14339    fullColorScaleStops[0] = {
14340      position: 0,
14341      color: new _colorRgba.ColorRGBA64(1, 1, 1, 1)
14342    };
14343    fullColorScaleStops[1] = {
14344      position: baseColorPercent,
14345      color: this.config.baseColor
14346    };
14347    fullColorScaleStops[2] = {
14348      position: darkPercent,
14349      color: darkBaseColor
14350    };
14351    fullColorScaleStops[3] = {
14352      position: 0.99,
14353      color: darkestBaseColor
14354    };
14355    fullColorScaleStops[4] = {
14356      position: 1,
14357      color: new _colorRgba.ColorRGBA64(0, 0, 0, 1)
14358    };
14359    const scale = new _colorScale.ColorScale(fullColorScaleStops); // Create the palette.
14360
14361    this.palette = new Array(steps);
14362
14363    for (let i = 0; i < steps; i++) {
14364      const c = scale.getColor(i / (steps - 1), _colorInterpolation.ColorInterpolationSpace.RGB);
14365      this.palette[i] = c;
14366    }
14367  }
14368
14369  matchRelativeLuminanceIndex(input, reference) {
14370    let bestFitValue = Number.MAX_VALUE;
14371    let bestFitIndex = 0;
14372    let i = 0;
14373    const referenceLength = reference.length;
14374
14375    for (; i < referenceLength; i++) {
14376      const fitValue = Math.abs((0, _colorConverters.rgbToLinearLuminance)(reference[i]) - input);
14377
14378      if (fitValue < bestFitValue) {
14379        bestFitValue = fitValue;
14380        bestFitIndex = i;
14381      }
14382    }
14383
14384    return bestFitIndex;
14385  }
14386
14387}
14388
14389exports.ComponentStateColorPalette = ComponentStateColorPalette;
14390ComponentStateColorPalette.defaultPaletteConfig = {
14391  baseColor: (0, _parseColor.parseColorHexRGB)("#808080"),
14392  steps: 94
14393};
14394
14395},{"./color-converters.js":126,"./color-hsl.js":127,"./color-interpolation.js":129,"./color-palette.js":132,"./color-rgba-64.js":134,"./color-scale.js":135,"./parse-color.js":143}],138:[function(require,module,exports){
14396"use strict";
14397
14398Object.defineProperty(exports, "__esModule", {
14399  value: true
14400});
14401exports.Histogram = void 0;
14402
14403/**
14404 * For each possible color, this counts how many pixels in the source image match that color.
14405 * If signifigantBits is less than 8, each channel (eg: red, green, blue) in each color is reduced to fit in significantBits. So for the default value of 5 significantBits colors are reduced from 8 bits per channel (0-255) to 5 (0-31). Colors that were previously distinct get combined together.
14406 * If the image source has more than 2^32 pixels (eg: a square image 65536x65536 in size) of the same color this code will break.
14407 *
14408 * @public
14409 */
14410class Histogram {
14411  /**
14412   * @param source - the source pixel data.
14413   * @param significantBits - The memory needed for the histogram increases dramatically if significantBits is increased. It needs a buffer which is 4*2^(3*significantBits) in size. EG: for 5 significant bits the histogram is 128K while for 8 it is 64 megs.
14414   * @param pixelSkipping - CPU time increases linearly as pixelSkipping is reduced.
14415   * @param isHistogramPixelValid - isHistogramPixelValid is an optional predicate which can screen out unwanted pixels from the source data. EG: ignoring transparent pixels.
14416   */
14417  constructor(source, significantBits = 5, pixelSkipping = 5, isHistogramPixelValid = null) {
14418    this.getHistogramIndex = (r, g, b) => {
14419      const index = (r << 2 * this.significantBits) + (g << this.significantBits) + b;
14420
14421      if (index >= this.data.length) {
14422        throw new Error("RGB value is outside the bounds of the histogram");
14423      }
14424
14425      return index;
14426    };
14427
14428    this.getHistogramValue = (r, g, b) => {
14429      return this.data[this.getHistogramIndex(r, g, b)];
14430    };
14431
14432    this.setHistogramValue = (value, r, g, b) => {
14433      this.data[this.getHistogramIndex(r, g, b)] = value;
14434    };
14435
14436    if (significantBits < 1 || significantBits > 8) {
14437      throw new Error("significantBits must be in the range [1,8]");
14438    }
14439
14440    if (pixelSkipping < 0) {
14441      throw new Error("pixelSkipping must be >= 0");
14442    }
14443
14444    this.significantBits = significantBits;
14445    const sigShift = 8 - this.significantBits;
14446    this.minRed = 255 >>> sigShift;
14447    this.maxRed = 0;
14448    this.minGreen = 255 >>> sigShift;
14449    this.maxGreen = 0;
14450    this.minBlue = 255 >>> sigShift;
14451    this.maxBlue = 0;
14452    const histoSize = 1 << significantBits * 3;
14453    this.data = new Uint32Array(histoSize);
14454    this.data.fill(0);
14455    this.total = 0;
14456    let pixelIndex = 0;
14457
14458    for (let y = 0; y < source.height; y++) {
14459      for (let x = 0; x < source.width; x++) {
14460        if (pixelSkipping > 0 && pixelIndex++ % pixelSkipping !== 0) {
14461          continue;
14462        }
14463
14464        const rgba = source.getPixelRGBA(x, y);
14465
14466        if (isHistogramPixelValid !== null) {
14467          if (!isHistogramPixelValid(rgba)) {
14468            continue;
14469          }
14470        } // Shift the pixel data into the range determined by significantBits
14471        // after checking minAlpha the alpha data is no longer needed
14472
14473
14474        rgba[0] = rgba[0] >>> sigShift;
14475        rgba[1] = rgba[1] >>> sigShift;
14476        rgba[2] = rgba[2] >>> sigShift;
14477        this.minRed = Math.min(rgba[0], this.minRed);
14478        this.maxRed = Math.max(rgba[0], this.maxRed);
14479        this.minGreen = Math.min(rgba[1], this.minGreen);
14480        this.maxGreen = Math.max(rgba[1], this.maxGreen);
14481        this.minBlue = Math.min(rgba[2], this.minBlue);
14482        this.maxBlue = Math.max(rgba[2], this.maxBlue);
14483        const histoIndex = this.getHistogramIndex(rgba[0], rgba[1], rgba[2]);
14484        this.data[histoIndex] += 1;
14485        this.total++;
14486      }
14487    }
14488  }
14489
14490}
14491
14492exports.Histogram = Histogram;
14493
14494},{}],139:[function(require,module,exports){
14495"use strict";
14496
14497Object.defineProperty(exports, "__esModule", {
14498  value: true
14499});
14500
14501var _colorBlending = require("./color-blending.js");
14502
14503Object.keys(_colorBlending).forEach(function (key) {

14504  if (key === "default" || key === "__esModule") return;
14505  if (key in exports && exports[key] === _colorBlending[key]) return;
14506  Object.defineProperty(exports, key, {
14507    enumerable: true,
14508    get: function () {
14509      return _colorBlending[key];
14510    }
14511  });
14512});
14513
14514var _colorConverters = require("./color-converters.js");
14515
14516Object.keys(_colorConverters).forEach(function (key) {
14517  if (key === "default" || key === "__esModule") return;
14518  if (key in exports && exports[key] === _colorConverters[key]) return;
14519  Object.defineProperty(exports, key, {
14520    enumerable: true,
14521    get: function () {
14522      return _colorConverters[key];
14523    }
14524  });
14525});
14526
14527var _colorHsl = require("./color-hsl.js");
14528
14529Object.keys(_colorHsl).forEach(function (key) {
14530  if (key === "default" || key === "__esModule") return;
14531  if (key in exports && exports[key] === _colorHsl[key]) return;
14532  Object.defineProperty(exports, key, {
14533    enumerable: true,
14534    get: function () {
14535      return _colorHsl[key];
14536    }
14537  });
14538});
14539
14540var _colorHsv = require("./color-hsv.js");
14541
14542Object.keys(_colorHsv).forEach(function (key) {
14543  if (key === "default" || key === "__esModule") return;
14544  if (key in exports && exports[key] === _colorHsv[key]) return;
14545  Object.defineProperty(exports, key, {
14546    enumerable: true,
14547    get: function () {
14548      return _colorHsv[key];
14549    }
14550  });
14551});
14552
14553var _colorInterpolation = require("./color-interpolation.js");
14554
14555Object.keys(_colorInterpolation).forEach(function (key) {
14556  if (key === "default" || key === "__esModule") return;
14557  if (key in exports && exports[key] === _colorInterpolation[key]) return;
14558  Object.defineProperty(exports, key, {
14559    enumerable: true,
14560    get: function () {
14561      return _colorInterpolation[key];
14562    }
14563  });
14564});
14565
14566var _colorLab = require("./color-lab.js");
14567
14568Object.keys(_colorLab).forEach(function (key) {
14569  if (key === "default" || key === "__esModule") return;
14570  if (key in exports && exports[key] === _colorLab[key]) return;
14571  Object.defineProperty(exports, key, {
14572    enumerable: true,
14573    get: function () {
14574      return _colorLab[key];
14575    }
14576  });
14577});
14578
14579var _colorLch = require("./color-lch.js");
14580
14581Object.keys(_colorLch).forEach(function (key) {
14582  if (key === "default" || key === "__esModule") return;
14583  if (key in exports && exports[key] === _colorLch[key]) return;
14584  Object.defineProperty(exports, key, {
14585    enumerable: true,
14586    get: function () {
14587      return _colorLch[key];
14588    }
14589  });
14590});
14591
14592var _colorPalette = require("./color-palette.js");
14593
14594Object.keys(_colorPalette).forEach(function (key) {
14595  if (key === "default" || key === "__esModule") return;
14596  if (key in exports && exports[key] === _colorPalette[key]) return;
14597  Object.defineProperty(exports, key, {
14598    enumerable: true,
14599    get: function () {
14600      return _colorPalette[key];
14601    }
14602  });
14603});
14604
14605var _colorQuantization = require("./color-quantization.js");
14606
14607Object.keys(_colorQuantization).forEach(function (key) {
14608  if (key === "default" || key === "__esModule") return;
14609  if (key in exports && exports[key] === _colorQuantization[key]) return;
14610  Object.defineProperty(exports, key, {
14611    enumerable: true,
14612    get: function () {
14613      return _colorQuantization[key];
14614    }
14615  });
14616});
14617
14618var _colorRgba = require("./color-rgba-64.js");
14619
14620Object.keys(_colorRgba).forEach(function (key) {
14621  if (key === "default" || key === "__esModule") return;
14622  if (key in exports && exports[key] === _colorRgba[key]) return;
14623  Object.defineProperty(exports, key, {
14624    enumerable: true,
14625    get: function () {
14626      return _colorRgba[key];
14627    }
14628  });
14629});
14630
14631var _colorScale = require("./color-scale.js");
14632
14633Object.keys(_colorScale).forEach(function (key) {
14634  if (key === "default" || key === "__esModule") return;
14635  if (key in exports && exports[key] === _colorScale[key]) return;
14636  Object.defineProperty(exports, key, {
14637    enumerable: true,
14638    get: function () {
14639      return _colorScale[key];
14640    }
14641  });
14642});
14643
14644var _colorXyz = require("./color-xyz.js");
14645
14646Object.keys(_colorXyz).forEach(function (key) {
14647  if (key === "default" || key === "__esModule") return;
14648  if (key in exports && exports[key] === _colorXyz[key]) return;
14649  Object.defineProperty(exports, key, {
14650    enumerable: true,
14651    get: function () {
14652      return _colorXyz[key];
14653    }
14654  });
14655});
14656
14657var _componentStateColorPalette = require("./component-state-color-palette.js");
14658
14659Object.keys(_componentStateColorPalette).forEach(function (key) {

14660  if (key === "default" || key === "__esModule") return;
14661  if (key in exports && exports[key] === _componentStateColorPalette[key]) return;
14662  Object.defineProperty(exports, key, {
14663    enumerable: true,
14664    get: function () {
14665      return _componentStateColorPalette[key];
14666    }
14667  });
14668});
14669
14670var _histogram = require("./histogram.js");
14671
14672Object.keys(_histogram).forEach(function (key) {
14673  if (key === "default" || key === "__esModule") return;
14674  if (key in exports && exports[key] === _histogram[key]) return;
14675  Object.defineProperty(exports, key, {
14676    enumerable: true,
14677    get: function () {
14678      return _histogram[key];
14679    }
14680  });
14681});
14682
14683var _mathUtilities = require("./math-utilities.js");
14684
14685Object.keys(_mathUtilities).forEach(function (key) {
14686  if (key === "default" || key === "__esModule") return;
14687  if (key in exports && exports[key] === _mathUtilities[key]) return;
14688  Object.defineProperty(exports, key, {
14689    enumerable: true,
14690    get: function () {
14691      return _mathUtilities[key];
14692    }
14693  });
14694});
14695
14696var _paletteExtractor = require("./palette-extractor.js");
14697
14698Object.keys(_paletteExtractor).forEach(function (key) {
14699  if (key === "default" || key === "__esModule") return;
14700  if (key in exports && exports[key] === _paletteExtractor[key]) return;
14701  Object.defineProperty(exports, key, {
14702    enumerable: true,
14703    get: function () {
14704      return _paletteExtractor[key];
14705    }
14706  });
14707});
14708
14709var _parseColor = require("./parse-color.js");
14710
14711Object.keys(_parseColor).forEach(function (key) {
14712  if (key === "default" || key === "__esModule") return;
14713  if (key in exports && exports[key] === _parseColor[key]) return;
14714  Object.defineProperty(exports, key, {
14715    enumerable: true,
14716    get: function () {
14717      return _parseColor[key];
14718    }
14719  });
14720});
14721
14722var _pixelBlob = require("./pixel-blob.js");
14723
14724Object.keys(_pixelBlob).forEach(function (key) {
14725  if (key === "default" || key === "__esModule") return;
14726  if (key in exports && exports[key] === _pixelBlob[key]) return;
14727  Object.defineProperty(exports, key, {
14728    enumerable: true,
14729    get: function () {
14730      return _pixelBlob[key];
14731    }
14732  });
14733});
14734
14735var _pixelBox = require("./pixel-box.js");
14736
14737Object.keys(_pixelBox).forEach(function (key) {
14738  if (key === "default" || key === "__esModule") return;
14739  if (key in exports && exports[key] === _pixelBox[key]) return;
14740  Object.defineProperty(exports, key, {
14741    enumerable: true,
14742    get: function () {
14743      return _pixelBox[key];
14744    }
14745  });
14746});
14747
14748},{"./color-blending.js":125,"./color-converters.js":126,"./color-hsl.js":127,"./color-hsv.js":128,"./color-interpolation.js":129,"./color-lab.js":130,"./color-lch.js":131,"./color-palette.js":132,"./color-quantization.js":133,"./color-rgba-64.js":134,"./color-scale.js":135,"./color-xyz.js":136,"./component-state-color-palette.js":137,"./histogram.js":138,"./math-utilities.js":140,"./palette-extractor.js":142,"./parse-color.js":143,"./pixel-blob.js":144,"./pixel-box.js":145}],140:[function(require,module,exports){
14749"use strict";
14750
14751Object.defineProperty(exports, "__esModule", {
14752  value: true
14753});
14754exports.clamp = clamp;
14755exports.degreesToRadians = degreesToRadians;
14756exports.denormalize = denormalize;
14757exports.getHexStringForByte = getHexStringForByte;
14758exports.lerp = lerp;
14759exports.lerpAnglesInDegrees = lerpAnglesInDegrees;
14760exports.lerpAnglesInRadians = lerpAnglesInRadians;
14761exports.normalize = normalize;
14762exports.radiansToDegrees = radiansToDegrees;
14763exports.roundToPrecisionSmall = roundToPrecisionSmall;
14764
14765/**
14766 * Ensures that an input number does not exceed a max value and is not less than a min value.
14767 * @param i - the number to clamp
14768 * @param min - the maximum (inclusive) value
14769 * @param max - the minimum (inclusive) value
14770 * @public
14771 */
14772function clamp(i, min, max) {
14773  if (isNaN(i) || i <= min) {
14774    return min;
14775  } else if (i >= max) {
14776    return max;
14777  }
14778
14779  return i;
14780}
14781/**
14782 * Scales an input to a number between 0 and 1
14783 * @param i - a number between min and max
14784 * @param min - the max value
14785 * @param max - the min value
14786 * @public
14787 */
14788
14789
14790function normalize(i, min, max) {
14791  if (isNaN(i) || i <= min) {
14792    return 0.0;
14793  } else if (i >= max) {
14794    return 1.0;
14795  }
14796
14797  return i / (max - min);
14798}
14799/**
14800 * Scales a number between 0 and 1
14801 * @param i - the number to denormalize
14802 * @param min - the min value
14803 * @param max - the max value
14804 * @public
14805 */
14806
14807
14808function denormalize(i, min, max) {
14809  if (isNaN(i)) {
14810    return min;
14811  }
14812
14813  return min + i * (max - min);
14814}
14815/**
14816 * Converts degrees to radians.
14817 * @param i - degrees
14818 * @public
14819 */
14820
14821
14822function degreesToRadians(i) {
14823  return i * (Math.PI / 180.0);
14824}
14825/**
14826 * Converts radians to degrees.
14827 * @param i - radians
14828 * @public
14829 */
14830
14831
14832function radiansToDegrees(i) {
14833  return i * (180.0 / Math.PI);
14834}
14835/**
14836 * Converts a number between 0 and 255 to a hex string.
14837 * @param i - the number to convert to a hex string
14838 * @public
14839 */
14840
14841
14842function getHexStringForByte(i) {
14843  const s = Math.round(clamp(i, 0.0, 255.0)).toString(16);
14844
14845  if (s.length === 1) {
14846    return "0" + s;
14847  }
14848
14849  return s;
14850}
14851/**
14852 * Linearly interpolate
14853 * @public
14854 */
14855
14856
14857function lerp(i, min, max) {
14858  if (isNaN(i) || i <= 0.0) {
14859    return min;
14860  } else if (i >= 1.0) {
14861    return max;
14862  }
14863
14864  return min + i * (max - min);
14865}
14866/**
14867 * Linearly interpolate angles in degrees
14868 * @public
14869 */
14870
14871
14872function lerpAnglesInDegrees(i, min, max) {
14873  if (i <= 0.0) {
14874    return min % 360.0;
14875  } else if (i >= 1.0) {
14876    return max % 360.0;
14877  }
14878
14879  const a = (min - max + 360.0) % 360.0;
14880  const b = (max - min + 360.0) % 360.0;
14881
14882  if (a <= b) {
14883    return (min - a * i + 360.0) % 360.0;
14884  }
14885
14886  return (min + a * i + 360.0) % 360.0;
14887}
14888
14889const TwoPI = Math.PI * 2;
14890/**
14891 * Linearly interpolate angles in radians
14892 * @public
14893 */
14894
14895function lerpAnglesInRadians(i, min, max) {
14896  if (isNaN(i) || i <= 0.0) {
14897    return min % TwoPI;
14898  } else if (i >= 1.0) {
14899    return max % TwoPI;
14900  }
14901
14902  const a = (min - max + TwoPI) % TwoPI;
14903  const b = (max - min + TwoPI) % TwoPI;
14904
14905  if (a <= b) {
14906    return (min - a * i + TwoPI) % TwoPI;
14907  }
14908
14909  return (min + a * i + TwoPI) % TwoPI;
14910}
14911/**
14912 *
14913 * Will return infinity if i*10^(precision) overflows number
14914 * note that floating point rounding rules come into play here
14915 * so values that end up rounding on a .5 round to the nearest
14916 * even not always up so 2.5 rounds to 2
14917 * @param i - the number to round
14918 * @param precision - the precision to round to
14919 *
14920 * @public
14921 */
14922
14923
14924function roundToPrecisionSmall(i, precision) {
14925  const factor = Math.pow(10, precision);
14926  return Math.round(i * factor) / factor;
14927}
14928
14929},{}],141:[function(require,module,exports){
14930"use strict";
14931
14932Object.defineProperty(exports, "__esModule", {
14933  value: true
14934});
14935exports.namedColorsConfigs = void 0;
14936const namedColorsConfigs = {
14937  aliceblue: {
14938    r: 0.941176,
14939    g: 0.972549,
14940    b: 1
14941  },
14942  antiquewhite: {
14943    r: 0.980392,
14944    g: 0.921569,
14945    b: 0.843137
14946  },
14947  aqua: {
14948    r: 0,
14949    g: 1,
14950    b: 1
14951  },
14952  aquamarine: {
14953    r: 0.498039,
14954    g: 1,
14955    b: 0.831373
14956  },
14957  azure: {
14958    r: 0.941176,
14959    g: 1,
14960    b: 1
14961  },
14962  beige: {

14963    r: 0.960784,
14964    g: 0.960784,
14965    b: 0.862745
14966  },
14967  bisque: {
14968    r: 1,
14969    g: 0.894118,
14970    b: 0.768627
14971  },
14972  black: {
14973    r: 0,
14974    g: 0,
14975    b: 0
14976  },
14977  blanchedalmond: {
14978    r: 1,
14979    g: 0.921569,
14980    b: 0.803922
14981  },
14982  blue: {
14983    r: 0,
14984    g: 0,
14985    b: 1
14986  },
14987  blueviolet: {
14988    r: 0.541176,
14989    g: 0.168627,
14990    b: 0.886275
14991  },
14992  brown: {
14993    r: 0.647059,
14994    g: 0.164706,
14995    b: 0.164706
14996  },
14997  burlywood: {
14998    r: 0.870588,
14999    g: 0.721569,
15000    b: 0.529412
15001  },
15002  cadetblue: {
15003    r: 0.372549,
15004    g: 0.619608,
15005    b: 0.627451
15006  },
15007  chartreuse: {
15008    r: 0.498039,
15009    g: 1,
15010    b: 0
15011  },
15012  chocolate: {
15013    r: 0.823529,
15014    g: 0.411765,
15015    b: 0.117647
15016  },
15017  coral: {
15018    r: 1,
15019    g: 0.498039,
15020    b: 0.313725
15021  },
15022  cornflowerblue: {
15023    r: 0.392157,
15024    g: 0.584314,
15025    b: 0.929412
15026  },
15027  cornsilk: {
15028    r: 1,
15029    g: 0.972549,
15030    b: 0.862745
15031  },
15032  crimson: {
15033    r: 0.862745,
15034    g: 0.078431,
15035    b: 0.235294
15036  },
15037  cyan: {
15038    r: 0,
15039    g: 1,
15040    b: 1
15041  },
15042  darkblue: {
15043    r: 0,
15044    g: 0,
15045    b: 0.545098
15046  },
15047  darkcyan: {
15048    r: 0,
15049    g: 0.545098,
15050    b: 0.545098
15051  },
15052  darkgoldenrod: {
15053    r: 0.721569,
15054    g: 0.52549,
15055    b: 0.043137
15056  },
15057  darkgray: {
15058    r: 0.662745,
15059    g: 0.662745,
15060    b: 0.662745
15061  },
15062  darkgreen: {
15063    r: 0,
15064    g: 0.392157,
15065    b: 0
15066  },
15067  darkgrey: {
15068    r: 0.662745,
15069    g: 0.662745,
15070    b: 0.662745
15071  },
15072  darkkhaki: {
15073    r: 0.741176,
15074    g: 0.717647,
15075    b: 0.419608
15076  },
15077  darkmagenta: {
15078    r: 0.545098,
15079    g: 0,
15080    b: 0.545098
15081  },
15082  darkolivegreen: {
15083    r: 0.333333,
15084    g: 0.419608,
15085    b: 0.184314
15086  },
15087  darkorange: {
15088    r: 1,
15089    g: 0.54902,
15090    b: 0
15091  },
15092  darkorchid: {
15093    r: 0.6,
15094    g: 0.196078,
15095    b: 0.8
15096  },
15097  darkred: {
15098    r: 0.545098,
15099    g: 0,
15100    b: 0
15101  },
15102  darksalmon: {
15103    r: 0.913725,
15104    g: 0.588235,
15105    b: 0.478431
15106  },
15107  darkseagreen: {
15108    r: 0.560784,
15109    g: 0.737255,
15110    b: 0.560784
15111  },
15112  darkslateblue: {
15113    r: 0.282353,
15114    g: 0.239216,
15115    b: 0.545098
15116  },
15117  darkslategray: {
15118    r: 0.184314,
15119    g: 0.309804,
15120    b: 0.309804
15121  },
15122  darkslategrey: {
15123    r: 0.184314,
15124    g: 0.309804,
15125    b: 0.309804
15126  },
15127  darkturquoise: {
15128    r: 0,
15129    g: 0.807843,
15130    b: 0.819608
15131  },
15132  darkviolet: {
15133    r: 0.580392,
15134    g: 0,
15135    b: 0.827451
15136  },
15137  deeppink: {
15138    r: 1,
15139    g: 0.078431,
15140    b: 0.576471
15141  },
15142  deepskyblue: {
15143    r: 0,
15144    g: 0.74902,
15145    b: 1
15146  },
15147  dimgray: {
15148    r: 0.411765,
15149    g: 0.411765,
15150    b: 0.411765
15151  },
15152  dimgrey: {
15153    r: 0.411765,
15154    g: 0.411765,
15155    b: 0.411765
15156  },
15157  dodgerblue: {
15158    r: 0.117647,
15159    g: 0.564706,
15160    b: 1
15161  },
15162  firebrick: {
15163    r: 0.698039,
15164    g: 0.133333,
15165    b: 0.133333
15166  },
15167  floralwhite: {
15168    r: 1,
15169    g: 0.980392,
15170    b: 0.941176
15171  },
15172  forestgreen: {
15173    r: 0.133333,
15174    g: 0.545098,
15175    b: 0.133333
15176  },
15177  fuchsia: {
15178    r: 1,
15179    g: 0,
15180    b: 1
15181  },
15182  gainsboro: {
15183    r: 0.862745,
15184    g: 0.862745,
15185    b: 0.862745
15186  },
15187  ghostwhite: {
15188    r: 0.972549,
15189    g: 0.972549,
15190    b: 1
15191  },
15192  gold: {
15193    r: 1,
15194    g: 0.843137,
15195    b: 0
15196  },
15197  goldenrod: {
15198    r: 0.854902,
15199    g: 0.647059,
15200    b: 0.12549
15201  },
15202  gray: {
15203    r: 0.501961,
15204    g: 0.501961,
15205    b: 0.501961
15206  },
15207  green: {
15208    r: 0,
15209    g: 0.501961,
15210    b: 0
15211  },
15212  greenyellow: {
15213    r: 0.678431,
15214    g: 1,
15215    b: 0.184314
15216  },
15217  grey: {
15218    r: 0.501961,
15219    g: 0.501961,
15220    b: 0.501961
15221  },
15222  honeydew: {
15223    r: 0.941176,
15224    g: 1,
15225    b: 0.941176
15226  },
15227  hotpink: {
15228    r: 1,
15229    g: 0.411765,
15230    b: 0.705882
15231  },
15232  indianred: {
15233    r: 0.803922,
15234    g: 0.360784,
15235    b: 0.360784
15236  },
15237  indigo: {
15238    r: 0.294118,
15239    g: 0,
15240    b: 0.509804
15241  },
15242  ivory: {
15243    r: 1,
15244    g: 1,
15245    b: 0.941176
15246  },
15247  khaki: {
15248    r: 0.941176,
15249    g: 0.901961,
15250    b: 0.54902
15251  },
15252  lavender: {
15253    r: 0.901961,
15254    g: 0.901961,
15255    b: 0.980392
15256  },
15257  lavenderblush: {
15258    r: 1,
15259    g: 0.941176,
15260    b: 0.960784
15261  },
15262  lawngreen: {
15263    r: 0.486275,
15264    g: 0.988235,
15265    b: 0
15266  },
15267  lemonchiffon: {
15268    r: 1,
15269    g: 0.980392,
15270    b: 0.803922
15271  },
15272  lightblue: {
15273    r: 0.678431,
15274    g: 0.847059,
15275    b: 0.901961
15276  },
15277  lightcoral: {
15278    r: 0.941176,
15279    g: 0.501961,
15280    b: 0.501961
15281  },
15282  lightcyan: {
15283    r: 0.878431,
15284    g: 1,
15285    b: 1
15286  },
15287  lightgoldenrodyellow: {
15288    r: 0.980392,
15289    g: 0.980392,
15290    b: 0.823529
15291  },
15292  lightgray: {
15293    r: 0.827451,
15294    g: 0.827451,
15295    b: 0.827451
15296  },
15297  lightgreen: {
15298    r: 0.564706,
15299    g: 0.933333,
15300    b: 0.564706
15301  },
15302  lightgrey: {
15303    r: 0.827451,
15304    g: 0.827451,
15305    b: 0.827451
15306  },
15307  lightpink: {
15308    r: 1,
15309    g: 0.713725,
15310    b: 0.756863
15311  },
15312  lightsalmon: {
15313    r: 1,
15314    g: 0.627451,
15315    b: 0.478431
15316  },
15317  lightseagreen: {
15318    r: 0.12549,
15319    g: 0.698039,
15320    b: 0.666667
15321  },
15322  lightskyblue: {
15323    r: 0.529412,
15324    g: 0.807843,
15325    b: 0.980392
15326  },
15327  lightslategray: {
15328    r: 0.466667,
15329    g: 0.533333,
15330    b: 0.6
15331  },
15332  lightslategrey: {
15333    r: 0.466667,
15334    g: 0.533333,
15335    b: 0.6
15336  },
15337  lightsteelblue: {
15338    r: 0.690196,
15339    g: 0.768627,
15340    b: 0.870588
15341  },
15342  lightyellow: {
15343    r: 1,
15344    g: 1,
15345    b: 0.878431
15346  },
15347  lime: {
15348    r: 0,
15349    g: 1,
15350    b: 0
15351  },
15352  limegreen: {
15353    r: 0.196078,
15354    g: 0.803922,
15355    b: 0.196078
15356  },
15357  linen: {
15358    r: 0.980392,
15359    g: 0.941176,
15360    b: 0.901961
15361  },
15362  magenta: {
15363    r: 1,
15364    g: 0,
15365    b: 1
15366  },
15367  maroon: {
15368    r: 0.501961,
15369    g: 0,
15370    b: 0
15371  },
15372  mediumaquamarine: {
15373    r: 0.4,
15374    g: 0.803922,
15375    b: 0.666667
15376  },
15377  mediumblue: {
15378    r: 0,
15379    g: 0,
15380    b: 0.803922
15381  },
15382  mediumorchid: {
15383    r: 0.729412,
15384    g: 0.333333,
15385    b: 0.827451
15386  },
15387  mediumpurple: {
15388    r: 0.576471,
15389    g: 0.439216,
15390    b: 0.858824
15391  },
15392  mediumseagreen: {
15393    r: 0.235294,
15394    g: 0.701961,
15395    b: 0.443137
15396  },
15397  mediumslateblue: {
15398    r: 0.482353,
15399    g: 0.407843,
15400    b: 0.933333
15401  },
15402  mediumspringgreen: {
15403    r: 0,
15404    g: 0.980392,
15405    b: 0.603922
15406  },
15407  mediumturquoise: {
15408    r: 0.282353,
15409    g: 0.819608,
15410    b: 0.8
15411  },
15412  mediumvioletred: {
15413    r: 0.780392,
15414    g: 0.082353,
15415    b: 0.521569
15416  },
15417  midnightblue: {
15418    r: 0.098039,
15419    g: 0.098039,
15420    b: 0.439216
15421  },
15422  mintcream: {

15423    r: 0.960784,
15424    g: 1,
15425    b: 0.980392
15426  },
15427  mistyrose: {
15428    r: 1,
15429    g: 0.894118,
15430    b: 0.882353
15431  },
15432  moccasin: {
15433    r: 1,
15434    g: 0.894118,
15435    b: 0.709804
15436  },
15437  navajowhite: {
15438    r: 1,
15439    g: 0.870588,
15440    b: 0.678431
15441  },
15442  navy: {
15443    r: 0,
15444    g: 0,
15445    b: 0.501961
15446  },
15447  oldlace: {
15448    r: 0.992157,
15449    g: 0.960784,
15450    b: 0.901961
15451  },
15452  olive: {
15453    r: 0.501961,
15454    g: 0.501961,
15455    b: 0
15456  },
15457  olivedrab: {
15458    r: 0.419608,
15459    g: 0.556863,
15460    b: 0.137255
15461  },
15462  orange: {
15463    r: 1,
15464    g: 0.647059,
15465    b: 0
15466  },
15467  orangered: {
15468    r: 1,
15469    g: 0.270588,
15470    b: 0
15471  },
15472  orchid: {
15473    r: 0.854902,
15474    g: 0.439216,
15475    b: 0.839216
15476  },
15477  palegoldenrod: {
15478    r: 0.933333,
15479    g: 0.909804,
15480    b: 0.666667
15481  },
15482  palegreen: {
15483    r: 0.596078,
15484    g: 0.984314,
15485    b: 0.596078
15486  },
15487  paleturquoise: {
15488    r: 0.686275,
15489    g: 0.933333,
15490    b: 0.933333
15491  },
15492  palevioletred: {
15493    r: 0.858824,
15494    g: 0.439216,
15495    b: 0.576471
15496  },
15497  papayawhip: {
15498    r: 1,
15499    g: 0.937255,
15500    b: 0.835294
15501  },
15502  peachpuff: {
15503    r: 1,
15504    g: 0.854902,
15505    b: 0.72549
15506  },
15507  peru: {
15508    r: 0.803922,
15509    g: 0.521569,
15510    b: 0.247059
15511  },
15512  pink: {
15513    r: 1,
15514    g: 0.752941,
15515    b: 0.796078
15516  },
15517  plum: {
15518    r: 0.866667,
15519    g: 0.627451,
15520    b: 0.866667
15521  },
15522  powderblue: {
15523    r: 0.690196,
15524    g: 0.878431,
15525    b: 0.901961
15526  },
15527  purple: {
15528    r: 0.501961,
15529    g: 0,
15530    b: 0.501961
15531  },
15532  red: {
15533    r: 1,
15534    g: 0,
15535    b: 0
15536  },
15537  rosybrown: {
15538    r: 0.737255,
15539    g: 0.560784,
15540    b: 0.560784
15541  },
15542  royalblue: {
15543    r: 0.254902,
15544    g: 0.411765,
15545    b: 0.882353
15546  },
15547  saddlebrown: {
15548    r: 0.545098,
15549    g: 0.270588,
15550    b: 0.07451
15551  },
15552  salmon: {
15553    r: 0.980392,
15554    g: 0.501961,
15555    b: 0.447059
15556  },
15557  sandybrown: {
15558    r: 0.956863,
15559    g: 0.643137,
15560    b: 0.376471
15561  },
15562  seagreen: {
15563    r: 0.180392,
15564    g: 0.545098,
15565    b: 0.341176
15566  },
15567  seashell: {
15568    r: 1,
15569    g: 0.960784,
15570    b: 0.933333
15571  },
15572  sienna: {
15573    r: 0.627451,
15574    g: 0.321569,
15575    b: 0.176471
15576  },
15577  silver: {
15578    r: 0.752941,
15579    g: 0.752941,
15580    b: 0.752941
15581  },
15582  skyblue: {
15583    r: 0.529412,
15584    g: 0.807843,
15585    b: 0.921569
15586  },
15587  slateblue: {
15588    r: 0.415686,
15589    g: 0.352941,
15590    b: 0.803922
15591  },
15592  slategray: {
15593    r: 0.439216,
15594    g: 0.501961,
15595    b: 0.564706
15596  },
15597  slategrey: {
15598    r: 0.439216,
15599    g: 0.501961,
15600    b: 0.564706
15601  },
15602  snow: {
15603    r: 1,
15604    g: 0.980392,
15605    b: 0.980392
15606  },
15607  springgreen: {
15608    r: 0,
15609    g: 1,
15610    b: 0.498039
15611  },
15612  steelblue: {
15613    r: 0.27451,
15614    g: 0.509804,
15615    b: 0.705882
15616  },
15617  tan: {
15618    r: 0.823529,
15619    g: 0.705882,
15620    b: 0.54902
15621  },
15622  teal: {
15623    r: 0,
15624    g: 0.501961,
15625    b: 0.501961
15626  },
15627  thistle: {
15628    r: 0.847059,
15629    g: 0.74902,
15630    b: 0.847059
15631  },
15632  tomato: {
15633    r: 1,
15634    g: 0.388235,
15635    b: 0.278431
15636  },
15637  transparent: {
15638    r: 0,
15639    g: 0,
15640    b: 0,
15641    a: 0
15642  },
15643  turquoise: {
15644    r: 0.25098,
15645    g: 0.878431,
15646    b: 0.815686
15647  },
15648  violet: {
15649    r: 0.933333,
15650    g: 0.509804,
15651    b: 0.933333
15652  },
15653  wheat: {
15654    r: 0.960784,
15655    g: 0.870588,
15656    b: 0.701961
15657  },
15658  white: {
15659    r: 1,
15660    g: 1,
15661    b: 1
15662  },
15663  whitesmoke: {
15664    r: 0.960784,
15665    g: 0.960784,
15666    b: 0.960784
15667  },
15668  yellow: {
15669    r: 1,
15670    g: 1,
15671    b: 0
15672  },
15673  yellowgreen: {
15674    r: 0.603922,
15675    g: 0.803922,
15676    b: 0.196078
15677  }
15678};
15679exports.namedColorsConfigs = namedColorsConfigs;
15680
15681},{}],142:[function(require,module,exports){
15682"use strict";
15683
15684Object.defineProperty(exports, "__esModule", {
15685  value: true
15686});
15687exports.defaultPaletteExtractionConfig = void 0;
15688exports.extractPalette = extractPalette;
15689
15690var _colorConverters = require("./color-converters.js");
15691
15692/**
15693 * The default configuration for palette extraction.
15694 * @public
15695 */
15696const defaultPaletteExtractionConfig = {
15697  saturationWeight: 6,
15698  luminosityWeight: 3,
15699  populationWeight: 1,
15700  volumeWeight: 0.1,
15701  constraints: [{
15702    id: "Vibrant",
15703    targetSaturation: 1,
15704    minSaturation: 0.35,
15705    maxSaturation: 1,
15706    targetLuminosity: 0.5,
15707    minLuminosity: 0.3,
15708    maxLuminosity: 0.7
15709  }, {
15710    id: "LightVibrant",
15711    targetSaturation: 1,
15712    minSaturation: 0.35,
15713    maxSaturation: 1,
15714    targetLuminosity: 0.74,
15715    minLuminosity: 0.55,
15716    maxLuminosity: 1
15717  }, {
15718    id: "DarkVibrant",
15719    targetSaturation: 1,
15720    minSaturation: 0.35,
15721    maxSaturation: 1,
15722    targetLuminosity: 0.26,
15723    minLuminosity: 0,
15724    maxLuminosity: 0.45
15725  }, {
15726    id: "Muted",
15727    targetSaturation: 0.3,
15728    minSaturation: 0,
15729    maxSaturation: 0.4,
15730    targetLuminosity: 0.5,
15731    minLuminosity: 0.3,
15732    maxLuminosity: 0.7
15733  }, {
15734    id: "LightMuted",
15735    targetSaturation: 0.3,
15736    minSaturation: 0,
15737    maxSaturation: 0.4,
15738    targetLuminosity: 0.74,
15739    minLuminosity: 0.55,
15740    maxLuminosity: 1
15741  }, {
15742    id: "DarkMuted",
15743    targetSaturation: 0.3,
15744    minSaturation: 0,
15745    maxSaturation: 0.4,
15746    targetLuminosity: 0.26,
15747    minLuminosity: 0,
15748    maxLuminosity: 0.45
15749  }]
15750};
15751/**
15752 * Extracts a palette.
15753 * @param colors - the quantized colors
15754 * @param config - the extraction config
15755 * @public
15756 */
15757
15758exports.defaultPaletteExtractionConfig = defaultPaletteExtractionConfig;
15759

15760function extractPalette(colors, config = defaultPaletteExtractionConfig) {
15761  if (config.constraints.length === 0) {
15762    return [];
15763  }
15764
15765  let totalPixelCount = 0;
15766  let totalVolume = 0;
15767
15768  for (let i = 0; i < colors.length; i++) {
15769    totalPixelCount += colors[i].pixelCount;
15770    totalVolume += colors[i].colorVolume;
15771  }
15772
15773  const retVal = new Array(config.constraints.length);
15774  const bestFitValues = new Array(config.constraints.length);
15775
15776  for (let i = 0; i < retVal.length; i++) {
15777    bestFitValues[i] = 0;
15778    retVal[i] = {
15779      found: false,
15780      constraint: config.constraints[i]
15781    };
15782  }
15783
15784  const totalWeight = config.saturationWeight + config.luminosityWeight + config.populationWeight + config.volumeWeight;
15785
15786  for (let i = 0; i < colors.length; i++) {
15787    const hsl = (0, _colorConverters.rgbToHSL)(colors[i].color);
15788
15789    for (let j = 0; j < config.constraints.length; j++) {
15790      // Check for min and max saturation / luminosity
15791      if (hsl.s >= config.constraints[j].minSaturation && hsl.s <= config.constraints[j].maxSaturation && hsl.l >= config.constraints[j].minLuminosity && hsl.l <= config.constraints[j].maxLuminosity) {
15792        const populationFactor = colors[i].pixelCount / totalPixelCount;
15793        const volumeFactor = colors[i].colorVolume / totalVolume;
15794        const saturationFactor = 1 - Math.abs(hsl.s - config.constraints[j].targetSaturation);
15795        const luminosityFactor = 1 - Math.abs(hsl.l - config.constraints[j].targetLuminosity);
15796        const fitValue = (populationFactor * config.populationWeight + volumeFactor * config.volumeWeight + saturationFactor * config.saturationWeight + luminosityFactor * config.luminosityWeight) / totalWeight;
15797
15798        if (fitValue > bestFitValues[j]) {
15799          // Check if this color is already in use
15800          let dupe = false;
15801
15802          for (let k = 0; k < j; k++) {
15803            if (retVal[k].found && retVal[k].color.color.equalValue(colors[i].color)) {
15804              dupe = true;
15805              break;
15806            }
15807          }
15808
15809          if (!dupe) {
15810            bestFitValues[j] = fitValue;
15811            retVal[j].found = true;
15812            retVal[j].color = colors[i];
15813          }
15814        }
15815      }
15816    }
15817  }
15818
15819  return retVal;
15820}
15821
15822},{"./color-converters.js":126}],143:[function(require,module,exports){
15823"use strict";
15824
15825Object.defineProperty(exports, "__esModule", {
15826  value: true
15827});
15828exports.isColorNamed = isColorNamed;
15829exports.isColorStringHexARGB = isColorStringHexARGB;
15830exports.isColorStringHexRGB = isColorStringHexRGB;
15831exports.isColorStringHexRGBA = isColorStringHexRGBA;
15832exports.isColorStringWebRGB = isColorStringWebRGB;
15833exports.isColorStringWebRGBA = isColorStringWebRGBA;
15834exports.parseColor = parseColor;
15835exports.parseColorHexARGB = parseColorHexARGB;
15836exports.parseColorHexRGB = parseColorHexRGB;
15837exports.parseColorHexRGBA = parseColorHexRGBA;
15838exports.parseColorNamed = parseColorNamed;
15839exports.parseColorWebRGB = parseColorWebRGB;
15840exports.parseColorWebRGBA = parseColorWebRGBA;
15841
15842var _colorRgba = require("./color-rgba-64.js");
15843
15844var _mathUtilities = require("./math-utilities.js");
15845
15846var _namedColors = require("./named-colors.js");
15847
15848// Matches rgb(R, G, B) where R, G, and B are integers [0 - 255]
15849const webRGBRegex = /^rgb\(\s*((?:(?:25[0-5]|2[0-4]\d|1\d\d|\d{1,2})\s*,\s*){2}(?:25[0-5]|2[0-4]\d|1\d\d|\d{1,2})\s*)\)$/i; // Matches rgb(R, G, B, A) where R, G, and B are integers [0 - 255] and A is [0-1] floating
15850
15851const webRGBARegex = /^rgba\(\s*((?:(?:25[0-5]|2[0-4]\d|1\d\d|\d{1,2})\s*,\s*){3}(?:0|1|0?\.\d*)\s*)\)$/i; // Matches #RGB and #RRGGBB, where R, G, and B are [0-9] or [A-F]
15852
15853const hexRGBRegex = /^#((?:[0-9a-f]{6}|[0-9a-f]{3}))$/i; // Matches #RGB and #RRGGBBAA, where R, G, B, and A are [0-9] or [A-F]
15854
15855const hexRGBARegex = /^#((?:[0-9a-f]{8}|[0-9a-f]{4}))$/i;
15856/**
15857 * Test if a color matches #RRGGBB or #RGB
15858 * @public
15859 */
15860
15861function isColorStringHexRGB(raw) {
15862  return hexRGBRegex.test(raw);
15863}
15864/**
15865 * Test if a color matches #AARRGGBB or #ARGB
15866 * @public
15867 */
15868
15869
15870function isColorStringHexARGB(raw) {
15871  return hexRGBARegex.test(raw);
15872}
15873/**
15874 * Test if a color matches #RRGGBBAA or #RGBA
15875 * @public
15876 */
15877
15878
15879function isColorStringHexRGBA(raw) {
15880  return isColorStringHexARGB(raw); // No way to differentiate these two formats, so just use the same test
15881}
15882/**
15883 * Test if a color matches rgb(rr, gg, bb)
15884 * @public
15885 */
15886
15887
15888function isColorStringWebRGB(raw) {
15889  return webRGBRegex.test(raw);
15890}
15891/**
15892 * Test if a color matches rgba(rr, gg, bb, aa)
15893 *
15894 * @public
15895 */
15896
15897
15898function isColorStringWebRGBA(raw) {
15899  return webRGBARegex.test(raw);
15900}
15901/**
15902 * Tests whether a color is in {@link @microsoft/fast-colors#NamedColors}.
15903 * @param raw - the color name to test
15904 * @public
15905 */
15906
15907
15908function isColorNamed(raw) {
15909  return _namedColors.namedColorsConfigs.hasOwnProperty(raw);
15910}
15911/**
15912 * Converts a hexadecimal color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
15913 * @param raw - a color string in the form of "#RRGGBB" or "#RGB"
15914 * @example
15915 * ```ts
15916 * parseColorHexRGBA("#FF0000");
15917 * parseColorHexRGBA("#F00");
15918 * ```
15919 * @public
15920 */
15921
15922
15923function parseColorHexRGB(raw) {
15924  const result = hexRGBRegex.exec(raw);
15925
15926  if (result === null) {
15927    return null;
15928  }
15929
15930  let digits = result[1];
15931
15932  if (digits.length === 3) {
15933    const r = digits.charAt(0);
15934    const g = digits.charAt(1);
15935    const b = digits.charAt(2);
15936    digits = r.concat(r, g, g, b, b);
15937  }
15938
15939  const rawInt = parseInt(digits, 16);
15940
15941  if (isNaN(rawInt)) {
15942    return null;
15943  } // Note the use of >>> rather than >> as we want JS to manipulate these as unsigned numbers
15944
15945
15946  return new _colorRgba.ColorRGBA64((0, _mathUtilities.normalize)((rawInt & 0xff0000) >>> 16, 0, 255), (0, _mathUtilities.normalize)((rawInt & 0x00ff00) >>> 8, 0, 255), (0, _mathUtilities.normalize)(rawInt & 0x0000ff, 0, 255), 1);
15947}
15948/**
15949 * Converts a hexadecimal color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
15950 * @param raw - a color string in the form of "#AARRGGBB" or "#ARGB"
15951 * @example
15952 * ```ts
15953 * parseColorHexRGBA("#AAFF0000");
15954 * parseColorHexRGBA("#AF00");
15955 * ```
15956 * @public
15957 */
15958
15959
15960function parseColorHexARGB(raw) {
15961  const result = hexRGBARegex.exec(raw);
15962
15963  if (result === null) {
15964    return null;
15965  }
15966
15967  let digits = result[1];
15968
15969  if (digits.length === 4) {
15970    const a = digits.charAt(0);
15971    const r = digits.charAt(1);
15972    const g = digits.charAt(2);
15973    const b = digits.charAt(3);
15974    digits = a.concat(a, r, r, g, g, b, b);
15975  }
15976
15977  const rawInt = parseInt(digits, 16);
15978
15979  if (isNaN(rawInt)) {
15980    return null;
15981  } // Note the use of >>> rather than >> as we want JS to manipulate these as unsigned numbers
15982
15983
15984  return new _colorRgba.ColorRGBA64((0, _mathUtilities.normalize)((rawInt & 0x00ff0000) >>> 16, 0, 255), (0, _mathUtilities.normalize)((rawInt & 0x0000ff00) >>> 8, 0, 255), (0, _mathUtilities.normalize)(rawInt & 0x000000ff, 0, 255), (0, _mathUtilities.normalize)((rawInt & 0xff000000) >>> 24, 0, 255));
15985}
15986/**
15987 * Converts a hexadecimal color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
15988 * @param raw - a color string in the form of "#RRGGBBAA" or "#RGBA"
15989 * @example
15990 * ```ts
15991 * parseColorHexRGBA("#FF0000AA");
15992 * parseColorHexRGBA("#F00A");
15993 * ```
15994 * @public
15995 */
15996
15997
15998function parseColorHexRGBA(raw) {
15999  const result = hexRGBARegex.exec(raw);
16000
16001  if (result === null) {
16002    return null;
16003  }
16004
16005  let digits = result[1];
16006
16007  if (digits.length === 4) {
16008    const r = digits.charAt(0);
16009    const g = digits.charAt(1);
16010    const b = digits.charAt(2);
16011    const a = digits.charAt(3);
16012    digits = r.concat(r, g, g, b, b, a, a);
16013  }
16014
16015  const rawInt = parseInt(digits, 16);
16016
16017  if (isNaN(rawInt)) {
16018    return null;
16019  } // Note the use of >>> rather than >> as we want JS to manipulate these as unsigned numbers
16020
16021
16022  return new _colorRgba.ColorRGBA64((0, _mathUtilities.normalize)((rawInt & 0xff000000) >>> 24, 0, 255), (0, _mathUtilities.normalize)((rawInt & 0x00ff0000) >>> 16, 0, 255), (0, _mathUtilities.normalize)((rawInt & 0x0000ff00) >>> 8, 0, 255), (0, _mathUtilities.normalize)(rawInt & 0x000000ff, 0, 255));
16023}
16024/**
16025 * Converts a rgb color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
16026 * @param raw - a color string format "rgba(RR,GG,BB)" where RR,GG,BB are [0,255]
16027 * @example
16028 * ```ts
16029 * parseColorWebRGB("rgba(255, 0, 0");
16030 * ```
16031 * @public
16032 */
16033
16034
16035function parseColorWebRGB(raw) {
16036  const result = webRGBRegex.exec(raw);
16037
16038  if (result === null) {
16039    return null;
16040  }
16041
16042  const split = result[1].split(",");
16043  return new _colorRgba.ColorRGBA64((0, _mathUtilities.normalize)(Number(split[0]), 0, 255), (0, _mathUtilities.normalize)(Number(split[1]), 0, 255), (0, _mathUtilities.normalize)(Number(split[2]), 0, 255), 1);
16044}
16045/**
16046 * Converts a rgba color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
16047 * @param raw - a color string format "rgba(RR,GG,BB,a)" where RR,GG,BB are [0,255] and a is [0,1]
16048 * @example
16049 * ```ts
16050 * parseColorWebRGBA("rgba(255, 0, 0, 1");
16051 * ```
16052 * @public
16053 */
16054
16055
16056function parseColorWebRGBA(raw) {
16057  const result = webRGBARegex.exec(raw);
16058
16059  if (result === null) {
16060    return null;
16061  }
16062
16063  const split = result[1].split(",");
16064
16065  if (split.length === 4) {
16066    return new _colorRgba.ColorRGBA64((0, _mathUtilities.normalize)(Number(split[0]), 0, 255), (0, _mathUtilities.normalize)(Number(split[1]), 0, 255), (0, _mathUtilities.normalize)(Number(split[2]), 0, 255), Number(split[3]));
16067  }
16068
16069  return null;
16070}
16071/**
16072 * Converts a named color to a {@link @microsoft/fast-colors#ColorRGBA64}.
16073 * @param raw - a {@link https://www.w3schools.com/colors/colors_names.asp | CSS color name}.
16074 * @example
16075 * ```ts
16076 * parseColorNamed("red");
16077 * ```
16078 * @public
16079 */
16080
16081
16082function parseColorNamed(raw) {
16083  // const rawLower: typeof raw =  raw.toLowerCase() : raw.toString();
16084  const config = _namedColors.namedColorsConfigs[raw.toLowerCase()];
16085
16086  return config ? new _colorRgba.ColorRGBA64(config.r, config.g, config.b, config.hasOwnProperty("a") ? config.a 

16086: void 0) : null;
16087}
16088/**
16089 *
16090  Expects any of the following and attempts to determine which is being used
16091 * #RRGGBB, #AARRGGBB, rgb(RR,GG,BB) rgba(RR,GG,BB,a),
16092 * or any of the {@link https://www.w3schools.com/colors/colors_names.asp | CSS color names}.
16093 * @param raw - the color string to parse
16094 * @public
16095 */
16096
16097
16098function parseColor(raw) {
16099  const rawLower = raw.toLowerCase();
16100  return isColorStringHexRGB(rawLower) ? parseColorHexRGB(rawLower) : isColorStringHexRGBA(rawLower) ? parseColorHexARGB(rawLower) : isColorStringWebRGB(rawLower) ? parseColorWebRGB(rawLower) : isColorStringWebRGBA(rawLower) ? parseColorWebRGBA(rawLower) : isColorNamed(rawLower) ? parseColorNamed(rawLower) : null;
16101}
16102
16103},{"./color-rgba-64.js":134,"./math-utilities.js":140,"./named-colors.js":141}],144:[function(require,module,exports){
16104"use strict";
16105
16106Object.defineProperty(exports, "__esModule", {
16107  value: true
16108});
16109exports.ImageDataPixelBlob = void 0;
16110exports.loadImageData = loadImageData;
16111
16112var _colorRgba = require("./color-rgba-64.js");
16113
16114/**
16115 * Creates an HTMLImageElement and loads the source argument as its src. Then an HTMLCanvasElement is created and the image is copied into the canvas. The pixel data is then returned from the CanvasRenderingContext2D for that canvas.
16116 *
16117 * @public
16118 */
16119function loadImageData(source) {
16120  return new Promise((resolve, reject) => {
16121    const image = new Image();
16122
16123    if (!image) {
16124      reject("Unable to create image");
16125      return;
16126    }
16127    /* eslint-disable-next-line */
16128
16129
16130    image.onload = e => {
16131      const canvas = document.createElement("canvas");
16132
16133      if (!canvas) {
16134        reject("Unable to create canvas");
16135        return;
16136      }
16137
16138      canvas.width = image.naturalWidth;
16139      canvas.height = image.naturalHeight;
16140      const context = canvas.getContext("2d");
16141
16142      if (!context) {
16143        reject("Unable to create context");
16144        return;
16145      }
16146
16147      context.drawImage(image, 0, 0, canvas.width, canvas.height);
16148      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
16149      resolve(imageData);
16150    };
16151
16152    image.onerror = e => {
16153      reject(e);
16154    };
16155
16156    image.onabort = e => {
16157      reject(e);
16158    };
16159
16160    image.src = source;
16161  });
16162}
16163/**
16164 * A {@link PixelBlob} implementation from an {@link https://developer.mozilla.org/en-US/docs/Web/API/ImageData | ImageData} object.
16165 * @public
16166 * @privateRemarks
16167 * Note that this class and the function loadImageData are not covered by unit tests
16168 * due to not being able to create a valid canvas rendering context or ImageData object
16169 * in the unit test framework. ArrayPixelBlob is used instead in tests needing a PixelBlob.
16170 */
16171
16172
16173class ImageDataPixelBlob {
16174  constructor(image) {
16175    this.getPixel = (x, y) => {
16176      const rgba = this.getPixelRGBA(x, y);
16177      return new _colorRgba.ColorRGBA64(rgba[0] / 255, rgba[1] / 255, rgba[2] / 255, rgba[3] / 255);
16178    };
16179
16180    this.getPixelRGBA = (x, y) => {
16181      if (x < 0 || x >= this.width || y < 0 || y >= this.height) {
16182        throw new Error("Requested pixel is outside of the image bounds");
16183      }
16184
16185      const offset = (y * this.width + x) * 4;
16186      return [this.image.data[offset], this.image.data[offset + 1], this.image.data[offset + 2], this.image.data[offset + 3]];
16187    };
16188
16189    this.image = image;
16190    this.width = image.width;
16191    this.height = image.height;
16192    this.totalPixels = this.width * this.height;
16193  }
16194
16195}
16196
16197exports.ImageDataPixelBlob = ImageDataPixelBlob;
16198
16199},{"./color-rgba-64.js":134}],145:[function(require,module,exports){
16200"use strict";
16201
16202Object.defineProperty(exports, "__esModule", {
16203  value: true
16204});
16205exports.PixelBox = void 0;
16206exports.insertIntoSortedList = insertIntoSortedList;
16207
16208var _colorRgba = require("./color-rgba-64.js");
16209
16210/**
16211 * Adds a newItem to an already sorted list without needing to do a full re-sort.
16212 * Higher sort priority puts the newItem closer to the start (index 0) of the list.
16213 *
16214 * @public
16215 */
16216function insertIntoSortedList(list, newItem, sortPriority) {
16217  if (list.length === 0) {
16218    list.push(newItem);
16219    return;
16220  }
16221
16222  const newItemPriority = sortPriority(newItem); // The new item being either first or last happens often enough that it is 

16222worth special casing
16223  // In cases of a tie the new item should be inserted after existing items of the same priority
16224
16225  if (newItemPriority > sortPriority(list[0])) {
16226    list.unshift(newItem);
16227    return;
16228  }
16229
16230  if (newItemPriority <= sortPriority(list[list.length - 1])) {
16231    list.push(newItem);
16232    return;
16233  }
16234
16235  let newIndex = 0;
16236
16237  for (let i = 0; i < list.length; i++) {
16238    if (newItemPriority > sortPriority(list[i])) {
16239      newIndex = i;
16240      break;
16241    }
16242  }
16243
16244  list.splice(newIndex, 0, newItem);
16245}
16246/**
16247 * Represents a range of colors in RGB color space.
16248 *
16249 * @public
16250 */
16251
16252
16253class PixelBox {
16254  constructor(globalHistogram, minRed, maxRed, minGreen, maxGreen, minBlue, maxBlue) {
16255    /**
16256     * Attempts to divide the range of colors represented by this PixelBox into two smaller PixelBox objects.
16257     * This does not actually cut directly at the median, rather it finds the median then cuts halfway through the larger box on either side of that median. The result is that small areas of color are better represented in the final output.
16258     * Based on the Modified Median Cut Quantization implementation from https://github.com/DanBloomberg/leptonica/blob/master/src/colorquant2.c
16259     */
16260    this.modifiedMedianCut = () => {
16261      if (this.rangeRed === 1 && this.rangeGreen === 1 && this.rangeBlue === 1) {
16262        // This box is already sliced as finely as possible
16263        return [this, null];
16264      }
16265
16266      let CutAxis;
16267
16268      (function (CutAxis) {
16269        CutAxis[CutAxis["Red"] = 0] = "Red";
16270        CutAxis[CutAxis["Green"] = 1] = "Green";
16271        CutAxis[CutAxis["Blue"] = 2] = "Blue";
16272      })(CutAxis || (CutAxis = {}));
16273
16274      let axis;
16275      let axisRange;
16276
16277      if (this.rangeRed >= this.rangeGreen && this.rangeRed >= this.rangeBlue) {
16278        axis = CutAxis.Red;
16279        axisRange = this.rangeRed;
16280      } else if (this.rangeGreen >= this.rangeRed && this.rangeGreen >= this.rangeBlue) {
16281        axis = CutAxis.Green;
16282        axisRange = this.rangeGreen;
16283      } else {
16284        axis = CutAxis.Blue;
16285        axisRange = this.rangeBlue;
16286      }
16287
16288      const partialSum = new Array(axisRange);
16289      const lookAheadSum = new Array(axisRange);
16290      let retLeft = null;
16291      let retRight = null;
16292      let axisTotal = 0; // This does not actually cut directly at the median, rather it finds the median then
16293      // cuts halfway through the larger box on either side of that median
16294      // The result is that small areas of color are better represented in the final output
16295
16296      if (axis === CutAxis.Red) {
16297        // Calculate partial sums
16298        for (let r = this.minRed; r <= this.maxRed; r++) {
16299          let sum = 0;
16300
16301          for (let g = this.minGreen; g <= this.maxGreen; g++) {
16302            for (let b = this.minBlue; b <= this.maxBlue; b++) {
16303              sum += this.globalHistogram.getHistogramValue(r, g, b);
16304            }
16305          }
16306
16307          axisTotal += sum;
16308          partialSum[r - this.minRed] = axisTotal;
16309        }
16310
16311        for (let i = 0; i < partialSum.length; i++) {
16312          lookAheadSum[i] = axisTotal - partialSum[i];
16313        } // Find the cut point based on partial sums vs total
16314
16315
16316        for (let r = this.minRed; r <= this.maxRed; r++) {
16317          if (partialSum[r - this.minRed] >= axisTotal / 2) {
16318            const left = r - this.minRed;
16319            const right = this.maxRed - r;
16320            let cut;
16321
16322            if (left <= right) {
16323              cut = Math.min(this.maxRed - 1, Math.floor(r + right / 2));
16324            } else {
16325              cut = Math.max(this.minRed, Math.floor(r - 1 - left / 2));
16326            } // Adjust the cut point if either side has 0 pixelCount
16327
16328
16329            while (partialSum[cut - this.minRed] <= 0 && cut < this.maxRed - 1) {
16330              cut++;
16331            }
16332
16333            let lookAhead = lookAheadSum[cut - this.minRed];
16334
16335            while (lookAhead === 0 && cut > this.minRed && partialSum[cut - this.minRed - 1] !== 0) {
16336              cut--;
16337              lookAhead = lookAheadSum[cut - this.minRed];
16338            }
16339
16340            retLeft = new PixelBox(this.globalHistogram, this.minRed, cut, this.minGreen, this.maxGreen, this.minBlue, this.maxBlue);
16341            retRight = new PixelBox(this.globalHistogram, cut + 1, this.maxRed, this.minGreen, this.maxGreen, this.minBlue, this.maxBlue);
16342            break;
16343          }
16344        }
16345      } else if (axis === CutAxis.Green) {
16346        // Calculate partial sums
16347        for (let g = this.minGreen; g <= this.maxGreen; g++) {
16348          let sum = 0;
16349
16350          for (let r = this.minRed; r <= this.maxRed; r++) {
16351            for (let b = this.minBlue; b <= this.maxBlue; b++) {
16352              sum += this.globalHistogram.getHistogramValue(r, g, b);
16353            }
16354          }
16355
16356          axisTotal += sum;
16357          partialSum[g - this.minGreen] = axisTotal;
16358        }
16359
16360        for (let i = 0; i < partialSum.length; i++) {
16361          lookAheadSum[i] = axisTotal - partialSum[i];
16362        } // Find the cut point based on partial sums vs total
16363
16364
16365        for (let g = this.minGreen; g <= this.maxGreen; g++) {
16366          if (partialSum[g - this.minGreen] >= axisTotal / 2) {
16367            const left = g - this.minGreen;
16368            const right = this.maxGreen - g;
16369            let cut;
16370
16371            if (left <= right) {
16372              cut = Math.min(this.maxGreen - 1, Math.floor(g + right / 2));
16373            } else {
16374              cut = Math.max(this.minGreen, Math.floor(g - 1 - left / 2));
16375            } // Adjust the cut point if either side has 0 pixelCount
16376
16377
16378            while (partialSum[cut - this.minGreen] <= 0 && cut < this.maxGreen - 1) {
16379              cut++;
16380            }
16381
16382            let lookAhead = lookAheadSum[cut - this.minGreen];
16383
16384            while (lookAhead === 0 && cut > this.minGreen && partialSum[cut - this.minGreen - 1] !== 0) {
16385              cut--;
16386              lookAhead = lookAheadSum[cut - this.minGreen];
16387            }
16388
16389            retLeft = new PixelBox(this.globalHistogram, this.minRed, this.maxRed, this.minGreen, cut, this.minBlue, this.maxBlue);
16390            retRight = new PixelBox(this.globalHistogram, this.minRed, this.maxRed, cut + 1, this.maxGreen, this.minBlue, this.maxBlue);
16391            break;
16392          }
16393        }
16394      } else {
16395        // Calculate partial sums
16396        for (let b = this.minBlue; b <= this.maxBlue; b++) {
16397          let sum = 0;
16398
16399          for (let r = this.minRed; r <= this.maxRed; r++) {
16400            for (let g = this.minGreen; g <= this.maxGreen; g++) {
16401              sum += this.globalHistogram.getHistogramValue(r, g, b);
16402            }
16403          }
16404
16405          axisTotal += sum;
16406          partialSum[b - this.minBlue] = axisTotal;
16407        }
16408
16409        for (let i = 0; i < partialSum.length; i++) {
16410          lookAheadSum[i] = axisTotal - partialSum[i];
16411        } // Find the cut point based on partial sums vs total
16412
16413
16414        for (let b = this.minBlue; b <= this.maxBlue; b++) {
16415          if (partialSum[b - this.minBlue] >= axisTotal / 2) {
16416            const left = b - this.minBlue;
16417            const right = this.maxBlue - b;
16418            let cut;
16419
16420            if (left <= right) {
16421              cut = Math.min(this.maxBlue - 1, Math.floor(b + right / 2));
16422            } else {
16423              cut = Math.max(this.minBlue, Math.floor(b - 1 - left / 2));
16424            } // Adjust the cut point if either side has 0 pixelCount
16425
16426
16427            while (partialSum[cut - this.minBlue] <= 0 && cut < this.maxBlue - 1) {
16428              cut++;
16429            }
16430
16431            let lookAhead = lookAheadSum[cut - this.minBlue];
16432
16433            while (lookAhead === 0 && cut > this.minBlue && partialSum[cut - this.minBlue - 1] !== 0) {
16434              cut--;
16435              lookAhead = lookAheadSum[cut - this.minBlue];
16436            }
16437
16438            retLeft = new PixelBox(this.globalHistogram, this.minRed, this.maxRed, this.minGreen, this.maxGreen, this.minBlue, cut);
16439            retRight = new PixelBox(this.globalHistogram, this.minRed, this.maxRed, this.minGreen, this.maxGreen, cut + 1, this.maxBlue);
16440            break;
16441          }
16442        }
16443      }
16444
16445      return [retLeft, retRight];
16446    };
16447
16448    this.pixelCount = 0;
16449    this.globalHistogram = globalHistogram;
16450    this.minRed = minRed;
16451    this.maxRed = maxRed;
16452    this.minGreen = minGreen;
16453    this.maxGreen = maxGreen;
16454    this.minBlue = minBlue;
16455    this.maxBlue = maxBlue;
16456    this.rangeRed = this.maxRed - this.minRed + 1;
16457    this.rangeGreen = this.maxGreen - this.minGreen + 1;
16458    this.rangeBlue = this.maxBlue - this.minBlue + 1;
16459    this.colorVolume = this.rangeRed * this.rangeGreen * this.rangeBlue;
16460    let redSum = 0;
16461    let greenSum = 0;
16462    let blueSum = 0;
16463    const factor = 1 << 8 - this.globalHistogram.significantBits;
16464
16465    for (let r = minRed; r <= maxRed; r++) {
16466      for (let g = minGreen; g <= maxGreen; g++) {
16467        for (let b = minBlue; b <= maxBlue; b++) {
16468          const histoValue = this.globalHistogram.getHistogramValue(r, g, b);
16469          this.pixelCount += histoValue;
16470          redSum += histoValue * (r + 0.5) * factor;
16471          greenSum += histoValue * (g + 0.5) * factor;
16472          blueSum += histoValue * (b + 0.5) * factor;
16473        }
16474      }
16475    }
16476
16477    if (this.pixelCount === 0) {
16478      this.averageColor = new _colorRgba.ColorRGBA64(factor * ((minRed + maxRed + 1) / 2) / 255, factor * ((minGreen + maxGreen + 1) / 2) / 255, factor * ((minBlue + maxBlue + 1) / 2) / 255, 1);
16479    } else {
16480      this.averageColor = new _colorRgba.ColorRGBA64(redSum / this.pixelCount / 255, greenSum / this.pixelCount / 255, blueSum / this.pixelCount / 255, 1);
16481    }
16482  }
16483
16484}
16485
16486exports.PixelBox = PixelBox;
16487
16488},{"./color-rgba-64.js":134}],146:[function(require,module,exports){
16489"use strict";
16490
16491Object.defineProperty(exports, "__esModule", {
16492  value: true
16493});
16494exports.AttributeDefinition = exports.AttributeConfiguration = void 0;
16495exports.attr = attr;
16496exports.nullableNumberConverter = exports.booleanConverter = void 0;
16497
16498var _observable = require("../observation/observable.js");
16499
16500var _dom = require("../dom.js");
16501
16502var _platform = require("../platform.js");
16503
16504/**
16505 * Metadata used to configure a custom attribute's behavior.
16506 * @public
16507 */
16508const AttributeConfiguration = Object.freeze({
16509  /**
16510   * Locates all attribute configurations associated with a type.
16511   */
16512  locate: (0, _platform.createMetadataLocator)()
16513});
16514/**
16515 * A {@link ValueConverter} that converts to and from `boolean` values.
16516 * @remarks
16517 * Used automatically when the `boolean` {@link AttributeMode} is selected.
16518 * @public
16519 */
16520
16521exports.AttributeConfiguration = AttributeConfiguration;
16522const booleanConverter = {
16523  toView(value) {
16524    return value ? "true" : "false";
16525  },
16526
16527  fromView(value) {

16528    if (value === null || value === void 0 || value === "false" || value === false || value === 0) {
16529      return false;
16530    }
16531
16532    return true;
16533  }
16534
16535};
16536/**
16537 * A {@link ValueConverter} that converts to and from `number` values.
16538 * @remarks
16539 * This converter allows for nullable numbers, returning `null` if the
16540 * input was `null`, `undefined`, or `NaN`.
16541 * @public
16542 */
16543
16544exports.booleanConverter = booleanConverter;
16545const nullableNumberConverter = {
16546  toView(value) {
16547    if (value === null || value === undefined) {
16548      return null;
16549    }
16550
16551    const number = value * 1;
16552    return isNaN(number) ? null : number.toString();
16553  },
16554
16555  fromView(value) {
16556    if (value === null || value === undefined) {
16557      return null;
16558    }
16559
16560    const number = value * 1;
16561    return isNaN(number) ? null : number;
16562  }
16563
16564};
16565/**
16566 * An implementation of {@link Accessor} that supports reactivity,
16567 * change callbacks, attribute reflection, and type conversion for
16568 * custom elements.
16569 * @public
16570 */
16571
16572exports.nullableNumberConverter = nullableNumberConverter;
16573
16574class AttributeDefinition {
16575  /**
16576   * Creates an instance of AttributeDefinition.
16577   * @param Owner - The class constructor that owns this attribute.
16578   * @param name - The name of the property associated with the attribute.
16579   * @param attribute - The name of the attribute in HTML.
16580   * @param mode - The {@link AttributeMode} that describes the behavior of this attribute.
16581   * @param converter - A {@link ValueConverter} that integrates with the property getter/setter
16582   * to convert values to and from a DOM string.
16583   */
16584  constructor(Owner, name, attribute = name.toLowerCase(), mode = "reflect", converter) {
16585    this.guards = new Set();
16586    this.Owner = Owner;
16587    this.name = name;
16588    this.attribute = attribute;
16589    this.mode = mode;
16590    this.converter = converter;
16591    this.fieldName = `_${name}`;
16592    this.callbackName = `${name}Changed`;
16593    this.hasCallback = this.callbackName in Owner.prototype;
16594
16595    if (mode === "boolean" && converter === void 0) {
16596      this.converter = booleanConverter;
16597    }
16598  }
16599  /**
16600   * Sets the value of the attribute/property on the source element.
16601   * @param source - The source element to access.
16602   * @param value - The value to set the attribute/property to.
16603   */
16604
16605
16606  setValue(source, newValue) {
16607    const oldValue = source[this.fieldName];
16608    const converter = this.converter;
16609
16610    if (converter !== void 0) {
16611      newValue = converter.fromView(newValue);
16612    }
16613
16614    if (oldValue !== newValue) {
16615      source[this.fieldName] = newValue;
16616      this.tryReflectToAttribute(source);
16617
16618      if (this.hasCallback) {
16619        source[this.callbackName](oldValue, newValue);
16620      }
16621
16622      source.$fastController.notify(this.name);
16623    }
16624  }
16625  /**
16626   * Gets the value of the attribute/property on the source element.
16627   * @param source - The source element to access.
16628   */
16629
16630
16631  getValue(source) {
16632    _observable.Observable.track(source, this.name);
16633
16634    return source[this.fieldName];
16635  }
16636  /** @internal */
16637
16638
16639  onAttributeChangedCallback(element, value) {
16640    if (this.guards.has(element)) {
16641      return;
16642    }
16643
16644    this.guards.add(element);
16645    this.setValue(element, value);
16646    this.guards.delete(element);
16647  }
16648
16649  tryReflectToAttribute(element) {
16650    const mode = this.mode;
16651    const guards = this.guards;
16652
16653    if (guards.has(element) || mode === "fromView") {
16654      return;
16655    }
16656
16657    _dom.DOM.queueUpdate(() => {
16658      guards.add(element);
16659      const latestValue = element[this.fieldName];
16660
16661      switch (mode) {
16662        case "reflect":
16663          const converter = this.converter;
16664
16665          _dom.DOM.setAttribute(element, this.attribute, converter !== void 0 ? converter.toView(latestValue) : latestValue);
16666
16667          break;
16668
16669        case "boolean":
16670          _dom.DOM.setBooleanAttribute(element, this.attribute, latestValue);
16671
16672          break;
16673      }
16674
16675      guards.delete(element);
16676    });
16677  }
16678  /**
16679   * Collects all attribute definitions associated with the owner.
16680   * @param Owner - The class constructor to collect attribute for.
16681   * @param attributeLists - Any existing attributes to collect and merge with those associated with the owner.
16682   * @internal
16683   */
16684
16685
16686  static collect(Owner, ...attributeLists) {
16687    const attributes = [];
16688    attributeLists.push(AttributeConfiguration.locate(Owner));
16689
16690    for (let i = 0, ii = attributeLists.length; i < ii; ++i) {
16691      const list = attributeLists[i];
16692
16693      if (list === void 0) {
16694        continue;
16695      }
16696
16697      for (let j = 0, jj = list.length; j < jj; ++j) {
16698        const config = list[j];
16699
16700        if (typeof config === "string") {
16701          attributes.push(new AttributeDefinition(Owner, config));
16702        } else {
16703          attributes.push(new AttributeDefinition(Owner, config.property, config.attribute, config.mode, config.converter));
16704        }
16705      }
16706    }
16707
16708    return attributes;
16709  }
16710
16711}
16712
16713exports.AttributeDefinition = AttributeDefinition;
16714
16715function attr(configOrTarget, prop) {
16716  let config;
16717
16718  function decorator($target, $prop) {
16719    if (arguments.length > 1) {
16720      // Non invocation:
16721      // - @attr

16722      // Invocation with or w/o opts:
16723      // - @attr()
16724      // - @attr({...opts})
16725      config.property = $prop;
16726    }
16727
16728    AttributeConfiguration.locate($target.constructor).push(config);
16729  }
16730
16731  if (arguments.length > 1) {
16732    // Non invocation:
16733    // - @attr
16734    config = {};
16735    decorator(configOrTarget, prop);
16736    return;
16737  } // Invocation with or w/o opts:
16738  // - @attr()
16739  // - @attr({...opts})
16740
16741
16742  config = configOrTarget === void 0 ? {} : configOrTarget;
16743  return decorator;
16744}
16745
16746},{"../dom.js":150,"../observation/observable.js":156,"../platform.js":157}],147:[function(require,module,exports){
16747"use strict";
16748
16749Object.defineProperty(exports, "__esModule", {
16750  value: true
16751});
16752exports.Controller = void 0;
16753
16754var _dom = require("../dom.js");
16755
16756var _notifier = require("../observation/notifier.js");
16757
16758var _observable = require("../observation/observable.js");
16759
16760var _fastDefinitions = require("./fast-definitions.js");
16761
16762const shadowRoots = new WeakMap();
16763const defaultEventOptions = {
16764  bubbles: true,
16765  composed: true,
16766  cancelable: true
16767};
16768
16769function getShadowRoot(element) {
16770  return element.shadowRoot || shadowRoots.get(element) || null;
16771}
16772/**
16773 * Controls the lifecycle and rendering of a `FASTElement`.
16774 * @public
16775 */
16776
16777
16778class Controller extends _notifier.PropertyChangeNotifier {
16779  /**
16780   * Creates a Controller to control the specified element.
16781   * @param element - The element to be controlled by this controller.
16782   * @param definition - The element definition metadata that instructs this
16783   * controller in how to handle rendering and other platform integrations.
16784   * @internal
16785   */
16786  constructor(element, definition) {
16787    super(element);
16788    this.boundObservables = null;
16789    this.behaviors = null;
16790    this.needsInitialization = true;
16791    this._template = null;
16792    this._styles = null;
16793    this._isConnected = false;
16794    /**

16795     * This allows Observable.getNotifier(...) to return the Controller
16796     * when the notifier for the Controller itself is being requested. The
16797     * result is that the Observable system does not need to create a separate
16798     * instance of Notifier for observables on the Controller. The component and
16799     * the controller will now share the same notifier, removing one-object construct
16800     * per web component instance.
16801     */
16802
16803    this.$fastController = this;
16804    /**
16805     * The view associated with the custom element.
16806     * @remarks
16807     * If `null` then the element is managing its own rendering.
16808     */
16809
16810    this.view = null;
16811    this.element = element;
16812    this.definition = definition;
16813    const shadowOptions = definition.shadowOptions;
16814
16815    if (shadowOptions !== void 0) {
16816      const shadowRoot = element.attachShadow(shadowOptions);
16817
16818      if (shadowOptions.mode === "closed") {
16819        shadowRoots.set(element, shadowRoot);
16820      }
16821    } // Capture any observable values that were set by the binding engine before
16822    // the browser upgraded the element. Then delete the property since it will
16823    // shadow the getter/setter that is required to make the observable operate.
16824    // Later, in the connect callback, we'll re-apply the values.
16825
16826
16827    const accessors = _observable.Observable.getAccessors(element);
16828
16829    if (accessors.length > 0) {
16830      const boundObservables = this.boundObservables = Object.create(null);
16831
16832      for (let i = 0, ii = accessors.length; i < ii; ++i) {
16833        const propertyName = accessors[i].name;
16834        const value = element[propertyName];
16835
16836        if (value !== void 0) {
16837          delete element[propertyName];
16838          boundObservables[propertyName] = value;
16839        }
16840      }
16841    }
16842  }
16843  /**
16844   * Indicates whether or not the custom element has been
16845   * connected to the document.
16846   */
16847
16848
16849  get isConnected() {
16850    _observable.Observable.track(this, "isConnected");
16851
16852    return this._isConnected;
16853  }
16854
16855  setIsConnected(value) {
16856    this._isConnected = value;
16857
16858    _observable.Observable.notify(this, "isConnected");
16859  }
16860  /**
16861   * Gets/sets the template used to render the component.
16862   * @remarks
16863   * This value can only be accurately read after connect but can be set at any time.
16864   */
16865
16866
16867  get template() {
16868    return this._template;
16869  }
16870
16871  set template(value) {
16872    if (this._template === value) {
16873      return;
16874    }
16875
16876    this._template = value;
16877
16878    if (!this.needsInitialization) {
16879      this.renderTemplate(value);
16880    }
16881  }
16882  /**
16883   * Gets/sets the primary styles used for the component.
16884   * @remarks
16885   * This value can only be accurately read after connect but can be set at any time.
16886   */
16887
16888
16889  get styles() {
16890    return this._styles;
16891  }
16892
16893  set styles(value) {
16894    if (this._styles === value) {
16895      return;
16896    }
16897
16898    if (this._styles !== null) {
16899      this.removeStyles(this._styles);
16900    }
16901
16902    this._styles = value;
16903
16904    if (!this.needsInitialization && value !== null) {
16905      this.addStyles(value);
16906    }
16907  }
16908  /**
16909   * Adds styles to this element. Providing an HTMLStyleElement will attach the element instance to the shadowRoot.
16910   * @param styles - The styles to add.
16911   */
16912
16913
16914  addStyles(styles) {
16915    const target = getShadowRoot(this.element) || this.element.getRootNode();
16916
16917    if (styles instanceof HTMLStyleElement) {
16918      target.append(styles);
16919    } else if (!styles.isAttachedTo(target)) {
16920      const sourceBehaviors = styles.behaviors;
16921      styles.addStylesTo(target);
16922
16923      if (sourceBehaviors !== null) {
16924        this.addBehaviors(sourceBehaviors);
16925      }
16926    }
16927  }
16928  /**
16929   * Removes styles from this element. Providing an HTMLStyleElement will detach the element instance from the shadowRoot.
16930   * @param styles - the styles to remove.
16931   */
16932
16933
16934  removeStyles(styles) {
16935    const target = getShadowRoot(this.element) || this.element.getRootNode();
16936
16937    if (styles instanceof HTMLStyleElement) {
16938      target.removeChild(styles);
16939    } else if (styles.isAttachedTo(target)) {
16940      const sourceBehaviors = styles.behaviors;
16941      styles.removeStylesFrom(target);
16942
16943      if (sourceBehaviors !== null) {
16944        this.removeBehaviors(sourceBehaviors);
16945      }
16946    }
16947  }
16948  /**
16949   * Adds behaviors to this element.
16950   * @param behaviors - The behaviors to add.
16951   */
16952
16953
16954  addBehaviors(behaviors) {
16955    const targetBehaviors = this.behaviors || (this.behaviors = new Map());
16956    const length = behaviors.length;
16957    const behaviorsToBind = [];
16958
16959    for (let i = 0; i < length; ++i) {
16960      const behavior = behaviors[i];
16961
16962      if (targetBehaviors.has(behavior)) {
16963        targetBehaviors.set(behavior, targetBehaviors.get(behavior) + 1);
16964      } else {
16965        targetBehaviors.set(behavior, 1);
16966        behaviorsToBind.push(behavior);
16967      }
16968    }
16969
16970    if (this._isConnected) {
16971      const element = this.element;
16972
16973      for (let i = 0; i < behaviorsToBind.length; ++i) {
16974        behaviorsToBind[i].bind(element, _observable.defaultExecutionContext);
16975      }
16976    }
16977  }
16978  /**
16979   * Removes behaviors from this element.
16980   * @param behaviors - The behaviors to remove.
16981   * @param force - Forces unbinding of behaviors.
16982   */
16983
16984
16985  removeBehaviors(behaviors, force = false) {
16986    const targetBehaviors = this.behaviors;
16987
16988    if (targetBehaviors === null) {
16989      return;
16990    }
16991
16992    const length = behaviors.length;
16993    const behaviorsToUnbind = [];
16994
16995    for (let i = 0; i < length; ++i) {
16996      const behavior = behaviors[i];
16997
16998      if (targetBehaviors.has(behavior)) {
16999        const count = targetBehaviors.get(behavior) - 1;
17000        count === 0 || force ? targetBehaviors.delete(behavior) && behaviorsToUnbind.push(behavior) : targetBehaviors.set(behavior, count);
17001      }
17002    }
17003
17004    if (this._isConnected) {
17005      const element = this.element;
17006
17007      for (let i = 0; i < behaviorsToUnbind.length; ++i) {
17008        behaviorsToUnbind[i].unbind(element);
17009      }
17010    }
17011  }
17012  /**
17013   * Runs connected lifecycle behavior on the associated element.
17014   */
17015
17016
17017  onConnectedCallback() {
17018    if (this._isConnected) {
17019      return;
17020    }
17021
17022    const element = this.element;
17023
17024    if (this.needsInitialization) {
17025      this.finishInitialization();
17026    } else if (this.view !== null) {
17027      this.view.bind(element, _observable.defaultExecutionContext);
17028    }
17029
17030    const behaviors = this.behaviors;
17031
17032    if (behaviors !== null) {
17033      for (const [behavior] of behaviors) {
17034        behavior.bind(element, _observable.defaultExecutionContext);
17035      }
17036    }
17037
17038    this.setIsConnected(true);
17039  }
17040  /**
17041   * Runs disconnected lifecycle behavior on the associated element.
17042   */
17043
17044
17045  onDisconnectedCallback() {
17046    if (!this._isConnected) {
17047      return;
17048    }
17049
17050    this.setIsConnected(false);
17051    const view = this.view;
17052
17053    if (view !== null) {
17054      view.unbind();
17055    }
17056
17057    const behaviors = this.behaviors;
17058
17059    if (behaviors !== null) {
17060      const element = this.element;
17061
17062      for (const [behavior] of behaviors) {
17063        behavior.unbind(element);
17064      }
17065    }
17066  }
17067  /**
17068   * Runs the attribute changed callback for the associated element.
17069   * @param name - The name of the attribute that changed.
17070   * @param oldValue - The previous value of the attribute.
17071   * @param newValue - The new value of the attribute.
17072   */
17073
17074
17075  onAttributeChangedCallback(name, oldValue, newValue) {
17076    const attrDef = this.definition.attributeLookup[name];
17077
17078    if (attrDef !== void 0) {
17079      attrDef.onAttributeChangedCallback(this.element, newValue);
17080    }
17081  }
17082  /**
17083   * Emits a custom HTML event.
17084   * @param type - The type name of the event.
17085   * @param detail - The event detail object to send with the event.
17086   * @param options - The event options. By default bubbles and composed.
17087   * @remarks
17088   * Only emits events if connected.
17089   */
17090
17091
17092  emit(type, detail, options) {
17093    if (this._isConnected) {
17094      return this.element.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({
17095        detail
17096      }, defaultEventOptions), options)));
17097    }
17098
17099    return false;

17100  }
17101
17102  finishInitialization() {
17103    const element = this.element;
17104    const boundObservables = this.boundObservables; // If we have any observables that were bound, re-apply their values.
17105
17106    if (boundObservables !== null) {
17107      const propertyNames = Object.keys(boundObservables);
17108
17109      for (let i = 0, ii = propertyNames.length; i < ii; ++i) {
17110        const propertyName = propertyNames[i];
17111        element[propertyName] = boundObservables[propertyName];
17112      }
17113
17114      this.boundObservables = null;
17115    }
17116
17117    const definition = this.definition; // 1. Template overrides take top precedence.
17118
17119    if (this._template === null) {
17120      if (this.element.resolveTemplate) {
17121        // 2. Allow for element instance overrides next.
17122        this._template = this.element.resolveTemplate();
17123      } else if (definition.template) {
17124        // 3. Default to the static definition.
17125        this._template = definition.template || null;
17126      }
17127    } // If we have a template after the above process, render it.
17128    // If there's no template, then the element author has opted into
17129    // custom rendering and they will managed the shadow root's content themselves.
17130
17131
17132    if (this._template !== null) {
17133      this.renderTemplate(this._template);
17134    } // 1. Styles overrides take top precedence.
17135
17136
17137    if (this._styles === null) {
17138      if (this.element.resolveStyles) {
17139        // 2. Allow for element instance overrides next.
17140        this._styles = this.element.resolveStyles();
17141      } else if (definition.styles) {
17142        // 3. Default to the static definition.
17143        this._styles = definition.styles || null;
17144      }
17145    } // If we have styles after the above process, add them.
17146
17147
17148    if (this._styles !== null) {
17149      this.addStyles(this._styles);
17150    }
17151
17152    this.needsInitialization = false;
17153  }
17154
17155  renderTemplate(template) {
17156    const element = this.element; // When getting the host to render to, we start by looking
17157    // up the shadow root. If there isn't one, then that means
17158    // we're doing a Light DOM render to the element's direct children.
17159
17160    const host = getShadowRoot(element) || element;
17161
17162    if (this.view !== null) {
17163      // If there's already a view, we need to unbind and remove through dispose.
17164      this.view.dispose();
17165      this.view = null;
17166    } else if (!this.needsInitialization) {
17167      // If there was previous custom rendering, we need to clear out the host.
17168      _dom.DOM.removeChildNodes(host);
17169    }
17170
17171    if (template) {
17172      // If a new template was provided, render it.
17173      this.view = template.render(element, host, element);
17174    }
17175  }
17176  /**
17177   * Locates or creates a controller for the specified element.
17178   * @param element - The element to return the controller for.
17179   * @remarks
17180   * The specified element must have a {@link FASTElementDefinition}
17181   * registered either through the use of the {@link customElement}
17182   * decorator or a call to `FASTElement.define`.
17183   */
17184
17185
17186  static forCustomElement(element) {
17187    const controller = element.$fastController;
17188
17189    if (controller !== void 0) {
17190      return controller;
17191    }
17192
17193    const definition = _fastDefinitions.FASTElementDefinition.forType(element.constructor);
17194
17195    if (definition === void 0) {
17196      throw new Error("Missing FASTElement definition.");
17197    }
17198
17199    return element.$fastController = new Controller(element, definition);
17200  }
17201
17202}
17203
17204exports.Controller = Controller;
17205
17206},{"../dom.js":150,"../observation/notifier.js":155,"../observation/observable.js":156,"./fast-definitions.js":148}],148:[function(require,module,exports){
17207"use strict";
17208
17209Object.defineProperty(exports, "__esModule", {
17210  value: true
17211});
17212exports.FASTElementDefinition = void 0;
17213
17214var _platform = require("../platform.js");
17215
17216var _observable = require("../observation/observable.js");
17217
17218var _elementStyles = require("../styles/element-styles.js");
17219
17220var _attributes = require("./attributes.js");
17221
17222const defaultShadowOptions = {
17223  mode: "open"
17224};
17225const defaultElementOptions = {};
17226
17227const fastRegistry = _platform.FAST.getById(4
17228/* elementRegistry */
17229, () => {
17230  const typeToDefinition = new Map();
17231  return Object.freeze({
17232    register(definition) {
17233      if (typeToDefinition.has(definition.type)) {
17234        return false;

vendor: 1,972 bytes, lines 17235-17290

17235      }
17236
17237      typeToDefinition.set(definition.type, definition);
17238      return true;
17239    },
17240
17241    getByType(key) {
17242      return typeToDefinition.get(key);
17243    }
17244
17245  });
17246});
17247/**
17248 * Defines metadata for a FASTElement.
17249 * @public
17250 */
17251
17252
17253class FASTElementDefinition {
17254  /**
17255   * Creates an instance of FASTElementDefinition.
17256   * @param type - The type this definition is being created for.
17257   * @param nameOrConfig - The name of the element to define or a config object
17258   * that describes the element to define.
17259   */
17260  constructor(type, nameOrConfig = type.definition) {
17261    if (typeof nameOrConfig === "string") {
17262      nameOrConfig = {
17263        name: nameOrConfig
17264      };
17265    }
17266
17267    this.type = type;
17268    this.name = nameOrConfig.name;
17269    this.template = nameOrConfig.template;
17270
17271    const attributes = _attributes.AttributeDefinition.collect(type, nameOrConfig.attributes);
17272
17273    const observedAttributes = new Array(attributes.length);
17274    const propertyLookup = {};
17275    const attributeLookup = {};
17276
17277    for (let i = 0, ii = attributes.length; i < ii; ++i) {
17278      const current = attributes[i];
17279      observedAttributes[i] = current.attribute;
17280      propertyLookup[current.name] = current;
17281      attributeLookup[current.attribute] = current;
17282    }
17283
17284    this.attributes = attributes;
17285    this.observedAttributes = observedAttributes;
17286    this.propertyLookup = propertyLookup;
17287    this.attributeLookup = attributeLookup;
17288    this.shadowOptions = nameOrConfig.shadowOptions === void 0 ? defaultShadowOptions : nameOrConfig.shadowOptions === null ? void 0 : Object.assign(Object.assign({}, defaultShadowOptions), nameOrConfig.shadowOptions);
17289    this.elementOptions = nameOrConfig.elementOptions === void 0 ? defaultElementOptions : Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);
17290    this.styles = nameOrConfig.styles === void 0 ? void 0 : Array.isArray(nameOrConfig.styles) ? _elementStyles.ElementStyles.create(nameOrConfig.styles) : n

17290ameOrConfig.styles instanceof _elementStyles.ElementStyles ? nameOrConfig.styles : _elementStyles.ElementStyles.create([nameOrConfig.styles]);
17291  }
17292  /**
17293   * Indicates if this element has been defined in at least one registry.
17294   */
17295
17296
17297  get isDefined() {
17298    return !!fastRegistry.getByType(this.type);
17299  }
17300  /**
17301   * Defines a custom element based on this definition.
17302   * @param registry - The element registry to define the element in.
17303   */
17304
17305
17306  define(registry = customElements) {
17307    const type = this.type;
17308
17309    if (fastRegistry.register(this)) {
17310      const attributes = this.attributes;
17311      const proto = type.prototype;
17312
17313      for (let i = 0, ii = attributes.length; i < ii; ++i) {
17314        _observable.Observable.defineProperty(proto, attributes[i]);
17315      }
17316
17317      Reflect.defineProperty(type, "observedAttributes", {
17318        value: this.observedAttributes,
17319        enumerable: true
17320      });
17321    }
17322
17323    if (!registry.get(this.name)) {
17324      registry.define(this.name, type, this.elementOptions);
17325    }
17326
17327    return this;
17328  }
17329
17330}
17331/**
17332 * Gets the element definition associated with the specified type.
17333 * @param type - The custom element type to retrieve the definition for.
17334 */
17335
17336
17337exports.FASTElementDefinition = FASTElementDefinition;
17338FASTElementDefinition.forType = fastRegistry.getByType;
17339
17340},{"../observation/observable.js":156,"../platform.js":157,"../styles/element-styles.js":160,"./attributes.js":146}],149:[function(require,module,exports){
17341"use strict";
17342
17343Object.defineProperty(exports, "__esModule", {
17344  value: true
17345});
17346exports.FASTElement = void 0;
17347exports.customElement = customElement;
17348
17349var _controller = require("./controller.js");
17350
17351var _fastDefinitions = require("./fast-definitions.js");
17352
17353/* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
17354function createFASTElement(BaseType) {
17355  return class extends BaseType {
17356    constructor() {
17357      /* eslint-disable-next-line */
17358      super();
17359
17360      _controller.Controller.forCustomElement(this);
17361    }
17362
17363    $emit(type, detail, options) {
17364      return this.$fastController.emit(type, detail, options);
17365    }
17366
17367    connectedCallback() {
17368      this.$fastController.onConnectedCallback();
17369    }
17370
17371    disconnectedCallback() {
17372      this.$fastController.onDisconnectedCallback();
17373    }
17374
17375    attributeChangedCallback(name, oldValue, newValue) {
17376      this.$fastController.onAttributeChangedCallback(name, oldValue, newValue);
17377    }
17378
17379  };
17380}
17381/**
17382 * A minimal base class for FASTElements that also provides
17383 * static helpers for working with FASTElements.
17384 * @public
17385 */
17386
17387
17388const FASTElement = Object.assign(createFASTElement(HTMLElement), {
17389  /**
17390   * Creates a new FASTElement base class inherited from the
17391   * provided base type.
17392   * @param BaseType - The base element type to inherit from.
17393   */
17394  from(BaseType) {
17395    return createFASTElement(BaseType);
17396  },
17397
17398  /**
17399   * Defines a platform custom element based on the provided type and definition.
17400   * @param type - The custom element type to define.
17401   * @param nameOrDef - The name of the element to define or a definition object
17402   * that describes the element to define.
17403   */
17404  define(type, nameOrDef) {
17405    return new _fastDefinitions.FASTElementDefinition(type, nameOrDef).define().type;
17406  }
17407
17408});
17409/**
17410 * Decorator: Defines a platform custom element based on `FASTElement`.
17411 * @param nameOrDef - The name of the element to define or a definition object
17412 * that describes the element to define.
17413 * @public
17414 */
17415
17416exports.FASTElement = FASTElement;
17417
17418function customElement(nameOrDef) {
17419  /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
17420  return function (type) {
17421    new _fastDefinitions.FASTElementDefinition(type, nameOrDef).define();
17422  };
17423}
17424
17425},{"./controller.js":147,"./fast-definitions.js":148}],150:[function(require,module,exports){
17426"use strict";
17427
17428Object.defineProperty(exports, "__esModule", {
17429  value: true
17430});

vendor: 5,130 bytes, lines 17431-17610

17431exports._interpolationStart = exports._interpolationEnd = exports.DOM = void 0;
17432
17433var _platform = require("./platform.js");
17434
17435const updateQueue = _platform.$global.FAST.getById(1
17436/* updateQueue */
17437, () => {
17438  const tasks = [];
17439  const pendingErrors = [];
17440
17441  function throwFirstError() {
17442    if (pendingErrors.length) {
17443      throw pendingErrors.shift();
17444    }
17445  }
17446
17447  function tryRunTask(task) {
17448    try {
17449      task.call();
17450    } catch (error) {
17451      pendingErrors.push(error);
17452      setTimeout(throwFirstError, 0);
17453    }
17454  }
17455
17456  function process() {
17457    const capacity = 1024;
17458    let index = 0;
17459
17460    while (index < tasks.length) {
17461      tryRunTask(tasks[index]);
17462      index++; // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.
17463      // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will
17464      // grow, but to avoid an O(n) walk for every task we execute, we don't
17465      // shift tasks off the queue after they have been executed.
17466      // Instead, we periodically shift 1024 tasks off the queue.
17467
17468      if (index > capacity) {
17469        // Manually shift all values starting at the index back to the
17470        // beginning of the queue.
17471        for (let scan = 0, newLength = tasks.length - index; scan < newLength; scan++) {
17472          tasks[scan] = tasks[scan + index];
17473        }
17474
17475        tasks.length -= index;
17476        index = 0;
17477      }
17478    }
17479
17480    tasks.length = 0;
17481  }
17482
17483  function enqueue(callable) {
17484    if (tasks.length < 1) {
17485      _platform.$global.requestAnimationFrame(process);
17486    }
17487
17488    tasks.push(callable);
17489  }
17490
17491  return Object.freeze({
17492    enqueue,
17493    process
17494  });
17495});
17496/* eslint-disable */
17497
17498
17499const fastHTMLPolicy = _platform.$global.trustedTypes.createPolicy("fast-html", {
17500  createHTML: html => html
17501});
17502/* eslint-enable */
17503
17504
17505let htmlPolicy = fastHTMLPolicy;
17506const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
17507/** @internal */
17508
17509const _interpolationStart = `${marker}{`;
17510/** @internal */
17511
17512exports._interpolationStart = _interpolationStart;
17513const _interpolationEnd = `}${marker}`;
17514/**
17515 * Common DOM APIs.
17516 * @public
17517 */
17518
17519exports._interpolationEnd = _interpolationEnd;
17520const DOM = Object.freeze({
17521  /**
17522   * Indicates whether the DOM supports the adoptedStyleSheets feature.
17523   */
17524  supportsAdoptedStyleSheets: Array.isArray(document.adoptedStyleSheets) && "replace" in CSSStyleSheet.prototype,
17525
17526  /**
17527   * Sets the HTML trusted types policy used by the templating engine.
17528   * @param policy - The policy to set for HTML.
17529   * @remarks
17530   * This API can only be called once, for security reasons. It should be
17531   * called by the application developer at the start of their program.
17532   */
17533  setHTMLPolicy(policy) {
17534    if (htmlPolicy !== fastHTMLPolicy) {
17535      throw new Error("The HTML policy can only be set once.");
17536    }
17537
17538    htmlPolicy = policy;
17539  },
17540
17541  /**
17542   * Turns a string into trusted HTML using the configured trusted types policy.
17543   * @param html - The string to turn into trusted HTML.
17544   * @remarks
17545   * Used internally by the template engine when creating templates
17546   * and setting innerHTML.
17547   */
17548  createHTML(html) {
17549    return htmlPolicy.createHTML(html);
17550  },
17551
17552  /**
17553   * Determines if the provided node is a template marker used by the runtime.
17554   * @param node - The node to test.
17555   */
17556  isMarker(node) {
17557    return node && node.nodeType === 8 && node.data.startsWith(marker);
17558  },
17559
17560  /**
17561   * Given a marker node, extract the {@link HTMLDirective} index from the placeholder.
17562   * @param node - The marker node to extract the index from.
17563   */
17564  extractDirectiveIndexFromMarker(node) {
17565    return parseInt(node.data.replace(`${marker}:`, ""));
17566  },
17567
17568  /**
17569   * Creates a placeholder string suitable for marking out a location *within*
17570   * an attribute value or HTML content.
17571   * @param index - The directive index to create the placeholder for.
17572   * @remarks
17573   * Used internally by binding directives.
17574   */
17575  createInterpolationPlaceholder(index) {
17576    return `${_interpolationStart}${index}${_interpolationEnd}`;
17577  },
17578
17579  /**
17580   * Creates a placeholder that manifests itself as an attribute on an
17581   * element.
17582   * @param attributeName - The name of the custom attribute.
17583   * @param index - The directive index to create the placeholder for.
17584   * @remarks
17585   * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
17586   */
17587  createCustomAttributePlaceholder(attributeName, index) {
17588    return `${attributeName}="${this.createInterpolationPlaceholder(index)}"`;
17589  },
17590
17591  /**
17592   * Creates a placeholder that manifests itself as a marker within the DOM structure.
17593   * @param index - The directive index to create the placeholder for.
17594   * @remarks
17595   * Used internally by structural directives such as `repeat`.
17596   */
17597  createBlockPlaceholder(index) {
17598    return `<!--${marker}:${index}-->`;
17599  },
17600
17601  /**
17602   * Schedules DOM update work in the next async batch.
17603   * @param callable - The callable function or object to queue.
17604   */
17605  queueUpdate: updateQueue.enqueue,
17606
17607  /**
17608   * Immediately processes all work previously scheduled
17609   * through queueUpdate.
17610   * @remarks

17611   * This also forces nextUpdate promises
17612   * to resolve.
17613   */
17614  processUpdates: updateQueue.process,
17615
17616  /**
17617   * Resolves with the next DOM update.
17618   */
17619  nextUpdate() {
17620    return new Promise(updateQueue.enqueue);
17621  },
17622
17623  /**
17624   * Sets an attribute value on an element.
17625   * @param element - The element to set the attribute value on.
17626   * @param attributeName - The attribute name to set.
17627   * @param value - The value of the attribute to set.
17628   * @remarks
17629   * If the value is `null` or `undefined`, the attribute is removed, otherwise
17630   * it is set to the provided value using the standard `setAttribute` API.
17631   */
17632  setAttribute(element, attributeName, value) {
17633    if (value === null || value === undefined) {
17634      element.removeAttribute(attributeName);
17635    } else {
17636      element.setAttribute(attributeName, value);
17637    }
17638  },
17639
17640  /**
17641   * Sets a boolean attribute value.
17642   * @param element - The element to set the boolean attribute value on.
17643   * @param attributeName - The attribute name to set.
17644   * @param value - The value of the attribute to set.
17645   * @remarks
17646   * If the value is true, the attribute is added; otherwise it is removed.
17647   */
17648  setBooleanAttribute(element, attributeName, value) {
17649    value ? element.setAttribute(attributeName, "") : element.removeAttribute(attributeName);
17650  },
17651
17652  /**
17653   * Removes all the child nodes of the provided parent node.
17654   * @param parent - The node to remove the children from.
17655   */
17656  removeChildNodes(parent) {
17657    for (let child = parent.firstChild; child !== null; child = parent.firstChild) {
17658      parent.removeChild(child);
17659    }
17660  },
17661
17662  /**
17663   * Creates a TreeWalker configured to walk a template fragment.
17664   * @param fragment - The fragment to walk.
17665   */
17666  createTemplateWalker(fragment) {
17667    return document.createTreeWalker(fragment, 133, // element, text, comment
17668    null, false);
17669  }
17670
17671});
17672exports.DOM = DOM;
17673
17674},{"./platform.js":157}],151:[function(require,module,exports){
17675"use strict";
17676
17677Object.defineProperty(exports, "__esModule", {
17678  value: true
17679});
17680var _exportNames = {
17681  FASTElementDefinition: true,
17682  ElementStyles: true,
17683  prependToAdoptedStyleSheetsSymbol: true,
17684  css: true,
17685  cssPartial: true,
17686  CSSDirective: true,
17687  enableArrayObservation: true,
17688  DOM: true,
17689  elements: true
17690};
17691Object.defineProperty(exports, "CSSDirective", {
17692  enumerable: true,
17693  get: function () {
17694    return _cssDirective.CSSDirective;
17695  }
17696});
17697Object.defineProperty(exports, "DOM", {
17698  enumerable: true,
17699  get: function () {
17700    return _dom.DOM;
17701  }
17702});
17703Object.defineProperty(exports, "ElementStyles", {
17704  enumerable: true,
17705  get: function () {
17706    return _elementStyles.ElementStyles;
17707  }
17708});
17709Object.defineProperty(exports, "FASTElementDefinition", {
17710  enumerable: true,
17711  get: function () {
17712    return _fastDefinitions.FASTElementDefinition;
17713  }
17714});
17715Object.defineProperty(exports, "css", {
17716  enumerable: true,
17717  get: function () {

17718    return _css.css;
17719  }
17720});
17721Object.defineProperty(exports, "cssPartial", {
17722  enumerable: true,
17723  get: function () {
17724    return _css.cssPartial;
17725  }
17726});
17727Object.defineProperty(exports, "elements", {
17728  enumerable: true,
17729  get: function () {
17730    return _nodeObservation.elements;
17731  }
17732});
17733Object.defineProperty(exports, "enableArrayObservation", {
17734  enumerable: true,
17735  get: function () {
17736    return _arrayObserver.enableArrayObservation;
17737  }
17738});
17739Object.defineProperty(exports, "prependToAdoptedStyleSheetsSymbol", {
17740  enumerable: true,
17741  get: function () {
17742    return _elementStyles.prependToAdoptedStyleSheetsSymbol;
17743  }
17744});
17745
17746var _platform = require("./platform.js");
17747
17748Object.keys(_platform).forEach(function (key) {
17749  if (key === "default" || key === "__esModule") return;
17750  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17751  if (key in exports && exports[key] === _platform[key]) return;
17752  Object.defineProperty(exports, key, {
17753    enumerable: true,
17754    get: function () {
17755      return _platform[key];
17756    }
17757  });
17758});
17759
17760var _template = require("./templating/template.js");
17761
17762Object.keys(_template).forEach(function (key) {
17763  if (key === "default" || key === "__esModule") return;
17764  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17765  if (key in exports && exports[key] === _template[key]) return;
17766  Object.defineProperty(exports, key, {
17767    enumerable: true,
17768    get: function () {
17769      return _template[key];
17770    }
17771  });
17772});
17773
17774var _fastElement = require("./components/fast-element.js");
17775
17776Object.keys(_fastElement).forEach(function (key) {
17777  if (key === "default" || key === "__esModule") return;
17778  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17779  if (key in exports && exports[key] === _fastElement[key]) return;
17780  Object.defineProperty(exports, key, {
17781    enumerable: true,
17782    get: function () {
17783      return _fastElement[key];
17784    }
17785  });
17786});
17787
17788var _fastDefinitions = require("./components/fast-definitions.js");
17789
17790var _attributes = require("./components/attributes.js");
17791
17792Object.keys(_attributes).forEach(function (key) {
17793  if (key === "default" || key === "__esModule") return;
17794  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17795  if (key in exports && exports[key] === _attributes[key]) return;
17796  Object.defineProperty(exports, key, {
17797    enumerable: true,
17798    get: function () {
17799      return _attributes[key];
17800    }
17801  });
17802});
17803
17804var _controller = require("./components/controller.js");
17805
17806Object.keys(_controller).forEach(function (key) {
17807  if (key === "default" || key === "__esModule") return;
17808  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17809  if (key in exports && exports[key] === _controller[key]) return;
17810  Object.defineProperty(exports, key, {
17811    enumerable: true,
17812    get: function () {
17813      return _controller[key];
17814    }
17815  });
17816});
17817
17818var _compiler = require("./templating/compiler.js");
17819
17820Object.keys(_compiler).forEach(function (key) {
17821  if (key === "default" || key === "__esModule") return;
17822  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17823  if (key in exports && exports[key] === _compiler[key]) return;
17824  Object.defineProperty(exports, key, {
17825    enumerable: true,
17826    get: function () {
17827      return _compiler[key];
17828    }
17829  });
17830});
17831
17832var _elementStyles = require("./styles/element-styles.js");
17833
17834var _css = require("./styles/css.js");
17835
17836var _cssDirective = require("./styles/css-directive.js");
17837
17838var _view = require("./templating/view.js");
17839
17840Object.keys(_view).forEach(function (key) {
17841  if (key === "default" || key === "__esModule") return;
17842  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17843  if (key in exports && exports[key] === _view[key]) return;
17844  Object.defineProperty(exports, key, {
17845    enumerable: true,
17846    get: function () {
17847      return _view[key];
17848    }
17849  });
17850});
17851
17852var _observable = require("./observation/observable.js");
17853
17854Object.keys(_observable).forEach(function (key) {
17855  if (key === "default" || key === "__esModule") return;
17856  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17857  if (key in exports && exports[key] === _observable[key]) return;
17858  Object.defineProperty(exports, key, {
17859    enumerable: true,
17860    get: function () {
17861      return _observable[key];
17862    }
17863  });
17864});
17865
17866var _notifier = require("./observation/notifier.js");
17867
17868Object.keys(_notifier).forEach(function (key) {

17869  if (key === "default" || key === "__esModule") return;
17870  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17871  if (key in exports && exports[key] === _notifier[key]) return;
17872  Object.defineProperty(exports, key, {
17873    enumerable: true,
17874    get: function () {
17875      return _notifier[key];
17876    }
17877  });
17878});
17879
17880require("./observation/array-change-records.js");
17881
17882var _arrayObserver = require("./observation/array-observer.js");
17883
17884var _dom = require("./dom.js");
17885
17886var _binding = require("./templating/binding.js");
17887
17888Object.keys(_binding).forEach(function (key) {
17889  if (key === "default" || key === "__esModule") return;
17890  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17891  if (key in exports && exports[key] === _binding[key]) return;
17892  Object.defineProperty(exports, key, {
17893    enumerable: true,
17894    get: function () {
17895      return _binding[key];
17896    }
17897  });
17898});
17899
17900var _htmlDirective = require("./templating/html-directive.js");
17901
17902Object.keys(_htmlDirective).forEach(function (key) {
17903  if (key === "default" || key === "__esModule") return;
17904  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17905  if (key in exports && exports[key] === _htmlDirective[key]) return;
17906  Object.defineProperty(exports, key, {
17907    enumerable: true,
17908    get: function () {
17909      return _htmlDirective[key];
17910    }
17911  });
17912});
17913
17914var _ref = require("./templating/ref.js");
17915
17916Object.keys(_ref).forEach(function (key) {
17917  if (key === "default" || key === "__esModule") return;
17918  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17919  if (key in exports && exports[key] === _ref[key]) return;
17920  Object.defineProperty(exports, key, {
17921    enumerable: true,
17922    get: function () {
17923      return _ref[key];
17924    }
17925  });
17926});
17927
17928var _when = require("./templating/when.js");
17929
17930Object.keys(_when).forEach(function (key) {
17931  if (key === "default" || key === "__esModule") return;
17932  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17933  if (key in exports && exports[key] === _when[key]) return;
17934  Object.defineProperty(exports, key, {
17935    enumerable: true,
17936    get: function () {
17937      return _when[key];
17938    }
17939  });
17940});
17941
17942var _repeat = require("./templating/repeat.js");
17943
17944Object.keys(_repeat).forEach(function (key) {
17945  if (key === "default" || key === "__esModule") return;
17946  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17947  if (key in exports && exports[key] === _repeat[key]) return;
17948  Object.defineProperty(exports, key, {
17949    enumerable: true,
17950    get: function () {
17951      return _repeat[key];
17952    }
17953  });
17954});
17955
17956var _slotted = require("./templating/slotted.js");
17957
17958Object.keys(_slotted).forEach(function (key) {
17959  if (key === "default" || key === "__esModule") return;
17960  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17961  if (key in exports && exports[key] === _slotted[key]) return;
17962  Object.defineProperty(exports, key, {
17963    enumerable: true,
17964    get: function () {
17965      return _slotted[key];
17966    }
17967  });
17968});
17969
17970var _children = require("./templating/children.js");
17971
17972Object.keys(_children).forEach(function (key) {
17973  if (key === "default" || key === "__esModule") return;
17974  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
17975  if (key in exports && exports[key] === _children[key]) return;
17976  Object.defineProperty(exports, key, {
17977    enumerable: true,
17978    get: function () {
17979      return _children[key];
17980    }
17981  });
17982});
17983
17984var _nodeObservation = require("./templating/node-observation.js");
17985
17986},{"./components/attributes.js":146,"./components/controller.js":147,"./components/fast-definitions.js":148,"./components/fast-element.js":149,"./dom.js":150,"./observation/array-change-records.js":153,"./observation/array-observer.js":154,"./observation/notifier.js":155,"./observation/observable.js":156,"./platform.js":157,"./styles/css-directive.js":158,"./styles/css.js":159,"./styles/element-styles.js":160,"./templating/binding.js":161,"./templating/children.js":162,"./templating/compiler.js":163,"./templating/html-directive.js":164,"./templating/node-observation.js":165,"./templating/ref.js":166,"./templating/repeat.js":167,"./templating/slotted.js":168,"./templating/template.js":169,"./templating/view.js":170,"./templating/when.js":171}],152:[function(require,module,exports){
17987"use strict";
17988
17989Object.defineProperty(exports, "__esModule", {
17990  value: true
17991});
17992exports.isFunction = void 0;
17993
17994/**
17995 * Determines whether or not an object is a function.
17996 * @public
17997 */
17998const isFunction = object => typeof object === "function";
17999
18000exports.isFunction = isFunction;
18001
18002},{}],153:[function(require,module,exports){
18003"use strict";
18004
18005Object.defineProperty(exports, "__esModule", {
18006  value: true
18007});
18008exports.calcSplices = calcSplices;
18009exports.newSplice = newSplice;
18010exports.projectArraySplices = projectArraySplices;
18011
18012var _platform = require("../platform.js");
18013
18014/** @internal */
18015function newSplice(index, removed, addedCount) {
18016  return {
18017    index: index,
18018    removed: removed,
18019    addedCount: addedCount
18020  };
18021}
18022
18023const EDIT_LEAVE = 0;
18024const EDIT_UPDATE = 1;
18025const EDIT_ADD = 2;
18026const EDIT_DELETE = 3; // Note: This function is *based* on the computation of the Levenshtein
18027// "edit" distance. The one change is that "updates" are treated as two
18028// edits - not one. With Array splices, an update is really a delete

vendor: 6,407 bytes, lines 18029-18293

18029// followed by an add. By retaining this, we optimize for "keeping" the
18030// maximum array items in the original array. For example:
18031//
18032//   'xxxx123' -> '123yyyy'
18033//
18034// With 1-edit updates, the shortest path would be just to update all seven
18035// characters. With 2-edit updates, we delete 4, leave 3, and add 4. This
18036// leaves the substring '123' intact.
18037
18038function calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd) {
18039  // "Deletion" columns
18040  const rowCount = oldEnd - oldStart + 1;
18041  const columnCount = currentEnd - currentStart + 1;
18042  const distances = new Array(rowCount);
18043  let north;
18044  let west; // "Addition" rows. Initialize null column.
18045
18046  for (let i = 0; i < rowCount; ++i) {
18047    distances[i] = new Array(columnCount);
18048    distances[i][0] = i;
18049  } // Initialize null row
18050
18051
18052  for (let j = 0; j < columnCount; ++j) {
18053    distances[0][j] = j;
18054  }
18055
18056  for (let i = 1; i < rowCount; ++i) {
18057    for (let j = 1; j < columnCount; ++j) {
18058      if (current[currentStart + j - 1] === old[oldStart + i - 1]) {
18059        distances[i][j] = distances[i - 1][j - 1];
18060      } else {
18061        north = distances[i - 1][j] + 1;
18062        west = distances[i][j - 1] + 1;
18063        distances[i][j] = north < west ? north : west;
18064      }
18065    }
18066  }
18067
18068  return distances;
18069} // This starts at the final weight, and walks "backward" by finding
18070// the minimum previous weight recursively until the origin of the weight
18071// matrix.
18072
18073
18074function spliceOperationsFromEditDistances(distances) {
18075  let i = distances.length - 1;
18076  let j = distances[0].length - 1;
18077  let current = distances[i][j];
18078  const edits = [];
18079
18080  while (i > 0 || j > 0) {
18081    if (i === 0) {
18082      edits.push(EDIT_ADD);
18083      j--;
18084      continue;
18085    }
18086
18087    if (j === 0) {
18088      edits.push(EDIT_DELETE);
18089      i--;
18090      continue;
18091    }
18092
18093    const northWest = distances[i - 1][j - 1];
18094    const west = distances[i - 1][j];
18095    const north = distances[i][j - 1];
18096    let min;
18097
18098    if (west < north) {
18099      min = west < northWest ? west : northWest;
18100    } else {
18101      min = north < northWest ? north : northWest;
18102    }
18103
18104    if (min === northWest) {
18105      if (northWest === current) {
18106        edits.push(EDIT_LEAVE);
18107      } else {
18108        edits.push(EDIT_UPDATE);
18109        current = northWest;
18110      }
18111
18112      i--;
18113      j--;
18114    } else if (min === west) {
18115      edits.push(EDIT_DELETE);
18116      i--;
18117      current = west;
18118    } else {
18119      edits.push(EDIT_ADD);
18120      j--;
18121      current = north;
18122    }
18123  }
18124
18125  edits.reverse();
18126  return edits;
18127}
18128
18129function sharedPrefix(current, old, searchLength) {
18130  for (let i = 0; i < searchLength; ++i) {
18131    if (current[i] !== old[i]) {
18132      return i;
18133    }
18134  }
18135
18136  return searchLength;
18137}
18138
18139function sharedSuffix(current, old, searchLength) {
18140  let index1 = current.length;
18141  let index2 = old.length;
18142  let count = 0;
18143
18144  while (count < searchLength && current[--index1] === old[--index2]) {
18145    count++;
18146  }
18147
18148  return count;
18149}
18150
18151function intersect(start1, end1, start2, end2) {
18152  // Disjoint
18153  if (end1 < start2 || end2 < start1) {
18154    return -1;
18155  } // Adjacent
18156
18157
18158  if (end1 === start2 || end2 === start1) {
18159    return 0;
18160  } // Non-zero intersect, span1 first
18161
18162
18163  if (start1 < start2) {
18164    if (end1 < end2) {
18165      return end1 - start2; // Overlap
18166    }
18167
18168    return end2 - start2; // Contained
18169  } // Non-zero intersect, span2 first
18170
18171
18172  if (end2 < end1) {
18173    return end2 - start1; // Overlap
18174  }
18175
18176  return end1 - start1; // Contained
18177}
18178/**
18179 * Splice Projection functions:
18180 *
18181 * A splice map is a representation of how a previous array of items
18182 * was transformed into a new array of items. Conceptually it is a list of
18183 * tuples of
18184 *
18185 *   <index, removed, addedCount>
18186 *
18187 * which are kept in ascending index order of. The tuple represents that at
18188 * the |index|, |removed| sequence of items were removed, and counting forward
18189 * from |index|, |addedCount| items were added.
18190 */
18191
18192/**
18193 * @internal
18194 * @remarks
18195 * Lacking individual splice mutation information, the minimal set of
18196 * splices can be synthesized given the previous state and final state of an
18197 * array. The basic approach is to calculate the edit distance matrix and
18198 * choose the shortest path through it.
18199 *
18200 * Complexity: O(l * p)
18201 *   l: The length of the current array
18202 *   p: The length of the old array
18203 */
18204
18205
18206function calcSplices(current, currentStart, currentEnd, old, oldStart, oldEnd) {
18207  let prefixCount = 0;
18208  let suffixCount = 0;
18209  const minLength = Math.min(currentEnd - currentStart, oldEnd - oldStart);
18210
18211  if (currentStart === 0 && oldStart === 0) {
18212    prefixCount = sharedPrefix(current, old, minLength);
18213  }
18214
18215  if (currentEnd === current.length && oldEnd === old.length) {
18216    suffixCount = sharedSuffix(current, old, minLength - prefixCount);
18217  }
18218
18219  currentStart += prefixCount;
18220  oldStart += prefixCount;
18221  currentEnd -= suffixCount;
18222  oldEnd -= suffixCount;
18223
18224  if (currentEnd - currentStart === 0 && oldEnd - oldStart === 0) {
18225    return _platform.emptyArray;
18226  }
18227
18228  if (currentStart === currentEnd) {
18229    const splice = newSplice(currentStart, [], 0);
18230
18231    while (oldStart < oldEnd) {
18232      splice.removed.push(old[oldStart++]);
18233    }
18234
18235    return [splice];
18236  } else if (oldStart === oldEnd) {
18237    return [newSplice(currentStart, [], currentEnd - currentStart)];
18238  }
18239
18240  const ops = spliceOperationsFromEditDistances(calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd));
18241  const splices = [];
18242  let splice = void 0;
18243  let index = currentStart;
18244  let oldIndex = oldStart;
18245
18246  for (let i = 0; i < ops.length; ++i) {
18247    switch (ops[i]) {
18248      case EDIT_LEAVE:
18249        if (splice !== void 0) {
18250          splices.push(splice);
18251          splice = void 0;
18252        }
18253
18254        index++;
18255        oldIndex++;
18256        break;
18257
18258      case EDIT_UPDATE:
18259        if (splice === void 0) {
18260          splice = newSplice(index, [], 0);
18261        }
18262
18263        splice.addedCount++;
18264        index++;
18265        splice.removed.push(old[oldIndex]);
18266        oldIndex++;
18267        break;
18268
18269      case EDIT_ADD:
18270        if (splice === void 0) {
18271          splice = newSplice(index, [], 0);
18272        }
18273
18274        splice.addedCount++;
18275        index++;
18276        break;
18277
18278      case EDIT_DELETE:
18279        if (splice === void 0) {
18280          splice = newSplice(index, [], 0);
18281        }
18282
18283        splice.removed.push(old[oldIndex]);
18284        oldIndex++;
18285        break;
18286      // no default
18287    }
18288  }
18289
18290  if (splice !== void 0) {
18291    splices.push(splice);
18292  }
18293

vendor: 4,448 bytes, lines 18294-18459

18294  return splices;
18295}
18296
18297const $push = Array.prototype.push;
18298
18299function mergeSplice(splices, index, removed, addedCount) {
18300  const splice = newSplice(index, removed, addedCount);
18301  let inserted = false;
18302  let insertionOffset = 0;
18303
18304  for (let i = 0; i < splices.length; i++) {
18305    const current = splices[i];
18306    current.index += insertionOffset;
18307
18308    if (inserted) {
18309      continue;
18310    }
18311
18312    const intersectCount = intersect(splice.index, splice.index + splice.removed.length, current.index, current.index + current.addedCount);
18313
18314    if (intersectCount >= 0) {
18315      // Merge the two splices
18316      splices.splice(i, 1);
18317      i--;
18318      insertionOffset -= current.addedCount - current.removed.length;
18319      splice.addedCount += current.addedCount - intersectCount;
18320      const deleteCount = splice.removed.length + current.removed.length - intersectCount;
18321
18322      if (!splice.addedCount && !deleteCount) {
18323        // merged splice is a noop. discard.
18324        inserted = true;
18325      } else {
18326        let currentRemoved = current.removed;
18327
18328        if (splice.index < current.index) {
18329          // some prefix of splice.removed is prepended to current.removed.
18330          const prepend = splice.removed.slice(0, current.index - splice.index);
18331          $push.apply(prepend, currentRemoved);
18332          currentRemoved = prepend;
18333        }
18334
18335        if (splice.index + splice.removed.length > current.index + current.addedCount) {
18336          // some suffix of splice.removed is appended to current.removed.
18337          const append = splice.removed.slice(current.index + current.addedCount - splice.index);
18338          $push.apply(currentRemoved, append);
18339        }
18340
18341        splice.removed = currentRemoved;
18342
18343        if (current.index < splice.index) {
18344          splice.index = current.index;
18345        }
18346      }
18347    } else if (splice.index < current.index) {
18348      // Insert splice here.
18349      inserted = true;
18350      splices.splice(i, 0, splice);
18351      i++;
18352      const offset = splice.addedCount - splice.removed.length;
18353      current.index += offset;
18354      insertionOffset += offset;
18355    }
18356  }
18357
18358  if (!inserted) {
18359    splices.push(splice);
18360  }
18361}
18362
18363function createInitialSplices(changeRecords) {
18364  const splices = [];
18365
18366  for (let i = 0, ii = changeRecords.length; i < ii; i++) {
18367    const record = changeRecords[i];
18368    mergeSplice(splices, record.index, record.removed, record.addedCount);
18369  }
18370
18371  return splices;
18372}
18373/** @internal */
18374
18375
18376function projectArraySplices(array, changeRecords) {
18377  let splices = [];
18378  const initialSplices = createInitialSplices(changeRecords);
18379
18380  for (let i = 0, ii = initialSplices.length; i < ii; ++i) {
18381    const splice = initialSplices[i];
18382
18383    if (splice.addedCount === 1 && splice.removed.length === 1) {
18384      if (splice.removed[0] !== array[splice.index]) {
18385        splices.push(splice);
18386      }
18387
18388      continue;
18389    }
18390
18391    splices = splices.concat(calcSplices(array, splice.index, splice.index + splice.addedCount, splice.removed, 0, splice.removed.length));
18392  }
18393
18394  return splices;
18395}
18396
18397},{"../platform.js":157}],154:[function(require,module,exports){
18398"use strict";
18399
18400Object.defineProperty(exports, "__esModule", {
18401  value: true
18402});
18403exports.enableArrayObservation = enableArrayObservation;
18404
18405var _dom = require("../dom.js");
18406
18407var _arrayChangeRecords = require("./array-change-records.js");
18408
18409var _notifier = require("./notifier.js");
18410
18411var _observable = require("./observable.js");
18412
18413let arrayObservationEnabled = false;
18414
18415function adjustIndex(changeRecord, array) {
18416  let index = changeRecord.index;
18417  const arrayLength = array.length;
18418
18419  if (index > arrayLength) {
18420    index = arrayLength - changeRecord.addedCount;
18421  } else if (index < 0) {
18422    index = arrayLength + changeRecord.removed.length + index - changeRecord.addedCount;
18423  }
18424
18425  if (index < 0) {
18426    index = 0;
18427  }
18428
18429  changeRecord.index = index;
18430  return changeRecord;
18431}
18432
18433class ArrayObserver extends _notifier.SubscriberSet {
18434  constructor(source) {
18435    super(source);
18436    this.oldCollection = void 0;
18437    this.splices = void 0;
18438    this.needsQueue = true;
18439    this.call = this.flush;
18440    Reflect.defineProperty(source, "$fastController", {
18441      value: this,
18442      enumerable: false
18443    });
18444  }
18445
18446  subscribe(subscriber) {
18447    this.flush();
18448    super.subscribe(subscriber);
18449  }
18450
18451  addSplice(splice) {
18452    if (this.splices === void 0) {
18453      this.splices = [splice];
18454    } else {
18455      this.splices.push(splice);
18456    }
18457
18458    if (this.needsQueue) {
18459      this.needsQueue = false;

18460
18461      _dom.DOM.queueUpdate(this);
18462    }
18463  }
18464
18465  reset(oldCollection) {
18466    this.oldCollection = oldCollection;
18467
18468    if (this.needsQueue) {
18469      this.needsQueue = false;
18470
18471      _dom.DOM.queueUpdate(this);
18472    }
18473  }
18474
18475  flush() {
18476    const splices = this.splices;
18477    const oldCollection = this.oldCollection;
18478
18479    if (splices === void 0 && oldCollection === void 0) {
18480      return;
18481    }
18482
18483    this.needsQueue = true;
18484    this.splices = void 0;
18485    this.oldCollection = void 0;
18486    const finalSplices = oldCollection === void 0 ? (0, _arrayChangeRecords.projectArraySplices)(this.source, splices) : (0, _arrayChangeRecords.calcSplices)(this.source, 0, this.source.length, oldCollection, 0, oldCollection.length);
18487    this.notify(finalSplices);
18488  }
18489
18490}
18491/* eslint-disable prefer-rest-params */
18492
18493/* eslint-disable @typescript-eslint/explicit-function-return-type */
18494
18495/**
18496 * Enables the array observation mechanism.
18497 * @remarks
18498 * Array observation is enabled automatically when using the
18499 * {@link RepeatDirective}, so calling this API manually is
18500 * not typically necessary.
18501 * @public
18502 */
18503
18504
18505function enableArrayObservation() {
18506  if (arrayObservationEnabled) {
18507    return;
18508  }
18509
18510  arrayObservationEnabled = true;
18511
18512  _observable.Observable.setArrayObserverFactory(collection => {
18513    return new ArrayObserver(collection);
18514  });
18515
18516  const proto = Array.prototype; // Don't patch Array if it has already been patched
18517  // by another copy of fast-element.
18518
18519  if (proto.$fastPatch) {
18520    return;
18521  }
18522
18523  Reflect.defineProperty(proto, "$fastPatch", {
18524    value: 1,
18525    enumerable: false
18526  });
18527  const pop = proto.pop;
18528  const push = proto.push;
18529  const reverse = proto.reverse;
18530  const shift = proto.shift;
18531  const sort = proto.sort;
18532  const splice = proto.splice;
18533  const unshift = proto.unshift;
18534
18535  proto.pop = function () {
18536    const notEmpty = this.length > 0;
18537    const methodCallResult = pop.apply(this, arguments);
18538    const o = this.$fastController;
18539
18540    if (o !== void 0 && notEmpty) {
18541      o.addSplice((0, _arrayChangeRecords.newSplice)(this.length, [methodCallResult], 0));
18542    }
18543
18544    return methodCallResult;
18545  };
18546
18547  proto.push = function () {
18548    const methodCallResult = push.apply(this, arguments);
18549    const o = this.$fastController;
18550
18551    if (o !== void 0) {
18552      o.addSplice(adjustIndex((0, _arrayChangeRecords.newSplice)(this.length - arguments.length, [], arguments.length), this));
18553    }
18554
18555    return methodCallResult;
18556  };
18557
18558  proto.reverse = function () {
18559    let oldArray;
18560    const o = this.$fastController;
18561
18562    if (o !== void 0) {
18563      o.flush();
18564      oldArray = this.slice();
18565    }
18566
18567    const methodCallResult = reverse.apply(this, arguments);
18568
18569    if (o !== void 0) {
18570      o.reset(oldArray);
18571    }
18572
18573    return methodCallResult;
18574  };
18575
18576  proto.shift = function () {
18577    const notEmpty = this.length > 0;
18578    const methodCallResult = shift.apply(this, arguments);
18579    const o = this.$fastController;
18580
18581    if (o !== void 0 && notEmpty) {
18582      o.addSplice((0, _arrayChangeRecords.newSplice)(0, [methodCallResult], 0));
18583    }
18584
18585    return methodCallResult;
18586  };
18587
18588  proto.sort = function () {
18589    let oldArray;
18590    const o = this.$fastController;
18591
18592    if (o !== void 0) {
18593      o.flush();
18594      oldArray = this.slice();
18595    }
18596
18597    const methodCallResult = sort.apply(this, arguments);
18598
18599    if (o !== void 0) {
18600      o.reset(oldArray);
18601    }
18602
18603    return methodCallResult;
18604  };
18605
18606  proto.splice = function () {
18607    const methodCallResult = splice.apply(this, arguments);
18608    const o = this.$fastController;
18609
18610    if (o !== void 0) {
18611      o.addSplice(adjustIndex((0, _arrayChangeRecords.newSplice)(+arguments[0], methodCallResult, arguments.length > 2 ? arguments.length - 2 : 0), this));
18612    }
18613
18614    return methodCallResult;
18615  };
18616
18617  proto.unshift = function () {
18618    const methodCallResult = unshift.apply(this, arguments);
18619    const o = this.$fastController;
18620
18621    if (o !== void 0) {
18622      o.addSplice(adjustIndex((0, _arrayChangeRecords.newSplice)(0, [], arguments.length), this));
18623    }
18624
18625    return methodCallResult;
18626  };
18627}
18628/* eslint-enable prefer-rest-params */
18629
18630/* eslint-enable @typescript-eslint/explicit-function-return-type */
18631
18632},{"../dom.js":150,"./array-change-records.js":153,"./notifier.js":155,"./observable.js":156}],155:[function(require,module,exports){
18633"use strict";
18634
18635Object.defineProperty(exports, "__esModule", {
18636  value: true
18637});
18638exports.SubscriberSet = exports.PropertyChangeNotifier = void 0;
18639
18640/**
18641 * An implementation of {@link Notifier} that efficiently keeps track of
18642 * subscribers interested in a specific change notification on an
18643 * observable source.
18644 *
18645 * @remarks

18646 * This set is optimized for the most common scenario of 1 or 2 subscribers.
18647 * With this in mind, it can store a subscriber in an internal field, allowing it to avoid Array#push operations.
18648 * If the set ever exceeds two subscribers, it upgrades to an array automatically.
18649 * @public
18650 */
18651class SubscriberSet {
18652  /**
18653   * Creates an instance of SubscriberSet for the specified source.
18654   * @param source - The object source that subscribers will receive notifications from.
18655   * @param initialSubscriber - An initial subscriber to changes.
18656   */
18657  constructor(source, initialSubscriber) {
18658    this.sub1 = void 0;
18659    this.sub2 = void 0;
18660    this.spillover = void 0;
18661    this.source = source;
18662    this.sub1 = initialSubscriber;
18663  }
18664  /**
18665   * Checks whether the provided subscriber has been added to this set.
18666   * @param subscriber - The subscriber to test for inclusion in this set.
18667   */
18668
18669
18670  has(subscriber) {
18671    return this.spillover === void 0 ? this.sub1 === subscriber || this.sub2 === subscriber : this.spillover.indexOf(subscriber) !== -1;
18672  }
18673  /**
18674   * Subscribes to notification of changes in an object's state.
18675   * @param subscriber - The object that is subscribing for change notification.
18676   */
18677
18678
18679  subscribe(subscriber) {
18680    const spillover = this.spillover;
18681
18682    if (spillover === void 0) {
18683      if (this.has(subscriber)) {
18684        return;
18685      }
18686
18687      if (this.sub1 === void 0) {
18688        this.sub1 = subscriber;
18689        return;
18690      }
18691
18692      if (this.sub2 === void 0) {
18693        this.sub2 = subscriber;
18694        return;
18695      }
18696
18697      this.spillover = [this.sub1, this.sub2, subscriber];
18698      this.sub1 = void 0;
18699      this.sub2 = void 0;
18700    } else {
18701      const index = spillover.indexOf(subscriber);
18702
18703      if (index === -1) {
18704        spillover.push(subscriber);
18705      }
18706    }
18707  }
18708  /**
18709   * Unsubscribes from notification of changes in an object's state.
18710   * @param subscriber - The object that is unsubscribing from change notification.
18711   */
18712
18713
18714  unsubscribe(subscriber) {
18715    const spillover = this.spillover;
18716
18717    if (spillover === void 0) {
18718      if (this.sub1 === subscriber) {
18719        this.sub1 = void 0;
18720      } else if (this.sub2 === subscriber) {
18721        this.sub2 = void 0;
18722      }
18723    } else {
18724      const index = spillover.indexOf(subscriber);
18725
18726      if (index !== -1) {
18727        spillover.splice(index, 1);
18728      }
18729    }
18730  }
18731  /**
18732   * Notifies all subscribers.
18733   * @param args - Data passed along to subscribers during notification.
18734   */
18735
18736
18737  notify(args) {
18738    const spillover = this.spillover;
18739    const source = this.source;
18740
18741    if (spillover === void 0) {
18742      const sub1 = this.sub1;
18743      const sub2 = this.sub2;
18744
18745      if (sub1 !== void 0) {
18746        sub1.handleChange(source, args);
18747      }
18748
18749      if (sub2 !== void 0) {
18750        sub2.handleChange(source, args);
18751      }
18752    } else {
18753      for (let i = 0, ii = spillover.length; i < ii; ++i) {
18754        spillover[i].handleChange(source, args);
18755      }
18756    }
18757  }
18758
18759}
18760/**
18761 * An implementation of Notifier that allows subscribers to be notified
18762 * of individual property changes on an object.
18763 * @public
18764 */
18765
18766
18767exports.SubscriberSet = SubscriberSet;
18768
18769class PropertyChangeNotifier {
18770  /**
18771   * Creates an instance of PropertyChangeNotifier for the specified source.
18772   * @param source - The object source that subscribers will receive notifications from.
18773   */
18774  constructor(source) {
18775    this.subscribers = {};
18776    this.sourceSubscribers = null;
18777    this.source = source;
18778  }
18779  /**
18780   * Notifies all subscribers, based on the specified property.
18781   * @param propertyName - The property name, passed along to subscribers during notification.
18782   */
18783
18784
18785  notify(propertyName) {
18786    var _a;
18787
18788    const subscribers = this.subscribers[propertyName];
18789
18790    if (subscribers !== void 0) {
18791      subscribers.notify(propertyName);
18792    }
18793
18794    (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.notify(propertyName);
18795  }
18796  /**
18797   * Subscribes to notification of changes in an object's state.
18798   * @param subscriber - The object that is subscribing for change notification.
18799   * @param propertyToWatch - The name of the property that the subscriber is interested in watching for changes.
18800   */
18801
18802
18803  subscribe(subscriber, propertyToWatch) {
18804    var _a;
18805
18806    if (propertyToWatch) {
18807      let subscribers = this.subscribers[propertyToWatch];
18808
18809      if (subscribers === void 0) {
18810        this.subscribers[propertyToWatch] = subscribers = new SubscriberSet(this.source);
18811      }
18812
18813      subscribers.subscribe(subscriber);
18814    } else {
18815      this.sourceSubscribers = (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);
18816      this.sourceSubscribers.subscribe(subscriber);
18817    }
18818  }
18819  /**
18820   * Unsubscribes from notification of changes in an object's state.
18821   * @param subscriber - The object that is unsubscribing from change notification.
18822   * @param propertyToUnwatch - The name of the property that the subscriber is no longer interested in watching.
18823   */
18824
18825
18826  unsubscribe(subscriber, propertyToUnwatch) {
18827    var _a;
18828
18829    if (propertyToUnwatch) {
18830      const subscribers = this.subscribers[propertyToUnwatch];
18831
18832      if (subscribers !== void 0) {
18833        subscribers.unsubscribe(subscriber);
18834      }
18835    } else {
18836      (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);
18837    }
18838  }
18839
18840}
18841
18842exports.PropertyChangeNotifier = PropertyChangeNotifier;
18843
18844},{}],156:[function(require,module,exports){
18845"use strict";
18846
18847Object.defineProperty(exports, "__esModule", {
18848  value: true
18849});
18850exports.defaultExecutionContext = exports.Observable = exports.ExecutionContext = void 0;
18851exports.observable = observable;
18852exports.volatile = volatile;
18853
18854var _dom = require("../dom.js");
18855
18856var _platform = require("../platform.js");
18857
18858var _notifier = require("./notifier.js");
18859
18860/**
18861 * Common Observable APIs.
18862 * @public
18863 */
18864const Observable = _platform.FAST.getById(2
18865/* observable */
18866, () => {
18867  const volatileRegex = /(:|&&|\|\||if)/;
18868  const notifierLookup = new WeakMap();
18869  const queueUpdate = _dom.DOM.queueUpdate;
18870  let watcher = void 0;
18871
18872  let createArrayObserver = array => {

vendor: 6,429 bytes, lines 18873-19112

18873    throw new Error("Must call enableArrayObservation before observing arrays.");
18874  };
18875
18876  function getNotifier(source) {
18877    let found = source.$fastController || notifierLookup.get(source);
18878
18879    if (found === void 0) {
18880      if (Array.isArray(source)) {
18881        found = createArrayObserver(source);
18882      } else {
18883        notifierLookup.set(source, found = new _notifier.PropertyChangeNotifier(source));
18884      }
18885    }
18886
18887    return found;
18888  }
18889
18890  const getAccessors = (0, _platform.createMetadataLocator)();
18891
18892  class DefaultObservableAccessor {
18893    constructor(name) {
18894      this.name = name;
18895      this.field = `_${name}`;
18896      this.callback = `${name}Changed`;
18897    }
18898
18899    getValue(source) {
18900      if (watcher !== void 0) {
18901        watcher.watch(source, this.name);
18902      }
18903
18904      return source[this.field];
18905    }
18906
18907    setValue(source, newValue) {
18908      const field = this.field;
18909      const oldValue = source[field];
18910
18911      if (oldValue !== newValue) {
18912        source[field] = newValue;
18913        const callback = source[this.callback];
18914
18915        if (typeof callback === "function") {
18916          callback.call(source, oldValue, newValue);
18917        }
18918
18919        getNotifier(source).notify(this.name);
18920      }
18921    }
18922
18923  }
18924
18925  class BindingObserverImplementation extends _notifier.SubscriberSet {
18926    constructor(binding, initialSubscriber, isVolatileBinding = false) {
18927      super(binding, initialSubscriber);
18928      this.binding = binding;
18929      this.isVolatileBinding = isVolatileBinding;
18930      this.needsRefresh = true;
18931      this.needsQueue = true;
18932      this.first = this;
18933      this.last = null;
18934      this.propertySource = void 0;
18935      this.propertyName = void 0;
18936      this.notifier = void 0;
18937      this.next = void 0;
18938    }
18939
18940    observe(source, context) {
18941      if (this.needsRefresh && this.last !== null) {
18942        this.disconnect();
18943      }
18944
18945      const previousWatcher = watcher;
18946      watcher = this.needsRefresh ? this : void 0;
18947      this.needsRefresh = this.isVolatileBinding;
18948      const result = this.binding(source, context);
18949      watcher = previousWatcher;
18950      return result;
18951    }
18952
18953    disconnect() {
18954      if (this.last !== null) {
18955        let current = this.first;
18956
18957        while (current !== void 0) {
18958          current.notifier.unsubscribe(this, current.propertyName);
18959          current = current.next;
18960        }
18961
18962        this.last = null;
18963        this.needsRefresh = this.needsQueue = true;
18964      }
18965    }
18966
18967    watch(propertySource, propertyName) {
18968      const prev = this.last;
18969      const notifier = getNotifier(propertySource);
18970      const current = prev === null ? this.first : {};
18971      current.propertySource = propertySource;
18972      current.propertyName = propertyName;
18973      current.notifier = notifier;
18974      notifier.subscribe(this, propertyName);
18975
18976      if (prev !== null) {
18977        if (!this.needsRefresh) {
18978          // Declaring the variable prior to assignment below circumvents
18979          // a bug in Angular's optimization process causing infinite recursion
18980          // of this watch() method. Details https://github.com/microsoft/fast/issues/4969
18981          let prevValue;
18982          watcher = void 0;
18983          /* eslint-disable-next-line */
18984
18985          prevValue = prev.propertySource[prev.propertyName];
18986          /* eslint-disable-next-line @typescript-eslint/no-this-alias */
18987
18988          watcher = this;
18989
18990          if (propertySource === prevValue) {
18991            this.needsRefresh = true;
18992          }
18993        }
18994
18995        prev.next = current;
18996      }
18997
18998      this.last = current;
18999    }
19000
19001    handleChange() {
19002      if (this.needsQueue) {
19003        this.needsQueue = false;
19004        queueUpdate(this);
19005      }
19006    }
19007
19008    call() {
19009      if (this.last !== null) {
19010        this.needsQueue = true;
19011        this.notify(this);
19012      }
19013    }
19014
19015    records() {
19016      let next = this.first;
19017      return {
19018        next: () => {
19019          const current = next;
19020
19021          if (current === undefined) {
19022            return {
19023              value: void 0,
19024              done: true
19025            };
19026          } else {
19027            next = next.next;
19028            return {
19029              value: current,
19030              done: false
19031            };
19032          }
19033        },
19034        [Symbol.iterator]: function () {
19035          return this;
19036        }
19037      };
19038    }
19039
19040  }
19041
19042  return Object.freeze({
19043    /**
19044     * @internal
19045     * @param factory - The factory used to create array observers.
19046     */
19047    setArrayObserverFactory(factory) {
19048      createArrayObserver = factory;
19049    },
19050
19051    /**
19052     * Gets a notifier for an object or Array.
19053     * @param source - The object or Array to get the notifier for.
19054     */
19055    getNotifier,
19056
19057    /**
19058     * Records a property change for a source object.
19059     * @param source - The object to record the change against.
19060     * @param propertyName - The property to track as changed.
19061     */
19062    track(source, propertyName) {
19063      if (watcher !== void 0) {
19064        watcher.watch(source, propertyName);
19065      }
19066    },
19067
19068    /**
19069     * Notifies watchers that the currently executing property getter or function is volatile
19070     * with respect to its observable dependencies.
19071     */
19072    trackVolatile() {
19073      if (watcher !== void 0) {
19074        watcher.needsRefresh = true;
19075      }
19076    },
19077
19078    /**
19079     * Notifies subscribers of a source object of changes.
19080     * @param source - the object to notify of changes.
19081     * @param args - The change args to pass to subscribers.
19082     */
19083    notify(source, args) {
19084      getNotifier(source).notify(args);
19085    },
19086
19087    /**
19088     * Defines an observable property on an object or prototype.
19089     * @param target - The target object to define the observable on.
19090     * @param nameOrAccessor - The name of the property to define as observable;
19091     * or a custom accessor that specifies the property name and accessor implementation.
19092     */
19093    defineProperty(target, nameOrAccessor) {
19094      if (typeof nameOrAccessor === "string") {
19095        nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
19096      }
19097
19098      getAccessors(target).push(nameOrAccessor);
19099      Reflect.defineProperty(target, nameOrAccessor.name, {
19100        enumerable: true,
19101        get: function () {
19102          return nameOrAccessor.getValue(this);
19103        },
19104        set: function (newValue) {
19105          nameOrAccessor.setValue(this, newValue);
19106        }
19107      });
19108    },
19109
19110    /**
19111     * Finds all the observable accessors defined on the target,
19112     * including its prototype chain.

19113     * @param target - The target object to search for accessor on.
19114     */
19115    getAccessors,
19116
19117    /**
19118     * Creates a {@link BindingObserver} that can watch the
19119     * provided {@link Binding} for changes.
19120     * @param binding - The binding to observe.
19121     * @param initialSubscriber - An initial subscriber to changes in the binding value.
19122     * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
19123     */
19124    binding(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {
19125      return new BindingObserverImplementation(binding, initialSubscriber, isVolatileBinding);
19126    },
19127
19128    /**
19129     * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
19130     * on every evaluation of the value.
19131     * @param binding - The binding to inspect.
19132     */
19133    isVolatileBinding(binding) {
19134      return volatileRegex.test(binding.toString());
19135    }
19136
19137  });
19138});
19139/**
19140 * Decorator: Defines an observable property on the target.
19141 * @param target - The target to define the observable on.
19142 * @param nameOrAccessor - The property name or accessor to define the observable as.
19143 * @public
19144 */
19145
19146
19147exports.Observable = Observable;
19148
19149function observable(target, nameOrAccessor) {
19150  Observable.defineProperty(target, nameOrAccessor);
19151}
19152/**
19153 * Decorator: Marks a property getter as having volatile observable dependencies.
19154 * @param target - The target that the property is defined on.
19155 * @param name - The property name.
19156 * @param name - The existing descriptor.
19157 * @public
19158 */
19159
19160
19161function volatile(target, name, descriptor) {
19162  return Object.assign({}, descriptor, {
19163    get: function () {
19164      Observable.trackVolatile();
19165      return descriptor.get.apply(this);
19166    }
19167  });
19168}
19169
19170const contextEvent = _platform.FAST.getById(3
19171/* contextEvent */
19172, () => {
19173  let current = null;
19174  return {
19175    get() {
19176      return current;
19177    },
19178
19179    set(event) {
19180      current = event;
19181    }
19182
19183  };
19184});
19185/**
19186 * Provides additional contextual information available to behaviors and expressions.
19187 * @public
19188 */
19189
19190
19191class ExecutionContext {
19192  constructor() {
19193    /**
19194     * The index of the current item within a repeat context.
19195     */
19196    this.index = 0;
19197    /**
19198     * The length of the current collection within a repeat context.
19199     */
19200
19201    this.length = 0;
19202    /**
19203     * The parent data object within a repeat context.
19204     */
19205
19206    this.parent = null;
19207    /**
19208     * The parent execution context when in nested context scenarios.
19209     */
19210
19211    this.parentContext = null;
19212  }
19213  /**
19214   * The current event within an event handler.
19215   */
19216
19217
19218  get event() {
19219    return contextEvent.get();
19220  }
19221  /**
19222   * Indicates whether the current item within a repeat context
19223   * has an even index.
19224   */
19225
19226
19227  get isEven() {
19228    return this.index % 2 === 0;
19229  }
19230  /**
19231   * Indicates whether the current item within a repeat context
19232   * has an odd index.
19233   */
19234
19235
19236  get isOdd() {
19237    return this.index % 2 !== 0;
19238  }
19239  /**
19240   * Indicates whether the current item within a repeat context
19241   * is the first item in the collection.
19242   */
19243
19244
19245  get isFirst() {
19246    return this.index === 0;
19247  }
19248  /**
19249   * Indicates whether the current item within a repeat context
19250   * is somewhere in the middle of the collection.
19251   */
19252
19253
19254  get isInMiddle() {
19255    return !this.isFirst && !this.isLast;
19256  }
19257  /**
19258   * Indicates whether the current item within a repeat context
19259   * is the last item in the collection.
19260   */
19261
19262
19263  get isLast() {
19264    return this.index === this.length - 1;
19265  }
19266  /**
19267   * Sets the event for the current execution context.
19268   * @param event - The event to set.
19269   * @internal
19270   */
19271
19272
19273  static setEvent(event) {
19274    contextEvent.set(event);
19275  }
19276
19277}
19278
19279exports.ExecutionContext = ExecutionContext;
19280Observable.defineProperty(ExecutionContext.prototype, "index");
19281Observable.defineProperty(ExecutionContext.prototype, "length");
19282/**
19283 * The default execution context used in binding expressions.
19284 * @public
19285 */
19286
19287const defaultExecutionContext = Object.seal(new ExecutionContext());
19288exports.defaultExecutionContext = defaultExecutionContext;
19289
19290},{"../dom.js":150,"../platform.js":157,"./notifier.js":155}],157:[function(require,module,exports){
19291(function (global){(function (){
19292"use strict";
19293
19294Object.defineProperty(exports, "__esModule", {
19295  value: true
19296});
19297exports.FAST = exports.$global = void 0;
19298exports.createMetadataLocator = createMetadataLocator;
19299exports.emptyArray = void 0;
19300
19301/**
19302 * A reference to globalThis, with support
19303 * for browsers that don't yet support the spec.
19304 * @public
19305 */
19306const $global = function () {
19307  if (typeof globalThis !== "undefined") {
19308    // We're running in a modern environment.
19309    return globalThis;
19310  }
19311
19312  if (typeof global !== "undefined") {
19313    // We're running in NodeJS
19314    return global;
19315  }
19316
19317  if (typeof self !== "undefined") {
19318    // We're running in a worker.
19319    return self;
19320  }
19321
19322  if (typeof window !== "undefined") {
19323    // We're running in the browser's main thread.
19324    return window;
19325  }
19326
19327  try {
19328    // Hopefully we never get here...
19329    // Not all environments allow eval and Function. Use only as a last resort:
19330    // eslint-disable-next-line no-new-func
19331    return new Function("return this")();
19332  } catch (_a) {
19333    // If all fails, give up and create an object.
19334    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
19335    return {};
19336  }
19337}(); // API-only Polyfill for trustedTypes
19338
19339
19340exports.$global = $global;
19341
19342if ($global.trustedTypes === void 0) {
19343  $global.trustedTypes = {
19344    createPolicy: (n, r) => r
19345  };
19346}
19347
19348const propConfig = {
19349  configurable: false,
19350  enumerable: false,
19351  writable: false
19352};
19353
19354if ($global.FAST === void 0) {
19355  Reflect.defineProperty($global, "FAST", Object.assign({
19356    value: Object.create(null)
19357  }, propConfig));
19358}
19359/**
19360 * The FAST global.
19361 * @internal
19362 */
19363
19364
19365const FAST = $global.FAST;
19366exports.FAST = FAST;
19367
19368if (FAST.getById === void 0) {
19369  const storage = Object.create(null);
19370  Reflect.defineProperty(FAST, "getById", Object.assign({
19371    value(id, initialize) {
19372      let found = storage[id];
19373
19374      if (found === void 0) {
19375        found = initialize ? storage[id] = initialize() : null;
19376      }
19377
19378      return found;
19379    }
19380
19381  }, propConfig));
19382}
19383/**
19384 * A readonly, empty array.
19385 * @remarks
19386 * Typically returned by APIs that return arrays when there are
19387 * no actual items to return.
19388 * @internal
19389 */
19390
19391
19392const emptyArray = Object.freeze([]);
19393/**
19394 * Creates a function capable of locating metadata associated with a type.
19395 * @returns A metadata locator function.
19396 * @internal
19397 */
19398
19399exports.emptyArray = emptyArray;
19400
19401function createMetadataLocator() {
19402  const metadataLookup = new WeakMap();
19403  return function (target) {
19404    let metadata = metadataLookup.get(target);
19405
19406    if (metadata === void 0) {
19407      let currentTarget = Reflect.getPrototypeOf(target);
19408
19409      while (metadata === void 0 && currentTarget !== null) {
19410        metadata = metadataLookup.get(currentTarget);
19411        currentTarget = Reflect.getPrototypeOf(currentTarget);
19412      }
19413
19414      metadata = metadata === void 0 ? [] : metadata.slice(0);
19415      metadataLookup.set(target, metadata);
19416    }
19417
19418    return metadata;
19419  };
19420}
19421
19422}

19422).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
19423},{}],158:[function(require,module,exports){
19424"use strict";
19425
19426Object.defineProperty(exports, "__esModule", {
19427  value: true
19428});
19429exports.CSSDirective = void 0;
19430
19431/**
19432 * Directive for use in {@link css}.
19433 *
19434 * @public
19435 */
19436class CSSDirective {
19437  /**
19438   * Creates a CSS fragment to interpolate into the CSS document.
19439   * @returns - the string to interpolate into CSS
19440   */
19441  createCSS() {
19442    return "";
19443  }
19444  /**
19445   * Creates a behavior to bind to the host element.
19446   * @returns - the behavior to bind to the host element, or undefined.
19447   */
19448
19449
19450  createBehavior() {
19451    return undefined;
19452  }
19453
19454}
19455
19456exports.CSSDirective = CSSDirective;
19457
19458},{}],159:[function(require,module,exports){
19459"use strict";
19460
19461Object.defineProperty(exports, "__esModule", {
19462  value: true
19463});
19464exports.css = css;
19465exports.cssPartial = cssPartial;
19466
19467var _cssDirective = require("./css-directive.js");
19468
19469var _elementStyles = require("./element-styles.js");
19470
19471function collectStyles(strings, values) {
19472  const styles = [];
19473  let cssString = "";
19474  const behaviors = [];
19475
19476  for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
19477    cssString += strings[i];
19478    let value = values[i];
19479
19480    if (value instanceof _cssDirective.CSSDirective) {
19481      const behavior = value.createBehavior();
19482      value = value.createCSS();
19483
19484      if (behavior) {
19485        behaviors.push(behavior);
19486      }
19487    }
19488
19489    if (value instanceof _elementStyles.ElementStyles || value instanceof CSSStyleSheet) {
19490      if (cssString.trim() !== "") {
19491        styles.push(cssString);
19492        cssString = "";
19493      }
19494
19495      styles.push(value);
19496    } else {
19497      cssString += value;
19498    }
19499  }
19500
19501  cssString += strings[strings.length - 1];
19502
19503  if (cssString.trim() !== "") {
19504    styles.push(cssString);
19505  }
19506
19507  return {
19508    styles,
19509    behaviors
19510  };
19511}
19512/**
19513 * Transforms a template literal string into styles.

19514 * @param strings - The string fragments that are interpolated with the values.
19515 * @param values - The values that are interpolated with the string fragments.
19516 * @remarks
19517 * The css helper supports interpolation of strings and ElementStyle instances.
19518 * @public
19519 */
19520
19521
19522function css(strings, ...values) {
19523  const {
19524    styles,
19525    behaviors
19526  } = collectStyles(strings, values);
19527
19528  const elementStyles = _elementStyles.ElementStyles.create(styles);
19529
19530  if (behaviors.length) {
19531    elementStyles.withBehaviors(...behaviors);
19532  }
19533
19534  return elementStyles;
19535}
19536
19537class CSSPartial extends _cssDirective.CSSDirective {
19538  constructor(styles, behaviors) {
19539    super();
19540    this.behaviors = behaviors;
19541    this.css = "";
19542    const stylesheets = styles.reduce((accumulated, current) => {
19543      if (typeof current === "string") {
19544        this.css += current;
19545      } else {
19546        accumulated.push(current);
19547      }
19548
19549      return accumulated;
19550    }, []);
19551
19552    if (stylesheets.length) {
19553      this.styles = _elementStyles.ElementStyles.create(stylesheets);
19554    }
19555  }
19556
19557  createBehavior() {
19558    return this;
19559  }
19560
19561  createCSS() {
19562    return this.css;
19563  }
19564
19565  bind(el) {
19566    if (this.styles) {
19567      el.$fastController.addStyles(this.styles);
19568    }
19569
19570    if (this.behaviors.length) {
19571      el.$fastController.addBehaviors(this.behaviors);
19572    }
19573  }
19574
19575  unbind(el) {
19576    if (this.styles) {
19577      el.$fastController.removeStyles(this.styles);
19578    }
19579
19580    if (this.behaviors.length) {
19581      el.$fastController.removeBehaviors(this.behaviors);
19582    }
19583  }
19584
19585}
19586/**
19587 * Transforms a template literal string into partial CSS.

19588 * @param strings - The string fragments that are interpolated with the values.
19589 * @param values - The values that are interpolated with the string fragments.
19590 * @public
19591 */
19592
19593
19594function cssPartial(strings, ...values) {
19595  const {
19596    styles,
19597    behaviors
19598  } = collectStyles(strings, values);
19599  return new CSSPartial(styles, behaviors);
19600}
19601
19602},{"./css-directive.js":158,"./element-styles.js":160}],160:[function(require,module,exports){
19603"use strict";
19604
19605Object.defineProperty(exports, "__esModule", {
19606  value: true
19607});
19608exports.prependToAdoptedStyleSheetsSymbol = exports.StyleElementStyles = exports.ElementStyles = exports.AdoptedStyleSheetsStyles = void 0;
19609
19610var _dom = require("../dom.js");
19611
19612/**
19613 * Represents styles that can be applied to a custom element.
19614 * @public
19615 */
19616class ElementStyles {
19617  constructor() {
19618    this.targets = new WeakSet();
19619  }
19620  /** @internal */
19621
19622
19623  addStylesTo(target) {
19624    this.targets.add(target);
19625  }
19626  /** @internal */
19627
19628
19629  removeStylesFrom(target) {
19630    this.targets.delete(target);
19631  }
19632  /** @internal */
19633
19634
19635  isAttachedTo(target) {
19636    return this.targets.has(target);
19637  }
19638  /**
19639   * Associates behaviors with this set of styles.
19640   * @param behaviors - The behaviors to associate.
19641   */
19642
19643
19644  withBehaviors(...behaviors) {
19645    this.behaviors = this.behaviors === null ? behaviors : this.behaviors.concat(behaviors);
19646    return this;
19647  }
19648
19649}
19650/**
19651 * Create ElementStyles from ComposableStyles.
19652 */
19653
19654
19655exports.ElementStyles = ElementStyles;
19656
19657ElementStyles.create = (() => {
19658  if (_dom.DOM.supportsAdoptedStyleSheets) {
19659    const styleSheetCache = new Map();
19660    return styles => // eslint-disable-next-line @typescript-eslint/no-use-before-define
19661    new AdoptedStyleSheetsStyles(styles, styleSheetCache);
19662  } // eslint-disable-next-line @typescript-eslint/no-use-before-define
19663
19664
19665  return styles => new StyleElementStyles(styles);
19666})();
19667
19668function reduceStyles(styles) {
19669  return styles.map(x => x instanceof ElementStyles ? reduceStyles(x.styles) : [x]).reduce((prev, curr) => prev.concat(curr), []);
19670}
19671
19672function reduceBehaviors(styles) {
19673  return styles.map(x => x instanceof ElementStyles ? x.behaviors : null).reduce((prev, curr) => {
19674    if (curr === null) {
19675      return prev;
19676    }
19677
19678    if (prev === null) {
19679      prev = [];
19680    }
19681
19682    return prev.concat(curr);
19683  }, null);
19684}
19685/**
19686 * A Symbol that can be added to a CSSStyleSheet to cause it to be prepended (rather than appended) to adoptedStyleSheets.
19687 * @public
19688 */
19689
19690
19691const prependToAdoptedStyleSheetsSymbol = Symbol("prependToAdoptedStyleSheets");
19692exports.prependToAdoptedStyleSheetsSymbol = prependToAdoptedStyleSheetsSymbol;
19693
19694function separateSheetsToPrepend(sheets) {
19695  const prepend = [];
19696  const append = [];
19697  sheets.forEach(x => (x[prependToAdoptedStyleSheetsSymbol] ? prepend : append).push(x));
19698  return {
19699    prepend,
19700    append
19701  };
19702}
19703
19704let addAdoptedStyleSheets = (target, sheets) => {
19705  const {
19706    prepend,
19707    append
19708  } = separateSheetsToPrepend(sheets);
19709  target.adoptedStyleSheets = [...prepend, ...target.adoptedStyleSheets, ...append];
19710};
19711
19712let removeAdoptedStyleSheets = (target, sheets) => {
19713  target.adoptedStyleSheets = target.adoptedStyleSheets.filter(x => sheets.indexOf(x) === -1);
19714};
19715
19716if (_dom.DOM.supportsAdoptedStyleSheets) {
19717  try {
19718    // Test if browser implementation uses FrozenArray.
19719    // If not, use push / splice to alter the stylesheets
19720    // in place. This circumvents a bug in Safari 16.4 where
19721    // periodically, assigning the array would previously
19722    // cause sheets to be removed.
19723    document.adoptedStyleSheets.push();
19724    document.adoptedStyleSheets.splice();
19725
19726    addAdoptedStyleSheets = (target, sheets) => {
19727      const {
19728        prepend,
19729        append
19730      } = separateSheetsToPrepend(sheets);
19731      target.adoptedStyleSheets.splice(0, 0, ...prepend);
19732      target.adoptedStyleSheets.push(...append);
19733    };
19734
19735    removeAdoptedStyleSheets = (target, sheets) => {
19736      for (const sheet of sheets) {
19737        const index = target.adoptedStyleSheets.indexOf(sheet);
19738
19739        if (index !== -1) {
19740          target.adoptedStyleSheets.splice(index, 1);
19741        }
19742      }
19743    };
19744  }

vendor: 5,619 bytes, lines 19744-19962

19744 catch (e) {// Do nothing if an error is thrown, the default
19745    // case handles FrozenArray.
19746  }
19747}
19748/**
19749 * https://wicg.github.io/construct-stylesheets/
19750 * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
19751 *
19752 * @internal
19753 */
19754
19755
19756class AdoptedStyleSheetsStyles extends ElementStyles {
19757  constructor(styles, styleSheetCache) {
19758    super();
19759    this.styles = styles;
19760    this.styleSheetCache = styleSheetCache;
19761    this._styleSheets = void 0;
19762    this.behaviors = reduceBehaviors(styles);
19763  }
19764
19765  get styleSheets() {
19766    if (this._styleSheets === void 0) {
19767      const styles = this.styles;
19768      const styleSheetCache = this.styleSheetCache;
19769      this._styleSheets = reduceStyles(styles).map(x => {
19770        if (x instanceof CSSStyleSheet) {
19771          return x;
19772        }
19773
19774        let sheet = styleSheetCache.get(x);
19775
19776        if (sheet === void 0) {
19777          sheet = new CSSStyleSheet();
19778          sheet.replaceSync(x);
19779          styleSheetCache.set(x, sheet);
19780        }
19781
19782        return sheet;
19783      });
19784    }
19785
19786    return this._styleSheets;
19787  }
19788
19789  addStylesTo(target) {
19790    addAdoptedStyleSheets(target, this.styleSheets);
19791    super.addStylesTo(target);
19792  }
19793
19794  removeStylesFrom(target) {
19795    removeAdoptedStyleSheets(target, this.styleSheets);
19796    super.removeStylesFrom(target);
19797  }
19798
19799}
19800
19801exports.AdoptedStyleSheetsStyles = AdoptedStyleSheetsStyles;
19802let styleClassId = 0;
19803
19804function getNextStyleClass() {
19805  return `fast-style-class-${++styleClassId}`;
19806}
19807/**
19808 * @internal
19809 */
19810
19811
19812class StyleElementStyles extends ElementStyles {
19813  constructor(styles) {
19814    super();
19815    this.styles = styles;
19816    this.behaviors = null;
19817    this.behaviors = reduceBehaviors(styles);
19818    this.styleSheets = reduceStyles(styles);
19819    this.styleClass = getNextStyleClass();
19820  }
19821
19822  addStylesTo(target) {
19823    const styleSheets = this.styleSheets;
19824    const styleClass = this.styleClass;
19825    target = this.normalizeTarget(target);
19826
19827    for (let i = 0; i < styleSheets.length; i++) {
19828      const element = document.createElement("style");
19829      element.innerHTML = styleSheets[i];
19830      element.className = styleClass;
19831      target.append(element);
19832    }
19833
19834    super.addStylesTo(target);
19835  }
19836
19837  removeStylesFrom(target) {
19838    target = this.normalizeTarget(target);
19839    const styles = target.querySelectorAll(`.${this.styleClass}`);
19840
19841    for (let i = 0, ii = styles.length; i < ii; ++i) {
19842      target.removeChild(styles[i]);
19843    }
19844
19845    super.removeStylesFrom(target);
19846  }
19847
19848  isAttachedTo(target) {
19849    return super.isAttachedTo(this.normalizeTarget(target));
19850  }
19851
19852  normalizeTarget(target) {
19853    return target === document ? document.body : target;
19854  }
19855
19856}
19857
19858exports.StyleElementStyles = StyleElementStyles;
19859
19860},{"../dom.js":150}],161:[function(require,module,exports){
19861"use strict";
19862
19863Object.defineProperty(exports, "__esModule", {
19864  value: true
19865});
19866exports.HTMLBindingDirective = exports.BindingBehavior = void 0;
19867
19868var _dom = require("../dom.js");
19869
19870var _observable = require("../observation/observable.js");
19871
19872var _htmlDirective = require("./html-directive.js");
19873
19874function normalBind(source, context) {
19875  this.source = source;
19876  this.context = context;
19877
19878  if (this.bindingObserver === null) {
19879    this.bindingObserver = _observable.Observable.binding(this.binding, this, this.isBindingVolatile);
19880  }
19881
19882  this.updateTarget(this.bindingObserver.observe(source, context));
19883}
19884
19885function triggerBind(source, context) {
19886  this.source = source;
19887  this.context = context;
19888  this.target.addEventListener(this.targetName, this);
19889}
19890
19891function normalUnbind() {
19892  this.bindingObserver.disconnect();
19893  this.source = null;
19894  this.context = null;
19895}
19896
19897function contentUnbind() {
19898  this.bindingObserver.disconnect();
19899  this.source = null;
19900  this.context = null;
19901  const view = this.target.$fastView;
19902
19903  if (view !== void 0 && view.isComposed) {
19904    view.unbind();
19905    view.needsBindOnly = true;
19906  }
19907}
19908
19909function triggerUnbind() {
19910  this.target.removeEventListener(this.targetName, this);
19911  this.source = null;
19912  this.context = null;
19913}
19914
19915function updateAttributeTarget(value) {
19916  _dom.DOM.setAttribute(this.target, this.targetName, value);
19917}
19918
19919function updateBooleanAttributeTarget(value) {
19920  _dom.DOM.setBooleanAttribute(this.target, this.targetName, value);
19921}
19922
19923function updateContentTarget(value) {
19924  // If there's no actual value, then this equates to the
19925  // empty string for the purposes of content bindings.
19926  if (value === null || value === undefined) {
19927    value = "";
19928  } // If the value has a "create" method, then it's a template-like.
19929
19930
19931  if (value.create) {
19932    this.target.textContent = "";
19933    let view = this.target.$fastView; // If there's no previous view that we might be able to
19934    // reuse then create a new view from the template.
19935
19936    if (view === void 0) {
19937      view = value.create();
19938    } else {
19939      // If there is a previous view, but it wasn't created
19940      // from the same template as the new value, then we
19941      // need to remove the old view if it's still in the DOM
19942      // and create a new view from the template.
19943      if (this.target.$fastTemplate !== value) {
19944        if (view.isComposed) {
19945          view.remove();
19946          view.unbind();
19947        }
19948
19949        view = value.create();
19950      }
19951    } // It's possible that the value is the same as the previous template
19952    // and that there's actually no need to compose it.
19953
19954
19955    if (!view.isComposed) {
19956      view.isComposed = true;
19957      view.bind(this.source, this.context);
19958      view.insertBefore(this.target);
19959      this.target.$fastView = view;
19960      this.target.$fastTemplate = value;
19961    } else if (view.needsBindOnly) {
19962      view.needsBindOnly = false;

19963      view.bind(this.source, this.context);
19964    }
19965  } else {
19966    const view = this.target.$fastView; // If there is a view and it's currently composed into
19967    // the DOM, then we need to remove it.
19968
19969    if (view !== void 0 && view.isComposed) {
19970      view.isComposed = false;
19971      view.remove();
19972
19973      if (view.needsBindOnly) {
19974        view.needsBindOnly = false;
19975      } else {
19976        view.unbind();
19977      }
19978    }
19979
19980    this.target.textContent = value;
19981  }
19982}
19983
19984function updatePropertyTarget(value) {
19985  this.target[this.targetName] = value;
19986}
19987
19988function updateClassTarget(value) {
19989  const classVersions = this.classVersions || Object.create(null);
19990  const target = this.target;
19991  let version = this.version || 0; // Add the classes, tracking the version at which they were added.
19992
19993  if (value !== null && value !== undefined && value.length) {
19994    const names = value.split(/\s+/);
19995
19996    for (let i = 0, ii = names.length; i < ii; ++i) {
19997      const currentName = names[i];
19998
19999      if (currentName === "") {
20000        continue;
20001      }
20002
20003      classVersions[currentName] = version;
20004      target.classList.add(currentName);
20005    }
20006  }
20007
20008  this.classVersions = classVersions;
20009  this.version = version + 1; // If this is the first call to add classes, there's no need to remove old ones.
20010
20011  if (version === 0) {
20012    return;
20013  } // Remove classes from the previous version.
20014
20015
20016  version -= 1;
20017
20018  for (const name in classVersions) {
20019    if (classVersions[name] === version) {
20020      target.classList.remove(name);
20021    }
20022  }
20023}
20024/**
20025 * A directive that configures data binding to element content and attributes.
20026 * @public
20027 */
20028
20029
20030class HTMLBindingDirective extends _htmlDirective.TargetedHTMLDirective {
20031  /**
20032   * Creates an instance of BindingDirective.
20033   * @param binding - A binding that returns the data used to update the DOM.
20034   */
20035  constructor(binding) {
20036    super();
20037    this.binding = binding;
20038    this.bind = normalBind;
20039    this.unbind = normalUnbind;
20040    this.updateTarget = updateAttributeTarget;
20041    this.isBindingVolatile = _observable.Observable.isVolatileBinding(this.binding);
20042  }
20043  /**
20044   * Gets/sets the name of the attribute or property that this
20045   * binding is targeting.
20046   */
20047
20048
20049  get targetName() {
20050    return this.originalTargetName;
20051  }
20052
20053  set targetName(value) {
20054    this.originalTargetName = value;
20055
20056    if (value === void 0) {
20057      return;
20058    }
20059
20060    switch (value[0]) {
20061      case ":":
20062        this.cleanedTargetName = value.substr(1);
20063        this.updateTarget = updatePropertyTarget;
20064
20065        if (this.cleanedTargetName === "innerHTML") {
20066          const binding = this.binding;
20067
20068          this.binding = (s, c) => _dom.DOM.createHTML(binding(s, c));
20069        }
20070
20071        break;
20072
20073      case "?":
20074        this.cleanedTargetName = value.substr(1);
20075        this.updateTarget = updateBooleanAttributeTarget;
20076        break;
20077
20078      case "@":
20079        this.cleanedTargetName = value.substr(1);
20080        this.bind = triggerBind;
20081        this.unbind = triggerUnbind;
20082        break;
20083
20084      default:
20085        this.cleanedTargetName = value;
20086
20087        if (value === "class") {
20088          this.updateTarget = updateClassTarget;
20089        }
20090
20091        break;
20092    }
20093  }
20094  /**
20095   * Makes this binding target the content of an element rather than
20096   * a particular attribute or property.
20097   */
20098
20099
20100  targetAtContent() {
20101    this.updateTarget = updateContentTarget;
20102    this.unbind = contentUnbind;
20103  }
20104  /**
20105   * Creates the runtime BindingBehavior instance based on the configuration
20106   * information stored in the BindingDirective.
20107   * @param target - The target node that the binding behavior should attach to.
20108   */
20109
20110
20111  createBehavior(target) {
20112    /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
20113    return new BindingBehavior(target, this.binding, this.isBindingVolatile, this.bind, this.unbind, this.updateTarget, this.cleanedTargetName);
20114  }
20115
20116}
20117/**
20118 * A behavior that updates content and attributes based on a configured
20119 * BindingDirective.
20120 * @public
20121 */
20122
20123
20124exports.HTMLBindingDirective = HTMLBindingDirective;
20125
20126class BindingBehavior {
20127  /**
20128   * Creates an instance of BindingBehavior.
20129   * @param target - The target of the data updates.
20130   * @param binding - The binding that returns the latest value for an update.
20131   * @param isBindingVolatile - Indicates whether the binding has volatile dependencies.
20132   * @param bind - The operation to perform during binding.
20133   * @param unbind - The operation to perform during unbinding.
20134   * @param updateTarget - The operation to perform when updating.
20135   * @param targetName - The name of the target attribute or property to update.
20136   */
20137  constructor(target, binding, isBindingVolatile, bind, unbind, updateTarget, targetName) {
20138    /** @internal */
20139    this.source = null;
20140    /** @internal */
20141
20142    this.context = null;
20143    /** @internal */
20144
20145    this.bindingObserver = null;
20146    this.target = target;
20147    this.binding = binding;
20148    this.isBindingVolatile = isBindingVolatile;
20149    this.bind = bind;
20150    this.unbind = unbind;
20151    this.updateTarget = updateTarget;
20152    this.targetName = targetName;
20153  }
20154  /** @internal */
20155
20156
20157  handleChange() {
20158    this.updateTarget(this.bindingObserver.observe(this.source, this.context));
20159  }
20160  /** @internal */
20161
20162
20163  handleEvent(event) {
20164    _observable.ExecutionContext.setEvent(event);
20165
20166    const result = this.binding(this.source, this.context);
20167
20168    _observable.ExecutionContext.setEvent(null);
20169
20170    if (result !== true) {
20171      event.preventDefault();
20172    }
20173  }
20174
20175}
20176
20177exports.BindingBehavior = BindingBehavior;
20178
20179},{"../dom.js":150,"../observation/observable.js":156,"./html-directive.js":164}],162:[function(require,module,exports){
20180"use strict";
20181
20182Object.defineProperty(exports, "__esModule", {
20183  value: true
20184});
20185exports.ChildrenBehavior = void 0;
20186exports.children = children;
20187
20188var _htmlDirective = require("./html-directive.js");
20189
20190var _nodeObservation = require("./node-observation.js");
20191
20192/**
20193 * The runtime behavior for child node observation.
20194 * @public
20195 */
20196class ChildrenBehavior extends _nodeObservation.NodeObservationBehavior {
20197  /**
20198   * Creates an instance of ChildrenBehavior.
20199   * @param target - The element target to observe children on.
20200   * @param options - The options to use when observing the element children.
20201   */
20202  constructor(target, options) {
20203    super(target, options);
20204    this.observer = null;
20205    options.childList = true;
20206  }
20207  /**
20208   * Begins observation of the nodes.
20209   */
20210
20211
20212  observe() {
20213    if (this.observer === null) {
20214      this.observer = new MutationObserver(this.handleEvent.bind(this));
20215    }
20216
20217    this.observer.observe(this.target, this.options);
20218  }
20219  /**
20220   * Disconnects observation of the nodes.
20221   */
20222
20223
20224  disconnect() {
20225    this.observer.disconnect();
20226  }
20227  /**
20228   * Retrieves the nodes that should be assigned to the target.
20229   */
20230
20231
20232  getNodes() {
20233    if ("subtree" in this.options) {
20234      return Array.from(this.target.querySelectorAll(this.options.selector));
20235    }
20236
20237    return Array.from(this.target.childNodes);
20238  }
20239
20240}
20241/**
20242 * A directive that observes the `childNodes` of an element and updates a property
20243 * whenever they change.
20244 * @param propertyOrOptions - The options used to configure child node observation.
20245 * @public
20246 */
20247
20248
20249exports.ChildrenBehavior = ChildrenBehavior;
20250
20251function children(propertyOrOptions) {
20252  if (typeof propertyOrOptions === "string") {
20253    propertyOrOptions = {
20254      property: propertyOrOptions
20255    };
20256  }
20257
20258  return new _htmlDirective.AttachedBehaviorHTMLDirective("fast-children", ChildrenBehavior, propertyOrOptions);
20259}
20260
20261},{"./html-directive.js":164,"./node-observation.js":165}],163:[function(require,module,exports){
20262"use strict";
20263
20264Object.defineProperty(exports, "__esModule", {
20265  value: true
20266});
20267exports.compileTemplate = compileTemplate;
20268
20269var _dom = require("../dom.js");
20270
20271var _binding = require("./binding.js");
20272
20273let sharedContext = null;
20274
20275class CompilationContext {
20276  addFactory(factory) {
20277    factory.targetIndex = this.targetIndex;
20278    this.behaviorFactories.push(factory);
20279  }
20280
20281  captureContentBinding(directive) {
20282    directive.targetAtContent();
20283    this.addFactory(directive);
20284  }
20285
20286  reset() {
20287    this.behaviorFactories = [];
20288    this.targetIndex = -1;
20289  }
20290
20291  release() {
20292    /* eslint-disable-next-line @typescript-eslint/no-this-alias */
20293    sharedContext = this;
20294  }
20295
20296  static borrow(directives) {
20297    const shareable = sharedContext || new CompilationContext();
20298    shareable.directives = directives;
20299    shareable.reset();
20300    sharedContext = null;
20301    return shareable;
20302  }
20303
20304}
20305
20306function createAggregateBinding(parts) {
20307  if (parts.length === 1) {
20308    return parts[0];
20309  }
20310
20311  let targetName;
20312  const partCount = parts.length;
20313  const finalParts = parts.map(x => {
20314    if (typeof x === "string") {
20315      return () => x;
20316    }
20317
20318    targetName = x.targetName || targetName;
20319    return x.binding;
20320  });
20321
20322  const binding = (scope, context) => {
20323    let output = "";
20324
20325    for (let i = 0; i < partCount; ++i) {
20326      output += finalParts[i](scope, context);
20327    }
20328
20329    return output;
20330  };
20331
20332  const directive = new _binding.HTMLBindingDirective(binding);
20333  directive.targetName = targetName;
20334  return directive;
20335}
20336
20337const interpolationEndLength = _dom._interpolationEnd.length;
20338
20339function parseContent(context, value) {
20340  const valueParts = value.split(_dom._interpolationStart);
20341
20342  if (valueParts.length === 1) {
20343    return null;
20344  }
20345
20346  const bindingParts = [];
20347
20348  for (let i = 0, ii = valueParts.length; i < ii; ++i) {
20349    const current = valueParts[i];
20350    const index = current.indexOf(_dom._interpolationEnd);
20351    let literal;
20352
20353    if (index === -1) {
20354      literal = current;
20355    } else {
20356      const directiveIndex = parseInt(current.substring(0, index));
20357      bindingParts.push(context.directives[directiveIndex]);
20358      literal = current.substring(index + interpolationEndLength);
20359    }
20360
20361    if (literal !== "") {
20362      bindingParts.push(literal);
20363    }
20364  }
20365
20366  return bindingParts;
20367}
20368
20369function compileAttributes(context, node, includeBasicValues = false) {
20370  const attributes = node.attributes;
20371
20372  for (let i = 0, ii = attributes.length; i < ii; ++i) {
20373    const attr = attributes[i];
20374    const attrValue = attr.value;
20375    const parseResult = parseContent(context, attrValue);
20376    let result = null;
20377
20378    if (parseResult === null) {
20379      if (includeBasicValues) {
20380        result = new _binding.HTMLBindingDirective(() => attrValue);
20381        result.targetName = attr.name;
20382      }
20383    } else {
20384      result = createAggregateBinding(parseResult);
20385    }
20386
20387    if (result !== null) {
20388      node.removeAttributeNode(attr);
20389      i--;
20390      ii--;
20391      context.addFactory(result);
20392    }
20393  }
20394}
20395
20396function compileContent(context, node, walker) {
20397  const parseResult = parseContent(context, node.textContent);
20398
20399  if (parseResult !== null) {
20400    let lastNode = node;
20401
20402    for (let i = 0, ii = parseResult.length; i < ii; ++i) {
20403      const currentPart = parseResult[i];
20404      const currentNode = i === 0 ? node : lastNode.parentNode.insertBefore(document.createTextNode(""), lastNode.nextSibling);
20405
20406      if (typeof currentPart === "string") {
20407        currentNode.textContent = currentPart;
20408      } else {
20409        currentNode.textContent = " ";
20410        context.captureContentBinding(currentPart);
20411      }
20412
20413      lastNode = currentNode;
20414      context.targetIndex++;
20415

20416      if (currentNode !== node) {
20417        walker.nextNode();
20418      }
20419    }
20420
20421    context.targetIndex--;
20422  }
20423}
20424/**
20425 * Compiles a template and associated directives into a raw compilation
20426 * result which include a cloneable DocumentFragment and factories capable
20427 * of attaching runtime behavior to nodes within the fragment.
20428 * @param template - The template to compile.
20429 * @param directives - The directives referenced by the template.
20430 * @remarks
20431 * The template that is provided for compilation is altered in-place
20432 * and cannot be compiled again. If the original template must be preserved,
20433 * it is recommended that you clone the original and pass the clone to this API.
20434 * @public
20435 */
20436
20437
20438function compileTemplate(template, directives) {
20439  const fragment = template.content; // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
20440
20441  document.adoptNode(fragment);
20442  const context = CompilationContext.borrow(directives);
20443  compileAttributes(context, template, true);
20444  const hostBehaviorFactories = context.behaviorFactories;
20445  context.reset();
20446
20447  const walker = _dom.DOM.createTemplateWalker(fragment);
20448
20449  let node;
20450
20451  while (node = walker.nextNode()) {
20452    context.targetIndex++;
20453
20454    switch (node.nodeType) {
20455      case 1:
20456        // element node
20457        compileAttributes(context, node);
20458        break;
20459
20460      case 3:
20461        // text node
20462        compileContent(context, node, walker);
20463        break;
20464
20465      case 8:
20466        // comment
20467        if (_dom.DOM.isMarker(node)) {
20468          context.addFactory(directives[_dom.DOM.extractDirectiveIndexFromMarker(node)]);
20469        }
20470
20471    }
20472  }
20473
20474  let targetOffset = 0;
20475
20476  if ( // If the first node in a fragment is a marker, that means it's an unstable first node,
20477  // because something like a when, repeat, etc. could add nodes before the marker.
20478  // To mitigate this, we insert a stable first node. However, if we insert a node,
20479  // that will alter the result of the TreeWalker. So, we also need to offset the target index.
20480  _dom.DOM.isMarker(fragment.firstChild) || // Or if there is only one node and a directive, it means the template's content
20481  // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
20482  // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
20483  fragment.childNodes.length === 1 && directives.length) {
20484    fragment.insertBefore(document.createComment(""), fragment.firstChild);
20485    targetOffset = -1;
20486  }
20487
20488  const viewBehaviorFactories = context.behaviorFactories;
20489  context.release();
20490  return {
20491    fragment,
20492    viewBehaviorFactories,
20493    hostBehaviorFactories,
20494    targetOffset
20495  };
20496}
20497
20498},{"../dom.js":150,"./binding.js":161}],164:[function(require,module,exports){
20499"use strict";
20500
20501Object.defineProperty(exports, "__esModule", {
20502  value: true
20503});
20504exports.TargetedHTMLDirective = exports.HTMLDirective = exports.AttachedBehaviorHTMLDirective = void 0;
20505
20506var _dom = require("../dom.js");
20507
20508/**
20509 * Instructs the template engine to apply behavior to a node.
20510 * @public
20511 */
20512class HTMLDirective {
20513  constructor() {
20514    /**
20515     * The index of the DOM node to which the created behavior will apply.
20516     */
20517    this.targetIndex = 0;
20518  }
20519
20520}
20521/**
20522 * A {@link HTMLDirective} that targets a named attribute or property on a node.
20523 * @public
20524 */
20525
20526
20527exports.HTMLDirective = HTMLDirective;
20528
20529class TargetedHTMLDirective extends HTMLDirective {
20530  constructor() {
20531    super(...arguments);
20532    /**
20533     * Creates a placeholder string based on the directive's index within the template.
20534     * @param index - The index of the directive within the template.
20535     */
20536
20537    this.createPlaceholder = _dom.DOM.createInterpolationPlaceholder;
20538  }
20539
20540}
20541/**
20542 * A directive that attaches special behavior to an element via a custom attribute.
20543 * @public
20544 */
20545
20546
20547exports.TargetedHTMLDirective = TargetedHTMLDirective;
20548
20549class AttachedBehaviorHTMLDirective extends HTMLDirective {
20550  /**
20551   *
20552   * @param name - The name of the behavior; used as a custom attribute on the element.
20553   * @param behavior - The behavior to instantiate and attach to the element.
20554   * @param options - Options to pass to the behavior during creation.
20555   */
20556  constructor(name, behavior, options) {
20557    super();
20558    this.name = name;
20559    this.behavior = behavior;
20560    this.options = options;
20561  }
20562  /**
20563   * Creates a placeholder string based on the directive's index within the template.
20564   * @param index - The index of the directive within the template.
20565   * @remarks
20566   * Creates a custom attribute placeholder.
20567   */
20568
20569
20570  createPlaceholder(index) {
20571    return _dom.DOM.createCustomAttributePlaceholder(this.name, index);
20572  }
20573  /**
20574   * Creates a behavior for the provided target node.
20575   * @param target - The node instance to create the behavior for.
20576   * @remarks
20577   * Creates an instance of the `behavior` type this directive was constructed with
20578   * and passes the target and options to that `behavior`'s constructor.
20579   */
20580
20581
20582  createBehavior(target) {
20583    return new this.behavior(target, this.options);
20584  }
20585
20586}
20587
20588exports.AttachedBehaviorHTMLDirective = AttachedBehaviorHTMLDirective;
20589
20590},{"../dom.js":150}],165:[function(require,module,exports){
20591"use strict";
20592
20593Object.defineProperty(exports, "__esModule", {
20594  value: true
20595});
20596exports.NodeObservationBehavior = void 0;
20597exports.elements = elements;
20598
20599var _observable = require("../observation/observable.js");
20600
20601var _platform = require("../platform.js");
20602
20603/**
20604 * Creates a function that can be used to filter a Node array, selecting only elements.
20605 * @param selector - An optional selector to restrict the filter to.
20606 * @public
20607 */
20608function elements(selector) {
20609  if (selector) {
20610    return function (value, index, array) {
20611      return value.nodeType === 1 && value.matches(selector);
20612    };
20613  }
20614
20615  return function (value, index, array) {
20616    return value.nodeType === 1;
20617  };
20618}
20619/**
20620 * A base class for node observation.
20621 * @internal
20622 */
20623
20624
20625class NodeObservationBehavior {
20626  /**
20627   * Creates an instance of NodeObservationBehavior.
20628   * @param target - The target to assign the nodes property on.
20629   * @param options - The options to use in configuring node observation.
20630   */
20631  constructor(target, options) {
20632    this.target = target;
20633    this.options = options;
20634    this.source = null;
20635  }
20636  /**
20637   * Bind this behavior to the source.
20638   * @param source - The source to bind to.
20639   * @param context - The execution context that the binding is operating within.
20640   */
20641
20642
20643  bind(source) {
20644    const name = this.options.property;
20645    this.shouldUpdate = _observable.Observable.getAccessors(source).some(x => x.name === name);
20646    this.source = source;
20647    this.updateTarget(this.computeNodes());
20648
20649    if (this.shouldUpdate) {
20650      this.observe();
20651    }
20652  }
20653  /**
20654   * Unbinds this behavior from the source.
20655   * @param source - The source to unbind from.
20656   */
20657
20658
20659  unbind() {
20660    this.updateTarget(_platform.emptyArray);
20661    this.source = null;
20662
20663    if (this.shouldUpdate) {
20664      this.disconnect();
20665    }
20666  }
20667  /** @internal */
20668
20669
20670  handleEvent() {
20671    this.updateTarget(this.computeNodes());
20672  }
20673
20674  computeNodes() {
20675    let nodes = this.getNodes();
20676
20677    if (this.options.filter !== void 0) {
20678      nodes = nodes.filter(this.options.filter);
20679    }
20680
20681    return nodes;
20682  }
20683
20684  updateTarget(value) {
20685    this.source[this.options.property] = value;
20686  }
20687
20688}
20689
20690exports.NodeObservationBehavior = NodeObservationBehavior;
20691
20692},{"../observation/observable.js":156,"../platform.js":157}],166:[function(require,module,exports){
20693"use strict";
20694
20695Object.defineProperty(exports, "__esModule", {
20696  value: true
20697});
20698exports.RefBehavior = void 0;
20699exports.ref = ref;
20700
20701var _htmlDirective = require("./html-directive.js");
20702
20703/**
20704 * The runtime behavior for template references.
20705 * @public
20706 */
20707class RefBehavior {
20708  /**
20709   * Creates an instance of RefBehavior.
20710   * @param target - The element to reference.
20711   * @param propertyName - The name of the property to assign the reference to.
20712   */
20713  constructor(target, propertyName) {
20714    this.target = target;
20715    this.propertyName = propertyName;
20716  }
20717  /**
20718   * Bind this behavior to the source.
20719   * @param source - The source to bind to.
20720   * @param context - The execution context that the binding is operating within.
20721   */
20722
20723
20724  bind(source) {
20725    source[this.propertyName] = this.target;
20726  }
20727  /**
20728   * Unbinds this behavior from the source.
20729   * @param source - The source to unbind from.
20730   */
20731
20732  /* eslint-disable-next-line @typescript-eslint/no-empty-function */
20733
20734
20735  unbind() {}
20736
20737}

20737
20738/**
20739 * A directive that observes the updates a property with a reference to the element.
20740 * @param propertyName - The name of the property to assign the reference to.
20741 * @public
20742 */
20743
20744
20745exports.RefBehavior = RefBehavior;
20746
20747function ref(propertyName) {
20748  return new _htmlDirective.AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
20749}
20750
20751},{"./html-directive.js":164}],167:[function(require,module,exports){
20752"use strict";
20753
20754Object.defineProperty(exports, "__esModule", {
20755  value: true
20756});
20757exports.RepeatDirective = exports.RepeatBehavior = void 0;
20758exports.repeat = repeat;
20759
20760var _dom = require("../dom.js");
20761
20762var _observable = require("../observation/observable.js");
20763
20764var _arrayObserver = require("../observation/array-observer.js");
20765
20766var _platform = require("../platform.js");
20767
20768var _htmlDirective = require("./html-directive.js");
20769
20770var _view = require("./view.js");
20771
20772const defaultRepeatOptions = Object.freeze({
20773  positioning: false,
20774  recycle: true
20775});
20776
20777function bindWithoutPositioning(view, items, index, context) {
20778  view.bind(items[index], context);
20779}
20780
20781function bindWithPositioning(view, items, index, context) {
20782  const childContext = Object.create(context);
20783  childContext.index = index;
20784  childContext.length = items.length;
20785  view.bind(items[index], childContext);
20786}
20787/**
20788 * A behavior that renders a template for each item in an array.
20789 * @public
20790 */
20791
20792
20793class RepeatBehavior {
20794  /**
20795   * Creates an instance of RepeatBehavior.
20796   * @param location - The location in the DOM to render the repeat.
20797   * @param itemsBinding - The array to render.
20798   * @param isItemsBindingVolatile - Indicates whether the items binding has volatile dependencies.
20799   * @param templateBinding - The template to render for each item.
20800   * @param isTemplateBindingVolatile - Indicates whether the template binding has volatile dependencies.
20801   * @param options - Options used to turn on special repeat features.
20802   */
20803  constructor(location, itemsBinding, isItemsBindingVolatile, templateBinding, isTemplateBindingVolatile, options) {
20804    this.location = location;
20805    this.itemsBinding = itemsBinding;
20806    this.templateBinding = templateBinding;
20807    this.options = options;
20808    this.source = null;
20809    this.views = [];
20810    this.items = null;
20811    this.itemsObserver = null;
20812    this.originalContext = void 0;
20813    this.childContext = void 0;
20814    this.bindView = bindWithoutPositioning;
20815    this.itemsBindingObserver = _observable.Observable.binding(itemsBinding, this, isItemsBindingVolatile);
20816    this.templateBindingObserver = _observable.Observable.binding(templateBinding, this, isTemplateBindingVolatile);
20817
20818    if (options.positioning) {
20819      this.bindView = bindWithPositioning;
20820    }
20821  }
20822  /**
20823   * Bind this behavior to the source.
20824   * @param source - The source to bind to.
20825   * @param context - The execution context that the binding is operating within.
20826   */
20827
20828
20829  bind(source, context) {
20830    this.source = source;
20831    this.originalContext = context;
20832    this.childContext = Object.create(context);
20833    this.childContext.parent = source;
20834    this.childContext.parentContext = this.originalContext;
20835    this.items = this.itemsBindingObserver.observe(source, this.originalContext);
20836    this.template = this.templateBindingObserver.observe(source, this.originalContext);
20837    this.observeItems(true);
20838    this.refreshAllViews();
20839  }
20840  /**
20841   * Unbinds this behavior from the source.
20842   * @param source - The source to unbind from.
20843   */
20844
20845
20846  unbind() {
20847    this.source = null;
20848    this.items = null;
20849
20850    if (this.itemsObserver !== null) {
20851      this.itemsObserver.unsubscribe(this);
20852    }
20853
20854    this.unbindAllViews();
20855    this.itemsBindingObserver.disconnect();
20856    this.templateBindingObserver.disconnect();
20857  }
20858  /** @internal */
20859
20860
20861  handleChange(source, args) {
20862    if (source === this.itemsBinding) {
20863      this.items = this.itemsBindingObserver.observe(this.source, this.originalContext);
20864      this.observeItems();
20865      this.refreshAllViews();
20866    } else if (source === this.templateBinding) {
20867      this.template = this.templateBindingObserver.observe(this.source, this.originalContext);
20868      this.refreshAllViews(true);
20869    } else {
20870      this.updateViews(args);
20871    }
20872  }
20873
20874  observeItems(force = false) {
20875    if (!this.items) {
20876      this.items = _platform.emptyArray;
20877      return;
20878    }
20879
20880    const oldObserver = this.itemsObserver;
20881
20882    const newObserver = this.itemsObserver = _observable.Observable.getNotifier(this.items);
20883
20884    const hasNewObserver = oldObserver !== newObserver;
20885
20886    if (hasNewObserver && oldObserver !== null) {
20887      oldObserver.unsubscribe(this);
20888    }
20889
20890    if (hasNewObserver || force) {
20891      newObserver.subscribe(this);
20892    }
20893  }
20894
20895  updateViews(splices) {
20896    const childContext = this.childContext;
20897    const views = this.views;
20898    const bindView = this.bindView;
20899    const items = this.items;
20900    const template = this.template;
20901    const recycle = this.options.recycle;
20902    const leftoverViews = [];
20903    let leftoverIndex = 0;
20904    let availableViews = 0;
20905

20906    for (let i = 0, ii = splices.length; i < ii; ++i) {
20907      const splice = splices[i];
20908      const removed = splice.removed;
20909      let removeIndex = 0;
20910      let addIndex = splice.index;
20911      const end = addIndex + splice.addedCount;
20912      const removedViews = views.splice(splice.index, removed.length);
20913      const totalAvailableViews = availableViews = leftoverViews.length + removedViews.length;
20914
20915      for (; addIndex < end; ++addIndex) {
20916        const neighbor = views[addIndex];
20917        const location = neighbor ? neighbor.firstChild : this.location;
20918        let view;
20919
20920        if (recycle && availableViews > 0) {
20921          if (removeIndex <= totalAvailableViews && removedViews.length > 0) {
20922            view = removedViews[removeIndex];
20923            removeIndex++;
20924          } else {
20925            view = leftoverViews[leftoverIndex];
20926            leftoverIndex++;
20927          }
20928
20929          availableViews--;
20930        } else {
20931          view = template.create();
20932        }
20933
20934        views.splice(addIndex, 0, view);
20935        bindView(view, items, addIndex, childContext);
20936        view.insertBefore(location);
20937      }
20938
20939      if (removedViews[removeIndex]) {
20940        leftoverViews.push(...removedViews.slice(removeIndex));
20941      }
20942    }
20943
20944    for (let i = leftoverIndex, ii = leftoverViews.length; i < ii; ++i) {
20945      leftoverViews[i].dispose();
20946    }
20947
20948    if (this.options.positioning) {
20949      for (let i = 0, ii = views.length; i < ii; ++i) {
20950        const currentContext = views[i].context;
20951        currentContext.length = ii;
20952        currentContext.index = i;
20953      }
20954    }
20955  }
20956
20957  refreshAllViews(templateChanged = false) {
20958    const items = this.items;
20959    const childContext = this.childContext;
20960    const template = this.template;
20961    const location = this.location;
20962    const bindView = this.bindView;
20963    let itemsLength = items.length;
20964    let views = this.views;
20965    let viewsLength = views.length;
20966
20967    if (itemsLength === 0 || templateChanged || !this.options.recycle) {
20968      // all views need to be removed
20969      _view.HTMLView.disposeContiguousBatch(views);
20970
20971      viewsLength = 0;
20972    }
20973
20974    if (viewsLength === 0) {
20975      // all views need to be created
20976      this.views = views = new Array(itemsLength);
20977
20978      for (let i = 0; i < itemsLength; ++i) {
20979        const view = template.create();
20980        bindView(view, items, i, childContext);
20981        views[i] = view;
20982        view.insertBefore(location);
20983      }
20984    } else {
20985      // attempt to reuse existing views with new data
20986      let i = 0;
20987
20988      for (; i < itemsLength; ++i) {
20989        if (i < viewsLength) {
20990          const view = views[i];
20991          bindView(view, items, i, childContext);
20992        } else {
20993          const view = template.create();
20994          bindView(view, items, i, childContext);
20995          views.push(view);
20996          view.insertBefore(location);
20997        }
20998      }
20999
21000      const removed = views.splice(i, viewsLength - i);
21001
21002      for (i = 0, itemsLength = removed.length; i < itemsLength; ++i) {
21003        removed[i].dispose();
21004      }
21005    }
21006  }
21007
21008  unbindAllViews() {
21009    const views = this.views;
21010
21011    for (let i = 0, ii = views.length; i < ii; ++i) {
21012      views[i].unbind();
21013    }
21014  }
21015
21016}
21017/**
21018 * A directive that configures list rendering.
21019 * @public
21020 */
21021
21022
21023exports.RepeatBehavior = RepeatBehavior;
21024
21025class RepeatDirective extends _htmlDirective.HTMLDirective {
21026  /**
21027   * Creates an instance of RepeatDirective.
21028   * @param itemsBinding - The binding that provides the array to render.
21029   * @param templateBinding - The template binding used to obtain a template to render for each item in the array.
21030   * @param options - Options used to turn on special repeat features.
21031   */
21032  constructor(itemsBinding, templateBinding, options) {
21033    super();
21034    this.itemsBinding = itemsBinding;
21035    this.templateBinding = templateBinding;
21036    this.options = options;
21037    /**
21038     * Creates a placeholder string based on the directive's index within the template.
21039     * @param index - The index of the directive within the template.
21040     */
21041
21042    this.createPlaceholder = _dom.DOM.createBlockPlaceholder;
21043    (0, _arrayObserver.enableArrayObservation)();
21044    this.isItemsBindingVolatile = _observable.Observable.isVolatileBinding(itemsBinding);
21045    this.isTemplateBindingVolatile = _observable.Observable.isVolatileBinding(templateBinding);
21046  }
21047  /**
21048   * Creates a behavior for the provided target node.
21049   * @param target - The node instance to create the behavior for.
21050   */
21051
21052
21053  createBehavior(target) {
21054    return new RepeatBehavior(target, this.itemsBinding, this.isItemsBindingVolatile, this.templateBinding, this.isTemplateBindingVolatile, this.options);
21055  }
21056
21057}
21058/**
21059 * A directive that enables list rendering.
21060 * @param itemsBinding - The array to render.
21061 * @param templateOrTemplateBinding - The template or a template binding used obtain a template
21062 * to render for each item in the array.
21063 * @param options - Options used to turn on special repeat features.
21064 * @public
21065 */
21066
21067
21068exports.RepeatDirective = RepeatDirective;
21069
21070function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {
21071  const templateBinding = typeof templateOrTemplateBinding === "function" ? templateOrTemplateBinding : () => templateOrTemplateBinding;
21072  return new RepeatDirective(itemsBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
21073}
21074
21075},{"../dom.js":150,"../observation/array-observer.js":154,"../observation/observable.js":156,"../platform.js":157,"./html-directive.js":164,"./view.js":170}],168:[function(require,module,exports){
21076"use strict";
21077
21078Object.defineProperty(exports, "__esModule", {
21079  value: true
21080});
21081exports.SlottedBehavior = void 0;
21082exports.slotted = slotted;
21083
21084var _htmlDirective = require("./html-directive.js");
21085
21086var _nodeObservation = require("./node-observation.js");
21087
21088/**
21089 * The runtime behavior for slotted node observation.
21090 * @public
21091 */
21092class SlottedBehavior extends _nodeObservation.NodeObservationBehavior {
21093  /**
21094   * Creates an instance of SlottedBehavior.
21095   * @param target - The slot element target to observe.
21096   * @param options - The options to use when observing the slot.
21097   */
21098  constructor(target, options) {
21099    super(target, options);
21100  }
21101  /**
21102   * Begins observation of the nodes.
21103   */
21104
21105
21106  observe() {
21107    this.target.addEventListener("slotchange", this);
21108  }
21109  /**
21110   * Disconnects observation of the nodes.
21111   */
21112
21113
21114  disconnect() {
21115    this.target.removeEventListener("slotchange", this);
21116  }
21117  /**
21118   * Retrieves the nodes that should be assigned to the target.
21119   */
21120
21121
21122  getNodes() {
21123    return this.target.assignedNodes(this.options);
21124  }
21125
21126}
21127/**
21128 * A directive that observes the `assignedNodes()` of a slot and updates a property
21129 * whenever they change.
21130 * @param propertyOrOptions - The options used to configure slotted node observation.
21131 * @public
21132 */
21133
21134

21135exports.SlottedBehavior = SlottedBehavior;
21136
21137function slotted(propertyOrOptions) {
21138  if (typeof propertyOrOptions === "string") {
21139    propertyOrOptions = {
21140      property: propertyOrOptions
21141    };
21142  }
21143
21144  return new _htmlDirective.AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
21145}
21146
21147},{"./html-directive.js":164,"./node-observation.js":165}],169:[function(require,module,exports){
21148"use strict";
21149
21150Object.defineProperty(exports, "__esModule", {
21151  value: true
21152});
21153exports.ViewTemplate = void 0;
21154exports.html = html;
21155
21156var _dom = require("../dom.js");
21157
21158var _observable = require("../observation/observable.js");
21159
21160var _compiler = require("./compiler.js");
21161
21162var _view = require("./view.js");
21163
21164var _htmlDirective = require("./html-directive.js");
21165
21166var _binding = require("./binding.js");
21167
21168/**
21169 * A template capable of creating HTMLView instances or rendering directly to DOM.
21170 * @public
21171 */
21172
21173/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
21174class ViewTemplate {
21175  /**
21176   * Creates an instance of ViewTemplate.
21177   * @param html - The html representing what this template will instantiate, including placeholders for directives.
21178   * @param directives - The directives that will be connected to placeholders in the html.
21179   */
21180  constructor(html, directives) {
21181    this.behaviorCount = 0;
21182    this.hasHostBehaviors = false;
21183    this.fragment = null;
21184    this.targetOffset = 0;
21185    this.viewBehaviorFactories = null;
21186    this.hostBehaviorFactories = null;
21187    this.html = html;
21188    this.directives = directives;
21189  }
21190  /**
21191   * Creates an HTMLView instance based on this template definition.
21192   * @param hostBindingTarget - The element that host behaviors will be bound to.
21193   */
21194
21195
21196  create(hostBindingTarget) {
21197    if (this.fragment === null) {
21198      let template;
21199      const html = this.html;
21200
21201      if (typeof html === "string") {
21202        template = document.createElement("template");
21203        template.innerHTML = _dom.DOM.createHTML(html);
21204        const fec = template.content.firstElementChild;
21205
21206        if (fec !== null && fec.tagName === "TEMPLATE") {
21207          template = fec;
21208        }
21209      } else {
21210        template = html;
21211      }
21212
21213      const result = (0, _compiler.compileTemplate)(template, this.directives);
21214      this.fragment = result.fragment;
21215      this.viewBehaviorFactories = result.viewBehaviorFactories;
21216      this.hostBehaviorFactories = result.hostBehaviorFactories;
21217      this.targetOffset = result.targetOffset;
21218      this.behaviorCount = this.viewBehaviorFactories.length + this.hostBehaviorFactories.length;
21219      this.hasHostBehaviors = this.hostBehaviorFactories.length > 0;
21220    }
21221
21222    const fragment = this.fragment.cloneNode(true);
21223    const viewFactories = this.viewBehaviorFactories;
21224    const behaviors = new Array(this.behaviorCount);
21225
21226    const walker = _dom.DOM.createTemplateWalker(fragment);
21227
21228    let behaviorIndex = 0;
21229    let targetIndex = this.targetOffset;
21230    let node = walker.nextNode();
21231
21232    for (let ii = viewFactories.length; behaviorIndex < ii; ++behaviorIndex) {
21233      const factory = viewFactories[behaviorIndex];
21234      const factoryIndex = factory.targetIndex;
21235
21236      while (node !== null) {
21237        if (targetIndex === factoryIndex) {
21238          behaviors[behaviorIndex] = factory.createBehavior(node);
21239          break;
21240        } else {
21241          node = walker.nextNode();
21242          targetIndex++;
21243        }
21244      }
21245    }
21246
21247    if (this.hasHostBehaviors) {
21248      const hostFactories = this.hostBehaviorFactories;
21249
21250      for (let i = 0, ii = hostFactories.length; i < ii; ++i, ++behaviorIndex) {
21251        behaviors[behaviorIndex] = hostFactories[i].createBehavior(hostBindingTarget);
21252      }
21253    }
21254
21255    return new _view.HTMLView(fragment, behaviors);
21256  }
21257  /**
21258   * Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
21259   * @param source - The data source to bind the template to.
21260   * @param host - The Element where the template will be rendered.
21261   * @param hostBindingTarget - An HTML element to target the host bindings at if different from the
21262   * host that the template is being attached to.
21263   */
21264
21265
21266  render(source, host, hostBindingTarget) {
21267    if (typeof host === "string") {
21268      host = document.getElementById(host);
21269    }
21270
21271    if (hostBindingTarget === void 0) {
21272      hostBindingTarget = host;
21273    }
21274
21275    const view = this.create(hostBindingTarget);
21276    view.bind(source, _observable.defaultExecutionContext);
21277    view.appendTo(host);
21278    return view;
21279  }
21280
21281} // Much thanks to LitHTML for working this out!
21282
21283
21284exports.ViewTemplate = ViewTemplate;
21285const lastAttributeNameRegex =
21286/* eslint-disable-next-line no-control-regex */
21287/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
21288/**
21289 * Transforms a template literal string into a renderable ViewTemplate.

21290 * @param strings - The string fragments that are interpolated with the values.
21291 * @param values - The values that are interpolated with the string fragments.
21292 * @remarks
21293 * The html helper supports interpolation of strings, numbers, binding expressions,
21294 * other template instances, and Directive instances.
21295 * @public
21296 */
21297
21298function html(strings, ...values) {
21299  const directives = [];
21300  let html = "";
21301
21302  for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
21303    const currentString = strings[i];
21304    let value = values[i];
21305    html += currentString;
21306
21307    if (value instanceof ViewTemplate) {
21308      const template = value;
21309
21310      value = () => template;
21311    }
21312
21313    if (typeof value === "function") {
21314      value = new _binding.HTMLBindingDirective(value);
21315    }
21316
21317    if (value instanceof _htmlDirective.TargetedHTMLDirective) {
21318      const match = lastAttributeNameRegex.exec(currentString);
21319
21320      if (match !== null) {
21321        value.targetName = match[2];
21322      }
21323    }
21324
21325    if (value instanceof _htmlDirective.HTMLDirective) {
21326      // Since not all values are directives, we can't use i
21327      // as the index for the placeholder. Instead, we need to
21328      // use directives.length to get the next index.
21329      html += value.createPlaceholder(directives.length);
21330      directives.push(value);
21331    } else {
21332      html += value;
21333    }
21334  }
21335
21336  html += strings[strings.length - 1];
21337  return new ViewTemplate(html, directives);
21338}
21339
21340},{"../dom.js":150,"../observation/observable.js":156,"./binding.js":161,"./compiler.js":163,"./html-directive.js":164,"./view.js":170}],170:[function(require,module,exports){
21341"use strict";
21342
21343Object.defineProperty(exports, "__esModule", {
21344  value: true
21345});
21346exports.HTMLView = void 0;
21347// A singleton Range instance used to efficiently remove ranges of DOM nodes.
21348// See the implementation of HTMLView below for further details.
21349const range = document.createRange();
21350/**
21351 * The standard View implementation, which also implements ElementView and SyntheticView.
21352 * @public
21353 */
21354
21355class HTMLView {
21356  /**
21357   * Constructs an instance of HTMLView.
21358   * @param fragment - The html fragment that contains the nodes for this view.
21359   * @param behaviors - The behaviors to be applied to this view.
21360   */
21361  constructor(fragment, behaviors) {
21362    this.fragment = fragment;
21363    this.behaviors = behaviors;
21364    /**
21365     * The data that the view is bound to.
21366     */
21367
21368    this.source = null;
21369    /**
21370     * The execution context the view is running within.
21371     */
21372
21373    this.context = null;
21374    this.firstChild = fragment.firstChild;
21375    this.lastChild = fragment.lastChild;
21376  }
21377  /**
21378   * Appends the view's DOM nodes to the referenced node.
21379   * @param node - The parent node to append the view's DOM nodes to.
21380   */
21381
21382
21383  appendTo(node) {
21384    node.appendChild(this.fragment);
21385  }
21386  /**
21387   * Inserts the view's DOM nodes before the referenced node.
21388   * @param node - The node to insert the view's DOM before.
21389   */
21390
21391
21392  insertBefore(node) {
21393    if (this.fragment.hasChildNodes()) {
21394      node.parentNode.insertBefore(this.fragment, node);
21395    } else {
21396      const end = this.lastChild;
21397      if (node.previousSibling === end) return;
21398      const parentNode = node.parentNode;
21399      let current = this.firstChild;
21400      let next;
21401
21402      while (current !== end) {
21403        next = current.nextSibling;
21404        parentNode.insertBefore(current, node);
21405        current = next;
21406      }
21407
21408      parentNode.insertBefore(end, node);
21409    }
21410  }
21411  /**
21412   * Removes the view's DOM nodes.
21413   * The nodes are not disposed and the view can later be re-inserted.
21414   */
21415
21416
21417  remove() {
21418    const fragment = this.fragment;
21419    const end = this.lastChild;
21420    let current = this.firstChild;
21421    let next;
21422
21423    while (current !== end) {
21424      next = current.nextSibling;
21425      fragment.appendChild(current);
21426      current = next;
21427    }
21428
21429    fragment.appendChild(end);
21430  }
21431  /**
21432   * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
21433   * Once a view has been disposed, it cannot be inserted or bound again.
21434   */
21435
21436
21437  dispose() {
21438    const parent = this.firstChild.parentNode;
21439    const end = this.lastChild;

21440    let current = this.firstChild;
21441    let next;
21442
21443    while (current !== end) {
21444      next = current.nextSibling;
21445      parent.removeChild(current);
21446      current = next;
21447    }
21448
21449    parent.removeChild(end);
21450    const behaviors = this.behaviors;
21451    const oldSource = this.source;
21452
21453    for (let i = 0, ii = behaviors.length; i < ii; ++i) {
21454      behaviors[i].unbind(oldSource);
21455    }
21456  }
21457  /**
21458   * Binds a view's behaviors to its binding source.
21459   * @param source - The binding source for the view's binding behaviors.
21460   * @param context - The execution context to run the behaviors within.
21461   */
21462
21463
21464  bind(source, context) {
21465    const behaviors = this.behaviors;
21466
21467    if (this.source === source) {
21468      return;
21469    } else if (this.source !== null) {
21470      const oldSource = this.source;
21471      this.source = source;
21472      this.context = context;
21473
21474      for (let i = 0, ii = behaviors.length; i < ii; ++i) {
21475        const current = behaviors[i];
21476        current.unbind(oldSource);
21477        current.bind(source, context);
21478      }
21479    } else {
21480      this.source = source;
21481      this.context = context;
21482
21483      for (let i = 0, ii = behaviors.length; i < ii; ++i) {
21484        behaviors[i].bind(source, context);
21485      }
21486    }
21487  }
21488  /**
21489   * Unbinds a view's behaviors from its binding source.
21490   */
21491
21492
21493  unbind() {
21494    if (this.source === null) {
21495      return;
21496    }
21497
21498    const behaviors = this.behaviors;
21499    const oldSource = this.source;
21500
21501    for (let i = 0, ii = behaviors.length; i < ii; ++i) {
21502      behaviors[i].unbind(oldSource);
21503    }
21504
21505    this.source = null;
21506  }
21507  /**
21508   * Efficiently disposes of a contiguous range of synthetic view instances.
21509   * @param views - A contiguous range of views to be disposed.
21510   */
21511
21512
21513  static disposeContiguousBatch(views) {
21514    if (views.length === 0) {
21515      return;
21516    }
21517
21518    range.setStartBefore(views[0].firstChild);
21519    range.setEndAfter(views[views.length - 1].lastChild);
21520    range.deleteContents();
21521
21522    for (let i = 0, ii = views.length; i < ii; ++i) {
21523      const view = views[i];
21524      const behaviors = view.behaviors;
21525      const oldSource = view.source;
21526
21527      for (let j = 0, jj = behaviors.length; j < jj; ++j) {
21528        behaviors[j].unbind(oldSource);
21529      }
21530    }
21531  }
21532
21533}
21534
21535exports.HTMLView = HTMLView;
21536
21537},{}],171:[function(require,module,exports){
21538"use strict";
21539
21540Object.defineProperty(exports, "__esModule", {
21541  value: true
21542});
21543exports.when = when;
21544
21545var _interfaces = require("../interfaces.js");
21546
21547const noTemplate = () => null;
21548
21549function normalizeBinding(value) {
21550  return value === undefined ? noTemplate : (0, _interfaces.isFunction)(value) ? value : () => value;
21551}
21552/**
21553 * A directive that enables basic conditional rendering in a template.
21554 * @param binding - The condition to test for rendering.
21555 * @param templateOrTemplateBinding - The template or a binding that gets
21556 * the template to render when the condition is true.
21557 * @param elseTemplateOrTemplateBinding - Optional template or binding that that
21558 * gets the template to render when the conditional is false.
21559 * @public
21560 */
21561
21562
21563function when(binding, templateOrTemplateBinding, elseTemplateOrTemplateBinding) {
21564  const dataBinding = (0, _interfaces.isFunction)(binding) ? binding : () => binding;
21565  const templateBinding = normalizeBinding(templateOrTemplateBinding);
21566  const elseBinding = normalizeBinding(elseTemplateOrTemplateBinding);
21567  return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : elseBinding(source, context);
21568}
21569
21570},{"../interfaces.js":152}],172:[function(require,module,exports){
21571"use strict";
21572
21573Object.defineProperty(exports, "__esModule", {
21574  value: true
21575});
21576exports.AccordionItem = void 0;
21577
21578var _tslib = require("tslib");
21579
21580var _fastElement = require("@microsoft/fast-element");
21581
21582var _foundationElement = require("../foundation-element/foundation-element.js");
21583
21584var _startEnd = require("../patterns/start-end.js");
21585
21586var _applyMixins = require("../utilities/apply-mixins.js");
21587
21588/**
21589 * An individual item in an {@link @microsoft/fast-foundation#(Accordion:class) }.
21590 *
21591 * @slot start - Content which can be provided between the heading and the icon
21592 * @slot end - Content which can be provided between the start slot and icon
21593 * @slot heading - Content which serves as the accordion item heading and text of the expand button
21594 * @slot - The default slot for accordion item content
21595 * @slot expanded-icon - The expanded icon
21596 * @slot collapsed-icon - The collapsed icon
21597 * @fires change - Fires a custom 'change' event when the button is invoked
21598 * @csspart heading - Wraps the button
21599 * @csspart button - The button which serves to invoke the item
21600 * @csspart heading-content - Wraps the slot for the heading content within the button
21601 * @csspart icon - The icon container
21602 * @csspart expanded-icon - The expanded icon slot
21603 * @csspart collapsed-icon - The collapsed icon
21604 * @csspart region - The wrapper for the accordion item content
21605 *
21606 * @public
21607 */
21608class AccordionItem extends _foundationElement.FoundationElement {
21609  constructor() {
21610    super(...arguments);
21611    /**
21612     * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
21613     * heading element.
21614     *
21615     * @defaultValue 2
21616     * @public
21617     * @remarks
21618     * HTML attribute: heading-level
21619     */
21620
21621    this.headinglevel = 2;
21622    /**
21623     * Expands or collapses the item.
21624     *
21625     * @public
21626     * @remarks
21627     * HTML attribute: expanded
21628     */
21629
21630    this.expanded = false;

21631    /**
21632     * @internal
21633     */
21634
21635    this.clickHandler = e => {
21636      this.expanded = !this.expanded;
21637      this.change();
21638    };
21639
21640    this.change = () => {
21641      this.$emit("change");
21642    };
21643  }
21644
21645}
21646
21647exports.AccordionItem = AccordionItem;
21648(0, _tslib.__decorate)([(0, _fastElement.attr)({
21649  attribute: "heading-level",
21650  mode: "fromView",
21651  converter: _fastElement.nullableNumberConverter
21652})], AccordionItem.prototype, "headinglevel", void 0);
21653(0, _tslib.__decorate)([(0, _fastElement.attr)({
21654  mode: "boolean"
21655})], AccordionItem.prototype, "expanded", void 0);
21656(0, _tslib.__decorate)([_fastElement.attr], AccordionItem.prototype, "id", void 0);
21657(0, _applyMixins.applyMixins)(AccordionItem, _startEnd.StartEnd);
21658
21659},{"../foundation-element/foundation-element.js":251,"../patterns/start-end.js":277,"../utilities/apply-mixins.js":358,"@microsoft/fast-element":151,"tslib":372}],173:[function(require,module,exports){
21660"use strict";
21661
21662Object.defineProperty(exports, "__esModule", {
21663  value: true
21664});
21665exports.accordionItemTemplate = void 0;
21666
21667var _fastElement = require("@microsoft/fast-element");
21668
21669var _startEnd = require("../patterns/start-end.js");
21670
21671/**
21672 * The template for the {@link @microsoft/fast-foundation#(AccordionItem:class)} component.
21673 * @public
21674 */
21675const accordionItemTemplate = (context, definition) => (0, _fastElement.html)`
21676    <template class="${x => x.expanded ? "expanded" : ""}">
21677        <div
21678            class="heading"
21679            part="heading"
21680            role="heading"
21681            aria-level="${x => x.headinglevel}"
21682        >
21683            <button
21684                class="button"
21685                part="button"
21686                ${(0, _fastElement.ref)("expandbutton")}
21687                aria-expanded="${x => x.expanded}"
21688                aria-controls="${x => x.id}-panel"
21689                id="${x => x.id}"
21690                @click="${(x, c) => x.clickHandler(c.event)}"
21691            >
21692                <span class="heading-content" part="heading-content">
21693                    <slot name="heading"></slot>
21694                </span>
21695            </button>
21696            ${(0, _startEnd.startSlotTemplate)(context, definition)}
21697            ${(0, _startEnd.endSlotTemplate)(context, definition)}
21698            <span class="icon" part="icon" aria-hidden="true">
21699                <slot name="expanded-icon" part="expanded-icon">
21700                    ${definition.expandedIcon || ""}
21701                </slot>
21702                <slot name="collapsed-icon" part="collapsed-icon">
21703                    ${definition.collapsedIcon || ""}
21704                </slot>
21705            <span>
21706        </div>
21707        <div
21708            class="region"
21709            part="region"
21710            id="${x => x.id}-panel"
21711            role="region"
21712            aria-labelledby="${x => x.id}"
21713        >
21714            <slot></slot>
21715        </div>
21716    </template>
21717`;
21718
21719exports.accordionItemTemplate = accordionItemTemplate;
21720
21721},{"../patterns/start-end.js":277,"@microsoft/fast-element":151}],174:[function(require,module,exports){
21722"use strict";
21723
21724Object.defineProperty(exports, "__esModule", {
21725  value: true
21726});
21727
21728var _accordionItemTemplate = require("./accordion-item.template.js");
21729
21730Object.keys(_accordionItemTemplate).forEach(function (key) {
21731  if (key === "default" || key === "__esModule") return;
21732  if (key in exports && exports[key] === _accordionItemTemplate[key]) return;
21733  Object.defineProperty(exports, key, {
21734    enumerable: true,
21735    get: function () {
21736      return _accordionItemTemplate[key];
21737    }
21738  });
21739});
21740
21741var _accordionItem = require("./accordion-item.js");
21742
21743Object.keys(_accordionItem).forEach(function (key) {
21744  if (key === "default" || key === "__esModule") return;
21745  if (key in exports && exports[key] === _accordionItem[key]) return;
21746  Object.defineProperty(exports, key, {
21747    enumerable: true,
21748    get: function () {
21749      return _accordionItem[key];
21750    }
21751  });
21752});
21753
21754},{"./accordion-item.js":172,"./accordion-item.template.js":173}],175:[function(require,module,exports){
21755"use strict";
21756
21757Object.defineProperty(exports, "__esModule", {
21758  value: true
21759});
21760exports.AccordionExpandMode = exports.Accordion = void 0;
21761
21762var _tslib = require("tslib");
21763
21764var _fastElement = require("@microsoft/fast-element");
21765
21766var _fastWebUtilities = require("@microsoft/fast-web-utilities");
21767

21768var _foundationElement = require("../foundation-element/foundation-element.js");
21769
21770var _accordionItem = require("../accordion-item/accordion-item.js");
21771
21772/**
21773 * Expand mode for {@link Accordion}
21774 * @public
21775 */
21776const AccordionExpandMode = {
21777  /**
21778   * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.
21779   */
21780  single: "single",
21781
21782  /**
21783   * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
21784   */
21785  multi: "multi"
21786};
21787/**
21788 * An Accordion Custom HTML Element
21789 * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
21790 *
21791 * @fires change - Fires a custom 'change' event when the active item changes
21792 * @csspart item - The slot for the accordion items
21793 * @public
21794 *
21795 * @remarks
21796 * Designed to be used with {@link @microsoft/fast-foundation#accordionTemplate} and {@link @microsoft/fast-foundation#(AccordionItem:class)}.
21797 */
21798
21799exports.AccordionExpandMode = AccordionExpandMode;
21800
21801class Accordion extends _foundationElement.FoundationElement {
21802  constructor() {
21803    super(...arguments);
21804    /**
21805     * Controls the expand mode of the Accordion, either allowing
21806     * single or multiple item expansion.
21807     * @public
21808     *
21809     * @remarks
21810     * HTML attribute: expand-mode
21811     */
21812
21813    this.expandmode = AccordionExpandMode.multi;
21814    this.activeItemIndex = 0;
21815
21816    this.change = () => {
21817      this.$emit("change", this.activeid);
21818    };
21819
21820    this.setItems = () => {
21821      var _a;
21822
21823      if (this.accordionItems.length === 0) {
21824        return;
21825      }
21826
21827      this.accordionIds = this.getItemIds();
21828      this.accordionItems.forEach((item, index) => {
21829        if (item instanceof _accordionItem.AccordionItem) {
21830          item.addEventListener("change", this.activeItemChange);
21831
21832          if (this.isSingleExpandMode()) {
21833            this.activeItemIndex !== index ? item.expanded = false : item.expanded = true;
21834          }
21835        }
21836
21837        const itemId = this.accordionIds[index];
21838        item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
21839        this.activeid = this.accordionIds[this.activeItemIndex];
21840        item.addEventListener("keydown", this.handleItemKeyDown);
21841        item.addEventListener("focus", this.handleItemFocus);
21842      });
21843
21844      if (this.isSingleExpandMode()) {
21845        const expandedItem = (_a = this.findExpandedItem()) !== null && _a !== void 0 ? _a : this.accordionItems[0];
21846        expandedItem.setAttribute("aria-disabled", "true");
21847      }
21848    };
21849
21850    this.removeItemListeners = oldValue => {
21851      oldValue.forEach((item, index) => {
21852        item.removeEventListener("change", this.activeItemChange);
21853        item.removeEventListener("keydown", this.handleItemKeyDown);
21854        item.removeEventListener("focus", this.handleItemFocus);
21855      });
21856    };
21857
21858    this.activeItemChange = event => {
21859      if (event.defaultPrevented || event.target !== event.currentTarget) {
21860        return;
21861      }
21862
21863      event.preventDefault();
21864      const selectedItem = event.target;
21865      this.activeid = selectedItem.getAttribute("id");
21866
21867      if (this.isSingleExpandMode()) {
21868        this.resetItems();
21869        selectedItem.expanded = true;
21870        selectedItem.setAttribute("aria-disabled", "true");
21871        this.accordionItems.forEach(item => {
21872          if (!item.hasAttribute("disabled") && item.id !== this.activeid) {
21873            item.removeAttribute("aria-disabled");
21874          }
21875        });
21876      }
21877
21878      this.activeItemIndex = Array.from(this.accordionItems).indexOf(selectedItem);
21879      this.change();
21880    };
21881
21882    this.handleItemKeyDown = event => {
21883      // only handle the keydown if the event target is the accordion item
21884      // prevents arrow keys from moving focus to accordion headers when focus is on accordion item panel content
21885      if (event.target !== event.currentTarget) {
21886        return;
21887      }
21888
21889      this.accordionIds = this.getItemIds();
21890
21891      switch (event.key) {
21892        case _fastWebUtilities.keyArrowUp:
21893          event.preventDefault();
21894          this.adjust(-1);
21895          break;
21896

21897        case _fastWebUtilities.keyArrowDown:
21898          event.preventDefault();
21899          this.adjust(1);
21900          break;
21901
21902        case _fastWebUtilities.keyHome:
21903          this.activeItemIndex = 0;
21904          this.focusItem();
21905          break;
21906
21907        case _fastWebUtilities.keyEnd:
21908          this.activeItemIndex = this.accordionItems.length - 1;
21909          this.focusItem();
21910          break;
21911      }
21912    };
21913
21914    this.handleItemFocus = event => {
21915      // update the active item index if the focus moves to an accordion item via a different method other than the up and down arrow key actions
21916      // only do so if the focus is actually on the accordion item and not on any of its children
21917      if (event.target === event.currentTarget) {
21918        const focusedItem = event.target;
21919        const focusedIndex = this.activeItemIndex = Array.from(this.accordionItems).indexOf(focusedItem);
21920
21921        if (this.activeItemIndex !== focusedIndex && focusedIndex !== -1) {
21922          this.activeItemIndex = focusedIndex;
21923          this.activeid = this.accordionIds[this.activeItemIndex];
21924        }
21925      }
21926    };
21927  }
21928  /**
21929   * @internal
21930   */
21931
21932
21933  accordionItemsChanged(oldValue, newValue) {
21934    if (this.$fastController.isConnected) {
21935      this.removeItemListeners(oldValue);
21936      this.setItems();
21937    }
21938  }
21939
21940  findExpandedItem() {
21941    for (let item = 0; item < this.accordionItems.length; item++) {
21942      if (this.accordionItems[item].getAttribute("expanded") === "true") {
21943        return this.accordionItems[item];
21944      }
21945    }
21946
21947    return null;
21948  }
21949
21950  resetItems() {
21951    this.accordionItems.forEach((item, index) => {
21952      item.expanded = false;
21953    });
21954  }
21955
21956  getItemIds() {
21957    return this.accordionItems.map(accordionItem => {
21958      return accordionItem.getAttribute("id");
21959    });
21960  }
21961
21962  isSingleExpandMode() {
21963    return this.expandmode === AccordionExpandMode.single;
21964  }
21965
21966  adjust(adjustment) {
21967    this.activeItemIndex = (0, _fastWebUtilities.wrapInBounds)(0, this.accordionItems.length - 1, this.activeItemIndex + adjustment);
21968    this.focusItem();
21969  }
21970
21971  focusItem() {
21972    const element = this.accordionItems[this.activeItemIndex];
21973
21974    if (element instanceof _accordionItem.AccordionItem) {
21975      element.expandbutton.focus();
21976    }
21977  }
21978
21979}
21980
21981exports.Accordion = Accordion;
21982(0, _tslib.__decorate)([(0, _fastElement.attr)({
21983  attribute: "expand-mode"
21984})], Accordion.prototype, "expandmode", void 0);
21985(0, _tslib.__decorate)([_fastElement.observable], Accordion.prototype, "accordionItems", void 0);
21986
21987},{"../accordion-item/accordion-item.js":172,"../foundation-element/foundation-element.js":251,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],176:[function(require,module,exports){
21988"use strict";
21989
21990Object.defineProperty(exports, "__esModule", {
21991  value: true
21992});
21993exports.accordionTemplate = void 0;
21994
21995var _fastElement = require("@microsoft/fast-element");
21996
21997/**
21998 * The template for the {@link @microsoft/fast-foundation#Accordion} component.
21999 * @public
22000 */
22001const accordionTemplate = (context, definition) =>
22002/* TODO: deprecate slot name `item` to only support default slot https://github.com/microsoft/fast/issues/5515 */
22003(0, _fastElement.html)`
22004    <template>
22005        <slot ${(0, _fastElement.slotted)({
22006  property: "accordionItems",
22007  filter: (0, _fastElement.elements)()
22008})}></slot>
22009        <slot name="item" part="item" ${(0, _fastElement.slotted)("accordionItems")}></slot>
22010    </template>
22011`;
22012
22013exports.accordionTemplate = accordionTemplate;
22014
22015},{"@microsoft/fast-element":151}],177:[function(require,module,exports){
22016"use strict";
22017
22018Object.defineProperty(exports, "__esModule", {
22019  value: true
22020});
22021
22022var _accordionTemplate = require("./accordion.template.js");
22023
22024Object.keys(_accordionTemplate).forEach(function (key) {
22025  if (key === "default" || key === "__esModule") return;
22026  if (key in exports && exports[key] === _accordionTemplate[key]) return;
22027  Object.defineProperty(exports, key, {
22028    enumerable: true,
22029    get: function () {
22030      return _accordionTemplate[key];
22031    }
22032  });
22033});
22034
22035var _accordion = require("./accordion.js");
22036

22037Object.keys(_accordion).forEach(function (key) {
22038  if (key === "default" || key === "__esModule") return;
22039  if (key in exports && exports[key] === _accordion[key]) return;
22040  Object.defineProperty(exports, key, {
22041    enumerable: true,
22042    get: function () {
22043      return _accordion[key];
22044    }
22045  });
22046});
22047
22048},{"./accordion.js":175,"./accordion.template.js":176}],178:[function(require,module,exports){
22049"use strict";
22050
22051Object.defineProperty(exports, "__esModule", {
22052  value: true
22053});
22054exports.DelegatesARIALink = exports.Anchor = void 0;
22055
22056var _tslib = require("tslib");
22057
22058var _fastElement = require("@microsoft/fast-element");
22059
22060var _foundationElement = require("../foundation-element/foundation-element.js");
22061
22062var _index = require("../patterns/index.js");
22063
22064var _applyMixins = require("../utilities/apply-mixins.js");
22065
22066/**
22067 * An Anchor Custom HTML Element.
22068 * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
22069 *
22070 * @slot start - Content which can be provided before the anchor content

22071 * @slot end - Content which can be provided after the anchor content
22072 * @slot - The default slot for anchor content
22073 * @csspart control - The anchor element
22074 * @csspart content - The element wrapping anchor content
22075 *
22076 * @public
22077 */
22078class Anchor extends _foundationElement.FoundationElement {
22079  constructor() {
22080    super(...arguments);
22081    /**
22082     * Overrides the focus call for where delegatesFocus is unsupported.
22083     * This check works for Chrome, Edge Chromium, FireFox, and Safari
22084     * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
22085     */
22086
22087    this.handleUnsupportedDelegatesFocus = () => {
22088      var _a; // Check to see if delegatesFocus is supported
22089
22090
22091      if (window.ShadowRoot && !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
22092        this.focus = () => {
22093          var _a;
22094
22095          (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
22096        };
22097      }
22098    };
22099  }
22100  /**
22101   * @internal
22102   */
22103
22104
22105  connectedCallback() {
22106    super.connectedCallback();
22107    this.handleUnsupportedDelegatesFocus();
22108  }
22109
22110}
22111
22112exports.Anchor = Anchor;
22113(0, _tslib.__decorate)([_fastElement.attr], Anchor.prototype, "download", void 0);
22114(0, _tslib.__decorate)([_fastElement.attr], Anchor.prototype, "href", void 0);
22115(0, _tslib.__decorate)([_fastElement.attr], Anchor.prototype, "hreflang", void 0);
22116(0, _tslib.__decorate)([_fastElement.attr], Anchor.prototype, "ping", void 0);
22117(0, _tslib.__decorate)([_fastElement.attr], Anchor.prototype, "referrerpolicy", void 0);
22118(0, _tslib.__decorate)([_fastElement.attr], Anchor.prototype, "rel", void 0);
22119(0, _tslib.__decorate)([_fastElement.attr], Anchor.prototype, "target", void 0);
22120(0, _tslib.__decorate)([_fastElement.attr], Anchor.prototype, "type", void 0);
22121(0, _tslib.__decorate)([_fastElement.observable], Anchor.prototype, "defaultSlottedContent", void 0);
22122/**
22123 * Includes ARIA states and properties relating to the ARIA link role
22124 *
22125 * @public
22126 */
22127
22128class DelegatesARIALink {}
22129
22130exports.DelegatesARIALink = DelegatesARIALink;
22131(0, _tslib.__decorate)([(0, _fastElement.attr)({
22132  attribute: "aria-expanded"
22133})], DelegatesARIALink.prototype, "ariaExpanded", void 0);
22134(0, _applyMixins.applyMixins)(DelegatesARIALink, _index.ARIAGlobalStatesAndProperties);
22135(0, _applyMixins.applyMixins)(Anchor, _index.StartEnd, DelegatesARIALink);
22136
22137},{"../foundation-element/foundation-element.js":251,"../patterns/index.js":276,"../utilities/apply-mixins.js":358,"@microsoft/fast-element":151,"tslib":372}],179:[function(require,module,exports){
22138"use strict";
22139
22140Object.defineProperty(exports, "__esModule", {
22141  value: true
22142});
22143exports.anchorTemplate = void 0;
22144
22145var _fastElement = require("@microsoft/fast-element");
22146
22147var _startEnd = require("../patterns/start-end.js");
22148
22149/**
22150 * The template for the {@link @microsoft/fast-foundation#(Anchor:class)} component.
22151 * @public
22152 */
22153const anchorTemplate = (context, definition) => (0, _fastElement.html)`
22154    <a
22155        class="control"
22156        part="control"
22157        download="${x => x.download}"
22158        href="${x => x.href}"
22159        hreflang="${x => x.hreflang}"
22160        ping="${x => x.ping}"
22161        referrerpolicy="${x => x.referrerpolicy}"
22162        rel="${x => x.rel}"
22163        target="${x => x.target}"
22164        type="${x => x.type}"
22165        aria-atomic="${x => x.ariaAtomic}"
22166        aria-busy="${x => x.ariaBusy}"
22167        aria-controls="${x => x.ariaControls}"
22168        aria-current="${x => x.ariaCurrent}"
22169        aria-describedby="${x => x.ariaDescribedby}"
22170        aria-details="${x => x.ariaDetails}"
22171        aria-disabled="${x => x.ariaDisabled}"
22172        aria-errormessage="${x => x.ariaErrormessage}"
22173        aria-expanded="${x => x.ariaExpanded}"
22174        aria-flowto="${x => x.ariaFlowto}"
22175        aria-haspopup="${x => x.ariaHaspopup}"
22176        aria-hidden="${x => x.ariaHidden}"
22177        aria-invalid="${x => x.ariaInvalid}"
22178        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
22179        aria-label="${x => x.ariaLabel}"
22180        aria-labelledby="${x => x.ariaLabelledby}"

22181        aria-live="${x => x.ariaLive}"
22182        aria-owns="${x => x.ariaOwns}"
22183        aria-relevant="${x => x.ariaRelevant}"
22184        aria-roledescription="${x => x.ariaRoledescription}"
22185        ${(0, _fastElement.ref)("control")}
22186    >
22187        ${(0, _startEnd.startSlotTemplate)(context, definition)}
22188        <span class="content" part="content">
22189            <slot ${(0, _fastElement.slotted)("defaultSlottedContent")}></slot>
22190        </span>
22191        ${(0, _startEnd.endSlotTemplate)(context, definition)}
22192    </a>
22193`;
22194
22195exports.anchorTemplate = anchorTemplate;
22196
22197},{"../patterns/start-end.js":277,"@microsoft/fast-element":151}],180:[function(require,module,exports){
22198"use strict";
22199
22200Object.defineProperty(exports, "__esModule", {
22201  value: true
22202});
22203
22204var _anchorTemplate = require("./anchor.template.js");
22205
22206Object.keys(_anchorTemplate).forEach(function (key) {
22207  if (key === "default" || key === "__esModule") return;
22208  if (key in exports && exports[key] === _anchorTemplate[key]) return;
22209  Object.defineProperty(exports, key, {
22210    enumerable: true,
22211    get: function () {
22212      return _anchorTemplate[key];
22213    }
22214  });
22215});
22216
22217var _anchor = require("./anchor.js");
22218
22219Object.keys(_anchor).forEach(function (key) {
22220  if (key === "default" || key === "__esModule") return;
22221  if (key in exports && exports[key] === _anchor[key]) return;
22222  Object.defineProperty(exports, key, {
22223    enumerable: true,
22224    get: function () {
22225      return _anchor[key];
22226    }
22227  });
22228});
22229
22230},{"./anchor.js":178,"./anchor.template.js":179}],181:[function(require,module,exports){
22231"use strict";
22232
22233Object.defineProperty(exports, "__esModule", {
22234  value: true
22235});
22236exports.FlyoutPosTopFill = exports.FlyoutPosTop = exports.FlyoutPosTallestFill = exports.FlyoutPosTallest = exports.FlyoutPosBottomFill = exports.FlyoutPosBottom = void 0;
22237
22238/**
22239 * Building blocks - partial configs
22240 */
22241
22242/**
22243 * A region that matches the size and position of the anchor horizontally
22244 */
22245const horizontalAnchorOverlay = {
22246  horizontalDefaultPosition: "center",
22247  horizontalPositioningMode: "locktodefault",
22248  horizontalInset: false,
22249  horizontalScaling: "anchor"
22250};
22251/**
22252 * Exported configs
22253 */
22254
22255/**
22256 * A region that always places itself above the anchor, has
22257 * a width to match the anchor, and is sized vertically by content
22258 *
22259 * @public
22260 */
22261
22262const FlyoutPosTop = Object.assign(Object.assign({}, horizontalAnchorOverlay), {
22263  verticalDefaultPosition: "top",
22264  verticalPositioningMode: "locktodefault",
22265  verticalInset: false,
22266  verticalScaling: "content"
22267});
22268/**
22269 * A region that always places itself below the anchor, has
22270 * a width to match the anchor, and is sized vertically by content
22271 *
22272 * @public
22273 */
22274
22275exports.FlyoutPosTop = FlyoutPosTop;
22276const FlyoutPosBottom = Object.assign(Object.assign({}, horizontalAnchorOverlay), {
22277  verticalDefaultPosition: "bottom",
22278  verticalPositioningMode: "locktodefault",
22279  verticalInset: false,
22280  verticalScaling: "content"
22281});
22282/**
22283 * A region that places itself above or below the anchor
22284 * based on available space, has a width to match the anchor,
22285 * and is sized vertically by content
22286 *
22287 * @public
22288 */
22289
22290exports.FlyoutPosBottom = FlyoutPosBottom;
22291const FlyoutPosTallest = Object.assign(Object.assign({}, horizontalAnchorOverlay), {
22292  verticalPositioningMode: "dynamic",
22293  verticalInset: false,
22294  verticalScaling: "content"
22295});
22296/**
22297 * A region that always places itself above the anchor, has
22298 * a width to match the anchor, and is sized vertically by available space
22299 *
22300 * @public
22301 */
22302
22303exports.FlyoutPosTallest = FlyoutPosTallest;
22304const FlyoutPosTopFill = Object.assign(Object.assign({}, FlyoutPosTop), {
22305  verticalScaling: "fill"
22306});
22307/**
22308 * A region that always places itself below the anchor, has
22309 * a width to match the anchor, and is sized vertically by available space
22310 *
22311 * @public
22312 */
22313
22314exports.FlyoutPosTopFill = FlyoutPosTopFill;
22315const FlyoutPosBottomFill = Object.assign(Object.assign({}, FlyoutPosBottom), {
22316  verticalScaling: "fill"
22317});
22318/**
22319 * A region that places itself above or below the anchor
22320 * based on available space, has a width to match the anchor,
22321 * and is sized vertically by available space
22322 *
22323 * @public
22324 */
22325
22326exports.FlyoutPosBottomFill = FlyoutPosBottomFill;
22327const FlyoutPosTallestFill = Object.assign(Object.assign({}, FlyoutPosTallest), {
22328  verticalScaling: "fill"
22329});
22330exports.FlyoutPosTallestFill = FlyoutPosTallestFill;
22331
22332},{}],182:[function(require,module,exports){
22333"use strict";
22334
22335Object.defineProperty(exports, "__esModule", {
22336  value: true
22337});
22338exports.AnchoredRegion = void 0;
22339
22340var _tslib = require("tslib");
22341
22342var _fastElement = require("@microsoft/fast-element");
22343
22344var _fastWebUtilities = require("@microsoft/fast-web-utilities");
22345

22346var _foundationElement = require("../foundation-element/foundation-element.js");
22347
22348var _direction = require("../utilities/direction.js");
22349
22350var _intersectionService = require("../utilities/intersection-service.js");
22351
22352/**
22353 * An anchored region Custom HTML Element.
22354 *
22355 * @slot - The default slot for the content
22356 * @fires loaded - Fires a custom 'loaded' event when the region is loaded and visible
22357 * @fires positionchange - Fires a custom 'positionchange' event when the position has changed
22358 *
22359 * @public
22360 */
22361class AnchoredRegion extends _foundationElement.

vendor: 4,224 bytes, lines 22361-22528

22361FoundationElement {
22362  constructor() {
22363    super(...arguments);
22364    /**
22365     * The HTML ID of the anchor element this region is positioned relative to
22366     *
22367     * @public
22368     * @remarks
22369     * HTML Attribute: anchor
22370     */
22371
22372    this.anchor = "";
22373    /**
22374     * The HTML ID of the viewport element this region is positioned relative to
22375     *
22376     * @public
22377     * @remarks
22378     * HTML Attribute: anchor
22379     */
22380
22381    this.viewport = "";
22382    /**
22383     * Sets what logic the component uses to determine horizontal placement.
22384     * 'locktodefault' forces the default position
22385     * 'dynamic' decides placement based on available space
22386     * 'uncontrolled' does not control placement on the horizontal axis
22387     *
22388     * @public
22389     * @remarks
22390     * HTML Attribute: horizontal-positioning-mode
22391     */
22392
22393    this.horizontalPositioningMode = "uncontrolled";
22394    /**
22395     * The default horizontal position of the region relative to the anchor element
22396     *
22397     * @public
22398     * @remarks
22399     * HTML Attribute: horizontal-default-position
22400     */
22401
22402    this.horizontalDefaultPosition = "unset";
22403    /**
22404     * Whether the region remains in the viewport (ie. detaches from the anchor) on the horizontal axis
22405     *
22406     * @public
22407     * @remarks
22408     * HTML Attribute: horizontal-viewport-lock
22409     */
22410
22411    this.horizontalViewportLock = false;
22412    /**
22413     * Whether the region overlaps the anchor on the horizontal axis
22414     *
22415     * @public
22416     * @remarks
22417     * HTML Attribute: horizontal-inset
22418     */
22419
22420    this.horizontalInset = false;
22421    /**
22422     * Defines how the width of the region is calculated
22423     *
22424     * @public
22425     * @remarks
22426     * HTML Attribute: horizontal-scaling
22427     */
22428
22429    this.horizontalScaling = "content";
22430    /**
22431     * Sets what logic the component uses to determine vertical placement.
22432     * 'locktodefault' forces the default position
22433     * 'dynamic' decides placement based on available space
22434     * 'uncontrolled' does not control placement on the vertical axis
22435     *
22436     * @public
22437     * @remarks
22438     * HTML Attribute: vertical-positioning-mode
22439     */
22440
22441    this.verticalPositioningMode = "uncontrolled";
22442    /**
22443     * The default vertical position of the region relative to the anchor element
22444     *
22445     * @public
22446     * @remarks
22447     * HTML Attribute: vertical-default-position
22448     */
22449
22450    this.verticalDefaultPosition = "unset";
22451    /**
22452     * Whether the region remains in the viewport (ie. detaches from the anchor) on the vertical axis
22453     *
22454     * @public
22455     * @remarks
22456     * HTML Attribute: vertical-viewport-lock
22457     */
22458
22459    this.verticalViewportLock = false;
22460    /**
22461     * Whether the region overlaps the anchor on the vertical axis
22462     *
22463     * @public
22464     * @remarks
22465     * HTML Attribute: vertical-inset
22466     */
22467
22468    this.verticalInset = false;
22469    /**
22470     * Defines how the height of the region is calculated
22471     *
22472     * @public
22473     * @remarks
22474     * HTML Attribute: vertical-scaling
22475     */
22476
22477    this.verticalScaling = "content";
22478    /**
22479     * Whether the region is positioned using css "position: fixed".
22480     * Otherwise the region uses "position: absolute".
22481     * Fixed placement allows the region to break out of parent containers,
22482     *
22483     * @public
22484     * @remarks
22485     * HTML Attribute: fixed-placement
22486     */
22487
22488    this.fixedPlacement = false;
22489    /**
22490     * Defines what triggers the anchored region to revaluate positioning
22491     *
22492     * @public
22493     * @remarks
22494     * HTML Attribute: auto-update-mode
22495     */
22496
22497    this.autoUpdateMode = "anchor";
22498    /**
22499     * The HTML element being used as the anchor
22500     *
22501     * @public
22502     */
22503
22504    this.anchorElement = null;
22505    /**
22506     * The HTML element being used as the viewport
22507     *
22508     * @public
22509     */
22510
22511    this.viewportElement = null;
22512    /**
22513     * indicates that an initial positioning pass on layout has completed
22514     *
22515     * @internal
22516     */
22517
22518    this.initialLayoutComplete = false;
22519    this.resizeDetector = null;
22520    /**
22521     * base offsets between the positioner's base position and the anchor's
22522     */
22523
22524    this.baseHorizontalOffset = 0;
22525    this.baseVerticalOffset = 0;
22526    this.pendingPositioningUpdate = false;
22527    this.pendingReset = false;
22528    this.currentDirection = 

vendor: 2,568 bytes, lines 22528-22618

22528_fastWebUtilities.Direction.ltr;
22529    this.regionVisible = false; // indicates that a layout update should occur even if geometry has not changed
22530    // used to ensure some attribute changes are applied
22531
22532    this.forceUpdate = false; // defines how big a difference in pixels there must be between states to
22533    // justify a layout update that affects the dom (prevents repeated sub-pixel corrections)
22534
22535    this.updateThreshold = 0.5;
22536    /**
22537     * update position
22538     */
22539
22540    this.update = () => {
22541      if (!this.pendingPositioningUpdate) {
22542        this.requestPositionUpdates();
22543      }
22544    };
22545    /**
22546     * starts observers
22547     */
22548
22549
22550    this.startObservers = () => {
22551      this.stopObservers();
22552
22553      if (this.anchorElement === null) {
22554        return;
22555      }
22556
22557      this.requestPositionUpdates();
22558
22559      if (this.resizeDetector !== null) {
22560        this.resizeDetector.observe(this.anchorElement);
22561        this.resizeDetector.observe(this);
22562      }
22563    };
22564    /**
22565     * get position updates
22566     */
22567
22568
22569    this.requestPositionUpdates = () => {
22570      if (this.anchorElement === null || this.pendingPositioningUpdate) {
22571        return;
22572      }
22573
22574      AnchoredRegion.intersectionService.requestPosition(this, this.handleIntersection);
22575      AnchoredRegion.intersectionService.requestPosition(this.anchorElement, this.handleIntersection);
22576
22577      if (this.viewportElement !== null) {
22578        AnchoredRegion.intersectionService.requestPosition(this.viewportElement, this.handleIntersection);
22579      }
22580
22581      this.pendingPositioningUpdate = true;
22582    };
22583    /**
22584     * stops observers
22585     */
22586
22587
22588    this.stopObservers = () => {
22589      if (this.pendingPositioningUpdate) {
22590        this.pendingPositioningUpdate = false;
22591        AnchoredRegion.intersectionService.cancelRequestPosition(this, this.handleIntersection);
22592
22593        if (this.anchorElement !== null) {
22594          AnchoredRegion.intersectionService.cancelRequestPosition(this.anchorElement, this.handleIntersection);
22595        }
22596
22597        if (this.viewportElement !== null) {
22598          AnchoredRegion.intersectionService.cancelRequestPosition(this.viewportElement, this.handleIntersection);
22599        }
22600      }
22601
22602      if (this.resizeDetector !== null) {
22603        this.resizeDetector.disconnect();
22604      }
22605    };
22606    /**
22607     * Gets the viewport element by id, or defaults to document root
22608     */
22609
22610
22611    this.getViewport = () => {
22612      if (typeof this.viewport !== "string" || this.viewport === "") {
22613        return document.documentElement;
22614      }
22615
22616      return document.getElementById(this.viewport);
22617    };
22618    /**

22619     *  Gets the anchor element by id
22620     */
22621
22622
22623    this.getAnchor = () => {
22624      return document.getElementById(this.anchor);
22625    };
22626    /**
22627     *  Handle intersections
22628     */
22629
22630
22631    this.handleIntersection = entries => {
22632      if (!this.pendingPositioningUpdate) {
22633        return;
22634      }
22635
22636      this.pendingPositioningUpdate = false;
22637
22638      if (!this.applyIntersectionEntries(entries)) {
22639        return;
22640      }
22641
22642      this.updateLayout();
22643    };
22644    /**
22645     *  iterate through intersection entries and apply data
22646     */
22647
22648
22649    this.applyIntersectionEntries = entries => {
22650      const regionEntry = entries.find(x => x.target === this);
22651      const anchorEntry = entries.find(x => x.target === this.anchorElement);
22652      const viewportEntry = entries.find(x => x.target === this.viewportElement);
22653
22654      if (regionEntry === undefined || viewportEntry === undefined || anchorEntry === undefined) {
22655        return false;
22656      } // don't update the dom unless there is a significant difference in rect positions
22657
22658
22659      if (!this.regionVisible || this.forceUpdate || this.regionRect === undefined || this.anchorRect === undefined || this.viewportRect === undefined || this.isRectDifferent(this.anchorRect, anchorEntry.boundingClientRect) || this.isRectDifferent(this.viewportRect, viewportEntry.boundingClientRect) || this.isRectDifferent(this.regionRect, regionEntry.boundingClientRect)) {
22660        this.regionRect = regionEntry.boundingClientRect;
22661        this.anchorRect = anchorEntry.boundingClientRect;
22662
22663        if (this.viewportElement === document.documentElement) {
22664          this.viewportRect = new DOMRectReadOnly(viewportEntry.boundingClientRect.x + document.documentElement.scrollLeft, viewportEntry.boundingClientRect.y + document.documentElement.scrollTop, viewportEntry.boundingClientRect.width, viewportEntry.boundingClientRect.height);
22665        } else {
22666          this.viewportRect = viewportEntry.boundingClientRect;
22667        }
22668
22669        this.updateRegionOffset();
22670        this.forceUpdate = false;
22671        return true;
22672      }
22673
22674      return false;
22675    };
22676    /**
22677     *  Update the offset values
22678     */
22679
22680
22681    this.updateRegionOffset = () => {
22682      if (this.anchorRect && this.regionRect) {
22683        this.baseHorizontalOffset = this.baseHorizontalOffset + (this.anchorRect.left - this.regionRect.left) + (this.translateX - this.baseHorizontalOffset);
22684        this.baseVerticalOffset = this.baseVerticalOffset + (this.anchorRect.top - this.regionRect.top) + (this.translateY - this.baseVerticalOffset);
22685      }
22686    };
22687    /**
22688     *  compare rects to see if there is enough change to justify a DOM update
22689     */
22690
22691
22692    this.isRectDifferent = (rectA, rectB) => {
22693      if (Math.abs(rectA.top - rectB.top) > this.updateThreshold || Math.abs(rectA.right - rectB.right) > this.updateThreshold || Math.abs(rectA.bottom - rectB.bottom) > this.updateThreshold || Math.abs(rectA.left - rectB.left) > this.updateThreshold) {
22694        return true;
22695      }
22696
22697      return false;
22698    };
22699    /**
22700     *  Handle resize events
22701     */
22702
22703
22704    this.handleResize = entries => {
22705      this.update();
22706    };
22707    /**
22708     * resets the component
22709     */
22710
22711
22712    this.reset = () => {
22713      if (!this.pendingReset) {
22714        return;
22715      }
22716
22717      this.pendingReset = false;
22718
22719      if (this.anchorElement === null) {
22720        this.anchorElement = this.getAnchor();
22721      }
22722
22723      if (this.viewportElement === null) {
22724        this.viewportElement = this.getViewport();
22725      }
22726
22727      this.currentDirection = (0, _direction.getDirection)(this);
22728      this.startObservers();
22729    };
22730    /**
22731     *  Recalculate layout related state values
22732     */
22733
22734
22735    this.updateLayout = () => {
22736      let desiredVerticalPosition = undefined;
22737      let desiredHorizontalPosition = undefined;
22738
22739      if (this.horizontalPositioningMode !== "uncontrolled") {
22740        const horizontalOptions = this.getPositioningOptions(this.horizontalInset);
22741
22742        if (this.horizontalDefaultPosition === "center") {
22743          desiredHorizontalPosition = "center";
22744        } else if (this.horizontalDefaultPosition !== "unset") {
22745          let dirCorrectedHorizontalDefaultPosition = this.horizontalDefaultPosition;
22746
22747          if (dirCorrectedHorizontalDefaultPosition === "start" || dirCorrectedHorizontalDefaultPosition === "end") {
22748            // if direction changes we reset the layout
22749            const newDirection = (0, _direction.getDirection)(this);
22750
22751            if (newDirection !== this.currentDirection) {
22752              this.currentDirection = newDirection;
22753              this.initialize();
22754              return;
22755            }
22756
22757            if (this.currentDirection === _fastWebUtilities.Direction.ltr) {
22758              dirCorrectedHorizontalDefaultPosition = dirCorrectedHorizontalDefaultPosition === "start" ? "left" : "right";
22759            } else {
22760              dirCorrectedHorizontalDefaultPosition = dirCorrectedHorizontalDefaultPosition === "start" ? "right" : "left";
22761            }
22762          }
22763
22764          switch (dirCorrectedHorizontalDefaultPosition) {

vendor: 15,183 bytes, lines 22765-23137

22765            case "left":
22766              desiredHorizontalPosition = this.horizontalInset ? "insetStart" : "start";
22767              break;
22768
22769            case "right":
22770              desiredHorizontalPosition = this.horizontalInset ? "insetEnd" : "end";
22771              break;
22772          }
22773        }
22774
22775        const horizontalThreshold = this.horizontalThreshold !== undefined ? this.horizontalThreshold : this.regionRect !== undefined ? this.regionRect.width : 0;
22776        const anchorLeft = this.anchorRect !== undefined ? this.anchorRect.left : 0;
22777        const anchorRight = this.anchorRect !== undefined ? this.anchorRect.right : 0;
22778        const anchorWidth = this.anchorRect !== undefined ? this.anchorRect.width : 0;
22779        const viewportLeft = this.viewportRect !== undefined ? this.viewportRect.left : 0;
22780        const viewportRight = this.viewportRect !== undefined ? this.viewportRect.right : 0;
22781
22782        if (desiredHorizontalPosition === undefined || !(this.horizontalPositioningMode === "locktodefault") && this.getAvailableSpace(desiredHorizontalPosition, anchorLeft, anchorRight, anchorWidth, viewportLeft, viewportRight) < horizontalThreshold) {
22783          desiredHorizontalPosition = this.getAvailableSpace(horizontalOptions[0], anchorLeft, anchorRight, anchorWidth, viewportLeft, viewportRight) > this.getAvailableSpace(horizontalOptions[1], anchorLeft, anchorRight, anchorWidth, viewportLeft, viewportRight) ? horizontalOptions[0] : horizontalOptions[1];
22784        }
22785      }
22786
22787      if (this.verticalPositioningMode !== "uncontrolled") {
22788        const verticalOptions = this.getPositioningOptions(this.verticalInset);
22789
22790        if (this.verticalDefaultPosition === "center") {
22791          desiredVerticalPosition = "center";
22792        } else if (this.verticalDefaultPosition !== "unset") {
22793          switch (this.verticalDefaultPosition) {
22794            case "top":
22795              desiredVerticalPosition = this.verticalInset ? "insetStart" : "start";
22796              break;
22797
22798            case "bottom":
22799              desiredVerticalPosition = this.verticalInset ? "insetEnd" : "end";
22800              break;
22801          }
22802        }
22803
22804        const verticalThreshold = this.verticalThreshold !== undefined ? this.verticalThreshold : this.regionRect !== undefined ? this.regionRect.height : 0;
22805        const anchorTop = this.anchorRect !== undefined ? this.anchorRect.top : 0;
22806        const anchorBottom = this.anchorRect !== undefined ? this.anchorRect.bottom : 0;
22807        const anchorHeight = this.anchorRect !== undefined ? this.anchorRect.height : 0;
22808        const viewportTop = this.viewportRect !== undefined ? this.viewportRect.top : 0;
22809        const viewportBottom = this.viewportRect !== undefined ? this.viewportRect.bottom : 0;
22810
22811        if (desiredVerticalPosition === undefined || !(this.verticalPositioningMode === "locktodefault") && this.getAvailableSpace(desiredVerticalPosition, anchorTop, anchorBottom, anchorHeight, viewportTop, viewportBottom) < verticalThreshold) {
22812          desiredVerticalPosition = this.getAvailableSpace(verticalOptions[0], anchorTop, anchorBottom, anchorHeight, viewportTop, viewportBottom) > this.getAvailableSpace(verticalOptions[1], anchorTop, anchorBottom, anchorHeight, viewportTop, viewportBottom) ? verticalOptions[0] : verticalOptions[1];
22813        }
22814      }
22815
22816      const nextPositionerDimension = this.getNextRegionDimension(desiredHorizontalPosition, desiredVerticalPosition);
22817      const positionChanged = this.horizontalPosition !== desiredHorizontalPosition || this.verticalPosition !== desiredVerticalPosition;
22818      this.setHorizontalPosition(desiredHorizontalPosition, nextPositionerDimension);
22819      this.setVerticalPosition(desiredVerticalPosition, nextPositionerDimension);
22820      this.updateRegionStyle();
22821
22822      if (!this.initialLayoutComplete) {
22823        this.initialLayoutComplete = true;
22824        this.requestPositionUpdates();
22825        return;
22826      }
22827
22828      if (!this.regionVisible) {
22829        this.regionVisible = true;
22830        this.style.removeProperty("pointer-events");
22831        this.style.removeProperty("opacity");
22832        this.classList.toggle("loaded", true);
22833        this.$emit("loaded", this, {
22834          bubbles: false
22835        });
22836      }
22837
22838      this.updatePositionClasses();
22839
22840      if (positionChanged) {
22841        // emit change event
22842        this.$emit("positionchange", this, {
22843          bubbles: false
22844        });
22845      }
22846    };
22847    /**
22848     *  Updates the style string applied to the region element as well as the css classes attached
22849     *  to the root element
22850     */
22851
22852
22853    this.updateRegionStyle = () => {
22854      this.style.width = this.regionWidth;
22855      this.style.height = this.regionHeight;
22856      this.style.transform = `translate(${this.translateX}px, ${this.translateY}px)`;
22857    };
22858    /**
22859     *  Updates the css classes that reflect the current position of the element
22860     */
22861
22862
22863    this.updatePositionClasses = () => {
22864      this.classList.toggle("top", this.verticalPosition === "start");
22865      this.classList.toggle("bottom", this.verticalPosition === "end");
22866      this.classList.toggle("inset-top", this.verticalPosition === "insetStart");
22867      this.classList.toggle("inset-bottom", this.verticalPosition === "insetEnd");
22868      this.classList.toggle("vertical-center", this.verticalPosition === "center");
22869      this.classList.toggle("left", this.horizontalPosition === "start");
22870      this.classList.toggle("right", this.horizontalPosition === "end");
22871      this.classList.toggle("inset-left", this.horizontalPosition === "insetStart");
22872      this.classList.toggle("inset-right", this.horizontalPosition === "insetEnd");
22873      this.classList.toggle("horizontal-center", this.horizontalPosition === "center");
22874    };
22875    /**
22876     * Get horizontal positioning state based on desired position
22877     */
22878
22879
22880    this.setHorizontalPosition = (desiredHorizontalPosition, nextPositionerDimension) => {
22881      if (desiredHorizontalPosition === undefined || this.regionRect === undefined || this.anchorRect === undefined || this.viewportRect === undefined) {
22882        return;
22883      }
22884
22885      let nextRegionWidth = 0;
22886
22887      switch (this.horizontalScaling) {
22888        case "anchor":
22889        case "fill":
22890          nextRegionWidth = this.horizontalViewportLock ? this.viewportRect.width : nextPositionerDimension.width;
22891          this.regionWidth = `${nextRegionWidth}px`;
22892          break;
22893
22894        case "content":
22895          nextRegionWidth = this.regionRect.width;
22896          this.regionWidth = "unset";
22897          break;
22898      }
22899
22900      let sizeDelta = 0;
22901
22902      switch (desiredHorizontalPosition) {
22903        case "start":
22904          this.translateX = this.baseHorizontalOffset - nextRegionWidth;
22905
22906          if (this.horizontalViewportLock && this.anchorRect.left > this.viewportRect.right) {
22907            this.translateX = this.translateX - (this.anchorRect.left - this.viewportRect.right);
22908          }
22909
22910          break;
22911
22912        case "insetStart":
22913          this.translateX = this.baseHorizontalOffset - nextRegionWidth + this.anchorRect.width;
22914
22915          if (this.horizontalViewportLock && this.anchorRect.right > this.viewportRect.right) {
22916            this.translateX = this.translateX - (this.anchorRect.right - this.viewportRect.right);
22917          }
22918
22919          break;
22920
22921        case "insetEnd":
22922          this.translateX = this.baseHorizontalOffset;
22923
22924          if (this.horizontalViewportLock && this.anchorRect.left < this.viewportRect.left) {
22925            this.translateX = this.translateX - (this.anchorRect.left - this.viewportRect.left);
22926          }
22927
22928          break;
22929
22930        case "end":
22931          this.translateX = this.baseHorizontalOffset + this.anchorRect.width;
22932
22933          if (this.horizontalViewportLock && this.anchorRect.right < this.viewportRect.left) {
22934            this.translateX = this.translateX - (this.anchorRect.right - this.viewportRect.left);
22935          }
22936
22937          break;
22938
22939        case "center":
22940          sizeDelta = (this.anchorRect.width - nextRegionWidth) / 2;
22941          this.translateX = this.baseHorizontalOffset + sizeDelta;
22942
22943          if (this.horizontalViewportLock) {
22944            const regionLeft = this.anchorRect.left + sizeDelta;
22945            const regionRight = this.anchorRect.right - sizeDelta;
22946
22947            if (regionLeft < this.viewportRect.left && !(regionRight > this.viewportRect.right)) {
22948              this.translateX = this.translateX - (regionLeft - this.viewportRect.left);
22949            } else if (regionRight > this.viewportRect.right && !(regionLeft < this.viewportRect.left)) {
22950              this.translateX = this.translateX - (regionRight - this.viewportRect.right);
22951            }
22952          }
22953
22954          break;
22955      }
22956
22957      this.horizontalPosition = desiredHorizontalPosition;
22958    };
22959    /**
22960     * Set vertical positioning state based on desired position
22961     */
22962
22963
22964    this.setVerticalPosition = (desiredVerticalPosition, nextPositionerDimension) => {
22965      if (desiredVerticalPosition === undefined || this.regionRect === undefined || this.anchorRect === undefined || this.viewportRect === undefined) {
22966        return;
22967      }
22968
22969      let nextRegionHeight = 0;
22970
22971      switch (this.verticalScaling) {
22972        case "anchor":
22973        case "fill":
22974          nextRegionHeight = this.verticalViewportLock ? this.viewportRect.height : nextPositionerDimension.height;
22975          this.regionHeight = `${nextRegionHeight}px`;
22976          break;
22977
22978        case "content":
22979          nextRegionHeight = this.regionRect.height;
22980          this.regionHeight = "unset";
22981          break;
22982      }
22983
22984      let sizeDelta = 0;
22985
22986      switch (desiredVerticalPosition) {
22987        case "start":
22988          this.translateY = this.baseVerticalOffset - nextRegionHeight;
22989
22990          if (this.verticalViewportLock && this.anchorRect.top > this.viewportRect.bottom) {
22991            this.translateY = this.translateY - (this.anchorRect.top - this.viewportRect.bottom);
22992          }
22993
22994          break;
22995
22996        case "insetStart":
22997          this.translateY = this.baseVerticalOffset - nextRegionHeight + this.anchorRect.height;
22998
22999          if (this.verticalViewportLock && this.anchorRect.bottom > this.viewportRect.bottom) {
23000            this.translateY = this.translateY - (this.anchorRect.bottom - this.viewportRect.bottom);
23001          }
23002
23003          break;
23004
23005        case "insetEnd":
23006          this.translateY = this.baseVerticalOffset;
23007
23008          if (this.verticalViewportLock && this.anchorRect.top < this.viewportRect.top) {
23009            this.translateY = this.translateY - (this.anchorRect.top - this.viewportRect.top);
23010          }
23011
23012          break;
23013
23014        case "end":
23015          this.translateY = this.baseVerticalOffset + this.anchorRect.height;
23016
23017          if (this.verticalViewportLock && this.anchorRect.bottom < this.viewportRect.top) {
23018            this.translateY = this.translateY - (this.anchorRect.bottom - this.viewportRect.top);
23019          }
23020
23021          break;
23022
23023        case "center":
23024          sizeDelta = (this.anchorRect.height - nextRegionHeight) / 2;
23025          this.translateY = this.baseVerticalOffset + sizeDelta;
23026
23027          if (this.verticalViewportLock) {
23028            const regionTop = this.anchorRect.top + sizeDelta;
23029            const regionBottom = this.anchorRect.bottom - sizeDelta;
23030
23031            if (regionTop < this.viewportRect.top && !(regionBottom > this.viewportRect.bottom)) {
23032              this.translateY = this.translateY - (regionTop - this.viewportRect.top);
23033            } else if (regionBottom > this.viewportRect.bottom && !(regionTop < this.viewportRect.top)) {
23034              this.translateY = this.translateY - (regionBottom - this.viewportRect.bottom);
23035            }
23036          }
23037
23038      }
23039
23040      this.verticalPosition = desiredVerticalPosition;
23041    };
23042    /**
23043     *  Get available positions based on positioning mode
23044     */
23045
23046
23047    this.getPositioningOptions = inset => {
23048      if (inset) {
23049        return ["insetStart", "insetEnd"];
23050      }
23051
23052      return ["start", "end"];
23053    };
23054    /**
23055     *  Get the space available for a particular relative position
23056     */
23057
23058
23059    this.getAvailableSpace = (positionOption, anchorStart, anchorEnd, anchorSpan, viewportStart, viewportEnd) => {
23060      const spaceStart = anchorStart - viewportStart;
23061      const spaceEnd = viewportEnd - (anchorStart + anchorSpan);
23062
23063      switch (positionOption) {
23064        case "start":
23065          return spaceStart;
23066
23067        case "insetStart":
23068          return spaceStart + anchorSpan;
23069
23070        case "insetEnd":
23071          return spaceEnd + anchorSpan;
23072
23073        case "end":
23074          return spaceEnd;
23075
23076        case "center":
23077          return Math.min(spaceStart, spaceEnd) * 2 + anchorSpan;
23078      }
23079    };
23080    /**
23081     * Get region dimensions
23082     */
23083
23084
23085    this.getNextRegionDimension = (desiredHorizontalPosition, desiredVerticalPosition) => {
23086      const newRegionDimension = {
23087        height: this.regionRect !== undefined ? this.regionRect.height : 0,
23088        width: this.regionRect !== undefined ? this.regionRect.width : 0
23089      };
23090
23091      if (desiredHorizontalPosition !== undefined && this.horizontalScaling === "fill") {
23092        newRegionDimension.width = this.getAvailableSpace(desiredHorizontalPosition, this.anchorRect !== undefined ? this.anchorRect.left : 0, this.anchorRect !== undefined ? this.anchorRect.right : 0, this.anchorRect !== undefined ? this.anchorRect.width : 0, this.viewportRect !== undefined ? this.viewportRect.left : 0, this.viewportRect !== undefined ? this.viewportRect.right : 0);
23093      } else if (this.horizontalScaling === "anchor") {
23094        newRegionDimension.width = this.anchorRect !== undefined ? this.anchorRect.width : 0;
23095      }
23096
23097      if (desiredVerticalPosition !== undefined && this.verticalScaling === "fill") {
23098        newRegionDimension.height = this.getAvailableSpace(desiredVerticalPosition, this.anchorRect !== undefined ? this.anchorRect.top : 0, this.anchorRect !== undefined ? this.anchorRect.bottom : 0, this.anchorRect !== undefined ? this.anchorRect.height : 0, this.viewportRect !== undefined ? this.viewportRect.top : 0, this.viewportRect !== undefined ? this.viewportRect.bottom : 0);
23099      } else if (this.verticalScaling === "anchor") {
23100        newRegionDimension.height = this.anchorRect !== undefined ? this.anchorRect.height : 0;
23101      }
23102
23103      return newRegionDimension;
23104    };
23105    /**
23106     * starts event listeners that can trigger auto updating
23107     */
23108
23109
23110    this.startAutoUpdateEventListeners = () => {
23111      window.addEventListener(_fastWebUtilities.eventResize, this.update, {
23112        passive: true
23113      });
23114      window.addEventListener(_fastWebUtilities.eventScroll, this.update, {
23115        passive: true,
23116        capture: true
23117      });
23118
23119      if (this.resizeDetector !== null && this.viewportElement !== null) {
23120        this.resizeDetector.observe(this.viewportElement);
23121      }
23122    };
23123    /**
23124     * stops event listeners that can trigger auto updating
23125     */
23126
23127
23128    this.stopAutoUpdateEventListeners = () => {
23129      window.removeEventListener(_fastWebUtilities.eventResize, this.update);
23130      window.removeEventListener(_fastWebUtilities.eventScroll, this.update);
23131
23132      if (this.resizeDetector !== null && this.viewportElement !== null) {
23133        this.resizeDetector.unobserve(this.viewportElement);
23134      }
23135    };
23136  }
23137

23138  anchorChanged() {
23139    if (this.initialLayoutComplete) {
23140      this.anchorElement = this.getAnchor();
23141    }
23142  }
23143
23144  viewportChanged() {
23145    if (this.initialLayoutComplete) {
23146      this.viewportElement = this.getViewport();
23147    }
23148  }
23149
23150  horizontalPositioningModeChanged() {
23151    this.requestReset();
23152  }
23153
23154  horizontalDefaultPositionChanged() {
23155    this.updateForAttributeChange();
23156  }
23157
23158  horizontalViewportLockChanged() {
23159    this.updateForAttributeChange();
23160  }
23161
23162  horizontalInsetChanged() {
23163    this.updateForAttributeChange();
23164  }
23165
23166  horizontalThresholdChanged() {
23167    this.updateForAttributeChange();
23168  }
23169
23170  horizontalScalingChanged() {
23171    this.updateForAttributeChange();
23172  }
23173
23174  verticalPositioningModeChanged() {
23175    this.requestReset();
23176  }
23177
23178  verticalDefaultPositionChanged() {
23179    this.updateForAttributeChange();
23180  }
23181
23182  verticalViewportLockChanged() {
23183    this.updateForAttributeChange();
23184  }
23185
23186  verticalInsetChanged() {
23187    this.updateForAttributeChange();
23188  }
23189
23190  verticalThresholdChanged() {
23191    this.updateForAttributeChange();
23192  }
23193
23194  verticalScalingChanged() {
23195    this.updateForAttributeChange();
23196  }
23197
23198  fixedPlacementChanged() {
23199    if (this.$fastController.isConnected && this.initialLayoutComplete) {
23200      this.initialize();
23201    }
23202  }
23203
23204  autoUpdateModeChanged(prevMode, newMode) {
23205    if (this.$fastController.isConnected && this.initialLayoutComplete) {
23206      if (prevMode === "auto") {
23207        this.stopAutoUpdateEventListeners();
23208      }
23209
23210      if (newMode === "auto") {
23211        this.startAutoUpdateEventListeners();
23212      }
23213    }
23214  }
23215
23216  anchorElementChanged() {
23217    this.requestReset();
23218  }
23219
23220  viewportElementChanged() {
23221    if (this.$fastController.isConnected && this.initialLayoutComplete) {
23222      this.initialize();
23223    }
23224  }
23225  /**
23226   * @internal
23227   */
23228
23229
23230  connectedCallback() {
23231    super.connectedCallback();
23232
23233    if (this.autoUpdateMode === "auto") {
23234      this.startAutoUpdateEventListeners();
23235    }
23236
23237    this.initialize();
23238  }
23239  /**
23240   * @internal
23241   */
23242
23243
23244  disconnectedCallback() {
23245    super.disconnectedCallback();
23246
23247    if (this.autoUpdateMode === "auto") {
23248      this.stopAutoUpdateEventListeners();
23249    }
23250
23251    this.stopObservers();
23252    this.disconnectResizeDetector();
23253  }
23254  /**
23255   * @internal
23256   */
23257
23258
23259  adoptedCallback() {
23260    this.initialize();
23261  }
23262  /**
23263   * destroys the instance's resize observer
23264   */
23265
23266
23267  disconnectResizeDetector() {
23268    if (this.resizeDetector !== null) {
23269      this.resizeDetector.disconnect();
23270      this.resizeDetector = null;
23271    }
23272  }
23273  /**
23274   * initializes the instance's resize observer
23275   */
23276
23277
23278  initializeResizeDetector() {
23279    this.disconnectResizeDetector();
23280    this.resizeDetector = new window.ResizeObserver(this.handleResize);
23281  }
23282  /**
23283   * react to attribute changes that don't require a reset
23284   */
23285
23286
23287  updateForAttributeChange() {
23288    if (this.$fastController.isConnected && this.initialLayoutComplete) {
23289      this.forceUpdate = true;
23290      this.update();
23291    }
23292  }
23293  /**
23294   * fully initializes the component
23295   */
23296
23297
23298  initialize() {
23299    this.initializeResizeDetector();
23300
23301    if (this.anchorElement === null) {
23302      this.anchorElement = this.getAnchor();
23303    }
23304
23305    this.requestReset();
23306  }
23307  /**
23308   * Request a reset if there are currently no open requests
23309   */
23310
23311
23312  requestReset() {
23313    if (this.$fastController.isConnected && this.pendingReset === false) {
23314      this.setInitialState();
23315
23316      _fastElement.DOM.queueUpdate(() => this.reset());
23317
23318      this.pendingReset = true;
23319    }
23320  }
23321  /**
23322   * sets the starting configuration for component internal values
23323   */
23324
23325
23326  setInitialState() {
23327    this.initialLayoutComplete = false;
23328    this.regionVisible = false;
23329    this.translateX = 0;
23330    this.translateY = 0;
23331    this.baseHorizontalOffset = 0;
23332    this.baseVerticalOffset = 0;
23333    this.viewportRect = undefined;
23334    this.regionRect = undefined;
23335    this.anchorRect = undefined;
23336    this.verticalPosition = undefined;
23337    this.horizontalPosition = undefined;
23338    this.style.opacity = "0";
23339    this.style.pointerEvents = "none";
23340    this.forceUpdate = false;
23341    this.style.position = this.fixedPlacement ? "fixed" : "absolute";
23342    this.updatePositionClasses();
23343    this.updateRegionStyle();
23344  }
23345
23346}
23347
23348exports.AnchoredRegion = AnchoredRegion;
23349AnchoredRegion.intersectionService = new _intersectionService.IntersectionService();
23350(0, _tslib.__decorate)([_fastElement.attr], AnchoredRegion.prototype, "anchor", void 0);
23351(0, _tslib.__decorate)([_fastElement.attr], AnchoredRegion.prototype, "viewport", void 0);
23352(0, _tslib.__decorate)([(0, _fastElement.attr)({
23353  attribute: "horizontal-positioning-mode"
23354})], AnchoredRegion.prototype, "horizontalPositioningMode", void 0);
23355(0, _tslib.__decorate)([(0, _fastElement.attr)({
23356  attribute: "horizontal-default-position"
23357})], AnchoredRegion.prototype, "horizontalDefaultPosition", void 0);
23358(0, _tslib.__decorate)([(0, _fastElement.attr)({
23359  attribute: "horizontal-viewport-lock",
23360  mode: "boolean"
23361})], AnchoredRegion.prototype, "horizontalViewportLock", void 0);
23362(0, _tslib.__decorate)([(0, _fastElement.attr)({
23363  attribute: "horizontal-inset",
23364  mode: "boolean"
23365})], AnchoredRegion.prototype, "horizontalInset", void 0);
23366(0, _tslib.__decorate)([(0, _fastElement.attr)({
23367  attribute: "horizontal-threshold"
23368})], AnchoredRegion.prototype, "horizontalThreshold", void 0);
23369(0, _tslib.__decorate)([(0, _fastElement.attr)({
23370  attribute: "horizontal-scaling"
23371})], AnchoredRegion.prototype, "horizontalScaling", void 0);
23372(0, _tslib.__decorate)([(0, _fastElement.attr)({
23373  attribute: "vertical-positioning-mode"
23374})], AnchoredRegion.prototype, "verticalPositioningMode", void 0);
23375(0, _tslib.__decorate)([(0, _fastElement.attr)({
23376  attribute: "vertical-default-position"
23377})], AnchoredRegion.prototype, "verticalDefaultPosition", void 0);
23378(0, _tslib.__decorate)([(0, _fastElement.attr)({
23379  attribute: "vertical-viewport-lock",
23380  mode: "boolean"
23381})], AnchoredRegion.prototype, "verticalViewportLock", void 0);
23382(0, _tslib.__decorate)([(0, _fastElement.attr)({
23383  attribute: "vertical-inset",
23384  mode: "boolean"
23385})], AnchoredRegion.prototype, "verticalInset", void 0);
23386(0, _tslib.__decorate)([(0, _fastElement.attr)({
23387  attribute: "vertical-threshold"
23388})], AnchoredRegion.prototype, "verticalThreshold", void 0);
23389(0, _tslib.__decorate)([(0, _fastElement.attr)({
23390  attribute: "vertical-scaling"
23391})], AnchoredRegion.prototype, "verticalScaling", void 0);
23392(0, _tslib.__decorate)([(0, _fastElement.attr)({
23393  attribute: "fixed-placement",
23394  mode: "boolean"
23395})], AnchoredRegion.prototype, "fixedPlacement", void 0);
23396(0, _tslib.__decorate)([(0, _fastElement.attr)({
23397  attribute: "auto-update-mode"
23398})], AnchoredRegion.prototype, "autoUpdateMode", void 0);
23399(0, _tslib.__decorate)([_fastElement.observable], AnchoredRegion.prototype, "anchorElement", void 0);
23400(0, _tslib.__decorate)([_fastElement.observable], AnchoredRegion.prototype, "viewportElement", void 0);
23401(0, _tslib.__decorate)([_fastElement.observable], AnchoredRegion.prototype, "initialLayoutComplete", void 0);
23402
23403}

23403,{"../foundation-element/foundation-element.js":251,"../utilities/direction.js":361,"../utilities/intersection-service.js":363,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],183:[function(require,module,exports){
23404"use strict";
23405
23406Object.defineProperty(exports, "__esModule", {
23407  value: true
23408});
23409exports.anchoredRegionTemplate = void 0;
23410
23411var _fastElement = require("@microsoft/fast-element");
23412
23413/**
23414 * The template for the {@link @microsoft/fast-foundation#(AnchoredRegion:class)} component.
23415 * @public
23416 */
23417const anchoredRegionTemplate = (context, definition) => (0, _fastElement.html)`
23418    <template class="${x => x.initialLayoutComplete ? "loaded" : ""}">
23419        ${(0, _fastElement.when)(x => x.initialLayoutComplete, (0, _fastElement.html)`
23420                <slot></slot>
23421            `)}
23422    </template>
23423`;
23424
23425exports.anchoredRegionTemplate = anchoredRegionTemplate;
23426
23427},{"@microsoft/fast-element":151}],184:[function(require,module,exports){
23428"use strict";
23429
23430Object.defineProperty(exports, "__esModule", {
23431  value: true
23432});
23433
23434var _anchoredRegionTemplate = require("./anchored-region.template.js");
23435
23436Object.keys(_anchoredRegionTemplate).forEach(function (key) {
23437  if (key === "default" || key === "__esModule") return;
23438  if (key in exports && exports[key] === _anchoredRegionTemplate[key]) return;
23439  Object.defineProperty(exports, key, {
23440    enumerable: true,
23441    get: function () {
23442      return _anchoredRegionTemplate[key];
23443    }
23444  });
23445});
23446
23447var _anchoredRegion = require("./anchored-region.js");
23448
23449Object.keys(_anchoredRegion).forEach(function (key) {
23450  if (key === "default" || key === "__esModule") return;
23451  if (key in exports && exports[key] === _anchoredRegion[key]) return;
23452  Object.defineProperty(exports, key, {
23453    enumerable: true,
23454    get: function () {
23455      return _anchoredRegion[key];
23456    }
23457  });
23458});
23459
23460var _anchoredRegionConfig = require("./anchored-region-config.js");
23461
23462Object.keys(_anchoredRegionConfig).forEach(function (key) {
23463  if (key === "default" || key === "__esModule") return;
23464  if (key in exports && exports[key] === _anchoredRegionConfig[key]) return;
23465  Object.defineProperty(exports, key, {
23466    enumerable: true,
23467    get: function () {
23468      return _anchoredRegionConfig[key];
23469    }
23470  });
23471});
23472
23473},{"./anchored-region-config.js":181,"./anchored-region.js":182,"./anchored-region.template.js":183}],185:[function(require,module,exports){
23474"use strict";
23475
23476Object.defineProperty(exports, "__esModule", {
23477  value: true
23478});
23479exports.Avatar = void 0;
23480
23481var _tslib = require("tslib");
23482
23483var _fastElement = require("@microsoft/fast-element");
23484
23485var _foundationElement = require("../foundation-element/foundation-element.js");
23486
23487/**
23488 * An Avatar Custom HTML Element
23489 *
23490 * @slot media - Used for media such as an image
23491 * @slot - The default slot for avatar text, commonly a name or initials
23492 * @slot badge - Used to provide a badge, such as a status badge
23493 * @csspart backplate - The wrapping container for the avatar
23494 * @csspart link - The avatar link
23495 * @csspart media - The media slot
23496 * @csspart content - The default slot
23497 *
23498 * @public
23499 */
23500class Avatar extends _foundationElement.FoundationElement {
23501  /**
23502   * Internal
23503   */
23504  connectedCallback() {
23505    super.connectedCallback();
23506
23507    if (!this.shape) {
23508      this.shape = "circle";
23509    }
23510  }
23511
23512}
23513
23514exports.Avatar = Avatar;
23515(0, _tslib.__decorate)([_fastElement.attr], Avatar.prototype, "fill", void 0);
23516(0, _tslib.__decorate)([_fastElement.attr], Avatar.prototype, "color", void 0);
23517(0, _tslib.__decorate)([_fastElement.attr], Avatar.prototype, "link", void 0);
23518(0, _tslib.__decorate)([_fastElement.attr], Avatar.prototype, "shape", void 0);
23519
23520},{"../foundation-element/foundation-element.js":251,"@microsoft/fast-element":151,"tslib":372}],186:[function(require,module,exports){
23521"use strict";
23522
23523Object.defineProperty(exports, "__esModule", {
23524  value: true
23525});
23526exports.avatarTemplate = void 0;
23527
23528var _fastElement = require("@microsoft/fast-element");
23529
23530/**
23531 * The template for {@link @microsoft/fast-foundation#Avatar} component.
23532 * @public
23533 */
23534const avatarTemplate = (context, definition) => (0, _fastElement.html)`
23535    <div
23536        class="backplate ${x => x.shape}"
23537        part="backplate"
23538        style="${x => x.fill ? `background-color: var(--avatar-fill-${x.fill});` : void 0}"
23539    >
23540        <a
23541            class="link"
23542            part="link"
23543            href="${x => x.link ? x.link : void 0}"
23544            style="${x => x.color ? `color: var(--avatar-color-${x.color});` : void 0}"
23545        >
23546            <slot name="media" part="media">${definition.media || ""}</slot>
23547            <slot class="content" part="content"><slot>
23548        </a>
23549    </div>
23550    <slot name="badge" part="badge"></slot>
23551`;
23552
23553exports.avatarTemplate = avatarTemplate;
23554
23555},{"@microsoft/fast-element":151}],187:[function(require,module,exports){
23556"use strict";
23557
23558Object.defineProperty(exports, "__esModule", {
23559  value: true
23560});
23561
23562var _avatarTemplate = require("./avatar.template.js");
23563
23564Object.keys(_avatarTemplate).forEach(function (key) {

23565  if (key === "default" || key === "__esModule") return;
23566  if (key in exports && exports[key] === _avatarTemplate[key]) return;
23567  Object.defineProperty(exports, key, {
23568    enumerable: true,
23569    get: function () {
23570      return _avatarTemplate[key];
23571    }
23572  });
23573});
23574
23575var _avatar = require("./avatar.js");
23576
23577Object.keys(_avatar).forEach(function (key) {
23578  if (key === "default" || key === "__esModule") return;
23579  if (key in exports && exports[key] === _avatar[key]) return;
23580  Object.defineProperty(exports, key, {
23581    enumerable: true,
23582    get: function () {
23583      return _avatar[key];
23584    }
23585  });
23586});
23587
23588},{"./avatar.js":185,"./avatar.template.js":186}],188:[function(require,module,exports){
23589"use strict";
23590
23591Object.defineProperty(exports, "__esModule", {
23592  value: true
23593});
23594exports.Badge = void 0;
23595
23596var _tslib = require("tslib");
23597
23598var _fastElement = require("@microsoft/fast-element");
23599
23600var _foundationElement = require("../foundation-element/foundation-element.js");
23601
23602/**
23603 * A Badge Custom HTML Element.
23604 * @slot - The default slot for the badge
23605 * @csspart control - The element representing the badge, which wraps the default slot
23606 *
23607 * @public
23608 */
23609class Badge extends _foundationElement.FoundationElement {
23610  constructor() {
23611    super(...arguments);
23612
23613    this.generateBadgeStyle = () => {
23614      if (!this.fill && !this.color) {
23615        return;
23616      }
23617
23618      const fill = `background-color: var(--badge-fill-${this.fill});`;
23619      const color = `color: var(--badge-color-${this.color});`;
23620
23621      if (this.fill && !this.color) {
23622        return fill;
23623      } else if (this.color && !this.fill) {
23624        return color;
23625      } else {
23626        return `${color} ${fill}`;
23627      }
23628    };
23629  }
23630
23631}
23632
23633exports.Badge = Badge;
23634(0, _tslib.__decorate)([(0, _fastElement.attr)({
23635  attribute: "fill"
23636})], Badge.prototype, "fill", void 0);
23637(0, _tslib.__decorate)([(0, _fastElement.attr)({
23638  attribute: "color"
23639})], Badge.prototype, "color", void 0);
23640(0, _tslib.__decorate)([(0, _fastElement.attr)({
23641  mode: "boolean"
23642})], Badge.prototype, "circular", void 0);
23643
23644},{"../foundation-element/foundation-element.js":251,"@microsoft/fast-element":151,"tslib":372}],189:[function(require,module,exports){
23645"use strict";
23646
23647Object.defineProperty(exports, "__esModule", {
23648  value: true
23649});
23650exports.badgeTemplate = void 0;
23651
23652var _fastElement = require("@microsoft/fast-element");
23653
23654/**
23655 * The template for the {@link @microsoft/fast-foundation#Badge} component.
23656 * @public
23657 */
23658const badgeTemplate = (context, definition) => (0, _fastElement.html)`
23659    <template class="${x => x.circular ? "circular" : ""}">
23660        <div class="control" part="control" style="${x => x.generateBadgeStyle()}">
23661            <slot></slot>
23662        </div>
23663    </template>
23664`;
23665
23666exports.badgeTemplate = badgeTemplate;
23667
23668},{"@microsoft/fast-element":151}],190:[function(require,module,exports){
23669"use strict";
23670
23671Object.defineProperty(exports, "__esModule", {
23672  value: true
23673});
23674
23675var _badgeTemplate = require("./badge.template.js");
23676
23677Object.keys(_badgeTemplate).forEach(function (key) {
23678  if (key === "default" || key === "__esModule") return;
23679  if (key in exports && exports[key] === _badgeTemplate[key]) return;
23680  Object.defineProperty(exports, key, {
23681    enumerable: true,
23682    get: function () {
23683      return _badgeTemplate[key];
23684    }
23685  });
23686});
23687
23688var _badge = require("./badge.js");
23689
23690Object.keys(_badge).forEach(function (key) {
23691  if (key === "default" || key === "__esModule") return;
23692  if (key in exports && exports[key] === _badge[key]) return;
23693  Object.defineProperty(exports, key, {
23694    enumerable: true,
23695    get: function () {
23696      return _badge[key];
23697    }
23698  });
23699});
23700
23701},{"./badge.js":188,"./badge.template.js":189}],191:[function(require,module,exports){
23702"use strict";
23703
23704Object.defineProperty(exports, "__esModule", {
23705  value: true
23706});
23707exports.BreadcrumbItem = void 0;
23708
23709var _tslib = require("tslib");
23710
23711var _fastElement = require("@microsoft/fast-element");
23712
23713var _anchor = require("../anchor/anchor.js");
23714
23715var _index = require("../patterns/index.js");
23716
23717var _applyMixins = require("../utilities/apply-mixins.js");
23718
23719/**
23720 * A Breadcrumb Item Custom HTML Element.
23721 *
23722 * @public
23723 */

23724class BreadcrumbItem extends _anchor.Anchor {
23725  constructor() {
23726    super(...arguments);
23727    /**
23728     * @internal
23729     */
23730
23731    this.separator = true;
23732  }
23733
23734}
23735
23736exports.BreadcrumbItem = BreadcrumbItem;
23737(0, _tslib.__decorate)([_fastElement.observable], BreadcrumbItem.prototype, "separator", void 0);
23738(0, _applyMixins.applyMixins)(BreadcrumbItem, _index.StartEnd, _anchor.DelegatesARIALink);
23739
23740},{"../anchor/anchor.js":178,"../patterns/index.js":276,"../utilities/apply-mixins.js":358,"@microsoft/fast-element":151,"tslib":372}],192:[function(require,module,exports){
23741"use strict";
23742
23743Object.defineProperty(exports, "__esModule", {
23744  value: true
23745});
23746exports.breadcrumbItemTemplate = void 0;
23747
23748var _fastElement = require("@microsoft/fast-element");
23749
23750var _anchorTemplate = require("../anchor/anchor.template.js");
23751
23752var _startEnd = require("../patterns/start-end.js");
23753
23754/**
23755 * The template for the {@link @microsoft/fast-foundation#(BreadcrumbItem:class)} component.
23756 * @public
23757 */
23758const breadcrumbItemTemplate = (context, definition) => (0, _fastElement.html)`
23759    <div role="listitem" class="listitem" part="listitem">
23760        ${(0, _fastElement.when)(x => x.href && x.href.length > 0, (0, _fastElement.html)`
23761                ${(0, _anchorTemplate.anchorTemplate)(context, definition)}
23762            `)}
23763        ${(0, _fastElement.when)(x => !x.href, (0, _fastElement.html)`
23764                ${(0, _startEnd.startSlotTemplate)(context, definition)}
23765                <slot></slot>
23766                ${(0, _startEnd.endSlotTemplate)(context, definition)}
23767            `)}
23768        ${(0, _fastElement.when)(x => x.separator, (0, _fastElement.html)`
23769                <span class="separator" part="separator" aria-hidden="true">
23770                    <slot name="separator">${definition.separator || ""}</slot>
23771                </span>
23772            `)}
23773    </div>
23774`;
23775
23776exports.breadcrumbItemTemplate = breadcrumbItemTemplate;
23777
23778},{"../anchor/anchor.template.js":179,"../patterns/start-end.js":277,"@microsoft/fast-element":151}],193:[function(require,module,exports){
23779"use strict";
23780
23781Object.defineProperty(exports, "__esModule", {
23782  value: true
23783});
23784
23785var _breadcrumbItemTemplate = require("./breadcrumb-item.template.js");
23786
23787Object.keys(_breadcrumbItemTemplate).forEach(function (key) {
23788  if (key === "default" || key === "__esModule") return;
23789  if (key in exports && exports[key] === _breadcrumbItemTemplate[key]) return;
23790  Object.defineProperty(exports, key, {
23791    enumerable: true,
23792    get: function () {
23793      return _breadcrumbItemTemplate[key];
23794    }
23795  });
23796});
23797
23798var _breadcrumbItem = require("./breadcrumb-item.js");
23799
23800Object.keys(_breadcrumbItem).forEach(function (key) {
23801  if (key === "default" || key === "__esModule") return;
23802  if (key in exports && exports[key] === _breadcrumbItem[key]) return;
23803  Object.defineProperty(exports, key, {
23804    enumerable: true,
23805    get: function () {
23806      return _breadcrumbItem[key];
23807    }
23808  });
23809});
23810
23811},{"./breadcrumb-item.js":191,"./breadcrumb-item.template.js":192}],194:[function(require,module,exports){
23812"use strict";
23813
23814Object.defineProperty(exports, "__esModule", {
23815  value: true
23816});
23817exports.Breadcrumb = void 0;
23818
23819var _tslib = require("tslib");
23820
23821var _fastElement = require("@microsoft/fast-element");
23822
23823var _breadcrumbItem = require("../breadcrumb-item/breadcrumb-item.js");
23824
23825var _foundationElement = require("../foundation-element/foundation-element.js");
23826
23827/**
23828 * A Breadcrumb Custom HTML Element.
23829 * @slot - The default slot for the breadcrumb items
23830 * @csspart list - The element wrapping the slotted items
23831 *
23832 * @public
23833 */
23834class Breadcrumb extends _foundationElement.FoundationElement {
23835  slottedBreadcrumbItemsChanged() {
23836    if (this.$fastController.isConnected) {
23837      if (this.slottedBreadcrumbItems === undefined || this.slottedBreadcrumbItems.length === 0) {
23838        return;
23839      }
23840
23841      const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];
23842      this.slottedBreadcrumbItems.forEach(item => {
23843        const itemIsLastNode = item === lastNode;
23844        this.setItemSeparator(item, itemIsLastNode);
23845        this.setAriaCurrent(item, itemIsLastNode);
23846      });
23847    }
23848  }
23849
23850  setItemSeparator(item, isLastNode) {
23851    if (item instanceof _breadcrumbItem.BreadcrumbItem) {
23852      item.separator = !isLastNode;
23853    }
23854  }
23855  /**
23856   * Finds href on childnodes in the light DOM or shadow DOM.
23857   * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
23858   */
23859
23860
23861  findChildWithHref(node) {
23862    var _a, _b;
23863
23864    if (node.childElementCount > 0) {
23865      return node.querySelector("a[href]");
23866    } else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {
23867      return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("a[href]");
23868    } else return null;
23869  }
23870  /**
23871   *  Sets ARIA Current for the current node
23872   * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
23873   * otherwise apply aria-current to the host element, with an href
23874   */
23875
23876
23877  setAriaCurrent(item, isLastNode) {
23878    const childNodeWithHref = this.findChildWithHref(item);
23879
23880    if (childNodeWithHref === null && item.hasAttribute("href") && item instanceof _breadcrumbItem.BreadcrumbItem) {
23881      isLastNode ? item.setAttribute("aria-current", "page") : item.removeAttribute("aria-current");
23882    } else if (childNodeWithHref !== null) {
23883      isLastNode ? childNodeWithHref.setAttribute("aria-current", "page") : childNodeWithHref.removeAttribute("aria-current");
23884    }
23885  }
23886
23887}
23888
23889exports.Breadcrumb = Breadcrumb;
23890(0, _tslib.__decorate)([_fastElement.observable], Breadcrumb.prototype, "slottedBreadcrumbItems", void 0);
23891
23892},{"../breadcrumb-item/breadcrumb-item.js":191,"../foundation-element/fou

23892ndation-element.js":251,"@microsoft/fast-element":151,"tslib":372}],195:[function(require,module,exports){
23893"use strict";
23894
23895Object.defineProperty(exports, "__esModule", {
23896  value: true
23897});
23898exports.breadcrumbTemplate = void 0;
23899
23900var _fastElement = require("@microsoft/fast-element");
23901
23902/**
23903 * The template for the {@link @microsoft/fast-foundation#Breadcrumb} component.
23904 * @public
23905 */
23906const breadcrumbTemplate = (context, definition) => (0, _fastElement.html)`
23907    <template role="navigation">
23908        <div role="list" class="list" part="list">
23909            <slot
23910                ${(0, _fastElement.slotted)({
23911  property: "slottedBreadcrumbItems",
23912  filter: (0, _fastElement.elements)()
23913})}
23914            ></slot>
23915        </div>
23916    </template>
23917`;
23918
23919exports.breadcrumbTemplate = breadcrumbTemplate;
23920
23921},{"@microsoft/fast-element":151}],196:[function(require,module,exports){
23922"use strict";
23923
23924Object.defineProperty(exports, "__esModule", {
23925  value: true
23926});
23927
23928var _breadcrumbTemplate = require("./breadcrumb.template.js");
23929
23930Object.keys(_breadcrumbTemplate).forEach(function (key) {
23931  if (key === "default" || key === "__esModule") return;
23932  if (key in exports && exports[key] === _breadcrumbTemplate[key]) return;
23933  Object.defineProperty(exports, key, {
23934    enumerable: true,
23935    get: function () {
23936      return _breadcrumbTemplate[key];
23937    }
23938  });
23939});
23940
23941var _breadcrumb = require("./breadcrumb.js");
23942
23943Object.keys(_breadcrumb).forEach(function (key) {
23944  if (key === "default" || key === "__esModule") return;
23945  if (key in exports && exports[key] === _breadcrumb[key]) return;
23946  Object.defineProperty(exports, key, {
23947    enumerable: true,
23948    get: function () {
23949      return _breadcrumb[key];
23950    }
23951  });
23952});
23953
23954},{"./breadcrumb.js":194,"./breadcrumb.template.js":195}],197:[function(require,module,exports){
23955"use strict";
23956
23957Object.defineProperty(exports, "__esModule", {
23958  value: true
23959});
23960exports.FormAssociatedButton = void 0;
23961
23962var _formAssociated = require("../form-associated/form-associated.js");
23963
23964var _foundationElement = require("../foundation-element/foundation-element.js");
23965
23966class _Button extends _foundationElement.FoundationElement {}
23967/**
23968 * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
23969 *
23970 * @internal
23971 */
23972
23973
23974class FormAssociatedButton extends (0, _formAssociated.FormAssociated)(_Button) {
23975  constructor() {
23976    super(...arguments);
23977    this.proxy = document.createElement("input");
23978  }
23979
23980}
23981
23982exports.FormAssociatedButton = FormAssociatedButton;
23983
23984},{"../form-associated/form-associated.js":249,"../foundation-element/foundation-element.js":251}],198:[function(require,module,exports){
23985"use strict";
23986
23987Object.defineProperty(exports, "__esModule", {
23988  value: true
23989});
23990exports.DelegatesARIAButton = exports.Button = void 0;
23991
23992var _tslib = require("tslib");
23993
23994var _fastElement = require("@microsoft/fast-element");
23995
23996var _index = require("../patterns/index.js");
23997
23998var _applyMixins = require("../utilities/apply-mixins.js");
23999
24000var _buttonFormAssociated = require("./button.form-associated.js");
24001
24002/**
24003 * A Button Custom HTML Element.
24004 * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
24005 *
24006 * @slot start - Content which can be provided before the button content
24007 * @slot end - Content which can be provided after the button content
24008 * @slot - The default slot for button content
24009 * @csspart control - The button element
24010 * @csspart content - The element wrapping button content
24011 *
24012 * @public
24013 */
24014class Button extends _buttonFormAssociated.FormAssociatedButton {
24015  constructor() {
24016    super(...arguments);
24017    /**
24018     * Prevent events to propagate if disabled and has no slotted content wrapped in HTML elements
24019     * @internal
24020     */
24021
24022    this.handleClick = e => {
24023      var _a;
24024
24025      if (this.disabled && ((_a = this.defaultSlottedContent) === null || _a === void 0 ? void 0 : _a.length) <= 1) {
24026        e.stopPropagation();
24027      }
24028    };
24029    /**
24030     * Submits the parent form
24031     */
24032
24033
24034    this.handleSubmission = () => {
24035      if (!this.form) {
24036        return;
24037      }
24038
24039      const attached = this.proxy.isConnected;
24040
24041      if (!attached) {
24042        this.attachProxy();
24043      } // Browser support for requestSubmit is not comprehensive
24044      // so click the proxy if it isn't supported
24045
24046
24047      typeof this.form.requestSubmit === "function" ? this.form.requestSubmit(this.proxy) : this.proxy.click();
24048
24049      if (!attached) {
24050        this.detachProxy();
24051      }
24052    };
24053    /**
24054     * Resets the parent form
24055     */
24056
24057
24058    this.handleFormReset = () => {
24059      var _a;
24060
24061      (_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
24062    };
24063    /**
24064     * Overrides the focus call for where delegatesFocus is unsupported.
24065     * This check works for Chrome, Edge Chromium, FireFox, and Safari
24066     * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
24067     */
24068
24069
24070    this.handleUnsupportedDelegatesFocus = () => {
24071      var _a; // Check to see if delegatesFocus is supported
24072
24073
24074      if (window.ShadowRoot && !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
24075        this.focus = () => {
24076          this.control.focus();
24077        };
24078      }
24079    };
24080  }
24081
24082  formactionChanged() {
24083    if (this.proxy instanceof HTMLInputElement) {
24084      this.proxy.formAction = this.formaction;
24085    }
24086  }
24087
24088  formenctypeChanged() {
24089    if (this.proxy instanceof HTMLInputElement) {
24090      this.proxy.formEnctype = this.formenctype;
24091    }
24092  }
24093
24094  formmethodChanged() {
24095    if (this.proxy instanceof HTMLInputElement) {
24096      this.proxy.formMethod = this.formmethod;
24097    }
24098  }
24099
24100  formnovalidateChanged() {
24101    if (this.proxy instanceof HTMLInputElement) {
24102      this.proxy.formNoValidate = this.formnovalidate;
24103    }
24104  }
24105
24106  formtargetChanged() {
24107    if (this.proxy instanceof HTMLInputElement) {
24108      this.proxy.formTarget = this.formtarget;
24109    }
24110  }
24111
24112  typeChanged(previous, next) {
24113    if (this.proxy instanceof HTMLInputElement) {
24114      this.proxy.type = this.type;
24115    }
24116
24117    next === "submit" && this.addEventListener("click", this.handleSubmission);
24118    previous === "submit" && this.removeEventListener("click", this.handleSubmission);
24119    next === "reset" && this.addEventListener("click", this.handleFormReset);
24120    previous === "reset" && this.removeEventListener("click", this.handleFormReset);
24121  }
24122  /** {@inheritDoc (FormAssociated:interface).validate} */
24123
24124
24125  validate() {
24126    super.validate(this.control);
24127  }
24128  /**
24129   * @internal
24130   */
24131
24132
24133  connectedCallback() {
24134    var _a;
24135
24136    super.connectedCallback();
24137    this.proxy.setAttribute("type", this.type);
24138    this.handleUnsupportedDelegatesFocus();

24139    const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
24140
24141    if (elements) {
24142      elements.forEach(span => {
24143        span.addEventListener("click", this.handleClick);
24144      });
24145    }
24146  }
24147  /**
24148   * @internal
24149   */
24150
24151
24152  disconnectedCallback() {
24153    var _a;
24154
24155    super.disconnectedCallback();
24156    const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
24157
24158    if (elements) {
24159      elements.forEach(span => {
24160        span.removeEventListener("click", this.handleClick);
24161      });
24162    }
24163  }
24164
24165}
24166
24167exports.Button = Button;
24168(0, _tslib.__decorate)([(0, _fastElement.attr)({
24169  mode: "boolean"
24170})], Button.prototype, "autofocus", void 0);
24171(0, _tslib.__decorate)([(0, _fastElement.attr)({
24172  attribute: "form"
24173})], Button.prototype, "formId", void 0);
24174(0, _tslib.__decorate)([_fastElement.attr], Button.prototype, "formaction", void 0);
24175(0, _tslib.__decorate)([_fastElement.attr], Button.prototype, "formenctype", void 0);
24176(0, _tslib.__decorate)([_fastElement.attr], Button.prototype, "formmethod", void 0);
24177(0, _tslib.__decorate)([(0, _fastElement.attr)({
24178  mode: "boolean"
24179})], Button.prototype, "formnovalidate", void 0);
24180(0, _tslib.__decorate)([_fastElement.attr], Button.prototype, "formtarget", void 0);
24181(0, _tslib.__decorate)([_fastElement.attr], Button.prototype, "type", void 0);
24182(0, _tslib.__decorate)([_fastElement.observable], Button.prototype, "defaultSlottedContent", void 0);
24183/**
24184 * Includes ARIA states and properties relating to the ARIA button role
24185 *
24186 * @public
24187 */
24188
24189class DelegatesARIAButton {}
24190
24191exports.DelegatesARIAButton = DelegatesARIAButton;
24192(0, _tslib.__decorate)([(0, _fastElement.attr)({
24193  attribute: "aria-expanded"
24194})], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
24195(0, _tslib.__decorate)([(0, _fastElement.attr)({
24196  attribute: "aria-pressed"
24197})], DelegatesARIAButton.prototype, "ariaPressed", void 0);
24198(0, _applyMixins.applyMixins)(DelegatesARIAButton, _index.ARIAGlobalStatesAndProperties);
24199(0, _applyMixins.applyMixins)(Button, _index.StartEnd, DelegatesARIAButton);
24200
24201},{"../patterns/index.js":276,"../utilities/apply-mixins.js":358,"./button.form-associated.js":197,"@microsoft/fast-element":151,"tslib":372}],199:[function(require,module,exports){
24202"use strict";
24203
24204Object.defineProperty(exports, "__esModule", {
24205  value: true
24206});
24207exports.buttonTemplate = void 0;
24208
24209var _fastElement = require("@microsoft/fast-element");
24210
24211var _startEnd = require("../patterns/start-end.js");
24212
24213/**
24214 * The template for the {@link @microsoft/fast-foundation#(Button:class)} component.
24215 * @public
24216 */
24217const buttonTemplate = (context, definition) => (0, _fastElement.html)`
24218    <button
24219        class="control"
24220        part="control"
24221        ?autofocus="${x => x.autofocus}"
24222        ?disabled="${x => x.disabled}"
24223        form="${x => x.formId}"
24224        formaction="${x => x.formaction}"
24225        formenctype="${x => x.formenctype}"
24226        formmethod="${x => x.formmethod}"
24227        formnovalidate="${x => x.formnovalidate}"
24228        formtarget="${x => x.formtarget}"
24229        name="${x => x.name}"
24230        type="${x => x.type}"
24231        value="${x => x.value}"
24232        aria-atomic="${x => x.ariaAtomic}"
24233        aria-busy="${x => x.ariaBusy}"
24234        aria-controls="${x => x.ariaControls}"
24235        aria-current="${x => x.ariaCurrent}"
24236        aria-describedby="${x => x.ariaDescribedby}"
24237        aria-details="${x => x.ariaDetails}"
24238        aria-disabled="${x => x.ariaDisabled}"
24239        aria-errormessage="${x => x.ariaErrormessage}"
24240        aria-expanded="${x => x.ariaExpanded}"
24241        aria-flowto="${x => x.ariaFlowto}"
24242        aria-haspopup="${x => x.ariaHaspopup}"
24243        aria-hidden="${x => x.ariaHidden}"
24244        aria-invalid="${x => x.ariaInvalid}"
24245        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
24246        aria-label="${x => x.ariaLabel}"
24247        aria-labelledby="${x => x.ariaLabelledby}"
24248        aria-live="${x => x.ariaLive}"
24249        aria-owns="${x => x.ariaOwns}"
24250        aria-pressed="${x => x.ariaPressed}"
24251        aria-relevant="${x => x.ariaRelevant}"
24252        aria-roledescription="${x => x.ariaRoledescription}"
24253        ${(0, _fastElement.ref)("control")}
24254    >
24255        ${(0, _startEnd.startSlotTemplate)(context, definition)}

24256        <span class="content" part="content">
24257            <slot ${(0, _fastElement.slotted)("defaultSlottedContent")}></slot>
24258        </span>
24259        ${(0, _startEnd.endSlotTemplate)(context, definition)}
24260    </button>
24261`;
24262
24263exports.buttonTemplate = buttonTemplate;
24264
24265},{"../patterns/start-end.js":277,"@microsoft/fast-element":151}],200:[function(require,module,exports){
24266"use strict";
24267
24268Object.defineProperty(exports, "__esModule", {
24269  value: true
24270});
24271
24272var _buttonTemplate = require("./button.template.js");
24273
24274Object.keys(_buttonTemplate).forEach(function (key) {
24275  if (key === "default" || key === "__esModule") return;
24276  if (key in exports && exports[key] === _buttonTemplate[key]) return;
24277  Object.defineProperty(exports, key, {
24278    enumerable: true,
24279    get: function () {
24280      return _buttonTemplate[key];
24281    }
24282  });
24283});
24284
24285var _button = require("./button.js");
24286
24287Object.keys(_button).forEach(function (key) {
24288  if (key === "default" || key === "__esModule") return;
24289  if (key in exports && exports[key] === _button[key]) return;
24290  Object.defineProperty(exports, key, {
24291    enumerable: true,
24292    get: function () {
24293      return _button[key];
24294    }
24295  });
24296});
24297
24298},{"./button.js":198,"./button.template.js":199}],201:[function(require,module,exports){
24299"use strict";
24300
24301Object.defineProperty(exports, "__esModule", {
24302  value: true
24303});
24304exports.Calendar = void 0;
24305
24306var _tslib = require("tslib");
24307
24308var _fastElement = require("@microsoft/fast-element");
24309
24310var _fastWebUtilities = require("@microsoft/fast-web-utilities");
24311
24312var _foundationElement = require("../foundation-element/foundation-element.js");
24313
24314var _dateFormatter = require("./date-formatter.js");
24315
24316/**
24317 * Calendar component
24318 *
24319 * @slot - The default slot for calendar content
24320 * @fires dateselected - Fires a custom 'dateselected' event when Enter is invoked via keyboard on a date
24321 *
24322 * @public
24323 */
24324class Calendar extends _foundationElement.FoundationElement {
24325  constructor() {
24326    super(...arguments);
24327    /**
24328     * date formatter utitlity for getting localized strings
24329     * @public
24330     */
24331
24332    this.dateFormatter = new _dateFormatter.DateFormatter();
24333    /**
24334     * Readonly attribute for turning off data-grid
24335     * @public
24336     */
24337
24338    this.readonly = false;
24339    /**
24340     * String repesentation of the full locale including market, calendar type and numbering system
24341     * @public
24342     */
24343
24344    this.locale = "en-US";
24345    /**
24346     * Month to display
24347     * @public
24348     */
24349
24350    this.month = new Date().getMonth() + 1;
24351    /**
24352     * Year of the month to display
24353     * @public
24354     */
24355
24356    this.year = new Date().getFullYear();
24357    /**
24358     * Format style for the day
24359     * @public
24360     */
24361
24362    this.dayFormat = "numeric";
24363    /**
24364     * Format style for the week day labels
24365     * @public
24366     */
24367
24368    this.weekdayFormat = "short";
24369    /**
24370     * Format style for the month label
24371     * @public
24372     */
24373
24374    this.monthFormat = "long";
24375    /**
24376     * Format style for the year used in the title
24377     * @public
24378     */
24379
24380    this.yearFormat = "numeric";
24381    /**
24382     * Minimum number of weeks to show for the month
24383     * This can be used to normalize the calendar view
24384     *  when changing or across multiple calendars
24385     * @public
24386     */
24387
24388    this.minWeeks = 0;
24389    /**
24390     * A list of dates that should be shown as disabled
24391     * @public
24392     */
24393
24394    this.disabledDates = "";
24395    /**
24396     * A list of dates that should be shown as highlighted
24397     * @public
24398     */
24399
24400    this.selectedDates = "";
24401    /**
24402     * The number of miliseconds in a day
24403     * @internal
24404     */
24405
24406    this.oneDayInMs = 86400000;
24407  }
24408
24409  localeChanged() {
24410    this.dateFormatter.locale = this.locale;
24411  }
24412
24413  dayFormatChanged() {
24414    this.dateFormatter.dayFormat = this.dayFormat;
24415  }
24416
24417  weekdayFormatChanged() {
24418    this.dateFormatter.weekdayFormat = this.weekdayFormat;
24419  }
24420
24421  monthFormatChanged() {
24422    this.dateFormatter.monthFormat = this.monthFormat;
24423  }
24424
24425  yearFormatChanged() {
24426    this.dateFormatter.yearFormat = this.yearFormat;
24427  }
24428  /**
24429   * Gets data needed to render about a calendar month as well as the previous and next months
24430   * @param year - year of the calendar
24431   * @param month - month of the calendar
24432   * @returns - an object with data about the current and 2 surrounding months
24433   * @public
24434   */
24435
24436
24437  getMonthInfo(month = this.month, year = this.year) {
24438    const getFirstDay = date => new Date(date.getFullYear(), date.getMonth(), 1).getDay();
24439
24440    const getLength = date => {
24441      const nextMonth = new Date(date.getFullYear(), date.getMonth() + 1, 1);
24442      return new Date(nextMonth.getTime() - this.oneDayInMs).getDate();
24443    };
24444
24445    const thisMonth = new Date(year, month - 1);
24446    const nextMonth = new Date(year, month);
24447    const previousMonth = new Date(year, month - 2);
24448    return {
24449      length: getLength(thisMonth),
24450      month,
24451      start: getFirstDay(thisMonth),
24452      year,
24453      previous: {
24454        length: getLength(previousMonth),
24455        month: previousMonth.getMonth() + 1,
24456        start: getFirstDay(previousMonth),
24457        year: previousMonth.getFullYear()
24458      },
24459      next: {
24460        length: getLength(nextMonth),
24461        month: nextMonth.getMonth() + 1,
24462        start: getFirstDay(nextMonth),
24463        year: nextMonth.getFullYear()
24464      }
24465    };
24466  }
24467  /**
24468   * A list of calendar days

24469   * @param info - an object containing the information needed to render a calendar month
24470   * @param minWeeks - minimum number of weeks to show
24471   * @returns a list of days in a calendar month
24472   * @public
24473   */
24474
24475
24476  getDays(info = this.getMonthInfo(), minWeeks = this.minWeeks) {
24477    minWeeks = minWeeks > 10 ? 10 : minWeeks;
24478    const {
24479      start,
24480      length,
24481      previous,
24482      next
24483    } = info;
24484    const days = [];
24485    let dayCount = 1 - start;
24486
24487    while (dayCount < length + 1 || days.length < minWeeks || days[days.length - 1].length % 7 !== 0) {
24488      const {
24489        month,
24490        year
24491      } = dayCount < 1 ? previous : dayCount > length ? next : info;
24492      const day = dayCount < 1 ? previous.length + dayCount : dayCount > length ? dayCount - length : dayCount;
24493      const dateString = `${month}-${day}-${year}`;
24494      const disabled = this.dateInString(dateString, this.disabledDates);
24495      const selected = this.dateInString(dateString, this.selectedDates);
24496      const date = {
24497        day,
24498        month,
24499        year,
24500        disabled,
24501        selected
24502      };
24503      const target = days[days.length - 1];
24504
24505      if (days.length === 0 || target.length % 7 === 0) {
24506        days.push([date]);
24507      } else {
24508        target.push(date);
24509      }
24510
24511      dayCount++;
24512    }
24513
24514    return days;
24515  }
24516  /**
24517   * A helper function that checks if a date exists in a list of dates
24518   * @param date - A date objec that includes the day, month and year
24519   * @param datesString - a comma separated list of dates
24520   * @returns - Returns true if it found the date in the list of dates
24521   * @public
24522   */
24523
24524
24525  dateInString(date, datesString) {
24526    const dates = datesString.split(",").map(str => str.trim());
24527    date = typeof date === "string" ? date : `${date.getMonth() + 1}-${date.getDate()}-${date.getFullYear()}`;
24528    return dates.some(d => d === date);
24529  }
24530  /**
24531   * Creates a class string for the day container
24532   * @param date - date of the calendar cell
24533   * @returns - string of class names
24534   * @public
24535   */
24536
24537
24538  getDayClassNames(date, todayString) {
24539    const {
24540      day,
24541      month,
24542      year,
24543      disabled,
24544      selected
24545    } = date;
24546    const today = todayString === `${month}-${day}-${year}`;
24547    const inactive = this.month !== month;
24548    return ["day", today && "today", inactive && "inactive", disabled && "disabled", selected && "selected"].filter(Boolean).join(" ");
24549  }
24550  /**
24551   * Returns a list of weekday labels
24552   * @returns An array of weekday text and full text if abbreviated
24553   * @public
24554   */
24555
24556
24557  getWeekdayText() {
24558    const weekdayText = this.dateFormatter.getWeekdays().map(text => ({
24559      text
24560    }));
24561
24562    if (this.weekdayFormat !== "long") {
24563      const longText = this.dateFormatter.getWeekdays("long");
24564      weekdayText.forEach((weekday, index) => {
24565        weekday.abbr = longText[index];
24566      });
24567    }
24568
24569    return weekdayText;
24570  }
24571  /**
24572   * Emits the "date-select" event with the day, month and year.
24573   * @param date - Date cell
24574   * @public
24575   */
24576
24577
24578  handleDateSelect(event, day) {
24579    event.preventDefault;
24580    this.$emit("dateselected", day);
24581  }
24582  /**
24583   * Handles keyboard events on a cell
24584   * @param event - Keyboard event
24585   * @param date - Date of the cell selected
24586   */
24587
24588
24589  handleKeydown(event, date) {
24590    if (event.key === _fastWebUtilities.keyEnter) {
24591      this.handleDateSelect(event, date);
24592    }
24593
24594    return true;
24595  }
24596
24597}
24598
24599exports.Calendar = Calendar;
24600(0, _tslib.__decorate)([(0, _fastElement.attr)({
24601  mode: "boolean"
24602})], Calendar.prototype, "readonly", void 0);
24603(0, _tslib.__decorate)([_fastElement.attr], Calendar.prototype, "locale", void 0);
24604(0, _tslib.__decorate)([(0, _fastElement.attr)({
24605  converter: _fastElement.nullableNumberConverter
24606})], Calendar.prototype, "month", void 0);
24607(0, _tslib.__decorate)([(0, _fastElement.attr)({
24608  converter: _fastElement.nullableNumberConverter
24609})], Calendar.prototype, "year", void 0);
24610(0, _tslib.__decorate)([(0, _fastElement.attr)({
24611  attribute: "day-format",
24612  mode: "fromView"
24613})], Calendar.prototype, "dayFormat", void 0);
24614(0, _tslib.__decorate)([(0, _fastElement.attr)({
24615  attribute: "weekday-format",
24616  mode: "fromView"
24617})], Calendar.prototype, "weekdayFormat", void 0);
24618(0, _tslib.__decorate)([(0, _fastElement.attr)({
24619  attribute: "month-format",
24620  mode: "fromView"
24621})], Calendar.prototype, "monthFormat", void 0);
24622(0, _tslib.__decorate)([(0, _fastElement.attr)({
24623  attribute: "year-format",
24624  mode: "fromView"
24625})], Calendar.prototype, "yearFormat", void 0);
24626(0, _tslib.__decorate)([(0, _fastElement.attr)({
24627  attribute: "min-weeks",
24628  converter: _fastElement.nullableNumberConverter
24629})], Calendar.prototype, "minWeeks", void 0);
24630(0, _tslib.__decorate)([(0, _fastElement.attr)({
24631  attribute: "disabled-dates"
24632})], Calendar.prototype, "disabledDates", void 0);
24633(0, _tslib.__decorate)([(0, _fastElement.attr)({
24634  attribute: "selected-dates"
24635})], Calendar.prototype, "selectedDates", void 0);
24636
24637}

24637,{"../foundation-element/foundation-element.js":251,"./date-formatter.js":203,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],202:[function(require,module,exports){
24638"use strict";
24639
24640Object.defineProperty(exports, "__esModule", {
24641  value: true
24642});
24643exports.noninteractiveCalendarTemplate = exports.interactiveCalendarGridTemplate = exports.calendarWeekdayTemplate = exports.calendarTemplate = exports.calendarRowTemplate = exports.calendarCellTemplate = exports.CalendarTitleTemplate = void 0;
24644
24645var _fastElement = require("@microsoft/fast-element");
24646
24647var _startEnd = require("../patterns/start-end.js");
24648
24649var _index = require("../data-grid/index.js");
24650
24651/**
24652 * A basic Calendar title template that includes the month and year
24653 * @returns - A calendar title template
24654 * @public
24655 */
24656const CalendarTitleTemplate = (0, _fastElement.html)`
24657    <div
24658        class="title"
24659        part="title"
24660        aria-label="${x => x.dateFormatter.getDate(`${x.month}-2-${x.year}`, {
24661  month: "long",
24662  year: "numeric"
24663})}"
24664    >
24665        <span part="month">
24666            ${x => x.dateFormatter.getMonth(x.month)}
24667        </span>
24668        <span part="year">${x => x.dateFormatter.getYear(x.year)}</span>
24669    </div>
24670`;
24671/**
24672 * Calendar weekday label template
24673 * @returns - The weekday labels template
24674 * @public
24675 */
24676
24677exports.CalendarTitleTemplate = CalendarTitleTemplate;
24678
24679const calendarWeekdayTemplate = context => {
24680  const cellTag = context.tagFor(_index.DataGridCell);
24681  return (0, _fastElement.html)`
24682        <${cellTag}
24683            class="week-day"
24684            part="week-day"
24685            tabindex="-1"
24686            grid-column="${(x, c) => c.index + 1}"
24687            abbr="${x => x.abbr}"
24688        >
24689            ${x => x.text}
24690        </${cellTag}>
24691    `;
24692};
24693/**
24694 * A calendar day template
24695 * @param context - Element definition context for getting the cell tag for calendar-cell
24696 * @param todayString - A string representation for todays date
24697 * @returns - A calendar cell template for a given date
24698 * @public
24699 */
24700
24701
24702exports.calendarWeekdayTemplate = calendarWeekdayTemplate;
24703
24704const calendarCellTemplate = (context, todayString) => {
24705  const cellTag = context.tagFor(_index.DataGridCell);
24706  return (0, _fastElement.html)`
24707        <${cellTag}
24708            class="${(x, c) => c.parentContext.parent.getDayClassNames(x, todayString)}"
24709            part="day"
24710            tabindex="-1"
24711            role="gridcell"
24712            grid-column="${(x, c) => c.index + 1}"
24713            @click="${(x, c) => c.parentContext.parent.handleDateSelect(c.event, x)}"
24714            @keydown="${(x, c) => c.parentContext.parent.handleKeydown(c.event, x)}"
24715            aria-label="${(x, c) => c.parentContext.parent.dateFormatter.getDate(`${x.month}-${x.day}-${x.year}`, {
24716    month: "long",
24717    day: "numeric"
24718  })}"
24719        >
24720            <div
24721                class="date"
24722                part="${x => todayString === `${x.month}-${x.day}-${x.year}` ? "today" : "date"}"
24723            >
24724                ${(x, c) => c.parentContext.parent.dateFormatter.getDay(x.day)}
24725            </div>
24726            <slot name="${x => x.month}-${x => x.day}-${x => x.year}"></slot>
24727        </${cellTag}>
24728    `;
24729};
24730/**
24731 *
24732 * @param context - Element definition context for getting the cell tag for calendar-cell
24733 * @param todayString - A string representation for todays date
24734 * @returns - A template for a week of days
24735 * @public
24736 */
24737
24738
24739exports.calendarCellTemplate = calendarCellTemplate;
24740
24741const calendarRowTemplate = (context, todayString) => {
24742  const rowTag = context.tagFor(_index.DataGridRow);
24743  return (0, _fastElement.html)`
24744        <${rowTag}
24745            class="week"
24746            part="week"
24747            role="row"
24748            role-type="default"
24749            grid-template-columns="1fr 1fr 1fr 1fr 1fr 1fr 1fr"
24750        >
24751        ${(0, _fastElement.repeat)(x => x, calendarCellTemplate(context, todayString), {
24752    positioning: true
24753  })}
24754        </${rowTag}>
24755    `;
24756};
24757/**
24758 * Interactive template using DataGrid
24759 * @param context - The templates context
24760 * @param todayString - string representation of todays date
24761 * @returns - interactive calendar template
24762 *
24763 * @internal
24764 */
24765
24766
24767exports.calendarRowTemplate = calendarRowTemplate;
24768
24769const interactiveCalendarGridTemplate = (context, todayString) => {
24770  const gridTag = context.tagFor(_index.DataGrid);
24771  const rowTag = context.tagFor(_index.DataGridRow);
24772  return (0, _fastElement.html)`
24773    <${gridTag} class="days interact" part="days" generate-header="none">
24774        <${rowTag}
24775            class="week-days"
24776            part="week-days"
24777            role="row"
24778            row-type="header"
24779            grid-template-columns="1fr 1fr 1fr 1fr 1fr 1fr 1fr"
24780        >
24781            ${(0, _fastElement.repeat)(x =>

24781 x.getWeekdayText(), calendarWeekdayTemplate(context), {
24782    positioning: true
24783  })}
24784        </${rowTag}>
24785        ${(0, _fastElement.repeat)(x => x.getDays(), calendarRowTemplate(context, todayString))}
24786    </${gridTag}>
24787`;
24788};
24789/**
24790 * Non-interactive calendar template used for a readonly calendar
24791 * @param todayString - string representation of todays date
24792 * @returns - non-interactive calendar template
24793 *
24794 * @internal
24795 */
24796
24797
24798exports.interactiveCalendarGridTemplate = interactiveCalendarGridTemplate;
24799
24800const noninteractiveCalendarTemplate = todayString => {
24801  return (0, _fastElement.html)`
24802        <div class="days" part="days">
24803            <div class="week-days" part="week-days">
24804                ${(0, _fastElement.repeat)(x => x.getWeekdayText(), (0, _fastElement.html)`
24805                        <div class="week-day" part="week-day" abbr="${x => x.abbr}">
24806                            ${x => x.text}
24807                        </div>
24808                    `)}
24809            </div>
24810            ${(0, _fastElement.repeat)(x => x.getDays(), (0, _fastElement.html)`
24811                    <div class="week">
24812                        ${(0, _fastElement.repeat)(x => x, (0, _fastElement.html)`
24813                                <div
24814                                    class="${(x, c) => c.parentContext.parent.getDayClassNames(x, todayString)}"
24815                                    part="day"
24816                                    aria-label="${(x, c) => c.parentContext.parent.dateFormatter.getDate(`${x.month}-${x.day}-${x.year}`, {
24817    month: "long",
24818    day: "numeric"
24819  })}"
24820                                >
24821                                    <div
24822                                        class="date"
24823                                        part="${x => todayString === `${x.month}-${x.day}-${x.year}` ? "today" : "date"}"
24824                                    >
24825                                        ${(x, c) => c.parentContext.parent.dateFormatter.getDay(x.day)}
24826                                    </div>
24827                                    <slot
24828                                        name="${x => x.month}-${x => x.day}-${x => x.year}"
24829                                    ></slot>
24830                                </div>
24831                            `)}
24832                    </div>
24833                `)}
24834        </div>
24835    `;
24836};
24837/**
24838 * The template for the {@link @microsoft/fast-foundation#(Calendar:class)} component.
24839 *
24840 * @param context - Element definition context for getting the cell tag for calendar-cell
24841 * @param definition - Foundation element definition
24842 * @returns - a template for a calendar month
24843 * @public
24844 */
24845
24846
24847exports.noninteractiveCalendarTemplate = noninteractiveCalendarTemplate;
24848
24849const calendarTemplate = (context, definition) => {
24850  var _a;
24851
24852  const today = new Date();
24853  const todayString = `${today.getMonth() + 1}-${today.getDate()}-${today.getFullYear()}`;
24854  return (0, _fastElement.html)`
24855        <template>
24856            ${_startEnd.startTemplate}
24857            ${definition.title instanceof Function ? definition.title(context, definition) : (_a = definition.title) !== null && _a !== void 0 ? _a : ""}
24858            <slot></slot>
24859            ${(0, _fastElement.when)(x => x.readonly, noninteractiveCalendarTemplate(todayString), interactiveCalendarGridTemplate(context, todayString))}
24860            ${_startEnd.endTemplate}
24861        </template>
24862    `;
24863};
24864
24865exports.calendarTemplate = calendarTemplate;
24866
24867},{"../data-grid/index.js":224,"../patterns/start-end.js":277,"@microsoft/fast-element":151}],203:[function(require,module,exports){
24868"use strict";
24869
24870Object.defineProperty(exports, "__esModule", {
24871  value: true
24872});
24873exports.DateFormatter = void 0;
24874
24875/**
24876 * Date formatting utility
24877 * @public
24878 */
24879class DateFormatter {
24880  constructor(config) {
24881    /**
24882     * Formatting for the day
24883     * @public
24884     */
24885    this.dayFormat = "numeric";
24886    /**
24887     * Formatting for the weekday labels
24888     * @public
24889     */
24890
24891    this.weekdayFormat = "long";
24892    /**
24893     * Formatting for the month
24894     * @public
24895     */
24896
24897    this.monthFormat = "long";
24898    /**
24899     * Formatting for the year
24900     * @public
24901     */
24902
24903    this.yearFormat = "numeric";
24904    /**
24905     * Date used for formatting
24906     */
24907
24908    this.date = new Date();
24909    /**
24910     * Add properties on construction
24911     */
24912
24913    if (config) {
24914      for (const key in config) {
24915        const value = config[key];
24916
24917        if (key === "date") {
24918          this.date = this.getDateObject(value);
24919        } else {
24920          this[key] = value;
24921        }
24922      }
24923    }
24924  }
24925  /**
24926   * Helper function to make sure that the DateFormatter is working with an instance of Date
24927   * @param date - The date as an object, string or Date insance
24928   * @returns - A Date instance
24929   * @public
24930   */
24931
24932
24933  getDateObject(date) {
24934    if (typeof date === "string") {
24935      const dates = date.split(/[/-]/);
24936
24937      if (dates.length < 3) {
24938        return new Date();
24939      }
24940
24941      return new Date(parseInt(dates[2], 10), parseInt(dates[0], 10) - 1, parseInt(dates[1], 10));
24942    } else if ("day" in date && "month" in date && "year" in date) {
24943      const {
24944        day,
24945        month,
24946        year
24947      } = date;
24948      return new Date(year, month - 1, day);
24949    }
24950
24951    return date;
24952  }
24953  /**
24954   *
24955   * @param date - a valide date as either a Date, string, objec or a DateFormatter
24956   * @param format - The formatting for the string
24957   * @param locale - locale data used for formatting
24958   * @returns A localized string of the date provided
24959   * @public
24960   */
24961
24962
24963  getDate(date = this.date, format = {
24964    weekday: this.weekdayFormat,
24965    month: this.monthFormat,
24966    day: this.dayFormat,
24967    year: this.yearFormat
24968  }, locale = this.locale) {
24969    const dateObj = this.getDateObject(date);
24970
24971    if (!dateObj.getTime()) {
24972      return "";
24973    }
24974

24975    const optionsWithTimeZone = Object.assign({
24976      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
24977    }, format);
24978    return new Intl.DateTimeFormat(locale, optionsWithTimeZone).format(dateObj);
24979  }
24980  /**
24981   *
24982   * @param day - Day to localize
24983   * @param format - The formatting for the day
24984   * @param locale - The locale data used for formatting
24985   * @returns - A localized number for the day
24986   * @public
24987   */
24988
24989
24990  getDay(day = this.date.getDate(), format = this.dayFormat, locale = this.locale) {
24991    return this.getDate({
24992      month: 1,
24993      day,
24994      year: 2020
24995    }, {
24996      day: format
24997    }, locale);
24998  }
24999  /**
25000   *
25001   * @param month - The month to localize
25002   * @param format - The formatting for the month
25003   * @param locale - The locale data used for formatting
25004   * @returns - A localized name of the month
25005   * @public
25006   */
25007
25008
25009  getMonth(month = this.date.getMonth() + 1, format = this.monthFormat, locale = this.locale) {
25010    return this.getDate({
25011      month,
25012      day: 2,
25013      year: 2020
25014    }, {
25015      month: format
25016    }, locale);
25017  }
25018  /**
25019   *
25020   * @param year - The year to localize
25021   * @param format - The formatting for the year
25022   * @param locale - The locale data used for formatting
25023   * @returns - A localized string for the year
25024   * @public
25025   */
25026
25027
25028  getYear(year = this.date.getFullYear(), format = this.yearFormat, locale = this.locale) {
25029    return this.getDate({
25030      month: 2,
25031      day: 2,
25032      year
25033    }, {
25034      year: format
25035    }, locale);
25036  }
25037  /**
25038   *
25039   * @param weekday - The number of the weekday, defaults to Sunday
25040   * @param format - The formatting for the weekday label
25041   * @param locale - The locale data used for formatting
25042   * @returns - A formatted weekday label
25043   * @public
25044   */
25045
25046
25047  getWeekday(weekday = 0, format = this.weekdayFormat, locale = this.locale) {
25048    const date = `1-${weekday + 1}-2017`;
25049    return this.getDate(date, {
25050      weekday: format
25051    }, locale);
25052  }
25053  /**
25054   *
25055   * @param format - The formatting for the weekdays
25056   * @param locale - The locale data used for formatting
25057   * @returns - An array of the weekday labels
25058   * @public
25059   */
25060
25061
25062  getWeekdays(format = this.weekdayFormat, locale = this.locale) {
25063    return Array(7).fill(null).map((_, day) => this.getWeekday(day, format, locale));
25064  }
25065
25066}
25067
25068exports.DateFormatter = DateFormatter;
25069
25070},{}],204:[function(require,module,exports){
25071"use strict";
25072
25073Object.defineProperty(exports, "__esModule", {
25074  value: true
25075});
25076
25077var _calendar = require("./calendar.js");
25078
25079Object.keys(_calendar).forEach(function (key) {
25080  if (key === "default" || key === "__esModule") return;
25081  if (key in exports && exports[key] === _calendar[key]) return;
25082  Object.defineProperty(exports, key, {
25083    enumerable: true,
25084    get: function () {
25085      return _calendar[key];
25086    }
25087  });
25088});
25089
25090var _calendarTemplate = require("./calendar.template.js");
25091
25092Object.keys(_calendarTemplate).forEach(function (key) {
25093  if (key === "default" || key === "__esModule") return;
25094  if (key in exports && exports[key] === _calendarTemplate[key]) return;
25095  Object.defineProperty(exports, key, {
25096    enumerable: true,
25097    get: function () {
25098      return _calendarTemplate[key];
25099    }
25100  });
25101});
25102
25103var _dateFormatter = require("./date-formatter.js");
25104
25105Object.keys(_dateFormatter).forEach(function (key) {
25106  if (key === "default" || key === "__esModule") return;
25107  if (key in exports && exports[key] === _dateFormatter[key]) return;
25108  Object.defineProperty(exports, key, {
25109    enumerable: true,
25110    get: function () {
25111      return _dateFormatter[key];
25112    }
25113  });
25114});
25115
25116},{"./calendar.js":201,"./calendar.template.js":202,"./date-formatter.js":203}],205:[function(require,module,exports){
25117"use strict";
25118
25119Object.defineProperty(exports, "__esModule", {
25120  value: true
25121});
25122exports.Card = void 0;
25123
25124var _foundationElement = require("../foundation-element/foundation-element.js");
25125
25126/**
25127 * An Card Custom HTML Element.
25128 *
25129 * @slot - The default slot for the card content
25130 *
25131 * @public
25132 */
25133class Card extends _foundationElement.FoundationElement {}
25134
25135exports.Card = Card;
25136
25137}

25137,{"../foundation-element/foundation-element.js":251}],206:[function(require,module,exports){
25138"use strict";
25139
25140Object.defineProperty(exports, "__esModule", {
25141  value: true
25142});
25143exports.cardTemplate = void 0;
25144
25145var _fastElement = require("@microsoft/fast-element");
25146
25147/**
25148 * The template for the {@link @microsoft/fast-foundation#Card} component.
25149 * @public
25150 */
25151const cardTemplate = (context, definition) => (0, _fastElement.html)`
25152    <slot></slot>
25153`;
25154
25155exports.cardTemplate = cardTemplate;
25156
25157},{"@microsoft/fast-element":151}],207:[function(require,module,exports){
25158"use strict";
25159
25160Object.defineProperty(exports, "__esModule", {
25161  value: true
25162});
25163
25164var _cardTemplate = require("./card.template.js");
25165
25166Object.keys(_cardTemplate).forEach(function (key) {
25167  if (key === "default" || key === "__esModule") return;
25168  if (key in exports && exports[key] === _cardTemplate[key]) return;
25169  Object.defineProperty(exports, key, {
25170    enumerable: true,
25171    get: function () {
25172      return _cardTemplate[key];
25173    }
25174  });
25175});
25176
25177var _card = require("./card.js");
25178
25179Object.keys(_card).forEach(function (key) {
25180  if (key === "default" || key === "__esModule") return;
25181  if (key in exports && exports[key] === _card[key]) return;
25182  Object.defineProperty(exports, key, {
25183    enumerable: true,
25184    get: function () {
25185      return _card[key];
25186    }
25187  });
25188});
25189
25190},{"./card.js":205,"./card.template.js":206}],208:[function(require,module,exports){
25191"use strict";
25192
25193Object.defineProperty(exports, "__esModule", {
25194  value: true
25195});
25196exports.FormAssociatedCheckbox = void 0;
25197
25198var _formAssociated = require("../form-associated/form-associated.js");
25199
25200var _foundationElement = require("../foundation-element/foundation-element.js");
25201
25202class _Checkbox extends _foundationElement.FoundationElement {}
25203/**
25204 * A form-associated base class for the {@link @microsoft/fast-foundation#(Checkbox:class)} component.
25205 *
25206 * @internal
25207 */
25208
25209
25210class FormAssociatedCheckbox extends (0, _formAssociated.CheckableFormAssociated)(_Checkbox) {
25211  constructor() {
25212    super(...arguments);
25213    this.proxy = document.createElement("input");
25214  }
25215
25216}
25217
25218exports.FormAssociatedCheckbox = FormAssociatedCheckbox;
25219
25220},{"../form-associated/form-associated.js":249,"../foundation-element/foundation-element.js":251}],209:[function(require,module,exports){
25221"use strict";
25222
25223Object.defineProperty(exports, "__esModule", {
25224  value: true
25225});
25226exports.Checkbox = void 0;
25227
25228var _tslib = require("tslib");
25229
25230var _fastElement = require("@microsoft/fast-element");
25231
25232var _fastWebUtilities = require("@microsoft/fast-web-utilities");
25233
25234var _checkboxFormAssociated = require("./checkbox.form-associated.js");
25235
25236/**
25237 * A Checkbox Custom HTML Element.
25238 * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
25239 *
25240 * @slot checked-indicator - The checked indicator
25241 * @slot indeterminate-indicator - The indeterminate indicator
25242 * @slot - The default slot for the label
25243 * @csspart control - The element representing the visual checkbox control
25244 * @csspart label - The label
25245 * @fires change - Emits a custom change event when the checked state changes
25246 *
25247 * @public
25248 */
25249class Checkbox extends _checkboxFormAssociated.FormAssociatedCheckbox {
25250  constructor() {
25251    super();
25252    /**
25253     * The element's value to be included in form submission when checked.
25254     * Default to "on" to reach parity with input[type="checkbox"]
25255     *
25256     * @internal
25257     */
25258
25259    this.initialValue = "on";
25260    /**
25261     * The indeterminate state of the control
25262     */
25263
25264    this.indeterminate = false;
25265    /**
25266     * @internal
25267     */
25268
25269    this.keypressHandler = e => {
25270      if (this.readOnly) {
25271        return;
25272      }
25273
25274      switch (e.key) {
25275        case _fastWebUtilities.keySpace:
25276          if (this.indeterminate) {
25277            this.indeterminate = false;
25278          }
25279
25280          this.checked = !this.checked;
25281          break;
25282      }
25283    };
25284    /**
25285     * @internal
25286     */
25287
25288
25289    this.clickHandler = e => {
25290      if (!this.disabled && !this.readOnly) {
25291        if (this.indeterminate) {
25292          this.indeterminate = false;
25293        }
25294
25295        this.checked = !this.checked;
25296      }
25297    };
25298
25299    this.proxy.setAttribute("type", "checkbox");
25300  }
25301
25302  readOnlyChanged() {
25303    if (this.proxy instanceof HTMLInputElement) {
25304      this.proxy.readOnly = this.readOnly;
25305    }
25306  }
25307
25308}
25309
25310exports.Checkbox = Checkbox;
25311(0, _tslib.__decorate)([(0, _fastElement.attr)({
25312  attribute: "readonly",
25313  mode: "boolean"
25314})], Checkbox.prototype, "readOnly", void 0);
25315(0, _tslib.__decorate)([_fastElement.observable], Checkbox.prototype, "defaultSlottedNodes", void 0);
25316(0, _tslib.__decorate)([_fastElement.observable], Checkbox.prototype, "indeterminate", void 0);
25317
25318},{"./checkbox.form-associated.js":208,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],210:[function(require,module,exports){
25319"use strict";
25320
25321Object.defineProperty(exports, "__esModule", {
25322  value: true
25323});
25324exports.checkboxTemplate = void 0;
25325
25326var _fastElement = require("@microsoft/fast-element");
25327
25328/**
25329 * The template for the {@link @microsoft/fast-foundation#(Checkbox:class)} component.
25330 * @public
25331 */
25332const checkboxTemplate = (context, definition) => (0, _fastElement.html)`
25333    <template
25334        role="checkbox"
25335        aria-checked="${x => x.checked}"
25336        aria-required="${x => x.required}"
25337        aria-disabled="${x => x.disabled}"
25338        aria-readonly="${x => x.readOnly}"
25339        tabindex="${x => x.disabled ? null : 0}"
25340        @keypress="${(x, c) => x.keypressHandler(c.event)}"
25341        @click="${(x, c) => x.clickHandler(c.event)}"
25342        class="${x => x.readOnly ? "readonly" : ""} ${x => x.checked ? "checked" : ""} ${x => x.indeterminate ? "indeterminate" : ""}"
25343    >
25344        <div part="control" class="control">
25345            <slot name="checked-indicator">
25346                ${definition.checkedIndicator || ""}
25347            </slot>
25348            <slot name="indeterminate-indicator">
25349                ${definition.indeterminateIndicator || ""}
25350            </slot>
25351        </div>
25352        <label
25353            part="label"
25354            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"
25355        >
25356            <slot ${(0, _fastElement.slotted)("defaultSlottedNodes")}></slot>
25357        </label>
25358    </template>
25359`;
25360
25361exports.checkboxTemplate = checkboxTemplate;
25362
25363},{"@microsoft/fast-element":151}],211:[function(require,module,exports){
25364"use strict";
25365
25366Object.defineProperty(exports, "__esModule", {
25367  value: true
25368});
25369
25370var _checkboxTemplate = require("./checkbox.template.js");
25371
25372Object.keys(_checkboxTemplate).forEach(function (key) {

25373  if (key === "default" || key === "__esModule") return;
25374  if (key in exports && exports[key] === _checkboxTemplate[key]) return;
25375  Object.defineProperty(exports, key, {
25376    enumerable: true,
25377    get: function () {
25378      return _checkboxTemplate[key];
25379    }
25380  });
25381});
25382
25383var _checkbox = require("./checkbox.js");
25384
25385Object.keys(_checkbox).forEach(function (key) {
25386  if (key === "default" || key === "__esModule") return;
25387  if (key in exports && exports[key] === _checkbox[key]) return;
25388  Object.defineProperty(exports, key, {
25389    enumerable: true,
25390    get: function () {
25391      return _checkbox[key];
25392    }
25393  });
25394});
25395
25396},{"./checkbox.js":209,"./checkbox.template.js":210}],212:[function(require,module,exports){
25397"use strict";
25398
25399Object.defineProperty(exports, "__esModule", {
25400  value: true
25401});
25402exports.FormAssociatedCombobox = void 0;
25403
25404var _formAssociated = require("../form-associated/form-associated.js");
25405
25406var _listbox = require("../listbox/listbox.js");
25407
25408class _Combobox extends _listbox.Listbox {}
25409/**
25410 * A form-associated base class for the {@link (Combobox:class)} component.
25411 *
25412 * @internal
25413 */
25414
25415
25416class FormAssociatedCombobox extends (0, _formAssociated.FormAssociated)(_Combobox) {
25417  constructor() {
25418    super(...arguments);
25419    this.proxy = document.createElement("input");
25420  }
25421
25422}
25423
25424exports.FormAssociatedCombobox = FormAssociatedCombobox;
25425
25426},{"../form-associated/form-associated.js":249,"../listbox/listbox.js":262}],213:[function(require,module,exports){
25427"use strict";
25428
25429Object.defineProperty(exports, "__esModule", {
25430  value: true
25431});
25432exports.DelegatesARIACombobox = exports.Combobox = void 0;
25433
25434var _tslib = require("tslib");
25435
25436var _fastElement = require("@microsoft/fast-element");
25437
25438var _fastWebUtilities = require("@microsoft/fast-web-utilities");
25439
25440var _listbox = require("../listbox/listbox.js");
25441
25442var _startEnd = require("../patterns/start-end.js");
25443
25444var _selectOptions = require("../select/select.options.js");
25445
25446var _applyMixins = require("../utilities/apply-mixins.js");
25447
25448var _comboboxFormAssociated = require("./combobox.form-associated.js");
25449
25450var _comboboxOptions = require("./combobox.options.js");
25451
25452/**
25453 * A Combobox Custom HTML Element.
25454 * Implements the {@link https://w3c.github.io/aria-practices/#combobox | ARIA combobox }.
25455 *
25456 * @slot start - Content which can be provided before the input
25457 * @slot end - Content which can be provided after the input
25458 * @slot control - Used to replace the input element representing the combobox
25459 * @slot indicator - The visual indicator representing the expanded state
25460 * @slot - The default slot for the options
25461 * @csspart control - The wrapper element containing the input area, including start and end
25462 * @csspart selected-value - The input element representing the selected value
25463 * @csspart indicator - The element wrapping the indicator slot
25464 * @csspart listbox - The wrapper for the listbox slotted options
25465 * @fires change - Fires a custom 'change' event when the value updates
25466 *
25467 * @public
25468 */
25469class Combobox extends _comboboxFormAssociated.FormAssociatedCombobox {
25470  constructor() {
25471    super(...arguments);
25472    /**
25473     * The internal value property.
25474     *
25475     * @internal
25476     */
25477
25478    this._value = "";
25479    /**
25480     * The collection of currently filtered options.
25481     *
25482     * @public
25483     */
25484
25485    this.filteredOptions = [];
25486    /**
25487     * The current filter value.
25488     *
25489     * @internal
25490     */
25491
25492    this.filter = "";
25493    /**
25494     * The initial state of the position attribute.
25495     *
25496     * @internal
25497     */
25498
25499    this.forcedPosition = false;
25500    /**
25501     * The unique id for the internal listbox element.
25502     *
25503     * @internal
25504     */
25505
25506    this.listboxId = (0, _fastWebUtilities.uniqueId)("listbox-");
25507    /**
25508     * The max height for the listbox when opened.
25509     *
25510     * @internal
25511     */
25512
25513    this.maxHeight = 0;
25514    /**
25515     * The open attribute.
25516     *
25517     * @public
25518     * @remarks
25519     * HTML Attribute: open
25520     */
25521
25522    this.open = false;
25523  }
25524  /**
25525   * Reset the element to its first selectable option when its parent form is reset.
25526   *
25527   * @internal
25528   */
25529
25530
25531  formResetCallback() {
25532    super.formResetCallback();
25533    this.setDefaultSelectedOption();

vendor: 5,640 bytes, lines 25534-25780

25534    this.updateValue();
25535  }
25536  /** {@inheritDoc (FormAssociated:interface).validate} */
25537
25538
25539  validate() {
25540    super.validate(this.control);
25541  }
25542
25543  get isAutocompleteInline() {
25544    return this.autocomplete === _comboboxOptions.ComboboxAutocomplete.inline || this.isAutocompleteBoth;
25545  }
25546
25547  get isAutocompleteList() {
25548    return this.autocomplete === _comboboxOptions.ComboboxAutocomplete.list || this.isAutocompleteBoth;
25549  }
25550
25551  get isAutocompleteBoth() {
25552    return this.autocomplete === _comboboxOptions.ComboboxAutocomplete.both;
25553  }
25554  /**
25555   * Sets focus and synchronize ARIA attributes when the open property changes.
25556   *
25557   * @param prev - the previous open value
25558   * @param next - the current open value
25559   *
25560   * @internal
25561   */
25562
25563
25564  openChanged() {
25565    if (this.open) {
25566      this.ariaControls = this.listboxId;
25567      this.ariaExpanded = "true";
25568      this.setPositioning();
25569      this.focusAndScrollOptionIntoView(); // focus is directed to the element when `open` is changed programmatically
25570
25571      _fastElement.DOM.queueUpdate(() => this.focus());
25572
25573      return;
25574    }
25575
25576    this.ariaControls = "";
25577    this.ariaExpanded = "false";
25578  }
25579  /**
25580   * The list of options.
25581   *
25582   * @public
25583   * @remarks
25584   * Overrides `Listbox.options`.
25585   */
25586
25587
25588  get options() {
25589    _fastElement.Observable.track(this, "options");
25590
25591    return this.filteredOptions.length ? this.filteredOptions : this._options;
25592  }
25593
25594  set options(value) {
25595    this._options = value;
25596
25597    _fastElement.Observable.notify(this, "options");
25598  }
25599  /**
25600   * Updates the placeholder on the proxy element.
25601   * @internal
25602   */
25603
25604
25605  placeholderChanged() {
25606    if (this.proxy instanceof HTMLInputElement) {
25607      this.proxy.placeholder = this.placeholder;
25608    }
25609  }
25610
25611  positionChanged(prev, next) {
25612    this.positionAttribute = next;
25613    this.setPositioning();
25614  }
25615  /**
25616   * The value property.
25617   *
25618   * @public
25619   */
25620
25621
25622  get value() {
25623    _fastElement.Observable.track(this, "value");
25624
25625    return this._value;
25626  }
25627
25628  set value(next) {
25629    var _a, _b, _c;
25630
25631    const prev = `${this._value}`;
25632
25633    if (this.$fastController.isConnected && this.options) {
25634      const selectedIndex = this.options.findIndex(el => el.text.toLowerCase() === next.toLowerCase());
25635      const prevSelectedValue = (_a = this.options[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.text;
25636      const nextSelectedValue = (_b = this.options[selectedIndex]) === null || _b === void 0 ? void 0 : _b.text;
25637      this.selectedIndex = prevSelectedValue !== nextSelectedValue ? selectedIndex : this.selectedIndex;
25638      next = ((_c = this.firstSelectedOption) === null || _c === void 0 ? void 0 : _c.text) || next;
25639    }
25640
25641    if (prev !== next) {
25642      this._value = next;
25643      super.valueChanged(prev, next);
25644
25645      _fastElement.Observable.notify(this, "value");
25646    }
25647  }
25648  /**
25649   * Handle opening and closing the listbox when the combobox is clicked.
25650   *
25651   * @param e - the mouse event
25652   * @internal
25653   */
25654
25655
25656  clickHandler(e) {
25657    if (this.disabled) {
25658      return;
25659    }
25660
25661    if (this.open) {
25662      const captured = e.target.closest(`option,[role=option]`);
25663
25664      if (!captured || captured.disabled) {
25665        return;
25666      }
25667
25668      this.selectedOptions = [captured];
25669      this.control.value = captured.text;
25670      this.clearSelectionRange();
25671      this.updateValue(true);
25672    }
25673
25674    this.open = !this.open;
25675
25676    if (this.open) {
25677      this.control.focus();
25678    }
25679
25680    return true;
25681  }
25682
25683  connectedCallback() {
25684    super.connectedCallback();
25685    this.forcedPosition = !!this.positionAttribute;
25686
25687    if (this.value) {
25688      this.initialValue = this.value;
25689    }
25690  }
25691  /**
25692   * Synchronize the `aria-disabled` property when the `disabled` property changes.
25693   *
25694   * @param prev - The previous disabled value
25695   * @param next - The next disabled value
25696   *
25697   * @internal
25698   */
25699
25700
25701  disabledChanged(prev, next) {
25702    if (super.disabledChanged) {
25703      super.disabledChanged(prev, next);
25704    }
25705
25706    this.ariaDisabled = this.disabled ? "true" : "false";
25707  }
25708  /**
25709   * Filter available options by text value.
25710   *
25711   * @public
25712   */
25713
25714
25715  filterOptions() {
25716    if (!this.autocomplete || this.autocomplete === _comboboxOptions.ComboboxAutocomplete.none) {
25717      this.filter = "";
25718    }
25719
25720    const filter = this.filter.toLowerCase();
25721    this.filteredOptions = this._options.filter(o => o.text.toLowerCase().startsWith(this.filter.toLowerCase()));
25722
25723    if (this.isAutocompleteList) {
25724      if (!this.filteredOptions.length && !filter) {
25725        this.filteredOptions = this._options;
25726      }
25727
25728      this._options.forEach(o => {
25729        o.hidden = !this.filteredOptions.includes(o);
25730      });
25731    }
25732  }
25733  /**
25734   * Focus the control and scroll the first selected option into view.
25735   *
25736   * @internal
25737   * @remarks
25738   * Overrides: `Listbox.focusAndScrollOptionIntoView`
25739   */
25740
25741
25742  focusAndScrollOptionIntoView() {
25743    if (this.contains(document.activeElement)) {
25744      this.control.focus();
25745
25746      if (this.firstSelectedOption) {
25747        requestAnimationFrame(() => {
25748          var _a;
25749
25750          (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
25751            block: "nearest"
25752          });
25753        });
25754      }
25755    }
25756  }
25757  /**
25758   * Handle focus state when the element or its children lose focus.
25759   *
25760   * @param e - The focus event
25761   * @internal
25762   */
25763
25764
25765  focusoutHandler(e) {
25766    this.syncValue();
25767
25768    if (!this.open) {
25769      return true;
25770    }
25771
25772    const focusTarget = e.relatedTarget;
25773
25774    if (this.isSameNode(focusTarget)) {
25775      this.focus();
25776      return;
25777    }
25778
25779    if (!this.options || !this.options.includes(focusTarget)) {
25780      this.open = false;

vendor: 5,283 bytes, lines 25781-26025

25781    }
25782  }
25783  /**
25784   * Handle content changes on the control input.
25785   *
25786   * @param e - the input event
25787   * @internal
25788   */
25789
25790
25791  inputHandler(e) {
25792    this.filter = this.control.value;
25793    this.filterOptions();
25794
25795    if (!this.isAutocompleteInline) {
25796      this.selectedIndex = this.options.map(option => option.text).indexOf(this.control.value);
25797    }
25798
25799    if (e.inputType.includes("deleteContent") || !this.filter.length) {
25800      return true;
25801    }
25802
25803    if (this.isAutocompleteList && !this.open) {
25804      this.open = true;
25805    }
25806
25807    if (this.isAutocompleteInline) {
25808      if (this.filteredOptions.length) {
25809        this.selectedOptions = [this.filteredOptions[0]];
25810        this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
25811        this.setInlineSelection();
25812      } else {
25813        this.selectedIndex = -1;
25814      }
25815    }
25816
25817    return;
25818  }
25819  /**
25820   * Handle keydown actions for listbox navigation.
25821   *
25822   * @param e - the keyboard event
25823   * @internal
25824   */
25825
25826
25827  keydownHandler(e) {
25828    const key = e.key;
25829
25830    if (e.ctrlKey || e.shiftKey) {
25831      return true;
25832    }
25833
25834    switch (key) {
25835      case "Enter":
25836        {
25837          this.syncValue();
25838
25839          if (this.isAutocompleteInline) {
25840            this.filter = this.value;
25841          }
25842
25843          this.open = false;
25844          this.clearSelectionRange();
25845          break;
25846        }
25847
25848      case "Escape":
25849        {
25850          if (!this.isAutocompleteInline) {
25851            this.selectedIndex = -1;
25852          }
25853
25854          if (this.open) {
25855            this.open = false;
25856            break;
25857          }
25858
25859          this.value = "";
25860          this.control.value = "";
25861          this.filter = "";
25862          this.filterOptions();
25863          break;
25864        }
25865
25866      case "Tab":
25867        {
25868          this.setInputToSelection();
25869
25870          if (!this.open) {
25871            return true;
25872          }
25873
25874          e.preventDefault();
25875          this.open = false;
25876          break;
25877        }
25878
25879      case "ArrowUp":
25880      case "ArrowDown":
25881        {
25882          this.filterOptions();
25883
25884          if (!this.open) {
25885            this.open = true;
25886            break;
25887          }
25888
25889          if (this.filteredOptions.length > 0) {
25890            super.keydownHandler(e);
25891          }
25892
25893          if (this.isAutocompleteInline) {
25894            this.setInlineSelection();
25895          }
25896
25897          break;
25898        }
25899
25900      default:
25901        {
25902          return true;
25903        }
25904    }
25905  }
25906  /**
25907   * Handle keyup actions for value input and text field manipulations.
25908   *
25909   * @param e - the keyboard event
25910   * @internal
25911   */
25912
25913
25914  keyupHandler(e) {
25915    const key = e.key;
25916
25917    switch (key) {
25918      case "ArrowLeft":
25919      case "ArrowRight":
25920      case "Backspace":
25921      case "Delete":
25922      case "Home":
25923      case "End":
25924        {
25925          this.filter = this.control.value;
25926          this.selectedIndex = -1;
25927          this.filterOptions();
25928          break;
25929        }
25930    }
25931  }
25932  /**
25933   * Ensure that the selectedIndex is within the current allowable filtered range.
25934   *
25935   * @param prev - the previous selected index value
25936   * @param next - the current selected index value
25937   *
25938   * @internal
25939   */
25940
25941
25942  selectedIndexChanged(prev, next) {
25943    if (this.$fastController.isConnected) {
25944      next = (0, _fastWebUtilities.limit)(-1, this.options.length - 1, next); // we only want to call the super method when the selectedIndex is in range
25945
25946      if (next !== this.selectedIndex) {
25947        this.selectedIndex = next;
25948        return;
25949      }
25950
25951      super.selectedIndexChanged(prev, next);
25952    }
25953  }
25954  /**
25955   * Move focus to the previous selectable option.
25956   *
25957   * @internal
25958   * @remarks
25959   * Overrides `Listbox.selectPreviousOption`
25960   */
25961
25962
25963  selectPreviousOption() {
25964    if (!this.disabled && this.selectedIndex >= 0) {
25965      this.selectedIndex = this.selectedIndex - 1;
25966    }
25967  }
25968  /**
25969   * Set the default selected options at initialization or reset.
25970   *
25971   * @internal
25972   * @remarks
25973   * Overrides `Listbox.setDefaultSelectedOption`
25974   */
25975
25976
25977  setDefaultSelectedOption() {
25978    if (this.$fastController.isConnected && this.options) {
25979      const selectedIndex = this.options.findIndex(el => el.getAttribute("selected") !== null || el.selected);
25980      this.selectedIndex = selectedIndex;
25981
25982      if (!this.dirtyValue && this.firstSelectedOption) {
25983        this.value = this.firstSelectedOption.text;
25984      }
25985
25986      this.setSelectedOptions();
25987    }
25988  }
25989  /**
25990   * Focus and set the content of the control based on the first selected option.
25991   *
25992   * @internal
25993   */
25994
25995
25996  setInputToSelection() {
25997    if (this.firstSelectedOption) {
25998      this.control.value = this.firstSelectedOption.text;
25999      this.control.focus();
26000    }
26001  }
26002  /**
26003   * Focus, set and select the content of the control based on the first selected option.
26004   *
26005   * @internal
26006   */
26007
26008
26009  setInlineSelection() {
26010    if (this.firstSelectedOption) {
26011      this.setInputToSelection();
26012      this.control.setSelectionRange(this.filter.length, this.control.value.length, "backward");
26013    }
26014  }
26015  /**
26016   * Determines if a value update should involve emitting a change event, then updates the value.
26017   *
26018   * @internal
26019   */
26020
26021
26022  syncValue() {
26023    var _a;
26024
26025    const newValue = this.selectedIndex > -1 ? (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text : this.control.value;

26026    this.updateValue(this.value !== newValue);
26027  }
26028  /**
26029   * Calculate and apply listbox positioning based on available viewport space.
26030   *
26031   * @param force - direction to force the listbox to display
26032   * @public
26033   */
26034
26035
26036  setPositioning() {
26037    const currentBox = this.getBoundingClientRect();
26038    const viewportHeight = window.innerHeight;
26039    const availableBottom = viewportHeight - currentBox.bottom;
26040    this.position = this.forcedPosition ? this.positionAttribute : currentBox.top > availableBottom ? _selectOptions.SelectPosition.above : _selectOptions.SelectPosition.below;
26041    this.positionAttribute = this.forcedPosition ? this.positionAttribute : this.position;
26042    this.maxHeight = this.position === _selectOptions.SelectPosition.above ? ~~currentBox.top : ~~availableBottom;
26043  }
26044  /**
26045   * Ensure that the entire list of options is used when setting the selected property.
26046   *
26047   * @param prev - the previous list of selected options
26048   * @param next - the current list of selected options
26049   *
26050   * @internal
26051   * @remarks
26052   * Overrides: `Listbox.selectedOptionsChanged`
26053   */
26054
26055
26056  selectedOptionsChanged(prev, next) {
26057    if (this.$fastController.isConnected) {
26058      this._options.forEach(o => {
26059        o.selected = next.includes(o);
26060      });
26061    }
26062  }
26063  /**
26064   * Synchronize the form-associated proxy and update the value property of the element.
26065   *
26066   * @param prev - the previous collection of slotted option elements
26067   * @param next - the next collection of slotted option elements
26068   *
26069   * @internal
26070   */
26071
26072
26073  slottedOptionsChanged(prev, next) {
26074    super.slottedOptionsChanged(prev, next);
26075    this.updateValue();
26076  }
26077  /**
26078   * Sets the value and to match the first selected option.
26079   *
26080   * @param shouldEmit - if true, the change event will be emitted
26081   *
26082   * @internal
26083   */
26084
26085
26086  updateValue(shouldEmit) {
26087    var _a;
26088
26089    if (this.$fastController.isConnected) {
26090      this.value = ((_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) || this.control.value;
26091      this.control.value = this.value;
26092    }
26093
26094    if (shouldEmit) {
26095      this.$emit("change");
26096    }
26097  }
26098  /**
26099   * @internal
26100   */
26101
26102
26103  clearSelectionRange() {
26104    const controlValueLength = this.control.value.length;
26105    this.control.setSelectionRange(controlValueLength, controlValueLength);
26106  }
26107
26108}
26109
26110exports.Combobox = Combobox;
26111(0, _tslib.__decorate)([(0, _fastElement.attr)({
26112  attribute: "autocomplete",
26113  mode: "fromView"
26114})], Combobox.prototype, "autocomplete", void 0);
26115(0, _tslib.__decorate)([_fastElement.observable], Combobox.prototype, "maxHeight", void 0);
26116(0, _tslib.__decorate)([(0, _fastElement.attr)({
26117  attribute: "open",
26118  mode: "boolean"
26119})], Combobox.prototype, "open", void 0);
26120(0, _tslib.__decorate)([_fastElement.attr], Combobox.prototype, "placeholder", void 0);
26121(0, _tslib.__decorate)([(0, _fastElement.attr)({
26122  attribute: "position"
26123})], Combobox.prototype, "positionAttribute", void 0);
26124(0, _tslib.__decorate)([_fastElement.observable], Combobox.prototype, "position", void 0);
26125/**
26126 * Includes ARIA states and properties relating to the ARIA combobox role.
26127 *
26128 * @public
26129 */
26130
26131class DelegatesARIACombobox {}
26132
26133exports.DelegatesARIACombobox = DelegatesARIACombobox;
26134(0, _tslib.__decorate)([_fastElement.observable], DelegatesARIACombobox.prototype, "ariaAutoComplete", void 0);
26135(0, _tslib.__decorate)([_fastElement.observable], DelegatesARIACombobox.prototype, "ariaControls", void 0);
26136(0, _applyMixins.applyMixins)(DelegatesARIACombobox, _listbox.DelegatesARIAListbox);
26137(0, _applyMixins.applyMixins)(Combobox, _startEnd.StartEnd, DelegatesARIACombobox);
26138
26139},{"../listbox/listbox.js":262,"../patterns/start-end.js":277,"../select/select.options.js":309,"../utilities/apply-mixins.js":358,"./combobox.form-associated.js":212,"./combobox.options.js":214,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],214:[function(require,module,exports){
26140"use strict";
26141
26142Object.defineProperty(exports, "__esModule", {
26143  value: true
26144});
26145exports.ComboboxAutocomplete = void 0;
26146
26147/**
26148 * Autocomplete values for combobox.
26149 * @public
26150 */
26151const ComboboxAutocomplete = {
26152  inline: "inline",
26153  list: "list",
26154  both: "both",
26155  none: "none"
26156};
26157exports.ComboboxAutocomplete = ComboboxAutocomplete;
26158
26159},{}],215:[function(require,module,exports){
26160"use strict";
26161
26162Object.defineProperty(exports, "__esModule", {
26163  value: true
26164});
26165exports.comboboxTemplate = void 0;
26166
26167var _fastElement = require("@microsoft/fast-element");
26168
26169var _listbox = require("../listbox/listbox.js");
26170
26171var _startEnd = require("../patterns/start-end.js");
26172
26173/**
26174 * The template for the {@link @microsoft/fast-foundation#(Combobox:class)} component.
26175 * @public
26176 */
26177const comboboxTemplate = (context, definition) => (0, _fastElement.html)`
26178    <template
26179        aria-disabled="${x => x.ariaDisabled}"
26180        autocomplete="${x => x.autocomplete}"
26181        class="${x => x.open ? "open" : ""} ${x => x.disabled ? "disabled" : ""} ${x => x.position}"
26182        ?open="${x => x.open}"
26183        tabindex="${x => !x.disabled ? "0" : null}"
26184        @click="${(x, c) => x.clickHandler(c.event)}"
26185        @focusout="${(x, c) => x.focusoutHandler(c.event)}"
26186        @keydown="${(x, c) => x.keydownHandler(c.event)}"
26187    >
26188        <div class="control" part="control">
26189            ${(0, _startEnd.startSlotTemplate)(context, definition)}
26190            <slot name="control">
26191                <input
26192                    aria-activedescendant="${x => x.open ? x.ariaActiveDescendant : null}"
26193                    aria-autocomplete="${x => x.ariaAutoComplete}"
26194                    aria-controls="${x =>

26194 x.ariaControls}"
26195                    aria-disabled="${x => x.ariaDisabled}"
26196                    aria-expanded="${x => x.ariaExpanded}"
26197                    aria-haspopup="listbox"
26198                    class="selected-value"
26199                    part="selected-value"
26200                    placeholder="${x => x.placeholder}"
26201                    role="combobox"
26202                    type="text"
26203                    ?disabled="${x => x.disabled}"
26204                    :value="${x => x.value}"
26205                    @input="${(x, c) => x.inputHandler(c.event)}"
26206                    @keyup="${(x, c) => x.keyupHandler(c.event)}"
26207                    ${(0, _fastElement.ref)("control")}
26208                />
26209                <div class="indicator" part="indicator" aria-hidden="true">
26210                    <slot name="indicator">
26211                        ${definition.indicator || ""}
26212                    </slot>
26213                </div>
26214            </slot>
26215            ${(0, _startEnd.endSlotTemplate)(context, definition)}
26216        </div>
26217        <div
26218            class="listbox"
26219            id="${x => x.listboxId}"
26220            part="listbox"

26221            role="listbox"
26222            ?disabled="${x => x.disabled}"
26223            ?hidden="${x => !x.open}"
26224            ${(0, _fastElement.ref)("listbox")}
26225        >
26226            <slot
26227                ${(0, _fastElement.slotted)({
26228  filter: _listbox.Listbox.slottedOptionFilter,
26229  flatten: true,
26230  property: "slottedOptions"
26231})}
26232            ></slot>
26233        </div>
26234    </template>
26235`;
26236
26237exports.comboboxTemplate = comboboxTemplate;
26238
26239},{"../listbox/listbox.js":262,"../patterns/start-end.js":277,"@microsoft/fast-element":151}],216:[function(require,module,exports){
26240"use strict";
26241
26242Object.defineProperty(exports, "__esModule", {
26243  value: true
26244});
26245
26246var _combobox = require("./combobox.js");
26247
26248Object.keys(_combobox).forEach(function (key) {
26249  if (key === "default" || key === "__esModule") return;
26250  if (key in exports && exports[key] === _combobox[key]) return;
26251  Object.defineProperty(exports, key, {
26252    enumerable: true,
26253    get: function () {
26254      return _combobox[key];
26255    }
26256  });
26257});
26258
26259var _comboboxOptions = require("./combobox.options.js");
26260
26261Object.keys(_comboboxOptions).forEach(function (key) {
26262  if (key === "default" || key === "__esModule") return;
26263  if (key in exports && exports[key] === _comboboxOptions[key]) return;
26264  Object.defineProperty(exports, key, {
26265    enumerable: true,
26266    get: function () {
26267      return _comboboxOptions[key];
26268    }
26269  });
26270});
26271
26272var _comboboxTemplate = require("./combobox.template.js");
26273
26274Object.keys(_comboboxTemplate).forEach(function (key) {
26275  if (key === "default" || key === "__esModule") return;
26276  if (key in exports && exports[key] === _comboboxTemplate[key]) return;
26277  Object.defineProperty(exports, key, {
26278    enumerable: true,
26279    get: function () {
26280      return _comboboxTemplate[key];
26281    }
26282  });
26283});
26284
26285},{"./combobox.js":213,"./combobox.options.js":214,"./combobox.template.js":215}],217:[function(require,module,exports){
26286"use strict";
26287
26288Object.defineProperty(exports, "__esModule", {
26289  value: true
26290});
26291exports.DataGridCell = void 0;
26292Object.defineProperty(exports, "DataGridCellTypes", {
26293  enumerable: true,
26294  get: function () {
26295    return _dataGridOptions.DataGridCellTypes;
26296  }
26297});
26298
26299var _tslib = require("tslib");
26300
26301var _fastElement = require("@microsoft/fast-element");
26302
26303var _fastWebUtilities = require("@microsoft/fast-web-utilities");
26304
26305var _foundationElement = require("../foundation-element/foundation-element.js");
26306
26307var _dataGridOptions = require("./data-grid.options.js");
26308
26309const defaultCellContentsTemplate = (0, _fastElement.html)`
26310    <template>
26311        ${x => x.rowData === null || x.columnDefinition === null || x.columnDefinition.columnDataKey === null ? null : x.rowData[x.columnDefinition.columnDataKey]}
26312    </template>
26313`;
26314const defaultHeaderCellContentsTemplate = (0, _fastElement.html)`
26315    <template>
26316        ${x => x.columnDefinition === null ? null : x.columnDefinition.title === undefined ? x.columnDefinition.columnDataKey : x.columnDefinition.title}
26317    </template>
26318`;
26319/**
26320 * A Data Grid Cell Custom HTML Element.
26321 *
26322 * @fires cell-focused - Fires a custom 'cell-focused' event when focu

26322s is on the cell or its contents
26323 * @slot - The default slot for cell contents.  The "cell contents template" renders here.
26324 * @public
26325 */
26326
26327class DataGridCell extends _foundationElement.FoundationElement {
26328  constructor() {
26329    super(...arguments);
26330    /**
26331     * The type of cell
26332     *
26333     * @public
26334     * @remarks
26335     * HTML Attribute: cell-type
26336     */
26337
26338    this.cellType = _dataGridOptions.DataGridCellTypes.default;
26339    /**
26340     * The base data for the parent row
26341     *
26342     * @public
26343     */
26344
26345    this.rowData = null;
26346    /**
26347     * The base data for the column
26348     *
26349     * @public
26350     */
26351
26352    this.columnDefinition = null;
26353    this.isActiveCell = false;
26354    this.customCellView = null;
26355
26356    this.updateCellStyle = () => {
26357      this.style.gridColumn = this.gridColumn;
26358    };
26359  }
26360
26361  cellTypeChanged() {
26362    if (this.$fastController.isConnected) {
26363      this.updateCellView();
26364    }
26365  }
26366
26367  gridColumnChanged() {
26368    if (this.$fastController.isConnected) {
26369      this.updateCellStyle();
26370    }
26371  }
26372
26373  columnDefinitionChanged(oldValue, newValue) {
26374    if (this.$fastController.isConnected) {
26375      this.updateCellView();
26376    }
26377  }
26378  /**
26379   * @internal
26380   */
26381
26382
26383  connectedCallback() {
26384    var _a;
26385
26386    super.connectedCallback();
26387    this.addEventListener(_fastWebUtilities.eventFocusIn, this.handleFocusin);
26388    this.addEventListener(_fastWebUtilities.eventFocusOut, this.handleFocusout);
26389    this.addEventListener(_fastWebUtilities.eventKeyDown, this.handleKeydown);
26390    this.style.gridColumn = `${((_a = this.columnDefinition) === null || _a === void 0 ? void 0 : _a.gridColumn) === undefined ? 0 : this.columnDefinition.gridColumn}`;
26391    this.updateCellView();
26392    this.updateCellStyle();
26393  }
26394  /**
26395   * @internal
26396   */
26397
26398
26399  disconnectedCallback() {
26400    super.disconnectedCallback();
26401    this.removeEventListener(_fastWebUtilities.eventFocusIn, this.handleFocusin);
26402    this.removeEventListener(_fastWebUtilities.eventFocusOut, this.handleFocusout);
26403    this.removeEventListener(_fastWebUtilities.eventKeyDown, this.handleKeydown);
26404    this.disconnectCellView();
26405  }
26406
26407  handleFocusin(e) {
26408    if (this.isActiveCell) {
26409      return;
26410    }
26411
26412    this.isActiveCell = true;
26413
26414    switch (this.cellType) {
26415      case _dataGridOptions.DataGridCellTypes.columnHeader:
26416        if (this.columnDefinition !== null && this.columnDefinition.headerCellInternalFocusQueue !== true && typeof this.columnDefinition.headerCellFocusTargetCallback === "function") {
26417          // move focus to the focus target
26418          const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
26419
26420          if (focusTarget !== null) {
26421            focusTarget.focus();
26422          }
26423        }
26424
26425        break;
26426
26427      default:
26428        if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== true && typeof this.columnDefinition.cellFocusTargetCallback === "function") {
26429          // move focus to the focus target
26430          const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
26431
26432          if (focusTarget !== null) {
26433            focusTarget.focus();
26434          }
26435        }
26436
26437        break;
26438    }
26439
26440    this.$emit("cell-focused", this);
26441  }
26442
26443  handleFocusout(e) {
26444    if (this !== document.activeElement && !this.contains(document.activeElement)) {
26445      this.isActiveCell = false;
26446    }
26447  }
26448
26449  handleKeydown(e) {
26450    if (e.defaultPrevented || this.columnDefinition === null || this.cellType === _dataGridOptions.DataGridCellTypes.default && this.columnDefinition.cellInternalFocusQueue !== true || this.cellType === _dataGridOptions.DataGridCellTypes.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== true) {
26451      return;
26452    }
26453
26454    switch (e.key) {
26455      case _fastWebUtilities.keyEnter:
26456      case _fastWebUtilities.keyFunction2:
26457        if (this.contains(document.activeElement) && document.activeElement !== this) {
26458          return;
26459        }
26460
26461        switch (this.cellType) {
26462          case _dataGridOptions.DataGridCellTypes.columnHeader:
26463            if (this.columnDefinition.headerCellFocusTargetCallback !== undefined) {
26464              const focusTarget = this.columnDefinition.headerCellFocusTargetCallback(this);
26465
26466              if (focusTarget !== null) {

26467                focusTarget.focus();
26468              }
26469
26470              e.preventDefault();
26471            }
26472
26473            break;
26474
26475          default:
26476            if (this.columnDefinition.cellFocusTargetCallback !== undefined) {
26477              const focusTarget = this.columnDefinition.cellFocusTargetCallback(this);
26478
26479              if (focusTarget !== null) {
26480                focusTarget.focus();
26481              }
26482
26483              e.preventDefault();
26484            }
26485
26486            break;
26487        }
26488
26489        break;
26490
26491      case _fastWebUtilities.keyEscape:
26492        if (this.contains(document.activeElement) && document.activeElement !== this) {
26493          this.focus();
26494          e.preventDefault();
26495        }
26496
26497        break;
26498    }
26499  }
26500
26501  updateCellView() {
26502    this.disconnectCellView();
26503
26504    if (this.columnDefinition === null) {
26505      return;
26506    }
26507
26508    switch (this.cellType) {
26509      case _dataGridOptions.DataGridCellTypes.columnHeader:
26510        if (this.columnDefinition.headerCellTemplate !== undefined) {
26511          this.customCellView = this.columnDefinition.headerCellTemplate.render(this, this);
26512        } else {
26513          this.customCellView = defaultHeaderCellContentsTemplate.render(this, this);
26514        }
26515
26516        break;
26517
26518      case undefined:
26519      case _dataGridOptions.DataGridCellTypes.rowHeader:
26520      case _dataGridOptions.DataGridCellTypes.default:
26521        if (this.columnDefinition.cellTemplate !== undefined) {
26522          this.customCellView = this.columnDefinition.cellTemplate.render(this, this);
26523        } else {
26524          this.customCellView = defaultCellContentsTemplate.render(this, this);
26525        }
26526
26527        break;
26528    }
26529  }
26530
26531  disconnectCellView() {
26532    if (this.customCellView !== null) {
26533      this.customCellView.dispose();
26534      this.customCellView = null;
26535    }
26536  }
26537
26538}
26539
26540exports.DataGridCell = DataGridCell;
26541(0, _tslib.__decorate)([(0, _fastElement.attr)({
26542  attribute: "cell-type"
26543})], DataGridCell.prototype, "cellType", void 0);
26544(0, _tslib.__decorate)([(0, _fastElement.attr)({
26545  attribute: "grid-column"
26546})], DataGridCell.prototype, "gridColumn", void 0);
26547(0, _tslib.__decorate)([_fastElement.observable], DataGridCell.prototype, "rowData", void 0);
26548(0, _tslib.__decorate)([_fastElement.observable], DataGridCell.prototype, "columnDefinition", void 0);
26549
26550},{"../foundation-element/foundation-element.js":251,"./data-grid.options.js":222,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],218:[function(require,module,exports){
26551"use strict";
26552
26553Object.defineProperty(exports, "__esModule", {
26554  value: true
26555});
26556exports.dataGridCellTemplate = void 0;
26557
26558var _fastElement = require("@microsoft/fast-element");
26559
26560/**
26561 * Generates a template for the {@link @microsoft/fast-foundation#DataGridCell} component using
26562 * the provided prefix.
26563 * @public
26564 */
26565const dataGridCellTemplate = (context, definition) => {
26566  return (0, _fastElement.html)`
26567        <template
26568            tabindex="-1"
26569            role="${x => !x.cellType || x.cellType === "default" ? "gridcell" : x.cellType}"
26570            class="
26571            ${x => x.cellType === "columnheader" ? "column-header" : x.cellType === "rowheader" ? "row-header" : ""}
26572            "
26573        >
26574            <slot></slot>
26575        </template>
26576    `;
26577};
26578
26579exports.dataGridCellTemplate = dataGridCellTemplate;
26580
26581},{"@microsoft/fast-element":151}],219:[function(require,module,exports){
26582"use strict";
26583
26584Object.defineProperty(exports, "__esModule", {
26585  value: true
26586});
26587exports.DataGridRow = void 0;
26588
26589var _tslib = require("tslib");
26590
26591var _fastElement = require("@microsoft/fast-element");
26592
26593var _fastWebUtilities = require("@microsoft/fast-web-utilities");
26594
26595var _foundationElement = require("../foundation-element/foundation-element.js");
26596
26597var _dataGridOptions = require("./data-grid.options.js");
26598
26599/**
26600 * A Data Grid Row Custom HTML Element.
26601 *
26602 * @fires row-focused - Fires a custom 'row-focused' event when focu

26602s is on an element (usually a cell or its contents) in the row
26603 * @slot - The default slot for custom cell elements
26604 * @public
26605 */
26606class DataGridRow extends _foundationElement.FoundationElement {
26607  constructor() {
26608    super(...arguments);
26609    /**
26610     * The type of row
26611     *
26612     * @public
26613     * @remarks
26614     * HTML Attribute: row-type
26615     */
26616
26617    this.rowType = _dataGridOptions.DataGridRowTypes.default;
26618    /**
26619     * The base data for this row
26620     *
26621     * @public
26622     */
26623
26624    this.rowData = null;
26625    /**
26626     * The column definitions of the row
26627     *
26628     * @public
26629     */
26630
26631    this.columnDefinitions = null;
26632    /**
26633     * Whether focus is on/in a cell within this row.
26634     *
26635     * @internal
26636     */
26637
26638    this.isActiveRow = false;
26639    this.cellsRepeatBehavior = null;
26640    this.cellsPlaceholder = null;
26641    /**
26642     * @internal
26643     */
26644
26645    this.focusColumnIndex = 0;
26646    this.refocusOnLoad = false;
26647
26648    this.updateRowStyle = () => {
26649      this.style.gridTemplateColumns = this.gridTemplateColumns;
26650    };
26651  }
26652
26653  gridTemplateColumnsChanged() {
26654    if (this.$fastController.isConnected) {
26655      this.updateRowStyle();
26656    }
26657  }
26658
26659  rowTypeChanged() {
26660    if (this.$fastController.isConnected) {
26661      this.updateItemTemplate();
26662    }
26663  }
26664
26665  rowDataChanged() {
26666    if (this.rowData !== null && this.isActiveRow) {
26667      this.refocusOnLoad = true;
26668      return;
26669    }
26670  }
26671
26672  cellItemTemplateChanged() {
26673    this.updateItemTemplate();
26674  }
26675
26676  headerCellItemTemplateChanged() {
26677    this.updateItemTemplate();
26678  }
26679  /**
26680   * @internal
26681   */
26682
26683
26684  connectedCallback() {
26685    super.connectedCallback(); // note that row elements can be reused with a different data object
26686    // as the parent grid's repeat behavior reacts to changes in the data set.
26687
26688    if (this.cellsRepeatBehavior === null) {
26689      this.cellsPlaceholder = document.createComment("");
26690      this.appendChild(this.cellsPlaceholder);
26691      this.updateItemTemplate();
26692      this.cellsRepeatBehavior = new _fastElement.RepeatDirective(x => x.columnDefinitions, x => x.activeCellItemTemplate, {
26693        positioning: true
26694      }).createBehavior(this.cellsPlaceholder);
26695      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
26696
26697      this.$fastController.addBehaviors([this.cellsRepeatBehavior]);
26698    }
26699
26700    this.addEventListener("cell-focused", this.handleCellFocus);
26701    this.addEventListener(_fastWebUtilities.eventFocusOut, this.handleFocusout);
26702    this.addEventListener(_fastWebUtilities.eventKeyDown, this.handleKeydown);
26703    this.updateRowStyle();
26704
26705    if (this.refocusOnLoad) {
26706      // if focus was on the row when data changed try to refocus on same cell
26707      this.refocusOnLoad = false;
26708
26709      if (this.cellElements.length > this.focusColumnIndex) {
26710        this.cellElements[this.focusColumnIndex].focus();
26711      }
26712    }
26713  }
26714  /**
26715   * @internal
26716   */
26717
26718
26719  disconnectedCallback() {
26720    super.disconnectedCallback();
26721    this.removeEventListener("cell-focused", this.handleCellFocus);
26722    this.removeEventListener(_fastWebUtilities.eventFocusOut, this.handleFocusout);
26723    this.removeEventListener(_fastWebUtilities.eventKeyDown, this.handleKeydown);
26724  }
26725
26726  handleFocusout(e) {
26727    if (!this.contains(e.target)) {
26728      this.isActiveRow = false;
26729      this.focusColumnIndex = 0;
26730    }
26731  }
26732
26733  handleCellFocus(e) {
26734    this.isActiveRow = true;
26735    this.focusColumnIndex = this.cellElements.indexOf(e.target);
26736    this.$emit("row-focused", this);
26737  }
26738
26739  handleKeydown(e) {
26740    if (e.defaultPrevented) {
26741      return;
26742    }
26743
26744    let newFocusColumnIndex = 0;
26745
26746    switch (e.key) {
26747      case _fastWebUtilities.keyArrowLeft:
26748        // focus left one cell
26749        newFocusColumnIndex = Math.max(0, this.focusColumnIndex - 1);
26750        this.cellElements[newFocusColumnIndex].focus();
26751        e.preventDefault();
26752        break;
26753
26754      case _fastWebUtilities.keyArrowRight:
26755        // focus right one cell
26756        newFocusColumnIndex = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
26757        this.cellElements[newFocusColumnIndex].focus();
26758        e.preventDefault();
26759        break;
26760

26761      case _fastWebUtilities.keyHome:
26762        if (!e.ctrlKey) {
26763          this.cellElements[0].focus();
26764          e.preventDefault();
26765        }
26766
26767        break;
26768
26769      case _fastWebUtilities.keyEnd:
26770        if (!e.ctrlKey) {
26771          // focus last cell of the row
26772          this.cellElements[this.cellElements.length - 1].focus();
26773          e.preventDefault();
26774        }
26775
26776        break;
26777    }
26778  }
26779
26780  updateItemTemplate() {
26781    this.activeCellItemTemplate = this.rowType === _dataGridOptions.DataGridRowTypes.default && this.cellItemTemplate !== undefined ? this.cellItemTemplate : this.rowType === _dataGridOptions.DataGridRowTypes.default && this.cellItemTemplate === undefined ? this.defaultCellItemTemplate : this.headerCellItemTemplate !== undefined ? this.headerCellItemTemplate : this.defaultHeaderCellItemTemplate;
26782  }
26783
26784}
26785
26786exports.DataGridRow = DataGridRow;
26787(0, _tslib.__decorate)([(0, _fastElement.attr)({
26788  attribute: "grid-template-columns"
26789})], DataGridRow.prototype, "gridTemplateColumns", void 0);
26790(0, _tslib.__decorate)([(0, _fastElement.attr)({
26791  attribute: "row-type"
26792})], DataGridRow.prototype, "rowType", void 0);
26793(0, _tslib.__decorate)([_fastElement.observable], DataGridRow.prototype, "rowData", void 0);
26794(0, _tslib.__decorate)([_fastElement.observable], DataGridRow.prototype, "columnDefinitions", void 0);
26795(0, _tslib.__decorate)([_fastElement.observable], DataGridRow.prototype, "cellItemTemplate", void 0);
26796(0, _tslib.__decorate)([_fastElement.observable], DataGridRow.prototype, "headerCellItemTemplate", void 0);
26797(0, _tslib.__decorate)([_fastElement.observable], DataGridRow.prototype, "rowIndex", void 0);
26798(0, _tslib.__decorate)([_fastElement.observable], DataGridRow.prototype, "isActiveRow", void 0);
26799(0, _tslib.__decorate)([_fastElement.observable], DataGridRow.prototype, "activeCellItemTemplate", void 0);
26800(0, _tslib.__decorate)([_fastElement.observable], DataGridRow.prototype, "defaultCellItemTemplate", void 0);
26801(0, _tslib.__decorate)([_fastElement.observable], DataGridRow.prototype, "defaultHeaderCellItemTemplate", void 0);
26802(0, _tslib.__decorate)([_fastElement.observable], DataGridRow.prototype, "cellElements", void 0);
26803
26804},{"../foundation-element/foundation-element.js":251,"./data-grid.options.js":222,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],220:[function(require,module,exports){
26805"use strict";
26806
26807Object.defineProperty(exports, "__esModule", {
26808  value: true
26809});
26810exports.dataGridRowTemplate = void 0;
26811
26812var _fastElement = require("@microsoft/fast-element");
26813
26814var _dataGridCell = require("./data-grid-cell.js");
26815
26816function createCellItemTemplate(context) {
26817  const cellTag = context.tagFor(_dataGridCell.DataGridCell);
26818  return (0, _fastElement.html)`
26819    <${cellTag}
26820        cell-type="${x => x.isRowHeader ? "rowheader" : undefined}"
26821        grid-column="${(x, c) => c.index + 1}"
26822        :rowData="${(x, c) => c.parent.rowData}"
26823        :columnDefinition="${x => x}"
26824    ></${cellTag}>
26825`;
26826}
26827
26828function createHeaderCellItemTemplate(context) {
26829  const cellTag = context.tagFor(_dataGridCell.DataGridCell);
26830  return (0, _fastElement.html)`
26831    <${cellTag}
26832        cell-type="columnheader"
26833        grid-column="${(x, c) => c.index + 1}"
26834        :columnDefinition="${x => x}"
26835    ></${cellTag}>
26836`;
26837}
26838/**
26839 * Generates a template for the {@link @microsoft/fast-foundation#DataGridRow} component using
26840 * the provided prefix.
26841 *
26842 * @public
26843 */
26844
26845
26846const dataGridRowTemplate = (context, definition) => {
26847  const cellItemTemplate = createCellItemTemplate(context);
26848  const headerCellItemTemplate = createHeaderCellItemTemplate(context);
26849  return (0, _fastElement.html)`
26850        <template
26851            role="row"
26852            class="${x => x.rowType !== "default" ? x.rowType : ""}"
26853            :defaultCellItemTemplate="${cellItemTemplate}"
26854            :defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
26855            ${(0, _fastElement.children)({
26856    property: "cellElements",
26857    filter: (0, _fastElement.elements)('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
26858  })}
26859        >
26860            <slot ${(0, _fastElement.slotted)("slottedCellElements")}></slot>
26861        </template>
26862    `;
26863};
26864
26865exports.dataGridRowTemplate = dataGridRowTemplate;
26866
26867},{"./data-grid-cell.js":217,"@microsoft/fast-element":151}],221:[function(require,module,exports){
26868"use strict";
26869
26870Object.defineProperty(exports, "__esModule", {
26871  value: true
26872});
26873exports.DataGrid = void 0;
26874Object.defineProperty(exports, "DataGridRowTypes", {
26875  enumerable: true,
26876  get: function () {
26877    return _dataGridOptions.DataGridRowTypes;
26878  }
26879});
26880Object.defineProperty(exports, "GenerateHeaderOptions", {
26881  enumerable: true,
26882  get: function () {
26883    return _dataGridOptions.GenerateHeaderOptions;
26884  }
26885});
26886
26887var _tslib = require("tslib");
26888
26889var _fastElement = require("@microsoft/fast-element");
26890
26891var _fastWebUtilities = require("@microsoft/fast-web-utilities");
26892

26893var _foundationElement = require("../foundation-element/foundation-element.js");
26894
26895var _dataGridOptions = require("./data-grid.options.js");
26896
26897/**
26898 * A Data Grid Custom HTML Element.
26899 *
26900 * @slot - The default slot for custom row elements
26901 * @public
26902 */
26903class DataGrid extends _foundationElement.FoundationElement {
26904  constructor() {
26905    super();
26906    /**
26907     * When true the component will not add itself to the tab queue.
26908     * Default is false.
26909     *
26910     * @public
26911     * @remarks
26912     * HTML Attribute: no-tabbing
26913     */
26914
26915    this.noTabbing = false;
26916    /**
26917     *  Whether the grid should automatically generate a header row and its type
26918     *
26919     * @public
26920     * @remarks
26921     * HTML Attribute: generate-header
26922     */
26923
26924    this.generateHeader = _dataGridOptions.GenerateHeaderOptions.default;
26925    /**
26926     * The data being displayed in the grid
26927     *
26928     * @public
26929     */
26930
26931    this.rowsData = [];
26932    /**
26933     * The column definitions of the grid
26934     *
26935     * @public
26936     */
26937
26938    this.columnDefinitions = null;
26939    /**
26940     * The index of the row that will receive focus the next time the
26941     * grid is focused. This value changes as focus moves to different
26942     * rows within the grid.  Changing this value when focus is already
26943     * within the grid moves focus to the specified row.
26944     *
26945     * @public
26946     */
26947
26948    this.focusRowIndex = 0;
26949    /**
26950     * The index of the column that will receive focus the next time the
26951     * grid is focused. This value changes as focus moves to different rows
26952     * within the grid.  Changing this value when focus is already within
26953     * the grid moves focus to the specified column.
26954     *
26955     * @public
26956     */
26957
26958    this.focusColumnIndex = 0;
26959    this.rowsPlaceholder = null;
26960    this.generatedHeader = null;
26961    this.isUpdatingFocus = false;
26962    this.pendingFocusUpdate = false;
26963    this.rowindexUpdateQueued = false;
26964    this.columnDefinitionsStale = true;
26965    this.generatedGridTemplateColumns = "";
26966
26967    this.focusOnCell = (rowIndex, columnIndex, scrollIntoView) => {
26968      if (this.rowElements.length === 0) {
26969        this.focusRowIndex = 0;
26970        this.focusColumnIndex = 0;
26971        return;
26972      }
26973
26974      const focusRowIndex = Math.max(0, Math.min(this.rowElements.length - 1, rowIndex));
26975      const focusRow = this.rowElements[focusRowIndex];
26976      const cells = focusRow.querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"]');
26977      const focusColumnIndex = Math.max(0, Math.min(cells.length - 1, columnIndex));
26978      const focusTarget = cells[focusColumnIndex];
26979
26980      if (scrollIntoView && this.scrollHeight !== this.clientHeight && (focusRowIndex < this.focusRowIndex && this.scrollTop > 0 || focusRowIndex > this.focusRowIndex && this.scrollTop < this.scrollHeight - this.clientHeight)) {
26981        focusTarget.scrollIntoView({
26982          block: "center",
26983          inline: "center"
26984        });
26985      }
26986
26987      focusTarget.focus();
26988    };
26989
26990    this.onChildListChange = (mutations,
26991    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
26992    observer) => {
26993      if (mutations && mutations.length) {
26994        mutations.forEach(mutation => {
26995          mutation.addedNodes.forEach(newNode => {
26996            if (newNode.nodeType === 1 && newNode.getAttribute("role") === "row") {
26997              newNode.columnDefinitions = this.columnDefinitions;
26998            }
26999          });
27000        });
27001        this.queueRowIndexUpdate();
27002      }
27003    };
27004
27005    this.queueRowIndexUpdate = () => {
27006      if (!this.rowindexUpdateQueued) {
27007        this.rowindexUpdateQueued = true;
27008
27009        _fastElement.DOM.queueUpdate(this.updateRowIndexes);
27010      }
27011    };
27012
27013    this.updateRowIndexes = () => {
27014      let newGridTemplateColumns = this.gridTemplateColumns;
27015
27016      if (newGridTemplateColumns === undefined) {
27017        // try to generate columns based on manual rows
27018        if (this.generatedGridTemplateColumns === "" && this.rowElements.length > 0) {
27019          const firstRow = this.rowElements[0];
27020          this.generatedGridTemplateColumns = new Array(firstRow.cellElements.length).fill("1fr").join(" ");
27021        }
27022
27023        newGridTemplateColumns = this.generatedGridTemplateColumns;
27024      }
27025

vendor: 4,461 bytes, lines 27026-27181

27026      this.rowElements.forEach((element, index) => {
27027        const thisRow = element;
27028        thisRow.rowIndex = index;
27029        thisRow.gridTemplateColumns = newGridTemplateColumns;
27030
27031        if (this.columnDefinitionsStale) {
27032          thisRow.columnDefinitions = this.columnDefinitions;
27033        }
27034      });
27035      this.rowindexUpdateQueued = false;
27036      this.columnDefinitionsStale = false;
27037    };
27038  }
27039  /**
27040   *  generates a gridTemplateColumns based on columndata array
27041   */
27042
27043
27044  static generateTemplateColumns(columnDefinitions) {
27045    let templateColumns = "";
27046    columnDefinitions.forEach(column => {
27047      templateColumns = `${templateColumns}${templateColumns === "" ? "" : " "}${"1fr"}`;
27048    });
27049    return templateColumns;
27050  }
27051
27052  noTabbingChanged() {
27053    if (this.$fastController.isConnected) {
27054      if (this.noTabbing) {
27055        this.setAttribute("tabIndex", "-1");
27056      } else {
27057        this.setAttribute("tabIndex", this.contains(document.activeElement) || this === document.activeElement ? "-1" : "0");
27058      }
27059    }
27060  }
27061
27062  generateHeaderChanged() {
27063    if (this.$fastController.isConnected) {
27064      this.toggleGeneratedHeader();
27065    }
27066  }
27067
27068  gridTemplateColumnsChanged() {
27069    if (this.$fastController.isConnected) {
27070      this.updateRowIndexes();
27071    }
27072  }
27073
27074  rowsDataChanged() {
27075    if (this.columnDefinitions === null && this.rowsData.length > 0) {
27076      this.columnDefinitions = DataGrid.generateColumns(this.rowsData[0]);
27077    }
27078
27079    if (this.$fastController.isConnected) {
27080      this.toggleGeneratedHeader();
27081    }
27082  }
27083
27084  columnDefinitionsChanged() {
27085    if (this.columnDefinitions === null) {
27086      this.generatedGridTemplateColumns = "";
27087      return;
27088    }
27089
27090    this.generatedGridTemplateColumns = DataGrid.generateTemplateColumns(this.columnDefinitions);
27091
27092    if (this.$fastController.isConnected) {
27093      this.columnDefinitionsStale = true;
27094      this.queueRowIndexUpdate();
27095    }
27096  }
27097
27098  headerCellItemTemplateChanged() {
27099    if (this.$fastController.isConnected) {
27100      if (this.generatedHeader !== null) {
27101        this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate;
27102      }
27103    }
27104  }
27105
27106  focusRowIndexChanged() {
27107    if (this.$fastController.isConnected) {
27108      this.queueFocusUpdate();
27109    }
27110  }
27111
27112  focusColumnIndexChanged() {
27113    if (this.$fastController.isConnected) {
27114      this.queueFocusUpdate();
27115    }
27116  }
27117  /**
27118   * @internal
27119   */
27120
27121
27122  connectedCallback() {
27123    super.connectedCallback();
27124
27125    if (this.rowItemTemplate === undefined) {
27126      this.rowItemTemplate = this.defaultRowItemTemplate;
27127    }
27128
27129    this.rowsPlaceholder = document.createComment("");
27130    this.appendChild(this.rowsPlaceholder);
27131    this.toggleGeneratedHeader();
27132    this.rowsRepeatBehavior = new _fastElement.RepeatDirective(x => x.rowsData, x => x.rowItemTemplate, {
27133      positioning: true
27134    }).createBehavior(this.rowsPlaceholder);
27135    /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
27136
27137    this.$fastController.addBehaviors([this.rowsRepeatBehavior]);
27138    this.addEventListener("row-focused", this.handleRowFocus);
27139    this.addEventListener(_fastWebUtilities.eventFocus, this.handleFocus);
27140    this.addEventListener(_fastWebUtilities.eventKeyDown, this.handleKeydown);
27141    this.addEventListener(_fastWebUtilities.eventFocusOut, this.handleFocusOut);
27142    this.observer = new MutationObserver(this.onChildListChange); // only observe if nodes are added or removed
27143
27144    this.observer.observe(this, {
27145      childList: true
27146    });
27147
27148    if (this.noTabbing) {
27149      this.setAttribute("tabindex", "-1");
27150    }
27151
27152    _fastElement.DOM.queueUpdate(this.queueRowIndexUpdate);
27153  }
27154  /**
27155   * @internal
27156   */
27157
27158
27159  disconnectedCallback() {
27160    super.disconnectedCallback();
27161    this.removeEventListener("row-focused", this.handleRowFocus);
27162    this.removeEventListener(_fastWebUtilities.eventFocus, this.handleFocus);
27163    this.removeEventListener(_fastWebUtilities.eventKeyDown, this.handleKeydown);
27164    this.removeEventListener(_fastWebUtilities.eventFocusOut, this.handleFocusOut); // disconnect observer
27165
27166    this.observer.disconnect();
27167    this.rowsPlaceholder = null;
27168    this.generatedHeader = null;
27169  }
27170  /**
27171   * @internal
27172   */
27173
27174
27175  handleRowFocus(e) {
27176    this.isUpdatingFocus = true;
27177    const focusRow = e.target;
27178    this.focusRowIndex = this.rowElements.indexOf(focusRow);
27179    this.focusColumnIndex = focusRow.focusColumnIndex;
27180    this.setAttribute("tabIndex", "-1");
27181    this.isUpdatingFocus = false;

27182  }
27183  /**
27184   * @internal
27185   */
27186
27187
27188  handleFocus(e) {
27189    this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
27190  }
27191  /**
27192   * @internal
27193   */
27194
27195
27196  handleFocusOut(e) {
27197    if (e.relatedTarget === null || !this.contains(e.relatedTarget)) {
27198      this.setAttribute("tabIndex", this.noTabbing ? "-1" : "0");
27199    }
27200  }
27201  /**
27202   * @internal
27203   */
27204
27205
27206  handleKeydown(e) {
27207    if (e.defaultPrevented) {
27208      return;
27209    }
27210
27211    let newFocusRowIndex;
27212    const maxIndex = this.rowElements.length - 1;
27213    const currentGridBottom = this.offsetHeight + this.scrollTop;
27214    const lastRow = this.rowElements[maxIndex];
27215
27216    switch (e.key) {
27217      case _fastWebUtilities.keyArrowUp:
27218        e.preventDefault(); // focus up one row
27219
27220        this.focusOnCell(this.focusRowIndex - 1, this.focusColumnIndex, true);
27221        break;
27222
27223      case _fastWebUtilities.keyArrowDown:
27224        e.preventDefault(); // focus down one row
27225
27226        this.focusOnCell(this.focusRowIndex + 1, this.focusColumnIndex, true);
27227        break;
27228
27229      case _fastWebUtilities.keyPageUp:
27230        e.preventDefault();
27231
27232        if (this.rowElements.length === 0) {
27233          this.focusOnCell(0, 0, false);
27234          break;
27235        }
27236
27237        if (this.focusRowIndex === 0) {
27238          this.focusOnCell(0, this.focusColumnIndex, false);
27239          return;
27240        }
27241
27242        newFocusRowIndex = this.focusRowIndex - 1;
27243
27244        for (newFocusRowIndex; newFocusRowIndex >= 0; newFocusRowIndex--) {
27245          const thisRow = this.rowElements[newFocusRowIndex];
27246
27247          if (thisRow.offsetTop < this.scrollTop) {
27248            this.scrollTop = thisRow.offsetTop + thisRow.clientHeight - this.clientHeight;
27249            break;
27250          }
27251        }
27252
27253        this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
27254        break;
27255
27256      case _fastWebUtilities.keyPageDown:
27257        e.preventDefault();
27258
27259        if (this.rowElements.length === 0) {
27260          this.focusOnCell(0, 0, false);
27261          break;
27262        } // focus down one "page"
27263
27264
27265        if (this.focusRowIndex >= maxIndex || lastRow.offsetTop + lastRow.offsetHeight <= currentGridBottom) {
27266          this.focusOnCell(maxIndex, this.focusColumnIndex, false);
27267          return;
27268        }
27269
27270        newFocusRowIndex = this.focusRowIndex + 1;
27271
27272        for (newFocusRowIndex; newFocusRowIndex <= maxIndex; newFocusRowIndex++) {
27273          const thisRow = this.rowElements[newFocusRowIndex];
27274
27275          if (thisRow.offsetTop + thisRow.offsetHeight > currentGridBottom) {
27276            let stickyHeaderOffset = 0;
27277
27278            if (this.generateHeader === _dataGridOptions.GenerateHeaderOptions.sticky && this.generatedHeader !== null) {
27279              stickyHeaderOffset = this.generatedHeader.clientHeight;
27280            }
27281
27282            this.scrollTop = thisRow.offsetTop - stickyHeaderOffset;
27283            break;
27284          }
27285        }
27286
27287        this.focusOnCell(newFocusRowIndex, this.focusColumnIndex, false);
27288        break;
27289
27290      case _fastWebUtilities.keyHome:
27291        if (e.ctrlKey) {
27292          e.preventDefault(); // focus first cell of first row
27293
27294          this.focusOnCell(0, 0, true);
27295        }
27296
27297        break;
27298
27299      case _fastWebUtilities.keyEnd:
27300        if (e.ctrlKey && this.columnDefinitions !== null) {
27301          e.preventDefault(); // focus last cell of last row
27302
27303          this.focusOnCell(this.rowElements.length - 1, this.columnDefinitions.length - 1, true);
27304        }
27305
27306        break;
27307    }
27308  }
27309
27310  queueFocusUpdate() {
27311    if (this.isUpdatingFocus && (this.contains(document.activeElement) || this === document.activeElement)) {
27312      return;
27313    }
27314
27315    if (this.pendingFocusUpdate === false) {
27316      this.pendingFocusUpdate = true;
27317
27318      _fastElement.DOM.queueUpdate(() => this.updateFocus());
27319    }
27320  }
27321
27322  updateFocus() {
27323    this.pendingFocusUpdate = false;
27324    this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, true);
27325  }
27326
27327  toggleGeneratedHeader() {
27328    if (this.generatedHeader !== null) {
27329      this.removeChild(this.generatedHeader);
27330      this.generatedHeader = null;
27331    }
27332
27333    if (this.generateHeader !== _dataGridOptions.GenerateHeaderOptions.none && this.rowsData.length > 0) {
27334      const generatedHeaderElement = document.createElement(this.rowElementTag);
27335      this.generatedHeader = generatedHeaderElement;
27336      this.generatedHeader.columnDefinitions = this.columnDefinitions;
27337      this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
27338      this.generatedHeader.rowType = this.generateHeader === _dataGridOptions.GenerateHeaderOptions.sticky ? _dataGridOptions.DataGridRowTypes.stickyHeader : _dataGridOptions.DataGridRowTypes.header;
27339
27340      if (this.firstChild !== null || this.rowsPlaceholder !== null) {
27341        this.insertBefore(generatedHeaderElement, this.firstChild !== null ? this.firstChild : this.rowsPlaceholder);
27342      }
27343
27344      return;
27345    }
27346  }
27347
27348}
27349/**
27350 *  generates a basic column definition by examining sample row data
27351 */
27352
27353
27354exports.DataGrid = DataGrid;
27355
27356DataGrid.generateColumns = row => {
27357  return Object.getOwnPropertyNames(row).map((property, index) => {
27358    return {
27359      columnDataKey: property,
27360      gridColumn: `${index}`
27361    };
27362  });
27363};
27364
27365(0, _tslib.__decorate)([(0, _fastElement.attr)({
27366  attribute: "no-tabbing",
27367  mode: "boolean"
27368})], DataGrid.prototype, "noTabbing", void 0);
27369(0, _tslib.__decorate)([(0, _fastElement.attr)({
27370  attribute: "generate-header"
27371})], DataGrid.prototype, "generateHeader", void 0);
27372(0, _tslib.__decorate)([(0, _fastElement.attr)({
27373  attribute: "grid-template-columns"
27374})], DataGrid.prototype, "gridTemplateColumns", void 0);
27375(0, _tslib.__decorate)([_fastElement.observable], DataGrid.prototype, "rowsData", void 0);
27376(0, _tslib.__decorate)([_fastElement.observable], DataGrid.prototype, "columnDefinitions", void 0);
27377(0, _tslib.__decorate)([_fastElement.observable], DataGrid.prototype, "rowItemTemplate", void 0);
27378(0, _tslib.__decorate)([_fastElement.observable], DataGrid.prototype, "cellItemTemplate", void 0);
27379(0, _tslib.__decorate)([_fastElement.observable], DataGrid.prototype, "headerCellItemTemplate", void 0);
27380(0, _tslib.__decorate)([_fastElement.observable], DataGrid.prototype, "focu

27380sRowIndex", void 0);
27381(0, _tslib.__decorate)([_fastElement.observable], DataGrid.prototype, "focusColumnIndex", void 0);
27382(0, _tslib.__decorate)([_fastElement.observable], DataGrid.prototype, "defaultRowItemTemplate", void 0);
27383(0, _tslib.__decorate)([_fastElement.observable], DataGrid.prototype, "rowElementTag", void 0);
27384(0, _tslib.__decorate)([_fastElement.observable], DataGrid.prototype, "rowElements", void 0);
27385
27386},{"../foundation-element/foundation-element.js":251,"./data-grid.options.js":222,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],222:[function(require,module,exports){
27387"use strict";
27388
27389Object.defineProperty(exports, "__esModule", {
27390  value: true
27391});
27392exports.GenerateHeaderOptions = exports.DataGridRowTypes = exports.DataGridCellTypes = void 0;
27393
27394/**
27395 * Enumerates the data grid auto generated header options
27396 * default option generates a non-sticky header row
27397 *
27398 * @public
27399 */
27400const GenerateHeaderOptions = {
27401  none: "none",
27402  default: "default",
27403  sticky: "sticky"
27404};
27405/**
27406 * Enumerates possible data grid cell types.
27407 *
27408 * @public
27409 */
27410
27411exports.GenerateHeaderOptions = GenerateHeaderOptions;
27412const DataGridCellTypes = {
27413  default: "default",
27414  columnHeader: "columnheader",
27415  rowHeader: "rowheader"
27416};
27417/**
27418 * Enumerates possible data grid row types
27419 *
27420 * @public
27421 */
27422
27423exports.DataGridCellTypes = DataGridCellTypes;
27424const DataGridRowTypes = {
27425  default: "default",
27426  header: "header",
27427  stickyHeader: "sticky-header"
27428};
27429exports.DataGridRowTypes = DataGridRowTypes;
27430
27431},{}],223:[function(require,module,exports){
27432"use strict";
27433
27434Object.defineProperty(exports, "__esModule", {
27435  value: true
27436});
27437exports.dataGridTemplate = void 0;
27438
27439var _fastElement = require("@microsoft/fast-element");
27440
27441var _dataGridRow = require("./data-grid-row.js");
27442
27443function createRowItemTemplate(context) {
27444  const rowTag = context.tagFor(_dataGridRow.DataGridRow);
27445  return (0, _fastElement.html)`
27446    <${rowTag}
27447        :rowData="${x => x}"
27448        :cellItemTemplate="${(x, c) => c.parent.cellItemTemplate}"
27449        :headerCellItemTemplate="${(x, c) => c.parent.headerCellItemTemplate}"
27450    ></${rowTag}>
27451`;
27452}
27453/**
27454 * Generates a template for the {@link @microsoft/fast-foundation#DataGrid} component using
27455 * the provided prefix.
27456 *
27457 * @public
27458 */
27459
27460
27461const dataGridTemplate = (context, definition) => {
27462  const rowItemTemplate = createRowItemTemplate(context);
27463  const rowTag = context.tagFor(_dataGridRow.DataGridRow);
27464  return (0, _fastElement.html)`
27465        <template
27466            role="grid"
27467            tabindex="0"
27468            :rowElementTag="${() => rowTag}"
27469            :defaultRowItemTemplate="${rowItemTemplate}"
27470            ${(0, _fastElement.children)({
27471    property: "rowElements",
27472    filter: (0, _fastElement.elements)("[role=row]")
27473  })}
27474        >
27475            <slot></slot>
27476        </template>
27477    `;
27478};
27479
27480exports.dataGridTemplate = dataGridTemplate;
27481
27482},{"./data-grid-row.js":219,"@microsoft/fast-element":151}],224:[function(require,module,exports){
27483"use strict";
27484
27485Object.defineProperty(exports, "__esModule", {
27486  value: true
27487});
27488
27489var _dataGridTemplate = require("./data-grid.template.js");
27490
27491Object.keys(_dataGridTemplate).forEach(function (key) {
27492  if (key === "default" || key === "__esModule") return;
27493  if (key in exports && exports[key] === _dataGridTemplate[key]) return;
27494  Object.defineProperty(exports, key, {
27495    enumerable: true,
27496    get: function () {
27497      return _dataGridTemplate[key];
27498    }
27499  });
27500});
27501
27502var _dataGrid = require("./data-grid.js");
27503
27504Object.keys(_dataGrid).forEach(function (key) {
27505  if (key === "default" || key === "__esModule") return;
27506  if (key in exports && exports[key] === _dataGrid[key]) return;
27507  Object.defineProperty(exports, key, {
27508    enumerable: true,
27509    get: function () {
27510      return _dataGrid[key];
27511    }
27512  });
27513});
27514
27515var _dataGridRowTemplate = require("./data-grid-row.template.js");
27516
27517Object.keys(_dataGridRowTemplate).forEach(function (key) {
27518  if (key === "default" || key === "__esModule") return;
27519  if (key in exports && exports[key] === _dataGridRowTemplate[key]) return;
27520  Object.defineProperty(exports, key, {
27521    enumerable: true,
27522    get: function () {
27523      return _dataGridRowTemplate[key];
27524    }
27525  });
27526});
27527
27528var _dataGridRow = require("./data-grid-row.js");
27529

27530Object.keys(_dataGridRow).forEach(function (key) {
27531  if (key === "default" || key === "__esModule") return;
27532  if (key in exports && exports[key] === _dataGridRow[key]) return;
27533  Object.defineProperty(exports, key, {
27534    enumerable: true,
27535    get: function () {
27536      return _dataGridRow[key];
27537    }
27538  });
27539});
27540
27541var _dataGridCellTemplate = require("./data-grid-cell.template.js");
27542
27543Object.keys(_dataGridCellTemplate).forEach(function (key) {
27544  if (key === "default" || key === "__esModule") return;
27545  if (key in exports && exports[key] === _dataGridCellTemplate[key]) return;
27546  Object.defineProperty(exports, key, {
27547    enumerable: true,
27548    get: function () {
27549      return _dataGridCellTemplate[key];
27550    }
27551  });
27552});
27553
27554var _dataGridCell = require("./data-grid-cell.js");
27555
27556Object.keys(_dataGridCell).forEach(function (key) {
27557  if (key === "default" || key === "__esModule") return;
27558  if (key in exports && exports[key] === _dataGridCell[key]) return;
27559  Object.defineProperty(exports, key, {
27560    enumerable: true,
27561    get: function () {
27562      return _dataGridCell[key];
27563    }
27564  });
27565});
27566
27567},{"./data-grid-cell.js":217,"./data-grid-cell.template.js":218,"./data-grid-row.js":219,"./data-grid-row.template.js":220,"./data-grid.js":221,"./data-grid.template.js":223}],225:[function(require,module,exports){
27568"use strict";
27569
27570Object.defineProperty(exports, "__esModule", {
27571  value: true
27572});
27573exports.DefaultComponentPresentation = exports.ComponentPresentation = void 0;
27574
27575var _fastElement = require("@microsoft/fast-element");
27576
27577var _di = require("../di/di.js");
27578
27579function presentationKeyFromTag(tagName) {
27580  return `${tagName.toLowerCase()}:presentation`;
27581}
27582
27583const presentationRegistry = new Map();
27584/**
27585 * An API gateway to component presentation features.
27586 * @public
27587 */
27588
27589const ComponentPresentation = Object.freeze({
27590  /**
27591   * Defines a component presentation for an element.
27592   * @param tagName - The element name to define the presentation for.
27593   * @param presentation - The presentation that will be applied to matching elements.
27594   * @param container - The dependency injection container to register the configuration in.
27595   * @public
27596   */
27597  define(tagName, presentation, container) {
27598    const key = presentationKeyFromTag(tagName);
27599    const existing = presentationRegistry.get(key);
27600
27601    if (existing === void 0) {
27602      presentationRegistry.set(key, presentation);
27603    } else {
27604      // false indicates that we have more than one presentation
27605      // registered for a tagName and we must resolve through DI
27606      presentationRegistry.set(key, false);
27607    }
27608
27609    container.register(_di.Registration.instance(key, presentation));
27610  },
27611
27612  /**
27613   * Finds a component presentation for the specified element name,
27614   * searching the DOM hierarchy starting from the provided element.
27615   * @param tagName - The name of the element to locate the presentation for.
27616   * @param element - The element to begin the search from.
27617   * @returns The component presentation or null if none is found.
27618   * @public
27619   */
27620  forTag(tagName, element) {
27621    const key = presentationKeyFromTag(tagName);
27622    const existing = presentationRegistry.get(key);
27623
27624    if (existing === false) {
27625      const container = _di.DI.findResponsibleContainer(element);
27626
27627      return container.get(key);
27628    }
27629
27630    return existing || null;
27631  }
27632
27633});
27634/**
27635 * The default implementation of ComponentPresentation, used by FoundationElement.
27636 * @public
27637 */
27638
27639exports.ComponentPresentation = ComponentPresentation;
27640
27641class DefaultComponentPresentation {
27642  /**
27643   * Creates an instance of DefaultComponentPresentation.
27644   * @param template - The template to apply to the element.
27645   * @param styles - The styles to apply to the element.
27646   * @public
27647   */
27648  constructor(template, styles) {
27649    this.template = template || null;
27650    this.styles = styles === void 0 ? null : Array.isArray(styles) ? _fastElement.ElementStyles.create(styles) : styles instanceof _fastElement.ElementStyles ? styles : _fastElement.ElementStyles.create([styles]);
27651  }
27652  /**
27653   * Applies the presentation details to the specified element.
27654   * @param element - The element to apply the presentation details to.
27655   * @public
27656   */
27657
27658
27659  applyTo(element) {
27660    const controller = element.$fastController;
27661
27662    if (controller.template === null) {
27663      controller.template = this.template;
27664    }
27665
27666    if (controller.styles === null) {
27667      controller.styles = this.styles;
27668    }
27669  }
27670
27671}
27672
27673exports.DefaultComponentPresentation = DefaultComponentPresentation;
27674
27675},{"../di/di.js":232,"@microsoft/fast-element":151}],226:[function(require,module,exports){
27676"use strict";
27677
27678Object.defineProperty(exports, "__esModule", {
27679  value: true
27680});
27681exports.ElementDisambiguation = exports.DesignSystem = void 0;
27682
27683var _fastElement = require("@microsoft/fast-element");
27684

27685var _foundationElement = require("../foundation-element/foundation-element.js");
27686
27687var _di = require("../di/di.js");
27688
27689var _designToken = require("../design-token/design-token.js");
27690
27691var _componentPresentation = require("./component-presentation.js");
27692
27693/* eslint-disable @typescript-eslint/no-non-null-assertion */
27694
27695/**
27696 * Indicates what to do with an ambiguous (duplicate) element.
27697 * @public
27698 */
27699const ElementDisambiguation = Object.freeze({
27700  /**
27701   * Skip defining the element but still call the provided callback passed
27702   * to DesignSystemRegistrationContext.tryDefineElement
27703   */
27704  definitionCallbackOnly: null,
27705
27706  /**
27707   * Ignore the duplicate element entirely.
27708   */
27709  ignoreDuplicate: Symbol()
27710});
27711exports.ElementDisambiguation = ElementDisambiguation;
27712const elementTypesByTag = new Map();
27713const elementTagsByType = new Map();
27714let rootDesignSystem = null;
27715
27716const designSystemKey = _di.DI.createInterface(x => x.cachedCallback(handler => {
27717  if (rootDesignSystem === null) {
27718    rootDesignSystem = new DefaultDesignSystem(null, handler);
27719  }
27720
27721  return rootDesignSystem;
27722}));
27723/**
27724 * An API gateway to design system features.
27725 * @public
27726 */
27727
27728
27729const DesignSystem = Object.freeze({
27730  /**
27731   * Returns the HTML element name that the type is defined as.
27732   * @param type - The type to lookup.
27733   * @public
27734   */
27735  tagFor(type) {
27736    return elementTagsByType.get(type);
27737  },
27738
27739  /**
27740   * Searches the DOM hierarchy for the design system that is responsible
27741   * for the provided element.
27742   * @param element - The element to locate the design system for.
27743   * @returns The located design system.
27744   * @public
27745   */
27746  responsibleFor(element) {
27747    const owned = element.$$designSystem$$;
27748
27749    if (owned) {
27750      return owned;
27751    }
27752
27753    const container = _di.DI.findResponsibleContainer(element);
27754
27755    return container.get(designSystemKey);
27756  },
27757
27758  /**
27759   * Gets the DesignSystem if one is explicitly defined on the provided element;
27760   * otherwise creates a design system defined directly on the element.
27761   * @param element - The element to get or create a design system for.
27762   * @returns The design system.
27763   * @public
27764   */
27765  getOrCreate(node) {
27766    if (!node) {
27767      if (rootDesignSystem === null) {
27768        rootDesignSystem = _di.DI.getOrCreateDOMContainer().get(designSystemKey);
27769      }
27770
27771      return rootDesignSystem;
27772    }
27773
27774    const owned = node.$$designSystem$$;
27775
27776    if (owned) {
27777      return owned;
27778    }
27779
27780    const container = _di.DI.getOrCreateDOMContainer(node);
27781
27782    if (container.has(designSystemKey, false)) {
27783      return container.get(designSystemKey);
27784    } else {
27785      const system = new DefaultDesignSystem(node, container);
27786      container.register(_di.Registration.instance(designSystemKey, system));
27787      return system;
27788    }
27789  }
27790
27791});
27792exports.DesignSystem = DesignSystem;
27793
27794function extractTryDefineElementParams(params, elementDefinitionType, elementDefinitionCallback) {
27795  if (typeof params === "string") {
27796    return {
27797      name: params,
27798      type: elementDefinitionType,
27799      callback: elementDefinitionCallback
27800    };
27801  } else {
27802    return params;
27803  }
27804}
27805
27806class DefaultDesignSystem {
27807  constructor(owner, container) {
27808    this.owner = owner;
27809    this.container = container;
27810    this.designTokensInitialized = false;
27811    this.prefix = "fast";
27812    this.shadowRootMode = undefined;
27813
27814    this.disambiguate = () => ElementDisambiguation.definitionCallbackOnly;
27815
27816    if (owner !== null) {
27817      owner.$$designSystem$$ = this;
27818    }
27819  }
27820
27821  withPrefix(prefix) {
27822    this.prefix = prefix;
27823    return this;
27824  }
27825
27826  withShadowRootMode(mode) {
27827    this.shadowRootMode = mode;
27828    return this;
27829  }
27830
27831  withElementDisambiguation(callback) {
27832    this.disambiguate = callback;
27833    return this;
27834  }
27835
27836  withDesignTokenRoot(root) {
27837    this.designTokenRoot = root;
27838    return this;
27839  }
27840
27841  register(...registrations) {
27842    const container = this.container;
27843    const elementDefinitionEntries = [];
27844    const disambiguate = this.disambiguate;
27845    const shadowRootMode = this.shadowRootMode;
27846    const context = {
27847      elementPrefix: this.prefix,
27848
27849      tryDefineElement(params, elementDefinitionType, elementDefinitionCallback) {

27850        const extractedParams = extractTryDefineElementParams(params, elementDefinitionType, elementDefinitionCallback);
27851        const {
27852          name,
27853          callback,
27854          baseClass
27855        } = extractedParams;
27856        let {
27857          type
27858        } = extractedParams;
27859        let elementName = name;
27860        let typeFoundByName = elementTypesByTag.get(elementName);
27861        let needsDefine = true;
27862
27863        while (typeFoundByName) {
27864          const result = disambiguate(elementName, type, typeFoundByName);
27865
27866          switch (result) {
27867            case ElementDisambiguation.ignoreDuplicate:
27868              return;
27869
27870            case ElementDisambiguation.definitionCallbackOnly:
27871              needsDefine = false;
27872              typeFoundByName = void 0;
27873              break;
27874
27875            default:
27876              elementName = result;
27877              typeFoundByName = elementTypesByTag.get(elementName);
27878              break;
27879          }
27880        }
27881
27882        if (needsDefine) {
27883          if (elementTagsByType.has(type) || type === _foundationElement.FoundationElement) {
27884            type = class extends type {};
27885          }
27886
27887          elementTypesByTag.set(elementName, type);
27888          elementTagsByType.set(type, elementName);
27889
27890          if (baseClass) {
27891            elementTagsByType.set(baseClass, elementName);
27892          }
27893        }
27894
27895        elementDefinitionEntries.push(new ElementDefinitionEntry(container, elementName, type, shadowRootMode, callback, needsDefine));
27896      }
27897
27898    };
27899
27900    if (!this.designTokensInitialized) {
27901      this.designTokensInitialized = true;
27902
27903      if (this.designTokenRoot !== null) {
27904        _designToken.DesignToken.registerRoot(this.designTokenRoot);
27905      }
27906    }
27907
27908    container.registerWithContext(context, ...registrations);
27909
27910    for (const entry of elementDefinitionEntries) {
27911      entry.callback(entry);
27912
27913      if (entry.willDefine && entry.definition !== null) {
27914        entry.definition.define();
27915      }
27916    }
27917
27918    return this;
27919  }
27920
27921}
27922
27923class ElementDefinitionEntry {
27924  constructor(container, name, type, shadowRootMode, callback, willDefine) {
27925    this.container = container;
27926    this.name = name;
27927    this.type = type;
27928    this.shadowRootMode = shadowRootMode;
27929    this.callback = callback;
27930    this.willDefine = willDefine;
27931    this.definition = null;
27932  }
27933
27934  definePresentation(presentation) {
27935    _componentPresentation.ComponentPresentation.define(this.name, presentation, this.container);
27936  }
27937
27938  defineElement(definition) {
27939    this.definition = new _fastElement.FASTElementDefinition(this.type, Object.assign(Object.assign({}, definition), {
27940      name: this.name
27941    }));
27942  }
27943
27944  tagFor(type) {
27945    return DesignSystem.tagFor(type);
27946  }
27947
27948}
27949/* eslint-enable @typescript-eslint/no-non-null-assertion */
27950
27951},{"../design-token/design-token.js":230,"../di/di.js":232,"../foundation-element/foundation-element.js":251,"./component-presentation.js":225,"@microsoft/fast-element":151}],227:[function(require,module,exports){
27952"use strict";
27953
27954Object.defineProperty(exports, "__esModule", {
27955  value: true
27956});
27957
27958var _designSystem = require("./design-system.js");
27959
27960Object.keys(_designSystem).forEach(function (key) {
27961  if (key === "default" || key === "__esModule") return;
27962  if (key in exports && exports[key] === _designSystem[key]) return;
27963  Object.defineProperty(exports, key, {
27964    enumerable: true,
27965    get: function () {
27966      return _designSystem[key];
27967    }
27968  });
27969});
27970
27971var _componentPresentation = require("./component-presentation.js");
27972
27973Object.keys(_componentPresentation).forEach(function (key) {
27974  if (key === "default" || key === "__esModule") return;
27975  if (key in exports && exports[key] === _componentPresentation[key]) return;
27976  Object.defineProperty(exports, key, {
27977    enumerable: true,
27978    get: function () {
27979      return _componentPresentation[key];
27980    }
27981  });
27982});
27983
27984var _registrationContext = require("./registration-context.js");
27985
27986Object.keys(_registrationContext).forEach(function (key) {
27987  if (key === "default" || key === "__esModule") return;
27988  if (key in exports && exports[key] === _registrationContext[key]) return;
27989  Object.defineProperty(exports, key, {
27990    enumerable: true,
27991    get: function () {
27992      return _registrationContext[key];
27993    }
27994  });
27995});
27996
27997},{"./component-presentation.js":225,"./design-system.js":226,"./registration-context.js":228}],228:[function(require,module,exports){
27998"use strict";
27999
28000Object.defineProperty(exports, "__esModule", {
28001  value: true
28002});
28003
28004},{}],229:[function(require,module,exports){
28005"use strict";
28006
28007Object.defineProperty(exports, "__esModule", {
28008  value: true
28009});
28010exports.defaultElement = exports.RootStyleSheetTarget = exports.PropertyTargetManager = void 0;
28011
28012var _tslib = require("tslib");
28013
28014var _fastElement = require("@microsoft/fast-element");
28015
28016const defaultElement = document.createElement("div");
28017exports.defaultElement = defaultElement;
28018
28019function isFastElement(element) {
28020  return element instanceof _fastElement.FASTElement;
28021}
28022
28023class QueuedStyleSheetTarget {
28024  setProperty(name, value) {
28025    _fastElement.DOM.queueUpdate(() => this.target.setProperty(name, value));
28026  }
28027
28028  removeProperty(name) {
28029    _fastElement.DOM.queueUpdate(() => this.target.removeProperty(name));
28030  }
28031
28032}
28033/**
28034 * Handles setting properties for a FASTElement using Constructable Stylesheets
28035 */
28036
28037
28038class ConstructableStyleSheetTarget extends QueuedStyleSheetTarget {
28039  constructor(source) {
28040    super();
28041    const sheet = new CSSStyleSheet();

vendor: 5,725 bytes, lines 28042-28241

28042    sheet[_fastElement.prependToAdoptedStyleSheetsSymbol] = true;
28043    this.target = sheet.cssRules[sheet.insertRule(":host{}")].style;
28044    source.$fastController.addStyles(_fastElement.ElementStyles.create([sheet]));
28045  }
28046
28047}
28048
28049class DocumentStyleSheetTarget extends QueuedStyleSheetTarget {
28050  constructor() {
28051    super();
28052    const sheet = new CSSStyleSheet();
28053    this.target = sheet.cssRules[sheet.insertRule(":root{}")].style;
28054    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
28055  }
28056
28057}
28058
28059class HeadStyleElementStyleSheetTarget extends QueuedStyleSheetTarget {
28060  constructor() {
28061    super();
28062    this.style = document.createElement("style");
28063    document.head.appendChild(this.style);
28064    const {
28065      sheet
28066    } = this.style; // Because the HTMLStyleElement has been appended,
28067    // there shouldn't exist a case where `sheet` is null,
28068    // but if-check it just in case.
28069
28070    if (sheet) {
28071      // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
28072      // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
28073      const index = sheet.insertRule(":root{}", sheet.cssRules.length);
28074      this.target = sheet.cssRules[index].style;
28075    }
28076  }
28077
28078}
28079/**
28080 * Handles setting properties for a FASTElement using an HTMLStyleElement
28081 */
28082
28083
28084class StyleElementStyleSheetTarget {
28085  constructor(target) {
28086    this.store = new Map();
28087    this.target = null;
28088    const controller = target.$fastController;
28089    this.style = document.createElement("style");
28090    controller.addStyles(this.style);
28091
28092    _fastElement.Observable.getNotifier(controller).subscribe(this, "isConnected");
28093
28094    this.handleChange(controller, "isConnected");
28095  }
28096
28097  targetChanged() {
28098    if (this.target !== null) {
28099      for (const [key, value] of this.store.entries()) {
28100        this.target.setProperty(key, value);
28101      }
28102    }
28103  }
28104
28105  setProperty(name, value) {
28106    this.store.set(name, value);
28107
28108    _fastElement.DOM.queueUpdate(() => {
28109      if (this.target !== null) {
28110        this.target.setProperty(name, value);
28111      }
28112    });
28113  }
28114
28115  removeProperty(name) {
28116    this.store.delete(name);
28117
28118    _fastElement.DOM.queueUpdate(() => {
28119      if (this.target !== null) {
28120        this.target.removeProperty(name);
28121      }
28122    });
28123  }
28124
28125  handleChange(source, key) {
28126    // HTMLStyleElement.sheet is null if the element isn't connected to the DOM,
28127    // so this method reacts to changes in DOM connection for the element hosting
28128    // the HTMLStyleElement.
28129    //
28130    // All rules applied via the CSSOM also get cleared when the element disconnects,
28131    // so we need to add a new rule each time and populate it with the stored properties
28132    const {
28133      sheet
28134    } = this.style;
28135
28136    if (sheet) {
28137      // Safari will throw if we try to use the return result of insertRule()
28138      // to index the rule inline, so store as a const prior to indexing.
28139      // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
28140      // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
28141      const index = sheet.insertRule(":host{}", sheet.cssRules.length);
28142      this.target = sheet.cssRules[index].style;
28143    } else {
28144      this.target = null;
28145    }
28146  }
28147
28148}
28149
28150(0, _tslib.__decorate)([_fastElement.observable], StyleElementStyleSheetTarget.prototype, "target", void 0);
28151/**
28152 * Handles setting properties for a normal HTMLElement
28153 */
28154
28155class ElementStyleSheetTarget {
28156  constructor(source) {
28157    this.target = source.style;
28158  }
28159
28160  setProperty(name, value) {
28161    _fastElement.DOM.queueUpdate(() => this.target.setProperty(name, value));
28162  }
28163
28164  removeProperty(name) {
28165    _fastElement.DOM.queueUpdate(() => this.target.removeProperty(name));
28166  }
28167
28168}
28169/**
28170 * Controls emission for default values. This control is capable
28171 * of emitting to multiple {@link PropertyTarget | PropertyTargets},
28172 * and only emits if it has at least one root.
28173 *
28174 * @internal
28175 */
28176
28177
28178class RootStyleSheetTarget {
28179  setProperty(name, value) {
28180    RootStyleSheetTarget.properties[name] = value;
28181
28182    for (const target of RootStyleSheetTarget.roots.values()) {
28183      PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(target)).setProperty(name, value);
28184    }
28185  }
28186
28187  removeProperty(name) {
28188    delete RootStyleSheetTarget.properties[name];
28189
28190    for (const target of RootStyleSheetTarget.roots.values()) {
28191      PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(target)).removeProperty(name);
28192    }
28193  }
28194
28195  static registerRoot(root) {
28196    const {
28197      roots
28198    } = RootStyleSheetTarget;
28199
28200    if (!roots.has(root)) {
28201      roots.add(root);
28202      const target = PropertyTargetManager.getOrCreate(this.normalizeRoot(root));
28203
28204      for (const key in RootStyleSheetTarget.properties) {
28205        target.setProperty(key, RootStyleSheetTarget.properties[key]);
28206      }
28207    }
28208  }
28209
28210  static unregisterRoot(root) {
28211    const {
28212      roots
28213    } = RootStyleSheetTarget;
28214
28215    if (roots.has(root)) {
28216      roots.delete(root);
28217      const target = PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(root));
28218
28219      for (const key in RootStyleSheetTarget.properties) {
28220        target.removeProperty(key);
28221      }
28222    }
28223  }
28224  /**
28225   * Returns the document when provided the default element,
28226   * otherwise is a no-op
28227   * @param root - the root to normalize
28228   */
28229
28230
28231  static normalizeRoot(root) {
28232    return root === defaultElement ? document : root;
28233  }
28234
28235}
28236
28237exports.RootStyleSheetTarget = RootStyleSheetTarget;
28238RootStyleSheetTarget.roots = new Set();
28239RootStyleSheetTarget.properties = {}; // Caches PropertyTarget instances
28240
28241const propertyTargetCache = new WeakMap();

28241 // Use Constructable StyleSheets for FAST elements when supported, otherwise use
28242// HTMLStyleElement instances
28243
28244const propertyTargetCtor = _fastElement.DOM.supportsAdoptedStyleSheets ? ConstructableStyleSheetTarget : StyleElementStyleSheetTarget;
28245/**
28246 * Manages creation and caching of PropertyTarget instances.
28247 *
28248 * @internal
28249 */
28250
28251const PropertyTargetManager = Object.freeze({
28252  getOrCreate(source) {
28253    if (propertyTargetCache.has(source)) {
28254      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
28255      return propertyTargetCache.get(source);
28256    }
28257
28258    let target;
28259
28260    if (source === defaultElement) {
28261      target = new RootStyleSheetTarget();
28262    } else if (source instanceof Document) {
28263      target = _fastElement.DOM.supportsAdoptedStyleSheets ? new DocumentStyleSheetTarget() : new HeadStyleElementStyleSheetTarget();
28264    } else if (isFastElement(source)) {
28265      target = new propertyTargetCtor(source);
28266    } else {
28267      target = new ElementStyleSheetTarget(source);
28268    }
28269
28270    propertyTargetCache.set(source, target);
28271    return target;
28272  }
28273
28274});
28275exports.PropertyTargetManager = PropertyTargetManager;
28276
28277},{"@microsoft/fast-element":151,"tslib":372}],230:[function(require,module,exports){
28278"use strict";
28279
28280Object.defineProperty(exports, "__esModule", {
28281  value: true
28282});
28283exports.DesignToken = void 0;
28284
28285var _tslib = require("tslib");
28286
28287var _fastElement = require("@microsoft/fast-element");
28288
28289var _composedParent = require("../utilities/composed-parent.js");
28290
28291var _composedContains = require("../utilities/composed-contains.js");
28292
28293var _customPropertyManager = require("./custom-property-manager.js");
28294
28295/**
28296 * Implementation of {@link (DesignToken:interface)}
28297 */
28298class DesignTokenImpl extends _fastElement.CSSDirective {
28299  constructor(configuration) {
28300    super();
28301    this.subscribers = new WeakMap();
28302    this._appliedTo = new Set();
28303    this.name = configuration.name;
28304
28305    if (configuration.cssCustomPropertyName !== null) {
28306      this.cssCustomProperty = `--${configuration.cssCustomPropertyName}`;
28307      this.cssVar = `var(${this.cssCustomProperty})`;
28308    }
28309
28310    this.id = DesignTokenImpl.uniqueId();
28311    DesignTokenImpl.tokensById.set(this.id, this);
28312  }
28313
28314  get appliedTo() {
28315    return [...this._appliedTo];
28316  }
28317
28318  static from(nameOrConfig) {
28319    return new DesignTokenImpl({
28320      name: typeof nameOrConfig === "string" ? nameOrConfig : nameOrConfig.name,
28321      cssCustomPropertyName: typeof nameOrConfig === "string" ? nameOrConfig : nameOrConfig.cssCustomPropertyName === void 0 ? nameOrConfig.name : nameOrConfig.cssCustomPropertyName
28322    });
28323  }
28324
28325  static isCSSDesignToken(token) {
28326    return typeof token.cssCustomProperty === "string";
28327  }
28328
28329  static isDerivedDesignTokenValue(value) {
28330    return typeof value === "function";
28331  }
28332  /**
28333   * Gets a token by ID. Returns undefined if the token was not found.
28334   * @param id - The ID of the token
28335   * @returns
28336   */
28337
28338
28339  static getTokenById(id) {
28340    return DesignTokenImpl.tokensById.get(id);
28341  }
28342
28343  getOrCreateSubscriberSet(target = this) {
28344    return this.subscribers.get(target) || this.subscribers.set(target, new Set()) && this.subscribers.get(target);
28345  }
28346
28347  createCSS() {
28348    return this.cssVar || "";
28349  }
28350
28351  getValueFor(element) {
28352    const value = DesignTokenNode.getOrCreate(element).get(this);
28353
28354    if (value !== undefined) {
28355      return value;
28356    }
28357
28358    throw new Error(`Value could not be retrieved for token named "${this.name}". Ensure the value is set for ${element} or an ancestor of ${element}.`);
28359  }
28360
28361  setValueFor(element, value) {
28362    this._appliedTo.add(element);
28363
28364    if (value instanceof DesignTokenImpl) {
28365      value = this.alias(value);
28366    }
28367
28368    DesignTokenNode.getOrCreate(element).set(this, value);
28369    return this;
28370  }
28371
28372  deleteValueFor(element) {
28373    this._appliedTo.delete(element);
28374
28375    if (DesignTokenNode.existsFor(element)) {
28376      DesignTokenNode.getOrCreate(element).delete(this);
28377    }
28378
28379    return this;
28380  }
28381
28382  withDefault(value) {
28383    this.setValueFor(_customPropertyManager.defaultElement, value);
28384    return this;
28385  }
28386
28387  subscribe(subscriber, target) {
28388    const subscriberSet = this.getOrCreateSubscriberSet(target);
28389
28390    if (target && !DesignTokenNode.existsFor(target)) {
28391      DesignTokenNode.getOrCreate(target);
28392    }
28393
28394    if (!subscriberSet.has(subscriber)) {
28395      subscriberSet.add(subscriber);
28396    }
28397  }
28398
28399  unsubscribe(subscriber, target) {
28400    const list = this.subscribers.get(target || this);
28401
28402    if (list && list.has(subscriber)) {
28403      list.delete(subscriber);
28404    }
28405  }
28406  /**
28407   * Notifies subscribers that the value for an element has changed.
28408   * @param element - The element to emit a notification for
28409   */
28410
28411
28412  notify(element) {
28413    const record = Object.freeze({
28414      token: this,
28415      target: element
28416    });
28417
28418    if (this.subscribers.has(this)) {

28419      this.subscribers.get(this).forEach(sub => sub.handleChange(record));
28420    }
28421
28422    if (this.subscribers.has(element)) {
28423      this.subscribers.get(element).forEach(sub => sub.handleChange(record));
28424    }
28425  }
28426  /**
28427   * Alias the token to the provided token.
28428   * @param token - the token to alias to
28429   */
28430
28431
28432  alias(token) {
28433    return target => token.getValueFor(target);
28434  }
28435
28436}
28437
28438DesignTokenImpl.uniqueId = (() => {
28439  let id = 0;
28440  return () => {
28441    id++;
28442    return id.toString(16);
28443  };
28444})();
28445/**
28446 * Token storage by token ID
28447 */
28448
28449
28450DesignTokenImpl.tokensById = new Map();
28451
28452class CustomPropertyReflector {
28453  startReflection(token, target) {
28454    token.subscribe(this, target);
28455    this.handleChange({
28456      token,
28457      target
28458    });
28459  }
28460
28461  stopReflection(token, target) {
28462    token.unsubscribe(this, target);
28463    this.remove(token, target);
28464  }
28465
28466  handleChange(record) {
28467    const {
28468      token,
28469      target
28470    } = record;
28471    this.add(token, target);
28472  }
28473
28474  add(token, target) {
28475    _customPropertyManager.PropertyTargetManager.getOrCreate(target).setProperty(token.cssCustomProperty, this.resolveCSSValue(DesignTokenNode.getOrCreate(target).get(token)));
28476  }
28477
28478  remove(token, target) {
28479    _customPropertyManager.PropertyTargetManager.getOrCreate(target).removeProperty(token.cssCustomProperty);
28480  }
28481
28482  resolveCSSValue(value) {
28483    return value && typeof value.createCSS === "function" ? value.createCSS() : value;
28484  }
28485
28486}
28487/**
28488 * A light wrapper around BindingObserver to handle value caching and
28489 * token notification
28490 */
28491
28492
28493class DesignTokenBindingObserver {
28494  constructor(source, token, node) {
28495    this.source = source;
28496    this.token = token;
28497    this.node = node;
28498    this.dependencies = new Set();
28499    this.observer = _fastElement.Observable.binding(source, this, false); // This is a little bit hacky because it's using internal APIs of BindingObserverImpl.
28500    // BindingObserverImpl queues updates to batch it's notifications which doesn't work for this
28501    // scenario because the DesignToken.getValueFor API is not async. Without this, using DesignToken.getValueFor()
28502    // after DesignToken.setValueFor() when setting a dependency of the value being retrieved can return a stale
28503    // value. Assigning .handleChange to .call forces immediate invocation of this classes handleChange() method,
28504    // allowing resolution of values synchronously.
28505    // TODO: https://github.com/microsoft/fast/issues/5110
28506
28507    this.observer.handleChange = this.observer.call;
28508    this.handleChange();
28509  }
28510
28511  disconnect() {
28512    this.observer.disconnect();
28513  }
28514  /**
28515   * @internal
28516   */
28517
28518
28519  handleChange() {
28520    this.node.store.set(this.token, this.observer.observe(this.node.target, _fastElement.defaultExecutionContext));
28521  }
28522
28523}
28524/**
28525 * Stores resolved token/value pairs and notifies on changes
28526 */
28527
28528
28529class Store {
28530  constructor() {
28531    this.values = new Map();
28532  }
28533
28534  set(token, value) {
28535    if (this.values.get(token) !== value) {
28536      this.values.set(token, value);
28537
28538      _fastElement.Observable.getNotifier(this).notify(token.id);
28539    }
28540  }
28541
28542  get(token) {
28543    _fastElement.Observable.track(this, token.id);
28544
28545    return this.values.get(token);
28546  }
28547
28548  delete(token) {
28549    this.values.delete(token);
28550  }
28551
28552  all() {
28553    return this.values.entries();
28554  }
28555
28556}
28557
28558const nodeCache = new WeakMap();
28559const childToParent = new WeakMap();
28560/**
28561 * A node responsible for setting and getting token values,
28562 * emitting values to CSS custom properties, and maintaining
28563 * inheritance structures.
28564 */
28565
28566class DesignTokenNode {
28567  constructor(target) {
28568    this.target = target;
28569    /**
28570     * Stores all resolved token values for a node
28571     */
28572
28573    this.store = new Store();
28574    /**
28575     * All children assigned to the node
28576     */
28577
28578    this.children = [];
28579    /**
28580     * All values explicitly assigned to the node in their raw form
28581     */
28582
28583    this.assignedValues = new Map();
28584    /**
28585     * Tokens currently being reflected to CSS custom properties
28586     */
28587
28588    this.reflecting = new Set();
28589    /**
28590     * Binding observers for assigned and inherited derived values.
28591     */
28592
28593    this.bindingObservers = new Map();
28594    /**
28595     * Emits notifications to token when token values
28596     * change the DesignTokenNode
28597     */
28598
28599    this.tokenValueChangeHandler = {
28600      handleChange: (source, arg) => {
28601        const token = DesignTokenImpl.getTokenById(arg);
28602
28603        if (token) {
28604          // Notify any token subscribers
28605          token.notify(this.target);
28606          this.updateCSSTokenReflection(source, token);
28607        }
28608      }
28609    };
28610    nodeCache.set(target, this); // Map store change notifications to token change notifications
28611
28612    _fastElement.Observable.getNotifier(this.store).subscribe(this.tokenValueChangeHandler);
28613
28614    if (target instanceof _fastElement.FASTElement) {
28615      target.$fastController.addBehaviors([this]);
28616    } else if (target.isConnected) {
28617      this.bind();
28618    }
28619  }
28620  /**
28621   * Returns a DesignTokenNode for an element.
28622   * Creates a new instance if one does not already exist for a node,
28623   * otherwise returns the cached instance
28624   *
28625   * @param target - The HTML element to retrieve a DesignTokenNode for
28626   */
28627
28628
28629  static getOrCreate(target) {
28630    return nodeCache.get(target) || new DesignTokenNode(target);
28631  }
28632  /**
28633   * Determines if a DesignTokenNode has been created for a target
28634   * @param target - The element to test
28635   */
28636
28637
28638  static existsFor(target) {
28639    return nodeCache.has(target);
28640  }
28641  /**
28642   * Searches for and return the nearest parent DesignTokenNode.
28643   * Null is returned if no node is found or the node provided is for a default element.
28644   */
28645
28646
28647  static findParent(node) {
28648    if (!(_customPropertyManager.defaultElement === node.target)) {
28649      let parent = (0, _composedParent.composedParent)(node.target);
28650
28651      while (parent !== null) {
28652        if (nodeCache.has(parent)) {
28653          return nodeCache.get(parent);
28654        }
28655
28656        parent = (0, _composedParent.composedParent)(parent);
28657      }
28658
28659      return DesignTokenNode.getOrCreate(_customPropertyManager.defaultElement);
28660    }
28661
28662    return null;
28663  }
28664  /**
28665   * Finds the closest node with a value explicitly assigned for a token, otherwise null.
28666   * @param token - The token to look for
28667   * @param start - The node to start looking for value assignment
28668   * @returns
28669   */
28670
28671
28672  static findClosestAssignedNode(token, start) {

28673    let current = start;
28674
28675    do {
28676      if (current.has(token)) {
28677        return current;
28678      }
28679
28680      current = current.parent ? current.parent : current.target !== _customPropertyManager.defaultElement ? DesignTokenNode.getOrCreate(_customPropertyManager.defaultElement) : null;
28681    } while (current !== null);
28682
28683    return null;
28684  }
28685  /**
28686   * The parent DesignTokenNode, or null.
28687   */
28688
28689
28690  get parent() {
28691    return childToParent.get(this) || null;
28692  }
28693
28694  updateCSSTokenReflection(source, token) {
28695    if (DesignTokenImpl.isCSSDesignToken(token)) {
28696      const parent = this.parent;
28697      const reflecting = this.isReflecting(token);
28698
28699      if (parent) {
28700        const parentValue = parent.get(token);
28701        const sourceValue = source.get(token);
28702
28703        if (parentValue !== sourceValue && !reflecting) {
28704          this.reflectToCSS(token);
28705        } else if (parentValue === sourceValue && reflecting) {
28706          this.stopReflectToCSS(token);
28707        }
28708      } else if (!reflecting) {
28709        this.reflectToCSS(token);
28710      }
28711    }
28712  }
28713  /**
28714   * Checks if a token has been assigned an explicit value the node.
28715   * @param token - the token to check.
28716   */
28717
28718
28719  has(token) {
28720    return this.assignedValues.has(token);
28721  }
28722  /**
28723   * Gets the value of a token for a node
28724   * @param token - The token to retrieve the value for
28725   * @returns
28726   */
28727
28728
28729  get(token) {
28730    const value = this.store.get(token);
28731
28732    if (value !== undefined) {
28733      return value;
28734    }
28735
28736    const raw = this.getRaw(token);
28737
28738    if (raw !== undefined) {
28739      this.hydrate(token, raw);
28740      return this.get(token);
28741    }
28742  }
28743  /**
28744   * Retrieves the raw assigned value of a token from the nearest assigned node.
28745   * @param token - The token to retrieve a raw value for
28746   * @returns
28747   */
28748
28749
28750  getRaw(token) {
28751    var _a;
28752
28753    if (this.assignedValues.has(token)) {
28754      return this.assignedValues.get(token);
28755    }
28756
28757    return (_a = DesignTokenNode.findClosestAssignedNode(token, this)) === null || _a === void 0 ? void 0 : _a.getRaw(token);
28758  }
28759  /**
28760   * Sets a token to a value for a node
28761   * @param token - The token to set
28762   * @param value - The value to set the token to
28763   */
28764
28765
28766  set(token, value) {
28767    if (DesignTokenImpl.isDerivedDesignTokenValue(this.assignedValues.get(token))) {
28768      this.tearDownBindingObserver(token);
28769    }
28770
28771    this.assignedValues.set(token, value);
28772
28773    if (DesignTokenImpl.isDerivedDesignTokenValue(value)) {
28774      this.setupBindingObserver(token, value);
28775    } else {
28776      this.store.set(token, value);
28777    }
28778  }
28779  /**
28780   * Deletes a token value for the node.
28781   * @param token - The token to delete the value for
28782   */
28783
28784
28785  delete(token) {
28786    this.assignedValues.delete(token);
28787    this.tearDownBindingObserver(token);
28788    const upstream = this.getRaw(token);
28789
28790    if (upstream) {
28791      this.hydrate(token, upstream);
28792    } else {
28793      this.store.delete(token);
28794    }
28795  }
28796  /**
28797   * Invoked when the DesignTokenNode.target is attached to the document
28798   */
28799
28800
28801  bind() {
28802    const parent = DesignTokenNode.findParent(this);
28803
28804    if (parent) {
28805      parent.appendChild(this);
28806    }
28807
28808    for (const key of this.assignedValues.keys()) {
28809      key.notify(this.target);
28810    }
28811  }
28812  /**
28813   * Invoked when the DesignTokenNode.target is detached from the document
28814   */
28815
28816
28817  unbind() {
28818    if (this.parent) {
28819      const parent = childToParent.get(this);
28820      parent.removeChild(this);
28821    }
28822  }
28823  /**
28824   * Appends a child to a parent DesignTokenNode.
28825   * @param child - The child to append to the node
28826   */
28827
28828
28829  appendChild(child) {
28830    if (child.parent) {
28831      childToParent.get(child).removeChild(child);
28832    }
28833
28834    const reParent = this.children.filter(x => child.contains(x));
28835    childToParent.set(child, this);
28836    this.children.push(child);
28837    reParent.forEach(x => child.appendChild(x));
28838
28839    _fastElement.Observable.getNotifier(this.store).subscribe(child); // How can we not notify *every* subscriber?
28840
28841
28842    for (const [token, value] of this.store.all()) {
28843      child.hydrate(token, this.bindingObservers.has(token) ? this.getRaw(token) : value);
28844    }
28845  }
28846  /**
28847   * Removes a child from a node.
28848   * @param child - The child to remove.
28849   */
28850
28851
28852  removeChild(child) {
28853    const childIndex = this.children.indexOf(child);
28854
28855    if (childIndex !== -1) {
28856      this.children.splice(childIndex, 1);
28857    }
28858
28859    _fastElement.Observable.getNotifier(this.store).unsubscribe(child);
28860
28861    return child.parent === this ? childToParent.delete(child) : false;

vendor: 4,282 bytes, lines 28862-29023

28862  }
28863  /**
28864   * Tests whether a provided node is contained by
28865   * the calling node.
28866   * @param test - The node to test
28867   */
28868
28869
28870  contains(test) {
28871    return (0, _composedContains.composedContains)(this.target, test.target);
28872  }
28873  /**
28874   * Instructs the node to reflect a design token for the provided token.
28875   * @param token - The design token to reflect
28876   */
28877
28878
28879  reflectToCSS(token) {
28880    if (!this.isReflecting(token)) {
28881      this.reflecting.add(token);
28882      DesignTokenNode.cssCustomPropertyReflector.startReflection(token, this.target);
28883    }
28884  }
28885  /**
28886   * Stops reflecting a DesignToken to CSS
28887   * @param token - The design token to stop reflecting
28888   */
28889
28890
28891  stopReflectToCSS(token) {
28892    if (this.isReflecting(token)) {
28893      this.reflecting.delete(token);
28894      DesignTokenNode.cssCustomPropertyReflector.stopReflection(token, this.target);
28895    }
28896  }
28897  /**
28898   * Determines if a token is being reflected to CSS for a node.
28899   * @param token - The token to check for reflection
28900   * @returns
28901   */
28902
28903
28904  isReflecting(token) {
28905    return this.reflecting.has(token);
28906  }
28907  /**
28908   * Handle changes to upstream tokens
28909   * @param source - The parent DesignTokenNode
28910   * @param property - The token ID that changed
28911   */
28912
28913
28914  handleChange(source, property) {
28915    const token = DesignTokenImpl.getTokenById(property);
28916
28917    if (!token) {
28918      return;
28919    }
28920
28921    this.hydrate(token, this.getRaw(token));
28922    this.updateCSSTokenReflection(this.store, token);
28923  }
28924  /**
28925   * Hydrates a token with a DesignTokenValue, making retrieval available.
28926   * @param token - The token to hydrate
28927   * @param value - The value to hydrate
28928   */
28929
28930
28931  hydrate(token, value) {
28932    if (!this.has(token)) {
28933      const observer = this.bindingObservers.get(token);
28934
28935      if (DesignTokenImpl.isDerivedDesignTokenValue(value)) {
28936        if (observer) {
28937          // If the binding source doesn't match, we need
28938          // to update the binding
28939          if (observer.source !== value) {
28940            this.tearDownBindingObserver(token);
28941            this.setupBindingObserver(token, value);
28942          }
28943        } else {
28944          this.setupBindingObserver(token, value);
28945        }
28946      } else {
28947        if (observer) {
28948          this.tearDownBindingObserver(token);
28949        }
28950
28951        this.store.set(token, value);
28952      }
28953    }
28954  }
28955  /**
28956   * Sets up a binding observer for a derived token value that notifies token
28957   * subscribers on change.
28958   *
28959   * @param token - The token to notify when the binding updates
28960   * @param source - The binding source
28961   */
28962
28963
28964  setupBindingObserver(token, source) {
28965    const binding = new DesignTokenBindingObserver(source, token, this);
28966    this.bindingObservers.set(token, binding);
28967    return binding;
28968  }
28969  /**
28970   * Tear down a binding observer for a token.
28971   */
28972
28973
28974  tearDownBindingObserver(token) {
28975    if (this.bindingObservers.has(token)) {
28976      this.bindingObservers.get(token).disconnect();
28977      this.bindingObservers.delete(token);
28978      return true;
28979    }
28980
28981    return false;
28982  }
28983
28984}
28985/**
28986 * Responsible for reflecting tokens to CSS custom properties
28987 */
28988
28989
28990DesignTokenNode.cssCustomPropertyReflector = new CustomPropertyReflector();
28991(0, _tslib.__decorate)([_fastElement.observable], DesignTokenNode.prototype, "children", void 0);
28992
28993function create(nameOrConfig) {
28994  return DesignTokenImpl.from(nameOrConfig);
28995}
28996/* eslint-enable @typescript-eslint/no-unused-vars */
28997
28998/**
28999 * Factory object for creating {@link (DesignToken:interface)} instances.
29000 * @public
29001 */
29002
29003
29004const DesignToken = Object.freeze({
29005  create,
29006
29007  /**
29008   * Informs DesignToken that an HTMLElement for which tokens have
29009   * been set has been connected to the document.
29010   *
29011   * The browser does not provide a reliable mechanism to observe an HTMLElement's connectedness
29012   * in all scenarios, so invoking this method manually is necessary when:
29013   *
29014   * 1. Token values are set for an HTMLElement.
29015   * 2. The HTMLElement does not inherit from FASTElement.
29016   * 3. The HTMLElement is not connected to the document when token values are set.
29017   *
29018   * @param element - The element to notify
29019   * @returns - true if notification was successful, otherwise false.
29020   */
29021  notifyConnection(element) {
29022    if (!element.isConnected || !DesignTokenNode.existsFor(element)) {
29023      return false;

29024    }
29025
29026    DesignTokenNode.getOrCreate(element).bind();
29027    return true;
29028  },
29029
29030  /**
29031   * Informs DesignToken that an HTMLElement for which tokens have
29032   * been set has been disconnected to the document.
29033   *
29034   * The browser does not provide a reliable mechanism to observe an HTMLElement's connectedness
29035   * in all scenarios, so invoking this method manually is necessary when:
29036   *
29037   * 1. Token values are set for an HTMLElement.
29038   * 2. The HTMLElement does not inherit from FASTElement.
29039   *
29040   * @param element - The element to notify
29041   * @returns - true if notification was successful, otherwise false.
29042   */
29043  notifyDisconnection(element) {
29044    if (element.isConnected || !DesignTokenNode.existsFor(element)) {
29045      return false;
29046    }
29047
29048    DesignTokenNode.getOrCreate(element).unbind();
29049    return true;
29050  },
29051
29052  /**
29053   * Registers and element or document as a DesignToken root.
29054   * {@link CSSDesignToken | CSSDesignTokens} with default values assigned via
29055   * {@link (DesignToken:interface).withDefault} will emit CSS custom properties to all
29056   * registered roots.
29057   * @param target - The root to register
29058   */
29059  registerRoot(target = _customPropertyManager.defaultElement) {
29060    _customPropertyManager.RootStyleSheetTarget.registerRoot(target);
29061  },
29062
29063  /**
29064   * Unregister an element or document as a DesignToken root.
29065   * @param target - The root to deregister
29066   */
29067  unregisterRoot(target = _customPropertyManager.defaultElement) {
29068    _customPropertyManager.RootStyleSheetTarget.unregisterRoot(target);
29069  }
29070
29071});
29072/* eslint-enable @typescript-eslint/no-non-null-assertion */
29073
29074exports.DesignToken = DesignToken;
29075
29076},{"../utilities/composed-contains.js":359,"../utilities/composed-parent.js":360,"./custom-property-manager.js":229,"@microsoft/fast-element":151,"tslib":372}],231:[function(require,module,exports){
29077arguments[4][228][0].apply(exports,arguments)
29078},{"dup":228}],232:[function(require,module,exports){
29079"use strict";
29080
29081Object.defineProperty(exports, "__esModule", {
29082  value: true
29083});
29084exports.all = exports.ServiceLocator = exports.ResolverImpl = exports.ResolverBuilder = exports.Registration = exports.FactoryImpl = exports.DefaultResolver = exports.DI = exports.ContainerImpl = exports.ContainerConfiguration = exports.Container = void 0;
29085exports.ignore = ignore;
29086exports.optional = exports.newInstanceOf = exports.newInstanceForScope = exports.lazy = exports.inject = void 0;
29087exports.singleton = singleton;
29088exports.transient = transient;
29089exports.validateKey = validateKey;
29090
29091var _fastElement = require("@microsoft/fast-element");
29092
29093/**
29094 * Big thanks to https://github.com/fkleuver and the https://github.com/aurelia/aurelia project
29095 * for the bulk of this code and many of the associated tests.
29096 */
29097// Tiny polyfill for TypeScript's Reflect metadata API.
29098const metadataByTarget = new Map();
29099
29100if (!("metadata" in Reflect)) {
29101  Reflect.metadata = function (key, value) {
29102    return function (target) {
29103      Reflect.defineMetadata(key, value, target);
29104    };
29105  };
29106
29107  Reflect.defineMetadata = function (key, value, target) {
29108    let metadata = metadataByTarget.get(target);
29109
29110    if (metadata === void 0) {
29111      metadataByTarget.set(target, metadata = new Map());
29112    }
29113
29114    metadata.set(key, value);
29115  };
29116
29117  Reflect.getOwnMetadata = function (key, target) {
29118    const metadata = metadataByTarget.get(target);
29119
29120    if (metadata !== void 0) {
29121      return metadata.get(key);
29122    }
29123
29124    return void 0;
29125  };
29126}
29127/**
29128 * A utility class used that constructs and registers resolvers for a dependency
29129 * injection container. Supports a standard set of object lifetimes.
29130 * @public
29131 */
29132
29133
29134class ResolverBuilder {
29135  /**
29136   *
29137   * @param container - The container to create resolvers for.
29138   * @param key - The key to register resolvers under.
29139   */
29140  constructor(container, key) {
29141    this.container = container;
29142    this.key = key;
29143  }
29144  /**
29145   * Creates a resolver for an existing object instance.
29146   * @param value - The instance to resolve.
29147   * @returns The resolver.
29148   */
29149
29150
29151  instance(value) {
29152    return this.registerResolver(0
29153    /* instance */
29154    , value);
29155  }
29156  /**
29157   * Creates a resolver that enforces a singleton lifetime.
29158   * @param value - The type to create and cache the singleton for.
29159   * @returns The resolver.
29160   */
29161
29162
29163  singleton(value) {
29164    return this.registerResolver(1
29165    /* singleton */
29166    , value);
29167  }
29168  /**
29169   * Creates a resolver that creates a new instance for every depen

29169dency request.
29170   * @param value - The type to create instances of.
29171   * @returns - The resolver.
29172   */
29173
29174
29175  transient(value) {
29176    return this.registerResolver(2
29177    /* transient */
29178    , value);
29179  }
29180  /**
29181   * Creates a resolver that invokes a callback function for every dependency resolution
29182   * request, allowing custom logic to return the dependency.
29183   * @param value - The callback to call during resolution.
29184   * @returns The resolver.
29185   */
29186
29187
29188  callback(value) {
29189    return this.registerResolver(3
29190    /* callback */
29191    , value);
29192  }
29193  /**
29194   * Creates a resolver that invokes a callback function the first time that a dependency
29195   * resolution is requested. The returned value is then cached and provided for all
29196   * subsequent requests.
29197   * @param value - The callback to call during the first resolution.
29198   * @returns The resolver.
29199   */
29200
29201
29202  cachedCallback(value) {
29203    return this.registerResolver(3
29204    /* callback */
29205    , cacheCallbackResult(value));
29206  }
29207  /**
29208   * Aliases the current key to a different key.
29209   * @param destinationKey - The key to point the alias to.
29210   * @returns The resolver.
29211   */
29212
29213
29214  aliasTo(destinationKey) {
29215    return this.registerResolver(5
29216    /* alias */
29217    , destinationKey);
29218  }
29219
29220  registerResolver(strategy, state) {
29221    const {
29222      container,
29223      key
29224    } = this;
29225    /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
29226
29227    this.container = this.key = void 0;
29228    return container.registerResolver(key, new ResolverImpl(key, strategy, state));
29229  }
29230
29231}
29232
29233exports.ResolverBuilder = ResolverBuilder;
29234
29235function cloneArrayWithPossibleProps(source) {
29236  const clone = source.slice();
29237  const keys = Object.keys(source);
29238  const len = keys.length;
29239  let key;
29240
29241  for (let i = 0; i < len; ++i) {
29242    key = keys[i];
29243
29244    if (!isArrayIndex(key)) {
29245      clone[key] = source[key];
29246    }
29247  }
29248
29249  return clone;
29250}
29251/**
29252 * A set of default resolvers useful in configuring a container.
29253 * @public
29254 */
29255
29256
29257const DefaultResolver = Object.freeze({
29258  /**
29259   * Disables auto-registration and throws for all un-registered dependencies.
29260   * @param key - The key to create the resolver for.
29261   */
29262  none(key) {
29263    throw Error(`${key.toString()} not registered, did you forget to add @singleton()?`);
29264  },
29265
29266  /**
29267   * Provides default singleton resolution behavior during auto-registration.
29268   * @param key - The key to create the resolver for.
29269   * @returns The resolver.
29270   */
29271  singleton(key) {
29272    return new ResolverImpl(key, 1
29273    /* singleton */
29274    , key);
29275  },
29276
29277  /**
29278   * Provides default transient resolution behavior during auto-registration.
29279   * @param key - The key to create the resolver for.
29280   * @returns The resolver.
29281   */
29282  transient(key) {
29283    return new ResolverImpl(key, 2
29284    /* transient */
29285    , key);
29286  }
29287
29288});
29289/**
29290 * Configuration for a dependency injection container.
29291 * @public
29292 */
29293
29294exports.DefaultResolver = DefaultResolver;
29295const ContainerConfiguration = Object.freeze({
29296  /**
29297   * The default configuration used when creating a DOM-disconnected container.
29298   * @remarks
29299   * The default creates a root container, with no parent container. It does not handle
29300   * owner requests and it uses singleton resolution behavior for auto-registration.
29301   */
29302  default: Object.freeze({
29303    parentLocator: () => null,
29304    responsibleForOwnerRequests: false,
29305    defaultResolver: DefaultResolver.singleton
29306  })
29307});
29308exports.ContainerConfiguration = ContainerConfiguration;
29309const dependencyLookup = new Map();
29310
29311function getParamTypes(key) {
29312  return Type => {
29313    return Reflect.getOwnMetadata(key, Type);
29314  };
29315}
29316
29317let rootDOMContainer = null;
29318/**
29319 * The gateway to dependency injection APIs.
29320 * @public
29321 */
29322
29323const DI = Object.freeze({
29324  /**
29325   * Creates a new dependency injection container.
29326   * @param config - The configuration for the container.
29327   * @returns A newly created dependency injection container.
29328   */
29329  createContainer(config) {
29330    return new ContainerImpl(null, Object.assign({}, ContainerConfiguration.default, config));
29331  },
29332
29333  /**
29334   * Finds the dependency injection container responsible for providing dependencies
29335   * to the specified node.
29336   * @param node - The node to find the responsible container for.
29337   * @returns The container responsible for providing dependencies to the node.
29338   * @remarks
29339   * This will be the same as the parent container if the specified node
29340   * does not itself host a container configured with responsibleForOwnerRequests.
29341   */
29342  findResponsibleContainer(node) {
29343    const owned = node.$$container$$;
29344
29345    if (owned && owned.responsibleForOwnerRequests) {
29346      return owned;
29347    }
29348
29349    return DI.findParentContainer(node);
29350  },
29351
29352  /**
29353   * Find the dependency injection container up the DOM tree from this node.
29354   * @param node - The node to find the parent container for.
29355   * @returns The parent container of this node.
29356   * @remarks
29357   * This will be the same as the responsible container if the specified node
29358   * does not itself host a container configured with responsibleForOwnerRequests.
29359   */
29360  findParentContainer(node) {
29361    const event = new CustomEvent(DILocateParentEventType, {
29362      bubbles: true,
29363      composed: true,
29364      cancelable: true,
29365      detail: {
29366        container: void 0
29367      }
29368    });
29369    node.dispatchEvent(event);
29370    return event.detail.container || DI.getOrCreateDOMContainer();
29371  },
29372
29373  /**
29374   * Returns a dependency injection container if one is explicitly owned by the specified
29375   * node. If one is not owned, then a new container is created and assigned to the node.
29376   * @param node - The node to find or create the container for.
29377   * @param config - The configuration for the container if one needs to be created.
29378   * @returns The located or created container.
29379   * @remarks
29380   * This API does not search for a responsible or parent container. It looks only for a container
29381   * directly defined on the specified node and creates one at that location if one does not
29382   * already exist.
29383   */
29384  getOrCreateDOMContainer(node, config) {
29385    if (!node) {
29386      return rootDOMContainer || (rootDOMContainer = new ContainerImpl(null, Object.assign({}, ContainerConfiguration.default, config, {
29387        parentLocator: () => null
29388      })));
29389    }
29390
29391    return node.$$container$$ || new ContainerImpl(node, Object.assign({}, ContainerConfiguration.default, config, {
29392      parentLocator: DI.findParentContainer
29393    }));
29394  },
29395
29396  /**
29397   * Gets the "design:paramtypes" metadata for the specified type.
29398   * @param Type - The type to get the metadata for.
29399   * @returns The metadata array or undefined if no metadata is found.
29400   */
29401  getDesignParamtypes: getParamTypes("design:paramtypes"),
29402
29403  /**
29404   * Gets the "di:paramtypes" metadata for the specified type.
29405   * @param Type - The type to get the metadata for.
29406   * @returns The metadata array or undefined if no metadata is found.
29407   */
29408  getAnnotationParamtypes: getParamTypes("di:paramtypes"),
29409
29410  /**
29411   *
29412   * @param Type - Gets the "di:paramtypes" metadata for the specified type. If none is found,
29413   * an empty metadata array is created and added.

vendor: 6,900 bytes, lines 29414-29567

29414   * @returns The metadata array.
29415   */
29416  getOrCreateAnnotationParamTypes(Type) {
29417    let annotationParamtypes = this.getAnnotationParamtypes(Type);
29418
29419    if (annotationParamtypes === void 0) {
29420      Reflect.defineMetadata("di:paramtypes", annotationParamtypes = [], Type);
29421    }
29422
29423    return annotationParamtypes;
29424  },
29425
29426  /**
29427   * Gets the dependency keys representing what is needed to instantiate the specified type.
29428   * @param Type - The type to get the dependencies for.
29429   * @returns An array of dependency keys.
29430   */
29431  getDependencies(Type) {
29432    // Note: Every detail of this getDependencies method is pretty deliberate at the moment, and probably not yet 100% tested from every possible angle,
29433    // so be careful with making changes here as it can have a huge impact on complex end user apps.
29434    // Preferably, only make changes to the dependency resolution process via a RFC.
29435    let dependencies = dependencyLookup.get(Type);
29436
29437    if (dependencies === void 0) {
29438      // Type.length is the number of constructor parameters. If this is 0, it could mean the class has an empty constructor
29439      // but it could also mean the class has no constructor at all (in which case it inherits the constructor from the prototype).
29440      // Non-zero constructor length + no paramtypes means emitDecoratorMetadata is off, or the class has no decorator.
29441      // We're not doing anything with the above right now, but it's good to keep in mind for any future issues.
29442      const inject = Type.inject;
29443
29444      if (inject === void 0) {
29445        // design:paramtypes is set by tsc when emitDecoratorMetadata is enabled.
29446        const designParamtypes = DI.getDesignParamtypes(Type); // di:paramtypes is set by the parameter decorator from DI.createInterface or by @inject
29447
29448        const annotationParamtypes = DI.getAnnotationParamtypes(Type);
29449
29450        if (designParamtypes === void 0) {
29451          if (annotationParamtypes === void 0) {
29452            // Only go up the prototype if neither static inject nor any of the paramtypes is defined, as
29453            // there is no sound way to merge a type's deps with its prototype's deps
29454            const Proto = Object.getPrototypeOf(Type);
29455
29456            if (typeof Proto === "function" && Proto !== Function.prototype) {
29457              dependencies = cloneArrayWithPossibleProps(DI.getDependencies(Proto));
29458            } else {
29459              dependencies = [];
29460            }
29461          } else {
29462            // No design:paramtypes so just use the di:paramtypes
29463            dependencies = cloneArrayWithPossibleProps(annotationParamtypes);
29464          }
29465        } else if (annotationParamtypes === void 0) {
29466          // No di:paramtypes so just use the design:paramtypes
29467          dependencies = cloneArrayWithPossibleProps(designParamtypes);
29468        } else {
29469          // We've got both, so merge them (in case of conflict on same index, di:paramtypes take precedence)
29470          dependencies = cloneArrayWithPossibleProps(designParamtypes);
29471          let len = annotationParamtypes.length;
29472          let auAnnotationParamtype;
29473
29474          for (let i = 0; i < len; ++i) {
29475            auAnnotationParamtype = annotationParamtypes[i];
29476
29477            if (auAnnotationParamtype !== void 0) {
29478              dependencies[i] = auAnnotationParamtype;
29479            }
29480          }
29481
29482          const keys = Object.keys(annotationParamtypes);
29483          len = keys.length;
29484          let key;
29485
29486          for (let i = 0; i < len; ++i) {
29487            key = keys[i];
29488
29489            if (!isArrayIndex(key)) {
29490              dependencies[key] = annotationParamtypes[key];
29491            }
29492          }
29493        }
29494      } else {
29495        // Ignore paramtypes if we have static inject
29496        dependencies = cloneArrayWithPossibleProps(inject);
29497      }
29498
29499      dependencyLookup.set(Type, dependencies);
29500    }
29501
29502    return dependencies;
29503  },
29504
29505  /**
29506   * Defines a property on a web component class. The value of this property will
29507   * be resolved from the dependency injection container responsible for the element
29508   * instance, based on where it is connected in the DOM.
29509   * @param target - The target to define the property on.
29510   * @param propertyName - The name of the property to define.
29511   * @param key - The dependency injection key.
29512   * @param respectConnection - Indicates whether or not to update the property value if the
29513   * hosting component is disconnected and then re-connected at a different location in the DOM.
29514   * @remarks
29515   * The respectConnection option is only applicable to elements that descend from FASTElement.
29516   */
29517  defineProperty(target, propertyName, key, respectConnection = false) {
29518    const diPropertyKey = `$di_${propertyName}`;
29519    Reflect.defineProperty(target, propertyName, {
29520      get: function () {
29521        let value = this[diPropertyKey];
29522
29523        if (value === void 0) {
29524          const container = this instanceof HTMLElement ? DI.findResponsibleContainer(this) : DI.getOrCreateDOMContainer();
29525          value = container.get(key);
29526          this[diPropertyKey] = value;
29527
29528          if (respectConnection && this instanceof _fastElement.FASTElement) {
29529            const notifier = this.$fastController;
29530
29531            const handleChange = () => {
29532              const newContainer = DI.findResponsibleContainer(this);
29533              const newValue = newContainer.get(key);
29534              const oldValue = this[diPropertyKey];
29535
29536              if (newValue !== oldValue) {
29537                this[diPropertyKey] = value;
29538                notifier.notify(propertyName);
29539              }
29540            };
29541
29542            notifier.subscribe({
29543              handleChange
29544            }, "isConnected");
29545          }
29546        }
29547
29548        return value;
29549      }
29550    });
29551  },
29552
29553  /**
29554   * Creates a dependency injection key.
29555   * @param nameConfigOrCallback - A friendly name for the key or a lambda that configures a
29556   * default resolution for the dependency.
29557   * @param configuror - If a friendly name was provided for the first parameter, then an optional
29558   * lambda that configures a default resolution for the dependency can be provided second.
29559   * @returns The created key.
29560   * @remarks
29561   * The created key can be used as a property decorator or constructor parameter decorator,
29562   * in addition to its standard use in an inject array or through direct container APIs.
29563   */
29564  createInterface(nameConfigOrCallback, configuror) {
29565    const configure = typeof nameConfigOrCallback === "function" ? nameConfigOrCallback : configuror;
29566    const friendlyName = typeof nameConfigOrCallback === "string" ? nameConfigOrCallback : nameConfigOrCallback && "friendlyName" in nameConfigOrCallback ? nameConfigOrCallback.friendlyName || defaultFriendlyName : defaultFriendlyName;
29567    const respectConnection = typeof nameConfigOrCallback === "string" ? false : nameConfigOrCallback && "respectConnection" in nameConfigOrCallback ? nameConfigOrCallback.respectConnection || false : false;

vendor: 4,964 bytes, lines 29568-29735

29568
29569    const Interface = function (target, property, index) {
29570      if (target == null || new.target !== undefined) {
29571        throw new Error(`No registration for interface: '${Interface.friendlyName}'`);
29572      }
29573
29574      if (property) {
29575        DI.defineProperty(target, property, Interface, respectConnection);
29576      } else {
29577        const annotationParamtypes = DI.getOrCreateAnnotationParamTypes(target);
29578        annotationParamtypes[index] = Interface;
29579      }
29580    };
29581
29582    Interface.$isInterface = true;
29583    Interface.friendlyName = friendlyName == null ? "(anonymous)" : friendlyName;
29584
29585    if (configure != null) {
29586      Interface.register = function (container, key) {
29587        return configure(new ResolverBuilder(container, key !== null && key !== void 0 ? key : Interface));
29588      };
29589    }
29590
29591    Interface.toString = function toString() {
29592      return `InterfaceSymbol<${Interface.friendlyName}>`;
29593    };
29594
29595    return Interface;
29596  },
29597
29598  /**
29599   * A decorator that specifies what to inject into its target.
29600   * @param dependencies - The dependencies to inject.
29601   * @returns The decorator to be applied to the target class.
29602   * @remarks
29603   * The decorator can be used to decorate a class, listing all of the classes dependencies.
29604   * Or it can be used to decorate a constructor paramter, indicating what to inject for that
29605   * parameter.
29606   * Or it can be used for a web component property, indicating what that property should resolve to.
29607   */
29608  inject(...dependencies) {
29609    return function (target, key, descriptor) {
29610      if (typeof descriptor === "number") {
29611        // It's a parameter decorator.
29612        const annotationParamtypes = DI.getOrCreateAnnotationParamTypes(target);
29613        const dep = dependencies[0];
29614
29615        if (dep !== void 0) {
29616          annotationParamtypes[descriptor] = dep;
29617        }
29618      } else if (key) {
29619        DI.defineProperty(target, key, dependencies[0]);
29620      } else {
29621        const annotationParamtypes = descriptor ? DI.getOrCreateAnnotationParamTypes(descriptor.value) : DI.getOrCreateAnnotationParamTypes(target);
29622        let dep;
29623
29624        for (let i = 0; i < dependencies.length; ++i) {
29625          dep = dependencies[i];
29626
29627          if (dep !== void 0) {
29628            annotationParamtypes[i] = dep;
29629          }
29630        }
29631      }
29632    };
29633  },
29634
29635  /**
29636   * Registers the `target` class as a transient dependency; each time the dependency is resolved
29637   * a new instance will be created.
29638   *
29639   * @param target - The class / constructor function to register as transient.
29640   * @returns The same class, with a static `register` method that takes a container and returns the appropriate resolver.
29641   *
29642   * @example
29643   * On an existing class
29644   * ```ts
29645   * class Foo { }
29646   * DI.transient(Foo);
29647   * ```
29648   *
29649   * @example
29650   * Inline declaration
29651   *
29652   * ```ts
29653   * const Foo = DI.transient(class { });
29654   * // Foo is now strongly typed with register
29655   * Foo.register(container);
29656   * ```
29657   *
29658   * @public
29659   */
29660  transient(target) {
29661    target.register = function register(container) {
29662      const registration = Registration.transient(target, target);
29663      return registration.register(container);
29664    };
29665
29666    target.registerInRequestor = false;
29667    return target;
29668  },
29669
29670  /**
29671   * Registers the `target` class as a singleton dependency; the class will only be created once. Each
29672   * consecutive time the dependency is resolved, the same instance will be returned.
29673   *
29674   * @param target - The class / constructor function to register as a singleton.
29675   * @returns The same class, with a static `register` method that takes a container and returns the appropriate resolver.
29676   * @example
29677   * On an existing class
29678   * ```ts
29679   * class Foo { }
29680   * DI.singleton(Foo);
29681   * ```
29682   *
29683   * @example
29684   * Inline declaration
29685   * ```ts
29686   * const Foo = DI.singleton(class { });
29687   * // Foo is now strongly typed with register
29688   * Foo.register(container);
29689   * ```
29690   *
29691   * @public
29692   */
29693  singleton(target, options = defaultSingletonOptions) {
29694    target.register = function register(container) {
29695      const registration = Registration.singleton(target, target);
29696      return registration.register(container);
29697    };
29698
29699    target.registerInRequestor = options.scoped;
29700    return target;
29701  }
29702
29703});
29704/**
29705 * The interface key that resolves the dependency injection container itself.
29706 * @public
29707 */
29708
29709exports.DI = DI;
29710const Container = DI.createInterface("Container");
29711/**
29712 * The interface key that resolves the service locator itself.
29713 * @public
29714 */
29715
29716exports.Container = Container;
29717const ServiceLocator = Container;
29718exports.ServiceLocator = ServiceLocator;
29719
29720function createResolver(getter) {
29721  return function (key) {
29722    const resolver = function (target, property, descriptor) {
29723      DI.inject(resolver)(target, property, descriptor);
29724    };
29725
29726    resolver.$isResolver = true;
29727
29728    resolver.resolve = function (handler, requestor) {
29729      return getter(key, handler, requestor);
29730    };
29731
29732    return resolver;
29733  };
29734}
29735/**

29736 * A decorator that specifies what to inject into its target.
29737 * @param dependencies - The dependencies to inject.
29738 * @returns The decorator to be applied to the target class.
29739 * @remarks
29740 * The decorator can be used to decorate a class, listing all of the classes dependencies.
29741 * Or it can be used to decorate a constructor paramter, indicating what to inject for that
29742 * parameter.
29743 * Or it can be used for a web component property, indicating what that property should resolve to.
29744 *
29745 * @public
29746 */
29747
29748
29749const inject = DI.inject;
29750exports.inject = inject;
29751
29752function transientDecorator(target) {
29753  return DI.transient(target);
29754}
29755
29756function transient(target) {
29757  return target == null ? transientDecorator : transientDecorator(target);
29758}
29759
29760const defaultSingletonOptions = {
29761  scoped: false
29762};
29763
29764function singletonDecorator(target) {
29765  return DI.singleton(target);
29766}
29767/**
29768 * @public
29769 */
29770
29771
29772function singleton(targetOrOptions) {
29773  if (typeof targetOrOptions === "function") {
29774    return DI.singleton(targetOrOptions);
29775  }
29776
29777  return function ($target) {
29778    return DI.singleton($target, targetOrOptions);
29779  };
29780}
29781
29782function createAllResolver(getter) {
29783  return function (key, searchAncestors) {
29784    searchAncestors = !!searchAncestors;
29785
29786    const resolver = function (target, property, descriptor) {
29787      DI.inject(resolver)(target, property, descriptor);
29788    };
29789
29790    resolver.$isResolver = true;
29791
29792    resolver.resolve = function (handler, requestor) {
29793      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
29794      return getter(key, handler, requestor, searchAncestors);
29795    };
29796
29797    return resolver;
29798  };
29799}
29800/**
29801 * A decorator and DI resolver that will resolve an array of all dependencies
29802 * registered with the specified key.
29803 * @param key - The key to resolve all dependencies for.
29804 * @param searchAncestors - [optional] Indicates whether to search ancestor containers.
29805 * @public
29806 */
29807
29808
29809const all = createAllResolver((key, handler, requestor, searchAncestors) => requestor.getAll(key, searchAncestors));
29810/**
29811 * A decorator that lazily injects a dependency depending on whether the `Key` is present at the time of function call.
29812 *
29813 * @example
29814 * You need to make your argument a function that returns the type, for example
29815 * ```ts
29816 * class Foo {
29817 *   constructor( @lazy('random') public random: () => number )
29818 * }
29819 * const foo = container.get(Foo); // instanceof Foo
29820 * foo.random(); // throws
29821 * ```
29822 * would throw an exception because you haven't registered `'random'` before calling the method.
29823 * @example
29824 * This, would give you a new 'Math.random()' number each time.
29825 * ```ts
29826 * class Foo {
29827 *   constructor( @lazy('random') public random: () => random )
29828 * }
29829 * container.register(Registration.callback('random', Math.random ));
29830 * container.get(Foo).random(); // some random number
29831 * container.get(Foo).random(); // another random number
29832 * ```
29833 *
29834 * `@lazy` does not manage the lifecycle of the underlying key. If you want a singleton, you have to register as a
29835 * `singleton`, `transient` would also behave as you would expect, providing you a new instance each time.
29836 *
29837 * @param key - The key to lazily resolve.
29838 * see {@link DI.createInterface} on interactions with interfaces
29839 *
29840 * @public
29841 */
29842
29843exports.all = all;
29844const lazy = createResolver((key, handler, requestor) => {
29845  return () => requestor.get(key);
29846});
29847/**
29848 * A decorator that allows you to optionally inject a dependency depending on whether the [[`Key`]] is present, for example:
29849 * @example
29850 * ```ts
29851 * class Foo {
29852 *   constructor( @inject('mystring') public str: string = 'somestring' )
29853 * }
29854 * container.get(Foo); // throws
29855 * ```
29856 * would fail
29857 *
29858 * @example
29859 * ```ts
29860 * class Foo {
29861 *   constructor( @optional('mystring') public str: string = 'somestring' )
29862 * }
29863 * container.get(Foo).str // somestring
29864 * ```
29865 * if you use it without a default it will inject `undefined`, so remember to mark your input type as
29866 * possibly `undefined`!
29867 *
29868 * @param key - The key to optionally resolve.
29869 * see {@link DI.createInterface} on interactions with interfaces
29870 *
29871 * @public
29872 */
29873
29874exports.lazy = lazy;
29875const optional = createResolver((key, handler, requestor) => {
29876  if (requestor.has(key, true)) {
29877    return requestor.get(key);
29878  } else {
29879    return undefined;
29880  }
29881});
29882/**
29883 * A decorator that tells the container not to try to inject a dependency.
29884 *
29885 * @public
29886 */
29887
29888exports.optional = optional;
29889
29890function ignore(target, property, descriptor) {
29891  DI.inject(ignore)(target, property, descriptor);
29892} // Hack: casting below used to prevent TS from generate a namespace which can't be commented
29893// and results in documentation validation errors.
29894
29895
29896ignore.$isResolver = true;
29897
29898ignore.resolve = () => undefined;
29899/**
29900 * A decorator that indicates that a new instance should be injected scoped to the
29901 * container that requested the instance.
29902 * @param key - The dependency key for the new instance.
29903 * @remarks
29904 * This creates a resolver with an instance strategy pointing to the new instance, effectively
29905 * making this a singleton, scoped to the container or DOM's subtree.
29906 *
29907 * @public
29908 */
29909
29910
29911const newInstanceForScope = createResolver((key, handler, requestor) => {
29912  const instance = createNewInstance(key, handler);
29913  const resolver = new ResolverImpl(key, 0
29914  /* instance */
29915  , instance);
29916  requestor.registerResolver(key, resolver);
29917  return instance;
29918});
29919/**
29920 * A decorator that indicates that a new instance should be injected.
29921 * @param key - The dependency key for the new instance.
29922 * @remarks
29923 * The instance is not internally cached with a resolver as newInstanceForScope does.
29924 *
29925 * @public
29926 */
29927
29928exports.newInstanceForScope = newInstanceForScope;
29929const newInstanceOf = createResolver((key, handler, _requestor) => createNewInstance(key, handler));
29930exports.newInstanceOf = newInstanceOf;
29931
29932function createNewInstance(key, handler) {
29933  /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
29934  return handler.getFactory(key).construct(handler);
29935}
29936/** @internal */
29937
29938
29939class ResolverImpl {

vendor: 4,059 bytes, lines 29940-30108

29940  constructor(key, strategy, state) {
29941    this.key = key;
29942    this.strategy = strategy;
29943    this.state = state;
29944    this.resolving = false;
29945  }
29946
29947  get $isResolver() {
29948    return true;
29949  }
29950
29951  register(container) {
29952    return container.registerResolver(this.key, this);
29953  }
29954
29955  resolve(handler, requestor) {
29956    switch (this.strategy) {
29957      case 0
29958      /* instance */
29959      :
29960        return this.state;
29961
29962      case 1
29963      /* singleton */
29964      :
29965        {
29966          if (this.resolving) {
29967            throw new Error(`Cyclic dependency found: ${this.state.name}`);
29968          }
29969
29970          this.resolving = true;
29971          this.state = handler.getFactory(this.state).construct(requestor);
29972          this.strategy = 0
29973          /* instance */
29974          ;
29975          this.resolving = false;
29976          return this.state;
29977        }
29978
29979      case 2
29980      /* transient */
29981      :
29982        {
29983          // Always create transients from the requesting container
29984          const factory = handler.getFactory(this.state);
29985
29986          if (factory === null) {
29987            throw new Error(`Resolver for ${String(this.key)} returned a null factory`);
29988          }
29989
29990          return factory.construct(requestor);
29991        }
29992
29993      case 3
29994      /* callback */
29995      :
29996        return this.state(handler, requestor, this);
29997
29998      case 4
29999      /* array */
30000      :
30001        return this.state[0].resolve(handler, requestor);
30002
30003      case 5
30004      /* alias */
30005      :
30006        return requestor.get(this.state);
30007
30008      default:
30009        throw new Error(`Invalid resolver strategy specified: ${this.strategy}.`);
30010    }
30011  }
30012
30013  getFactory(container) {
30014    var _a, _b, _c;
30015
30016    switch (this.strategy) {
30017      case 1
30018      /* singleton */
30019      :
30020      case 2
30021      /* transient */
30022      :
30023        return container.getFactory(this.state);
30024
30025      case 5
30026      /* alias */
30027      :
30028        return (_c = (_b = (_a = container.getResolver(this.state)) === null || _a === void 0 ? void 0 : _a.getFactory) === null || _b === void 0 ? void 0 : _b.call(_a, container)) !== null && _c !== void 0 ? _c : null;
30029
30030      default:
30031        return null;
30032    }
30033  }
30034
30035}
30036
30037exports.ResolverImpl = ResolverImpl;
30038
30039function containerGetKey(d) {
30040  return this.get(d);
30041}
30042
30043function transformInstance(inst, transform) {
30044  return transform(inst);
30045}
30046/** @internal */
30047
30048
30049class FactoryImpl {
30050  constructor(Type, dependencies) {
30051    this.Type = Type;
30052    this.dependencies = dependencies;
30053    this.transformers = null;
30054  }
30055
30056  construct(container, dynamicDependencies) {
30057    let instance;
30058
30059    if (dynamicDependencies === void 0) {
30060      instance = new this.Type(...this.dependencies.map(containerGetKey, container));
30061    } else {
30062      instance = new this.Type(...this.dependencies.map(containerGetKey, container), ...dynamicDependencies);
30063    }
30064
30065    if (this.transformers == null) {
30066      return instance;
30067    }
30068
30069    return this.transformers.reduce(transformInstance, instance);
30070  }
30071
30072  registerTransformer(transformer) {
30073    (this.transformers || (this.transformers = [])).push(transformer);
30074  }
30075
30076}
30077
30078exports.FactoryImpl = FactoryImpl;
30079const containerResolver = {
30080  $isResolver: true,
30081
30082  resolve(handler, requestor) {
30083    return requestor;
30084  }
30085
30086};
30087
30088function isRegistry(obj) {
30089  return typeof obj.register === "function";
30090}
30091
30092function isSelfRegistry(obj) {
30093  return isRegistry(obj) && typeof obj.registerInRequestor === "boolean";
30094}
30095
30096function isRegisterInRequester(obj) {
30097  return isSelfRegistry(obj) && obj.registerInRequestor;
30098}
30099
30100function isClass(obj) {
30101  return obj.prototype !== void 0;
30102}
30103
30104const InstrinsicTypeNames = new Set(["Array", "ArrayBuffer", "Boolean", "DataView", "Date", "Error", "EvalError", "Float32Array", "Float64Array", "Function", "Int8Array", "Int16Array", "Int32Array", "Map", "Number", "Object", "Promise", "RangeError", "ReferenceError", "RegExp", "Set", "SharedArrayBuffer", "String", "SyntaxError", "TypeError", "Uint8Array", "Uint8ClampedArray", "Uint16Array", "Uint32Array", "URIError", "WeakMap", "WeakSet"]);
30105const DILocateParentEventType = "__DI_LOCATE_PARENT__";
30106const factories = new Map();
30107/**
30108 * @internal

vendor: 5,392 bytes, lines 30108-30329

30108
30109 */
30110
30111class ContainerImpl {
30112  constructor(owner, config) {
30113    this.owner = owner;
30114    this.config = config;
30115    this._parent = void 0;
30116    this.registerDepth = 0;
30117    this.context = null;
30118
30119    if (owner !== null) {
30120      owner.$$container$$ = this;
30121    }
30122
30123    this.resolvers = new Map();
30124    this.resolvers.set(Container, containerResolver);
30125
30126    if (owner instanceof Node) {
30127      owner.addEventListener(DILocateParentEventType, e => {
30128        if (e.composedPath()[0] !== this.owner) {
30129          e.detail.container = this;
30130          e.stopImmediatePropagation();
30131        }
30132      });
30133    }
30134  }
30135
30136  get parent() {
30137    if (this._parent === void 0) {
30138      this._parent = this.config.parentLocator(this.owner);
30139    }
30140
30141    return this._parent;
30142  }
30143
30144  get depth() {
30145    return this.parent === null ? 0 : this.parent.depth + 1;
30146  }
30147
30148  get responsibleForOwnerRequests() {
30149    return this.config.responsibleForOwnerRequests;
30150  }
30151
30152  registerWithContext(context, ...params) {
30153    this.context = context;
30154    this.register(...params);
30155    this.context = null;
30156    return this;
30157  }
30158
30159  register(...params) {
30160    if (++this.registerDepth === 100) {
30161      throw new Error("Unable to autoregister dependency"); // Most likely cause is trying to register a plain object that does not have a
30162      // register method and is not a class constructor
30163    }
30164
30165    let current;
30166    let keys;
30167    let value;
30168    let j;
30169    let jj;
30170    const context = this.context;
30171
30172    for (let i = 0, ii = params.length; i < ii; ++i) {
30173      current = params[i];
30174
30175      if (!isObject(current)) {
30176        continue;
30177      }
30178
30179      if (isRegistry(current)) {
30180        current.register(this, context);
30181      } else if (isClass(current)) {
30182        Registration.singleton(current, current).register(this);
30183      } else {
30184        keys = Object.keys(current);
30185        j = 0;
30186        jj = keys.length;
30187
30188        for (; j < jj; ++j) {
30189          value = current[keys[j]];
30190
30191          if (!isObject(value)) {
30192            continue;
30193          } // note: we could remove this if-branch and call this.register directly
30194          // - the extra check is just a perf tweak to create fewer unnecessary arrays by the spread operator
30195
30196
30197          if (isRegistry(value)) {
30198            value.register(this, context);
30199          } else {
30200            this.register(value);
30201          }
30202        }
30203      }
30204    }
30205
30206    --this.registerDepth;
30207    return this;
30208  }
30209
30210  registerResolver(key, resolver) {
30211    validateKey(key);
30212    const resolvers = this.resolvers;
30213    const result = resolvers.get(key);
30214
30215    if (result == null) {
30216      resolvers.set(key, resolver);
30217    } else if (result instanceof ResolverImpl && result.strategy === 4
30218    /* array */
30219    ) {
30220      result.state.push(resolver);
30221    } else {
30222      resolvers.set(key, new ResolverImpl(key, 4
30223      /* array */
30224      , [result, resolver]));
30225    }
30226
30227    return resolver;
30228  }
30229
30230  registerTransformer(key, transformer) {
30231    const resolver = this.getResolver(key);
30232
30233    if (resolver == null) {
30234      return false;
30235    }
30236
30237    if (resolver.getFactory) {
30238      const factory = resolver.getFactory(this);
30239
30240      if (factory == null) {
30241        return false;
30242      } // This type cast is a bit of a hacky one, necessary due to the duplicity of IResolverLike.
30243      // Problem is that that interface's type arg can be of type Key, but the getFactory method only works on
30244      // type Constructable. So the return type of that optional method has this additional constraint, which
30245      // seems to confuse the type checker.
30246
30247
30248      factory.registerTransformer(transformer);
30249      return true;
30250    }
30251
30252    return false;
30253  }
30254
30255  getResolver(key, autoRegister = true) {
30256    validateKey(key);
30257
30258    if (key.resolve !== void 0) {
30259      return key;
30260    }
30261    /* eslint-disable-next-line @typescript-eslint/no-this-alias */
30262
30263
30264    let current = this;
30265    let resolver;
30266
30267    while (current != null) {
30268      resolver = current.resolvers.get(key);
30269
30270      if (resolver == null) {
30271        if (current.parent == null) {
30272          const handler = isRegisterInRequester(key) ? this : current;
30273          return autoRegister ? this.jitRegister(key, handler) : null;
30274        }
30275
30276        current = current.parent;
30277      } else {
30278        return resolver;
30279      }
30280    }
30281
30282    return null;
30283  }
30284
30285  has(key, searchAncestors = false) {
30286    return this.resolvers.has(key) ? true : searchAncestors && this.parent != null ? this.parent.has(key, true) : false;
30287  }
30288
30289  get(key) {
30290    validateKey(key);
30291
30292    if (key.$isResolver) {
30293      return key.resolve(this, this);
30294    }
30295    /* eslint-disable-next-line @typescript-eslint/no-this-alias */
30296
30297
30298    let current = this;
30299    let resolver;
30300
30301    while (current != null) {
30302      resolver = current.resolvers.get(key);
30303
30304      if (resolver == null) {
30305        if (current.parent == null) {
30306          const handler = isRegisterInRequester(key) ? this : current;
30307          resolver = this.jitRegister(key, handler);
30308          return resolver.resolve(current, this);
30309        }
30310
30311        current = current.parent;
30312      } else {
30313        return resolver.resolve(current, this);
30314      }
30315    }
30316
30317    throw new Error(`Unable to resolve key: ${String(key)}`);
30318  }
30319
30320  getAll(key, searchAncestors = false) {
30321    validateKey(key);
30322    /* eslint-disable-next-line @typescript-eslint/no-this-alias */
30323
30324    const requestor = this;
30325    let current = requestor;
30326    let resolver;
30327
30328    if (searchAncestors) {
30329      let resolutions = 

30329_fastElement.emptyArray;
30330
30331      while (current != null) {
30332        resolver = current.resolvers.get(key);
30333
30334        if (resolver != null) {
30335          resolutions = resolutions.concat(
30336          /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
30337          buildAllResponse(resolver, current, requestor));
30338        }
30339
30340        current = current.parent;
30341      }
30342
30343      return resolutions;
30344    } else {
30345      while (current != null) {
30346        resolver = current.resolvers.get(key);
30347
30348        if (resolver == null) {
30349          current = current.parent;
30350
30351          if (current == null) {
30352            return _fastElement.emptyArray;
30353          }
30354        } else {
30355          return buildAllResponse(resolver, current, requestor);
30356        }
30357      }
30358    }
30359
30360    return _fastElement.emptyArray;
30361  }
30362
30363  getFactory(Type) {
30364    let factory = factories.get(Type);
30365
30366    if (factory === void 0) {
30367      if (isNativeFunction(Type)) {
30368        throw new Error(`${Type.name} is a native function and therefore cannot be safely constructed by DI. If this is intentional, please use a callback or cachedCallback resolver.`);
30369      }
30370
30371      factories.set(Type, factory = new FactoryImpl(Type, DI.getDependencies(Type)));
30372    }
30373
30374    return factory;
30375  }
30376
30377  registerFactory(key, factory) {
30378    factories.set(key, factory);
30379  }
30380
30381  createChild(config) {
30382    return new ContainerImpl(null, Object.assign({}, this.config, config, {
30383      parentLocator: () => this
30384    }));
30385  }
30386
30387  jitRegister(keyAsValue, handler) {
30388    if (typeof keyAsValue !== "function") {
30389      throw new Error(`Attempted to jitRegister something that is not a constructor: '${keyAsValue}'. Did you forget to register this dependency?`);
30390    }
30391
30392    if (InstrinsicTypeNames.has(keyAsValue.name)) {
30393      throw new Error(`Attempted to jitRegister an intrinsic type: ${keyAsValue.name}. Did you forget to add @inject(Key)`);
30394    }
30395
30396    if (isRegistry(keyAsValue)) {
30397      const registrationResolver = keyAsValue.register(handler);
30398
30399      if (!(registrationResolver instanceof Object) || registrationResolver.resolve == null) {
30400        const newResolver = handler.resolvers.get(keyAsValue);
30401
30402        if (newResolver != void 0) {
30403          return newResolver;
30404        }
30405
30406        throw new Error("A valid resolver was not returned from the static register method");
30407      }
30408
30409      return registrationResolver;
30410    } else if (keyAsValue.$isInterface) {
30411      throw new Error(`Attempted to jitRegister an interface: ${keyAsValue.friendlyName}`);
30412    } else {
30413      const resolver = this.config.defaultResolver(keyAsValue, handler);
30414      handler.resolvers.set(keyAsValue, resolver);
30415      return resolver;
30416    }
30417  }
30418
30419}
30420
30421exports.ContainerImpl = ContainerImpl;
30422const cache = new WeakMap();
30423
30424function cacheCallbackResult(fun) {
30425  return function (handler, requestor, resolver) {
30426    if (cache.has(resolver)) {
30427      return cache.get(resolver);
30428    }
30429
30430    const t = fun(handler, requestor, resolver);
30431    cache.set(resolver, t);
30432    return t;
30433  };
30434}
30435/**
30436 * You can use the resulting Registration of any of the factory methods
30437 * to register with the container.
30438 *
30439 * @example
30440 * ```
30441 * class Foo {}
30442 * const container = DI.createContainer();
30443 * container.register(Registration.instance(Foo, new Foo()));
30444 * container.get(Foo);
30445 * ```
30446 *
30447 * @public
30448 */
30449
30450
30451const Registration = Object.freeze({
30452  /**
30453   * Allows you to pass an instance.
30454   * Every time you request this {@link Key} you will get this instance back.
30455   *
30456   * @example
30457   * ```
30458   * Registration.instance(Foo, new Foo()));
30459   * ```
30460   *
30461   * @param key - The key to register the instance under.
30462   * @param value - The instance to return when the key is requested.
30463   */
30464  instance(key, value) {
30465    return new ResolverImpl(key, 0
30466    /* instance */
30467    , value);
30468  },
30469
30470  /**
30471   * Creates an instance from the class.
30472   * Every time you request this {@link Key} you will get the same one back.
30473   *
30474   * @example
30475   * ```
30476   * Registration.singleton(Foo, Foo);
30477   * ```
30478   *
30479   * @param key - The key to register the singleton under.
30480   * @param value - The class to instantiate as a singleton when first requested.
30481   */
30482  singleton(key, value) {
30483    return new ResolverImpl(key, 1
30484    /* singleton */
30485    , value);
30486  },
30487
30488  /**
30489   * Creates an instance from a class.
30490   * Every time you request this {@link Key} you will get a new instance.
30491   *
30492   * @example
30493   * ```
30494   * Registration.instance(Foo, Foo);
30495   * ```
30496   *
30497   * @param key - The key to register the instance type under.
30498   * @param value - The class to instantiate each time the key is requested.
30499   */
30500  transient(key, value) {
30501    return new ResolverImpl(key, 2
30502    /* transient */
30503    , value);
30504  },
30505
30506  /**
30507   * Delegates to a callback function to provide the dependency.
30508   * Every time you request this {@link Key} the callback will be invoked to provide
30509   * the dependency.
30510   *
30511   * @example
30512   * ```
30513   * Registration.callback(Foo, () => new Foo());
30514   * Registration.callback(Bar, (c: Container) => new Bar(c.get(Foo)));
30515   * ```
30516   *
30517   * @param key - The key to register the callback for.
30518   * @param callback - The function that is expected to return the dependency.
30519   */
30520  callback(key, callback) {
30521    return new ResolverImpl(key, 3
30522    /* callback */
30523    , callback);
30524  },
30525
30526  /**
30527   * Delegates to a callback function to provide the dependency and then caches the
30528   * dependency for future requests.
30529   *
30530   * @example
30531   * ```
30532   * Registration.cachedCallback(Foo, () => new Foo());
30533   * Registration.cachedCallback(Bar, (c: Container) => new Bar(c.get(Foo)));
30534   * ```
30535   *
30536   * @param key - The key to register the callback for.
30537   * @param callback - The function that is expected to return the dependency.
30538   * @remarks
30539   * If you pass the same Registration to another container, the same cached value will be used.
30540   * Should all references to the resolver returned be removed, the cache will expire.
30541   */
30542  cachedCallback(key, callback) {
30543    return new ResolverImpl(key, 3
30544    /* callback */
30545    , cacheCallbackResult(callback));
30546  },
30547
30548  /**
30549   * Creates an alternate {@link Key} to retrieve an instance by.
30550   *
30551   * @example
30552   * ```
30553   * Register.singleton(Foo, Foo)
30554   * Register.aliasTo(Foo, MyFoos);
30555   *
30556   * container.getAll(MyFoos) // contains an instance of Foo
30557   * ```
30558   *
30559   * @param originalKey - The original key that has been registered.
30560   * @param aliasKey - The alias to the original key.
30561   */
30562  aliasTo(originalKey, aliasKey) {
30563    return new ResolverImpl(aliasKey, 5
30564    /* alias */
30565    , originalKey);
30566  }
30567
30568});
30569/** @internal */
30570
30571exports.Registration = Registration;
30572
30573function validateKey(key) {

30574  if (key === null || key === void 0) {
30575    throw new Error("key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?");
30576  }
30577}
30578
30579function buildAllResponse(resolver, handler, requestor) {
30580  if (resolver instanceof ResolverImpl && resolver.strategy === 4
30581  /* array */
30582  ) {
30583    const state = resolver.state;
30584    let i = state.length;
30585    const results = new Array(i);
30586
30587    while (i--) {
30588      results[i] = state[i].resolve(handler, requestor);
30589    }
30590
30591    return results;
30592  }
30593
30594  return [resolver.resolve(handler, requestor)];
30595}
30596
30597const defaultFriendlyName = "(anonymous)";
30598
30599function isObject(value) {
30600  return typeof value === "object" && value !== null || typeof value === "function";
30601}
30602/**
30603 * Determine whether the value is a native function.
30604 *
30605 * @param fn - The function to check.
30606 * @returns `true` is the function is a native function, otherwise `false`
30607 */
30608
30609
30610const isNativeFunction = function () {
30611  const lookup = new WeakMap();
30612  let isNative = false;
30613  let sourceText = "";
30614  let i = 0;
30615  return function (fn) {
30616    isNative = lookup.get(fn);
30617
30618    if (isNative === void 0) {
30619      sourceText = fn.toString();
30620      i = sourceText.length; // http://www.ecma-international.org/ecma-262/#prod-NativeFunction
30621
30622      isNative = // 29 is the length of 'function () { [native code] }' which is the smallest length of a native function string
30623      i >= 29 && // 100 seems to be a safe upper bound of the max length of a native function. In Chrome and FF it's 56, in Edge it's 61.
30624      i <= 100 && // This whole heuristic *could* be tricked by a comment. Do we need to care about that?
30625      sourceText.charCodeAt(i - 1) === 0x7d && // }
30626      // TODO: the spec is a little vague about the precise constraints, so we do need to test this across various browsers to make sure just one whitespace is a safe assumption.
30627      sourceText.charCodeAt(i - 2) <= 0x20 && // whitespace
30628      sourceText.charCodeAt(i - 3) === 0x5d && // ]
30629      sourceText.charCodeAt(i - 4) === 0x65 && // e
30630      sourceText.charCodeAt(i - 5) === 0x64 && // d
30631      sourceText.charCodeAt(i - 6) === 0x6f && // o
30632      sourceText.charCodeAt(i - 7) === 0x63 && // c
30633      sourceText.charCodeAt(i - 8) === 0x20 && //
30634      sourceText.charCodeAt(i - 9) === 0x65 && // e
30635      sourceText.charCodeAt(i - 10) === 0x76 && // v
30636      sourceText.charCodeAt(i - 11) === 0x69 && // i
30637      sourceText.charCodeAt(i - 12) === 0x74 && // t
30638      sourceText.charCodeAt(i - 13) === 0x61 && // a
30639      sourceText.charCodeAt(i - 14) === 0x6e && // n
30640      sourceText.charCodeAt(i - 15) === 0x58; // [
30641
30642      lookup.set(fn, isNative);
30643    }
30644
30645    return isNative;
30646  };
30647}();
30648
30649const isNumericLookup = {};
30650
30651function isArrayIndex(value) {
30652  switch (typeof value) {
30653    case "number":
30654      return value >= 0 && (value | 0) === value;
30655
30656    case "string":
30657      {
30658        const result = isNumericLookup[value];
30659
30660        if (result !== void 0) {
30661          return result;
30662        }
30663
30664        const length = value.length;
30665
30666        if (length === 0) {
30667          return isNumericLookup[value] = false;
30668        }
30669
30670        let ch = 0;
30671
30672        for (let i = 0; i < length; ++i) {
30673          ch = value.charCodeAt(i);
30674
30675          if (i === 0 && ch === 0x30 && length > 1
30676          /* must not start with 0 */
30677          || ch < 0x30
30678          /* 0 */
30679          || ch > 0x39
30680          /* 9 */
30681          ) {
30682            return isNumericLookup[value] = false;
30683          }
30684        }
30685
30686        return isNumericLookup[value] = true;
30687      }
30688
30689    default:
30690      return false;
30691  }
30692}
30693
30694},{"@microsoft/fast-element":151}],233:[function(require,module,exports){
30695"use strict";
30696
30697Object.defineProperty(exports, "__esModule", {
30698  value: true
30699});
30700
30701var _di = require("./di.js");
30702
30703Object.keys(_di).forEach(function (key) {
30704  if (key === "default" || key === "__esModule") return;
30705  if (key in exports && exports[key] === _di[key]) return;
30706  Object.defineProperty(exports, key, {
30707    enumerable: true,
30708    get: function () {
30709      return _di[key];
30710    }
30711  });
30712});
30713
30714},{"./di.js":232}],234:[function(require,module,exports){
30715"use strict";
30716
30717Object.defineProperty(exports, "__esModule", {
30718  value: true
30719});
30720exports.Dialog = void 0;
30721
30722var _tslib = require("tslib");
30723
30724var _fastElement = require("@microsoft/fast-element");
30725
30726var _fastWebUtilities = require("@microsoft/fast-web-utilities");
30727
30728var _tabbable = require("tabbable");
30729

vendor: 4,793 bytes, lines 30730-30923

30730var _foundationElement = require("../foundation-element/foundation-element.js");
30731
30732/**
30733 * A Switch Custom HTML Element.
30734 * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#dialog | ARIA dialog }.
30735 *
30736 * @slot - The default slot for the dialog content
30737 * @csspart positioning-region - A wrapping element used to center the dialog and position the modal overlay
30738 * @csspart overlay - The modal dialog overlay
30739 * @csspart control - The dialog element
30740 * @fires cancel - Fires a custom 'cancel' event when the modal overlay is clicked
30741 * @fires close - Fires a custom 'close' event when the dialog is hidden
30742 *
30743 * @public
30744 */
30745class Dialog extends _foundationElement.FoundationElement {
30746  constructor() {
30747    super(...arguments);
30748    /**
30749     * Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal
30750     * overlay.  Clicks on the overlay will cause the dialog to emit a "dismiss" event.
30751     * @public
30752     * @defaultValue - true
30753     * @remarks
30754     * HTML Attribute: modal
30755     */
30756
30757    this.modal = true;
30758    /**
30759     * The hidden state of the element.
30760     *
30761     * @public
30762     * @defaultValue - false
30763     * @remarks
30764     * HTML Attribute: hidden
30765     */
30766
30767    this.hidden = false;
30768    /**
30769     * Indicates that the dialog should trap focus.
30770     *
30771     * @public
30772     * @defaultValue - true
30773     * @remarks
30774     * HTML Attribute: trap-focus
30775     */
30776
30777    this.trapFocus = true;
30778
30779    this.trapFocusChanged = () => {
30780      if (this.$fastController.isConnected) {
30781        this.updateTrapFocus();
30782      }
30783    };
30784    /**
30785     * @internal
30786     */
30787
30788
30789    this.isTrappingFocus = false;
30790
30791    this.handleDocumentKeydown = e => {
30792      if (!e.defaultPrevented && !this.hidden) {
30793        switch (e.key) {
30794          case _fastWebUtilities.keyEscape:
30795            this.dismiss();
30796            e.preventDefault();
30797            break;
30798
30799          case _fastWebUtilities.keyTab:
30800            this.handleTabKeyDown(e);
30801            break;
30802        }
30803      }
30804    };
30805
30806    this.handleDocumentFocus = e => {
30807      if (!e.defaultPrevented && this.shouldForceFocus(e.target)) {
30808        this.focusFirstElement();
30809        e.preventDefault();
30810      }
30811    };
30812
30813    this.handleTabKeyDown = e => {
30814      if (!this.trapFocus || this.hidden) {
30815        return;
30816      }
30817
30818      const bounds = this.getTabQueueBounds();
30819
30820      if (bounds.length === 0) {
30821        return;
30822      }
30823
30824      if (bounds.length === 1) {
30825        // keep focus on single element
30826        bounds[0].focus();
30827        e.preventDefault();
30828        return;
30829      }
30830
30831      if (e.shiftKey && e.target === bounds[0]) {
30832        bounds[bounds.length - 1].focus();
30833        e.preventDefault();
30834      } else if (!e.shiftKey && e.target === bounds[bounds.length - 1]) {
30835        bounds[0].focus();
30836        e.preventDefault();
30837      }
30838
30839      return;
30840    };
30841
30842    this.getTabQueueBounds = () => {
30843      const bounds = [];
30844      return Dialog.reduceTabbableItems(bounds, this);
30845    };
30846    /**
30847     * focus on first element of tab queue
30848     */
30849
30850
30851    this.focusFirstElement = () => {
30852      const bounds = this.getTabQueueBounds();
30853
30854      if (bounds.length > 0) {
30855        bounds[0].focus();
30856      } else {
30857        if (this.dialog instanceof HTMLElement) {
30858          this.dialog.focus();
30859        }
30860      }
30861    };
30862    /**
30863     * we should only focus if focus has not already been brought to the dialog
30864     */
30865
30866
30867    this.shouldForceFocus = currentFocusElement => {
30868      return this.isTrappingFocus && !this.contains(currentFocusElement);
30869    };
30870    /**
30871     * we should we be active trapping focus
30872     */
30873
30874
30875    this.shouldTrapFocus = () => {
30876      return this.trapFocus && !this.hidden;
30877    };
30878    /**
30879     *
30880     *
30881     * @internal
30882     */
30883
30884
30885    this.updateTrapFocus = shouldTrapFocusOverride => {
30886      const shouldTrapFocus = shouldTrapFocusOverride === undefined ? this.shouldTrapFocus() : shouldTrapFocusOverride;
30887
30888      if (shouldTrapFocus && !this.isTrappingFocus) {
30889        this.isTrappingFocus = true; // Add an event listener for focusin events if we are trapping focus
30890
30891        document.addEventListener("focusin", this.handleDocumentFocus);
30892
30893        _fastElement.DOM.queueUpdate(() => {
30894          if (this.shouldForceFocus(document.activeElement)) {
30895            this.focusFirstElement();
30896          }
30897        });
30898      } else if (!shouldTrapFocus && this.isTrappingFocus) {
30899        this.isTrappingFocus = false; // remove event listener if we are not trapping focus
30900
30901        document.removeEventListener("focusin", this.handleDocumentFocus);
30902      }
30903    };
30904  }
30905  /**
30906   * @internal
30907   */
30908
30909
30910  dismiss() {
30911    this.$emit("dismiss"); // implement `<dialog>` interface
30912
30913    this.$emit("cancel");
30914  }
30915  /**
30916   * The method to show the dialog.
30917   *
30918   * @public
30919   */
30920
30921
30922  show() {
30923    this.hidden = false;

30924  }
30925  /**
30926   * The method to hide the dialog.
30927   *
30928   * @public
30929   */
30930
30931
30932  hide() {
30933    this.hidden = true; // implement `<dialog>` interface
30934
30935    this.$emit("close");
30936  }
30937  /**
30938   * @internal
30939   */
30940
30941
30942  connectedCallback() {
30943    super.connectedCallback();
30944    document.addEventListener("keydown", this.handleDocumentKeydown);
30945    this.notifier = _fastElement.Observable.getNotifier(this);
30946    this.notifier.subscribe(this, "hidden");
30947    this.updateTrapFocus();
30948  }
30949  /**
30950   * @internal
30951   */
30952
30953
30954  disconnectedCallback() {
30955    super.disconnectedCallback(); // remove keydown event listener
30956
30957    document.removeEventListener("keydown", this.handleDocumentKeydown); // if we are trapping focus remove the focusin listener
30958
30959    this.updateTrapFocus(false);
30960    this.notifier.unsubscribe(this, "hidden");
30961  }
30962  /**
30963   * @internal
30964   */
30965
30966
30967  handleChange(source, propertyName) {
30968    switch (propertyName) {
30969      case "hidden":
30970        this.updateTrapFocus();
30971        break;
30972
30973      default:
30974        break;
30975    }
30976  }
30977  /**
30978   * Reduce a collection to only its focusable elements.
30979   *
30980   * @param elements - Collection of elements to reduce
30981   * @param element - The current element
30982   *
30983   * @internal
30984   */
30985
30986
30987  static reduceTabbableItems(elements, element) {
30988    if (element.getAttribute("tabindex") === "-1") {
30989      return elements;
30990    }
30991
30992    if ((0, _tabbable.isTabbable)(element) || Dialog.isFocusableFastElement(element) && Dialog.hasTabbableShadow(element)) {
30993      elements.push(element);
30994      return elements;
30995    }
30996
30997    if (element.childElementCount) {
30998      return elements.concat(Array.from(element.children).reduce(Dialog.reduceTabbableItems, []));
30999    }
31000
31001    return elements;
31002  }
31003  /**
31004   * Test if element is focusable fast element
31005   *
31006   * @param element - The element to check
31007   *
31008   * @internal
31009   */
31010
31011
31012  static isFocusableFastElement(element) {
31013    var _a, _b;
31014
31015    return !!((_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus);
31016  }
31017  /**
31018   * Test if the element has a focusable shadow
31019   *
31020   * @param element - The element to check
31021   *
31022   * @internal
31023   */
31024
31025
31026  static hasTabbableShadow(element) {
31027    var _a, _b;
31028
31029    return Array.from((_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("*")) !== null && _b !== void 0 ? _b : []).some(x => {
31030      return (0, _tabbable.isTabbable)(x);
31031    });
31032  }
31033
31034}
31035
31036exports.Dialog = Dialog;
31037(0, _tslib.__decorate)([(0, _fastElement.attr)({
31038  mode: "boolean"
31039})], Dialog.prototype, "modal", void 0);
31040(0, _tslib.__decorate)([(0, _fastElement.attr)({
31041  mode: "boolean"
31042})], Dialog.prototype, "hidden", void 0);
31043(0, _tslib.__decorate)([(0, _fastElement.attr)({
31044  attribute: "trap-focus",
31045  mode: "boolean"
31046})], Dialog.prototype, "trapFocus", void 0);
31047(0, _tslib.__decorate)([(0, _fastElement.attr)({
31048  attribute: "aria-describedby"
31049})], Dialog.prototype, "ariaDescribedby", void 0);
31050(0, _tslib.__decorate)([(0, _fastElement.attr)({
31051  attribute: "aria-labelledby"
31052})], Dialog.prototype, "ariaLabelledby", void 0);
31053(0, _tslib.__decorate)([(0, _fastElement.attr)({
31054  attribute: "aria-label"
31055})], Dialog.prototype, "ariaLabel", void 0);
31056
31057},{"../foundation-element/foundation-element.js":251,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tabbable":465,"tslib":372}],235:[function(require,module,exports){
31058"use strict";
31059
31060Object.defineProperty(exports, "__esModule", {
31061  value: true
31062});
31063exports.dialogTemplate = void 0;
31064
31065var _fastElement = require("@microsoft/fast-element");
31066
31067/**
31068 * The template for the {@link @microsoft/fast-foundation#Dialog} component.
31069 * @public
31070 */
31071const dialogTemplate = (context, definition) => (0, _fastElement.html)`
31072    <div class="positioning-region" part="positioning-region">
31073        ${(0, _fastElement.when)(x => x.modal, (0, _fastElement.html)`
31074                <div
31075                    class="overlay"
31076                    part="overlay"
31077                    role="presentation"
31078                    @click="${x => x.dismiss()}"
31079                ></div>
31080            `)}
31081        <div
31082            role="dialog"
31083            tabindex="-1"
31084            class="control"
31085            part="control"
31086            aria-modal="${x => x.modal}"
31087            aria-describedby="${x => x.ariaDescribedby}"
31088            aria-labelledby="${x => x.ariaLabelledby}"
31089            aria-label="${x => x.ariaLabel}"
31090            ${(0, _fastElement.ref)("dialog")}
31091        >
31092            <slot></slot>
31093        </div>
31094    </div>
31095`;
31096
31097exports.dialogTemplate = dialogTemplate;
31098
31099},{"@microsoft/fast-element":151}],236:[function(require,module,exports){
31100"use strict";
31101
31102Object.defineProperty(exports, "__esModule", {
31103  value: true
31104});
31105
31106var _dialogTemplate = require("./dialog.template.js");
31107
31108Object.keys(_dialogTemplate).forEach(function (key) {

31109  if (key === "default" || key === "__esModule") return;
31110  if (key in exports && exports[key] === _dialogTemplate[key]) return;
31111  Object.defineProperty(exports, key, {
31112    enumerable: true,
31113    get: function () {
31114      return _dialogTemplate[key];
31115    }
31116  });
31117});
31118
31119var _dialog = require("./dialog.js");
31120
31121Object.keys(_dialog).forEach(function (key) {
31122  if (key === "default" || key === "__esModule") return;
31123  if (key in exports && exports[key] === _dialog[key]) return;
31124  Object.defineProperty(exports, key, {
31125    enumerable: true,
31126    get: function () {
31127      return _dialog[key];
31128    }
31129  });
31130});
31131
31132},{"./dialog.js":234,"./dialog.template.js":235}],237:[function(require,module,exports){
31133"use strict";
31134
31135Object.defineProperty(exports, "__esModule", {
31136  value: true
31137});
31138exports.reflectAttributes = reflectAttributes;
31139
31140var _fastElement = require("@microsoft/fast-element");
31141
31142const observer = new MutationObserver(mutations => {
31143  for (const mutation of mutations) {
31144    AttributeReflectionSubscriptionSet.getOrCreateFor(mutation.target).notify(mutation.attributeName);
31145  }
31146});
31147
31148class AttributeReflectionSubscriptionSet extends _fastElement.SubscriberSet {
31149  constructor(source) {
31150    super(source);
31151    this.watchedAttributes = new Set();
31152    AttributeReflectionSubscriptionSet.subscriberCache.set(source, this);
31153  }
31154
31155  subscribe(subscriber) {
31156    super.subscribe(subscriber);
31157
31158    if (!this.watchedAttributes.has(subscriber.attributes)) {
31159      this.watchedAttributes.add(subscriber.attributes);
31160      this.observe();
31161    }
31162  }
31163
31164  unsubscribe(subscriber) {
31165    super.unsubscribe(subscriber);
31166
31167    if (this.watchedAttributes.has(subscriber.attributes)) {
31168      this.watchedAttributes.delete(subscriber.attributes);
31169      this.observe();
31170    }
31171  }
31172
31173  static getOrCreateFor(source) {
31174    return this.subscriberCache.get(source) || new AttributeReflectionSubscriptionSet(source);
31175  }
31176
31177  observe() {
31178    const attributeFilter = [];
31179
31180    for (const attributes of this.watchedAttributes.values()) {
31181      for (let i = 0; i < attributes.length; i++) {
31182        attributeFilter.push(attributes[i]);
31183      }
31184    }
31185
31186    observer.observe(this.source, {
31187      attributeFilter
31188    });
31189  }
31190
31191}
31192
31193AttributeReflectionSubscriptionSet.subscriberCache = new WeakMap();
31194
31195class ReflectAttrBehavior {
31196  constructor(target, attributes) {
31197    this.target = target;
31198    this.attributes = Object.freeze(attributes);
31199  }
31200
31201  bind(source) {
31202    AttributeReflectionSubscriptionSet.getOrCreateFor(source).subscribe(this); // Reflect any existing attributes because MutationObserver will only
31203    // handle *changes* to attributes.
31204
31205    if (source.hasAttributes()) {
31206      for (let i = 0; i < source.attributes.length; i++) {
31207        this.handleChange(source, source.attributes[i].name);
31208      }
31209    }
31210  }
31211
31212  unbind(source) {
31213    AttributeReflectionSubscriptionSet.getOrCreateFor(source).unsubscribe(this);
31214  }
31215
31216  handleChange(source, arg) {
31217    // In cases where two or more ReflectAttrBehavior instances are bound to the same element,
31218    // they will share a Subscriber implementation. In that case, this handle change can be invoked with
31219    // attributes an instances doesn't need to reflect. This guards against reflecting attrs
31220    // that shouldn't be reflected.
31221    if (this.attributes.includes(arg)) {
31222      _fastElement.DOM.setAttribute(this.target, arg, source.getAttribute(arg));
31223    }
31224  }
31225
31226}
31227/**
31228 * Reflects attributes from the host element to the target element of the directive.
31229 * @param attributes - The attributes to reflect
31230 *
31231 * @beta
31232 * @example
31233 * ```ts
31234 * const template = html`
31235 *     <button
31236 *         ${reflectAttributes("aria-label", "aria-describedby")}
31237 *     >
31238 *          hello world
31239 *     </button
31240 * `
31241 * ```
31242 */
31243
31244
31245function reflectAttributes(...attributes) {
31246  return new _fastElement.AttachedBehaviorHTMLDirective("fast-reflect-attr", ReflectAttrBehavior, attributes);
31247}
31248
31249},{"@microsoft/fast-element":151}],238:[function(require,module,exports){
31250"use strict";
31251
31252Object.defineProperty(exports, "__esModule", {
31253  value: true
31254});
31255exports.Disclosure = void 0;
31256
31257var _tslib = require("tslib");
31258
31259var _fastElement = require("@microsoft/fast-element");
31260

31261var _foundationElement = require("../foundation-element/foundation-element.js");
31262
31263/**
31264 * A Disclosure Custom HTML Element.
31265 * Based largely on the {@link https://w3c.github.io/aria-practices/#disclosure | disclosure element }.
31266 *
31267 * @slot start - Content which can be provided before the summary content
31268 * @slot end - Content which can be provided after the summary content
31269 * @slot title - The summary content
31270 * @slot - The default slot for the disclosure content
31271 * @fires toggle - fires a toggle event when the summary is toggled
31272 *
31273 * @public
31274 */
31275class Disclosure extends _foundationElement.FoundationElement {
31276  /**
31277   * @internal
31278   */
31279  connectedCallback() {
31280    super.connectedCallback();
31281    this.setup();
31282  }
31283  /**
31284   * @internal
31285   */
31286
31287
31288  disconnectedCallback() {
31289    super.disconnectedCallback();
31290    this.details.removeEventListener("toggle", this.onToggle);
31291  }
31292  /**
31293   * Show extra content.
31294   */
31295
31296
31297  show() {
31298    this.details.open = true;
31299  }
31300  /**
31301   * Hide extra content.
31302   */
31303
31304
31305  hide() {
31306    this.details.open = false;
31307  }
31308  /**
31309   * Toggle the current(expanded/collapsed) state.
31310   */
31311
31312
31313  toggle() {
31314    this.details.open = !this.details.open;
31315  }
31316  /**
31317   * Register listener and set default disclosure mode
31318   */
31319
31320
31321  setup() {
31322    this.onToggle = this.onToggle.bind(this);
31323    this.details.addEventListener("toggle", this.onToggle);
31324
31325    if (this.expanded) {
31326      this.show();
31327    }
31328  }
31329  /**
31330   * Update the aria attr and fire `toggle` event
31331   */
31332
31333
31334  onToggle() {
31335    this.expanded = this.details.open;
31336    this.$emit("toggle");
31337  }
31338
31339}
31340
31341exports.Disclosure = Disclosure;
31342(0, _tslib.__decorate)([(0, _fastElement.attr)({
31343  mode: "boolean"
31344})], Disclosure.prototype, "expanded", void 0);
31345(0, _tslib.__decorate)([_fastElement.attr], Disclosure.prototype, "title", void 0);
31346
31347},{"../foundation-element/foundation-element.js":251,"@microsoft/fast-element":151,"tslib":372}],239:[function(require,module,exports){
31348"use strict";
31349
31350Object.defineProperty(exports, "__esModule", {
31351  value: true
31352});
31353exports.disclosureTemplate = void 0;
31354
31355var _fastElement = require("@microsoft/fast-element");
31356
31357/**
31358 * The template for the {@link @microsoft/fast-foundation#Disclosure} component.
31359 * @public
31360 */
31361const disclosureTemplate = (context, definition) => (0, _fastElement.html)`
31362    <details class="disclosure" ${(0, _fastElement.ref)("details")}>
31363        <summary
31364            class="invoker"
31365            role="button"
31366            aria-controls="disclosure-content"
31367            aria-expanded="${x => x.expanded}"
31368        >
31369            <slot name="start"></slot>
31370            <slot name="title">${x => x.title}</slot>
31371            <slot name="end"></slot>
31372        </summary>
31373        <div id="disclosure-content"><slot></slot></div>
31374    </details>
31375`;
31376
31377exports.disclosureTemplate = disclosureTemplate;
31378
31379},{"@microsoft/fast-element":151}],240:[function(require,module,exports){
31380"use strict";
31381
31382Object.defineProperty(exports, "__esModule", {
31383  value: true
31384});
31385
31386var _disclosureTemplate = require("./disclosure.template.js");
31387
31388Object.keys(_disclosureTemplate).forEach(function (key) {
31389  if (key === "default" || key === "__esModule") return;
31390  if (key in exports && exports[key] === _disclosureTemplate[key]) return;
31391  Object.defineProperty(exports, key, {
31392    enumerable: true,
31393    get: function () {
31394      return _disclosureTemplate[key];
31395    }
31396  });
31397});
31398
31399var _disclosure = require("./disclosure.js");
31400
31401Object.keys(_disclosure).forEach(function (key) {
31402  if (key === "default" || key === "__esModule") return;
31403  if (key in exports && exports[key] === _disclosure[key]) return;
31404  Object.defineProperty(exports, key, {
31405    enumerable: true,
31406    get: function () {
31407      return _disclosure[key];
31408    }
31409  });
31410});
31411
31412},{"./disclosure.js":238,"./disclosure.template.js":239}],241:[function(require,module,exports){
31413"use strict";
31414
31415Object.defineProperty(exports, "__esModule", {
31416  value: true
31417});
31418exports.Divider = void 0;
31419Object.defineProperty(exports, "DividerRole", {
31420  enumerable: true,
31421  get: function () {
31422    return _dividerOptions.DividerRole;
31423  }
31424});
31425
31426var _tslib = require("tslib");
31427
31428var _fastElement = require("@microsoft/fast-element");
31429
31430var _fastWebUtilities = require("@microsoft/fast-web-utilities");
31431

31432var _foundationElement = require("../foundation-element/foundation-element.js");
31433
31434var _dividerOptions = require("./divider.options.js");
31435
31436/**
31437 * A Divider Custom HTML Element.
31438 * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
31439 *
31440 * @public
31441 */
31442class Divider extends _foundationElement.FoundationElement {
31443  constructor() {
31444    super(...arguments);
31445    /**
31446     * The role of the element.
31447     *
31448     * @public
31449     * @remarks
31450     * HTML Attribute: role
31451     */
31452
31453    this.role = _dividerOptions.DividerRole.separator;
31454    /**
31455     * The orientation of the divider.
31456     *
31457     * @public
31458     * @remarks
31459     * HTML Attribute: orientation
31460     */
31461
31462    this.orientation = _fastWebUtilities.Orientation.horizontal;
31463  }
31464
31465}
31466
31467exports.Divider = Divider;
31468(0, _tslib.__decorate)([_fastElement.attr], Divider.prototype, "role", void 0);
31469(0, _tslib.__decorate)([_fastElement.attr], Divider.prototype, "orientation", void 0);
31470
31471},{"../foundation-element/foundation-element.js":251,"./divider.options.js":242,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],242:[function(require,module,exports){
31472"use strict";
31473
31474Object.defineProperty(exports, "__esModule", {
31475  value: true
31476});
31477exports.DividerRole = void 0;
31478
31479/**
31480 * Divider roles
31481 * @public
31482 */
31483const DividerRole = {
31484  /**
31485   * The divider semantically separates content
31486   */
31487  separator: "separator",
31488
31489  /**
31490   * The divider has no semantic value and is for visual presentation only.
31491   */
31492  presentation: "presentation"
31493};
31494exports.DividerRole = DividerRole;
31495
31496},{}],243:[function(require,module,exports){
31497"use strict";
31498
31499Object.defineProperty(exports, "__esModule", {
31500  value: true
31501});
31502exports.dividerTemplate = void 0;
31503
31504var _fastElement = require("@microsoft/fast-element");
31505
31506/**
31507 * The template for the {@link @microsoft/fast-foundation#Divider} component.
31508 * @public
31509 */
31510const dividerTemplate = (context, definition) => (0, _fastElement.html)`
31511    <template role="${x => x.role}" aria-orientation="${x => x.orientation}"></template>
31512`;
31513
31514exports.dividerTemplate = dividerTemplate;
31515
31516},{"@microsoft/fast-element":151}],244:[function(require,module,exports){
31517"use strict";
31518
31519Object.defineProperty(exports, "__esModule", {
31520  value: true
31521});
31522
31523var _dividerTemplate = require("./divider.template.js");
31524
31525Object.keys(_dividerTemplate).forEach(function (key) {
31526  if (key === "default" || key === "__esModule") return;
31527  if (key in exports && exports[key] === _dividerTemplate[key]) return;
31528  Object.defineProperty(exports, key, {
31529    enumerable: true,
31530    get: function () {
31531      return _dividerTemplate[key];
31532    }
31533  });
31534});
31535
31536var _divider = require("./divider.js");
31537
31538Object.keys(_divider).forEach(function (key) {
31539  if (key === "default" || key === "__esModule") return;
31540  if (key in exports && exports[key] === _divider[key]) return;
31541  Object.defineProperty(exports, key, {
31542    enumerable: true,
31543    get: function () {
31544      return _divider[key];
31545    }
31546  });
31547});
31548
31549},{"./divider.js":241,"./divider.template.js":243}],245:[function(require,module,exports){
31550"use strict";
31551
31552Object.defineProperty(exports, "__esModule", {
31553  value: true
31554});
31555exports.Flipper = void 0;
31556Object.defineProperty(exports, "FlipperDirection", {
31557  enumerable: true,
31558  get: function () {
31559    return _flipperOptions.FlipperDirection;
31560  }
31561});
31562
31563var _tslib = require("tslib");
31564
31565var _fastElement = require("@microsoft/fast-element");
31566
31567var _foundationElement = require("../foundation-element/foundation-element.js");
31568
31569var _flipperOptions = require("./flipper.options.js");
31570
31571/**
31572 * A Flipper Custom HTML Element.
31573 * Flippers are a form of button that implies directional content navigation, such as in a carousel.
31574 *
31575 * @slot next - The next flipper content
31576 * @slot previous - The previous flipper content
31577 * @csspart next - Wraps the next flipper content
31578 * @csspart previous - Wraps the previous flipper content
31579 * @fires click - Fires a custom 'click' event when Enter or Space is invoked via keyboard and the flipper is exposed to assistive technologies.
31580 *
31581 * @public
31582 */
31583class Flipper extends _foundationElement.FoundationElement {
31584  constructor() {
31585    super(...arguments);
31586    /**
31587     * Indicates the flipper should be hidden from assistive technology. Because flippers are often supplementary navigation, they are often hidden from assistive technology.
31588     *
31589     * @public
31590     * @defaultValue - true
31591     * @remarks
31592     * HTML Attribute: aria-hidden
31593     */
31594
31595    this.hiddenFromAT = true;
31596    /**

31597     * The direction that the flipper implies navigating.
31598     *
31599     * @public
31600     * @remarks
31601     * HTML Attribute: direction
31602     */
31603
31604    this.direction = _flipperOptions.FlipperDirection.next;
31605  }
31606  /**
31607   * Simulate a click event when the flipper has focus and the user hits enter or space keys
31608   * Blur focus if the user hits escape key
31609   * @param e - Keyboard event
31610   * @public
31611   */
31612
31613
31614  keyupHandler(e) {
31615    if (!this.hiddenFromAT) {
31616      const key = e.key;
31617
31618      if (key === "Enter" || key === "Space") {
31619        this.$emit("click", e);
31620      }
31621
31622      if (key === "Escape") {
31623        this.blur();
31624      }
31625    }
31626  }
31627
31628}
31629
31630exports.Flipper = Flipper;
31631(0, _tslib.__decorate)([(0, _fastElement.attr)({
31632  mode: "boolean"
31633})], Flipper.prototype, "disabled", void 0);
31634(0, _tslib.__decorate)([(0, _fastElement.attr)({
31635  attribute: "aria-hidden",
31636  converter: _fastElement.booleanConverter
31637})], Flipper.prototype, "hiddenFromAT", void 0);
31638(0, _tslib.__decorate)([_fastElement.attr], Flipper.prototype, "direction", void 0);
31639
31640},{"../foundation-element/foundation-element.js":251,"./flipper.options.js":246,"@microsoft/fast-element":151,"tslib":372}],246:[function(require,module,exports){
31641"use strict";
31642
31643Object.defineProperty(exports, "__esModule", {
31644  value: true
31645});
31646exports.FlipperDirection = void 0;
31647
31648/**
31649 * The direction options for flipper.
31650 * @public
31651 */
31652const FlipperDirection = {
31653  next: "next",
31654  previous: "previous"
31655};
31656exports.FlipperDirection = FlipperDirection;
31657
31658},{}],247:[function(require,module,exports){
31659"use strict";
31660
31661Object.defineProperty(exports, "__esModule", {
31662  value: true
31663});
31664exports.flipperTemplate = void 0;
31665
31666var _fastElement = require("@microsoft/fast-element");
31667
31668var _flipperOptions = require("./flipper.options.js");
31669
31670/**
31671 * The template for the {@link @microsoft/fast-foundation#Flipper} component.
31672 * @public
31673 */
31674const flipperTemplate = (context, definition) => (0, _fastElement.html)`
31675    <template
31676        role="button"
31677        aria-disabled="${x => x.disabled ? true : void 0}"
31678        tabindex="${x => x.hiddenFromAT ? -1 : 0}"
31679        class="${x => x.direction} ${x => x.disabled ? "disabled" : ""}"
31680        @keyup="${(x, c) => x.keyupHandler(c.event)}"
31681    >
31682        ${(0, _fastElement.when)(x => x.direction === _flipperOptions.FlipperDirection.next, (0, _fastElement.html)`
31683                <span part="next" class="next">
31684                    <slot name="next">
31685                        ${definition.next || ""}
31686                    </slot>
31687                </span>
31688            `)}
31689        ${(0, _fastElement.when)(x => x.direction === _flipperOptions.FlipperDirection.previous, (0, _fastElement.html)`
31690                <span part="previous" class="previous">
31691                    <slot name="previous">
31692                        ${definition.previous || ""}
31693                    </slot>
31694                </span>
31695            `)}
31696    </template>
31697`;
31698
31699exports.flipperTemplate = flipperTemplate;
31700
31701},{"./flipper.options.js":246,"@microsoft/fast-element":151}],248:[function(require,module,exports){
31702"use strict";
31703
31704Object.defineProperty(exports, "__esModule", {
31705  value: true
31706});
31707
31708var _flipperTemplate = require("./flipper.template.js");
31709
31710Object.keys(_flipperTemplate).forEach(function (key) {
31711  if (key === "default" || key === "__esModule") return;
31712  if (key in exports && exports[key] === _flipperTemplate[key]) return;
31713  Object.defineProperty(exports, key, {
31714    enumerable: true,
31715    get: function () {
31716      return _flipperTemplate[key];
31717    }
31718  });
31719});
31720
31721var _flipper = require("./flipper.js");
31722
31723Object.keys(_flipper).forEach(function (key) {
31724  if (key === "default" || key === "__esModule") return;
31725  if (key in exports && exports[key] === _flipper[key]) return;
31726  Object.defineProperty(exports, key, {
31727    enumerable: true,
31728    get: function () {
31729      return _flipper[key];
31730    }
31731  });
31732});
31733
31734},{"./flipper.js":245,"./flipper.template.js":247}],249:[function(require,module,exports){
31735"use strict";
31736
31737Object.defineProperty(exports, "__esModule", {
31738  value: true
31739});
31740exports.CheckableFormAssociated = CheckableFormAssociated;
31741exports.FormAssociated = FormAssociated;
31742exports.supportsElementInternals = void 0;
31743
31744var _fastElement = require("@microsoft/fast-element");
31745
31746var _fastWebUtilities = require("@microsoft/fast-web-utilities");
31747
31748const proxySlotName = "form-associated-proxy";
31749const ElementInternalsKey = "ElementInternals";
31750/**
31751 * @alpha
31752 */
31753
31754const supportsElementInternals = ElementInternalsKey in window && "setFormValue" in window[ElementInternalsKey].prototype;
31755exports.supportsElementInternals = supportsElementInternals;
31756const InternalsMap = new WeakMap();
31757/**
31758 * Base function for providing Custom Element Form Association.
31759 *
31760 * @alpha
31761 */
31762
31763function FormAssociated(BaseCtor) {
31764  const C = class extends BaseCtor {
31765    constructor(...args) {
31766      super(...args);
31767      /**

31768       * Track whether the value has been changed from the initial value
31769       */
31770
31771      this.dirtyValue = false;
31772      /**
31773       * Sets the element's disabled state. A disabled element will not be included during form submission.
31774       *
31775       * @remarks
31776       * HTML Attribute: disabled
31777       */
31778
31779      this.disabled = false;
31780      /**
31781       * These are events that are still fired by the proxy
31782       * element based on user / programmatic interaction.
31783       *
31784       * The proxy implementation should be transparent to
31785       * the app author, so block these events from emitting.
31786       */
31787
31788      this.proxyEventsToBlock = ["change", "click"];
31789      this.proxyInitialized = false;
31790      this.required = false;
31791      this.initialValue = this.initialValue || "";
31792
31793      if (!this.elementInternals) {
31794        // When elementInternals is not supported, formResetCallback is
31795        // bound to an event listener, so ensure the handler's `this`
31796        // context is correct.
31797        this.formResetCallback = this.formResetCallback.bind(this);
31798      }
31799    }
31800    /**
31801     * Must evaluate to true to enable elementInternals.
31802     * Feature detects API support and resolve respectively
31803     *
31804     * @internal
31805     */
31806
31807
31808    static get formAssociated() {
31809      return supportsElementInternals;
31810    }
31811    /**
31812     * Returns the validity state of the element
31813     *
31814     * @alpha
31815     */
31816
31817
31818    get validity() {
31819      return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
31820    }
31821    /**
31822     * Retrieve a reference to the associated form.
31823     * Returns null if not associated to any form.
31824     *
31825     * @alpha
31826     */
31827
31828
31829    get form() {
31830      return this.elementInternals ? this.elementInternals.form : this.proxy.form;
31831    }
31832    /**
31833     * Retrieve the localized validation message,
31834     * or custom validation message if set.
31835     *
31836     * @alpha
31837     */
31838
31839
31840    get validationMessage() {
31841      return this.elementInternals ? this.elementInternals.validationMessage : this.proxy.validationMessage;
31842    }
31843    /**
31844     * Whether the element will be validated when the
31845     * form is submitted
31846     */
31847
31848
31849    get willValidate() {
31850      return this.elementInternals ? this.elementInternals.willValidate : this.proxy.willValidate;
31851    }
31852    /**
31853     * A reference to all associated label elements
31854     */
31855
31856
31857    get labels() {
31858      if (this.elementInternals) {
31859        return Object.freeze(Array.from(this.elementInternals.labels));
31860      } else if (this.proxy instanceof HTMLElement && this.proxy.ownerDocument && this.id) {
31861        // Labels associated by wrapping the element: <label><custom-element></custom-element></label>
31862        const parentLabels = this.proxy.labels; // Labels associated using the `for` attribute
31863
31864        const forLabels = Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));
31865        const labels = parentLabels ? forLabels.concat(Array.from(parentLabels)) : forLabels;
31866        return Object.freeze(labels);
31867      } else {
31868        return _fastElement.emptyArray;
31869      }
31870    }
31871    /**
31872     * Invoked when the `value` property changes
31873     * @param previous - the previous value
31874     * @param next - the new value
31875     *
31876     * @remarks
31877     * If elements extending `FormAssociated` implement a `valueChanged` method
31878     * They must be sure to invoke `super.valueChanged(previous, next)` to ensure
31879     * proper functioning of `FormAssociated`
31880     */
31881
31882
31883    valueChanged(previous, next) {
31884      this.dirtyValue = true;
31885
31886      if (this.proxy instanceof HTMLElement) {
31887        this.proxy.value = this.value;
31888      }
31889
31890      this.currentValue = this.value;
31891      this.setFormValue(this.value);
31892      this.validate();
31893    }
31894
31895    currentValueChanged() {
31896      this.value = this.currentValue;
31897    }
31898    /**
31899     * Invoked when the `initialValue` property changes
31900     *
31901     * @param previous - the previous value
31902     * @param next - the new value
31903     *
31904     * @remarks
31905     * If elements extending `FormAssociated` implement a `initialValueChanged` method
31906     * They must be sure to invoke `super.initialValueChanged(previous, next)` to ensure
31907     * proper functioning of `FormAssociated`
31908     */
31909
31910
31911    initialValueChanged(previous, next) {
31912      // If the value is clean and the component is connected to the DOM
31913      // then set value equal to the attribute value.
31914      if (!this.dirtyValue) {
31915        this.value = this.initialValue;
31916        this.dirtyValue = false;

vendor: 4,630 bytes, lines 31917-32082

31917      }
31918    }
31919    /**
31920     * Invoked when the `disabled` property changes
31921     *
31922     * @param previous - the previous value
31923     * @param next - the new value
31924     *
31925     * @remarks
31926     * If elements extending `FormAssociated` implement a `disabledChanged` method
31927     * They must be sure to invoke `super.disabledChanged(previous, next)` to ensure
31928     * proper functioning of `FormAssociated`
31929     */
31930
31931
31932    disabledChanged(previous, next) {
31933      if (this.proxy instanceof HTMLElement) {
31934        this.proxy.disabled = this.disabled;
31935      }
31936
31937      _fastElement.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
31938    }
31939    /**
31940     * Invoked when the `name` property changes
31941     *
31942     * @param previous - the previous value
31943     * @param next - the new value
31944     *
31945     * @remarks
31946     * If elements extending `FormAssociated` implement a `nameChanged` method
31947     * They must be sure to invoke `super.nameChanged(previous, next)` to ensure
31948     * proper functioning of `FormAssociated`
31949     */
31950
31951
31952    nameChanged(previous, next) {
31953      if (this.proxy instanceof HTMLElement) {
31954        this.proxy.name = this.name;
31955      }
31956    }
31957    /**
31958     * Invoked when the `required` property changes
31959     *
31960     * @param previous - the previous value
31961     * @param next - the new value
31962     *
31963     * @remarks
31964     * If elements extending `FormAssociated` implement a `requiredChanged` method
31965     * They must be sure to invoke `super.requiredChanged(previous, next)` to ensure
31966     * proper functioning of `FormAssociated`
31967     */
31968
31969
31970    requiredChanged(prev, next) {
31971      if (this.proxy instanceof HTMLElement) {
31972        this.proxy.required = this.required;
31973      }
31974
31975      _fastElement.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
31976
31977      this.validate();
31978    }
31979    /**
31980     * The element internals object. Will only exist
31981     * in browsers supporting the attachInternals API
31982     */
31983
31984
31985    get elementInternals() {
31986      if (!supportsElementInternals) {
31987        return null;
31988      }
31989
31990      let internals = InternalsMap.get(this);
31991
31992      if (!internals) {
31993        internals = this.attachInternals();
31994        InternalsMap.set(this, internals);
31995      }
31996
31997      return internals;
31998    }
31999    /**
32000     * @internal
32001     */
32002
32003
32004    connectedCallback() {
32005      super.connectedCallback();
32006      this.addEventListener("keypress", this._keypressHandler);
32007
32008      if (!this.value) {
32009        this.value = this.initialValue;
32010        this.dirtyValue = false;
32011      }
32012
32013      if (!this.elementInternals) {
32014        this.attachProxy();
32015
32016        if (this.form) {
32017          this.form.addEventListener("reset", this.formResetCallback);
32018        }
32019      }
32020    }
32021    /**
32022     * @internal
32023     */
32024
32025
32026    disconnectedCallback() {
32027      super.disconnectedCallback();
32028      this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
32029
32030      if (!this.elementInternals && this.form) {
32031        this.form.removeEventListener("reset", this.formResetCallback);
32032      }
32033    }
32034    /**
32035     * Return the current validity of the element.
32036     */
32037
32038
32039    checkValidity() {
32040      return this.elementInternals ? this.elementInternals.checkValidity() : this.proxy.checkValidity();
32041    }
32042    /**
32043     * Return the current validity of the element.
32044     * If false, fires an invalid event at the element.
32045     */
32046
32047
32048    reportValidity() {
32049      return this.elementInternals ? this.elementInternals.reportValidity() : this.proxy.reportValidity();
32050    }
32051    /**
32052     * Set the validity of the control. In cases when the elementInternals object is not
32053     * available (and the proxy element is used to report validity), this function will
32054     * do nothing unless a message is provided, at which point the setCustomValidity method
32055     * of the proxy element will be invoked with the provided message.
32056     * @param flags - Validity flags
32057     * @param message - Optional message to supply
32058     * @param anchor - Optional element used by UA to display an interactive validation UI
32059     */
32060
32061
32062    setValidity(flags, message, anchor) {
32063      if (this.elementInternals) {
32064        this.elementInternals.setValidity(flags, message, anchor);
32065      } else if (typeof message === "string") {
32066        this.proxy.setCustomValidity(message);
32067      }
32068    }
32069    /**
32070     * Invoked when a connected component's form or fieldset has its disabled
32071     * state changed.
32072     * @param disabled - the disabled value of the form / fieldset
32073     */
32074
32075
32076    formDisabledCallback(disabled) {
32077      this.disabled = disabled;
32078    }
32079
32080    formResetCallback() {
32081      this.value = this.initialValue;
32082      this.dirtyValue = false;

32083    }
32084    /**
32085     * Attach the proxy element to the DOM
32086     */
32087
32088
32089    attachProxy() {
32090      var _a;
32091
32092      if (!this.proxyInitialized) {
32093        this.proxyInitialized = true;
32094        this.proxy.style.display = "none";
32095        this.proxyEventsToBlock.forEach(name => this.proxy.addEventListener(name, this.stopPropagation)); // These are typically mapped to the proxy during
32096        // property change callbacks, but during initialization
32097        // on the initial call of the callback, the proxy is
32098        // still undefined. We should find a better way to address this.
32099
32100        this.proxy.disabled = this.disabled;
32101        this.proxy.required = this.required;
32102
32103        if (typeof this.name === "string") {
32104          this.proxy.name = this.name;
32105        }
32106
32107        if (typeof this.value === "string") {
32108          this.proxy.value = this.value;
32109        }
32110
32111        this.proxy.setAttribute("slot", proxySlotName);
32112        this.proxySlot = document.createElement("slot");
32113        this.proxySlot.setAttribute("name", proxySlotName);
32114      }
32115
32116      (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(this.proxySlot);
32117      this.appendChild(this.proxy);
32118    }
32119    /**
32120     * Detach the proxy element from the DOM
32121     */
32122
32123
32124    detachProxy() {
32125      var _a;
32126
32127      this.removeChild(this.proxy);
32128      (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeChild(this.proxySlot);
32129    }
32130    /** {@inheritDoc (FormAssociated:interface).validate} */
32131
32132
32133    validate(anchor) {
32134      if (this.proxy instanceof HTMLElement) {
32135        this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);
32136      }
32137    }
32138    /**
32139     * Associates the provided value (and optional state) with the parent form.
32140     * @param value - The value to set
32141     * @param state - The state object provided to during session restores and when autofilling.
32142     */
32143
32144
32145    setFormValue(value, state) {
32146      if (this.elementInternals) {
32147        this.elementInternals.setFormValue(value, state || value);
32148      }
32149    }
32150
32151    _keypressHandler(e) {
32152      switch (e.key) {
32153        case _fastWebUtilities.keyEnter:
32154          if (this.form instanceof HTMLFormElement) {
32155            // Implicit submission
32156            const defaultButton = this.form.querySelector("[type=submit]");
32157            defaultButton === null || defaultButton === void 0 ? void 0 : defaultButton.click();
32158          }
32159
32160          break;
32161      }
32162    }
32163    /**
32164     * Used to stop propagation of proxy element events
32165     * @param e - Event object
32166     */
32167
32168
32169    stopPropagation(e) {
32170      e.stopPropagation();
32171    }
32172
32173  };
32174  (0, _fastElement.attr)({
32175    mode: "boolean"
32176  })(C.prototype, "disabled");
32177  (0, _fastElement.attr)({
32178    mode: "fromView",
32179    attribute: "value"
32180  })(C.prototype, "initialValue");
32181  (0, _fastElement.attr)({
32182    attribute: "current-value"
32183  })(C.prototype, "currentValue");
32184  (0, _fastElement.attr)(C.prototype, "name");
32185  (0, _fastElement.attr)({
32186    mode: "boolean"
32187  })(C.prototype, "required");
32188  (0, _fastElement.observable)(C.prototype, "value");
32189  return C;
32190}
32191/**
32192 * @alpha
32193 */
32194
32195
32196function CheckableFormAssociated(BaseCtor) {
32197  class C extends FormAssociated(BaseCtor) {}
32198
32199  class D extends C {
32200    constructor(...args) {
32201      super(args);
32202      /**
32203       * Tracks whether the "checked" property has been changed.
32204       * This is necessary to provide consistent behavior with
32205       * normal input checkboxes
32206       */
32207
32208      this.dirtyChecked = false;
32209      /**
32210       * Provides the default checkedness of the input element
32211       * Passed down to proxy
32212       *
32213       * @public
32214       * @remarks
32215       * HTML Attribute: checked
32216       */
32217
32218      this.checkedAttribute = false;
32219      /**
32220       * The checked state of the control.
32221       *
32222       * @public
32223       */
32224
32225      this.checked = false; // Re-initialize dirtyChecked because initialization of other values
32226      // causes it to become true
32227
32228      this.dirtyChecked = false;
32229    }
32230
32231    checkedAttributeChanged() {
32232      this.defaultChecked = this.checkedAttribute;
32233    }
32234    /**
32235     * @internal
32236     */
32237
32238
32239    defaultCheckedChanged() {
32240      if (!this.dirtyChecked) {
32241        // Setting this.checked will cause us to enter a dirty state,
32242        // but if we are clean when defaultChecked is changed, we want to stay
32243        // in a clean state, so reset this.dirtyChecked
32244        this.checked = this.defaultChecked;
32245        this.dirtyChecked = false;

32246      }
32247    }
32248
32249    checkedChanged(prev, next) {
32250      if (!this.dirtyChecked) {
32251        this.dirtyChecked = true;
32252      }
32253
32254      this.currentChecked = this.checked;
32255      this.updateForm();
32256
32257      if (this.proxy instanceof HTMLInputElement) {
32258        this.proxy.checked = this.checked;
32259      }
32260
32261      if (prev !== undefined) {
32262        this.$emit("change");
32263      }
32264
32265      this.validate();
32266    }
32267
32268    currentCheckedChanged(prev, next) {
32269      this.checked = this.currentChecked;
32270    }
32271
32272    updateForm() {
32273      const value = this.checked ? this.value : null;
32274      this.setFormValue(value, value);
32275    }
32276
32277    connectedCallback() {
32278      super.connectedCallback();
32279      this.updateForm();
32280    }
32281
32282    formResetCallback() {
32283      super.formResetCallback();
32284      this.checked = !!this.checkedAttribute;
32285      this.dirtyChecked = false;
32286    }
32287
32288  }
32289
32290  (0, _fastElement.attr)({
32291    attribute: "checked",
32292    mode: "boolean"
32293  })(D.prototype, "checkedAttribute");
32294  (0, _fastElement.attr)({
32295    attribute: "current-checked",
32296    converter: _fastElement.booleanConverter
32297  })(D.prototype, "currentChecked");
32298  (0, _fastElement.observable)(D.prototype, "defaultChecked");
32299  (0, _fastElement.observable)(D.prototype, "checked");
32300  return D;
32301}
32302
32303},{"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379}],250:[function(require,module,exports){
32304"use strict";
32305
32306Object.defineProperty(exports, "__esModule", {
32307  value: true
32308});
32309
32310var _formAssociated = require("./form-associated.js");
32311
32312Object.keys(_formAssociated).forEach(function (key) {
32313  if (key === "default" || key === "__esModule") return;
32314  if (key in exports && exports[key] === _formAssociated[key]) return;
32315  Object.defineProperty(exports, key, {
32316    enumerable: true,
32317    get: function () {
32318      return _formAssociated[key];
32319    }
32320  });
32321});
32322
32323},{"./form-associated.js":249}],251:[function(require,module,exports){
32324"use strict";
32325
32326Object.defineProperty(exports, "__esModule", {
32327  value: true
32328});
32329exports.FoundationElementRegistry = exports.FoundationElement = void 0;
32330
32331var _tslib = require("tslib");
32332
32333var _fastElement = require("@microsoft/fast-element");
32334
32335var _componentPresentation = require("../design-system/component-presentation.js");
32336
32337/**
32338 * Defines a foundation element class that:
32339 * 1. Connects the element to its ComponentPresentation
32340 * 2. Allows resolving the element template from the instance or ComponentPresentation
32341 * 3. Allows resolving the element styles from the instance or ComponentPresentation
32342 *
32343 * @public
32344 */
32345class FoundationElement extends _fastElement.FASTElement {
32346  constructor() {
32347    super(...arguments);
32348    this._presentation = void 0;
32349  }
32350  /**
32351   * A property which resolves the ComponentPresentation instance
32352   * for the current component.
32353   * @public
32354   */
32355
32356
32357  get $presentation() {
32358    if (this._presentation === void 0) {
32359      this._presentation = _componentPresentation.ComponentPresentation.forTag(this.tagName, this);
32360    }
32361
32362    return this._presentation;
32363  }
32364
32365  templateChanged() {
32366    if (this.template !== undefined) {
32367      this.$fastController.template = this.template;
32368    }
32369  }
32370
32371  stylesChanged() {
32372    if (this.styles !== undefined) {
32373      this.$fastController.styles = this.styles;
32374    }
32375  }
32376  /**
32377   * The connected callback for this FASTElement.
32378   * @remarks
32379   * This method is invoked by the platform whenever this FoundationElement
32380   * becomes connected to the document.
32381   * @public
32382   */
32383
32384
32385  connectedCallback() {
32386    if (this.$presentation !== null) {
32387      this.$presentation.applyTo(this);
32388    }
32389
32390    super.connectedCallback();
32391  }
32392  /**
32393   * Defines an element registry function with a set of element definition defaults.
32394   * @param elementDefinition - The definition of the element to create the registry
32395   * function for.
32396   * @public
32397   */
32398
32399
32400  static compose(elementDefinition) {
32401    return (overrideDefinition = {}) => new FoundationElementRegistry(this === FoundationElement ? class extends FoundationElement {} : this, elementDefinition, overrideDefinition);
32402  }
32403
32404}
32405
32406exports.FoundationElement = FoundationElement;
32407(0, _tslib.__decorate)([_fastElement.observable], FoundationElement.prototype, "template", void 0);
32408(0, _tslib.__decorate)([_fastElement.observable], FoundationElement.prototype, "styles", void 0);
32409
32410function resolveOption(option, context, definition) {
32411  if (typeof option === "function") {
32412    return option(context, definition);
32413  }
32414
32415  return option;
32416}
32417/**
32418 * Registry capable of defining presentation properties for a DOM Container hierarchy.
32419 *
32420 * @internal
32421 */
32422
32423/* eslint-disable @typescript-eslint/no-unused-vars */
32424
32425
32426class FoundationElementRegistry {
32427  constructor(type, elementDefinition, overrideDefinition) {
32428    this.type = type;
32429    this.elementDefinition = elementDefinition;
32430    this.overrideDefinition = overrideDefinition;
32431    this.definition = Object.assign(Object.assign({}, this.elementDefinition), this.overrideDefinition);
32432  }
32433
32434  register(container, context) {
32435    const definition = this.definition;
32436    const overrideDefinition = this.overrideDefinition;
32437    const prefix = definition.prefix || context.elementPrefix;
32438    const name = `${prefix}-${definition.baseName}`;
32439    context.tryDefineElement({
32440      name,
32441      type: this.type,
32442      baseClass: this.elementDefinition.baseClass,
32443      callback: x => {
32444        const presentation = new _componentPresentation.DefaultComponentPresentation(resolveOption(definition.template, x, definition), resolveOption(definition.styles, x, definition));
32445        x.definePresentation(presentation);
32446        let shadowOptions = resolveOption(definition.shadowOptions, x, definition);
32447
32448        if (x.shadowRootMode) {
32449          // If the design system has overridden the shadow root mode, we need special handling.
32450          if (shadowOptions) {
32451            // If there are shadow options present in the definition, then
32452            // either the component itself has specified an option or the
32453            // registry function has overridden it.
32454            if (!overrideDefinition.shadowOptions) {
32455              // There were shadow options provided by the component and not overridden by
32456              // the registry.
32457              shadowOptions.mode = x.shadowRootMode;
32458            }
32459          } else if (shadowOptions !== null) {

32460            // If the component author did not provide shadow options,
32461            // and did not null them out (light dom opt-in) then they
32462            // were relying on the FASTElement default. So, if the
32463            // design system provides a mode, we need to create the options
32464            // to override the default.
32465            shadowOptions = {
32466              mode: x.shadowRootMode
32467            };
32468          }
32469        }
32470
32471        x.defineElement({
32472          elementOptions: resolveOption(definition.elementOptions, x, definition),
32473          shadowOptions,
32474          attributes: resolveOption(definition.attributes, x, definition)
32475        });
32476      }
32477    });
32478  }
32479
32480}
32481/* eslint-enable @typescript-eslint/no-unused-vars */
32482
32483
32484exports.FoundationElementRegistry = FoundationElementRegistry;
32485
32486},{"../design-system/component-presentation.js":225,"@microsoft/fast-element":151,"tslib":372}],252:[function(require,module,exports){
32487"use strict";
32488
32489Object.defineProperty(exports, "__esModule", {
32490  value: true
32491});
32492
32493var _foundationElement = require("./foundation-element.js");
32494
32495Object.keys(_foundationElement).forEach(function (key) {
32496  if (key === "default" || key === "__esModule") return;
32497  if (key in exports && exports[key] === _foundationElement[key]) return;
32498  Object.defineProperty(exports, key, {
32499    enumerable: true,
32500    get: function () {
32501      return _foundationElement[key];
32502    }
32503  });
32504});
32505
32506},{"./foundation-element.js":251}],253:[function(require,module,exports){
32507"use strict";
32508
32509Object.defineProperty(exports, "__esModule", {
32510  value: true
32511});
32512exports.HorizontalScroll = void 0;
32513
32514var _tslib = require("tslib");
32515
32516var _fastElement = require("@microsoft/fast-element");
32517
32518var _foundationElement = require("../foundation-element/foundation-element.js");
32519
32520/**
32521 * A HorizontalScroll Custom HTML Element
32522 *
32523 * @slot start - Content which can be provided before the scroll area
32524 * @slot end - Content which can be provided after the scroll area
32525 * @csspart scroll-area - Wraps the entire scrollable region
32526 * @csspart scroll-view - The visible scroll area
32527 * @csspart content-container - The container for the content
32528 * @csspart scroll-prev - The previous flipper container
32529 * @csspart scroll-action-previous - The element wrapping the previous flipper
32530 * @csspart scroll-next - The next flipper container
32531 * @csspart scroll-action-next - The element wrapping the next flipper
32532 * @fires scrollstart - Fires a custom 'scrollstart' event when scrolling
32533 * @fires scrollend - Fires a custom 'scrollend' event when scrolling stops
32534 *
32535 * @public
32536 */
32537class HorizontalScroll extends _foundationElement.FoundationElement {
32538  constructor() {
32539    super(...arguments);
32540    /**
32541     * @internal
32542     */
32543
32544    this.framesPerSecond = 60;
32545    /**
32546     * Flag indicating that the items are being updated
32547     *
32548     * @internal
32549     */
32550
32551    this.updatingItems = false;
32552    /**
32553     * Speed of scroll in pixels per second
32554     * @public
32555     */
32556
32557    this.speed = 600;
32558    /**
32559     * Attribute used for easing, defaults to ease-in-out
32560     * @public
32561     */
32562
32563    this.easing = "ease-in-out";
32564    /**
32565     * Attribute to hide flippers from assistive technology
32566     * @public
32567     */
32568
32569    this.flippersHiddenFromAT = false;
32570    /**
32571     * Scrolling state
32572     * @internal
32573     */
32574
32575    this.scrolling = false;
32576    /**
32577     * Detects if the component has been resized
32578     * @internal
32579     */
32580
32581    this.resizeDetector = null;
32582  }
32583  /**
32584   * The calculated duration for a frame.
32585   *
32586   * @internal
32587   */
32588
32589
32590  get frameTime() {
32591    return 1000 / this.framesPerSecond;
32592  }
32593  /**
32594   * Firing scrollstart and scrollend events
32595   * @internal
32596   */
32597
32598
32599  scrollingChanged(prev, next) {
32600    if (this.scrollContainer) {
32601      const event = this.scrolling == true ? "scrollstart" : "scrollend";
32602      this.$emit(event, this.scrollContainer.scrollLeft);
32603    }
32604  }
32605  /**
32606   * In RTL mode
32607   * @internal
32608   */
32609
32610
32611  get isRtl() {
32612    return this.scrollItems.length > 1 && this.scrollItems[0].offsetLeft > this.scrollItems[1].offsetLeft;
32613  }
32614
32615  connectedCallback() {
32616    super.connectedCallback();
32617    this.initializeResizeDetector();
32618  }
32619
32620  disconnectedCallback() {
32621    this.disconnectResizeDetector();
32622    super.disconnectedCallback();
32623  }
32624  /**
32625   * Updates scroll stops and flippers when scroll items change
32626   * @param previous - current scroll items
32627   * @param next - new updated scroll items
32628   * @public
32629   */
32630
32631
32632  scrollItemsChanged(previous, next) {
32633    if (next && !this.updatingItems) {
32634      _fastElement.DOM.queueUpdate(() => this.setStops());
32635    }
32636  }
32637  /**
32638   * destroys the instance's resize observer
32639   * @internal
32640   */
32641
32642
32643  disconnectResizeDetector() {
32644    if (this.resizeDetector) {
32645      this.resizeDetector.disconnect();
32646      this.resizeDetector = null;
32647    }
32648  }
32649  /**
32650   * initializes the instance's resize observer
32651   * @internal
32652   */
32653
32654
32655  initializeResizeDetector() {
32656    this.disconnectResizeDetector();
32657    this.resizeDetector = new window.ResizeObserver(this.resized.bind(this));
32658    this.resizeDetector.observe(this);
32659  }
32660  /**
32661   * Looks for slots and uses child nodes instead
32662   * @internal
32663   */
32664
32665
32666  updateScrollStops() {
32667    this.updatingItems = true;
32668    const updatedItems = this.scrollItems.reduce((scrollItems, scrollItem) => {
32669      if (scrollItem instanceof HTMLSlotElement) {
32670        return scrollItems.concat(scrollItem.assignedElements());
32671      }
32672
32673      scrollItems.push(scrollItem);
32674      return scrollItems;
32675    }, []);
32676    this.scrollItems = updatedItems;
32677    this.updatingItems = false;

vendor: 6,740 bytes, lines 32678-32907

32678  }
32679  /**
32680   * Finds all of the scroll stops between elements
32681   * @internal
32682   */
32683
32684
32685  setStops() {
32686    this.updateScrollStops();
32687    const {
32688      scrollContainer: container
32689    } = this;
32690    const {
32691      scrollLeft
32692    } = container;
32693    const {
32694      width: containerWidth,
32695      left: containerLeft
32696    } = container.getBoundingClientRect();
32697    this.width = containerWidth;
32698    let lastStop = 0;
32699    let stops = this.scrollItems.map((item, index) => {
32700      const {
32701        left,
32702        width
32703      } = item.getBoundingClientRect();
32704      const leftPosition = Math.round(left + scrollLeft - containerLeft);
32705      const right = Math.round(leftPosition + width);
32706
32707      if (this.isRtl) {
32708        return -right;
32709      }
32710
32711      lastStop = right;
32712      return index === 0 ? 0 : leftPosition;
32713    }).concat(lastStop);
32714    /* Fixes a FireFox bug where it doesn't scroll to the start */
32715
32716    stops = this.fixScrollMisalign(stops);
32717    /* Sort to zero */
32718
32719    stops.sort((a, b) => Math.abs(a) - Math.abs(b));
32720    this.scrollStops = stops;
32721    this.setFlippers();
32722  }
32723  /**
32724   * Checks to see if the stops are returning values
32725   *  otherwise it will try to reinitialize them
32726   *
32727   * @returns boolean indicating that current scrollStops are valid non-zero values
32728   * @internal
32729   */
32730
32731
32732  validateStops(reinit = true) {
32733    const hasStops = () => !!this.scrollStops.find(stop => stop > 0);
32734
32735    if (!hasStops() && reinit) {
32736      this.setStops();
32737    }
32738
32739    return hasStops();
32740  }
32741  /**
32742   *
32743   */
32744
32745
32746  fixScrollMisalign(stops) {
32747    if (this.isRtl && stops.some(stop => stop > 0)) {
32748      stops.sort((a, b) => b - a);
32749      const offset = stops[0];
32750      stops = stops.map(stop => stop - offset);
32751    }
32752
32753    return stops;
32754  }
32755  /**
32756   * Sets the controls view if enabled
32757   * @internal
32758   */
32759
32760
32761  setFlippers() {
32762    var _a, _b;
32763
32764    const position = this.scrollContainer.scrollLeft;
32765    (_a = this.previousFlipperContainer) === null || _a === void 0 ? void 0 : _a.classList.toggle("disabled", position === 0);
32766
32767    if (this.scrollStops) {
32768      const lastStop = Math.abs(this.scrollStops[this.scrollStops.length - 1]);
32769      (_b = this.nextFlipperContainer) === null || _b === void 0 ? void 0 : _b.classList.toggle("disabled", this.validateStops(false) && Math.abs(position) + this.width >= lastStop);
32770    }
32771  }
32772  /**
32773   * Function that can scroll an item into view.
32774   * @param item - An item index, a scroll item or a child of one of the scroll items
32775   * @param padding - Padding of the viewport where the active item shouldn't be
32776   * @param rightPadding - Optional right padding. Uses the padding if not defined
32777   *
32778   * @public
32779   */
32780
32781
32782  scrollInView(item, padding = 0, rightPadding) {
32783    var _a;
32784
32785    if (typeof item !== "number" && item) {
32786      item = this.scrollItems.findIndex(scrollItem => scrollItem === item || scrollItem.contains(item));
32787    }
32788
32789    if (item !== undefined) {
32790      rightPadding = rightPadding !== null && rightPadding !== void 0 ? rightPadding : padding;
32791      const {
32792        scrollContainer: container,
32793        scrollStops,
32794        scrollItems: items
32795      } = this;
32796      const {
32797        scrollLeft
32798      } = this.scrollContainer;
32799      const {
32800        width: containerWidth
32801      } = container.getBoundingClientRect();
32802      const itemStart = scrollStops[item];
32803      const {
32804        width
32805      } = items[item].getBoundingClientRect();
32806      const itemEnd = itemStart + width;
32807      const isBefore = scrollLeft + padding > itemStart;
32808
32809      if (isBefore || scrollLeft + containerWidth - rightPadding < itemEnd) {
32810        const stops = [...scrollStops].sort((a, b) => isBefore ? b - a : a - b);
32811        const scrollTo = (_a = stops.find(position => isBefore ? position + padding < itemStart : position + containerWidth - (rightPadding !== null && rightPadding !== void 0 ? rightPadding : 0) > itemEnd)) !== null && _a !== void 0 ? _a : 0;
32812        this.scrollToPosition(scrollTo);
32813      }
32814    }
32815  }
32816  /**
32817   * Lets the user arrow left and right through the horizontal scroll
32818   * @param e - Keyboard event
32819   * @public
32820   */
32821
32822
32823  keyupHandler(e) {
32824    const key = e.key;
32825
32826    switch (key) {
32827      case "ArrowLeft":
32828        this.scrollToPrevious();
32829        break;
32830
32831      case "ArrowRight":
32832        this.scrollToNext();
32833        break;
32834    }
32835  }
32836  /**
32837   * Scrolls items to the left
32838   * @public
32839   */
32840
32841
32842  scrollToPrevious() {
32843    this.validateStops();
32844    const scrollPosition = this.scrollContainer.scrollLeft;
32845    const current = this.scrollStops.findIndex((stop, index) => stop >= scrollPosition && (this.isRtl || index === this.scrollStops.length - 1 || this.scrollStops[index + 1] > scrollPosition));
32846    const right = Math.abs(this.scrollStops[current + 1]);
32847    let nextIndex = this.scrollStops.findIndex(stop => Math.abs(stop) + this.width > right);
32848
32849    if (nextIndex >= current || nextIndex === -1) {
32850      nextIndex = current > 0 ? current - 1 : 0;
32851    }
32852
32853    this.scrollToPosition(this.scrollStops[nextIndex], scrollPosition);
32854  }
32855  /**
32856   * Scrolls items to the right
32857   * @public
32858   */
32859
32860
32861  scrollToNext() {
32862    this.validateStops();
32863    const scrollPosition = this.scrollContainer.scrollLeft;
32864    const current = this.scrollStops.findIndex(stop => Math.abs(stop) >= Math.abs(scrollPosition));
32865    const outOfView = this.scrollStops.findIndex(stop => Math.abs(scrollPosition) + this.width <= Math.abs(stop));
32866    let nextIndex = current;
32867
32868    if (outOfView > current + 2) {
32869      nextIndex = outOfView - 2;
32870    } else if (current < this.scrollStops.length - 2) {
32871      nextIndex = current + 1;
32872    }
32873
32874    this.scrollToPosition(this.scrollStops[nextIndex], scrollPosition);
32875  }
32876  /**
32877   * Handles scrolling with easing
32878   * @param position - starting position
32879   * @param newPosition - position to scroll to
32880   * @public
32881   */
32882
32883
32884  scrollToPosition(newPosition, position = this.scrollContainer.scrollLeft) {
32885    var _a;
32886
32887    if (this.scrolling) {
32888      return;
32889    }
32890
32891    this.scrolling = true;
32892    const seconds = (_a = this.duration) !== null && _a !== void 0 ? _a : `${Math.abs(newPosition - position) / this.speed}s`;
32893    this.content.style.setProperty("transition-duration", seconds);
32894    const computedDuration = parseFloat(getComputedStyle(this.content).getPropertyValue("transition-duration"));
32895
32896    const transitionendHandler = e => {
32897      if (e && e.target !== e.currentTarget) {
32898        return;
32899      }
32900
32901      this.content.style.setProperty("transition-duration", "0s");
32902      this.content.style.removeProperty("transform");
32903      this.scrollContainer.style.setProperty("scroll-behavior", "auto");
32904      this.scrollContainer.scrollLeft = newPosition;
32905      this.setFlippers();
32906      this.content.removeEventListener("transitionend", transitionendHandler);
32907      this.scrolling = false;

32908    };
32909
32910    if (computedDuration === 0) {
32911      transitionendHandler();
32912      return;
32913    }
32914
32915    this.content.addEventListener("transitionend", transitionendHandler);
32916    const maxScrollValue = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;
32917    let transitionStop = this.scrollContainer.scrollLeft - Math.min(newPosition, maxScrollValue);
32918
32919    if (this.isRtl) {
32920      transitionStop = this.scrollContainer.scrollLeft + Math.min(Math.abs(newPosition), maxScrollValue);
32921    }
32922
32923    this.content.style.setProperty("transition-property", "transform");
32924    this.content.style.setProperty("transition-timing-function", this.easing);
32925    this.content.style.setProperty("transform", `translateX(${transitionStop}px)`);
32926  }
32927  /**
32928   * Monitors resize event on the horizontal-scroll element
32929   * @public
32930   */
32931
32932
32933  resized() {
32934    if (this.resizeTimeout) {
32935      this.resizeTimeout = clearTimeout(this.resizeTimeout);
32936    }
32937
32938    this.resizeTimeout = setTimeout(() => {
32939      this.width = this.scrollContainer.offsetWidth;
32940      this.setFlippers();
32941    }, this.frameTime);
32942  }
32943  /**
32944   * Monitors scrolled event on the content container
32945   * @public
32946   */
32947
32948
32949  scrolled() {
32950    if (this.scrollTimeout) {
32951      this.scrollTimeout = clearTimeout(this.scrollTimeout);
32952    }
32953
32954    this.scrollTimeout = setTimeout(() => {
32955      this.setFlippers();
32956    }, this.frameTime);
32957  }
32958
32959}
32960
32961exports.HorizontalScroll = HorizontalScroll;
32962(0, _tslib.__decorate)([(0, _fastElement.attr)({
32963  converter: _fastElement.nullableNumberConverter
32964})], HorizontalScroll.prototype, "speed", void 0);
32965(0, _tslib.__decorate)([_fastElement.attr], HorizontalScroll.prototype, "duration", void 0);
32966(0, _tslib.__decorate)([_fastElement.attr], HorizontalScroll.prototype, "easing", void 0);
32967(0, _tslib.__decorate)([(0, _fastElement.attr)({
32968  attribute: "flippers-hidden-from-at",
32969  converter: _fastElement.booleanConverter
32970})], HorizontalScroll.prototype, "flippersHiddenFromAT", void 0);
32971(0, _tslib.__decorate)([_fastElement.observable], HorizontalScroll.prototype, "scrolling", void 0);
32972(0, _tslib.__decorate)([_fastElement.observable], HorizontalScroll.prototype, "scrollItems", void 0);
32973(0, _tslib.__decorate)([(0, _fastElement.attr)({
32974  attribute: "view"
32975})], HorizontalScroll.prototype, "view", void 0);
32976
32977},{"../foundation-element/foundation-element.js":251,"@microsoft/fast-element":151,"tslib":372}],254:[function(require,module,exports){
32978"use strict";
32979
32980Object.defineProperty(exports, "__esModule", {
32981  value: true
32982});
32983exports.horizontalScrollTemplate = void 0;
32984
32985var _fastElement = require("@microsoft/fast-element");
32986
32987var _startEnd = require("../patterns/start-end.js");
32988
32989/**
32990 * @public
32991 */
32992const horizontalScrollTemplate = (context, definition) => {
32993  var _a, _b;
32994
32995  return (0, _fastElement.html)`
32996    <template
32997        class="horizontal-scroll"
32998        @keyup="${(x, c) => x.keyupHandler(c.event)}"
32999    >
33000        ${(0, _startEnd.startSlotTemplate)(context, definition)}
33001        <div class="scroll-area" part="scroll-area">
33002            <div
33003                class="scroll-view"
33004                part="scroll-view"
33005                @scroll="${x => x.scrolled()}"
33006                ${(0, _fastElement.ref)("scrollContainer")}
33007            >
33008                <div class="content-container" part="content-container" ${(0, _fastElement.ref)("content")}>
33009                    <slot
33010                        ${(0, _fastElement.slotted)({
33011    property: "scrollItems",
33012    filter: (0, _fastElement.elements)()
33013  })}
33014                    ></slot>
33015                </div>
33016            </div>
33017            ${(0, _fastElement.when)(x => x.view !== "mobile", (0, _fastElement.html)`
33018                    <div
33019                        class="scroll scroll-prev"
33020                        part="scroll-prev"
33021                        ${(0, _fastElement.ref)("previousFlipperContainer")}
33022                    >
33023                        <div class="scroll-action" part="scroll-action-previous">
33024                            <slot name="previous-flipper">
33025                                ${definition.previousFlipper instanceof Function ? definition.previousFlipper(context, definition) : (_a = definition.previousFlipper) !== null && _a !== void 0 ? _a : ""}
33026                            </slot>
33027                        </div>
33028                    </div>
33029                    <div
33030                        class="scroll scroll-next"
33031                        part="scroll-next"
33032                        ${(0, _fastElement.ref)("nextFlipperContainer")}
33033                    >
33034                        <div class="scroll-action" part="scroll-action-next">
33035                            <slot name="next-flipper">
33036                                ${definition.nextFlipper instanceof Function ? definition.nextFlipper(context, definition) : (_b = definition.nextFlipper) !== null && _b !== void 0 ? _b : ""}
33037                            </slot>
33038                        </div>
33039                    </div>
33040                `)}
33041        </div>
33042        ${(0, _startEnd.endSlotTemplate)(context, definition)}
33043    </template>
33044`;
33045};
33046
33047exports.horizontalScrollTemplate = horizontalScrollTemplate;
33048
33049},{"../patterns/start-end.js":277,"@microsoft/fast-element":151}],255:[function(require,module,exports){
33050"use strict";
33051
33052Object.defineProperty(exports, "__esModule", {
33053  value: true
33054});
33055
33056var _horizontalScroll = require("./horizontal-scroll.js");
33057
33058Object.keys(_horizontalScroll).forEach(function (key) {

33059  if (key === "default" || key === "__esModule") return;
33060  if (key in exports && exports[key] === _horizontalScroll[key]) return;
33061  Object.defineProperty(exports, key, {
33062    enumerable: true,
33063    get: function () {
33064      return _horizontalScroll[key];
33065    }
33066  });
33067});
33068
33069var _horizontalScrollTemplate = require("./horizontal-scroll.template.js");
33070
33071Object.keys(_horizontalScrollTemplate).forEach(function (key) {
33072  if (key === "default" || key === "__esModule") return;
33073  if (key in exports && exports[key] === _horizontalScrollTemplate[key]) return;
33074  Object.defineProperty(exports, key, {
33075    enumerable: true,
33076    get: function () {
33077      return _horizontalScrollTemplate[key];
33078    }
33079  });
33080});
33081
33082},{"./horizontal-scroll.js":253,"./horizontal-scroll.template.js":254}],256:[function(require,module,exports){
33083"use strict";
33084
33085Object.defineProperty(exports, "__esModule", {
33086  value: true
33087});
33088var _exportNames = {
33089  DesignToken: true,
33090  reflectAttributes: true
33091};
33092Object.defineProperty(exports, "DesignToken", {
33093  enumerable: true,
33094  get: function () {
33095    return _designToken.DesignToken;
33096  }
33097});
33098Object.defineProperty(exports, "reflectAttributes", {
33099  enumerable: true,
33100  get: function () {
33101    return _reflectAttributes.reflectAttributes;
33102  }
33103});
33104
33105var _index = require("./accordion-item/index.js");
33106
33107Object.keys(_index).forEach(function (key) {
33108  if (key === "default" || key === "__esModule") return;
33109  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33110  if (key in exports && exports[key] === _index[key]) return;
33111  Object.defineProperty(exports, key, {
33112    enumerable: true,
33113    get: function () {
33114      return _index[key];
33115    }
33116  });
33117});
33118
33119var _index2 = require("./accordion/index.js");
33120
33121Object.keys(_index2).forEach(function (key) {
33122  if (key === "default" || key === "__esModule") return;
33123  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33124  if (key in exports && exports[key] === _index2[key]) return;
33125  Object.defineProperty(exports, key, {
33126    enumerable: true,
33127    get: function () {
33128      return _index2[key];
33129    }
33130  });
33131});
33132
33133var _index3 = require("./anchor/index.js");
33134
33135Object.keys(_index3).forEach(function (key) {
33136  if (key === "default" || key === "__esModule") return;
33137  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33138  if (key in exports && exports[key] === _index3[key]) return;
33139  Object.defineProperty(exports, key, {
33140    enumerable: true,
33141    get: function () {
33142      return _index3[key];
33143    }
33144  });
33145});
33146
33147var _index4 = require("./anchored-region/index.js");
33148
33149Object.keys(_index4).forEach(function (key) {
33150  if (key === "default" || key === "__esModule") return;
33151  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33152  if (key in exports && exports[key] === _index4[key]) return;
33153  Object.defineProperty(exports, key, {
33154    enumerable: true,
33155    get: function () {
33156      return _index4[key];
33157    }
33158  });
33159});
33160
33161var _index5 = require("./avatar/index.js");
33162
33163Object.keys(_index5).forEach(function (key) {
33164  if (key === "default" || key === "__esModule") return;
33165  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33166  if (key in exports && exports[key] === _index5[key]) return;
33167  Object.defineProperty(exports, key, {
33168    enumerable: true,
33169    get: function () {
33170      return _index5[key];
33171    }
33172  });
33173});
33174
33175var _index6 = require("./badge/index.js");
33176
33177Object.keys(_index6).forEach(function (key) {
33178  if (key === "default" || key === "__esModule") return;
33179  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33180  if (key in exports && exports[key] === _index6[key]) return;
33181  Object.defineProperty(exports, key, {
33182    enumerable: true,
33183    get: function () {
33184      return _index6[key];
33185    }
33186  });
33187});
33188
33189var _index7 = require("./breadcrumb-item/index.js");
33190
33191Object.keys(_index7).forEach(function (key) {
33192  if (key === "default" || key === "__esModule") return;
33193  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33194  if (key in exports && exports[key] === _index7[key]) return;
33195  Object.defineProperty(exports, key, {
33196    enumerable: true,
33197    get: function () {
33198      return _index7[key];
33199    }
33200  });
33201});
33202
33203var _index8 = require("./breadcrumb/index.js");
33204
33205Object.keys(_index8).forEach(function (key) {

33206  if (key === "default" || key === "__esModule") return;
33207  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33208  if (key in exports && exports[key] === _index8[key]) return;
33209  Object.defineProperty(exports, key, {
33210    enumerable: true,
33211    get: function () {
33212      return _index8[key];
33213    }
33214  });
33215});
33216
33217var _index9 = require("./button/index.js");
33218
33219Object.keys(_index9).forEach(function (key) {
33220  if (key === "default" || key === "__esModule") return;
33221  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33222  if (key in exports && exports[key] === _index9[key]) return;
33223  Object.defineProperty(exports, key, {
33224    enumerable: true,
33225    get: function () {
33226      return _index9[key];
33227    }
33228  });
33229});
33230
33231var _index10 = require("./calendar/index.js");
33232
33233Object.keys(_index10).forEach(function (key) {
33234  if (key === "default" || key === "__esModule") return;
33235  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33236  if (key in exports && exports[key] === _index10[key]) return;
33237  Object.defineProperty(exports, key, {
33238    enumerable: true,
33239    get: function () {
33240      return _index10[key];
33241    }
33242  });
33243});
33244
33245var _index11 = require("./card/index.js");
33246
33247Object.keys(_index11).forEach(function (key) {
33248  if (key === "default" || key === "__esModule") return;
33249  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33250  if (key in exports && exports[key] === _index11[key]) return;
33251  Object.defineProperty(exports, key, {
33252    enumerable: true,
33253    get: function () {
33254      return _index11[key];
33255    }
33256  });
33257});
33258
33259var _index12 = require("./checkbox/index.js");
33260
33261Object.keys(_index12).forEach(function (key) {
33262  if (key === "default" || key === "__esModule") return;
33263  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33264  if (key in exports && exports[key] === _index12[key]) return;
33265  Object.defineProperty(exports, key, {
33266    enumerable: true,
33267    get: function () {
33268      return _index12[key];
33269    }
33270  });
33271});
33272
33273var _index13 = require("./combobox/index.js");
33274
33275Object.keys(_index13).forEach(function (key) {
33276  if (key === "default" || key === "__esModule") return;
33277  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33278  if (key in exports && exports[key] === _index13[key]) return;
33279  Object.defineProperty(exports, key, {
33280    enumerable: true,
33281    get: function () {
33282      return _index13[key];
33283    }
33284  });
33285});
33286
33287var _index14 = require("./data-grid/index.js");
33288
33289Object.keys(_index14).forEach(function (key) {
33290  if (key === "default" || key === "__esModule") return;
33291  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33292  if (key in exports && exports[key] === _index14[key]) return;
33293  Object.defineProperty(exports, key, {
33294    enumerable: true,
33295    get: function () {
33296      return _index14[key];
33297    }
33298  });
33299});
33300
33301var _index15 = require("./design-system/index.js");
33302
33303Object.keys(_index15).forEach(function (key) {
33304  if (key === "default" || key === "__esModule") return;
33305  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33306  if (key in exports && exports[key] === _index15[key]) return;
33307  Object.defineProperty(exports, key, {
33308    enumerable: true,
33309    get: function () {
33310      return _index15[key];
33311    }
33312  });
33313});
33314
33315var _designToken = require("./design-token/design-token.js");
33316
33317require("./design-token/interfaces.js");
33318
33319var _index16 = require("./di/index.js");
33320
33321Object.keys(_index16).forEach(function (key) {
33322  if (key === "default" || key === "__esModule") return;
33323  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33324  if (key in exports && exports[key] === _index16[key]) return;
33325  Object.defineProperty(exports, key, {
33326    enumerable: true,
33327    get: function () {
33328      return _index16[key];
33329    }
33330  });
33331});
33332
33333var _index17 = require("./dialog/index.js");
33334
33335Object.keys(_index17).forEach(function (key) {
33336  if (key === "default" || key === "__esModule") return;
33337  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33338  if (key in exports && exports[key] === _index17[key]) return;
33339  Object.defineProperty(exports, key, {
33340    enumerable: true,
33341    get: function () {
33342      return _index17[key];
33343    }
33344  });
33345});
33346
33347var _reflectAttributes = require("./directives/reflect-attributes.js");
33348
33349var _index18 = require("./disclosure/index.js");
33350
33351Object.keys(_index18).forEach(function (key) {

33352  if (key === "default" || key === "__esModule") return;
33353  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33354  if (key in exports && exports[key] === _index18[key]) return;
33355  Object.defineProperty(exports, key, {
33356    enumerable: true,
33357    get: function () {
33358      return _index18[key];
33359    }
33360  });
33361});
33362
33363var _index19 = require("./divider/index.js");
33364
33365Object.keys(_index19).forEach(function (key) {
33366  if (key === "default" || key === "__esModule") return;
33367  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33368  if (key in exports && exports[key] === _index19[key]) return;
33369  Object.defineProperty(exports, key, {
33370    enumerable: true,
33371    get: function () {
33372      return _index19[key];
33373    }
33374  });
33375});
33376
33377var _index20 = require("./flipper/index.js");
33378
33379Object.keys(_index20).forEach(function (key) {
33380  if (key === "default" || key === "__esModule") return;
33381  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33382  if (key in exports && exports[key] === _index20[key]) return;
33383  Object.defineProperty(exports, key, {
33384    enumerable: true,
33385    get: function () {
33386      return _index20[key];
33387    }
33388  });
33389});
33390
33391var _index21 = require("./form-associated/index.js");
33392
33393Object.keys(_index21).forEach(function (key) {
33394  if (key === "default" || key === "__esModule") return;
33395  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33396  if (key in exports && exports[key] === _index21[key]) return;
33397  Object.defineProperty(exports, key, {
33398    enumerable: true,
33399    get: function () {
33400      return _index21[key];
33401    }
33402  });
33403});
33404
33405var _index22 = require("./foundation-element/index.js");
33406
33407Object.keys(_index22).forEach(function (key) {
33408  if (key === "default" || key === "__esModule") return;
33409  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33410  if (key in exports && exports[key] === _index22[key]) return;
33411  Object.defineProperty(exports, key, {
33412    enumerable: true,
33413    get: function () {
33414      return _index22[key];
33415    }
33416  });
33417});
33418
33419var _index23 = require("./listbox-option/index.js");
33420
33421Object.keys(_index23).forEach(function (key) {
33422  if (key === "default" || key === "__esModule") return;
33423  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33424  if (key in exports && exports[key] === _index23[key]) return;
33425  Object.defineProperty(exports, key, {
33426    enumerable: true,
33427    get: function () {
33428      return _index23[key];
33429    }
33430  });
33431});
33432
33433var _index24 = require("./listbox/index.js");
33434
33435Object.keys(_index24).forEach(function (key) {
33436  if (key === "default" || key === "__esModule") return;
33437  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33438  if (key in exports && exports[key] === _index24[key]) return;
33439  Object.defineProperty(exports, key, {
33440    enumerable: true,
33441    get: function () {
33442      return _index24[key];
33443    }
33444  });
33445});
33446
33447var _index25 = require("./picker/index.js");
33448

33449Object.keys(_index25).forEach(function (key) {
33450  if (key === "default" || key === "__esModule") return;
33451  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33452  if (key in exports && exports[key] === _index25[key]) return;
33453  Object.defineProperty(exports, key, {
33454    enumerable: true,
33455    get: function () {
33456      return _index25[key];
33457    }
33458  });
33459});
33460
33461var _index26 = require("./menu-item/index.js");
33462
33463Object.keys(_index26).forEach(function (key) {
33464  if (key === "default" || key === "__esModule") return;
33465  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33466  if (key in exports && exports[key] === _index26[key]) return;
33467  Object.defineProperty(exports, key, {
33468    enumerable: true,
33469    get: function () {
33470      return _index26[key];
33471    }
33472  });
33473});
33474
33475var _index27 = require("./menu/index.js");
33476
33477Object.keys(_index27).forEach(function (key) {
33478  if (key === "default" || key === "__esModule") return;
33479  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33480  if (key in exports && exports[key] === _index27[key]) return;
33481  Object.defineProperty(exports, key, {
33482    enumerable: true,
33483    get: function () {
33484      return _index27[key];
33485    }
33486  });
33487});
33488
33489var _index28 = require("./number-field/index.js");
33490
33491Object.keys(_index28).forEach(function (key) {
33492  if (key === "default" || key === "__esModule") return;
33493  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33494  if (key in exports && exports[key] === _index28[key]) return;
33495  Object.defineProperty(exports, key, {
33496    enumerable: true,
33497    get: function () {
33498      return _index28[key];
33499    }
33500  });
33501});
33502
33503var _index29 = require("./patterns/index.js");
33504
33505Object.keys(_index29).forEach(function (key) {
33506  if (key === "default" || key === "__esModule") return;
33507  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33508  if (key in exports && exports[key] === _index29[key]) return;
33509  Object.defineProperty(exports, key, {
33510    enumerable: true,
33511    get: function () {
33512      return _index29[key];
33513    }
33514  });
33515});
33516
33517var _index30 = require("./progress-ring/index.js");
33518
33519Object.keys(_index30).forEach(function (key) {
33520  if (key === "default" || key === "__esModule") return;
33521  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33522  if (key in exports && exports[key] === _index30[key]) return;
33523  Object.defineProperty(exports, key, {
33524    enumerable: true,
33525    get: function () {
33526      return _index30[key];
33527    }
33528  });
33529});
33530
33531var _index31 = require("./progress/index.js");
33532
33533Object.keys(_index31).forEach(function (key) {
33534  if (key === "default" || key === "__esModule") return;
33535  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33536  if (key in exports && exports[key] === _index31[key]) return;
33537  Object.defineProperty(exports, key, {
33538    enumerable: true,
33539    get: function () {
33540      return _index31[key];
33541    }
33542  });
33543});
33544
33545var _index32 = require("./radio-group/index.js");
33546
33547Object.keys(_index32).forEach(function (key) {
33548  if (key === "default" || key === "__esModule") return;
33549  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33550  if (key in exports && exports[key] === _index32[key]) return;
33551  Object.defineProperty(exports, key, {
33552    enumerable: true,
33553    get: function () {
33554      return _index32[key];
33555    }
33556  });
33557});
33558
33559var _index33 = require("./radio/index.js");
33560
33561Object.keys(_index33).forEach(function (key) {
33562  if (key === "default" || key === "__esModule") return;
33563  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33564  if (key in exports && exports[key] === _index33[key]) return;
33565  Object.defineProperty(exports, key, {
33566    enumerable: true,
33567    get: function () {
33568      return _index33[key];
33569    }
33570  });
33571});
33572
33573var _index34 = require("./horizontal-scroll/index.js");
33574
33575Object.keys(_index34).forEach(function (key) {
33576  if (key === "default" || key === "__esModule") return;
33577  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33578  if (key in exports && exports[key] === _index34[key]) return;
33579  Object.defineProperty(exports, key, {
33580    enumerable: true,
33581    get: function () {
33582      return _index34[key];
33583    }
33584  });
33585});
33586
33587var _index35 = require("./search/index.js");
33588

33589Object.keys(_index35).forEach(function (key) {
33590  if (key === "default" || key === "__esModule") return;
33591  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33592  if (key in exports && exports[key] === _index35[key]) return;
33593  Object.defineProperty(exports, key, {
33594    enumerable: true,
33595    get: function () {
33596      return _index35[key];
33597    }
33598  });
33599});
33600
33601var _index36 = require("./select/index.js");
33602
33603Object.keys(_index36).forEach(function (key) {
33604  if (key === "default" || key === "__esModule") return;
33605  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33606  if (key in exports && exports[key] === _index36[key]) return;
33607  Object.defineProperty(exports, key, {
33608    enumerable: true,
33609    get: function () {
33610      return _index36[key];
33611    }
33612  });
33613});
33614
33615var _index37 = require("./skeleton/index.js");
33616
33617Object.keys(_index37).forEach(function (key) {
33618  if (key === "default" || key === "__esModule") return;
33619  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33620  if (key in exports && exports[key] === _index37[key]) return;
33621  Object.defineProperty(exports, key, {
33622    enumerable: true,
33623    get: function () {
33624      return _index37[key];
33625    }
33626  });
33627});
33628

33629var _index38 = require("./slider-label/index.js");
33630
33631Object.keys(_index38).forEach(function (key) {
33632  if (key === "default" || key === "__esModule") return;
33633  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33634  if (key in exports && exports[key] === _index38[key]) return;
33635  Object.defineProperty(exports, key, {
33636    enumerable: true,
33637    get: function () {
33638      return _index38[key];
33639    }
33640  });
33641});
33642
33643var _index39 = require("./slider/index.js");
33644
33645Object.keys(_index39).forEach(function (key) {
33646  if (key === "default" || key === "__esModule") return;
33647  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33648  if (key in exports && exports[key] === _index39[key]) return;
33649  Object.defineProperty(exports, key, {
33650    enumerable: true,
33651    get: function () {
33652      return _index39[key];
33653    }
33654  });
33655});
33656
33657var _index40 = require("./switch/index.js");
33658
33659Object.keys(_index40).forEach(function (key) {
33660  if (key === "default" || key === "__esModule") return;
33661  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33662  if (key in exports && exports[key] === _index40[key]) return;
33663  Object.defineProperty(exports, key, {
33664    enumerable: true,
33665    get: function () {
33666      return _index40[key];
33667    }
33668  });
33669});
33670
33671var _index41 = require("./tab-panel/index.js");
33672
33673Object.keys(_index41).forEach(function (key) {
33674  if (key === "default" || key === "__esModule") return;
33675  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33676  if (key in exports && exports[key] === _index41[key]) return;
33677  Object.defineProperty(exports, key, {
33678    enumerable: true,
33679    get: function () {
33680      return _index41[key];
33681    }
33682  });
33683});
33684
33685var _index42 = require("./tab/index.js");
33686
33687Object.keys(_index42).forEach(function (key) {
33688  if (key === "default" || key === "__esModule") return;
33689  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33690  if (key in exports && exports[key] === _index42[key]) return;
33691  Object.defineProperty(exports, key, {
33692    enumerable: true,
33693    get: function () {
33694      return _index42[key];
33695    }
33696  });
33697});
33698
33699var _index43 = require("./tabs/index.js");
33700
33701Object.keys(_index43).forEach(function (key) {
33702  if (key === "default" || key === "__esModule") return;
33703  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33704  if (key in exports && exports[key] === _index43[key]) return;
33705  Object.defineProperty(exports, key, {
33706    enumerable: true,
33707    get: function () {
33708      return _index43[key];
33709    }
33710  });
33711});
33712
33713var _index44 = require("./text-area/index.js");
33714
33715Object.keys(_index44).forEach(function (key) {
33716  if (key === "default" || key === "__esModule") return;
33717  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33718  if (key in exports && exports[key] === _index44[key]) return;
33719  Object.defineProperty(exports, key, {
33720    enumerable: true,
33721    get: function () {
33722      return _index44[key];
33723    }
33724  });
33725});
33726
33727var _index45 = require("./text-field/index.js");
33728
33729Object.keys(_index45).forEach(function (key) {
33730  if (key === "default" || key === "__esModule") return;
33731  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33732  if (key in exports && exports[key] === _index45[key]) return;
33733  Object.defineProperty(exports, key, {
33734    enumerable: true,
33735    get: function () {
33736      return _index45[key];
33737    }
33738  });
33739});
33740
33741var _index46 = require("./toolbar/index.js");
33742
33743Object.keys(_index46).forEach(function (key) {
33744  if (key === "default" || key === "__esModule") return;
33745  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33746  if (key in exports && exports[key] === _index46[key]) return;
33747  Object.defineProperty(exports, key, {
33748    enumerable: true,
33749    get: function () {
33750      return _index46[key];
33751    }
33752  });
33753});
33754
33755var _index47 = require("./tooltip/index.js");
33756

33757Object.keys(_index47).forEach(function (key) {
33758  if (key === "default" || key === "__esModule") return;
33759  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33760  if (key in exports && exports[key] === _index47[key]) return;
33761  Object.defineProperty(exports, key, {
33762    enumerable: true,
33763    get: function () {
33764      return _index47[key];
33765    }
33766  });
33767});
33768
33769var _index48 = require("./tree-item/index.js");
33770
33771Object.keys(_index48).forEach(function (key) {
33772  if (key === "default" || key === "__esModule") return;
33773  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33774  if (key in exports && exports[key] === _index48[key]) return;
33775  Object.defineProperty(exports, key, {
33776    enumerable: true,
33777    get: function () {
33778      return _index48[key];
33779    }
33780  });
33781});
33782
33783var _index49 = require("./tree-view/index.js");
33784
33785Object.keys(_index49).forEach(function (key) {
33786  if (key === "default" || key === "__esModule") return;
33787  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33788  if (key in exports && exports[key] === _index49[key]) return;
33789  Object.defineProperty(exports, key, {
33790    enumerable: true,
33791    get: function () {
33792      return _index49[key];
33793    }
33794  });
33795});
33796
33797var _index50 = require("./utilities/index.js");
33798
33799Object.keys(_index50).forEach(function (key) {
33800  if (key === "default" || key === "__esModule") return;
33801  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
33802  if (key in exports && exports[key] === _index50[key]) return;
33803  Object.defineProperty(exports, key, {
33804    enumerable: true,
33805    get: function () {
33806      return _index50[key];
33807    }
33808  });
33809});
33810
33811},{"./accordion-item/index.js":174,"./accordion/index.js":177,"./anchor/index.js":180,"./anchored-region/index.js":184,"./avatar/index.js":187,"./badge/index.js":190,"./breadcrumb-item/index.js":193,"./breadcrumb/index.js":196,"./button/index.js":200,"./calendar/index.js":204,"./card/index.js":207,"./checkbox/index.js":211,"./combobox/index.js":216,"./data-grid/index.js":224,"./design-system/index.js":227,"./design-token/design-token.js":230,"./design-token/interfaces.js":231,"./di/index.js":233,"./dialog/index.js":236,"./directives/reflect-attributes.js":237,"./disclosure/index.js":240,"./divider/index.js":244,"./flipper/index.js":248,"./form-associated/index.js":250,"./foundation-element/index.js":252,"./horizontal-scroll/index.js":255,"./listbox-option/index.js":257,"./listbox/index.js":260,"./menu-item/index.js":264,"./menu/index.js":268,"./number-field/index.js":271,"./patterns/index.js":276,"./picker/index.js":278,"./progress-ring/index.js":290,"./progress/index.js":293,"./radio-group/index.js":295,"./radio/index.js":298,"./search/index.js":302,"./select/index.js":306,"./skeleton/index.js":311,"./slider-label/index.js":314,"./slider/index.js":317,"./switch/index.js":322,"./tab-panel/index.js":326,"./tab/index.js":329,"./tabs/index.js":332,"./text-area/index.js":335,"./text-field/index.js":340,"./toolbar/index.js":345,"./tooltip/index.js":348,"./tree-item/index.js":352,"./tree-view/index.js":355,"./utilities/index.js":362}],257:[function(require,module,exports){
33812"use strict";
33813
33814Object.defineProperty(exports, "__esModule", {
33815  value: true
33816});
33817
33818var _listboxOption = require("./listbox-option.js");
33819
33820Object.keys(_listboxOption).forEach(function (key) {
33821  if (key === "default" || key === "__esModule") return;
33822  if (key in exports && exports[key] === _listboxOption[key]) return;
33823  Object.defineProperty(exports, key, {
33824    enumerable: true,
33825    get: function () {
33826      return _listboxOption[key];
33827    }
33828  });
33829});
33830
33831var _listboxOptionTemplate = require("./listbox-option.template.js");
33832
33833Object.keys(_listboxOptionTemplate).forEach(function (key) {
33834  if (key === "default" || key === "__esModule") return;
33835  if (key in exports && exports[key] === _listboxOptionTemplate[key]) return;
33836  Object.defineProperty(exports, key, {
33837    enumerable: true,
33838    get: function () {
33839      return _listboxOptionTemplate[key];
33840    }
33841  });
33842});
33843
33844},{"./listbox-option.js":258,"./listbox-option.template.js":259}],258:[function(require,module,exports){
33845"use strict";
33846
33847Object.defineProperty(exports, "__esModule", {
33848  value: true
33849});
33850exports.ListboxOption = exports.DelegatesARIAListboxOption = void 0;
33851exports.isListboxOption = isListboxOption;
33852
33853var _tslib = require("tslib");
33854
33855var _fastElement = require("@microsoft/fast-element");
33856
33857var _fastWebUtilities = require("@microsoft/fast-web-utilities");
33858

33859var _foundationElement = require("../foundation-element/foundation-element.js");
33860
33861var _ariaGlobal = require("../patterns/aria-global.js");
33862
33863var _startEnd = require("../patterns/start-end.js");
33864
33865var _applyMixins = require("../utilities/apply-mixins.js");
33866
33867/**
33868 * Determines if the element is a {@link (ListboxOption:class)}
33869 *
33870 * @param element - the element to test.
33871 * @public
33872 */
33873function isListboxOption(el) {
33874  return (0, _fastWebUtilities.isHTMLElement)(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
33875}
33876/**
33877 * An Option Custom HTML Element.
33878 * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
33879 *
33880 * @slot start - Content which can be provided before the listbox option content
33881 * @slot end - Content which can be provided after the listbox option content
33882 * @slot - The default slot for listbox option content
33883 * @csspart content - Wraps the listbox option content
33884 *
33885 * @public
33886 */
33887
33888
33889class ListboxOption extends _foundationElement.FoundationElement {
33890  constructor(text, value, defaultSelected, selected) {
33891    super();
33892    /**
33893     * The defaultSelected state of the option.
33894     * @public
33895     */
33896
33897    this.defaultSelected = false;
33898    /**
33899     * Tracks whether the "selected" property has been changed.
33900     * @internal
33901     */
33902
33903    this.dirtySelected = false;
33904    /**
33905     * The checked state of the control.
33906     *
33907     * @public
33908     */
33909
33910    this.selected = this.defaultSelected;
33911    /**
33912     * Track whether the value has been changed from the initial value
33913     */
33914
33915    this.dirtyValue = false;
33916
33917    if (text) {
33918      this.textContent = text;
33919    }
33920
33921    if (value) {
33922      this.initialValue = value;
33923    }
33924
33925    if (defaultSelected) {
33926      this.defaultSelected = defaultSelected;
33927    }
33928
33929    if (selected) {
33930      this.selected = selected;
33931    }
33932
33933    this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
33934    this.proxy.disabled = this.disabled;
33935  }
33936  /**
33937   * Updates the ariaChecked property when the checked property changes.
33938   *
33939   * @param prev - the previous checked value
33940   * @param next - the current checked value
33941   *
33942   * @public
33943   */
33944
33945
33946  checkedChanged(prev, next) {
33947    if (typeof next === "boolean") {
33948      this.ariaChecked = next ? "true" : "false";
33949      return;
33950    }
33951
33952    this.ariaChecked = null;
33953  }
33954  /**
33955   * Updates the proxy's text content when the default slot changes.
33956   * @param prev - the previous content value
33957   * @param next - the current content value
33958   *
33959   * @internal
33960   */
33961
33962
33963  contentChanged(prev, next) {
33964    if (this.proxy instanceof HTMLOptionElement) {
33965      this.proxy.textContent = this.textContent;
33966    }
33967
33968    this.$emit("contentchange", null, {
33969      bubbles: true
33970    });
33971  }
33972
33973  defaultSelectedChanged() {
33974    if (!this.dirtySelected) {
33975      this.selected = this.defaultSelected;
33976
33977      if (this.proxy instanceof HTMLOptionElement) {
33978        this.proxy.selected = this.defaultSelected;
33979      }
33980    }
33981  }
33982
33983  disabledChanged(prev, next) {
33984    this.ariaDisabled = this.disabled ? "true" : "false";
33985
33986    if (this.proxy instanceof HTMLOptionElement) {
33987      this.proxy.disabled = this.disabled;
33988    }
33989  }
33990
33991  selectedAttributeChanged() {
33992    this.defaultSelected = this.selectedAttribute;
33993
33994    if (this.proxy instanceof HTMLOptionElement) {
33995      this.proxy.defaultSelected = this.defaultSelected;
33996    }
33997  }
33998
33999  selectedChanged() {
34000    this.ariaSelected = this.selected ? "true" : "false";
34001
34002    if (!this.dirtySelected) {
34003      this.dirtySelected = true;
34004    }
34005
34006    if (this.proxy instanceof HTMLOptionElement) {
34007      this.proxy.selected = this.selected;
34008    }
34009  }
34010
34011  initialValueChanged(previous, next) {
34012    // If the value is clean and the component is connected to the DOM
34013    // then set value equal to the attribute value.
34014    if (!this.dirtyValue) {
34015      this.value = this.initialValue;
34016      this.dirtyValue = false;
34017    }
34018  }
34019
34020  get label() {
34021    var _a;
34022
34023    return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
34024  }
34025
34026  get text() {
34027    var _a, _b;
34028
34029    return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
34030  }
34031
34032  set value(next) {
34033    const newValue = `${next !== null && next !== void 0 ? next : ""}`;
34034    this._value = newValue;
34035    this.dirtyValue = true;
34036
34037    if (this.proxy instanceof HTMLOptionElement) {
34038      this.proxy.value = newValue;
34039    }
34040
34041    _fastElement.Observable.notify(this, "value");
34042  }
34043
34044  get value() {
34045    var _a;
34046
34047    _fastElement.Observable.track(this, "value");
34048
34049    return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
34050  }
34051
34052  get form() {
34053    return this.proxy ? this.proxy.form : null;
34054  }
34055
34056}
34057
34058exports.ListboxOption = ListboxOption;
34059(0, _tslib.__decorate)([_fastElement.observable], ListboxOption.prototype, "checked", void 0);
34060(0, _tslib.__decorate)([_fastElement.observable], ListboxOption.prototype, "content", void 0);
34061(0, _tslib.__decorate)([_fastElement.observable], ListboxOption.prototype, "defaultSelected", void 0);
34062(0, _tslib.__decorate)([(0, _fastElement.attr)({
34063  mode: "boolean"
34064})], ListboxOption.prototype, "disabled", void 0);
34065(0, _tslib.__decorate)([(0, _fastElement.attr)({
34066  attribute: "selected",
34067  mode: "boolean"
34068})], ListboxOption.prototype, "selectedAttribute", void 0);
34069(0, _tslib.__decorate)([_fastElement.observable], ListboxOption.prototype, "selected", void 0);
34070(0, _tslib.__decorate)([(0, _fastElement.attr)({
34071  attribute: "value",
34072  mode: "fromView"
34073})], ListboxOption.prototype, "initialValue", void 0);
34074/**
34075 * States and properties relating to the ARIA `option` role.
34076 *
34077 * @public
34078 */
34079
34080class DelegatesARIAListboxOption {}
34081
34082exports.DelegatesARIAListboxOption = DelegatesARIAListboxOption;
34083(0, _tslib.__decorate)([_fastElement.observable], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
34084(0, _tslib.__decorate)([_fastElement.observable], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
34085(0, _tslib.__decorate)([_fastElement.observable], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
34086(0, _tslib.__decorate)([_fastElement.observable], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
34087(0, _applyMixins.applyMixins)(DelegatesARIAListboxOption, _ariaGlobal.ARIAGlobalStatesAndProperties);
34088(0, _applyMixins.applyMixins)(ListboxOption, _startEnd.StartEnd, DelegatesARIAListboxOption);
34089
34090}

34090,{"../foundation-element/foundation-element.js":251,"../patterns/aria-global.js":275,"../patterns/start-end.js":277,"../utilities/apply-mixins.js":358,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],259:[function(require,module,exports){
34091"use strict";
34092
34093Object.defineProperty(exports, "__esModule", {
34094  value: true
34095});
34096exports.listboxOptionTemplate = void 0;
34097
34098var _fastElement = require("@microsoft/fast-element");
34099
34100var _startEnd = require("../patterns/start-end.js");
34101
34102/**
34103 * The template for the {@link @microsoft/fast-foundation#(ListboxOption:class)} component.
34104 * @public
34105 */
34106const listboxOptionTemplate = (context, definition) => (0, _fastElement.html)`
34107    <template
34108        aria-checked="${x => x.ariaChecked}"
34109        aria-disabled="${x => x.ariaDisabled}"
34110        aria-posinset="${x => x.ariaPosInSet}"
34111        aria-selected="${x => x.ariaSelected}"
34112        aria-setsize="${x => x.ariaSetSize}"
34113        class="${x => [x.checked && "checked", x.selected && "selected", x.disabled && "disabled"].filter(Boolean).join(" ")}"
34114        role="option"
34115    >
34116        ${(0, _startEnd.startSlotTemplate)(context, definition)}
34117        <span class="content" part="content">
34118            <slot ${(0, _fastElement.slotted)("content")}></slot>
34119        </span>
34120        ${(0, _startEnd.endSlotTemplate)(context, definition)}
34121    </template>
34122`;
34123
34124exports.listboxOptionTemplate = listboxOptionTemplate;
34125
34126},{"../patterns/start-end.js":277,"@microsoft/fast-element":151}],260:[function(require,module,exports){
34127"use strict";
34128
34129Object.defineProperty(exports, "__esModule", {
34130  value: true
34131});
34132
34133var _listbox = require("./listbox.js");
34134
34135Object.keys(_listbox).forEach(function (key) {
34136  if (key === "default" || key === "__esModule") return;
34137  if (key in exports && exports[key] === _listbox[key]) return;
34138  Object.defineProperty(exports, key, {
34139    enumerable: true,
34140    get: function () {
34141      return _listbox[key];
34142    }
34143  });
34144});
34145
34146var _listboxElement = require("./listbox.element.js");
34147
34148Object.keys(_listboxElement).forEach(function (key) {
34149  if (key === "default" || key === "__esModule") return;
34150  if (key in exports && exports[key] === _listboxElement[key]) return;
34151  Object.defineProperty(exports, key, {
34152    enumerable: true,
34153    get: function () {
34154      return _listboxElement[key];
34155    }
34156  });
34157});
34158
34159var _listboxTemplate = require("./listbox.template.js");
34160
34161Object.keys(_listboxTemplate).forEach(function (key) {
34162  if (key === "default" || key === "__esModule") return;
34163  if (key in exports && exports[key] === _listboxTemplate[key]) return;
34164  Object.defineProperty(exports, key, {
34165    enumerable: true,
34166    get: function () {
34167      return _listboxTemplate[key];
34168    }
34169  });
34170});
34171
34172},{"./listbox.element.js":261,"./listbox.js":262,"./listbox.template.js":263}],261:[function(require,module,exports){
34173"use strict";
34174
34175Object.defineProperty(exports, "__esModule", {
34176  value: true
34177});
34178exports.ListboxElement = void 0;
34179
34180var _tslib = require("tslib");
34181
34182var _fastElement = require("@microsoft/fast-element");
34183
34184var _fastWebUtilities = require("@microsoft/fast-web-utilities");
34185
34186var _listbox = require("./listbox.js");
34187
34188/**
34189 * A Listbox Custom HTML Element.
34190 * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox }.
34191 *
34192 * @public
34193 */
34194class ListboxElement extends _listbox.Listbox {
34195  constructor() {
34196    super(...arguments);
34197    /**
34198     * The index of the most recently checked option.
34199     *
34200     * @internal
34201     * @remarks
34202     * Multiple-selection mode only.
34203     */
34204
34205    this.activeIndex = -1;
34206    /**
34207     * The start index when checking a range of options.
34208     *
34209     * @internal
34210     */
34211
34212    this.rangeStartIndex = -1;
34213  }
34214  /**
34215   * Returns the last checked option.
34216   *
34217   * @internal
34218   */
34219
34220
34221  get activeOption() {
34222    return this.options[this.activeIndex];
34223  }
34224  /**
34225   * Returns the list of checked options.
34226   *
34227   * @internal
34228   */
34229
34230
34231  get checkedOptions() {
34232    var _a;
34233
34234    return (_a = this.options) === null || _a === void 0 ? void 0 : _a.filter(o => o.checked);
34235  }
34236  /**
34237   * Returns the index of the first selected option.
34238   *
34239   * @internal
34240   */
34241
34242
34243  get firstSelectedOptionIndex() {
34244    return this.options.indexOf(this.firstSelectedOption);
34245  }
34246  /**
34247   * Updates the `ariaActiveDescendant` property when the active index changes.
34248   *
34249   * @param prev - the previous active index
34250   * @param next - the next active index
34251   *
34252   * @internal
34253   */
34254
34255
34256  activeIndexChanged(prev, next) {
34257    var _a, _b;
34258
34259    this.ariaActiveDescendant = (_b = (_a = this.options[next]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : "";
34260    this.focusAndScrollOptionIntoView();
34261  }
34262  /**
34263   * Toggles the checked state for the currently active option.
34264   *
34265   * @remarks
34266   * Multiple-selection mode only.
34267   *
34268   * @internal
34269   */
34270
34271
34272  checkActiveIndex() {
34273    if (!this.multiple) {
34274      return;
34275    }
34276
34277    const activeItem = this.activeOption;
34278
34279    if (activeItem) {
34280      activeItem.checked = true;
34281    }
34282  }
34283  /**
34284   * Sets the active index to the first option and marks it as checked.
34285   *
34286   * @remarks
34287   * Multi-selection mode only.
34288   *
34289   * @param preserveChecked - mark all options unchecked before changing the active index
34290   *
34291   * @internal
34292   */
34293
34294
34295  checkFirstOption(preserveChecked = false) {
34296    if (preserveChecked) {
34297      if (this.rangeStartIndex === -1) {
34298        this.rangeStartIndex = this.activeIndex + 1;
34299      }
34300
34301      this.options.forEach((o, i) => {
34302        o.checked = (0, _fastWebUtilities.inRange)(i, this.rangeStartIndex);
34303      });
34304    } else {
34305      this.uncheckAllOptions();
34306    }
34307
34308    this.activeIndex = 0;
34309    this.checkActiveIndex();
34310  }
34311  /**
34312   * Decrements the active index and sets the matching option as checked.
34313   *
34314   * @remarks
34315   * Multi-selection mode only.
34316   *
34317   * @param preserveChecked - mark all options unchecked before changing the active index
34318   *
34319   * @internal
34320   */
34321
34322
34323  checkLastOption(preserveChecked = false) {
34324    if (preserveChecked) {
34325      if (this.rangeStartIndex === -1) {
34326        this.rangeStartIndex = this.activeIndex;
34327      }
34328
34329      this.options.forEach((o, i) => {
34330        o.checked = (0, _fastWebUtilities.inRange)(i, this.rangeStartIndex, this.options.length);
34331      });
34332    } else {
34333      this.uncheckAllOptions();
34334    }
34335
34336    this.activeIndex = this.options.length - 1;
34337    this.checkActiveIndex();
34338  }
34339  /**
34340   * @override
34341   * @internal
34342   */
34343
34344
34345  connectedCallback() {
34346    super.connectedCallback();
34347    this.addEventListener("focusout", this.focusoutHandler);
34348  }
34349  /**
34350   * @override
34351   * @internal
34352   */
34353
34354
34355  disconnectedCallback() {
34356    this.removeEventListener("focusout", this.focusoutHandler);
34357    super.disconnectedCallback();
34358  }
34359  /**
34360   * Increments the active index and marks the matching option as checked.
34361   *
34362   * @remarks
34363   * Multiple-selection mode only.
34364   *
34365   * @param preserveChecked - mark all options unchecked before changing the active index
34366   *
34367   * @internal
34368   */
34369
34370
34371  checkNextOption(preserveChecked = false) {
34372    if (preserveChecked) {
34373      if (this.rangeStartIndex === -1) {
34374        this.rangeStartIndex = this.activeIndex;
34375      }
34376
34377      this.options.forEach((o, i) => {
34378        o.checked = (0, _fastWebUtilities.inRange)(i, this.rangeStartIndex, this.activeIndex + 1);
34379      });
34380    } else {
34381      this.uncheckAllOptions();
34382    }
34383
34384    this.activeIndex += this.activeIndex < this.options.length - 1 ? 1 : 0;
34385    this.checkActiveIndex();
34386  }
34387  /**
34388   * Decrements the active index and marks the matching option as checked.
34389   *
34390   * @remarks
34391   * Multiple-selection mode only.
34392   *
34393   * @param preserveChecked - mark all options unchecked before changing the active index
34394   *
34395   * @internal
34396   */
34397
34398
34399  checkPreviousOption(preserveChecked = false) {
34400    if (preserveChecked) {
34401      if (this.rangeStartIndex === -1) {
34402        this.rangeStartIndex = this.activeIndex;
34403      }
34404
34405      if (this.checkedOptions.length === 1) {
34406        this.rangeStartIndex += 1;
34407      }
34408
34409      this.options.forEach((o, i) => {
34410        o.checked = (0, _fastWebUtilities.inRange)(i, this.activeIndex, this.rangeStartIndex);
34411      });
34412    } else {
34413      this.uncheckAllOptions();
34414    }
34415
34416    this.activeIndex -= this.activeIndex > 0 ? 1 : 0;
34417    this.checkActiveIndex();
34418  }
34419  /**
34420   * Handles click events for listbox options.
34421   *
34422   * @param e - the event object
34423   *
34424   * @override
34425   * @internal
34426   */
34427
34428
34429  clickHandler(e) {
34430    var _a;
34431
34432    if (!this.multiple) {
34433      return super.clickHandler(e);
34434    }
34435
34436    const captured = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest(`[role=option]`);
34437
34438    if (!captured || captured.disabled) {
34439      return;
34440    }
34441
34442    this.uncheckAllOptions();
34443    this.activeIndex = this.options.indexOf(captured);
34444    this.checkActiveIndex();
34445    this.toggleSelectedForAllCheckedOptions();
34446    return true;
34447  }
34448  /**
34449   * @override
34450   * @internal
34451   */
34452
34453
34454  focusAndScrollOptionIntoView() {
34455    super.focusAndScrollOptionIntoView(this.activeOption);
34456  }
34457  /**
34458   * In multiple-selection mode:
34459   * If any options are selected, the first selected option is checked when
34460   * the listbox receives focus. If no options are selected, the first
34461   * selectable option is checked.
34462   *
34463   * @override
34464   * @internal
34465   */
34466
34467
34468  focusinHandler(e) {
34469    if (!this.multiple) {

34470      return super.focusinHandler(e);
34471    }
34472
34473    if (!this.shouldSkipFocus && e.target === e.currentTarget) {
34474      this.uncheckAllOptions();
34475
34476      if (this.activeIndex === -1) {
34477        this.activeIndex = this.firstSelectedOptionIndex !== -1 ? this.firstSelectedOptionIndex : 0;
34478      }
34479
34480      this.checkActiveIndex();
34481      this.setSelectedOptions();
34482      this.focusAndScrollOptionIntoView();
34483    }
34484
34485    this.shouldSkipFocus = false;
34486  }
34487  /**
34488   * Unchecks all options when the listbox loses focus.
34489   *
34490   * @internal
34491   */
34492
34493
34494  focusoutHandler(e) {
34495    if (this.multiple) {
34496      this.uncheckAllOptions();
34497    }
34498  }
34499  /**
34500   * Handles keydown actions for listbox navigation and typeahead
34501   *
34502   * @override
34503   * @internal
34504   */
34505
34506
34507  keydownHandler(e) {
34508    if (!this.multiple) {
34509      return super.keydownHandler(e);
34510    }
34511
34512    if (this.disabled) {
34513      return true;
34514    }
34515
34516    const {
34517      key,
34518      shiftKey
34519    } = e;
34520    this.shouldSkipFocus = false;
34521
34522    switch (key) {
34523      // Select the first available option
34524      case _fastWebUtilities.keyHome:
34525        {
34526          this.checkFirstOption(shiftKey);
34527          return;
34528        }
34529      // Select the next selectable option
34530
34531      case _fastWebUtilities.keyArrowDown:
34532        {
34533          this.checkNextOption(shiftKey);
34534          return;
34535        }
34536      // Select the previous selectable option
34537
34538      case _fastWebUtilities.keyArrowUp:
34539        {
34540          this.checkPreviousOption(shiftKey);
34541          return;
34542        }
34543      // Select the last available option
34544
34545      case _fastWebUtilities.keyEnd:
34546        {
34547          this.checkLastOption(shiftKey);
34548          return;
34549        }
34550
34551      case _fastWebUtilities.keyTab:
34552        {
34553          this.focusAndScrollOptionIntoView();
34554          return true;
34555        }
34556
34557      case _fastWebUtilities.keyEscape:
34558        {
34559          this.uncheckAllOptions();
34560          this.checkActiveIndex();
34561          return true;
34562        }
34563
34564      case _fastWebUtilities.keySpace:
34565        {
34566          e.preventDefault();
34567
34568          if (this.typeAheadExpired) {
34569            this.toggleSelectedForAllCheckedOptions();
34570            return;
34571          }
34572        }
34573      // Send key to Typeahead handler
34574
34575      default:
34576        {
34577          if (key.length === 1) {
34578            this.handleTypeAhead(`${key}`);
34579          }
34580
34581          return true;
34582        }
34583    }
34584  }
34585  /**
34586   * Prevents `focusin` events from firing before `click` events when the
34587   * element is unfocused.
34588   *
34589   * @override
34590   * @internal
34591   */
34592
34593
34594  mousedownHandler(e) {
34595    if (e.offsetX >= 0 && e.offsetX <= this.scrollWidth) {
34596      return super.mousedownHandler(e);
34597    }
34598  }
34599  /**
34600   * Switches between single-selection and multi-selection mode.
34601   *
34602   * @internal
34603   */
34604
34605
34606  multipleChanged(prev, next) {
34607    var _a;
34608
34609    this.ariaMultiSelectable = next ? "true" : null;
34610    (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
34611      o.checked = next ? false : undefined;
34612    });
34613    this.setSelectedOptions();
34614  }
34615  /**
34616   * Sets an option as selected and gives it focus.
34617   *
34618   * @override
34619   * @public
34620   */
34621
34622
34623  setSelectedOptions() {
34624    if (!this.multiple) {
34625      super.setSelectedOptions();
34626      return;
34627    }
34628
34629    if (this.$fastController.isConnected && this.options) {
34630      this.selectedOptions = this.options.filter(o => o.selected);
34631      this.focusAndScrollOptionIntoView();
34632    }
34633  }
34634  /**
34635   * Ensures the size is a positive integer when the property is updated.
34636   *
34637   * @param prev - the previous size value
34638   * @param next - the current size value
34639   *
34640   * @internal
34641   */
34642
34643
34644  sizeChanged(prev, next) {
34645    var _a;
34646
34647    const size = Math.max(0, parseInt((_a = next === null || next === void 0 ? void 0 : next.toFixed()) !== null && _a !== void 0 ? _a : "", 10));
34648
34649    if (size !== next) {
34650      _fastElement.DOM.queueUpdate(() => {
34651        this.size = size;
34652      });
34653    }
34654  }
34655  /**
34656   * Toggles the selected state of the provided options. If any provided items
34657   * are in an unselected state, all items are set to selected. If every
34658   * provided item is selected, they are all unselected.
34659   *
34660   * @internal
34661   */
34662
34663
34664  toggleSelectedForAllCheckedOptions() {
34665    const enabledCheckedOptions = this.checkedOptions.filter(o => !o.disabled);
34666    const force = !enabledCheckedOptions.every(o => o.selected);
34667    enabledCheckedOptions.forEach(o => o.selected = force);
34668    this.selectedIndex = this.options.indexOf(enabledCheckedOptions[enabledCheckedOptions.length - 1]);
34669    this.setSelectedOptions();
34670  }
34671  /**
34672   * @override
34673   * @internal
34674   */
34675
34676
34677  typeaheadBufferChanged(prev, next) {
34678    if (!this.multiple) {
34679      super.typeaheadBufferChanged(prev, next);
34680      return;
34681    }
34682
34683    if (this.$fastController.isConnected) {
34684      const typeaheadMatches = this.getTypeaheadMatches();
34685      const activeIndex = this.options.indexOf(typeaheadMatches[0]);
34686
34687      if (activeIndex > -1) {
34688        this.activeIndex = activeIndex;
34689        this.uncheckAllOptions();
34690        this.checkActiveIndex();
34691      }
34692
34693      this.typeAheadExpired = false;

34694    }
34695  }
34696  /**
34697   * Unchecks all options.
34698   *
34699   * @remarks
34700   * Multiple-selection mode only.
34701   *
34702   * @param preserveChecked - reset the rangeStartIndex
34703   *
34704   * @internal
34705   */
34706
34707
34708  uncheckAllOptions(preserveChecked = false) {
34709    this.options.forEach(o => o.checked = this.multiple ? false : undefined);
34710
34711    if (!preserveChecked) {
34712      this.rangeStartIndex = -1;
34713    }
34714  }
34715
34716}
34717
34718exports.ListboxElement = ListboxElement;
34719(0, _tslib.__decorate)([_fastElement.observable], ListboxElement.prototype, "activeIndex", void 0);
34720(0, _tslib.__decorate)([(0, _fastElement.attr)({
34721  mode: "boolean"
34722})], ListboxElement.prototype, "multiple", void 0);
34723(0, _tslib.__decorate)([(0, _fastElement.attr)({
34724  converter: _fastElement.nullableNumberConverter
34725})], ListboxElement.prototype, "size", void 0);
34726
34727},{"./listbox.js":262,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],262:[function(require,module,exports){
34728"use strict";
34729
34730Object.defineProperty(exports, "__esModule", {
34731  value: true
34732});
34733exports.Listbox = exports.DelegatesARIAListbox = void 0;
34734
34735var _tslib = require("tslib");
34736
34737var _fastElement = require("@microsoft/fast-element");
34738
34739var _fastWebUtilities = require("@microsoft/fast-web-utilities");
34740
34741var _foundationElement = require("../foundation-element/foundation-element.js");
34742
34743var _listboxOption = require("../listbox-option/listbox-option.js");
34744
34745var _ariaGlobal = require("../patterns/aria-global.js");
34746
34747var _applyMixins = require("../utilities/apply-mixins.js");
34748
34749/**
34750 * A Listbox Custom HTML Element.
34751 * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#listbox | ARIA listbox }.
34752 *
34753 * @slot - The default slot for the listbox options
34754 *
34755 * @public
34756 */
34757class Listbox extends _foundationElement.FoundationElement {
34758  constructor() {
34759    super(...arguments);
34760    /**
34761     * The internal unfiltered list of selectable options.
34762     *
34763     * @internal
34764     */
34765
34766    this._options = [];
34767    /**
34768     * The index of the selected option.
34769     *
34770     * @public
34771     */
34772
34773    this.selectedIndex = -1;
34774    /**
34775     * A collection of the selected options.
34776     *
34777     * @public
34778     */
34779
34780    this.selectedOptions = [];
34781    /**
34782     * A standard `click` event creates a `focus` event before firing, so a
34783     * `mousedown` event is used to skip that initial focus.
34784     *
34785     * @internal
34786     */
34787
34788    this.shouldSkipFocus = false;
34789    /**
34790     * The current typeahead buffer string.
34791     *
34792     * @internal
34793     */
34794
34795    this.typeaheadBuffer = "";
34796    /**
34797     * Flag for the typeahead timeout expiration.
34798     *
34799     * @internal
34800     */
34801
34802    this.typeaheadExpired = true;
34803    /**
34804     * The timeout ID for the typeahead handler.
34805     *
34806     * @internal
34807     */
34808
34809    this.typeaheadTimeout = -1;
34810  }
34811  /**
34812   * The first selected option.
34813   *
34814   * @internal
34815   */
34816
34817
34818  get firstSelectedOption() {
34819    var _a;
34820
34821    return (_a = this.selectedOptions[0]) !== null && _a !== void 0 ? _a : null;
34822  }
34823  /**
34824   * Returns true if there is one or more selectable option.
34825   *
34826   * @internal
34827   */
34828
34829
34830  get hasSelectableOptions() {
34831    return this.options.length > 0 && !this.options.every(o => o.disabled);
34832  }
34833  /**
34834   * The number of options.
34835   *
34836   * @public
34837   */
34838
34839
34840  get length() {
34841    var _a, _b;
34842
34843    return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
34844  }
34845  /**
34846   * The list of options.
34847   *
34848   * @public
34849   */
34850
34851
34852  get options() {
34853    _fastElement.Observable.track(this, "options");
34854
34855    return this._options;
34856  }
34857
34858  set options(value) {
34859    this._options = value;
34860
34861    _fastElement.Observable.notify(this, "options");
34862  }
34863  /**
34864   * Flag for the typeahead timeout expiration.
34865   *
34866   * @deprecated use `Listbox.typeaheadExpired`
34867   * @internal
34868   */
34869
34870
34871  get typeAheadExpired() {
34872    return this.typeaheadExpired;
34873  }
34874
34875  set typeAheadExpired(value) {
34876    this.typeaheadExpired = value;
34877  }
34878  /**
34879   * Handle click events for listbox options.
34880   *
34881   * @internal
34882   */
34883
34884
34885  clickHandler(e) {
34886    const captured = e.target.closest(`option,[role=option]`);
34887
34888    if (captured && !captured.disabled) {
34889      this.selectedIndex = this.options.indexOf(captured);
34890      return true;
34891    }
34892  }
34893  /**
34894   * Ensures that the provided option is focused and scrolled into view.
34895   *
34896   * @param optionToFocus - The option to focus
34897   * @internal
34898   */
34899
34900
34901  focusAndScrollOptionIntoView(optionToFocus = this.firstSelectedOption) {
34902    // To ensure that the browser handles both `focus()` and `scrollIntoView()`, the
34903    // timing here needs to guarantee that they happen on different frames. Since this
34904    // function is typically called from the `openChanged` observer, `DOM.queueUpdate`
34905    // causes the calls to be grouped into the same frame. To prevent this,
34906    // `requestAnimationFrame` is used instead of `DOM.queueUpdate`.
34907    if (this.contains(document.activeElement) && optionToFocus !== null) {
34908      optionToFocus.focus();
34909      requestAnimationFrame(() => {
34910        optionToFocus.scrollIntoView({
34911          block: "nearest"
34912        });
34913      });
34914    }
34915  }
34916  /**
34917   * Handles `focusin` actions for the component. When the component receives focus,
34918   * the list of selected options is refreshed and the first selected option is scrolled
34919   * into view.
34920   *
34921   * @internal
34922   */
34923
34924
34925  focusinHandler(e) {
34926    if (!this.shouldSkipFocus && e.target === e.currentTarget) {
34927      this.setSelectedOptions();
34928      this.focusAndScrollOptionIntoView();
34929    }
34930
34931    this.shouldSkipFocus = false;

34932  }
34933  /**
34934   * Returns the options which match the current typeahead buffer.
34935   *
34936   * @internal
34937   */
34938
34939
34940  getTypeaheadMatches() {
34941    const pattern = this.typeaheadBuffer.replace(/[.*+\-?^${}()|[\]\\]/g, "\\$&");
34942    const re = new RegExp(`^${pattern}`, "gi");
34943    return this.options.filter(o => o.text.trim().match(re));
34944  }
34945  /**
34946   * Determines the index of the next option which is selectable, if any.
34947   *
34948   * @param prev - the previous selected index
34949   * @param next - the next index to select
34950   *
34951   * @internal
34952   */
34953
34954
34955  getSelectableIndex(prev = this.selectedIndex, next) {
34956    const direction = prev > next ? -1 : prev < next ? 1 : 0;
34957    const potentialDirection = prev + direction;
34958    let nextSelectableOption = null;
34959
34960    switch (direction) {
34961      case -1:
34962        {
34963          nextSelectableOption = this.options.reduceRight((nextSelectableOption, thisOption, index) => !nextSelectableOption && !thisOption.disabled && index < potentialDirection ? thisOption : nextSelectableOption, nextSelectableOption);
34964          break;
34965        }
34966
34967      case 1:
34968        {
34969          nextSelectableOption = this.options.reduce((nextSelectableOption, thisOption, index) => !nextSelectableOption && !thisOption.disabled && index > potentialDirection ? thisOption : nextSelectableOption, nextSelectableOption);
34970          break;
34971        }
34972    }
34973
34974    return this.options.indexOf(nextSelectableOption);
34975  }
34976  /**
34977   * Handles external changes to child options.
34978   *
34979   * @param source - the source object
34980   * @param propertyName - the property
34981   *
34982   * @internal
34983   */
34984
34985
34986  handleChange(source, propertyName) {
34987    switch (propertyName) {
34988      case "selected":
34989        {
34990          if (Listbox.slottedOptionFilter(source)) {
34991            this.selectedIndex = this.options.indexOf(source);
34992          }
34993
34994          this.setSelectedOptions();
34995          break;
34996        }
34997    }
34998  }
34999  /**
35000   * Moves focus to an option whose label matches characters typed by the user.
35001   * Consecutive keystrokes are batched into a buffer of search text used
35002   * to match against the set of options.  If `TYPE_AHEAD_TIMEOUT_MS` passes
35003   * between consecutive keystrokes, the search restarts.
35004   *
35005   * @param key - the key to be evaluated
35006   *
35007   * @internal
35008   */
35009
35010
35011  handleTypeAhead(key) {
35012    if (this.typeaheadTimeout) {
35013      window.clearTimeout(this.typeaheadTimeout);
35014    }
35015
35016    this.typeaheadTimeout = window.setTimeout(() => this.typeaheadExpired = true, Listbox.TYPE_AHEAD_TIMEOUT_MS);
35017
35018    if (key.length > 1) {
35019      return;
35020    }
35021
35022    this.typeaheadBuffer = `${this.typeaheadExpired ? "" : this.typeaheadBuffer}${key}`;
35023  }
35024  /**
35025   * Handles `keydown` actions for listbox navigation and typeahead.
35026   *
35027   * @internal
35028   */
35029
35030
35031  keydownHandler(e) {
35032    if (this.disabled) {
35033      return true;
35034    }
35035
35036    this.shouldSkipFocus = false;
35037    const key = e.key;
35038
35039    switch (key) {
35040      // Select the first available option
35041      case _fastWebUtilities.keyHome:
35042        {
35043          if (!e.shiftKey) {
35044            e.preventDefault();
35045            this.selectFirstOption();
35046          }
35047
35048          break;
35049        }
35050      // Select the next selectable option
35051
35052      case _fastWebUtilities.keyArrowDown:
35053        {
35054          if (!e.shiftKey) {
35055            e.preventDefault();
35056            this.selectNextOption();
35057          }
35058
35059          break;
35060        }
35061      // Select the previous selectable option
35062
35063      case _fastWebUtilities.keyArrowUp:
35064        {
35065          if (!e.shiftKey) {
35066            e.preventDefault();
35067            this.selectPreviousOption();
35068          }
35069
35070          break;
35071        }
35072      // Select the last available option
35073
35074      case _fastWebUtilities.keyEnd:
35075        {
35076          e.preventDefault();
35077          this.selectLastOption();
35078          break;
35079        }
35080
35081      case _fastWebUtilities.keyTab:
35082        {
35083          this.focusAndScrollOptionIntoView();
35084          return true;
35085        }
35086
35087      case _fastWebUtilities.keyEnter:
35088      case _fastWebUtilities.keyEscape:
35089        {
35090          return true;
35091        }
35092
35093      case _fastWebUtilities.keySpace:
35094        {
35095          if (this.typeaheadExpired) {
35096            return true;
35097          }
35098        }
35099      // Send key to Typeahead handler
35100
35101      default:
35102        {
35103          if (key.length === 1) {
35104            this.handleTypeAhead(`${key}`);
35105          }
35106
35107          return true;
35108        }
35109    }
35110  }
35111  /**
35112   * Prevents `focusin` events from firing before `click` events when the
35113   * element is unfocused.
35114   *
35115   * @internal
35116   */
35117
35118
35119  mousedownHandler(e) {
35120    this.shouldSkipFocus = !this.contains(document.activeElement);
35121    return true;
35122  }
35123  /**
35124   * Switches between single-selection and multi-selection mode.
35125   *
35126   * @param prev - the previous value of the `multiple` attribute
35127   * @param next - the next value of the `multiple` attribute
35128   *
35129   * @internal
35130   */
35131
35132
35133  multipleChanged(prev, next) {
35134    this.ariaMultiSelectable = next ? "true" : null;
35135  }
35136  /**
35137   * Updates the list of selected options when the `selectedIndex` changes.
35138   *
35139   * @param prev - the previous selected index value
35140   * @param next - the current selected index value
35141   *
35142   * @internal
35143   */
35144
35145
35146  selectedIndexChanged(prev, next) {
35147    var _a;
35148
35149    if (!this.hasSelectableOptions) {
35150      this.selectedIndex = -1;
35151      return;
35152    }
35153
35154    if (((_a = this.options[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.disabled) && typeof prev === "number") {

35155      const selectableIndex = this.getSelectableIndex(prev, next);
35156      const newNext = selectableIndex > -1 ? selectableIndex : prev;
35157      this.selectedIndex = newNext;
35158
35159      if (next === newNext) {
35160        this.selectedIndexChanged(next, newNext);
35161      }
35162
35163      return;
35164    }
35165
35166    this.setSelectedOptions();
35167  }
35168  /**
35169   * Updates the selectedness of each option when the list of selected options changes.
35170   *
35171   * @param prev - the previous list of selected options
35172   * @param next - the current list of selected options
35173   *
35174   * @internal
35175   */
35176
35177
35178  selectedOptionsChanged(prev, next) {
35179    var _a;
35180
35181    const filteredNext = next.filter(Listbox.slottedOptionFilter);
35182    (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
35183      const notifier = _fastElement.Observable.getNotifier(o);
35184
35185      notifier.unsubscribe(this, "selected");
35186      o.selected = filteredNext.includes(o);
35187      notifier.subscribe(this, "selected");
35188    });
35189  }
35190  /**
35191   * Moves focus to the first selectable option.
35192   *
35193   * @public
35194   */
35195
35196
35197  selectFirstOption() {
35198    var _a, _b;
35199
35200    if (!this.disabled) {
35201      this.selectedIndex = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex(o => !o.disabled)) !== null && _b !== void 0 ? _b : -1;
35202    }
35203  }
35204  /**
35205   * Moves focus to the last selectable option.
35206   *
35207   * @internal
35208   */
35209
35210
35211  selectLastOption() {
35212    if (!this.disabled) {
35213      this.selectedIndex = (0, _fastWebUtilities.findLastIndex)(this.options, o => !o.disabled);
35214    }
35215  }
35216  /**
35217   * Moves focus to the next selectable option.
35218   *
35219   * @internal
35220   */
35221
35222
35223  selectNextOption() {
35224    if (!this.disabled && this.selectedIndex < this.options.length - 1) {
35225      this.selectedIndex += 1;
35226    }
35227  }
35228  /**
35229   * Moves focus to the previous selectable option.
35230   *
35231   * @internal
35232   */
35233
35234
35235  selectPreviousOption() {
35236    if (!this.disabled && this.selectedIndex > 0) {
35237      this.selectedIndex = this.selectedIndex - 1;
35238    }
35239  }
35240  /**
35241   * Updates the selected index to match the first selected option.
35242   *
35243   * @internal
35244   */
35245
35246
35247  setDefaultSelectedOption() {
35248    var _a, _b;
35249
35250    this.selectedIndex = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex(el => el.defaultSelected)) !== null && _b !== void 0 ? _b : -1;
35251  }
35252  /**
35253   * Sets an option as selected and gives it focus.
35254   *
35255   * @public
35256   */
35257
35258
35259  setSelectedOptions() {
35260    var _a, _b, _c;
35261
35262    if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) {
35263      this.selectedOptions = [this.options[this.selectedIndex]];
35264      this.ariaActiveDescendant = (_c = (_b = this.firstSelectedOption) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : "";
35265      this.focusAndScrollOptionIntoView();
35266    }
35267  }
35268  /**
35269   * Updates the list of options and resets the selected option when the slotted option content changes.
35270   *
35271   * @param prev - the previous list of slotted options
35272   * @param next - the current list of slotted options
35273   *
35274   * @internal
35275   */
35276
35277
35278  slottedOptionsChanged(prev, next) {
35279    this.options = next.reduce((options, item) => {
35280      if ((0, _listboxOption.isListboxOption)(item)) {
35281        options.push(item);
35282      }
35283
35284      return options;
35285    }, []);
35286    const setSize = `${this.options.length}`;
35287    this.options.forEach((option, index) => {
35288      if (!option.id) {
35289        option.id = (0, _fastWebUtilities.uniqueId)("option-");
35290      }
35291
35292      option.ariaPosInSet = `${index + 1}`;
35293      option.ariaSetSize = setSize;
35294    });
35295
35296    if (this.$fastController.isConnected) {
35297      this.setSelectedOptions();
35298      this.setDefaultSelectedOption();
35299    }
35300  }
35301  /**
35302   * Updates the filtered list of options when the typeahead buffer changes.
35303   *
35304   * @param prev - the previous typeahead buffer value
35305   * @param next - the current typeahead buffer value
35306   *
35307   * @internal
35308   */
35309
35310
35311  typeaheadBufferChanged(prev, next) {
35312    if (this.$fastController.isConnected) {
35313      const typeaheadMatches = this.getTypeaheadMatches();
35314
35315      if (typeaheadMatches.length) {
35316        const selectedIndex = this.options.indexOf(typeaheadMatches[0]);
35317
35318        if (selectedIndex > -1) {
35319          this.selectedIndex = selectedIndex;
35320        }
35321      }
35322
35323      this.typeaheadExpired = false;

35324    }
35325  }
35326
35327}
35328/**
35329 * A static filter to include only selectable options.
35330 *
35331 * @param n - element to filter
35332 * @public
35333 */
35334
35335
35336exports.Listbox = Listbox;
35337
35338Listbox.slottedOptionFilter = n => (0, _listboxOption.isListboxOption)(n) && !n.hidden;
35339/**
35340 * Typeahead timeout in milliseconds.
35341 *
35342 * @internal
35343 */
35344
35345
35346Listbox.TYPE_AHEAD_TIMEOUT_MS = 1000;
35347(0, _tslib.__decorate)([(0, _fastElement.attr)({
35348  mode: "boolean"
35349})], Listbox.prototype, "disabled", void 0);
35350(0, _tslib.__decorate)([_fastElement.observable], Listbox.prototype, "selectedIndex", void 0);
35351(0, _tslib.__decorate)([_fastElement.observable], Listbox.prototype, "selectedOptions", void 0);
35352(0, _tslib.__decorate)([_fastElement.observable], Listbox.prototype, "slottedOptions", void 0);
35353(0, _tslib.__decorate)([_fastElement.observable], Listbox.prototype, "typeaheadBuffer", void 0);
35354/**
35355 * Includes ARIA states and properties relating to the ARIA listbox role
35356 *
35357 * @public
35358 */
35359
35360class DelegatesARIAListbox {}
35361
35362exports.DelegatesARIAListbox = DelegatesARIAListbox;
35363(0, _tslib.__decorate)([_fastElement.observable], DelegatesARIAListbox.prototype, "ariaActiveDescendant", void 0);
35364(0, _tslib.__decorate)([_fastElement.observable], DelegatesARIAListbox.prototype, "ariaDisabled", void 0);
35365(0, _tslib.__decorate)([_fastElement.observable], DelegatesARIAListbox.prototype, "ariaExpanded", void 0);
35366(0, _tslib.__decorate)([_fastElement.observable], DelegatesARIAListbox.prototype, "ariaMultiSelectable", void 0);
35367(0, _applyMixins.applyMixins)(DelegatesARIAListbox, _ariaGlobal.ARIAGlobalStatesAndProperties);
35368(0, _applyMixins.applyMixins)(Listbox, DelegatesARIAListbox);
35369
35370},{"../foundation-element/foundation-element.js":251,"../listbox-option/listbox-option.js":258,"../patterns/aria-global.js":275,"../utilities/apply-mixins.js":358,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],263:[function(require,module,exports){
35371"use strict";
35372
35373Object.defineProperty(exports, "__esModule", {
35374  value: true
35375});
35376exports.listboxTemplate = void 0;
35377
35378var _fastElement = require("@microsoft/fast-element");
35379
35380var _listboxElement = require("./listbox.element.js");
35381
35382/**
35383 * The template for the {@link @microsoft/fast-foundation#(Listbox:class)} component.
35384 * @public
35385 */
35386const listboxTemplate = (context, definition) => (0, _fastElement.html)`
35387    <template
35388        aria-activedescendant="${x => x.ariaActiveDescendant}"
35389        aria-multiselectable="${x => x.ariaMultiSelectable}"
35390        class="listbox"
35391        role="listbox"
35392        tabindex="${x => !x.disabled ? "0" : null}"
35393        @click="${(x, c) => x.clickHandler(c.event)}"
35394        @focusin="${(x, c) => x.focusinHandler(c.event)}"
35395        @keydown="${(x, c) => x.keydownHandler(c.event)}"
35396        @mousedown="${(x, c) => x.mousedownHandler(c.event)}"
35397    >
35398        <slot
35399            ${(0, _fastElement.slotted)({
35400  filter: _listboxElement.ListboxElement.slottedOptionFilter,
35401  flatten: true,
35402  property: "slottedOptions"
35403})}
35404        ></slot>
35405    </template>
35406`;
35407
35408exports.listboxTemplate = listboxTemplate;
35409
35410},{"./listbox.element.js":261,"@microsoft/fast-element":151}],264:[function(require,module,exports){
35411"use strict";
35412
35413Object.defineProperty(exports, "__esModule", {
35414  value: true
35415});
35416
35417var _menuItemTemplate = require("./menu-item.template.js");
35418
35419Object.keys(_menuItemTemplate).forEach(function (key) {
35420  if (key === "default" || key === "__esModule") return;
35421  if (key in exports && exports[key] === _menuItemTemplate[key]) return;
35422  Object.defineProperty(exports, key, {
35423    enumerable: true,
35424    get: function () {
35425      return _menuItemTemplate[key];
35426    }
35427  });
35428});
35429
35430var _menuItem = require("./menu-item.js");
35431
35432Object.keys(_menuItem).forEach(function (key) {
35433  if (key === "default" || key === "__esModule") return;
35434  if (key in exports && exports[key] === _menuItem[key]) return;
35435  Object.defineProperty(exports, key, {
35436    enumerable: true,
35437    get: function () {
35438      return _menuItem[key];
35439    }
35440  });
35441});
35442
35443},{"./menu-item.js":265,"./menu-item.template.js":267}],265:[function(require,module,exports){
35444"use strict";
35445
35446Object.defineProperty(exports, "__esModule", {
35447  value: true
35448});
35449exports.MenuItem = void 0;
35450Object.defineProperty(exports, "MenuItemRole", {
35451  enumerable: true,
35452  get: function () {
35453    return _menuItemOptions.MenuItemRole;
35454  }
35455});
35456Object.defineProperty(exports, "roleForMenuItem", {
35457  enumerable: true,
35458  get: function () {
35459    return _menuItemOptions.roleForMenuItem;
35460  }
35461});
35462
35463var _tslib = require("tslib");
35464
35465var _fastElement = require("@microsoft/fast-element");
35466
35467var _fastWebUtilities = require("@microsoft/fast-web-utilities");
35468

35469var _foundationElement = require("../foundation-element/foundation-element.js");
35470
35471var _startEnd = require("../patterns/start-end.js");
35472
35473var _direction = require("../utilities/direction.js");
35474
35475var _applyMixins = require("../utilities/apply-mixins.js");
35476
35477var _menuItemOptions = require("./menu-item.options.js");
35478
35479/**
35480 * A Switch Custom HTML Element.
35481 * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
35482 *
35483 * @slot checked-indicator - The checked indicator
35484 * @slot radio-indicator - The radio indicator
35485 * @slot start - Content which can be provided before the menu item content
35486 * @slot end - Content which can be provided after the menu item content
35487 * @slot - The default slot for menu item content
35488 * @slot expand-collapse-indicator - The expand/collapse indicator
35489 * @slot submenu - Used to nest menu's within menu items
35490 * @csspart input-container - The element representing the visual checked or radio indicator
35491 * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
35492 * @csspart radio - The element wrapping the `menuitemradio` indicator
35493 * @csspart content - The element wrapping the menu item content
35494 * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
35495 * @csspart expand-collapse - The expand/collapse element
35496 * @csspart submenu-region - The container for the submenu, used for positioning
35497 * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
35498 * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
35499 *
35500 * @public
35501 */
35502class MenuItem extends _foundationElement.FoundationElement {
35503  constructor() {
35504    super(...arguments);
35505    /**
35506     * The role of the element.
35507     *
35508     * @public
35509     * @remarks
35510     * HTML Attribute: role
35511     */
35512
35513    this.role = _menuItemOptions.MenuItemRole.menuitem;
35514    /**
35515     * @internal
35516     */
35517
35518    this.hasSubmenu = false;
35519    /**
35520     * Track current direction to pass to the anchored region
35521     *
35522     * @internal
35523     */
35524
35525    this.currentDirection = _fastWebUtilities.Direction.ltr;
35526    this.focusSubmenuOnLoad = false;
35527    /**
35528     * @internal
35529     */
35530
35531    this.handleMenuItemKeyDown = e => {
35532      if (e.defaultPrevented) {
35533        return false;
35534      }
35535
35536      switch (e.key) {
35537        case _fastWebUtilities.keyEnter:
35538        case _fastWebUtilities.keySpace:
35539          this.invoke();
35540          return false;
35541
35542        case _fastWebUtilities.keyArrowRight:
35543          //open/focus on submenu
35544          this.expandAndFocus();
35545          return false;
35546
35547        case _fastWebUtilities.keyArrowLeft:
35548          //close submenu
35549          if (this.expanded) {
35550            this.expanded = false;
35551            this.focus();
35552            return false;
35553          }
35554
35555      }
35556
35557      return true;
35558    };
35559    /**
35560     * @internal
35561     */
35562
35563
35564    this.handleMenuItemClick = e => {
35565      if (e.defaultPrevented || this.disabled) {
35566        return false;
35567      }
35568
35569      this.invoke();
35570      return false;
35571    };
35572    /**
35573     * @internal
35574     */
35575
35576
35577    this.submenuLoaded = () => {
35578      if (!this.focusSubmenuOnLoad) {
35579        return;
35580      }
35581
35582      this.focusSubmenuOnLoad = false;
35583
35584      if (this.hasSubmenu) {
35585        this.submenu.focus();
35586        this.setAttribute("tabindex", "-1");
35587      }
35588    };
35589    /**
35590     * @internal
35591     */
35592
35593
35594    this.handleMouseOver = e => {
35595      if (this.disabled || !this.hasSubmenu || this.expanded) {
35596        return false;
35597      }
35598
35599      this.expanded = true;
35600      return false;
35601    };
35602    /**
35603     * @internal
35604     */
35605
35606
35607    this.handleMouseOut = e => {
35608      if (!this.expanded || this.contains(document.activeElement)) {
35609        return false;
35610      }
35611
35612      this.expanded = false;
35613      return false;
35614    };
35615    /**
35616     * @internal
35617     */
35618
35619
35620    this.expandAndFocus = () => {
35621      if (!this.hasSubmenu) {
35622        return;
35623      }
35624
35625      this.focusSubmenuOnLoad = true;
35626      this.expanded = true;
35627    };
35628    /**
35629     * @internal
35630     */
35631
35632
35633    this.invoke = () => {
35634      if (this.disabled) {
35635        return;
35636      }
35637
35638      switch (this.role) {
35639        case _menuItemOptions.MenuItemRole.menuitemcheckbox:
35640          this.checked = !this.checked;
35641          break;
35642
35643        case _menuItemOptions.MenuItemRole.menuitem:
35644          // update submenu
35645          this.updateSubmenu();
35646
35647          if (this.hasSubmenu) {
35648            this.expandAndFocus();
35649          } else {
35650            this.$emit("change");
35651          }
35652
35653          break;
35654
35655        case _menuItemOptions.MenuItemRole.menuitemradio:
35656          if (!this.checked) {
35657            this.checked = true;
35658          }
35659
35660          break;
35661      }
35662    };
35663    /**
35664     * Gets the submenu element if any
35665     *
35666     * @internal
35667     */
35668
35669
35670    this.updateSubmenu = () => {
35671      this.submenu = this.domChildren().find(element => {
35672        return element.getAttribute("role") === "menu";
35673      });
35674      this.hasSubmenu = this.submenu === undefined ? false : true;
35675    };
35676  }
35677

35678  expandedChanged(oldValue) {
35679    if (this.$fastController.isConnected) {
35680      if (this.submenu === undefined) {
35681        return;
35682      }
35683
35684      if (this.expanded === false) {
35685        this.submenu.collapseExpandedItem();
35686      } else {
35687        this.currentDirection = (0, _direction.getDirection)(this);
35688      }
35689
35690      this.$emit("expanded-change", this, {
35691        bubbles: false
35692      });
35693    }
35694  }
35695
35696  checkedChanged(oldValue, newValue) {
35697    if (this.$fastController.isConnected) {
35698      this.$emit("change");
35699    }
35700  }
35701  /**
35702   * @internal
35703   */
35704
35705
35706  connectedCallback() {
35707    super.connectedCallback();
35708
35709    _fastElement.DOM.queueUpdate(() => {
35710      this.updateSubmenu();
35711    });
35712
35713    if (!this.startColumnCount) {
35714      this.startColumnCount = 1;
35715    }
35716
35717    this.observer = new MutationObserver(this.updateSubmenu);
35718  }
35719  /**
35720   * @internal
35721   */
35722
35723
35724  disconnectedCallback() {
35725    super.disconnectedCallback();
35726    this.submenu = undefined;
35727
35728    if (this.observer !== undefined) {
35729      this.observer.disconnect();
35730      this.observer = undefined;
35731    }
35732  }
35733  /**
35734   * get an array of valid DOM children
35735   */
35736
35737
35738  domChildren() {
35739    return Array.from(this.children).filter(child => !child.hasAttribute("hidden"));
35740  }
35741
35742}
35743
35744exports.MenuItem = MenuItem;
35745(0, _tslib.__decorate)([(0, _fastElement.attr)({
35746  mode: "boolean"
35747})], MenuItem.prototype, "disabled", void 0);
35748(0, _tslib.__decorate)([(0, _fastElement.attr)({
35749  mode: "boolean"
35750})], MenuItem.prototype, "expanded", void 0);
35751(0, _tslib.__decorate)([_fastElement.observable], MenuItem.prototype, "startColumnCount", void 0);
35752(0, _tslib.__decorate)([_fastElement.attr], MenuItem.prototype, "role", void 0);
35753(0, _tslib.__decorate)([(0, _fastElement.attr)({
35754  mode: "boolean"
35755})], MenuItem.prototype, "checked", void 0);
35756(0, _tslib.__decorate)([_fastElement.observable], MenuItem.prototype, "submenuRegion", void 0);
35757(0, _tslib.__decorate)([_fastElement.observable], MenuItem.prototype, "hasSubmenu", void 0);
35758(0, _tslib.__decorate)([_fastElement.observable], MenuItem.prototype, "currentDirection", void 0);
35759(0, _tslib.__decorate)([_fastElement.observable], MenuItem.prototype, "submenu", void 0);
35760(0, _applyMixins.applyMixins)(MenuItem, _startEnd.StartEnd);
35761
35762},{"../foundation-element/foundation-element.js":251,"../patterns/start-end.js":277,"../utilities/apply-mixins.js":358,"../utilities/direction.js":361,"./menu-item.options.js":266,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],266:[function(require,module,exports){
35763"use strict";
35764
35765Object.defineProperty(exports, "__esModule", {
35766  value: true
35767});
35768exports.roleForMenuItem = exports.MenuItemRole = void 0;
35769
35770/**
35771 * Menu items roles.
35772 * @public
35773 */
35774const MenuItemRole = {
35775  /**
35776   * The menu item has a "menuitem" role
35777   */
35778  menuitem: "menuitem",
35779
35780  /**
35781   * The menu item has a "menuitemcheckbox" role
35782   */
35783  menuitemcheckbox: "menuitemcheckbox",
35784
35785  /**
35786   * The menu item has a "menuitemradio" role
35787   */
35788  menuitemradio: "menuitemradio"
35789};
35790/**
35791 * @internal
35792 */
35793
35794exports.MenuItemRole = MenuItemRole;
35795const roleForMenuItem = {
35796  [MenuItemRole.menuitem]: "menuitem",
35797  [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
35798  [MenuItemRole.menuitemradio]: "menuitemradio"
35799};
35800exports.roleForMenuItem = roleForMenuItem;
35801
35802},{}],267:[function(require,module,exports){
35803"use strict";
35804
35805Object.defineProperty(exports, "__esModule", {
35806  value: true
35807});
35808exports.menuItemTemplate = void 0;
35809
35810var _fastElement = require("@microsoft/fast-element");
35811
35812var _anchoredRegion = require("../anchored-region/anchored-region.js");
35813
35814var _startEnd = require("../patterns/start-end.js");
35815
35816var _menuItem = require("./menu-item.js");
35817
35818/**
35819 * Generates a template for the {@link @microsoft/fast-foundation#(MenuItem:class)} component using
35820 * the provided prefix.
35821 *
35822 * @public
35823 */
35824const menuItemTemplate = (context, definition) => (0, _fastElement.html)`
35825    <template
35826        role="${x => x.role}"
35827        aria-haspopup="${x => x.hasSubmenu ? "menu" : void 0}"
35828        aria-checked="${x => x.role !== _menuItem.MenuItemRole.menuitem ? x.checked : void 0}"
35829        aria-disabled="${x => x.disabled}"
35830        aria-expanded="${x => x.expanded}"
35831        @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}"
35832        @click="${(x, c) => x.handleMenuItemClick(c.event)}"
35833        @mouseover="${(x, c) => x.handleMouseOver(c.event)}"
35834        @mouseout="${(x, c) => x.handleMouseOut(c.event)}"
35835        class="${x => x.disabled ? "disabled" : ""} ${x => x.expanded ? "expanded" : ""} ${x => `indent-${x.startColumnCount}`}"
35836    >
35837            ${(0, _fastElement.when)(x => x.role === _menuItem.MenuItemRole.menuitemcheckbox, (0, _fastElement.html)`
35838                    <div part="input-container" class="input-container">

35839                        <span part="checkbox" class="checkbox">
35840                            <slot name="checkbox-indicator">
35841                                ${definition.checkboxIndicator || ""}
35842                            </slot>
35843                        </span>
35844                    </div>
35845                `)}
35846            ${(0, _fastElement.when)(x => x.role === _menuItem.MenuItemRole.menuitemradio, (0, _fastElement.html)`
35847                    <div part="input-container" class="input-container">
35848                        <span part="radio" class="radio">
35849                            <slot name="radio-indicator">
35850                                ${definition.radioIndicator || ""}
35851                            </slot>
35852                        </span>
35853                    </div>
35854                `)}
35855        </div>
35856        ${(0, _startEnd.startSlotTemplate)(context, definition)}
35857        <span class="content" part="content">
35858            <slot></slot>
35859        </span>
35860        ${(0, _startEnd.endSlotTemplate)(context, definition)}
35861        ${(0, _fastElement.when)(x => x.hasSubmenu, (0, _fastElement.html)`
35862                <div
35863                    part="expand-collapse-glyph-container"
35864                    class="expand-collapse-glyph-container"
35865                >
35866                    <span part="expand-collapse" class="expand-collapse">
35867                        <slot name="expand-collapse-indicator">
35868                            ${definition.expandCollapseGlyph || ""}
35869                        </slot>
35870                    </span>
35871                </div>
35872            `)}
35873        ${(0, _fastElement.when)(x => x.expanded, (0, _fastElement.html)`
35874                <${context.tagFor(_anchoredRegion.AnchoredRegion)}
35875                    :anchorElement="${x => x}"
35876                    vertical-positioning-mode="dynamic"
35877                    vertical-default-position="bottom"
35878                    vertical-inset="true"
35879                    horizontal-positioning-mode="dynamic"
35880                    horizontal-default-position="end"
35881                    class="submenu-region"
35882                    dir="${x => x.currentDirection}"
35883                    @loaded="${x => x.submenuLoaded()}"
35884                    ${(0, _fastElement.ref)("submenuRegion")}
35885                    part="submenu-region"
35886                >
35887                    <slot name="submenu"></slot>
35888                </${context.tagFor(_anchoredRegion.AnchoredRegion)}>
35889            `)}
35890    </template>
35891`;
35892
35893exports.menuItemTemplate = menuItemTemplate;
35894
35895},{"../anchored-region/anchored-region.js":182,"../patterns/start-end.js":277,"./menu-item.js":265,"@microsoft/fast-element":151}],268:[function(require,module,exports){
35896"use strict";
35897
35898Object.defineProperty(exports, "__esModule", {
35899  value: true
35900});
35901
35902var _menuTemplate = require("./menu.template.js");
35903
35904Object.keys(_menuTemplate).forEach(function (key) {
35905  if (key === "default" || key === "__esModule") return;
35906  if (key in exports && exports[key] === _menuTemplate[key]) return;
35907  Object.defineProperty(exports, key, {
35908    enumerable: true,
35909    get: function () {
35910      return _menuTemplate[key];
35911    }
35912  });
35913});
35914
35915var _menu = require("./menu.js");
35916
35917Object.keys(_menu).forEach(function (key) {
35918  if (key === "default" || key === "__esModule") return;
35919  if (key in exports && exports[key] === _menu[key]) return;
35920  Object.defineProperty(exports, key, {
35921    enumerable: true,
35922    get: function () {
35923      return _menu[key];
35924    }
35925  });
35926});
35927
35928},{"./menu.js":269,"./menu.template.js":270}],269:[function(require,module,exports){
35929"use strict";
35930
35931Object.defineProperty(exports, "__esModule", {
35932  value: true
35933});
35934exports.Menu = void 0;
35935
35936var _tslib = require("tslib");
35937
35938var _fastElement = require("@microsoft/fast-element");
35939
35940var _fastWebUtilities = require("@microsoft/fast-web-utilities");
35941
35942var _index = require("../menu-item/index.js");
35943
35944var _foundationElement = require("../foundation-element/foundation-element.js");
35945
35946/**
35947 * A Menu Custom HTML Element.
35948 * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
35949 *
35950 * @slot - The default slot for the menu items
35951 *
35952 * @public
35953 */
35954class Menu extends _foundationElement.FoundationElement {
35955  constructor() {
35956    super(...arguments);
35957    this.expandedItem = null;
35958    /**
35959     * The index of the focusable element in the items array
35960     * defaults to -1
35961     */
35962
35963    this.focusIndex = -1;
35964    /**
35965     * @internal
35966     */
35967
35968    this.isNestedMenu = () => {
35969      return this.parentElement !== null && (0, _fastWebUtilities.isHTMLElement)(this.parentElement) && this.parentElement.getAttribute("role") === "menuitem";
35970    };
35971    /**
35972     * if focus is moving out of the menu, reset to a stable initial state
35973     * @internal
35974     */
35975
35976
35977    this.handleFocusOut = e => {
35978      if (!this.contains(e.relatedTarget) && this.menuItems !== undefined) {
35979        this.collapseExpandedItem();

vendor: 4,444 bytes, lines 35979-36112

35979 // find our first focusable element
35980
35981        const focusIndex = this.menuItems.findIndex(this.isFocusableElement); // set the current focus index's tabindex to -1
35982
35983        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1"); // set the first focusable element tabindex to 0
35984
35985        this.menuItems[focusIndex].setAttribute("tabindex", "0"); // set the focus index
35986
35987        this.focusIndex = focusIndex;
35988      }
35989    };
35990
35991    this.handleItemFocus = e => {
35992      const targetItem = e.target;
35993
35994      if (this.menuItems !== undefined && targetItem !== this.menuItems[this.focusIndex]) {
35995        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
35996        this.focusIndex = this.menuItems.indexOf(targetItem);
35997        targetItem.setAttribute("tabindex", "0");
35998      }
35999    };
36000
36001    this.handleExpandedChanged = e => {
36002      if (e.defaultPrevented || e.target === null || this.menuItems === undefined || this.menuItems.indexOf(e.target) < 0) {
36003        return;
36004      }
36005
36006      e.preventDefault();
36007      const changedItem = e.target; // closing an expanded item without opening another
36008
36009      if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) {
36010        this.expandedItem = null;
36011        return;
36012      }
36013
36014      if (changedItem.expanded) {
36015        if (this.expandedItem !== null && this.expandedItem !== changedItem) {
36016          this.expandedItem.expanded = false;
36017        }
36018
36019        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
36020        this.expandedItem = changedItem;
36021        this.focusIndex = this.menuItems.indexOf(changedItem);
36022        changedItem.setAttribute("tabindex", "0");
36023      }
36024    };
36025
36026    this.removeItemListeners = () => {
36027      if (this.menuItems !== undefined) {
36028        this.menuItems.forEach(item => {
36029          item.removeEventListener("expanded-change", this.handleExpandedChanged);
36030          item.removeEventListener("focus", this.handleItemFocus);
36031        });
36032      }
36033    };
36034
36035    this.setItems = () => {
36036      const newItems = this.domChildren();
36037      this.removeItemListeners();
36038      this.menuItems = newItems;
36039      const menuItems = this.menuItems.filter(this.isMenuItemElement); // if our focus index is not -1 we have items
36040
36041      if (menuItems.length) {
36042        this.focusIndex = 0;
36043      }
36044
36045      function elementIndent(el) {
36046        const role = el.getAttribute("role");
36047        const startSlot = el.querySelector("[slot=start]");
36048
36049        if (role !== _index.MenuItemRole.menuitem && startSlot === null) {
36050          return 1;
36051        } else if (role === _index.MenuItemRole.menuitem && startSlot !== null) {
36052          return 1;
36053        } else if (role !== _index.MenuItemRole.menuitem && startSlot !== null) {
36054          return 2;
36055        } else {
36056          return 0;
36057        }
36058      }
36059
36060      const indent = menuItems.reduce((accum, current) => {
36061        const elementValue = elementIndent(current);
36062        return accum > elementValue ? accum : elementValue;
36063      }, 0);
36064      menuItems.forEach((item, index) => {
36065        item.setAttribute("tabindex", index === 0 ? "0" : "-1");
36066        item.addEventListener("expanded-change", this.handleExpandedChanged);
36067        item.addEventListener("focus", this.handleItemFocus);
36068
36069        if (item instanceof _index.MenuItem || "startColumnCount" in item) {
36070          item.startColumnCount = indent;
36071        }
36072      });
36073    };
36074    /**
36075     * handle change from child element
36076     */
36077
36078
36079    this.changeHandler = e => {
36080      if (this.menuItems === undefined) {
36081        return;
36082      }
36083
36084      const changedMenuItem = e.target;
36085      const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
36086
36087      if (changeItemIndex === -1) {
36088        return;
36089      }
36090
36091      if (changedMenuItem.role === "menuitemradio" && changedMenuItem.checked === true) {
36092        for (let i = changeItemIndex - 1; i >= 0; --i) {
36093          const item = this.menuItems[i];
36094          const role = item.getAttribute("role");
36095
36096          if (role === _index.MenuItemRole.menuitemradio) {
36097            item.checked = false;
36098          }
36099
36100          if (role === "separator") {
36101            break;
36102          }
36103        }
36104
36105        const maxIndex = this.menuItems.length - 1;
36106
36107        for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
36108          const item = this.menuItems[i];
36109          const role = item.getAttribute("role");
36110
36111          if (role === _index.MenuItemRole.menuitemradio) {
36112            item.checked = false;

36113          }
36114
36115          if (role === "separator") {
36116            break;
36117          }
36118        }
36119      }
36120    };
36121    /**
36122     * check if the item is a menu item
36123     */
36124
36125
36126    this.isMenuItemElement = el => {
36127      return (0, _fastWebUtilities.isHTMLElement)(el) && Menu.focusableElementRoles.hasOwnProperty(el.getAttribute("role"));
36128    };
36129    /**
36130     * check if the item is focusable
36131     */
36132
36133
36134    this.isFocusableElement = el => {
36135      return this.isMenuItemElement(el);
36136    };
36137  }
36138
36139  itemsChanged(oldValue, newValue) {
36140    // only update children after the component is connected and
36141    // the setItems has run on connectedCallback
36142    // (menuItems is undefined until then)
36143    if (this.$fastController.isConnected && this.menuItems !== undefined) {
36144      this.setItems();
36145    }
36146  }
36147  /**
36148   * @internal
36149   */
36150
36151
36152  connectedCallback() {
36153    super.connectedCallback();
36154
36155    _fastElement.DOM.queueUpdate(() => {
36156      // wait until children have had a chance to
36157      // connect before setting/checking their props/attributes
36158      this.setItems();
36159    });
36160
36161    this.addEventListener("change", this.changeHandler);
36162  }
36163  /**
36164   * @internal
36165   */
36166
36167
36168  disconnectedCallback() {
36169    super.disconnectedCallback();
36170    this.removeItemListeners();
36171    this.menuItems = undefined;
36172    this.removeEventListener("change", this.changeHandler);
36173  }
36174  /**
36175   * Focuses the first item in the menu.
36176   *
36177   * @public
36178   */
36179
36180
36181  focus() {
36182    this.setFocus(0, 1);
36183  }
36184  /**
36185   * Collapses any expanded menu items.
36186   *
36187   * @public
36188   */
36189
36190
36191  collapseExpandedItem() {
36192    if (this.expandedItem !== null) {
36193      this.expandedItem.expanded = false;
36194      this.expandedItem = null;
36195    }
36196  }
36197  /**
36198   * @internal
36199   */
36200
36201
36202  handleMenuKeyDown(e) {
36203    if (e.defaultPrevented || this.menuItems === undefined) {
36204      return;
36205    }
36206
36207    switch (e.key) {
36208      case _fastWebUtilities.keyArrowDown:
36209        // go forward one index
36210        this.setFocus(this.focusIndex + 1, 1);
36211        return;
36212
36213      case _fastWebUtilities.keyArrowUp:
36214        // go back one index
36215        this.setFocus(this.focusIndex - 1, -1);
36216        return;
36217
36218      case _fastWebUtilities.keyEnd:
36219        // set focus on last item
36220        this.setFocus(this.menuItems.length - 1, -1);
36221        return;
36222
36223      case _fastWebUtilities.keyHome:
36224        // set focus on first item
36225        this.setFocus(0, 1);
36226        return;
36227
36228      default:
36229        // if we are not handling the event, do not prevent default
36230        return true;
36231    }
36232  }
36233  /**
36234   * get an array of valid DOM children
36235   */
36236
36237
36238  domChildren() {
36239    return Array.from(this.children).filter(child => !child.hasAttribute("hidden"));
36240  }
36241
36242  setFocus(focusIndex, adjustment) {
36243    if (this.menuItems === undefined) {
36244      return;
36245    }
36246
36247    while (focusIndex >= 0 && focusIndex < this.menuItems.length) {
36248      const child = this.menuItems[focusIndex];
36249
36250      if (this.isFocusableElement(child)) {
36251        // change the previous index to -1
36252        if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
36253          this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
36254        } // update the focus index
36255
36256
36257        this.focusIndex = focusIndex; // update the tabindex of next focusable element
36258
36259        child.setAttribute("tabindex", "0"); // focus the element
36260
36261        child.focus();
36262        break;
36263      }
36264
36265      focusIndex += adjustment;
36266    }
36267  }
36268
36269}
36270
36271exports.Menu = Menu;
36272Menu.focusableElementRoles = _index.roleForMenuItem;
36273(0, _tslib.__decorate)([_fastElement.observable], Menu.prototype, "items", void 0);
36274
36275},{"../foundation-element/foundation-element.js":251,"../menu-item/index.js":264,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],270:[function(require,module,exports){
36276"use strict";
36277
36278Object.defineProperty(exports, "__esModule", {
36279  value: true
36280});
36281exports.menuTemplate = void 0;
36282
36283var _fastElement = require("@microsoft/fast-element");
36284
36285/**
36286 * The template for the {@link @microsoft/fast-foundation#Menu} component.
36287 * @public
36288 */
36289const menuTemplate = (context, definition) => (0, _fastElement.html)`
36290    <template
36291        slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}"
36292        role="menu"
36293        @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
36294        @focusout="${(x, c) => x.handleFocusOut(c.event)}"
36295    >
36296        <slot ${(0, _fastElement.slotted)("items")}></slot>
36297    </template>
36298`;
36299
36300exports.menuTemplate = menuTemplate;
36301
36302},{"@microsoft/fast-element":151}],271:[function(require,module,exports){
36303"use strict";
36304
36305Object.defineProperty(exports, "__esModule", {
36306  value: true
36307});
36308
36309var _numberFieldTemplate = require("./number-field.template.js");
36310
36311Object.keys(_numberFieldTemplate).forEach(function (key) {

36312  if (key === "default" || key === "__esModule") return;
36313  if (key in exports && exports[key] === _numberFieldTemplate[key]) return;
36314  Object.defineProperty(exports, key, {
36315    enumerable: true,
36316    get: function () {
36317      return _numberFieldTemplate[key];
36318    }
36319  });
36320});
36321
36322var _numberField = require("./number-field.js");
36323
36324Object.keys(_numberField).forEach(function (key) {
36325  if (key === "default" || key === "__esModule") return;
36326  if (key in exports && exports[key] === _numberField[key]) return;
36327  Object.defineProperty(exports, key, {
36328    enumerable: true,
36329    get: function () {
36330      return _numberField[key];
36331    }
36332  });
36333});
36334
36335},{"./number-field.js":273,"./number-field.template.js":274}],272:[function(require,module,exports){
36336"use strict";
36337
36338Object.defineProperty(exports, "__esModule", {
36339  value: true
36340});
36341exports.FormAssociatedNumberField = void 0;
36342
36343var _formAssociated = require("../form-associated/form-associated.js");
36344
36345var _foundationElement = require("../foundation-element/foundation-element.js");
36346
36347class _NumberField extends _foundationElement.FoundationElement {}
36348/**
36349 * A form-associated base class for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
36350 *
36351 * @internal
36352 */
36353
36354
36355class FormAssociatedNumberField extends (0, _formAssociated.FormAssociated)(_NumberField) {
36356  constructor() {
36357    super(...arguments);
36358    this.proxy = document.createElement("input");
36359  }
36360
36361}
36362
36363exports.FormAssociatedNumberField = FormAssociatedNumberField;
36364
36365},{"../form-associated/form-associated.js":249,"../foundation-element/foundation-element.js":251}],273:[function(require,module,exports){
36366"use strict";
36367
36368Object.defineProperty(exports, "__esModule", {
36369  value: true
36370});
36371exports.NumberField = void 0;
36372
36373var _tslib = require("tslib");
36374
36375var _fastElement = require("@microsoft/fast-element");
36376
36377var _fastWebUtilities = require("@microsoft/fast-web-utilities");
36378
36379var _startEnd = require("../patterns/start-end.js");
36380
36381var _applyMixins = require("../utilities/apply-mixins.js");
36382
36383var _textField = require("../text-field/text-field.js");
36384
36385var _numberFieldFormAssociated = require("./number-field.form-associated.js");
36386
36387/**
36388 * A Number Field Custom HTML Element.
36389 * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number | <input type="number" /> element }.
36390 *
36391 * @slot start - Content which can be provided before the number field input
36392 * @slot end - Content which can be provided after the number field input
36393 * @slot - The default slot for the label
36394 * @slot step-up-glyph - The glyph for the step up control
36395 * @slot step-down-glyph - The glyph for the step down control
36396 * @csspart label - The label
36397 * @csspart root - The element wrapping the control, including start and end slots
36398 * @csspart control - The element representing the input
36399 * @csspart controls - The step up and step down controls
36400 * @csspart step-up - The step up control
36401 * @csspart step-down - The step down control
36402 * @fires input - Fires a custom 'input' event when the value has changed
36403 * @fires change - Fires a custom 'change' event when the value has changed
36404 *
36405 * @public
36406 */
36407class NumberField extends _numberFieldFormAssociated.FormAssociatedNumberField {
36408  constructor() {
36409    super(...arguments);
36410    /**
36411     * When true, spin buttons will not be rendered
36412     * @public
36413     * @remarks
36414     * HTML Attribute: autofocus
36415     */
36416
36417    this.hideStep = false;
36418    /**
36419     * Amount to increment or decrement the value by
36420     * @public
36421     * @remarks
36422     * HTMLAttribute: step
36423     */
36424
36425    this.step = 1;
36426    /**
36427     * Flag to indicate that the value change is from the user input
36428     * @internal
36429     */
36430
36431    this.isUserInput = false;
36432  }
36433  /**
36434   * Ensures that the max is greater than the min and that the value
36435   *  is less than the max
36436   * @param previous - the previous max value
36437   * @param next - updated max value
36438   *
36439   * @internal
36440   */
36441
36442
36443  maxChanged(previous, next) {
36444    var _a;
36445
36446    this.max = Math.max(next, (_a = this.min) !== null && _a !== void 0 ? _a : next);
36447    const min = Math.min(this.min, this.max);
36448
36449    if (this.min !== undefined && this.min !== min) {
36450      this.min = min;
36451    }
36452
36453    this.value = this.getValidValue(this.value);
36454  }
36455  /**
36456   * Ensures that the min is less than the max and that the value
36457   *  is greater than the min
36458   * @param previous - previous min value
36459   * @param next - updated min value
36460   *
36461   * @internal
36462   */
36463
36464
36465  minChanged(previous, next) {
36466    var _a;
36467
36468    this.min = Math.min(next, (_a = this.max) !== null && _a !== void 0 ? _a : next);
36469    const max = Math.max(this.min, this.max);
36470
36471    if (this.max !== undefined && this.max !== max) {
36472      this.max = max;
36473    }
36474
36475    this.value = this.getValidValue(this.value);
36476  }
36477  /**
36478   * The value property, typed as a number.
36479   *
36480   * @public
36481   */
36482
36483
36484  get valueAsNumber() {
36485    return parseFloat(super.value);
36486  }
36487
36488  set valueAsNumber(next) {
36489    this.value = next.toString();
36490  }
36491  /**
36492   * Validates that the value is a number between the min and max
36493   * @param previous - previous stored value
36494   * @param next - value being updated
36495   * @param updateControl - should the text field be updated with value, defaults to true
36496   * @internal
36497   */
36498
36499
36500  valueChanged(previous, next) {
36501    this.value = this.getValidValue(next);
36502
36503    if (next !== this.value) {
36504      return;
36505    }
36506
36507    if (this.control && !this.isUserInput) {
36508      this.control.value = this.value;
36509    }
36510
36511    super.valueChanged(previous, this.value);
36512
36513    if (previous !== undefined && !this.isUserInput) {
36514      this.$emit("input");
36515      this.$emit("change");
36516    }
36517
36518    this.isUserInput = false;

36519  }
36520  /** {@inheritDoc (FormAssociated:interface).validate} */
36521
36522
36523  validate() {
36524    super.validate(this.control);
36525  }
36526  /**
36527   * Sets the internal value to a valid number between the min and max properties
36528   * @param value - user input
36529   *
36530   * @internal
36531   */
36532
36533
36534  getValidValue(value) {
36535    var _a, _b;
36536
36537    let validValue = parseFloat(parseFloat(value).toPrecision(12));
36538
36539    if (isNaN(validValue)) {
36540      validValue = "";
36541    } else {
36542      validValue = Math.min(validValue, (_a = this.max) !== null && _a !== void 0 ? _a : validValue);
36543      validValue = Math.max(validValue, (_b = this.min) !== null && _b !== void 0 ? _b : validValue).toString();
36544    }
36545
36546    return validValue;
36547  }
36548  /**
36549   * Increments the value using the step value
36550   *
36551   * @public
36552   */
36553
36554
36555  stepUp() {
36556    const value = parseFloat(this.value);
36557    const stepUpValue = !isNaN(value) ? value + this.step : this.min > 0 ? this.min : this.max < 0 ? this.max : !this.min ? this.step : 0;
36558    this.value = stepUpValue.toString();
36559  }
36560  /**
36561   * Decrements the value using the step value
36562   *
36563   * @public
36564   */
36565
36566
36567  stepDown() {
36568    const value = parseFloat(this.value);
36569    const stepDownValue = !isNaN(value) ? value - this.step : this.min > 0 ? this.min : this.max < 0 ? this.max : !this.min ? 0 - this.step : 0;
36570    this.value = stepDownValue.toString();
36571  }
36572  /**
36573   * Sets up the initial state of the number field
36574   * @internal
36575   */
36576
36577
36578  connectedCallback() {
36579    super.connectedCallback();
36580    this.proxy.setAttribute("type", "number");
36581    this.validate();
36582    this.control.value = this.value;
36583
36584    if (this.autofocus) {
36585      _fastElement.DOM.queueUpdate(() => {
36586        this.focus();
36587      });
36588    }
36589  }
36590  /**
36591   * Selects all the text in the number field
36592   *
36593   * @public
36594   */
36595
36596
36597  select() {
36598    this.control.select();
36599    /**
36600     * The select event does not permeate the shadow DOM boundary.
36601     * This fn effectively proxies the select event,
36602     * emitting a `select` event whenever the internal
36603     * control emits a `select` event
36604     */
36605
36606    this.$emit("select");
36607  }
36608  /**
36609   * Handles the internal control's `input` event
36610   * @internal
36611   */
36612
36613
36614  handleTextInput() {
36615    this.control.value = this.control.value.replace(/[^0-9\-+e.]/g, "");
36616    this.isUserInput = true;
36617    this.value = this.control.value;
36618  }
36619  /**
36620   * Change event handler for inner control.
36621   * @remarks
36622   * "Change" events are not `composable` so they will not
36623   * permeate the shadow DOM boundary. This fn effectively proxies
36624   * the change event, emitting a `change` event whenever the internal
36625   * control emits a `change` event
36626   * @internal
36627   */
36628
36629
36630  handleChange() {
36631    this.$emit("change");
36632  }
36633  /**
36634   * Handles the internal control's `keydown` event
36635   * @internal
36636   */
36637
36638
36639  handleKeyDown(e) {
36640    const key = e.key;
36641
36642    switch (key) {
36643      case _fastWebUtilities.keyArrowUp:
36644        this.stepUp();
36645        return false;
36646
36647      case _fastWebUtilities.keyArrowDown:
36648        this.stepDown();
36649        return false;
36650    }
36651
36652    return true;
36653  }
36654  /**
36655   * Handles populating the input field with a validated value when
36656   *  leaving the input field.
36657   * @internal
36658   */
36659
36660
36661  handleBlur() {
36662    this.control.value = this.value;
36663  }
36664
36665}
36666
36667exports.NumberField = NumberField;
36668(0, _tslib.__decorate)([(0, _fastElement.attr)({
36669  attribute: "readonly",
36670  mode: "boolean"
36671})], NumberField.prototype, "readOnly", void 0);
36672(0, _tslib.__decorate)([(0, _fastElement.attr)({
36673  mode: "boolean"
36674})], NumberField.prototype, "autofocus", void 0);
36675(0, _tslib.__decorate)([(0, _fastElement.attr)({
36676  attribute: "hide-step",
36677  mode: "boolean"
36678})], NumberField.prototype, "hideStep", void 0);
36679(0, _tslib.__decorate)([_fastElement.attr], NumberField.prototype, "placeholder", void 0);
36680(0, _tslib.__decorate)([_fastElement.attr], NumberField.prototype, "list", void 0);
36681(0, _tslib.__decorate)([(0, _fastElement.attr)({
36682  converter: _fastElement.nullableNumberConverter
36683})], NumberField.prototype, "maxlength", void 0);
36684(0, _tslib.__decorate)([(0, _fastElement.attr)({
36685  converter: _fastElement.nullableNumberConverter
36686})], NumberField.prototype, "minlength", void 0);
36687(0, _tslib.__decorate)([(0, _fastElement.attr)({
36688  converter: _fastElement.nullableNumberConverter
36689})], NumberField.prototype, "size", void 0);
36690(0, _tslib.__decorate)([(0, _fastElement.attr)({
36691  converter: _fastElement.nullableNumberConverter
36692})], NumberField.prototype, "step", void 0);
36693(0, _tslib.__decorate)([(0, _fastElement.attr)({
36694  converter: _fastElement.nullableNumberConverter
36695})], NumberField.prototype, "max", void 0);
36696(0, _tslib.__decorate)([(0, _fastElement.attr)({
36697  converter: _fastElement.nullableNumberConverter
36698})], NumberField.prototype, "min", void 0);
36699(0, _tslib.__decorate)([_fastElement.observable], NumberField.prototype, "defaultSlottedNodes", void 0);
36700(0, _applyMixins.applyMixins)(NumberField, _startEnd.StartEnd, _textField.DelegatesARIATextbox);
36701
36702},{"../patterns/start-end.js":277,"../text-field/text-field.js":342,"../utilities/apply-mixins.js":358,"./number-field.form-associated.js":272,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],274:[function(require,module,exports){
36703"use strict";
36704
36705Object.defineProperty(exports, "__esModule", {
36706  value: true
36707});
36708exports.numberFieldTemplate = void 0;
36709
36710var _fastElement = require("@microsoft/fast-element");
36711
36712var _startEnd = require("../patterns/start-end.js");
36713
36714/**
36715 * The template for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
36716 * @public
36717 */
36718const numberFieldTemplate = (context, definition) => (0, _fastElement.html)`
36719    <template class="${x => x.readOnly ? "readonly" : ""}">
36720        <label
36721            part="label"
36722            for="control"
36723            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"
36724        >
36725            <slot ${(0, _fastElement.slotted)("defaultSlottedNodes")}></slot>
36726        </label>
36727        <div class="root" part="root">
36728            ${(0, _startEnd.startSlotTemplate)(context, definition)}
36729            <input
36730                class="control"
36731                part="control"
36732                id="control"

36733                @input="${x => x.handleTextInput()}"
36734                @change="${x => x.handleChange()}"
36735                @keydown="${(x, c) => x.handleKeyDown(c.event)}"
36736                @blur="${(x, c) => x.handleBlur()}"
36737                ?autofocus="${x => x.autofocus}"
36738                ?disabled="${x => x.disabled}"
36739                list="${x => x.list}"
36740                maxlength="${x => x.maxlength}"
36741                minlength="${x => x.minlength}"
36742                placeholder="${x => x.placeholder}"
36743                ?readonly="${x => x.readOnly}"
36744                ?required="${x => x.required}"
36745                size="${x => x.size}"
36746                type="text"
36747                inputmode="numeric"
36748                min="${x => x.min}"
36749                max="${x => x.max}"
36750                step="${x => x.step}"
36751                aria-atomic="${x => x.ariaAtomic}"
36752                aria-busy="${x => x.ariaBusy}"
36753                aria-controls="${x => x.ariaControls}"
36754                aria-current="${x => x.ariaCurrent}"
36755                aria-describedby="${x => x.ariaDescribedby}"
36756                aria-details="${x => x.ariaDetails}"
36757                aria-disabled="${x => x.ariaDisabled}"
36758                aria-errormessage="${x => x.ariaErrormessage}"
36759                aria-flowto="${x => x.ariaFlowto}"
36760                aria-haspopup="${x => x.ariaHaspopup}"
36761                aria-hidden="${x => x.ariaHidden}"
36762                aria-invalid="${x => x.ariaInvalid}"
36763                aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
36764                aria-label="${x => x.ariaLabel}"
36765                aria-labelledby="${x => x.ariaLabelledby}"
36766                aria-live="${x => x.ariaLive}"
36767                aria-owns="${x => x.ariaOwns}"
36768                aria-relevant="${x => x.ariaRelevant}"
36769                aria-roledescription="${x => x.ariaRoledescription}"
36770                ${(0, _fastElement.ref)("control")}
36771            />
36772            ${(0, _fastElement.when)(x => !x.hideStep && !x.readOnly && !x.disabled, (0, _fastElement.html)`
36773                    <div class="controls" part="controls">
36774                        <div class="step-up" part="step-up" @click="${x => x.stepUp()}">
36775                            <slot name="step-up-glyph">
36776                                ${definition.stepUpGlyph || ""}
36777                            </slot>
36778                        </div>
36779                        <div
36780                            class="step-down"
36781                            part="step-down"
36782                            @click="${x => x.stepDown()}"
36783                        >
36784                            <slot name="step-down-glyph">
36785                                ${definition.stepDownGlyph || ""}
36786                            </slot>
36787                        </div>
36788                    </div>
36789                `)}
36790            ${(0, _startEnd.endSlotTemplate)(context, definition)}
36791        </div>
36792    </template>
36793`;
36794
36795exports.numberFieldTemplate = numberFieldTemplate;
36796
36797},{"../patterns/start-end.js":277,"@microsoft/fast-element":151}],275:[function(require,module,exports){
36798"use strict";
36799
36800Object.defineProperty(exports, "__esModule", {
36801  value: true
36802});
36803exports.ARIAGlobalStatesAndProperties = void 0;
36804
36805var _tslib = require("tslib");
36806
36807var _fastElement = require("@microsoft/fast-element");
36808
36809/**
36810 * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
36811 * The following global states and properties are supported by all roles and by all base markup elements.
36812 * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
36813 *
36814 * This is intended to be used as a mixin. Be sure you extend FASTElement.
36815 *
36816 * @public
36817 */
36818class ARIAGlobalStatesAndProperties {}
36819
36820exports.ARIAGlobalStatesAndProperties = ARIAGlobalStatesAndProperties;
36821(0, _tslib.__decorate)([(0, _fastElement.attr)({
36822  attribute: "aria-atomic"
36823})], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
36824(0, _tslib.__decorate)([(0, _fastElement.attr)({
36825  attribute: "aria-busy"
36826})], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
36827(0, _tslib.__decorate)([(0, _fastElement.attr)({
36828  attribute: "aria-controls"
36829}

36829)], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
36830(0, _tslib.__decorate)([(0, _fastElement.attr)({
36831  attribute: "aria-current"
36832})], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
36833(0, _tslib.__decorate)([(0, _fastElement.attr)({
36834  attribute: "aria-describedby"
36835})], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
36836(0, _tslib.__decorate)([(0, _fastElement.attr)({
36837  attribute: "aria-details"
36838})], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
36839(0, _tslib.__decorate)([(0, _fastElement.attr)({
36840  attribute: "aria-disabled"
36841})], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
36842(0, _tslib.__decorate)([(0, _fastElement.attr)({
36843  attribute: "aria-errormessage"
36844})], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
36845(0, _tslib.__decorate)([(0, _fastElement.attr)({
36846  attribute: "aria-flowto"
36847})], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
36848(0, _tslib.__decorate)([(0, _fastElement.attr)({
36849  attribute: "aria-haspopup"
36850})], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
36851(0, _tslib.__decorate)([(0, _fastElement.attr)({
36852  attribute: "aria-hidden"
36853})], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
36854(0, _tslib.__decorate)([(0, _fastElement.attr)({
36855  attribute: "aria-invalid"
36856})], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
36857(0, _tslib.__decorate)([(0, _fastElement.attr)({
36858  attribute: "aria-keyshortcuts"
36859})], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
36860(0, _tslib.__decorate)([(0, _fastElement.attr)({
36861  attribute: "aria-label"
36862})], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
36863(0, _tslib.__decorate)([(0, _fastElement.attr)({
36864  attribute: "aria-labelledby"
36865})], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
36866(0, _tslib.__decorate)([(0, _fastElement.attr)({
36867  attribute: "aria-live"
36868})], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
36869(0, _tslib.__decorate)([(0, _fastElement.attr)({
36870  attribute: "aria-owns"
36871})], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
36872(0, _tslib.__decorate)([(0, _fastElement.attr)({
36873  attribute: "aria-relevant"
36874})], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
36875(0, _tslib.__decorate)([(0, _fastElement.attr)({
36876  attribute: "aria-roledescription"
36877})], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
36878
36879},{"@microsoft/fast-element":151,"tslib":372}],276:[function(require,module,exports){
36880"use strict";
36881
36882Object.defineProperty(exports, "__esModule", {
36883  value: true
36884});
36885
36886var _ariaGlobal = require("./aria-global.js");
36887
36888Object.keys(_ariaGlobal).forEach(function (key) {
36889  if (key === "default" || key === "__esModule") return;
36890  if (key in exports && exports[key] === _ariaGlobal[key]) return;
36891  Object.defineProperty(exports, key, {
36892    enumerable: true,
36893    get: function () {
36894      return _ariaGlobal[key];
36895    }
36896  });
36897});
36898
36899var _startEnd = require("./start-end.js");
36900
36901Object.keys(_startEnd).forEach(function (key) {
36902  if (key === "default" || key === "__esModule") return;
36903  if (key in exports && exports[key] === _startEnd[key]) return;
36904  Object.defineProperty(exports, key, {
36905    enumerable: true,
36906    get: function () {
36907      return _startEnd[key];
36908    }
36909  });
36910});
36911
36912},{"./aria-global.js":275,"./start-end.js":277}],277:[function(require,module,exports){
36913"use strict";
36914
36915Object.defineProperty(exports, "__esModule", {
36916  value: true
36917});
36918exports.startTemplate = exports.startSlotTemplate = exports.endTemplate = exports.endSlotTemplate = exports.StartEnd = void 0;
36919
36920var _fastElement = require("@microsoft/fast-element");
36921
36922/**
36923 * A mixin class implementing start and end elements.
36924 * These are generally used to decorate text elements with icons or other visual indicators.
36925 * @public
36926 */
36927class StartEnd {
36928  handleStartContentChange() {
36929    this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
36930  }
36931
36932  handleEndContentChange() {
36933    this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
36934  }
36935
36936}
36937/**
36938 * The template for the end element.
36939 * For use with {@link StartEnd}
36940 *
36941 * @public
36942 */
36943
36944
36945exports.StartEnd = StartEnd;
36946
36947const endSlotTemplate = (context, definition) => (0, _fastElement.html)`
36948    <span
36949        part="end"
36950        ${(0, _fastElement.ref)("endContainer")}
36951        class=${x => definition.end ? "end" : void 0}
36952    >
36953        <slot name="end" ${(0, _fastElement.ref)("end")} @slotchange="${x => x.handleEndContentChange()}">
36954            ${definition.end || ""}
36955        </slot>
36956    </span>
36957`;
36958/**
36959 * The template for the start element.
36960 * For use with {@link StartEnd}
36961 *
36962 * @public
36963 */
36964
36965
36966exports.endSlotTemplate = endSlotTemplate;
36967
36968const startSlotTemplate = (context, definition) => (0, _fastElement.html)`
36969    <span
36970        part="start"
36971        ${(0, _fastElement.ref)("startContainer")}
36972        class="${x => definition.start ? "start" : void 0}"
36973    >
36974        <slot
36975            name="start"
36976            ${(0, _fastElement.ref)("start")}
36977            @slotchange="${x => x.handleStartContentChange()}"
36978        >
36979            ${definition.start || ""}
36980        </slot>
36981    </span>
36982`;
36983/**
36984 * The template for the end element.
36985 * For use with {@link StartEnd}
36986 *
36987 * @public
36988 * @deprecated - use endSlotTemplate
36989 */
36990
36991
36992exports.startSlotTemplate = startSlotTemplate;
36993const endTemplate = (0, _fastElement.html)`
36994    <span part="end" ${(0, _fastElement.ref)("endContainer")}>
36995        <slot
36996            name="end"
36997            ${(0, _fastElement.ref)("end")}
36998            @slotchange="${x => x.handleEndContentChange()}"
36999        ></slot>
37000    </span>
37001`;
37002/**
37003 * The template for the start element.
37004 * For use with {@link StartEnd}
37005 *
37006 * @public
37007 * @deprecated - use startSlotTemplate
37008 */
37009
37010exports.endTemplate = endTemplate;
37011const startTemplate = (0, _fastElement.html)`
37012    <span part="start" ${(0, _fastElement.ref)("startContainer")}>
37013        <slot
37014            name="start"
37015            ${(0, _fastElement.ref)("start")}
37016            @slotchange="${x => x.handleStartContentChange()}"
37017        ></slot>
37018    </span>
37019`;
37020exports.startTemplate = startTemplate;
37021
37022},{"@microsoft/fast-element":151}],278:[function(require,module,exports){
37023"use strict";
37024
37025Object.defineProperty(exports, "__esModule", {
37026  value: true
37027});
37028
37029var _pickerTemplate = require("./picker.template.js");
37030
37031Object.keys(_pickerTemplate).forEach(function (key) {

37032  if (key === "default" || key === "__esModule") return;
37033  if (key in exports && exports[key] === _pickerTemplate[key]) return;
37034  Object.defineProperty(exports, key, {
37035    enumerable: true,
37036    get: function () {
37037      return _pickerTemplate[key];
37038    }
37039  });
37040});
37041
37042var _picker = require("./picker.js");
37043
37044Object.keys(_picker).forEach(function (key) {
37045  if (key === "default" || key === "__esModule") return;
37046  if (key in exports && exports[key] === _picker[key]) return;
37047  Object.defineProperty(exports, key, {
37048    enumerable: true,
37049    get: function () {
37050      return _picker[key];
37051    }
37052  });
37053});
37054
37055var _pickerMenuTemplate = require("./picker-menu.template.js");
37056
37057Object.keys(_pickerMenuTemplate).forEach(function (key) {
37058  if (key === "default" || key === "__esModule") return;
37059  if (key in exports && exports[key] === _pickerMenuTemplate[key]) return;
37060  Object.defineProperty(exports, key, {
37061    enumerable: true,
37062    get: function () {
37063      return _pickerMenuTemplate[key];
37064    }
37065  });
37066});
37067
37068var _pickerMenu = require("./picker-menu.js");
37069
37070Object.keys(_pickerMenu).forEach(function (key) {
37071  if (key === "default" || key === "__esModule") return;
37072  if (key in exports && exports[key] === _pickerMenu[key]) return;
37073  Object.defineProperty(exports, key, {
37074    enumerable: true,
37075    get: function () {
37076      return _pickerMenu[key];
37077    }
37078  });
37079});
37080
37081var _pickerMenuOptionTemplate = require("./picker-menu-option.template.js");
37082
37083Object.keys(_pickerMenuOptionTemplate).forEach(function (key) {
37084  if (key === "default" || key === "__esModule") return;
37085  if (key in exports && exports[key] === _pickerMenuOptionTemplate[key]) return;
37086  Object.defineProperty(exports, key, {
37087    enumerable: true,
37088    get: function () {
37089      return _pickerMenuOptionTemplate[key];
37090    }
37091  });
37092});
37093
37094var _pickerMenuOption = require("./picker-menu-option.js");
37095
37096Object.keys(_pickerMenuOption).forEach(function (key) {
37097  if (key === "default" || key === "__esModule") return;
37098  if (key in exports && exports[key] === _pickerMenuOption[key]) return;
37099  Object.defineProperty(exports, key, {
37100    enumerable: true,
37101    get: function () {
37102      return _pickerMenuOption[key];
37103    }
37104  });
37105});
37106
37107var _pickerListTemplate = require("./picker-list.template.js");
37108
37109Object.keys(_pickerListTemplate).forEach(function (key) {
37110  if (key === "default" || key === "__esModule") return;
37111  if (key in exports && exports[key] === _pickerListTemplate[key]) return;
37112  Object.defineProperty(exports, key, {
37113    enumerable: true,
37114    get: function () {
37115      return _pickerListTemplate[key];
37116    }
37117  });
37118});
37119
37120var _pickerList = require("./picker-list.js");
37121
37122Object.keys(_pickerList).forEach(function (key) {
37123  if (key === "default" || key === "__esModule") return;
37124  if (key in exports && exports[key] === _pickerList[key]) return;
37125  Object.defineProperty(exports, key, {
37126    enumerable: true,
37127    get: function () {
37128      return _pickerList[key];
37129    }
37130  });
37131});
37132
37133var _pickerListItemTemplate = require("./picker-list-item.template.js");
37134
37135Object.keys(_pickerListItemTemplate).forEach(function (key) {
37136  if (key === "default" || key === "__esModule") return;
37137  if (key in exports && exports[key] === _pickerListItemTemplate[key]) return;
37138  Object.defineProperty(exports, key, {
37139    enumerable: true,
37140    get: function () {
37141      return _pickerListItemTemplate[key];
37142    }
37143  });
37144});
37145
37146var _pickerListItem = require("./picker-list-item.js");
37147
37148Object.keys(_pickerListItem).forEach(function (key) {
37149  if (key === "default" || key === "__esModule") return;
37150  if (key in exports && exports[key] === _pickerListItem[key]) return;
37151  Object.defineProperty(exports, key, {
37152    enumerable: true,
37153    get: function () {
37154      return _pickerListItem[key];
37155    }
37156  });
37157});
37158
37159},{"./picker-list-item.js":279,"./picker-list-item.template.js":280,"./picker-list.js":281,"./picker-list.template.js":282,"./picker-menu-option.js":283,"./picker-menu-option.template.js":284,"./picker-menu.js":285,"./picker-menu.template.js":286,"./picker.js":288,"./picker.template.js":289}],279:[function(require,module,exports){
37160"use strict";
37161
37162Object.defineProperty(exports, "__esModule", {
37163  value: true
37164});
37165exports.PickerListItem = void 0;
37166
37167var _tslib = require("tslib");
37168
37169var _fastElement = require("@microsoft/fast-element");
37170
37171var _fastWebUtilities = require("@microsoft/fast-web-utilities");
37172

37173var _foundationElement = require("../foundation-element/foundation-element.js");
37174
37175const defaultContentsTemplate = (0, _fastElement.html)`
37176    <template>
37177        ${x => x.value}
37178    </template>
37179`;
37180/**
37181 * A picker list item Custom HTML Element.
37182 *
37183 * @alpha
37184 */
37185
37186class PickerListItem extends _foundationElement.FoundationElement {
37187  contentsTemplateChanged() {
37188    if (this.$fastController.isConnected) {
37189      this.updateView();
37190    }
37191  }
37192  /**
37193   * @internal
37194   */
37195
37196
37197  connectedCallback() {
37198    super.connectedCallback();
37199    this.updateView();
37200  }
37201  /**
37202   * @internal
37203   */
37204
37205
37206  disconnectedCallback() {
37207    this.disconnectView();
37208    super.disconnectedCallback();
37209  }
37210
37211  handleKeyDown(e) {
37212    if (e.defaultPrevented) {
37213      return false;
37214    }
37215
37216    if (e.key === _fastWebUtilities.keyEnter) {
37217      this.handleInvoke();
37218      return false;
37219    }
37220
37221    return true;
37222  }
37223
37224  handleClick(e) {
37225    if (!e.defaultPrevented) {
37226      this.handleInvoke();
37227    }
37228
37229    return false;
37230  }
37231
37232  handleInvoke() {
37233    this.$emit("pickeriteminvoked");
37234  }
37235
37236  updateView() {
37237    var _a, _b;
37238
37239    this.disconnectView();
37240    this.customView = (_b = (_a = this.contentsTemplate) === null || _a === void 0 ? void 0 : _a.render(this, this)) !== null && _b !== void 0 ? _b : defaultContentsTemplate.render(this, this);
37241  }
37242
37243  disconnectView() {
37244    var _a;
37245
37246    (_a = this.customView) === null || _a === void 0 ? void 0 : _a.dispose();
37247    this.customView = undefined;
37248  }
37249
37250}
37251
37252exports.PickerListItem = PickerListItem;
37253(0, _tslib.__decorate)([(0, _fastElement.attr)({
37254  attribute: "value"
37255})], PickerListItem.prototype, "value", void 0);
37256(0, _tslib.__decorate)([_fastElement.observable], PickerListItem.prototype, "contentsTemplate", void 0);
37257
37258},{"../foundation-element/foundation-element.js":251,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],280:[function(require,module,exports){
37259"use strict";
37260
37261Object.defineProperty(exports, "__esModule", {
37262  value: true
37263});
37264exports.pickerListItemTemplate = void 0;
37265
37266var _fastElement = require("@microsoft/fast-element");
37267
37268/**
37269 *
37270 * @public
37271 */
37272const pickerListItemTemplate = (context, definition) => {
37273  return (0, _fastElement.html)`
37274        <template
37275            role="listitem"
37276            tabindex="0"
37277            @click="${(x, c) => x.handleClick(c.event)}"
37278            @keydown="${(x, c) => x.handleKeyDown(c.event)}"
37279        >
37280            <slot></slot>
37281        </template>
37282    `;
37283};
37284
37285exports.pickerListItemTemplate = pickerListItemTemplate;
37286
37287},{"@microsoft/fast-element":151}],281:[function(require,module,exports){
37288"use strict";
37289
37290Object.defineProperty(exports, "__esModule", {
37291  value: true
37292});
37293exports.PickerList = void 0;
37294
37295var _foundationElement = require("../foundation-element/foundation-element.js");
37296
37297/**
37298 * A List Picker Menu Custom HTML Element.
37299 *
37300 * @alpha
37301 */
37302class PickerList extends _foundationElement.FoundationElement {}
37303
37304exports.PickerList = PickerList;
37305
37306},{"../foundation-element/foundation-element.js":251}],282:[function(require,module,exports){
37307"use strict";
37308
37309Object.defineProperty(exports, "__esModule", {
37310  value: true
37311});
37312exports.pickerListTemplate = void 0;
37313
37314var _fastElement = require("@microsoft/fast-element");
37315
37316/**
37317 *
37318 * @public
37319 */
37320const pickerListTemplate = (context, definition) => {
37321  return (0, _fastElement.html)`
37322        <template slot="list-region" role="list" class="picker-list">
37323            <slot></slot>
37324            <slot name="input-region"></slot>
37325        </template>
37326    `;
37327};
37328
37329exports.pickerListTemplate = pickerListTemplate;
37330
37331},{"@microsoft/fast-element":151}],283:[function(require,module,exports){
37332"use strict";
37333
37334Object.defineProperty(exports, "__esModule", {
37335  value: true
37336});
37337exports.PickerMenuOption = void 0;
37338
37339var _tslib = require("tslib");
37340
37341var _fastElement = require("@microsoft/fast-element");
37342
37343var _foundationElement = require("../foundation-element/foundation-element.js");
37344
37345const defaultContentsTemplate = (0, _fastElement.html)`
37346    <template>
37347        ${x => x.value}
37348    </template>
37349`;
37350/**
37351 * A picker list item Custom HTML Element.
37352 *
37353 * @alpha
37354 */
37355
37356class PickerMenuOption extends _foundationElement.FoundationElement {
37357  contentsTemplateChanged() {
37358    if (this.$fastController.isConnected) {
37359      this.updateView();
37360    }
37361  }
37362  /**
37363   * @internal
37364   */
37365
37366
37367  connectedCallback() {
37368    super.connectedCallback();
37369    this.updateView();
37370  }
37371  /**
37372   * @internal
37373   */
37374
37375
37376  disconnectedCallback() {
37377    super.disconnectedCallback();
37378    this.disconnectView();
37379  }
37380
37381  handleClick(e) {
37382    if (e.defaultPrevented) {
37383      return false;

37384    }
37385
37386    this.handleInvoked();
37387    return false;
37388  }
37389
37390  handleInvoked() {
37391    this.$emit("pickeroptioninvoked");
37392  }
37393
37394  updateView() {
37395    var _a, _b;
37396
37397    this.disconnectView();
37398    this.customView = (_b = (_a = this.contentsTemplate) === null || _a === void 0 ? void 0 : _a.render(this, this)) !== null && _b !== void 0 ? _b : defaultContentsTemplate.render(this, this);
37399  }
37400
37401  disconnectView() {
37402    var _a;
37403
37404    (_a = this.customView) === null || _a === void 0 ? void 0 : _a.dispose();
37405    this.customView = undefined;
37406  }
37407
37408}
37409
37410exports.PickerMenuOption = PickerMenuOption;
37411(0, _tslib.__decorate)([(0, _fastElement.attr)({
37412  attribute: "value"
37413})], PickerMenuOption.prototype, "value", void 0);
37414(0, _tslib.__decorate)([_fastElement.observable], PickerMenuOption.prototype, "contentsTemplate", void 0);
37415
37416},{"../foundation-element/foundation-element.js":251,"@microsoft/fast-element":151,"tslib":372}],284:[function(require,module,exports){
37417"use strict";
37418
37419Object.defineProperty(exports, "__esModule", {
37420  value: true
37421});
37422exports.pickerMenuOptionTemplate = void 0;
37423
37424var _fastElement = require("@microsoft/fast-element");
37425
37426/**
37427 *
37428 * @public
37429 */
37430const pickerMenuOptionTemplate = (context, definition) => {
37431  return (0, _fastElement.html)`
37432        <template
37433            role="listitem"
37434            tabindex="-1"
37435            @click="${(x, c) => x.handleClick(c.event)}"
37436        >
37437            <slot></slot>
37438        </template>
37439    `;
37440};
37441
37442exports.pickerMenuOptionTemplate = pickerMenuOptionTemplate;
37443
37444},{"@microsoft/fast-element":151}],285:[function(require,module,exports){
37445"use strict";
37446
37447Object.defineProperty(exports, "__esModule", {
37448  value: true
37449});
37450exports.PickerMenu = void 0;
37451
37452var _tslib = require("tslib");
37453
37454var _fastWebUtilities = require("@microsoft/fast-web-utilities");
37455
37456var _fastElement = require("@microsoft/fast-element");
37457
37458var _foundationElement = require("../foundation-element/foundation-element.js");
37459
37460/**
37461 * A List Picker Menu Custom HTML Element.
37462 *
37463 * @alpha
37464 */
37465class PickerMenu extends _foundationElement.FoundationElement {
37466  constructor() {
37467    super(...arguments);
37468    /**
37469     * Children that are list items
37470     *
37471     * @internal
37472     */
37473
37474    this.optionElements = [];
37475  }
37476
37477  menuElementsChanged() {
37478    this.updateOptions();
37479  }
37480
37481  headerElementsChanged() {
37482    this.updateOptions();
37483  }
37484
37485  footerElementsChanged() {
37486    this.updateOptions();
37487  }
37488
37489  updateOptions() {
37490    this.optionElements.splice(0, this.optionElements.length);
37491    this.addSlottedListItems(this.headerElements);
37492    this.addSlottedListItems(this.menuElements);
37493    this.addSlottedListItems(this.footerElements);
37494    this.$emit("optionsupdated", {
37495      bubbles: false
37496    });
37497  }
37498
37499  addSlottedListItems(slotChildren) {
37500    if (slotChildren === undefined) {
37501      return;
37502    }
37503
37504    slotChildren.forEach(child => {
37505      if (child.nodeType === 1 && child.getAttribute("role") === "listitem") {
37506        child.id = child.id || (0, _fastWebUtilities.uniqueId)("option-");
37507        this.optionElements.push(child);
37508      }
37509    });
37510  }
37511
37512}
37513
37514exports.PickerMenu = PickerMenu;
37515(0, _tslib.__decorate)([_fastElement.observable], PickerMenu.prototype, "menuElements", void 0);
37516(0, _tslib.__decorate)([_fastElement.observable], PickerMenu.prototype, "headerElements", void 0);
37517(0, _tslib.__decorate)([_fastElement.observable], PickerMenu.prototype, "footerElements", void 0);
37518(0, _tslib.__decorate)([_fastElement.observable], PickerMenu.prototype, "suggestionsAvailableText", void 0);
37519
37520},{"../foundation-element/foundation-element.js":251,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],286:[function(require,module,exports){
37521"use strict";
37522
37523Object.defineProperty(exports, "__esModule", {
37524  value: true
37525});
37526exports.pickerMenuTemplate = void 0;
37527
37528var _fastElement = require("@microsoft/fast-element");
37529
37530/**
37531 * The template for the List Picker component.
37532 * @public
37533 */
37534const pickerMenuTemplate = (context, definition) => {
37535  return (0, _fastElement.html)`
37536        <template role="list" slot="menu-region">
37537            <div class="options-display" part="options-display">
37538                <div class="header-region" part="header-region">
37539                    <slot name="header-region" ${(0, _fastElement.slotted)("headerElements")}></slot>
37540                </div>
37541
37542                <slot ${(0, _fastElement.slotted)("menuElements")}></slot>
37543                <div class="footer-region" part="footer-region">
37544                    <slot name="footer-region" ${(0, _fastElement.slotted)("footerElements")}></slot>
37545                </div>
37546                <div
37547                    role="alert"

37548                    aria-live="polite"
37549                    part="suggestions-available-alert"
37550                    class="suggestions-available-alert"
37551                >
37552                    ${x => x.suggestionsAvailableText}
37553                </div>
37554            </div>
37555        </template>
37556    `;
37557};
37558
37559exports.pickerMenuTemplate = pickerMenuTemplate;
37560
37561},{"@microsoft/fast-element":151}],287:[function(require,module,exports){
37562"use strict";
37563
37564Object.defineProperty(exports, "__esModule", {
37565  value: true
37566});
37567exports.FormAssociatedPicker = void 0;
37568
37569var _formAssociated = require("../form-associated/form-associated.js");
37570
37571var _foundationElement = require("../foundation-element/foundation-element.js");
37572
37573class _Picker extends _foundationElement.FoundationElement {}
37574/**
37575 * A form-associated base class for the {@link @microsoft/fast-foundation#(Picker:class)} component.
37576 *
37577 * @internal
37578 */
37579
37580
37581class FormAssociatedPicker extends (0, _formAssociated.FormAssociated)(_Picker) {
37582  constructor() {
37583    super(...arguments);
37584    this.proxy = document.createElement("input");
37585  }
37586
37587}
37588
37589exports.FormAssociatedPicker = FormAssociatedPicker;
37590
37591},{"../form-associated/form-associated.js":249,"../foundation-element/foundation-element.js":251}],288:[function(require,module,exports){
37592"use strict";
37593
37594Object.defineProperty(exports, "__esModule", {
37595  value: true
37596});
37597exports.Picker = void 0;
37598
37599var _tslib = require("tslib");
37600
37601var _fastElement = require("@microsoft/fast-element");
37602
37603var _fastWebUtilities = require("@microsoft/fast-web-utilities");
37604
37605var _index = require("../anchored-region/index.js");
37606
37607var _pickerMenuOption = require("./picker-menu-option.js");
37608
37609var _pickerListItem = require("./picker-list-item.js");
37610
37611var _pickerFormAssociated = require("./picker.form-associated.js");
37612
37613const pickerInputTemplate = (0, _fastElement.html)`
37614    <input
37615        slot="input-region"
37616        role="combobox"
37617        type="text"
37618        autocapitalize="off"
37619        autocomplete="off"
37620        haspopup="list"
37621        aria-label="${x => x.label}"
37622        aria-labelledby="${x => x.labelledBy}"
37623        placeholder="${x => x.placeholder}"
37624        ${(0, _fastElement.ref)("inputElement")}
37625    ></input>
37626`;
37627/**
37628 * A Picker Custom HTML Element.  This is an early "alpha" version of the component.
37629 * Developers should expect the api to evolve, breaking changes are possible.
37630 *
37631 * @alpha
37632 */
37633
37634class Picker extends _pickerFormAssociated.FormAssociatedPicker {
37635  constructor() {
37636    super(...arguments);
37637    /**
37638     * Currently selected items. Comma delineated string ie. "apples,oranges".
37639     *
37640     * @alpha
37641     * @remarks
37642     * HTML Attribute: selection
37643     */
37644
37645    this.selection = "";
37646    /**
37647     * Whether the component should remove an option from the list when it is in the selection
37648     *
37649     * @alpha
37650     * @remarks
37651     * HTML Attribute: filter-selected
37652     */
37653
37654    this.filterSelected = true;
37655    /**
37656     * Whether the component should remove options based on the current query
37657     *
37658     * @alpha
37659     * @remarks
37660     * HTML Attribute: filter-query
37661     */
37662
37663    this.filterQuery = true;
37664    /**
37665     * The text to present to assistive technolgies when no suggestions are available.
37666     *
37667     * @alpha
37668     * @remarks
37669     * HTML Attribute: no-suggestions-text
37670     */
37671
37672    this.noSuggestionsText = "No suggestions available";
37673    /**
37674     *  The text to present to assistive technolgies when suggestions are available.
37675     *
37676     * @alpha
37677     * @remarks
37678     * HTML Attribute: suggestions-available-text
37679     */
37680
37681    this.suggestionsAvailableText = "Suggestions available";
37682    /**
37683     * The text to present to assistive technologies when suggestions are loading.
37684     *
37685     * @alpha
37686     * @remarks
37687     * HTML Attribute: loading-text
37688     */
37689
37690    this.loadingText = "Loading suggestions";
37691    /**
37692     * Controls menu placement
37693     *
37694     * @alpha
37695     * @remarks
37696     * HTML Attribute: menu-placement
37697     */
37698
37699    this.menuPlacement = "bottom-fill";
37700    /**
37701     * Whether to display a loading state if the menu is opened.
37702     *
37703     * @alpha
37704     */
37705
37706    this.showLoading = false;
37707    /**
37708     *  Current list of options in array form
37709     *
37710     * @alpha
37711     */
37712
37713    this.optionsList = [];
37714    /**
37715     *  Current list of filtered options in array form
37716     *
37717     * @internal
37718     */
37719
37720    this.filteredOptionsList = [];
37721    /**
37722     *  Indicates if the flyout menu is open or not
37723     *
37724     * @internal
37725     */
37726
37727    this.flyoutOpen = false;

vendor: 6,733 bytes, lines 37728-37994

37728    /**
37729     *  Index of currently active menu option
37730     *
37731     * @internal
37732     */
37733
37734    this.menuFocusIndex = -1;
37735    /**
37736     *  Internal flag to indicate no options available display should be shown.
37737     *
37738     * @internal
37739     */
37740
37741    this.showNoOptions = false;
37742    /**
37743     *
37744     *
37745     * @internal
37746     */
37747
37748    this.selectedItems = [];
37749    this.inputElementView = null;
37750    /**
37751     * Handle input event from input element
37752     */
37753
37754    this.handleTextInput = e => {
37755      this.query = this.inputElement.value;
37756    };
37757    /**
37758     * Handle click event from input element
37759     */
37760
37761
37762    this.handleInputClick = e => {
37763      e.preventDefault();
37764      this.toggleFlyout(true);
37765    };
37766    /**
37767     * Sets properties on the anchored region once it is instanciated.
37768     */
37769
37770
37771    this.setRegionProps = () => {
37772      if (!this.flyoutOpen) {
37773        return;
37774      }
37775
37776      if (this.region === null || this.region === undefined) {
37777        // TODO: limit this
37778        _fastElement.DOM.queueUpdate(this.setRegionProps);
37779
37780        return;
37781      }
37782
37783      this.region.anchorElement = this.inputElement;
37784    };
37785    /**
37786     * matches menu placement values with the associated menu config
37787     */
37788
37789
37790    this.configLookup = {
37791      top: _index.FlyoutPosTop,
37792      bottom: _index.FlyoutPosBottom,
37793      tallest: _index.FlyoutPosTallest,
37794      "top-fill": _index.FlyoutPosTopFill,
37795      "bottom-fill": _index.FlyoutPosBottomFill,
37796      "tallest-fill": _index.FlyoutPosTallestFill
37797    };
37798  }
37799
37800  selectionChanged() {
37801    if (this.$fastController.isConnected) {
37802      this.handleSelectionChange();
37803
37804      if (this.proxy instanceof HTMLInputElement) {
37805        this.proxy.value = this.selection;
37806        this.validate();
37807      }
37808    }
37809  }
37810
37811  optionsChanged() {
37812    this.optionsList = this.options.split(",").map(opt => opt.trim()).filter(opt => opt !== "");
37813  }
37814
37815  menuPlacementChanged() {
37816    if (this.$fastController.isConnected) {
37817      this.updateMenuConfig();
37818    }
37819  }
37820
37821  showLoadingChanged() {
37822    if (this.$fastController.isConnected) {
37823      _fastElement.DOM.queueUpdate(() => {
37824        this.setFocusedOption(0);
37825      });
37826    }
37827  }
37828
37829  listItemTemplateChanged() {
37830    this.updateListItemTemplate();
37831  }
37832
37833  defaultListItemTemplateChanged() {
37834    this.updateListItemTemplate();
37835  }
37836
37837  menuOptionTemplateChanged() {
37838    this.updateOptionTemplate();
37839  }
37840
37841  defaultMenuOptionTemplateChanged() {
37842    this.updateOptionTemplate();
37843  }
37844
37845  optionsListChanged() {
37846    this.updateFilteredOptions();
37847  }
37848
37849  queryChanged() {
37850    if (this.$fastController.isConnected) {
37851      if (this.inputElement.value !== this.query) {
37852        this.inputElement.value = this.query;
37853      }
37854
37855      this.updateFilteredOptions();
37856      this.$emit("querychange", {
37857        bubbles: false
37858      });
37859    }
37860  }
37861
37862  filteredOptionsListChanged() {
37863    if (this.$fastController.isConnected) {
37864      this.showNoOptions = this.filteredOptionsList.length === 0 && this.menuElement.querySelectorAll('[role="listitem"]').length === 0;
37865      this.setFocusedOption(this.showNoOptions ? -1 : 0);
37866    }
37867  }
37868
37869  flyoutOpenChanged() {
37870    if (this.flyoutOpen) {
37871      _fastElement.DOM.queueUpdate(this.setRegionProps);
37872
37873      this.$emit("menuopening", {
37874        bubbles: false
37875      });
37876    } else {
37877      this.$emit("menuclosing", {
37878        bubbles: false
37879      });
37880    }
37881  }
37882
37883  showNoOptionsChanged() {
37884    if (this.$fastController.isConnected) {
37885      _fastElement.DOM.queueUpdate(() => {
37886        this.setFocusedOption(0);
37887      });
37888    }
37889  }
37890  /**
37891   * @internal
37892   */
37893
37894
37895  connectedCallback() {
37896    super.connectedCallback();
37897    this.listElement = document.createElement(this.selectedListTag);
37898    this.appendChild(this.listElement);
37899    this.itemsPlaceholderElement = document.createComment("");
37900    this.listElement.append(this.itemsPlaceholderElement);
37901    this.inputElementView = pickerInputTemplate.render(this, this.listElement);
37902    const match = this.menuTag.toUpperCase();
37903    this.menuElement = Array.from(this.children).find(element => {
37904      return element.tagName === match;
37905    });
37906
37907    if (this.menuElement === undefined) {
37908      this.menuElement = document.createElement(this.menuTag);
37909      this.appendChild(this.menuElement);
37910    }
37911
37912    if (this.menuElement.id === "") {
37913      this.menuElement.id = (0, _fastWebUtilities.uniqueId)("listbox-");
37914    }
37915
37916    this.menuId = this.menuElement.id;
37917    this.optionsPlaceholder = document.createComment("");
37918    this.menuElement.append(this.optionsPlaceholder);
37919    this.updateMenuConfig();
37920
37921    _fastElement.DOM.queueUpdate(() => this.initialize());
37922  }
37923
37924  disconnectedCallback() {
37925    super.disconnectedCallback();
37926    this.toggleFlyout(false);
37927    this.inputElement.removeEventListener("input", this.handleTextInput);
37928    this.inputElement.removeEventListener("click", this.handleInputClick);
37929
37930    if (this.inputElementView !== null) {
37931      this.inputElementView.dispose();
37932      this.inputElementView = null;
37933    }
37934  }
37935  /**
37936   * Move focus to the input element
37937   * @public
37938   */
37939
37940
37941  focus() {
37942    this.inputElement.focus();
37943  }
37944  /**
37945   * Initialize the component.  This is delayed a frame to ensure children are connected as well.
37946   */
37947
37948
37949  initialize() {
37950    this.updateListItemTemplate();
37951    this.updateOptionTemplate();
37952    this.itemsRepeatBehavior = new _fastElement.RepeatDirective(x => x.selectedItems, x => x.activeListItemTemplate, {
37953      positioning: true
37954    }).createBehavior(this.itemsPlaceholderElement);
37955    this.inputElement.addEventListener("input", this.handleTextInput);
37956    this.inputElement.addEventListener("click", this.handleInputClick);
37957    /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
37958
37959    this.$fastController.addBehaviors([this.itemsRepeatBehavior]);
37960    this.menuElement.suggestionsAvailableText = this.suggestionsAvailableText;
37961    this.menuElement.addEventListener("optionsupdated", this.handleMenuOptionsUpdated);
37962    this.optionsRepeatBehavior = new _fastElement.RepeatDirective(x => x.filteredOptionsList, x => x.activeMenuOptionTemplate, {
37963      positioning: true
37964    }).createBehavior(this.optionsPlaceholder);
37965    /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
37966
37967    this.$fastController.addBehaviors([this.optionsRepeatBehavior]);
37968    this.handleSelectionChange();
37969  }
37970  /**
37971   * Toggles the menu flyout
37972   */
37973
37974
37975  toggleFlyout(open) {
37976    if (this.flyoutOpen === open) {
37977      return;
37978    }
37979
37980    if (open && document.activeElement === this.inputElement) {
37981      this.flyoutOpen = open;
37982
37983      _fastElement.DOM.queueUpdate(() => {
37984        if (this.menuElement !== undefined) {
37985          this.setFocusedOption(0);
37986        } else {
37987          this.disableMenu();
37988        }
37989      });
37990
37991      return;
37992    }
37993
37994    this.flyoutOpen = false;

37995    this.disableMenu();
37996    return;
37997  }
37998  /**
37999   * Handle the menu options updated event from the child menu
38000   */
38001
38002
38003  handleMenuOptionsUpdated(e) {
38004    e.preventDefault();
38005
38006    if (this.flyoutOpen) {
38007      this.setFocusedOption(0);
38008    }
38009  }
38010  /**
38011   * Handle key down events.
38012   */
38013
38014
38015  handleKeyDown(e) {
38016    if (e.defaultPrevented) {
38017      return false;
38018    }
38019
38020    switch (e.key) {
38021      // TODO: what should "home" and "end" keys do, exactly?
38022      //
38023      // case keyHome: {
38024      //     if (!this.flyoutOpen) {
38025      //         this.toggleFlyout(true);
38026      //     } else {
38027      //         if (this.menuElement.optionElements.length > 0) {
38028      //             this.setFocusedOption(0);
38029      //         }
38030      //     }
38031      //     return false;
38032      // }
38033      // case keyEnd: {
38034      //     if (!this.flyoutOpen) {
38035      //         this.toggleFlyout(true);
38036      //     } else {
38037      //         if (this.menuElement.optionElements.length > 0) {
38038      //             this.toggleFlyout(true);
38039      //             this.setFocusedOption(this.menuElement.optionElements.length - 1);
38040      //         }
38041      //     }
38042      //     return false;
38043      // }
38044      case _fastWebUtilities.keyArrowDown:
38045        {
38046          if (!this.flyoutOpen) {
38047            this.toggleFlyout(true);
38048          } else {
38049            const nextFocusOptionIndex = this.flyoutOpen ? Math.min(this.menuFocusIndex + 1, this.menuElement.optionElements.length - 1) : 0;
38050            this.setFocusedOption(nextFocusOptionIndex);
38051          }
38052
38053          return false;
38054        }
38055
38056      case _fastWebUtilities.keyArrowUp:
38057        {
38058          if (!this.flyoutOpen) {
38059            this.toggleFlyout(true);
38060          } else {
38061            const previousFocusOptionIndex = this.flyoutOpen ? Math.max(this.menuFocusIndex - 1, 0) : 0;
38062            this.setFocusedOption(previousFocusOptionIndex);
38063          }
38064
38065          return false;
38066        }
38067
38068      case _fastWebUtilities.keyEscape:
38069        {
38070          this.toggleFlyout(false);
38071          return false;
38072        }
38073
38074      case _fastWebUtilities.keyEnter:
38075        {
38076          if (this.menuFocusIndex !== -1 && this.menuElement.optionElements.length > this.menuFocusIndex) {
38077            this.menuElement.optionElements[this.menuFocusIndex].click();
38078          }
38079
38080          return false;
38081        }
38082
38083      case _fastWebUtilities.keyArrowRight:
38084        {
38085          if (document.activeElement !== this.inputElement) {
38086            this.incrementFocusedItem(1);
38087            return false;
38088          } // don't block if arrow keys moving caret in input element
38089
38090
38091          return true;
38092        }
38093
38094      case _fastWebUtilities.keyArrowLeft:
38095        {
38096          if (this.inputElement.selectionStart === 0) {
38097            this.incrementFocusedItem(-1);
38098            return false;
38099          } // don't block if arrow keys moving caret in input element
38100
38101
38102          return true;
38103        }
38104
38105      case _fastWebUtilities.keyDelete:
38106      case _fastWebUtilities.keyBackspace:
38107        {
38108          if (document.activeElement === null) {
38109            return true;
38110          }
38111
38112          if (document.activeElement === this.inputElement) {
38113            if (this.inputElement.selectionStart === 0) {
38114              this.selection = this.selectedItems.slice(0, this.selectedItems.length - 1).toString();
38115              this.toggleFlyout(false);
38116              return false;
38117            } // let text deletion proceed
38118
38119
38120            return true;
38121          }
38122
38123          const selectedItems = Array.from(this.listElement.children);
38124          const currentFocusedItemIndex = selectedItems.indexOf(document.activeElement);
38125
38126          if (currentFocusedItemIndex > -1) {
38127            // delete currently focused item
38128            this.selection = this.selectedItems.splice(currentFocusedItemIndex, 1).toString();
38129
38130            _fastElement.DOM.queueUpdate(() => {
38131              selectedItems[Math.min(selectedItems.length, currentFocusedItemIndex)].focus();
38132            });
38133
38134            return false;
38135          }
38136
38137          return true;
38138        }
38139    }
38140
38141    this.toggleFlyout(true);
38142    return true;
38143  }
38144  /**
38145   * Handle focus in events.
38146   */
38147
38148
38149  handleFocusIn(e) {
38150    return false;

vendor: 4,740 bytes, lines 38151-38333

38151  }
38152  /**
38153   * Handle focus out events.
38154   */
38155
38156
38157  handleFocusOut(e) {
38158    if (this.menuElement === undefined || !this.menuElement.contains(e.relatedTarget)) {
38159      this.toggleFlyout(false);
38160    }
38161
38162    return false;
38163  }
38164  /**
38165   * The list of selected items has changed
38166   */
38167
38168
38169  handleSelectionChange() {
38170    if (this.selectedItems.toString() === this.selection) {
38171      return;
38172    }
38173
38174    this.selectedItems = this.selection === "" ? [] : this.selection.split(",");
38175    this.updateFilteredOptions();
38176
38177    _fastElement.DOM.queueUpdate(() => {
38178      this.checkMaxItems();
38179    });
38180
38181    this.$emit("selectionchange", {
38182      bubbles: false
38183    });
38184  }
38185  /**
38186   * Anchored region is loaded, menu and options exist in the DOM.
38187   */
38188
38189
38190  handleRegionLoaded(e) {
38191    _fastElement.DOM.queueUpdate(() => {
38192      this.setFocusedOption(0);
38193      this.$emit("menuloaded", {
38194        bubbles: false
38195      });
38196    });
38197  }
38198  /**
38199   * Checks if the maximum number of items has been chosen and updates the ui.
38200   */
38201
38202
38203  checkMaxItems() {
38204    if (this.inputElement === undefined) {
38205      return;
38206    }
38207
38208    if (this.maxSelected !== undefined && this.selectedItems.length >= this.maxSelected) {
38209      if (document.activeElement === this.inputElement) {
38210        const selectedItemInstances = Array.from(this.listElement.querySelectorAll("[role='listitem']"));
38211        selectedItemInstances[selectedItemInstances.length - 1].focus();
38212      }
38213
38214      this.inputElement.hidden = true;
38215    } else {
38216      this.inputElement.hidden = false;
38217    }
38218  }
38219  /**
38220   * A list item has been invoked.
38221   */
38222
38223
38224  handleItemInvoke(e) {
38225    if (e.defaultPrevented) {
38226      return false;
38227    }
38228
38229    if (e.target instanceof _pickerListItem.PickerListItem) {
38230      const listItems = Array.from(this.listElement.querySelectorAll("[role='listitem']"));
38231      const itemIndex = listItems.indexOf(e.target);
38232
38233      if (itemIndex !== -1) {
38234        const newSelection = this.selectedItems.slice();
38235        newSelection.splice(itemIndex, 1);
38236        this.selection = newSelection.toString();
38237
38238        _fastElement.DOM.queueUpdate(() => this.incrementFocusedItem(0));
38239      }
38240
38241      return false;
38242    }
38243
38244    return true;
38245  }
38246  /**
38247   * A menu option has been invoked.
38248   */
38249
38250
38251  handleOptionInvoke(e) {
38252    if (e.defaultPrevented) {
38253      return false;
38254    }
38255
38256    if (e.target instanceof _pickerMenuOption.PickerMenuOption) {
38257      if (e.target.value !== undefined) {
38258        this.selection = `${this.selection}${this.selection === "" ? "" : ","}${e.target.value}`;
38259      }
38260
38261      this.inputElement.value = "";
38262      this.query = "";
38263      this.inputElement.focus();
38264      this.toggleFlyout(false);
38265      return false;
38266    } // const value: string = (e.target as PickerMenuOption).value;
38267
38268
38269    return true;
38270  }
38271  /**
38272   * Increments the focused list item by the specified amount
38273   */
38274
38275
38276  incrementFocusedItem(increment) {
38277    if (this.selectedItems.length === 0) {
38278      this.inputElement.focus();
38279      return;
38280    }
38281
38282    const selectedItemsAsElements = Array.from(this.listElement.querySelectorAll("[role='listitem']"));
38283
38284    if (document.activeElement !== null) {
38285      let currentFocusedItemIndex = selectedItemsAsElements.indexOf(document.activeElement);
38286
38287      if (currentFocusedItemIndex === -1) {
38288        // use the input element
38289        currentFocusedItemIndex = selectedItemsAsElements.length;
38290      }
38291
38292      const newFocusedItemIndex = Math.min(selectedItemsAsElements.length, Math.max(0, currentFocusedItemIndex + increment));
38293
38294      if (newFocusedItemIndex === selectedItemsAsElements.length) {
38295        if (this.maxSelected !== undefined && this.selectedItems.length >= this.maxSelected) {
38296          selectedItemsAsElements[newFocusedItemIndex - 1].focus();
38297        } else {
38298          this.inputElement.focus();
38299        }
38300      } else {
38301        selectedItemsAsElements[newFocusedItemIndex].focus();
38302      }
38303    }
38304  }
38305  /**
38306   * Disables the menu. Note that the menu can be open, just doens't have any valid options on display.
38307   */
38308
38309
38310  disableMenu() {
38311    var _a, _b, _c;
38312
38313    this.menuFocusIndex = -1;
38314    this.menuFocusOptionId = undefined;
38315    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.removeAttribute("aria-activedescendant");
38316    (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.removeAttribute("aria-owns");
38317    (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.removeAttribute("aria-expanded");
38318  }
38319  /**
38320   * Sets the currently focused menu option by index
38321   */
38322
38323
38324  setFocusedOption(optionIndex) {
38325    if (!this.flyoutOpen || optionIndex === -1 || this.showNoOptions || this.showLoading) {
38326      this.disableMenu();
38327      return;
38328    }
38329
38330    if (this.menuElement.optionElements.length === 0) {
38331      return;
38332    }
38333

38334    this.menuElement.optionElements.forEach(element => {
38335      element.setAttribute("aria-selected", "false");
38336    });
38337    this.menuFocusIndex = optionIndex;
38338
38339    if (this.menuFocusIndex > this.menuElement.optionElements.length - 1) {
38340      this.menuFocusIndex = this.menuElement.optionElements.length - 1;
38341    }
38342
38343    this.menuFocusOptionId = this.menuElement.optionElements[this.menuFocusIndex].id;
38344    this.inputElement.setAttribute("aria-owns", this.menuId);
38345    this.inputElement.setAttribute("aria-expanded", "true");
38346    this.inputElement.setAttribute("aria-activedescendant", this.menuFocusOptionId);
38347    const focusedOption = this.menuElement.optionElements[this.menuFocusIndex];
38348    focusedOption.setAttribute("aria-selected", "true");
38349    this.menuElement.scrollTo(0, focusedOption.offsetTop);
38350  }
38351  /**
38352   * Updates the template used for the list item repeat behavior
38353   */
38354
38355
38356  updateListItemTemplate() {
38357    var _a;
38358
38359    this.activeListItemTemplate = (_a = this.listItemTemplate) !== null && _a !== void 0 ? _a : this.defaultListItemTemplate;
38360  }
38361  /**
38362   * Updates the template used for the menu option repeat behavior
38363   */
38364
38365
38366  updateOptionTemplate() {
38367    var _a;
38368
38369    this.activeMenuOptionTemplate = (_a = this.menuOptionTemplate) !== null && _a !== void 0 ? _a : this.defaultMenuOptionTemplate;
38370  }
38371  /**
38372   * Updates the filtered options array
38373   */
38374
38375
38376  updateFilteredOptions() {
38377    this.filteredOptionsList = this.optionsList.slice(0);
38378
38379    if (this.filterSelected) {
38380      this.filteredOptionsList = this.filteredOptionsList.filter(el => this.selectedItems.indexOf(el) === -1);
38381    }
38382
38383    if (this.filterQuery && this.query !== "" && this.query !== undefined) {
38384      this.filteredOptionsList = this.filteredOptionsList.filter(el => el.indexOf(this.query) !== -1);
38385    }
38386  }
38387  /**
38388   * Updates the menu configuration
38389   */
38390
38391
38392  updateMenuConfig() {
38393    let newConfig = this.configLookup[this.menuPlacement];
38394
38395    if (newConfig === null) {
38396      newConfig = _index.FlyoutPosBottomFill;
38397    }
38398
38399    this.menuConfig = Object.assign(Object.assign({}, newConfig), {
38400      autoUpdateMode: "auto",
38401      fixedPlacement: true,
38402      horizontalViewportLock: false,
38403      verticalViewportLock: false
38404    });
38405  }
38406
38407}
38408
38409exports.Picker = Picker;
38410(0, _tslib.__decorate)([(0, _fastElement.attr)({
38411  attribute: "selection"
38412})], Picker.prototype, "selection", void 0);
38413(0, _tslib.__decorate)([(0, _fastElement.attr)({
38414  attribute: "options"
38415})], Picker.prototype, "options", void 0);
38416(0, _tslib.__decorate)([(0, _fastElement.attr)({
38417  attribute: "filter-selected",
38418  mode: "boolean"
38419})], Picker.prototype, "filterSelected", void 0);
38420(0, _tslib.__decorate)([(0, _fastElement.attr)({
38421  attribute: "filter-query",
38422  mode: "boolean"
38423})], Picker.prototype, "filterQuery", void 0);
38424(0, _tslib.__decorate)([(0, _fastElement.attr)({
38425  attribute: "max-selected"
38426})], Picker.prototype, "maxSelected", void 0);
38427(0, _tslib.__decorate)([(0, _fastElement.attr)({
38428  attribute: "no-suggestions-text"
38429})], Picker.prototype, "noSuggestionsText", void 0);
38430(0, _tslib.__decorate)([(0, _fastElement.attr)({
38431  attribute: "suggestions-available-text"
38432})], Picker.prototype, "suggestionsAvailableText", void 0);
38433(0, _tslib.__decorate)([(0, _fastElement.attr)({
38434  attribute: "loading-text"
38435})], Picker.prototype, "loadingText", void 0);
38436(0, _tslib.__decorate)([(0, _fastElement.attr)({
38437  attribute: "label"
38438})], Picker.prototype, "label", void 0);
38439(0, _tslib.__decorate)([(0, _fastElement.attr)({
38440  attribute: "labelledby"
38441})], Picker.prototype, "labelledBy", void 0);
38442(0, _tslib.__decorate)([(0, _fastElement.attr)({
38443  attribute: "placeholder"
38444})], Picker.prototype, "placeholder", void 0);
38445(0, _tslib.__decorate)([(0, _fastElement.attr)({
38446  attribute: "menu-placement"
38447})], Picker.prototype, "menuPlacement", void 0);
38448(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "showLoading", void 0);
38449(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "listItemTemplate", void 0);
38450(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "defaultListItemTemplate", void 0);
38451(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "activeListItemTemplate", void 0);
38452(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "menuOptionTemplate", void 0);
38453(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "defaultMenuOptionTemplate", void 0);
38454(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "activeMenuOptionTemplate", void 0);
38455(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "listItemContentsTemplate", void 0);
38456(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "menuOptionContentsTemplate", void 0);
38457(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "optionsList", void 0);
38458(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "query", void 0);
38459(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "filteredOptionsList", void 0);
38460(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "flyoutOpen", void 0);
38461(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "menuId", void 0);
38462(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "selectedListTag", void 0);
38463(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "menuTag", void 0);
38464(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "menuFocusIndex", void 0);
38465(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "menuFocusOptionId", void 0);
38466(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "showNoOptions", void 0);
38467(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "menuConfig", void 0);
38468(0, _tslib.__decorate)([_fastElement.observable], Picker.prototype, "selectedItems", void 0);
38469
38470},{"../anchored-region/index.js":184,"./picker-list-item.js":279,"./picker-menu-option.js":283,"./picker.form-associated.js":287,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],289:[function(require,module,exports){
38471"use strict";
38472
38473Object.defineProperty(exports, "__esModule", {
38474  value: true
38475});
38476exports.pickerTemplate = void 0;
38477
38478var _fastElement = require("@microsoft/fast-element");
38479
38480var _anchoredRegion = require("../anchored-region/anchored-region.js");
38481
38482var _pickerMenu = require("./picker-menu.js");
38483
38484var _pickerMenuOption = require("./picker-menu-option.js");
38485
38486var _pickerList = require("./picker-list.js");
38487
38488var _pickerListItem = require("./picker-list-item.js");
38489
38490function createDefaultListItemTemplate(context) {
38491  const pickerListItemTag = context.tagFor(_pickerListItem.PickerListItem);
38492  return (0, _fastElement.html)`
38493    <${pickerListItemTag}
38494        value="${x => x}"
38495        :contentsTemplate="${(x, c) => c.parent.listItemContentsTemplate}"
38496    >
38497    </${pickerListItemTag}>
38498    `;
38499}
38500
38501function createDefaultMenuOptionTemplate(context) {
38502  const pickerMenuOptionTag = context.tagFor(_pickerMenuOption.PickerMenuOption);
38503  return (0, _fastElement.html)`
38504    <${pickerMenuOptionTag}
38505        value="${x => x}"
38506        :contentsTemplate="${(x, c) => c.parent.menuOptionContentsTemplate}"
38507    >
38508    </${pickerMenuOptionTag}>
38509    `;
38510}
38511/**
38512 * The template for the List Picker component.
38513 * @public
38514 */
38515
38516
38517const pickerTemplate = (context, definition) => {
38518  const anchoredRegionTag = context.tagFor(_anchoredRegion.AnchoredRegion);
38519  const pickerMenuTag = context.tagFor(_pickerMenu.PickerMenu);
38520  const pickerListTag = context.tagFor(_pickerList.PickerList);
38521  const progressRingTag = context.tagFor(_pickerList.PickerList);
38522  const defaultListItemTemplate = createDefaultListItemTemplate(context);
38523  const defaultMenuOptionTemplate = createDefaultMenuOptionTemplate(context);
38524  return (0, _fastElement.html)`
38525        <template
38526            :selectedListTag="${() => pickerListTag}"
38527            :menuTag="${() => pickerMenuTag}"
38528            :defaultListItemTemplate="${defaultListItemTemplate}"
38529            :defaultMenuOptionTemplate="${defaultMenuOptionTemplate}"
38530            @focusin="${(x, c) => x.handleFocusIn(c.event)}"
38531            @focusout="${(x, c) => x.handleFocusOut(c.event)}"
38532            @keydown="${(x, c) => x.handleKeyDown(c.event)}"
38533            @pickeriteminvoked="${(x, c) => x.handleItemInvoke(c.event)}"
38534            @pickeroptioninvoked="${(x, c) => x.handleOptionInvoke(c.event)}"
38535        >
38536            <slot name="list-region"></slot>
38537
38538            ${(0, _fastElement.when)(x => x.flyoutOpen, (0, _fastElement.html)`

38539                <${anchoredRegionTag}
38540                    class="region"
38541                    part="region"
38542                    auto-update-mode="${x => x.menuConfig.autoUpdateMode}"
38543                    fixed-placement="${x => x.menuConfig.fixedPlacement}"
38544                    vertical-positioning-mode="${x => x.menuConfig.verticalPositioningMode}"
38545                    vertical-default-position="${x => x.menuConfig.verticalDefaultPosition}"
38546                    vertical-scaling="${x => x.menuConfig.verticalScaling}"
38547                    vertical-inset="${x => x.menuConfig.verticalInset}"
38548                    vertical-viewport-lock="${x => x.menuConfig.verticalViewportLock}"
38549                    horizontal-positioning-mode="${x => x.menuConfig.horizontalPositioningMode}"
38550                    horizontal-default-position="${x => x.menuConfig.horizontalDefaultPosition}"
38551                    horizontal-scaling="${x => x.menuConfig.horizontalScaling}"
38552                    horizontal-inset="${x => x.menuConfig.horizontalInset}"
38553                    horizontal-viewport-lock="${x => x.menuConfig.horizontalViewportLock}"
38554                    @loaded="${(x, c) => x.handleRegionLoaded(c.event)}"
38555                    ${(0, _fastElement.ref)("region")}
38556                >
38557                    ${(0, _fastElement.when)(x => !x.showNoOptions && !x.showLoading, (0, _fastElement.html)`
38558                            <slot name="menu-region"></slot>
38559                        `)}
38560                    ${(0, _fastElement.when)(x => x.showNoOptions && !x.showLoading, (0, _fastElement.html)`
38561                            <div class="no-options-display" part="no-options-display">
38562                                <slot name="no-options-region">
38563                                    ${x => x.noSuggestionsText}
38564                                </slot>
38565                            </div>
38566                        `)}
38567                    ${(0, _fastElement.when)(x => x.showLoading, (0, _fastElement.html)`
38568                            <div class="loading-display" part="loading-display">
38569                                <slot name="loading-region">
38570                                    <${progressRingTag}
38571                                        part="loading-progress"
38572                                        class="loading-progress
38573                                        slot="loading-region"
38574                                    ></${progressRingTag}>
38575                                        ${x => x.loadingText}
38576                                </slot>
38577                            </div>
38578                        `)}
38579                </${anchoredRegionTag}>
38580            `)}
38581        </template>
38582    `;
38583};
38584
38585exports.pickerTemplate = pickerTemplate;
38586
38587},{"../anchored-region/anchored-region.js":182,"./picker-list-item.js":279,"./picker-list.js":281,"./picker-menu-option.js":283,"./picker-menu.js":285,"@microsoft/fast-element":151}],290:[function(require,module,exports){
38588"use strict";
38589
38590Object.defineProperty(exports, "__esModule", {
38591  value: true
38592});
38593
38594var _progressRingTemplate = require("./progress-ring.template.js");
38595
38596Object.keys(_progressRingTemplate).forEach(function (key) {
38597  if (key === "default" || key === "__esModule") return;
38598  if (key in exports && exports[key] === _progressRingTemplate[key]) return;
38599  Object.defineProperty(exports, key, {
38600    enumerable: true,
38601    get: function () {
38602      return _progressRingTemplate[key];
38603    }
38604  });
38605});
38606
38607},{"./progress-ring.template.js":291}],291:[function(require,module,exports){
38608"use strict";
38609
38610Object.defineProperty(exports, "__esModule", {
38611  value: true
38612});
38613exports.progressRingTemplate = void 0;
38614
38615var _fastElement = require("@microsoft/fast-element");
38616
38617const progressSegments = 44;
38618/**
38619 * The template for the {@link @microsoft/fast-foundation#BaseProgress} component.
38620 * @public
38621 */
38622
38623const progressRingTemplate = (context, definition) => (0, _fastElement.html)`
38624    <template
38625        role="progressbar"
38626        aria-valuenow="${x => x.value}"
38627        aria-valuemin="${x => x.min}"
38628        aria-valuemax="${x => x.max}"
38629        class="${x => x.paused ? "paused" : ""}"
38630    >
38631        ${(0, _fastElement.when)(x => typeof x.value === "number", (0, _fastElement.html)`
38632                <svg
38633                    class="progress"
38634                    part="progress"

38635                    viewBox="0 0 16 16"
38636                    slot="determinate"
38637                >
38638                    <circle
38639                        class="background"
38640                        part="background"
38641                        cx="8px"
38642                        cy="8px"
38643                        r="7px"
38644                    ></circle>
38645                    <circle
38646                        class="determinate"
38647                        part="determinate"
38648                        style="stroke-dasharray: ${x => progressSegments * x.percentComplete / 100}px ${progressSegments}px"
38649                        cx="8px"
38650                        cy="8px"
38651                        r="7px"
38652                    ></circle>
38653                </svg>
38654            `, (0, _fastElement.html)`
38655                <slot name="indeterminate" slot="indeterminate">
38656                    ${definition.indeterminateIndicator || ""}
38657                </slot>
38658            `)}
38659    </template>
38660`;
38661
38662exports.progressRingTemplate = progressRingTemplate;
38663
38664},{"@microsoft/fast-element":151}],292:[function(require,module,exports){
38665"use strict";
38666
38667Object.defineProperty(exports, "__esModule", {
38668  value: true
38669});
38670exports.BaseProgress = void 0;
38671
38672var _tslib = require("tslib");
38673
38674var _fastElement = require("@microsoft/fast-element");
38675
38676var _foundationElement = require("../foundation-element/foundation-element.js");
38677
38678/**
38679 * An Progress HTML Element.
38680 * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
38681 *
38682 * @slot indeterminate - The slot for a custom indeterminate indicator
38683 * @csspart progress - Represents the progress element
38684 * @csspart determinate - The determinate indicator
38685 * @csspart indeterminate - The indeterminate indicator
38686 *
38687 * @public
38688 */
38689class BaseProgress extends _foundationElement.FoundationElement {
38690  constructor() {
38691    super(...arguments);
38692    /**
38693     * Indicates progress in %
38694     * @internal
38695     */
38696
38697    this.percentComplete = 0;
38698  }
38699
38700  valueChanged() {
38701    if (this.$fastController.isConnected) {
38702      this.updatePercentComplete();
38703    }
38704  }
38705
38706  minChanged() {
38707    if (this.$fastController.isConnected) {
38708      this.updatePercentComplete();
38709    }
38710  }
38711
38712  maxChanged() {
38713    if (this.$fastController.isConnected) {
38714      this.updatePercentComplete();
38715    }
38716  }
38717  /**
38718   * @internal
38719   */
38720
38721
38722  connectedCallback() {
38723    super.connectedCallback();
38724    this.updatePercentComplete();
38725  }
38726
38727  updatePercentComplete() {
38728    const min = typeof this.min === "number" ? this.min : 0;
38729    const max = typeof this.max === "number" ? this.max : 100;
38730    const value = typeof this.value === "number" ? this.value : 0;
38731    const range = max - min;
38732    this.percentComplete = range === 0 ? 0 : Math.fround((value - min) / range * 100);
38733  }
38734
38735}
38736
38737exports.BaseProgress = BaseProgress;
38738(0, _tslib.__decorate)([(0, _fastElement.attr)({
38739  converter: _fastElement.nullableNumberConverter
38740})], BaseProgress.prototype, "value", void 0);
38741(0, _tslib.__decorate)([(0, _fastElement.attr)({
38742  converter: _fastElement.nullableNumberConverter
38743})], BaseProgress.prototype, "min", void 0);
38744(0, _tslib.__decorate)([(0, _fastElement.attr)({
38745  converter: _fastElement.nullableNumberConverter
38746})], BaseProgress.prototype, "max", void 0);
38747(0, _tslib.__decorate)([(0, _fastElement.attr)({
38748  mode: "boolean"
38749})], BaseProgress.prototype, "paused", void 0);
38750(0, _tslib.__decorate)([_fastElement.observable], BaseProgress.prototype, "percentComplete", void 0);
38751
38752},{"../foundation-element/foundation-element.js":251,"@microsoft/fast-element":151,"tslib":372}],293:[function(require,module,exports){
38753"use strict";
38754
38755Object.defineProperty(exports, "__esModule", {
38756  value: true
38757});
38758
38759var _baseProgress = require("./base-progress.js");
38760
38761Object.keys(_baseProgress).forEach(function (key) {
38762  if (key === "default" || key === "__esModule") return;
38763  if (key in exports && exports[key] === _baseProgress[key]) return;
38764  Object.defineProperty(exports, key, {
38765    enumerable: true,
38766    get: function () {
38767      return _baseProgress[key];
38768    }
38769  });
38770});
38771
38772var _progressTemplate = require("./progress.template.js");
38773
38774Object.keys(_progressTemplate).forEach(function (key) {

38775  if (key === "default" || key === "__esModule") return;
38776  if (key in exports && exports[key] === _progressTemplate[key]) return;
38777  Object.defineProperty(exports, key, {
38778    enumerable: true,
38779    get: function () {
38780      return _progressTemplate[key];
38781    }
38782  });
38783});
38784
38785},{"./base-progress.js":292,"./progress.template.js":294}],294:[function(require,module,exports){
38786"use strict";
38787
38788Object.defineProperty(exports, "__esModule", {
38789  value: true
38790});
38791exports.progressTemplate = void 0;
38792
38793var _fastElement = require("@microsoft/fast-element");
38794
38795/**
38796 * The template for the {@link @microsoft/fast-foundation#BaseProgress} component.
38797 * @public
38798 */
38799const progressTemplate = (context, defintion) => (0, _fastElement.html)`
38800    <template
38801        role="progressbar"
38802        aria-valuenow="${x => x.value}"
38803        aria-valuemin="${x => x.min}"
38804        aria-valuemax="${x => x.max}"
38805        class="${x => x.paused ? "paused" : ""}"
38806    >
38807        ${(0, _fastElement.when)(x => typeof x.value === "number", (0, _fastElement.html)`
38808                <div class="progress" part="progress" slot="determinate">
38809                    <div
38810                        class="determinate"
38811                        part="determinate"
38812                        style="width: ${x => x.percentComplete}%"
38813                    ></div>
38814                </div>
38815            `, (0, _fastElement.html)`
38816                <div class="progress" part="progress" slot="indeterminate">
38817                    <slot class="indeterminate" name="indeterminate">
38818                        ${defintion.indeterminateIndicator1 || ""}
38819                        ${defintion.indeterminateIndicator2 || ""}
38820                    </slot>
38821                </div>
38822            `)}
38823    </template>
38824`;
38825
38826exports.progressTemplate = progressTemplate;
38827
38828},{"@microsoft/fast-element":151}],295:[function(require,module,exports){
38829"use strict";
38830
38831Object.defineProperty(exports, "__esModule", {
38832  value: true
38833});
38834
38835var _radioGroupTemplate = require("./radio-group.template.js");
38836
38837Object.keys(_radioGroupTemplate).forEach(function (key) {
38838  if (key === "default" || key === "__esModule") return;
38839  if (key in exports && exports[key] === _radioGroupTemplate[key]) return;
38840  Object.defineProperty(exports, key, {
38841    enumerable: true,
38842    get: function () {
38843      return _radioGroupTemplate[key];
38844    }
38845  });
38846});
38847
38848var _radioGroup = require("./radio-group.js");
38849
38850Object.keys(_radioGroup).forEach(function (key) {
38851  if (key === "default" || key === "__esModule") return;
38852  if (key in exports && exports[key] === _radioGroup[key]) return;
38853  Object.defineProperty(exports, key, {
38854    enumerable: true,
38855    get: function () {
38856      return _radioGroup[key];
38857    }
38858  });
38859});
38860
38861},{"./radio-group.js":296,"./radio-group.template.js":297}],296:[function(require,module,exports){
38862"use strict";
38863
38864Object.defineProperty(exports, "__esModule", {
38865  value: true
38866});
38867exports.RadioGroup = void 0;
38868
38869var _tslib = require("tslib");
38870
38871var _fastElement = require("@microsoft/fast-element");
38872
38873var _fastWebUtilities = require("@microsoft/fast-web-utilities");
38874
38875var _direction = require("../utilities/direction.js");
38876
38877var _foundationElement = require("../foundation-element/foundation-element.js");
38878
38879/**
38880 * An Radio Group Custom HTML Element.
38881 * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radiogroup | ARIA radiogroup }.
38882 *
38883 * @slot label - The slot for the label
38884 * @slot - The default slot for radio buttons
38885 * @csspart positioning-region - The positioning region for laying out the radios
38886 * @fires change - Fires a custom 'change' event when the value changes
38887 *
38888 * @public
38889 */
38890class RadioGroup extends _foundationElement.FoundationElement {
38891  constructor() {
38892    super(...arguments);
38893    /**
38894     * The orientation of the group
38895     *
38896     * @public
38897     * @remarks
38898     * HTML Attribute: orientation
38899     */
38900
38901    this.orientation = _fastWebUtilities.Orientation.horizontal;
38902
38903    this.radioChangeHandler = e => {
38904      const changedRadio = e.target;
38905
38906      if (changedRadio.checked) {
38907        this.slottedRadioButtons.forEach(radio => {
38908          if (radio !== changedRadio) {
38909            radio.checked = false;

vendor: 5,675 bytes, lines 38910-39105

38910
38911            if (!this.isInsideFoundationToolbar) {
38912              radio.setAttribute("tabindex", "-1");
38913            }
38914          }
38915        });
38916        this.selectedRadio = changedRadio;
38917        this.value = changedRadio.value;
38918        changedRadio.setAttribute("tabindex", "0");
38919        this.focusedRadio = changedRadio;
38920      }
38921
38922      e.stopPropagation();
38923    };
38924
38925    this.moveToRadioByIndex = (group, index) => {
38926      const radio = group[index];
38927
38928      if (!this.isInsideToolbar) {
38929        radio.setAttribute("tabindex", "0");
38930
38931        if (radio.readOnly) {
38932          this.slottedRadioButtons.forEach(nextRadio => {
38933            if (nextRadio !== radio) {
38934              nextRadio.setAttribute("tabindex", "-1");
38935            }
38936          });
38937        } else {
38938          radio.checked = true;
38939          this.selectedRadio = radio;
38940        }
38941      }
38942
38943      this.focusedRadio = radio;
38944      radio.focus();
38945    };
38946
38947    this.moveRightOffGroup = () => {
38948      var _a;
38949
38950      (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
38951    };
38952
38953    this.moveLeftOffGroup = () => {
38954      var _a;
38955
38956      (_a = this.previousElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
38957    };
38958    /**
38959     * @internal
38960     */
38961
38962
38963    this.focusOutHandler = e => {
38964      const group = this.slottedRadioButtons;
38965      const radio = e.target;
38966      const index = radio !== null ? group.indexOf(radio) : 0;
38967      const focusedIndex = this.focusedRadio ? group.indexOf(this.focusedRadio) : -1;
38968
38969      if (focusedIndex === 0 && index === focusedIndex || focusedIndex === group.length - 1 && focusedIndex === index) {
38970        if (!this.selectedRadio) {
38971          this.focusedRadio = group[0];
38972          this.focusedRadio.setAttribute("tabindex", "0");
38973          group.forEach(nextRadio => {
38974            if (nextRadio !== this.focusedRadio) {
38975              nextRadio.setAttribute("tabindex", "-1");
38976            }
38977          });
38978        } else {
38979          this.focusedRadio = this.selectedRadio;
38980
38981          if (!this.isInsideFoundationToolbar) {
38982            this.selectedRadio.setAttribute("tabindex", "0");
38983            group.forEach(nextRadio => {
38984              if (nextRadio !== this.selectedRadio) {
38985                nextRadio.setAttribute("tabindex", "-1");
38986              }
38987            });
38988          }
38989        }
38990      }
38991
38992      return true;
38993    };
38994    /**
38995     * @internal
38996     */
38997
38998
38999    this.clickHandler = e => {
39000      const radio = e.target;
39001
39002      if (radio) {
39003        const group = this.slottedRadioButtons;
39004
39005        if (radio.checked || group.indexOf(radio) === 0) {
39006          radio.setAttribute("tabindex", "0");
39007          this.selectedRadio = radio;
39008        } else {
39009          radio.setAttribute("tabindex", "-1");
39010          this.selectedRadio = null;
39011        }
39012
39013        this.focusedRadio = radio;
39014      }
39015
39016      e.preventDefault();
39017    };
39018
39019    this.shouldMoveOffGroupToTheRight = (index, group, key) => {
39020      return index === group.length && this.isInsideToolbar && key === _fastWebUtilities.keyArrowRight;
39021    };
39022
39023    this.shouldMoveOffGroupToTheLeft = (group, key) => {
39024      const index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
39025      return index < 0 && this.isInsideToolbar && key === _fastWebUtilities.keyArrowLeft;
39026    };
39027
39028    this.checkFocusedRadio = () => {
39029      if (this.focusedRadio !== null && !this.focusedRadio.readOnly && !this.focusedRadio.checked) {
39030        this.focusedRadio.checked = true;
39031        this.focusedRadio.setAttribute("tabindex", "0");
39032        this.focusedRadio.focus();
39033        this.selectedRadio = this.focusedRadio;
39034      }
39035    };
39036
39037    this.moveRight = e => {
39038      const group = this.slottedRadioButtons;
39039      let index = 0;
39040      index = this.focusedRadio ? group.indexOf(this.focusedRadio) + 1 : 1;
39041
39042      if (this.shouldMoveOffGroupToTheRight(index, group, e.key)) {
39043        this.moveRightOffGroup();
39044        return;
39045      } else if (index === group.length) {
39046        index = 0;
39047      }
39048      /* looping to get to next radio that is not disabled */
39049
39050      /* matching native radio/radiogroup which does not select an item if there is only 1 in the group */
39051
39052
39053      while (index < group.length && group.length > 1) {
39054        if (!group[index].disabled) {
39055          this.moveToRadioByIndex(group, index);
39056          break;
39057        } else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
39058          break;
39059        } else if (index + 1 >= group.length) {
39060          if (this.isInsideToolbar) {
39061            break;
39062          } else {
39063            index = 0;
39064          }
39065        } else {
39066          index += 1;
39067        }
39068      }
39069    };
39070
39071    this.moveLeft = e => {
39072      const group = this.slottedRadioButtons;
39073      let index = 0;
39074      index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
39075      index = index < 0 ? group.length - 1 : index;
39076
39077      if (this.shouldMoveOffGroupToTheLeft(group, e.key)) {
39078        this.moveLeftOffGroup();
39079        return;
39080      }
39081      /* looping to get to next radio that is not disabled */
39082
39083
39084      while (index >= 0 && group.length > 1) {
39085        if (!group[index].disabled) {
39086          this.moveToRadioByIndex(group, index);
39087          break;
39088        } else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
39089          break;
39090        } else if (index - 1 < 0) {
39091          index = group.length - 1;
39092        } else {
39093          index -= 1;
39094        }
39095      }
39096    };
39097    /**
39098     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
39099     * navigation is different when there is an ancestor with role='toolbar'
39100     *
39101     * @internal
39102     */
39103
39104
39105    this.keydownHandler = e => {

39106      const key = e.key;
39107
39108      if (key in _fastWebUtilities.ArrowKeys && this.isInsideFoundationToolbar) {
39109        return true;
39110      }
39111
39112      switch (key) {
39113        case _fastWebUtilities.keyEnter:
39114          {
39115            this.checkFocusedRadio();
39116            break;
39117          }
39118
39119        case _fastWebUtilities.keyArrowRight:
39120        case _fastWebUtilities.keyArrowDown:
39121          {
39122            if (this.direction === _fastWebUtilities.Direction.ltr) {
39123              this.moveRight(e);
39124            } else {
39125              this.moveLeft(e);
39126            }
39127
39128            break;
39129          }
39130
39131        case _fastWebUtilities.keyArrowLeft:
39132        case _fastWebUtilities.keyArrowUp:
39133          {
39134            if (this.direction === _fastWebUtilities.Direction.ltr) {
39135              this.moveLeft(e);
39136            } else {
39137              this.moveRight(e);
39138            }
39139
39140            break;
39141          }
39142
39143        default:
39144          {
39145            return true;
39146          }
39147      }
39148    };
39149  }
39150
39151  readOnlyChanged() {
39152    if (this.slottedRadioButtons !== undefined) {
39153      this.slottedRadioButtons.forEach(radio => {
39154        if (this.readOnly) {
39155          radio.readOnly = true;
39156        } else {
39157          radio.readOnly = false;
39158        }
39159      });
39160    }
39161  }
39162
39163  disabledChanged() {
39164    if (this.slottedRadioButtons !== undefined) {
39165      this.slottedRadioButtons.forEach(radio => {
39166        if (this.disabled) {
39167          radio.disabled = true;
39168        } else {
39169          radio.disabled = false;
39170        }
39171      });
39172    }
39173  }
39174
39175  nameChanged() {
39176    if (this.slottedRadioButtons) {
39177      this.slottedRadioButtons.forEach(radio => {
39178        radio.setAttribute("name", this.name);
39179      });
39180    }
39181  }
39182
39183  valueChanged() {
39184    if (this.slottedRadioButtons) {
39185      this.slottedRadioButtons.forEach(radio => {
39186        if (radio.value === this.value) {
39187          radio.checked = true;
39188          this.selectedRadio = radio;
39189        }
39190      });
39191    }
39192
39193    this.$emit("change");
39194  }
39195
39196  slottedRadioButtonsChanged(oldValue, newValue) {
39197    if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
39198      this.setupRadioButtons();
39199    }
39200  }
39201
39202  get parentToolbar() {
39203    return this.closest('[role="toolbar"]');
39204  }
39205
39206  get isInsideToolbar() {
39207    var _a;
39208
39209    return (_a = this.parentToolbar) !== null && _a !== void 0 ? _a : false;
39210  }
39211
39212  get isInsideFoundationToolbar() {
39213    var _a;
39214
39215    return !!((_a = this.parentToolbar) === null || _a === void 0 ? void 0 : _a["$fastController"]);
39216  }
39217  /**
39218   * @internal
39219   */
39220
39221
39222  connectedCallback() {
39223    super.connectedCallback();
39224    this.direction = (0, _direction.getDirection)(this);
39225    this.setupRadioButtons();
39226  }
39227
39228  disconnectedCallback() {
39229    this.slottedRadioButtons.forEach(radio => {
39230      radio.removeEventListener("change", this.radioChangeHandler);
39231    });
39232  }
39233
39234  setupRadioButtons() {
39235    const checkedRadios = this.slottedRadioButtons.filter(radio => {
39236      return radio.hasAttribute("checked");
39237    });
39238    const numberOfCheckedRadios = checkedRadios ? checkedRadios.length : 0;
39239
39240    if (numberOfCheckedRadios > 1) {
39241      const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
39242      lastCheckedRadio.checked = true;
39243    }
39244
39245    let foundMatchingVal = false;
39246    this.slottedRadioButtons.forEach(radio => {
39247      if (this.name !== undefined) {
39248        radio.setAttribute("name", this.name);
39249      }
39250
39251      if (this.disabled) {
39252        radio.disabled = true;
39253      }
39254
39255      if (this.readOnly) {
39256        radio.readOnly = true;
39257      }
39258
39259      if (this.value && this.value === radio.value) {
39260        this.selectedRadio = radio;
39261        this.focusedRadio = radio;
39262        radio.checked = true;
39263        radio.setAttribute("tabindex", "0");
39264        foundMatchingVal = true;
39265      } else {
39266        if (!this.isInsideFoundationToolbar) {
39267          radio.setAttribute("tabindex", "-1");
39268        }
39269
39270        radio.checked = false;
39271      }
39272
39273      radio.addEventListener("change", this.radioChangeHandler);
39274    });
39275
39276    if (this.value === undefined && this.slottedRadioButtons.length > 0) {
39277      const checkedRadios = this.slottedRadioButtons.filter(radio => {
39278        return radio.hasAttribute("checked");
39279      });
39280      const numberOfCheckedRadios = checkedRadios !== null ? checkedRadios.length : 0;
39281
39282      if (numberOfCheckedRadios > 0 && !foundMatchingVal) {
39283        const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
39284        lastCheckedRadio.checked = true;
39285        this.focusedRadio = lastCheckedRadio;
39286        lastCheckedRadio.setAttribute("tabindex", "0");
39287      } else {
39288        this.slottedRadioButtons[0].setAttribute("tabindex", "0");
39289        this.focusedRadio = this.slottedRadioButtons[0];
39290      }
39291    }
39292  }
39293
39294}
39295
39296exports.RadioGroup = RadioGroup;
39297(0, _tslib.__decorate)([(0, _fastElement.attr)({
39298  attribute: "readonly",
39299  mode: "boolean"
39300})], RadioGroup.prototype, "readOnly", void 0);
39301(0, _tslib.__decorate)([(0, _fastElement.attr)({
39302  attribute: "disabled",
39303  mode: "boolean"
39304})], RadioGroup.prototype, "disabled", void 0);
39305(0, _tslib.__decorate)([_fastElement.attr], RadioGroup.prototype, "n

39305ame", void 0);
39306(0, _tslib.__decorate)([_fastElement.attr], RadioGroup.prototype, "value", void 0);
39307(0, _tslib.__decorate)([_fastElement.attr], RadioGroup.prototype, "orientation", void 0);
39308(0, _tslib.__decorate)([_fastElement.observable], RadioGroup.prototype, "childItems", void 0);
39309(0, _tslib.__decorate)([_fastElement.observable], RadioGroup.prototype, "slottedRadioButtons", void 0);
39310
39311},{"../foundation-element/foundation-element.js":251,"../utilities/direction.js":361,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],297:[function(require,module,exports){
39312"use strict";
39313
39314Object.defineProperty(exports, "__esModule", {
39315  value: true
39316});
39317exports.radioGroupTemplate = void 0;
39318
39319var _fastElement = require("@microsoft/fast-element");
39320
39321var _fastWebUtilities = require("@microsoft/fast-web-utilities");
39322
39323/**
39324 * The template for the {@link @microsoft/fast-foundation#RadioGroup} component.
39325 * @public
39326 */
39327const radioGroupTemplate = (context, definition) => (0, _fastElement.html)`
39328    <template
39329        role="radiogroup"
39330        aria-disabled="${x => x.disabled}"
39331        aria-readonly="${x => x.readOnly}"
39332        @click="${(x, c) => x.clickHandler(c.event)}"
39333        @keydown="${(x, c) => x.keydownHandler(c.event)}"
39334        @focusout="${(x, c) => x.focusOutHandler(c.event)}"
39335    >
39336        <slot name="label"></slot>
39337        <div
39338            class="positioning-region ${x => x.orientation === _fastWebUtilities.Orientation.horizontal ? "horizontal" : "vertical"}"
39339            part="positioning-region"
39340        >
39341            <slot
39342                ${(0, _fastElement.slotted)({
39343  property: "slottedRadioButtons",
39344  filter: (0, _fastElement.elements)("[role=radio]")
39345})}
39346            ></slot>
39347        </div>
39348    </template>
39349`;
39350
39351exports.radioGroupTemplate = radioGroupTemplate;
39352
39353},{"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379}],298:[function(require,module,exports){
39354"use strict";
39355
39356Object.defineProperty(exports, "__esModule", {
39357  value: true
39358});
39359
39360var _radioTemplate = require("./radio.template.js");
39361
39362Object.keys(_radioTemplate).forEach(function (key) {
39363  if (key === "default" || key === "__esModule") return;
39364  if (key in exports && exports[key] === _radioTemplate[key]) return;
39365  Object.defineProperty(exports, key, {
39366    enumerable: true,
39367    get: function () {
39368      return _radioTemplate[key];
39369    }
39370  });
39371});
39372
39373var _radio = require("./radio.js");
39374
39375Object.keys(_radio).forEach(function (key) {
39376  if (key === "default" || key === "__esModule") return;
39377  if (key in exports && exports[key] === _radio[key]) return;
39378  Object.defineProperty(exports, key, {
39379    enumerable: true,
39380    get: function () {
39381      return _radio[key];
39382    }
39383  });
39384});
39385
39386},{"./radio.js":300,"./radio.template.js":301}],299:[function(require,module,exports){
39387"use strict";
39388
39389Object.defineProperty(exports, "__esModule", {
39390  value: true
39391});
39392exports.FormAssociatedRadio = void 0;
39393
39394var _formAssociated = require("../form-associated/form-associated.js");
39395
39396var _foundationElement = require("../foundation-element/foundation-element.js");
39397
39398class _Radio extends _foundationElement.FoundationElement {}
39399/**
39400 * A form-associated base class for the {@link @microsoft/fast-foundation#(Radio:class)} component.
39401 *
39402 * @internal
39403 */
39404
39405
39406class FormAssociatedRadio extends (0, _formAssociated.CheckableFormAssociated)(_Radio) {
39407  constructor() {
39408    super(...arguments);
39409    this.proxy = document.createElement("input");
39410  }
39411
39412}
39413
39414exports.FormAssociatedRadio = FormAssociatedRadio;
39415
39416},{"../form-associated/form-associated.js":249,"../foundation-element/foundation-element.js":251}],300:[function(require,module,exports){
39417"use strict";
39418
39419Object.defineProperty(exports, "__esModule", {
39420  value: true
39421});
39422exports.Radio = void 0;
39423
39424var _tslib = require("tslib");
39425
39426var _fastElement = require("@microsoft/fast-element");
39427
39428var _fastWebUtilities = require("@microsoft/fast-web-utilities");
39429
39430var _radioFormAssociated = require("./radio.form-associated.js");
39431
39432/**
39433 * A Radio Custom HTML Element.
39434 * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
39435 *
39436 * @slot checked-indicator - The checked indicator
39437 * @slot - The default slot for the label
39438 * @csspart control - The element representing the visual radio control
39439 * @csspart label - The label
39440 * @fires change - Emits a custom change event when the checked state changes
39441 *
39442 * @public
39443 */
39444class Radio extends _radioFormAssociated.FormAssociatedRadio {
39445  constructor() {
39446    super();
39447    /**
39448     * The element's value to be included in form submission when checked.
39449     * Default to "on" to reach parity with input[type="radio"]
39450     *
39451     * @internal
39452     */
39453
39454    this.initialValue = "on";
39455    /**
39456     * @internal
39457     */
39458
39459    this.keypressHandler = e => {
39460      switch (e.key) {

vendor: 1,657 bytes, lines 39461-39521

39461        case _fastWebUtilities.keySpace:
39462          if (!this.checked && !this.readOnly) {
39463            this.checked = true;
39464          }
39465
39466          return;
39467      }
39468
39469      return true;
39470    };
39471
39472    this.proxy.setAttribute("type", "radio");
39473  }
39474
39475  readOnlyChanged() {
39476    if (this.proxy instanceof HTMLInputElement) {
39477      this.proxy.readOnly = this.readOnly;
39478    }
39479  }
39480  /**
39481   * @internal
39482   */
39483
39484
39485  defaultCheckedChanged() {
39486    var _a;
39487
39488    if (this.$fastController.isConnected && !this.dirtyChecked) {
39489      // Setting this.checked will cause us to enter a dirty state,
39490      // but if we are clean when defaultChecked is changed, we want to stay
39491      // in a clean state, so reset this.dirtyChecked
39492      if (!this.isInsideRadioGroup()) {
39493        this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
39494        this.dirtyChecked = false;
39495      }
39496    }
39497  }
39498  /**
39499   * @internal
39500   */
39501
39502
39503  connectedCallback() {
39504    var _a, _b;
39505
39506    super.connectedCallback();
39507    this.validate();
39508
39509    if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("role")) !== "radiogroup" && this.getAttribute("tabindex") === null) {
39510      if (!this.disabled) {
39511        this.setAttribute("tabindex", "0");
39512      }
39513    }
39514
39515    if (this.checkedAttribute) {
39516      if (!this.dirtyChecked) {
39517        // Setting this.checked will cause us to enter a dirty state,
39518        // but if we are clean when defaultChecked is changed, we want to stay
39519        // in a clean state, so reset this.dirtyChecked
39520        if (!this.isInsideRadioGroup()) {
39521          this.checked = (_b = this.defaultChecked) !== null && _b !== void 0 ? _b : false;

39522          this.dirtyChecked = false;
39523        }
39524      }
39525    }
39526  }
39527
39528  isInsideRadioGroup() {
39529    const parent = this.closest("[role=radiogroup]");
39530    return parent !== null;
39531  }
39532  /**
39533   * @internal
39534   */
39535
39536
39537  clickHandler(e) {
39538    if (!this.disabled && !this.readOnly && !this.checked) {
39539      this.checked = true;
39540    }
39541  }
39542
39543}
39544
39545exports.Radio = Radio;
39546(0, _tslib.__decorate)([(0, _fastElement.attr)({
39547  attribute: "readonly",
39548  mode: "boolean"
39549})], Radio.prototype, "readOnly", void 0);
39550(0, _tslib.__decorate)([_fastElement.observable], Radio.prototype, "name", void 0);
39551(0, _tslib.__decorate)([_fastElement.observable], Radio.prototype, "defaultSlottedNodes", void 0);
39552
39553},{"./radio.form-associated.js":299,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],301:[function(require,module,exports){
39554"use strict";
39555
39556Object.defineProperty(exports, "__esModule", {
39557  value: true
39558});
39559exports.radioTemplate = void 0;
39560
39561var _fastElement = require("@microsoft/fast-element");
39562
39563/**
39564 * The template for the {@link @microsoft/fast-foundation#(Radio:class)} component.
39565 * @public
39566 */
39567const radioTemplate = (context, definition) => (0, _fastElement.html)`
39568    <template
39569        role="radio"
39570        class="${x => x.checked ? "checked" : ""} ${x => x.readOnly ? "readonly" : ""}"
39571        aria-checked="${x => x.checked}"
39572        aria-required="${x => x.required}"
39573        aria-disabled="${x => x.disabled}"
39574        aria-readonly="${x => x.readOnly}"
39575        @keypress="${(x, c) => x.keypressHandler(c.event)}"
39576        @click="${(x, c) => x.clickHandler(c.event)}"
39577    >
39578        <div part="control" class="control">
39579            <slot name="checked-indicator">
39580                ${definition.checkedIndicator || ""}
39581            </slot>
39582        </div>
39583        <label
39584            part="label"
39585            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"
39586        >
39587            <slot ${(0, _fastElement.slotted)("defaultSlottedNodes")}></slot>
39588        </label>
39589    </template>
39590`;
39591
39592exports.radioTemplate = radioTemplate;
39593
39594},{"@microsoft/fast-element":151}],302:[function(require,module,exports){
39595"use strict";
39596
39597Object.defineProperty(exports, "__esModule", {
39598  value: true
39599});
39600
39601var _searchTemplate = require("./search.template.js");
39602
39603Object.keys(_searchTemplate).forEach(function (key) {
39604  if (key === "default" || key === "__esModule") return;
39605  if (key in exports && exports[key] === _searchTemplate[key]) return;
39606  Object.defineProperty(exports, key, {
39607    enumerable: true,
39608    get: function () {
39609      return _searchTemplate[key];
39610    }
39611  });
39612});
39613
39614var _search = require("./search.js");
39615
39616Object.keys(_search).forEach(function (key) {
39617  if (key === "default" || key === "__esModule") return;
39618  if (key in exports && exports[key] === _search[key]) return;
39619  Object.defineProperty(exports, key, {
39620    enumerable: true,
39621    get: function () {
39622      return _search[key];
39623    }
39624  });
39625});
39626
39627},{"./search.js":304,"./search.template.js":305}],303:[function(require,module,exports){
39628"use strict";
39629
39630Object.defineProperty(exports, "__esModule", {
39631  value: true
39632});
39633exports.FormAssociatedSearch = void 0;
39634
39635var _formAssociated = require("../form-associated/form-associated.js");
39636
39637var _foundationElement = require("../foundation-element/foundation-element.js");
39638
39639class _Search extends _foundationElement.FoundationElement {}
39640/**
39641 * A form-associated base class for the {@link @microsoft/fast-foundation#(Search:class)} component.
39642 *
39643 * @internal
39644 */
39645
39646
39647class FormAssociatedSearch extends (0, _formAssociated.FormAssociated)(_Search) {
39648  constructor() {
39649    super(...arguments);
39650    this.proxy = document.createElement("input");
39651  }
39652
39653}
39654
39655exports.FormAssociatedSearch = FormAssociatedSearch;
39656
39657},{"../form-associated/form-associated.js":249,"../foundation-element/foundation-element.js":251}],304:[function(require,module,exports){
39658"use strict";
39659
39660Object.defineProperty(exports, "__esModule", {
39661  value: true
39662});
39663exports.Search = exports.DelegatesARIASearch = void 0;
39664
39665var _tslib = require("tslib");
39666
39667var _fastElement = require("@microsoft/fast-element");
39668
39669var _index = require("../patterns/index.js");
39670

39671var _applyMixins = require("../utilities/apply-mixins.js");
39672
39673var _searchFormAssociated = require("./search.form-associated.js");
39674
39675/**
39676 * A Search Custom HTML Element.
39677 * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search | <input type="search" /> element }.
39678 *
39679 * @slot start - Content which can be provided before the search input
39680 * @slot end - Content which can be provided after the search clear button
39681 * @slot - The default slot for the label
39682 * @slot close-button - The clear button
39683 * @slot close-glyph - The clear glyph
39684 * @csspart label - The label
39685 * @csspart root - The element wrapping the control, including start and end slots
39686 * @csspart control - The element representing the input
39687 * @csspart clear-button - The button to clear the input
39688 *
39689 * @public
39690 */
39691class Search extends _searchFormAssociated.FormAssociatedSearch {
39692  readOnlyChanged() {
39693    if (this.proxy instanceof HTMLInputElement) {
39694      this.proxy.readOnly = this.readOnly;
39695      this.validate();
39696    }
39697  }
39698
39699  autofocusChanged() {
39700    if (this.proxy instanceof HTMLInputElement) {
39701      this.proxy.autofocus = this.autofocus;
39702      this.validate();
39703    }
39704  }
39705
39706  placeholderChanged() {
39707    if (this.proxy instanceof HTMLInputElement) {
39708      this.proxy.placeholder = this.placeholder;
39709    }
39710  }
39711
39712  listChanged() {
39713    if (this.proxy instanceof HTMLInputElement) {
39714      this.proxy.setAttribute("list", this.list);
39715      this.validate();
39716    }
39717  }
39718
39719  maxlengthChanged() {
39720    if (this.proxy instanceof HTMLInputElement) {
39721      this.proxy.maxLength = this.maxlength;
39722      this.validate();
39723    }
39724  }
39725
39726  minlengthChanged() {
39727    if (this.proxy instanceof HTMLInputElement) {
39728      this.proxy.minLength = this.minlength;
39729      this.validate();
39730    }
39731  }
39732
39733  patternChanged() {
39734    if (this.proxy instanceof HTMLInputElement) {
39735      this.proxy.pattern = this.pattern;
39736      this.validate();
39737    }
39738  }
39739
39740  sizeChanged() {
39741    if (this.proxy instanceof HTMLInputElement) {
39742      this.proxy.size = this.size;
39743    }
39744  }
39745
39746  spellcheckChanged() {
39747    if (this.proxy instanceof HTMLInputElement) {
39748      this.proxy.spellcheck = this.spellcheck;
39749    }
39750  }
39751  /**
39752   * @internal
39753   */
39754
39755
39756  connectedCallback() {
39757    super.connectedCallback();
39758    this.validate();
39759
39760    if (this.autofocus) {
39761      _fastElement.DOM.queueUpdate(() => {
39762        this.focus();
39763      });
39764    }
39765  }
39766  /** {@inheritDoc (FormAssociated:interface).validate} */
39767
39768
39769  validate() {
39770    super.validate(this.control);
39771  }
39772  /**
39773   * Handles the internal control's `input` event
39774   * @internal
39775   */
39776
39777
39778  handleTextInput() {
39779    this.value = this.control.value;
39780  }
39781  /**
39782   * Handles the control's clear value event
39783   * @public
39784   */
39785
39786
39787  handleClearInput() {
39788    this.value = "";
39789    this.control.focus();
39790    this.handleChange();
39791  }
39792  /**
39793   * Change event handler for inner control.
39794   * @remarks
39795   * "Change" events are not `composable` so they will not
39796   * permeate the shadow DOM boundary. This fn effectively proxies
39797   * the change event, emitting a `change` event whenever the internal
39798   * control emits a `change` event
39799   * @internal
39800   */
39801
39802
39803  handleChange() {
39804    this.$emit("change");
39805  }
39806
39807}
39808
39809exports.Search = Search;
39810(0, _tslib.__decorate)([(0, _fastElement.attr)({
39811  attribute: "readonly",
39812  mode: "boolean"
39813})], Search.prototype, "readOnly", void 0);
39814(0, _tslib.__decorate)([(0, _fastElement.attr)({
39815  mode: "boolean"
39816})], Search.prototype, "autofocus", void 0);
39817(0, _tslib.__decorate)([_fastElement.attr], Search.prototype, "placeholder", void 0);
39818(0, _tslib.__decorate)([_fastElement.attr], Search.prototype, "list", void 0);
39819(0, _tslib.__decorate)([(0, _fastElement.attr)({
39820  converter: _fastElement.nullableNumberConverter
39821})], Search.prototype, "maxlength", void 0);
39822(0, _tslib.__decorate)([(0, _fastElement.attr)({
39823  converter: _fastElement.nullableNumberConverter
39824})], Search.prototype, "minlength", void 0);
39825(0, _tslib.__decorate)([_fastElement.attr], Search.prototype, "pattern", void 0);
39826(0, _tslib.__decorate)([(0, _fastElement.attr)({
39827  converter: _fastElement.nullableNumberConverter
39828})], Search.prototype, "size", void 0);
39829(0, _tslib.__decorate)([(0, _fastElement.attr)({
39830  mode: "boolean"
39831})], Search.prototype, "spellcheck", void 0);
39832(0, _tslib.__decorate)([_fastElement.observable], Search.prototype, "defaultSlottedNodes", void 0);
39833/**
39834 * Includes ARIA states and properties relating to the ARIA textbox role
39835 *
39836 * @public
39837 */
39838
39839class DelegatesARIASearch {}
39840
39841exports.DelegatesARIASearch = DelegatesARIASearch;
39842(0, _applyMixins.applyMixins)(DelegatesARIASearch, _index.ARIAGlobalStatesAndProperties);
39843(0, _applyMixins.applyMixins)(Search, _index.StartEnd, DelegatesARIASearch);
39844
39845},{"../patterns/index.js":276,"../utilities/apply-mixins.js":358,"./search.form-associated.js":303,"@microsoft/fast-element":151,"tslib":372}],305:[function(require,module,exports){
39846"use strict";
39847
39848Object.defineProperty(exports, "__esModule", {
39849  value: true
39850});
39851exports.searchTemplate = void 0;
39852
39853var _fastElement = require("@microsoft/fast-element");
39854
39855var _startEnd = require("../patterns/start-end.js");
39856
39857var _whitespaceFilter = require("../utilities/whitespace-filter.js");
39858
39859/**
39860 * The template for the {@link @microsoft/fast-foundation#(Search:class)} component.
39861 * @public
39862 */
39863const searchTemplate = (context, definition) => (0, _fastElement.html)`
39864    <template
39865        class="
39866            ${x => x.readOnly ? "readonly" : ""}
39867        "
39868    >
39869        <label
39870            part="label"
39871            for="control"
39872            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"
39873        >
39874            <slot
39875                ${(0, _fastElement.slotted)({
39876  property: "defaultSlottedNodes",
39877  filter: _whitespaceFilter.whitespaceFilter
39878})}
39879            ></slot>
39880        </label>
39881        <div class="root" part="root" ${(0, _fastElement.ref)("root")}>
39882            ${(0, _startEnd.startSlotTemplate)(context, definition)}
39883            <div class="input-wrapper" part="input-wrapper">
39884                <input
39885                    class="control"
39886                    part="control"
39887                    id="control"

39888                    @input="${x => x.handleTextInput()}"
39889                    @change="${x => x.handleChange()}"
39890                    ?autofocus="${x => x.autofocus}"
39891                    ?disabled="${x => x.disabled}"
39892                    list="${x => x.list}"
39893                    maxlength="${x => x.maxlength}"
39894                    minlength="${x => x.minlength}"
39895                    pattern="${x => x.pattern}"
39896                    placeholder="${x => x.placeholder}"
39897                    ?readonly="${x => x.readOnly}"
39898                    ?required="${x => x.required}"
39899                    size="${x => x.size}"
39900                    ?spellcheck="${x => x.spellcheck}"
39901                    :value="${x => x.value}"
39902                    type="search"
39903                    aria-atomic="${x => x.ariaAtomic}"
39904                    aria-busy="${x => x.ariaBusy}"
39905                    aria-controls="${x => x.ariaControls}"
39906                    aria-current="${x => x.ariaCurrent}"
39907                    aria-describedby="${x => x.ariaDescribedby}"
39908                    aria-details="${x => x.ariaDetails}"
39909                    aria-disabled="${x => x.ariaDisabled}"
39910                    aria-errormessage="${x => x.ariaErrormessage}"
39911                    aria-flowto="${x => x.ariaFlowto}"
39912                    aria-haspopup="${x => x.ariaHaspopup}"
39913                    aria-hidden="${x => x.ariaHidden}"
39914                    aria-invalid="${x => x.ariaInvalid}"
39915                    aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
39916                    aria-label="${x => x.ariaLabel}"
39917                    aria-labelledby="${x => x.ariaLabelledby}"
39918                    aria-live="${x => x.ariaLive}"
39919                    aria-owns="${x => x.ariaOwns}"
39920                    aria-relevant="${x => x.ariaRelevant}"
39921                    aria-roledescription="${x => x.ariaRoledescription}"
39922                    ${(0, _fastElement.ref)("control")}
39923                />
39924                <slot name="close-button">
39925                    <button
39926                        class="clear-button ${x => x.value ? "" : "clear-button__hidden"}"
39927                        part="clear-button"
39928                        tabindex="-1"
39929                        @click=${x => x.handleClearInput()}
39930                    >
39931                        <slot name="close-glyph">
39932                            <svg
39933                                width="9"
39934                                height="9"

39935                                viewBox="0 0 9 9"
39936                                xmlns="http://www.w3.org/2000/svg"
39937                            >
39938                                <path
39939                                    d="M0.146447 0.146447C0.338683 -0.0478972 0.645911 -0.0270359 0.853553 0.146447L4.5 3.793L8.14645 0.146447C8.34171 -0.0488155 8.65829 -0.0488155 8.85355 0.146447C9.04882 0.341709 9.04882 0.658291 8.85355 0.853553L5.207 4.5L8.85355 8.14645C9.05934 8.35223 9.03129 8.67582 8.85355 8.85355C8.67582 9.03129 8.35409 9.02703 8.14645 8.85355L4.5 5.207L0.853553 8.85355C0.658291 9.04882 0.341709 9.04882 0.146447 8.85355C-0.0488155 8.65829 -0.0488155 8.34171 0.146447 8.14645L3.793 4.5L0.146447 0.853553C-0.0268697 0.680237 -0.0457894 0.34079 0.146447 0.146447Z"
39940                                />
39941                            </svg>
39942                        </slot>
39943                    </button>
39944                </slot>
39945            </div>
39946            ${(0, _startEnd.endSlotTemplate)(context, definition)}
39947        </div>
39948    </template>
39949`;
39950
39951exports.searchTemplate = searchTemplate;
39952
39953},{"../patterns/start-end.js":277,"../utilities/whitespace-filter.js":371,"@microsoft/fast-element":151}],306:[function(require,module,exports){
39954"use strict";
39955
39956Object.defineProperty(exports, "__esModule", {
39957  value: true
39958});
39959
39960var _select = require("./select.js");
39961
39962Object.keys(_select).forEach(function (key) {
39963  if (key === "default" || key === "__esModule") return;
39964  if (key in exports && exports[key] === _select[key]) return;
39965  Object.defineProperty(exports, key, {
39966    enumerable: true,
39967    get: function () {
39968      return _select[key];
39969    }
39970  });
39971});
39972
39973var _selectOptions = require("./select.options.js");
39974
39975Object.keys(_selectOptions).forEach(function (key) {
39976  if (key === "default" || key === "__esModule") return;
39977  if (key in exports && exports[key] === _selectOptions[key]) return;
39978  Object.defineProperty(exports, key, {
39979    enumerable: true,
39980    get: function () {
39981      return _selectOptions[key];
39982    }
39983  });
39984});
39985
39986var _selectTemplate = require("./select.template.js");
39987
39988Object.keys(_selectTemplate).forEach(function (key) {
39989  if (key === "default" || key === "__esModule") return;
39990  if (key in exports && exports[key] === _selectTemplate[key]) return;
39991  Object.defineProperty(exports, key, {
39992    enumerable: true,
39993    get: function () {
39994      return _selectTemplate[key];
39995    }
39996  });
39997});
39998
39999},{"./select.js":308,"./select.options.js":309,"./select.template.js":310}],307:[function(require,module,exports){
40000"use strict";
40001
40002Object.defineProperty(exports, "__esModule", {
40003  value: true
40004});
40005exports.FormAssociatedSelect = void 0;
40006
40007var _listboxElement = require("../listbox/listbox.element.js");
40008
40009var _formAssociated = require("../form-associated/form-associated.js");
40010
40011class _Select extends _listboxElement.ListboxElement {}
40012/**
40013 * A form-associated base class for the {@link @microsoft/fast-foundation#(Select:class)} component.
40014 *
40015 * @internal
40016 */
40017
40018
40019class FormAssociatedSelect extends (0, _formAssociated.FormAssociated)(_Select) {
40020  constructor() {
40021    super(...arguments);
40022    this.proxy = document.createElement("select");
40023  }
40024
40025}
40026
40027exports.FormAssociatedSelect = FormAssociatedSelect;
40028
40029},{"../form-associated/form-associated.js":249,"../listbox/listbox.element.js":261}],308:[function(require,module,exports){
40030"use strict";
40031
40032Object.defineProperty(exports, "__esModule", {
40033  value: true
40034});
40035exports.Select = exports.DelegatesARIASelect = void 0;
40036
40037var _tslib = require("tslib");
40038
40039var _fastElement = require("@microsoft/fast-element");
40040
40041var _fastWebUtilities = require("@microsoft/fast-web-utilities");
40042
40043var _listbox = require("../listbox/listbox.js");
40044
40045var _startEnd = require("../patterns/start-end.js");
40046
40047var _applyMixins = require("../utilities/apply-mixins.js");
40048
40049var _selectFormAssociated = require("./select.form-associated.js");
40050
40051var _selectOptions = require("./select.options.js");
40052
40053/**
40054 * A Select Custom HTML Element.
40055 * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#select | ARIA select }.
40056 *
40057 * @slot start - Content which can be provided before the button content
40058 * @slot end - Content which can be provided after the button content
40059 * @slot button-container - The element representing the select button
40060 * @slot selected-value - The selected value
40061 * @slot indicator - The visual indicator for the expand/collapse state of the button
40062 * @slot - The default slot for slotted options
40063 * @csspart control - The element representing the select invoking element
40064 * @csspart selected-value - The element wrapping the selected value
40065 * @csspart indicator - The element wrapping the visual indicator
40066 * @csspart listbox - The listbox element
40067 * @fires input - Fires a custom 'input' event when the value updates
40068 * @fires change - Fires a custom 'change' event when the value updates
40069 *
40070 * @public
40071 */
40072class Select extends _selectFormAssociated.FormAssociatedSelect {
40073  constructor() {
40074    super(...arguments);
40075    /**
40076     * The open attribute.
40077     *
40078     * @public
40079     * @remarks
40080     * HTML Attribute: open
40081     */
40082
40083    this.open = false;

40084    /**
40085     * Indicates the initial state of the position attribute.
40086     *
40087     * @internal
40088     */
40089
40090    this.forcedPosition = false;
40091    /**
40092     * The unique id for the internal listbox element.
40093     *
40094     * @internal
40095     */
40096
40097    this.listboxId = (0, _fastWebUtilities.uniqueId)("listbox-");
40098    /**
40099     * The max height for the listbox when opened.
40100     *
40101     * @internal
40102     */
40103
40104    this.maxHeight = 0;
40105  }
40106  /**
40107   * Sets focus and synchronizes ARIA attributes when the open property changes.
40108   *
40109   * @param prev - the previous open value
40110   * @param next - the current open value
40111   *
40112   * @internal
40113   */
40114
40115
40116  openChanged(prev, next) {
40117    if (!this.collapsible) {
40118      return;
40119    }
40120
40121    if (this.open) {
40122      this.ariaControls = this.listboxId;
40123      this.ariaExpanded = "true";
40124      this.setPositioning();
40125      this.focusAndScrollOptionIntoView();
40126      this.indexWhenOpened = this.selectedIndex; // focus is directed to the element when `open` is changed programmatically
40127
40128      _fastElement.DOM.queueUpdate(() => this.focus());
40129
40130      return;
40131    }
40132
40133    this.ariaControls = "";
40134    this.ariaExpanded = "false";
40135  }
40136  /**
40137   * The component is collapsible when in single-selection mode with no size attribute.
40138   *
40139   * @internal
40140   */
40141
40142
40143  get collapsible() {
40144    return !(this.multiple || typeof this.size === "number");
40145  }
40146  /**
40147   * The value property.
40148   *
40149   * @public
40150   */
40151
40152
40153  get value() {
40154    _fastElement.Observable.track(this, "value");
40155
40156    return this._value;
40157  }
40158
40159  set value(next) {
40160    var _a, _b, _c, _d, _e, _f, _g;
40161
40162    const prev = `${this._value}`;
40163
40164    if ((_a = this._options) === null || _a === void 0 ? void 0 : _a.length) {
40165      const selectedIndex = this._options.findIndex(el => el.value === next);
40166
40167      const prevSelectedValue = (_c = (_b = this._options[this.selectedIndex]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : null;
40168      const nextSelectedValue = (_e = (_d = this._options[selectedIndex]) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : null;
40169
40170      if (selectedIndex === -1 || prevSelectedValue !== nextSelectedValue) {
40171        next = "";
40172        this.selectedIndex = selectedIndex;
40173      }
40174
40175      next = (_g = (_f = this.firstSelectedOption) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : next;
40176    }
40177
40178    if (prev !== next) {
40179      this._value = next;
40180      super.valueChanged(prev, next);
40181
40182      _fastElement.Observable.notify(this, "value");
40183
40184      this.updateDisplayValue();
40185    }
40186  }
40187  /**
40188   * Sets the value and display value to match the first selected option.
40189   *
40190   * @param shouldEmit - if true, the input and change events will be emitted
40191   *
40192   * @internal
40193   */
40194
40195
40196  updateValue(shouldEmit) {
40197    var _a, _b;
40198
40199    if (this.$fastController.isConnected) {
40200      this.value = (_b = (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
40201    }
40202
40203    if (shouldEmit) {
40204      this.$emit("input");
40205      this.$emit("change", this, {
40206        bubbles: true,
40207        composed: undefined
40208      });
40209    }
40210  }
40211  /**
40212   * Updates the proxy value when the selected index changes.
40213   *
40214   * @param prev - the previous selected index
40215   * @param next - the next selected index
40216   *
40217   * @internal
40218   */
40219
40220
40221  selectedIndexChanged(prev, next) {
40222    super.selectedIndexChanged(prev, next);
40223    this.updateValue();
40224  }
40225
40226  positionChanged(prev, next) {
40227    this.positionAttribute = next;
40228    this.setPositioning();
40229  }
40230  /**
40231   * Calculate and apply listbox positioning based on available viewport space.
40232   *
40233   * @public
40234   */
40235
40236
40237  setPositioning() {
40238    const currentBox = this.getBoundingClientRect();
40239    const viewportHeight = window.innerHeight;
40240    const availableBottom = viewportHeight - currentBox.bottom;
40241    this.position = this.forcedPosition ? this.positionAttribute : currentBox.top > availableBottom ? _selectOptions.SelectPosition.above : _selectOptions.SelectPosition.below;
40242    this.positionAttribute = this.forcedPosition ? this.positionAttribute : this.position;
40243    this.maxHeight = this.position === _selectOptions.SelectPosition.above ? ~~currentBox.top : ~~availableBottom;
40244  }
40245  /**
40246   * The value displayed on the button.
40247   *
40248   * @public
40249   */
40250
40251
40252  get displayValue() {
40253    var _a, _b;
40254
40255    _fastElement.Observable.track(this, "displayValue");
40256
40257    return (_b = (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : "";
40258  }
40259  /**
40260   * Synchronize the `aria-disabled` property when the `disabled` property changes.
40261   *
40262   * @param prev - The previous disabled value
40263   * @param next - The next disabled value
40264   *
40265   * @internal
40266   */
40267
40268
40269  disabledChanged(prev, next) {
40270    if (super.disabledChanged) {
40271      super.disabledChanged(prev, next);
40272    }
40273
40274    this.ariaDisabled = this.disabled ? "true" : "false";
40275  }
40276  /**
40277   * Reset the element to its first selectable option when its parent form is reset.
40278   *
40279   * @internal
40280   */
40281
40282
40283  formResetCallback() {
40284    this.setProxyOptions(); // Call the base class's implementation setDefaultSelectedOption instead of the select's
40285    // override, in order to reset the selectedIndex without using the value property.
40286
40287    super.setDefaultSelectedOption();
40288
40289    if (this.selectedIndex === -1) {
40290      this.selectedIndex = 0;
40291    }
40292  }
40293  /**
40294   * Handle opening and closing the listbox when the select is clicked.
40295   *
40296   * @param e - the mouse event
40297   * @internal
40298   */
40299
40300
40301  clickHandler(e) {
40302    // do nothing if the select is disabled
40303    if (this.disabled) {
40304      return;
40305    }
40306
40307    if (this.open) {
40308      const captured = e.target.closest(`option,[role=option]`);
40309
40310      if (captured && captured.disabled) {
40311        return;
40312      }
40313    }
40314
40315    super.clickHandler(e);
40316    this.open = this.collapsible && !this.open;
40317
40318    if (!this.open && this.indexWhenOpened !== this.selectedIndex) {

vendor: 4,361 bytes, lines 40319-40508

40319      this.updateValue(true);
40320    }
40321
40322    return true;
40323  }
40324  /**
40325   * Handles focus state when the element or its children lose focus.
40326   *
40327   * @param e - The focus event
40328   * @internal
40329   */
40330
40331
40332  focusoutHandler(e) {
40333    var _a;
40334
40335    super.focusoutHandler(e);
40336
40337    if (!this.open) {
40338      return true;
40339    }
40340
40341    const focusTarget = e.relatedTarget;
40342
40343    if (this.isSameNode(focusTarget)) {
40344      this.focus();
40345      return;
40346    }
40347
40348    if (!((_a = this.options) === null || _a === void 0 ? void 0 : _a.includes(focusTarget))) {
40349      this.open = false;
40350
40351      if (this.indexWhenOpened !== this.selectedIndex) {
40352        this.updateValue(true);
40353      }
40354    }
40355  }
40356  /**
40357   * Updates the value when an option's value changes.
40358   *
40359   * @param source - the source object
40360   * @param propertyName - the property to evaluate
40361   *
40362   * @internal
40363   * @override
40364   */
40365
40366
40367  handleChange(source, propertyName) {
40368    super.handleChange(source, propertyName);
40369
40370    if (propertyName === "value") {
40371      this.updateValue();
40372    }
40373  }
40374  /**
40375   * Synchronize the form-associated proxy and updates the value property of the element.
40376   *
40377   * @param prev - the previous collection of slotted option elements
40378   * @param next - the next collection of slotted option elements
40379   *
40380   * @internal
40381   */
40382
40383
40384  slottedOptionsChanged(prev, next) {
40385    this.options.forEach(o => {
40386      const notifier = _fastElement.Observable.getNotifier(o);
40387
40388      notifier.unsubscribe(this, "value");
40389    });
40390    super.slottedOptionsChanged(prev, next);
40391    this.options.forEach(o => {
40392      const notifier = _fastElement.Observable.getNotifier(o);
40393
40394      notifier.subscribe(this, "value");
40395    });
40396    this.setProxyOptions();
40397    this.updateValue();
40398  }
40399  /**
40400   * Prevents focus when size is set and a scrollbar is clicked.
40401   *
40402   * @param e - the mouse event object
40403   *
40404   * @override
40405   * @internal
40406   */
40407
40408
40409  mousedownHandler(e) {
40410    var _a;
40411
40412    if (e.offsetX >= 0 && e.offsetX <= ((_a = this.listbox) === null || _a === void 0 ? void 0 : _a.scrollWidth)) {
40413      return super.mousedownHandler(e);
40414    }
40415
40416    return this.collapsible;
40417  }
40418  /**
40419   * Sets the multiple property on the proxy element.
40420   *
40421   * @param prev - the previous multiple value
40422   * @param next - the current multiple value
40423   */
40424
40425
40426  multipleChanged(prev, next) {
40427    super.multipleChanged(prev, next);
40428
40429    if (this.proxy) {
40430      this.proxy.multiple = next;
40431    }
40432  }
40433  /**
40434   * Updates the selectedness of each option when the list of selected options changes.
40435   *
40436   * @param prev - the previous list of selected options
40437   * @param next - the current list of selected options
40438   *
40439   * @override
40440   * @internal
40441   */
40442
40443
40444  selectedOptionsChanged(prev, next) {
40445    var _a;
40446
40447    super.selectedOptionsChanged(prev, next);
40448    (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach((o, i) => {
40449      var _a;
40450
40451      const proxyOption = (_a = this.proxy) === null || _a === void 0 ? void 0 : _a.options.item(i);
40452
40453      if (proxyOption) {
40454        proxyOption.selected = o.selected;
40455      }
40456    });
40457  }
40458  /**
40459   * Sets the selected index to match the first option with the selected attribute, or
40460   * the first selectable option.
40461   *
40462   * @override
40463   * @internal
40464   */
40465
40466
40467  setDefaultSelectedOption() {
40468    var _a;
40469
40470    const options = (_a = this.options) !== null && _a !== void 0 ? _a : Array.from(this.children).filter(_listbox.Listbox.slottedOptionFilter);
40471    const selectedIndex = options === null || options === void 0 ? void 0 : options.findIndex(el => el.hasAttribute("selected") || el.selected || el.value === this.value);
40472
40473    if (selectedIndex !== -1) {
40474      this.selectedIndex = selectedIndex;
40475      return;
40476    }
40477
40478    this.selectedIndex = 0;
40479  }
40480  /**
40481   * Resets and fills the proxy to match the component's options.
40482   *
40483   * @internal
40484   */
40485
40486
40487  setProxyOptions() {
40488    if (this.proxy instanceof HTMLSelectElement && this.options) {
40489      this.proxy.options.length = 0;
40490      this.options.forEach(option => {
40491        const proxyOption = option.proxy || (option instanceof HTMLOptionElement ? option.cloneNode() : null);
40492
40493        if (proxyOption) {
40494          this.proxy.options.add(proxyOption);
40495        }
40496      });
40497    }
40498  }
40499  /**
40500   * Handle keyboard interaction for the select.
40501   *
40502   * @param e - the keyboard event
40503   * @internal
40504   */
40505
40506
40507  keydownHandler(e) {
40508    super.keydownHandler(e);

40509    const key = e.key || e.key.charCodeAt(0);
40510
40511    switch (key) {
40512      case _fastWebUtilities.keySpace:
40513        {
40514          e.preventDefault();
40515
40516          if (this.collapsible && this.typeAheadExpired) {
40517            this.open = !this.open;
40518          }
40519
40520          break;
40521        }
40522
40523      case _fastWebUtilities.keyHome:
40524      case _fastWebUtilities.keyEnd:
40525        {
40526          e.preventDefault();
40527          break;
40528        }
40529
40530      case _fastWebUtilities.keyEnter:
40531        {
40532          e.preventDefault();
40533          this.open = !this.open;
40534          break;
40535        }
40536
40537      case _fastWebUtilities.keyEscape:
40538        {
40539          if (this.collapsible && this.open) {
40540            e.preventDefault();
40541            this.open = false;
40542          }
40543
40544          break;
40545        }
40546
40547      case _fastWebUtilities.keyTab:
40548        {
40549          if (this.collapsible && this.open) {
40550            e.preventDefault();
40551            this.open = false;
40552          }
40553
40554          return true;
40555        }
40556    }
40557
40558    if (!this.open && this.indexWhenOpened !== this.selectedIndex) {
40559      this.updateValue(true);
40560      this.indexWhenOpened = this.selectedIndex;
40561    }
40562
40563    return !(key === _fastWebUtilities.keyArrowDown || key === _fastWebUtilities.keyArrowUp);
40564  }
40565
40566  connectedCallback() {
40567    super.connectedCallback();
40568    this.forcedPosition = !!this.positionAttribute;
40569    this.addEventListener("contentchange", this.updateDisplayValue);
40570  }
40571
40572  disconnectedCallback() {
40573    this.removeEventListener("contentchange", this.updateDisplayValue);
40574    super.disconnectedCallback();
40575  }
40576  /**
40577   * Updates the proxy's size property when the size attribute changes.
40578   *
40579   * @param prev - the previous size
40580   * @param next - the current size
40581   *
40582   * @override
40583   * @internal
40584   */
40585
40586
40587  sizeChanged(prev, next) {
40588    super.sizeChanged(prev, next);
40589
40590    if (this.proxy) {
40591      this.proxy.size = next;
40592    }
40593  }
40594  /**
40595   *
40596   * @internal
40597   */
40598
40599
40600  updateDisplayValue() {
40601    if (this.collapsible) {
40602      _fastElement.Observable.notify(this, "displayValue");
40603    }
40604  }
40605
40606}
40607
40608exports.Select = Select;
40609(0, _tslib.__decorate)([(0, _fastElement.attr)({
40610  attribute: "open",
40611  mode: "boolean"
40612})], Select.prototype, "open", void 0);
40613(0, _tslib.__decorate)([_fastElement.volatile], Select.prototype, "collapsible", null);
40614(0, _tslib.__decorate)([_fastElement.observable], Select.prototype, "control", void 0);
40615(0, _tslib.__decorate)([(0, _fastElement.attr)({
40616  attribute: "position"
40617})], Select.prototype, "positionAttribute", void 0);
40618(0, _tslib.__decorate)([_fastElement.observable], Select.prototype, "position", void 0);
40619(0, _tslib.__decorate)([_fastElement.observable], Select.prototype, "maxHeight", void 0);
40620/**
40621 * Includes ARIA states and properties relating to the ARIA select role.
40622 *
40623 * @public
40624 */
40625
40626class DelegatesARIASelect {}
40627
40628exports.DelegatesARIASelect = DelegatesARIASelect;
40629(0, _tslib.__decorate)([_fastElement.observable], DelegatesARIASelect.prototype, "ariaControls", void 0);
40630(0, _applyMixins.applyMixins)(DelegatesARIASelect, _listbox.DelegatesARIAListbox);
40631(0, _applyMixins.applyMixins)(Select, _startEnd.StartEnd, DelegatesARIASelect);
40632
40633},{"../listbox/listbox.js":262,"../patterns/start-end.js":277,"../utilities/apply-mixins.js":358,"./select.form-associated.js":307,"./select.options.js":309,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],309:[function(require,module,exports){
40634"use strict";
40635
40636Object.defineProperty(exports, "__esModule", {
40637  value: true
40638});
40639exports.SelectPosition = void 0;
40640
40641/**
40642 * Positioning directions for the listbox when a select is open.
40643 * @public
40644 */
40645const SelectPosition = {
40646  above: "above",
40647  below: "below"
40648};
40649exports.SelectPosition = SelectPosition;
40650
40651},{}],310:[function(require,module,exports){
40652"use strict";
40653
40654Object.defineProperty(exports, "__esModule", {
40655  value: true
40656});
40657exports.selectTemplate = void 0;
40658
40659var _fastElement = require("@microsoft/fast-element");
40660
40661var _listbox = require("../listbox/listbox.js");
40662
40663var _startEnd = require("../patterns/start-end.js");
40664
40665/**
40666 * The template for the {@link @microsoft/fast-foundation#(Select:class)} component.
40667 * @public
40668 */
40669const selectTemplate = (context, definition) => (0, _fastElement.html)`
40670    <template
40671        class="${x => [x.collapsible && "collapsible", x.collapsible && x.open && "open", x.disabled && "disabled", x.collapsible && x.position].filter(

40671Boolean).join(" ")}"
40672        aria-activedescendant="${x => x.ariaActiveDescendant}"
40673        aria-controls="${x => x.ariaControls}"
40674        aria-disabled="${x => x.ariaDisabled}"
40675        aria-expanded="${x => x.ariaExpanded}"
40676        aria-haspopup="${x => x.collapsible ? "listbox" : null}"
40677        aria-multiselectable="${x => x.ariaMultiSelectable}"
40678        ?open="${x => x.open}"
40679        role="combobox"
40680        tabindex="${x => !x.disabled ? "0" : null}"
40681        @click="${(x, c) => x.clickHandler(c.event)}"
40682        @focusin="${(x, c) => x.focusinHandler(c.event)}"
40683        @focusout="${(x, c) => x.focusoutHandler(c.event)}"
40684        @keydown="${(x, c) => x.keydownHandler(c.event)}"
40685        @mousedown="${(x, c) => x.mousedownHandler(c.event)}"
40686    >
40687        ${(0, _fastElement.when)(x => x.collapsible, (0, _fastElement.html)`
40688                <div
40689                    class="control"
40690                    part="control"
40691                    ?disabled="${x => x.disabled}"
40692                    ${(0, _fastElement.ref)("control")}
40693                >
40694                    ${(0, _startEnd.startSlotTemplate)(context, definition)}
40695                    <slot name="button-container">
40696                        <div class="selected-value" part="selected-value">
40697                            <slot name="selected-value">${x => x.displayValue}</slot>
40698                        </div>
40699                        <div aria-hidden="true" class="indicator" part="indicator">
40700                            <slot name="indicator">
40701                                ${definition.indicator || ""}
40702                            </slot>
40703                        </div>
40704                    </slot>
40705                    ${(0, _startEnd.endSlotTemplate)(context, definition)}
40706                </div>
40707            `)}
40708        <div
40709            class="listbox"
40710            id="${x => x.listboxId}"
40711            part="listbox"

40712            role="listbox"
40713            ?disabled="${x => x.disabled}"
40714            ?hidden="${x => x.collapsible ? !x.open : false}"
40715            ${(0, _fastElement.ref)("listbox")}
40716        >
40717            <slot
40718                ${(0, _fastElement.slotted)({
40719  filter: _listbox.Listbox.slottedOptionFilter,
40720  flatten: true,
40721  property: "slottedOptions"
40722})}
40723            ></slot>
40724        </div>
40725    </template>
40726`;
40727
40728exports.selectTemplate = selectTemplate;
40729
40730},{"../listbox/listbox.js":262,"../patterns/start-end.js":277,"@microsoft/fast-element":151}],311:[function(require,module,exports){
40731"use strict";
40732
40733Object.defineProperty(exports, "__esModule", {
40734  value: true
40735});
40736
40737var _skeletonTemplate = require("./skeleton.template.js");
40738
40739Object.keys(_skeletonTemplate).forEach(function (key) {
40740  if (key === "default" || key === "__esModule") return;
40741  if (key in exports && exports[key] === _skeletonTemplate[key]) return;
40742  Object.defineProperty(exports, key, {
40743    enumerable: true,
40744    get: function () {
40745      return _skeletonTemplate[key];
40746    }
40747  });
40748});
40749
40750var _skeleton = require("./skeleton.js");
40751
40752Object.keys(_skeleton).forEach(function (key) {
40753  if (key === "default" || key === "__esModule") return;
40754  if (key in exports && exports[key] === _skeleton[key]) return;
40755  Object.defineProperty(exports, key, {
40756    enumerable: true,
40757    get: function () {
40758      return _skeleton[key];
40759    }
40760  });
40761});
40762
40763},{"./skeleton.js":312,"./skeleton.template.js":313}],312:[function(require,module,exports){
40764"use strict";
40765
40766Object.defineProperty(exports, "__esModule", {
40767  value: true
40768});
40769exports.Skeleton = void 0;
40770
40771var _tslib = require("tslib");
40772
40773var _fastElement = require("@microsoft/fast-element");
40774
40775var _foundationElement = require("../foundation-element/foundation-element.js");
40776
40777/**
40778 * A Skeleton Custom HTML Element.
40779 *
40780 * @slot - The default slot
40781 *
40782 * @public
40783 */
40784class Skeleton extends _foundationElement.FoundationElement {
40785  constructor() {
40786    super(...arguments);
40787    /**
40788     * Indicates what the shape of the Skeleton should be.
40789     *
40790     * @public
40791     * @remarks
40792     * HTML Attribute: shape
40793     */
40794
40795    this.shape = "rect";
40796  }
40797
40798}
40799
40800exports.Skeleton = Skeleton;
40801(0, _tslib.__decorate)([_fastElement.attr], Skeleton.prototype, "fill", void 0);
40802(0, _tslib.__decorate)([_fastElement.attr], Skeleton.prototype, "shape", void 0);
40803(0, _tslib.__decorate)([_fastElement.attr], Skeleton.prototype, "pattern", void 0);
40804(0, _tslib.__decorate)([(0, _fastElement.attr)({
40805  mode: "boolean"
40806})], Skeleton.prototype, "shimmer", void 0);
40807
40808},{"../foundation-element/foundation-element.js":251,"@microsoft/fast-element":151,"tslib":372}],313:[function(require,module,exports){
40809"use strict";
40810
40811Object.defineProperty(exports, "__esModule", {
40812  value: true
40813});
40814exports.skeletonTemplate = void 0;
40815
40816var _fastElement = require("@microsoft/fast-element");
40817
40818/**
40819 * The template for the fast-skeleton component
40820 * @public
40821 */
40822const skeletonTemplate = (context, definition) => (0, _fastElement.html)`
40823    <template
40824        class="${x => x.shape === "circle" ? "circle" : "rect"}"
40825        pattern="${x => x.pattern}"
40826        ?shimmer="${x => x.shimmer}"
40827    >
40828        ${(0, _fastElement.when)(x => x.shimmer === true, (0, _fastElement.html)`
40829                <span class="shimmer"></span>
40830            `)}
40831        <object type="image/svg+xml" data="${x => x.pattern}" role="presentation">
40832            <img class="pattern" src="${x => x.pattern}" />
40833        </object>
40834        <slot></slot>
40835    </template>
40836`;
40837
40838exports.skeletonTemplate = skeletonTemplate;
40839
40840},{"@microsoft/fast-element":151}],314:[function(require,module,exports){
40841"use strict";
40842
40843Object.defineProperty(exports, "__esModule", {
40844  value: true
40845});
40846

40847var _sliderLabelTemplate = require("./slider-label.template.js");
40848
40849Object.keys(_sliderLabelTemplate).forEach(function (key) {
40850  if (key === "default" || key === "__esModule") return;
40851  if (key in exports && exports[key] === _sliderLabelTemplate[key]) return;
40852  Object.defineProperty(exports, key, {
40853    enumerable: true,
40854    get: function () {
40855      return _sliderLabelTemplate[key];
40856    }
40857  });
40858});
40859
40860var _sliderLabel = require("./slider-label.js");
40861
40862Object.keys(_sliderLabel).forEach(function (key) {
40863  if (key === "default" || key === "__esModule") return;
40864  if (key in exports && exports[key] === _sliderLabel[key]) return;
40865  Object.defineProperty(exports, key, {
40866    enumerable: true,
40867    get: function () {
40868      return _sliderLabel[key];
40869    }
40870  });
40871});
40872
40873},{"./slider-label.js":315,"./slider-label.template.js":316}],315:[function(require,module,exports){
40874"use strict";
40875
40876Object.defineProperty(exports, "__esModule", {
40877  value: true
40878});
40879exports.SliderLabel = void 0;
40880
40881var _tslib = require("tslib");
40882
40883var _fastElement = require("@microsoft/fast-element");
40884
40885var _fastWebUtilities = require("@microsoft/fast-web-utilities");
40886
40887var _sliderUtilities = require("../slider/slider-utilities.js");
40888
40889var _foundationElement = require("../foundation-element/foundation-element.js");
40890
40891const defaultConfig = {
40892  min: 0,
40893  max: 0,
40894  direction: _fastWebUtilities.Direction.ltr,
40895  orientation: _fastWebUtilities.Orientation.horizontal,
40896  disabled: false
40897};
40898/**
40899 * A label element intended to be used with the {@link @microsoft/fast-foundation#(Slider:class)} component.
40900 *
40901 * @slot - The default slot for the label content
40902 * @csspart root - The element wrapping the label mark and text
40903 *
40904 * @public
40905 */
40906
40907class SliderLabel extends _foundationElement.FoundationElement {
40908  constructor() {
40909    super(...arguments);
40910    /**
40911     * Hides the tick mark.
40912     *
40913     * @public
40914     * @remarks
40915     * HTML Attribute: hide-mark
40916     */
40917
40918    this.hideMark = false;
40919    /**
40920     * @internal
40921     */
40922
40923    this.sliderDirection = _fastWebUtilities.Direction.ltr;
40924
40925    this.getSliderConfiguration = () => {
40926      if (!this.isSliderConfig(this.parentNode)) {
40927        this.sliderDirection = defaultConfig.direction || _fastWebUtilities.Direction.ltr;
40928        this.sliderOrientation = defaultConfig.orientation || _fastWebUtilities.Orientation.horizontal;
40929        this.sliderMaxPosition = defaultConfig.max;
40930        this.sliderMinPosition = defaultConfig.min;
40931      } else {
40932        const parentSlider = this.parentNode;
40933        const {
40934          min,
40935          max,
40936          direction,
40937          orientation,
40938          disabled
40939        } = parentSlider;
40940
40941        if (disabled !== undefined) {
40942          this.disabled = disabled;
40943        }
40944
40945        this.sliderDirection = direction || _fastWebUtilities.Direction.ltr;
40946        this.sliderOrientation = orientation || _fastWebUtilities.Orientation.horizontal;
40947        this.sliderMaxPosition = max;
40948        this.sliderMinPosition = min;
40949      }
40950    };
40951
40952    this.positionAsStyle = () => {
40953      const direction = this.sliderDirection ? this.sliderDirection : _fastWebUtilities.Direction.ltr;
40954      const pct = (0, _sliderUtilities.convertPixelToPercent)(Number(this.position), Number(this.sliderMinPosition), Number(this.sliderMaxPosition));
40955      let rightNum = Math.round((1 - pct) * 100);
40956      let leftNum = Math.round(pct * 100);
40957
40958      if (Number.isNaN(leftNum) && Number.isNaN(rightNum)) {
40959        rightNum = 50;
40960        leftNum = 50;
40961      }
40962
40963      if (this.sliderOrientation === _fastWebUtilities.Orientation.horizontal) {
40964        return direction === _fastWebUtilities.Direction.rtl ? `right: ${leftNum}%; left: ${rightNum}%;` : `left: ${leftNum}%; right: ${rightNum}%;`;
40965      } else {
40966        return `top: ${leftNum}%; bottom: ${rightNum}%;`;
40967      }
40968    };
40969  }
40970
40971  positionChanged() {
40972    this.positionStyle = this.positionAsStyle();
40973  }
40974  /**
40975   * @internal
40976   */
40977
40978
40979  sliderOrientationChanged() {
40980    void 0;
40981  }
40982  /**
40983   * @internal
40984   */
40985
40986
40987  connectedCallback() {
40988    super.connectedCallback();
40989    this.getSliderConfiguration();
40990    this.positionStyle = this.positionAsStyle();
40991    this.notifier = _fastElement.Observable.getNotifier(this.parentNode);
40992    this.notifier.subscribe(this, "orientation");
40993    this.notifier.subscribe(this, "direction");
40994    this.notifier.subscribe(this, "max");
40995    this.notifier.subscribe(this, "min");
40996  }
40997  /**
40998   * @internal
40999   */
41000
41001
41002  disconnectedCallback() {
41003    super.disconnectedCallback();
41004    this.notifier.unsubscribe(this, "orientation");
41005    this.notifier.unsubscribe(this, "direction");
41006    this.notifier.unsubscribe(this, "max");
41007    this.notifier.unsubscribe(this, "min");
41008  }
41009  /**
41010   * @internal
41011   */
41012
41013
41014  handleChange(source, propertyName) {
41015    switch (propertyName) {
41016      case "direction":
41017        this.sliderDirection = source.direction;
41018        break;
41019
41020      case "orientation":
41021        this.sliderOrientation = source.orientation;
41022        break;
41023
41024      case "max":
41025        this.sliderMaxPosition = source.max;
41026        break;
41027
41028      case "min":
41029        this.sliderMinPosition = source.min;
41030        break;
41031
41032      default:
41033        break;
41034    }
41035
41036    this.positionStyle = this.positionAsStyle();
41037  }
41038
41039  isSliderConfig(node) {
41040    return node.max !== undefined && node.min !== undefined;
41041  }
41042
41043}
41044
41045exports.SliderLabel = SliderLabel;
41046(0, _tslib.__decorate)([_fastElement.observable], SliderLabel.prototype, "positionStyle", void 0);
41047(0, _tslib.__decorate)([_fastElement.attr], SliderLabel.prototype, "position", void 0);
41048(0, _tslib.__decorate)([(0, _fastElement.attr)({
41049  attribute: "hide-mark",
41050  mode: "boolean"
41051})], SliderLabel.prototype, "hideMark", void 0);
41052(0, _tslib.__decorate)([(0, _fastElement.attr)({
41053  attribute: "disabled",
41054  mode: "boolean"
41055})], SliderLabel.prototype, "disabled", void 0);
41056(0, _tslib.__decorate)([_fastElement.observable], SliderLabel.prototype, "sliderOrientation", void 0);
41057(0, _tslib.__decorate)([_fastElement.observable], SliderLabel.prototype, "sliderMinPosition", void 0);
41058(0, _tslib.__decorate)([_fastElement.observable], SliderLabel.prototype, "sliderMaxPosition", void 0);
41059(0, _tslib.__decorate)([_fastElement.observable], SliderLabel.prototype, "sliderDirection", void 0);
41060
41061}

41061,{"../foundation-element/foundation-element.js":251,"../slider/slider-utilities.js":318,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],316:[function(require,module,exports){
41062"use strict";
41063
41064Object.defineProperty(exports, "__esModule", {
41065  value: true
41066});
41067exports.sliderLabelTemplate = void 0;
41068
41069var _fastElement = require("@microsoft/fast-element");
41070
41071var _fastWebUtilities = require("@microsoft/fast-web-utilities");
41072
41073/**
41074 * The template for the {@link @microsoft/fast-foundation#(SliderLabel:class)} component.
41075 * @public
41076 */
41077const sliderLabelTemplate = (context, definition) => (0, _fastElement.html)`
41078    <template
41079        aria-disabled="${x => x.disabled}"
41080        class="${x => x.sliderOrientation || _fastWebUtilities.Orientation.horizontal}
41081            ${x => x.disabled ? "disabled" : ""}"
41082    >
41083        <div ${(0, _fastElement.ref)("root")} part="root" class="root" style="${x => x.positionStyle}">
41084            <div class="container">
41085                ${(0, _fastElement.when)(x => !x.hideMark, (0, _fastElement.html)`
41086                        <div class="mark"></div>
41087                    `)}
41088                <div class="label">
41089                    <slot></slot>
41090                </div>
41091            </div>
41092        </div>
41093    </template>
41094`;
41095
41096exports.sliderLabelTemplate = sliderLabelTemplate;
41097
41098},{"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379}],317:[function(require,module,exports){
41099"use strict";
41100
41101Object.defineProperty(exports, "__esModule", {
41102  value: true
41103});
41104

41105var _sliderTemplate = require("./slider.template.js");
41106
41107Object.keys(_sliderTemplate).forEach(function (key) {
41108  if (key === "default" || key === "__esModule") return;
41109  if (key in exports && exports[key] === _sliderTemplate[key]) return;
41110  Object.defineProperty(exports, key, {
41111    enumerable: true,
41112    get: function () {
41113      return _sliderTemplate[key];
41114    }
41115  });
41116});
41117
41118var _slider = require("./slider.js");
41119
41120Object.keys(_slider).forEach(function (key) {
41121  if (key === "default" || key === "__esModule") return;
41122  if (key in exports && exports[key] === _slider[key]) return;
41123  Object.defineProperty(exports, key, {
41124    enumerable: true,
41125    get: function () {
41126      return _slider[key];
41127    }
41128  });
41129});
41130
41131},{"./slider.js":320,"./slider.template.js":321}],318:[function(require,module,exports){
41132"use strict";
41133
41134Object.defineProperty(exports, "__esModule", {
41135  value: true
41136});
41137exports.convertPixelToPercent = convertPixelToPercent;
41138
41139var _fastWebUtilities = require("@microsoft/fast-web-utilities");
41140
41141/**
41142 * Converts a pixel coordinate on the track to a percent of the track's range
41143 */
41144function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
41145  let pct = (0, _fastWebUtilities.limit)(0, 1, (pixelPos - minPosition) / (maxPosition - minPosition));
41146
41147  if (direction === _fastWebUtilities.Direction.rtl) {
41148    pct = 1 - pct;
41149  }
41150
41151  return pct;
41152}
41153
41154},{"@microsoft/fast-web-utilities":379}],319:[function(require,module,exports){
41155"use strict";
41156
41157Object.defineProperty(exports, "__esModule", {
41158  value: true
41159});
41160exports.FormAssociatedSlider = void 0;
41161
41162var _formAssociated = require("../form-associated/form-associated.js");
41163
41164var _foundationElement = require("../foundation-element/foundation-element.js");
41165
41166class _Slider extends _foundationElement.FoundationElement {}
41167/**
41168 * A form-associated base class for the {@link @microsoft/fast-foundation#(Slider:class)} component.
41169 *
41170 * @internal
41171 */
41172
41173
41174class FormAssociatedSlider extends (0, _formAssociated.FormAssociated)(_Slider) {
41175  constructor() {
41176    super(...arguments);
41177    this.proxy = document.createElement("input");
41178  }
41179
41180}
41181
41182exports.FormAssociatedSlider = FormAssociatedSlider;
41183
41184},{"../form-associated/form-associated.js":249,"../foundation-element/foundation-element.js":251}],320:[function(require,module,exports){
41185"use strict";
41186
41187Object.defineProperty(exports, "__esModule", {
41188  value: true
41189});
41190exports.SliderMode = exports.Slider = void 0;
41191
41192var _tslib = require("tslib");
41193
41194var _fastElement = require("@microsoft/fast-element");
41195
41196var _fastWebUtilities = require("@microsoft/fast-web-utilities");
41197
41198var _direction = require("../utilities/direction.js");
41199

41200var _sliderUtilities = require("./slider-utilities.js");
41201
41202var _sliderFormAssociated = require("./slider.form-associated.js");
41203
41204/**
41205 * The selection modes of a {@link @microsoft/fast-foundation#(Slider:class)}.
41206 * @public
41207 */
41208const SliderMode = {
41209  singleValue: "single-value"
41210};
41211/**
41212 * A Slider Custom HTML Element.
41213 * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#slider | ARIA slider }.
41214 *
41215 * @slot track - The track of the slider
41216 * @slot track-start - The track-start visual indicator
41217 * @slot thumb - The slider thumb
41218 * @slot - The default slot for labels
41219 * @csspart positioning-region - The region used to position the elements of the slider
41220 * @csspart track-container - The region containing the track elements
41221 * @csspart track-start - The element wrapping the track start slot
41222 * @csspart thumb-container - The thumb container element which is programatically positioned
41223 * @fires change - Fires a custom 'change' event when the slider value changes
41224 *
41225 * @public
41226 */
41227
41228exports.SliderMode = SliderMode;
41229
41230class Slider extends _sliderFormAssociated.FormAssociatedSlider {
41231  constructor() {
41232    super(...arguments);
41233    /**
41234     * @internal
41235     */
41236
41237    this.direction = _fastWebUtilities.Direction.ltr;
41238    /**
41239     * @internal
41240     */
41241
41242    this.isDragging = false;
41243    /**
41244     * @internal
41245     */
41246
41247    this.trackWidth = 0;
41248    /**
41249     * @internal
41250     */
41251
41252    this.trackMinWidth = 0;
41253    /**
41254     * @internal
41255     */
41256
41257    this.trackHeight = 0;
41258    /**
41259     * @internal
41260     */
41261
41262    this.trackLeft = 0;
41263    /**
41264     * @internal
41265     */
41266
41267    this.trackMinHeight = 0;
41268    /**
41269     * Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
41270     *
41271     * @public
41272     */
41273
41274    this.valueTextFormatter = () => null;
41275    /**
41276     * The minimum allowed value.
41277     *
41278     * @defaultValue - 0
41279     * @public
41280     * @remarks
41281     * HTML Attribute: min
41282     */
41283
41284
41285    this.min = 0; // Map to proxy element.
41286
41287    /**
41288     * The maximum allowed value.
41289     *
41290     * @defaultValue - 10
41291     * @public
41292     * @remarks
41293     * HTML Attribute: max
41294     */
41295
41296    this.max = 10; // Map to proxy element.
41297
41298    /**
41299     * Value to increment or decrement via arrow keys, mouse click or drag.
41300     *
41301     * @public
41302     * @remarks
41303     * HTML Attribute: step
41304     */
41305
41306    this.step = 1; // Map to proxy element.
41307
41308    /**
41309     * The orientation of the slider.
41310     *
41311     * @public
41312     * @remarks
41313     * HTML Attribute: orientation
41314     */
41315
41316    this.orientation = _fastWebUtilities.Orientation.horizontal;
41317    /**
41318     * The selection mode.
41319     *
41320     * @public
41321     * @remarks
41322     * HTML Attribute: mode
41323     */
41324
41325    this.mode = SliderMode.singleValue;
41326
41327    this.keypressHandler = e => {
41328      if (this.readOnly) {
41329        return;
41330      }
41331
41332      if (e.key === _fastWebUtilities.keyHome) {
41333        e.preventDefault();
41334        this.value = `${this.min}`;
41335      } else if (e.key === _fastWebUtilities.keyEnd) {
41336        e.preventDefault();
41337        this.value = `${this.max}`;
41338      } else if (!e.shiftKey) {
41339        switch (e.key) {
41340          case _fastWebUtilities.keyArrowRight:
41341          case _fastWebUtilities.keyArrowUp:
41342            e.preventDefault();
41343            this.increment();
41344            break;
41345
41346          case _fastWebUtilities.keyArrowLeft:
41347          case _fastWebUtilities.keyArrowDown:
41348            e.preventDefault();
41349            this.decrement();
41350            break;
41351        }
41352      }
41353    };
41354
41355    this.setupTrackConstraints = () => {
41356      const clientRect = this.track.getBoundingClientRect();
41357      this.trackWidth = this.track.clientWidth;
41358      this.trackMinWidth = this.track.clientLeft;
41359      this.trackHeight = clientRect.bottom;
41360      this.trackMinHeight = clientRect.top;
41361      this.trackLeft = this.getBoundingClientRect().left;
41362
41363      if (this.trackWidth === 0) {
41364        this.trackWidth = 1;
41365      }
41366    };
41367
41368    this.setupListeners = (remove = false) => {
41369      const eventAction = `${remove ? "remove" : "add"}EventListener`;
41370      this[eventAction]("keydown", this.keypressHandler);
41371      this[eventAction]("mousedown", this.handleMouseDown);
41372      this.thumb[eventAction]("mousedown", this.handleThumbMouseDown, {

41373        passive: true
41374      });
41375      this.thumb[eventAction]("touchstart", this.handleThumbMouseDown, {
41376        passive: true
41377      }); // removes handlers attached by mousedown handlers
41378
41379      if (remove) {
41380        this.handleMouseDown(null);
41381        this.handleThumbMouseDown(null);
41382      }
41383    };
41384    /**
41385     * @internal
41386     */
41387
41388
41389    this.initialValue = "";
41390    /**
41391     *  Handle mouse moves during a thumb drag operation
41392     *  If the event handler is null it removes the events
41393     */
41394
41395    this.handleThumbMouseDown = event => {
41396      if (event) {
41397        if (this.readOnly || this.disabled || event.defaultPrevented) {
41398          return;
41399        }
41400
41401        event.target.focus();
41402      }
41403
41404      const eventAction = `${event !== null ? "add" : "remove"}EventListener`;
41405      window[eventAction]("mouseup", this.handleWindowMouseUp);
41406      window[eventAction]("mousemove", this.handleMouseMove, {
41407        passive: true
41408      });
41409      window[eventAction]("touchmove", this.handleMouseMove, {
41410        passive: true
41411      });
41412      window[eventAction]("touchend", this.handleWindowMouseUp);
41413      this.isDragging = event !== null;
41414    };
41415    /**
41416     *  Handle mouse moves during a thumb drag operation
41417     */
41418
41419
41420    this.handleMouseMove = e => {
41421      if (this.readOnly || this.disabled || e.defaultPrevented) {
41422        return;
41423      } // update the value based on current position
41424
41425
41426      const sourceEvent = window.TouchEvent && e instanceof TouchEvent ? e.touches[0] : e;
41427      const eventValue = this.orientation === _fastWebUtilities.Orientation.horizontal ? sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft : sourceEvent.pageY - document.documentElement.scrollTop;
41428      this.value = `${this.calculateNewValue(eventValue)}`;
41429    };
41430
41431    this.calculateNewValue = rawValue => {
41432      // update the value based on current position
41433      const newPosition = (0, _sliderUtilities.convertPixelToPercent)(rawValue, this.orientation === _fastWebUtilities.Orientation.horizontal ? this.trackMinWidth : this.trackMinHeight, this.orientation === _fastWebUtilities.Orientation.horizontal ? this.trackWidth : this.trackHeight, this.direction);
41434      const newValue = (this.max - this.min) * newPosition + this.min;
41435      return this.convertToConstrainedValue(newValue);
41436    };
41437    /**
41438     * Handle a window mouse up during a drag operation
41439     */
41440
41441
41442    this.handleWindowMouseUp = event => {
41443      this.stopDragging();
41444    };
41445
41446    this.stopDragging = () => {
41447      this.isDragging = false;
41448      this.handleMouseDown(null);
41449      this.handleThumbMouseDown(null);
41450    };
41451    /**
41452     *
41453     * @param e - MouseEvent or null. If there is no event handler it will remove the events
41454     */
41455
41456
41457    this.handleMouseDown = e => {
41458      const eventAction = `${e !== null ? "add" : "remove"}EventListener`;
41459
41460      if (e === null || !this.disabled && !this.readOnly) {
41461        window[eventAction]("mouseup", this.handleWindowMouseUp);
41462        window.document[eventAction]("mouseleave", this.handleWindowMouseUp);
41463        window[eventAction]("mousemove", this.handleMouseMove);
41464
41465        if (e) {
41466          e.preventDefault();
41467          this.setupTrackConstraints();
41468          e.target.focus();
41469          const controlValue = this.orientation === _fastWebUtilities.Orientation.horizontal ? e.pageX - document.documentElement.scrollLeft - this.trackLeft : e.pageY - document.documentElement.scrollTop;
41470          this.value = `${this.calculateNewValue(controlValue)}`;
41471        }
41472      }
41473    };
41474
41475    this.convertToConstrainedValue = value => {
41476      if (isNaN(value)) {
41477        value = this.min;
41478      }
41479      /**
41480       * The following logic intends to overcome the issue with math in JavaScript with regards to floating point numbers.
41481       * This is needed as the `step` may be an integer but could also be a float. To accomplish this the step  is assumed to be a float
41482       * and is converted to an integer by determining the number of decimal places it represent, multiplying it until it is an
41483       * integer and then dividing it to get back to the correct number.
41484       */
41485
41486
41487      let constrainedValue = value - this.min;
41488      const roundedConstrainedValue = Math.round(constrainedValue / this.step);
41489      const remainderValue = constrainedValue - roundedConstrainedValue * (this.stepMultiplier * this.step) / this.stepMultiplier;
41490      constrainedValue = remainderValue >= Number(this.step) / 2 ? constrainedValue - remainderValue + Number(this.step) : constrainedValue - remainderValue;
41491      return constrainedValue + this.min;
41492    };
41493  }
41494
41495  readOnlyChanged() {
41496    if (this.proxy instanceof HTMLInputElement) {
41497      this.proxy.readOnly = this.readOnly;
41498    }
41499  }
41500  /**
41501   * The value property, typed as a number.
41502   *
41503   * @public
41504   */
41505
41506
41507  get valueAsNumber() {
41508    return parseFloat(super.value);
41509  }
41510
41511  set valueAsNumber(next) {
41512    this.value = next.toString();
41513  }
41514  /**
41515   * @internal
41516   */
41517
41518
41519  valueChanged(previous, next) {
41520    super.valueChanged(previous, next);
41521
41522    if (this.$fastController.isConnected) {
41523      this.setThumbPositionForOrientation(this.direction);
41524    }
41525
41526    this.$emit("change");
41527  }
41528
41529  minChanged() {
41530    if (this.proxy instanceof HTMLInputElement) {
41531      this.proxy.min = `${this.min}`;
41532    }
41533
41534    this.validate();
41535  }
41536
41537  maxChanged() {
41538    if (this.proxy instanceof HTMLInputElement) {
41539      this.proxy.max = `${this.max}`;
41540    }
41541
41542    this.validate();
41543  }
41544
41545  stepChanged() {
41546    if (this.proxy instanceof HTMLInputElement) {
41547      this.proxy.step = `${this.step}`;
41548    }
41549
41550    this.updateStepMultiplier();
41551    this.validate();
41552  }
41553
41554  orientationChanged() {
41555    if (this.$fastController.isConnected) {
41556      this.setThumbPositionForOrientation(this.direction);
41557    }
41558  }
41559  /**
41560   * @internal
41561   */
41562
41563
41564  connectedCallback() {
41565    super.connectedCallback();
41566    this.proxy.setAttribute("type", "range");
41567    this.direction = (0, _direction.getDirection)(this);
41568    this.updateStepMultiplier();
41569    this.setupTrackConstraints();
41570    this.setupListeners();
41571    this.setupDefaultValue();
41572    this.setThumbPositionForOrientation(this.direction);
41573  }
41574  /**
41575   * @internal
41576   */
41577
41578
41579  disconnectedCallback() {
41580    this.setupListeners(true);
41581  }
41582  /**
41583   * Increment the value by the step
41584   *
41585   * @public
41586   */
41587
41588
41589  increment() {
41590    const newVal = this.direction !== _fastWebUtilities.Direction.rtl && this.orientation !== _fastWebUtilities.Orientation.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
41591    const incrementedVal = this.convertToConstrainedValue(newVal);
41592    const incrementedValString = incrementedVal < Number(this.max) ? `${incrementedVal}` : `${this.max}`;
41593    this.value = incrementedValString;
41594  }
41595  /**
41596   * Decrement the value by the step
41597   *
41598   * @public
41599   */
41600
41601

41602  decrement() {
41603    const newVal = this.direction !== _fastWebUtilities.Direction.rtl && this.orientation !== _fastWebUtilities.Orientation.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
41604    const decrementedVal = this.convertToConstrainedValue(newVal);
41605    const decrementedValString = decrementedVal > Number(this.min) ? `${decrementedVal}` : `${this.min}`;
41606    this.value = decrementedValString;
41607  }
41608  /**
41609   * Places the thumb based on the current value
41610   *
41611   * @public
41612   * @param direction - writing mode
41613   */
41614
41615
41616  setThumbPositionForOrientation(direction) {
41617    const newPct = (0, _sliderUtilities.convertPixelToPercent)(Number(this.value), Number(this.min), Number(this.max), direction);
41618    const percentage = (1 - newPct) * 100;
41619
41620    if (this.orientation === _fastWebUtilities.Orientation.horizontal) {
41621      this.position = this.isDragging ? `right: ${percentage}%; transition: none;` : `right: ${percentage}%; transition: all 0.2s ease;`;
41622    } else {
41623      this.position = this.isDragging ? `bottom: ${percentage}%; transition: none;` : `bottom: ${percentage}%; transition: all 0.2s ease;`;
41624    }
41625  }
41626  /**
41627   * Update the step multiplier used to ensure rounding errors from steps that
41628   * are not whole numbers
41629   */
41630
41631
41632  updateStepMultiplier() {
41633    const stepString = this.step + "";
41634    const decimalPlacesOfStep = !!(this.step % 1) ? stepString.length - stepString.indexOf(".") - 1 : 0;
41635    this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
41636  }
41637
41638  get midpoint() {
41639    return `${this.convertToConstrainedValue((this.max + this.min) / 2)}`;
41640  }
41641
41642  setupDefaultValue() {
41643    if (typeof this.value === "string") {
41644      if (this.value.length === 0) {
41645        this.initialValue = this.midpoint;
41646      } else {
41647        const value = parseFloat(this.value);
41648
41649        if (!Number.isNaN(value) && (value < this.min || value > this.max)) {
41650          this.value = this.midpoint;
41651        }
41652      }
41653    }
41654  }
41655
41656}
41657
41658exports.Slider = Slider;
41659(0, _tslib.__decorate)([(0, _fastElement.attr)({
41660  attribute: "readonly",
41661  mode: "boolean"
41662})], Slider.prototype, "readOnly", void 0);
41663(0, _tslib.__decorate)([_fastElement.observable], Slider.prototype, "direction", void 0);
41664(0, _tslib.__decorate)([_fastElement.observable], Slider.prototype, "isDragging", void 0);
41665(0, _tslib.__decorate)([_fastElement.observable], Slider.prototype, "position", void 0);
41666(0, _tslib.__decorate)([_fastElement.observable], Slider.prototype, "trackWidth", void 0);
41667(0, _tslib.__decorate)([_fastElement.observable], Slider.prototype, "trackMinWidth", void 0);
41668(0, _tslib.__decorate)([_fastElement.observable], Slider.prototype, "trackHeight", void 0);
41669(0, _tslib.__decorate)([_fastElement.observable], Slider.prototype, "trackLeft", void 0);
41670(0, _tslib.__decorate)([_fastElement.observable], Slider.prototype, "trackMinHeight", void 0);
41671(0, _tslib.__decorate)([_fastElement.observable], Slider.prototype, "valueTextFormatter", void 0);
41672(0, _tslib.__decorate)([(0, _fastElement.attr)({
41673  converter: _fastElement.nullableNumberConverter
41674})], Slider.prototype, "min", void 0);
41675(0, _tslib.__decorate)([(0, _fastElement.attr)({
41676  converter: _fastElement.nullableNumberConverter
41677})], Slider.prototype, "max", void 0);
41678(0, _tslib.__decorate)([(0, _fastElement.attr)({
41679  converter: _fastElement.nullableNumberConverter
41680})], Slider.prototype, "step", void 0);
41681(0, _tslib.__decorate)([_fastElement.attr], Slider.prototype, "orientation", void 0);
41682(0, _tslib.__decorate)([_fastElement.attr], Slider.prototype, "mode", void 0);
41683
41684},{"../utilities/direction.js":361,"./slider-utilities.js":318,"./slider.form-associated.js":319,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],321:[function(require,module,exports){
41685"use strict";
41686
41687Object.defineProperty(exports, "__esModule", {
41688  value: true
41689});
41690exports.sliderTemplate = void 0;
41691
41692var _fastElement = require("@microsoft/fast-element");
41693
41694var _fastWebUtilities = require("@microsoft/fast-web-utilities");
41695
41696/**
41697 * The template for the {@link @microsoft/fast-foundation#(Slider:class)} component.
41698 * @public
41699 */
41700const sliderTemplate = (context, definition) => (0, _fastElement.html)`
41701    <template
41702        role="slider"
41703        class="${x => x.readOnly ? "readonly" : ""}
41704        ${x => x.orientation || _fastWebUtilities.Orientation.horizontal}"
41705        tabindex="${x => x.disabled ? null : 0}"
41706        aria-valuetext="${x => x.valueTextFormatter(x.value)}"
41707        aria-valuenow="${x => x.value}"
41708        aria-valuemin="${x => x.min}"
41709        aria-valuemax="${x => x.max}"
41710        aria-disabled="${x => x.disabled ? true : void 0}"
41711        aria-readonly="${x => x.readOnly ? true : void 0}"
41712        aria-orientation="${x => x.orientation}"
41713        class="${x => x.orientation}"
41714    >
41715        <div part="positioning-region" class="positioning-region">
41716            <div ${(0, _fastElement.ref)("track")} part="track-container" class="track">
41717                <slot name="track"></slot>
41718                <div part="track-start" class="track-start" style="${x => x.position}">
41719                    <slot name="track-start"></slot>
41720                </div>
41721            </div>
41722            <slot></slot>
41723            <div
41724                ${(0, _fastElement.ref)("thumb")}
41725                part="thumb-container"
41726                class="thumb-container"
41727                style="${x => x.position}"
41728            >
41729                <slot name="thumb">${definition.thumb || ""}</slot>
41730            </div>
41731        </div>
41732    </template>
41733`;
41734
41735exports.sliderTemplate = sliderTemplate;
41736
41737},{"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379}],322:[function(require,module,exports){
41738"use strict";
41739
41740Object.defineProperty(exports, "__esModule", {
41741  value: true
41742});
41743
41744var _switchTemplate = require("./switch.template.js");
41745
41746Object.keys(_switchTemplate).forEach(function (key) {

41747  if (key === "default" || key === "__esModule") return;
41748  if (key in exports && exports[key] === _switchTemplate[key]) return;
41749  Object.defineProperty(exports, key, {
41750    enumerable: true,
41751    get: function () {
41752      return _switchTemplate[key];
41753    }
41754  });
41755});
41756
41757var _switch = require("./switch.js");
41758
41759Object.keys(_switch).forEach(function (key) {
41760  if (key === "default" || key === "__esModule") return;
41761  if (key in exports && exports[key] === _switch[key]) return;
41762  Object.defineProperty(exports, key, {
41763    enumerable: true,
41764    get: function () {
41765      return _switch[key];
41766    }
41767  });
41768});
41769
41770},{"./switch.js":324,"./switch.template.js":325}],323:[function(require,module,exports){
41771"use strict";
41772
41773Object.defineProperty(exports, "__esModule", {
41774  value: true
41775});
41776exports.FormAssociatedSwitch = void 0;
41777
41778var _formAssociated = require("../form-associated/form-associated.js");
41779
41780var _foundationElement = require("../foundation-element/foundation-element.js");
41781
41782class _Switch extends _foundationElement.FoundationElement {}
41783/**
41784 * A form-associated base class for the {@link @microsoft/fast-foundation#(Switch:class)} component.
41785 *
41786 * @internal
41787 */
41788
41789
41790class FormAssociatedSwitch extends (0, _formAssociated.CheckableFormAssociated)(_Switch) {
41791  constructor() {
41792    super(...arguments);
41793    this.proxy = document.createElement("input");
41794  }
41795
41796}
41797
41798exports.FormAssociatedSwitch = FormAssociatedSwitch;
41799
41800},{"../form-associated/form-associated.js":249,"../foundation-element/foundation-element.js":251}],324:[function(require,module,exports){
41801"use strict";
41802
41803Object.defineProperty(exports, "__esModule", {
41804  value: true
41805});
41806exports.Switch = void 0;
41807
41808var _tslib = require("tslib");
41809
41810var _fastElement = require("@microsoft/fast-element");
41811
41812var _fastWebUtilities = require("@microsoft/fast-web-utilities");
41813
41814var _switchFormAssociated = require("./switch.form-associated.js");
41815
41816/**
41817 * A Switch Custom HTML Element.
41818 * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
41819 *
41820 * @slot - The deafult slot for the label
41821 * @slot checked-message - The message when in a checked state
41822 * @slot unchecked-message - The message when in an unchecked state
41823 * @csspart label - The label
41824 * @csspart switch - The element representing the switch, which wraps the indicator
41825 * @csspart status-message - The wrapper for the status messages
41826 * @csspart checked-message - The checked message
41827 * @csspart unchecked-message - The unchecked message
41828 * @fires change - Emits a custom change event when the checked state changes
41829 *
41830 * @public
41831 */
41832class Switch extends _switchFormAssociated.FormAssociatedSwitch {
41833  constructor() {
41834    super();
41835    /**
41836     * The element's value to be included in form submission when checked.
41837     * Default to "on" to reach parity with input[type="checkbox"]
41838     *
41839     * @internal
41840     */
41841
41842    this.initialValue = "on";
41843    /**
41844     * @internal
41845     */
41846
41847    this.keypressHandler = e => {
41848      if (this.readOnly) {
41849        return;
41850      }
41851
41852      switch (e.key) {
41853        case _fastWebUtilities.keyEnter:
41854        case _fastWebUtilities.keySpace:
41855          this.checked = !this.checked;
41856          break;
41857      }
41858    };
41859    /**
41860     * @internal
41861     */
41862
41863
41864    this.clickHandler = e => {
41865      if (!this.disabled && !this.readOnly) {
41866        this.checked = !this.checked;
41867      }
41868    };
41869
41870    this.proxy.setAttribute("type", "checkbox");
41871  }
41872
41873  readOnlyChanged() {
41874    if (this.proxy instanceof HTMLInputElement) {
41875      this.proxy.readOnly = this.readOnly;
41876    }
41877
41878    this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
41879  }
41880  /**
41881   * @internal
41882   */
41883
41884
41885  checkedChanged(prev, next) {
41886    super.checkedChanged(prev, next);
41887    /**
41888     * @deprecated - this behavior already exists in the template and should not exist in the class.
41889     */
41890
41891    this.checked ? this.classList.add("checked") : this.classList.remove("checked");
41892  }
41893
41894}
41895
41896exports.Switch = Switch;
41897(0, _tslib.__decorate)([(0, _fastElement.attr)({
41898  attribute: "readonly",
41899  mode: "boolean"
41900})], Switch.prototype, "readOnly", void 0);
41901(0, _tslib.__decorate)([_fastElement.observable], Switch.prototype, "defaultSlottedNodes", void 0);
41902
41903},{"./switch.form-associated.js":323,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],325:[function(require,module,exports){
41904"use strict";
41905
41906Object.defineProperty(exports, "__esModule", {
41907  value: true
41908});
41909exports.switchTemplate = void 0;
41910
41911var _fastElement = require("@microsoft/fast-element");
41912
41913/**
41914 * The template for the {@link @microsoft/fast-foundation#(Switch:class)} component.
41915 * @public
41916 */
41917const switchTemplate = (context, definition) => (0, _fastElement.html)`
41918    <template
41919        role="switch"
41920        aria-checked="${x => x.checked}"
41921        aria-disabled="${x => x.disabled}"
41922        aria-readonly="${x => x.readOnly}"
41923        tabindex="${x => x.disabled ? null : 0}"
41924        @keypress="${(x, c) => x.keypressHandler(c.event)}"
41925        @click="${(x, c) => x.clickHandler(c.event)}"
41926        class="${x => x.checked ? "checked" : ""}"
41927    >
41928        <label
41929            part="label"
41930            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"
41931        >
41932            <slot ${(0, _fastElement.slotted)("defaultSlottedNodes")}></slot>
41933        </label>
41934        <div part="switch" class="switch">
41935            <slot name="switch">${definition.switch || ""}</slot>
41936        </div>

41937        <span class="status-message" part="status-message">
41938            <span class="checked-message" part="checked-message">
41939                <slot name="checked-message"></slot>
41940            </span>
41941            <span class="unchecked-message" part="unchecked-message">
41942                <slot name="unchecked-message"></slot>
41943            </span>
41944        </span>
41945    </template>
41946`;
41947
41948exports.switchTemplate = switchTemplate;
41949
41950},{"@microsoft/fast-element":151}],326:[function(require,module,exports){
41951"use strict";
41952
41953Object.defineProperty(exports, "__esModule", {
41954  value: true
41955});
41956
41957var _tabPanelTemplate = require("./tab-panel.template.js");
41958
41959Object.keys(_tabPanelTemplate).forEach(function (key) {
41960  if (key === "default" || key === "__esModule") return;
41961  if (key in exports && exports[key] === _tabPanelTemplate[key]) return;
41962  Object.defineProperty(exports, key, {
41963    enumerable: true,
41964    get: function () {
41965      return _tabPanelTemplate[key];
41966    }
41967  });
41968});
41969
41970var _tabPanel = require("./tab-panel.js");
41971
41972Object.keys(_tabPanel).forEach(function (key) {
41973  if (key === "default" || key === "__esModule") return;
41974  if (key in exports && exports[key] === _tabPanel[key]) return;
41975  Object.defineProperty(exports, key, {
41976    enumerable: true,
41977    get: function () {
41978      return _tabPanel[key];
41979    }
41980  });
41981});
41982
41983},{"./tab-panel.js":327,"./tab-panel.template.js":328}],327:[function(require,module,exports){
41984"use strict";
41985
41986Object.defineProperty(exports, "__esModule", {
41987  value: true
41988});
41989exports.TabPanel = void 0;
41990
41991var _foundationElement = require("../foundation-element/foundation-element.js");
41992
41993/**
41994 * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
41995 *
41996 * @slot - The default slot for the tabpanel content
41997 *
41998 * @public
41999 */
42000class TabPanel extends _foundationElement.FoundationElement {}
42001
42002exports.TabPanel = TabPanel;
42003
42004},{"../foundation-element/foundation-element.js":251}],328:[function(require,module,exports){
42005"use strict";
42006
42007Object.defineProperty(exports, "__esModule", {
42008  value: true
42009});
42010exports.tabPanelTemplate = void 0;
42011
42012var _fastElement = require("@microsoft/fast-element");
42013
42014/**
42015 * The template for the {@link @microsoft/fast-foundation#TabPanel} component.
42016 * @public
42017 */
42018const tabPanelTemplate = (context, definition) => (0, _fastElement.html)`
42019    <template slot="tabpanel" role="tabpanel">
42020        <slot></slot>
42021    </template>
42022`;
42023
42024exports.tabPanelTemplate = tabPanelTemplate;
42025
42026},{"@microsoft/fast-element":151}],329:[function(require,module,exports){
42027"use strict";
42028
42029Object.defineProperty(exports, "__esModule", {
42030  value: true
42031});
42032
42033var _tabTemplate = require("./tab.template.js");
42034
42035Object.keys(_tabTemplate).forEach(function (key) {
42036  if (key === "default" || key === "__esModule") return;
42037  if (key in exports && exports[key] === _tabTemplate[key]) return;
42038  Object.defineProperty(exports, key, {
42039    enumerable: true,
42040    get: function () {
42041      return _tabTemplate[key];
42042    }
42043  });
42044});
42045
42046var _tab = require("./tab.js");
42047
42048Object.keys(_tab).forEach(function (key) {
42049  if (key === "default" || key === "__esModule") return;
42050  if (key in exports && exports[key] === _tab[key]) return;
42051  Object.defineProperty(exports, key, {
42052    enumerable: true,
42053    get: function () {
42054      return _tab[key];
42055    }
42056  });
42057});
42058
42059},{"./tab.js":330,"./tab.template.js":331}],330:[function(require,module,exports){
42060"use strict";
42061
42062Object.defineProperty(exports, "__esModule", {
42063  value: true
42064});
42065exports.Tab = void 0;
42066
42067var _tslib = require("tslib");
42068
42069var _fastElement = require("@microsoft/fast-element");
42070
42071var _foundationElement = require("../foundation-element/foundation-element.js");
42072
42073/**
42074 * A Tab Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
42075 *
42076 * @slot - The default slot for the tab content
42077 *
42078 * @public
42079 */
42080class Tab extends _foundationElement.FoundationElement {}
42081
42082exports.Tab = Tab;
42083(0, _tslib.__decorate)([(0, _fastElement.attr)({
42084  mode: "boolean"
42085})], Tab.prototype, "disabled", void 0);
42086
42087},{"../foundation-element/foundation-element.js":251,"@microsoft/fast-element":151,"tslib":372}],331:[function(require,module,exports){
42088"use strict";
42089
42090Object.defineProperty(exports, "__esModule", {
42091  value: true
42092});
42093exports.tabTemplate = void 0;
42094
42095var _fastElement = require("@microsoft/fast-element");
42096
42097/**
42098 * The template for the {@link @microsoft/fast-foundation#Tab} component.
42099 * @public
42100 */
42101const tabTemplate = (context, definition) => (0, _fastElement.html)`
42102    <template slot="tab" role="tab" aria-disabled="${x => x.disabled}">
42103        <slot></slot>
42104    </template>
42105`;
42106
42107exports.tabTemplate = tabTemplate;
42108
42109},{"@microsoft/fast-element":151}],332:[function(require,module,exports){
42110"use strict";
42111
42112Object.defineProperty(exports, "__esModule", {
42113  value: true
42114});
42115
42116var _tabsTemplate = require("./tabs.template.js");
42117
42118Object.keys(_tabsTemplate).forEach(function (key) {

42119  if (key === "default" || key === "__esModule") return;
42120  if (key in exports && exports[key] === _tabsTemplate[key]) return;
42121  Object.defineProperty(exports, key, {
42122    enumerable: true,
42123    get: function () {
42124      return _tabsTemplate[key];
42125    }
42126  });
42127});
42128
42129var _tabs = require("./tabs.js");
42130
42131Object.keys(_tabs).forEach(function (key) {
42132  if (key === "default" || key === "__esModule") return;
42133  if (key in exports && exports[key] === _tabs[key]) return;
42134  Object.defineProperty(exports, key, {
42135    enumerable: true,
42136    get: function () {
42137      return _tabs[key];
42138    }
42139  });
42140});
42141
42142},{"./tabs.js":333,"./tabs.template.js":334}],333:[function(require,module,exports){
42143"use strict";
42144
42145Object.defineProperty(exports, "__esModule", {
42146  value: true
42147});
42148exports.TabsOrientation = exports.Tabs = void 0;
42149
42150var _tslib = require("tslib");
42151
42152var _fastElement = require("@microsoft/fast-element");
42153
42154var _fastWebUtilities = require("@microsoft/fast-web-utilities");
42155
42156var _startEnd = require("../patterns/start-end.js");
42157
42158var _applyMixins = require("../utilities/apply-mixins.js");
42159
42160var _foundationElement = require("../foundation-element/foundation-element.js");
42161
42162/**
42163 * The orientation of the {@link @microsoft/fast-foundation#(Tabs:class)} component
42164 * @public
42165 */
42166const TabsOrientation = {
42167  vertical: "vertical",
42168  horizontal: "horizontal"
42169};
42170/**
42171 * A Tabs Custom HTML Element.
42172 * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#tablist | ARIA tablist }.
42173 *
42174 * @slot start - Content which can be provided before the tablist element
42175 * @slot end - Content which can be provided after the tablist element
42176 * @slot tab - The slot for tabs
42177 * @slot tabpanel - The slot for tabpanels
42178 * @csspart tablist - The element wrapping for the tabs
42179 * @csspart tab - The tab slot
42180 * @csspart activeIndicator - The visual indicator
42181 * @csspart tabpanel - The tabpanel slot
42182 * @fires change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation
42183 *
42184 * @public
42185 */
42186
42187exports.TabsOrientation = TabsOrientation;
42188
42189class Tabs extends _foundationElement.FoundationElement {
42190  constructor() {
42191    super(...arguments);
42192    /**
42193     * The orientation
42194     * @public
42195     * @remarks
42196     * HTML Attribute: orientation
42197     */
42198
42199    this.orientation = TabsOrientation.horizontal;
42200    /**
42201     * Whether or not to show the active indicator
42202     * @public
42203     * @remarks
42204     * HTML Attribute: activeindicator
42205     */
42206
42207    this.activeindicator = true;
42208    /**
42209     * @internal
42210     */
42211
42212    this.showActiveIndicator = true;
42213    this.prevActiveTabIndex = 0;
42214    this.activeTabIndex = 0;
42215    this.ticking = false;
42216
42217    this.change = () => {
42218      this.$emit("change", this.activetab);
42219    };
42220
42221    this.isDisabledElement = el => {
42222      return el.getAttribute("aria-disabled") === "true";
42223    };
42224
42225    this.isHiddenElement = el => {
42226      return el.hasAttribute("hidden");
42227    };
42228
42229    this.isFocusableElement = el => {
42230      return !this.isDisabledElement(el) && !this.isHiddenElement(el);
42231    };
42232
42233    this.setTabs = () => {
42234      const gridHorizontalProperty = "gridColumn";
42235      const gridVerticalProperty = "gridRow";
42236      const gridProperty = this.isHorizontal() ? gridHorizontalProperty : gridVerticalProperty;
42237      this.activeTabIndex = this.getActiveIndex();
42238      this.showActiveIndicator = false;

vendor: 6,058 bytes, lines 42239-42449

42239      this.tabs.forEach((tab, index) => {
42240        if (tab.slot === "tab") {
42241          const isActiveTab = this.activeTabIndex === index && this.isFocusableElement(tab);
42242
42243          if (this.activeindicator && this.isFocusableElement(tab)) {
42244            this.showActiveIndicator = true;
42245          }
42246
42247          const tabId = this.tabIds[index];
42248          const tabpanelId = this.tabpanelIds[index];
42249          tab.setAttribute("id", tabId);
42250          tab.setAttribute("aria-selected", isActiveTab ? "true" : "false");
42251          tab.setAttribute("aria-controls", tabpanelId);
42252          tab.addEventListener("click", this.handleTabClick);
42253          tab.addEventListener("keydown", this.handleTabKeyDown);
42254          tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
42255
42256          if (isActiveTab) {
42257            this.activetab = tab;
42258            this.activeid = tabId;
42259          }
42260        } // If the original property isn't emptied out,
42261        // the next set will morph into a grid-area style setting that is not what we want
42262
42263
42264        tab.style[gridHorizontalProperty] = "";
42265        tab.style[gridVerticalProperty] = "";
42266        tab.style[gridProperty] = `${index + 1}`;
42267        !this.isHorizontal() ? tab.classList.add("vertical") : tab.classList.remove("vertical");
42268      });
42269    };
42270
42271    this.setTabPanels = () => {
42272      this.tabpanels.forEach((tabpanel, index) => {
42273        const tabId = this.tabIds[index];
42274        const tabpanelId = this.tabpanelIds[index];
42275        tabpanel.setAttribute("id", tabpanelId);
42276        tabpanel.setAttribute("aria-labelledby", tabId);
42277        this.activeTabIndex !== index ? tabpanel.setAttribute("hidden", "") : tabpanel.removeAttribute("hidden");
42278      });
42279    };
42280
42281    this.handleTabClick = event => {
42282      const selectedTab = event.currentTarget;
42283
42284      if (selectedTab.nodeType === 1 && this.isFocusableElement(selectedTab)) {
42285        this.prevActiveTabIndex = this.activeTabIndex;
42286        this.activeTabIndex = this.tabs.indexOf(selectedTab);
42287        this.setComponent();
42288      }
42289    };
42290
42291    this.handleTabKeyDown = event => {
42292      if (this.isHorizontal()) {
42293        switch (event.key) {
42294          case _fastWebUtilities.keyArrowLeft:
42295            event.preventDefault();
42296            this.adjustBackward(event);
42297            break;
42298
42299          case _fastWebUtilities.keyArrowRight:
42300            event.preventDefault();
42301            this.adjustForward(event);
42302            break;
42303        }
42304      } else {
42305        switch (event.key) {
42306          case _fastWebUtilities.keyArrowUp:
42307            event.preventDefault();
42308            this.adjustBackward(event);
42309            break;
42310
42311          case _fastWebUtilities.keyArrowDown:
42312            event.preventDefault();
42313            this.adjustForward(event);
42314            break;
42315        }
42316      }
42317
42318      switch (event.key) {
42319        case _fastWebUtilities.keyHome:
42320          event.preventDefault();
42321          this.adjust(-this.activeTabIndex);
42322          break;
42323
42324        case _fastWebUtilities.keyEnd:
42325          event.preventDefault();
42326          this.adjust(this.tabs.length - this.activeTabIndex - 1);
42327          break;
42328      }
42329    };
42330
42331    this.adjustForward = e => {
42332      const group = this.tabs;
42333      let index = 0;
42334      index = this.activetab ? group.indexOf(this.activetab) + 1 : 1;
42335
42336      if (index === group.length) {
42337        index = 0;
42338      }
42339
42340      while (index < group.length && group.length > 1) {
42341        if (this.isFocusableElement(group[index])) {
42342          this.moveToTabByIndex(group, index);
42343          break;
42344        } else if (this.activetab && index === group.indexOf(this.activetab)) {
42345          break;
42346        } else if (index + 1 >= group.length) {
42347          index = 0;
42348        } else {
42349          index += 1;
42350        }
42351      }
42352    };
42353
42354    this.adjustBackward = e => {
42355      const group = this.tabs;
42356      let index = 0;
42357      index = this.activetab ? group.indexOf(this.activetab) - 1 : 0;
42358      index = index < 0 ? group.length - 1 : index;
42359
42360      while (index >= 0 && group.length > 1) {
42361        if (this.isFocusableElement(group[index])) {
42362          this.moveToTabByIndex(group, index);
42363          break;
42364        } else if (index - 1 < 0) {
42365          index = group.length - 1;
42366        } else {
42367          index -= 1;
42368        }
42369      }
42370    };
42371
42372    this.moveToTabByIndex = (group, index) => {
42373      const tab = group[index];
42374      this.activetab = tab;
42375      this.prevActiveTabIndex = this.activeTabIndex;
42376      this.activeTabIndex = index;
42377      tab.focus();
42378      this.setComponent();
42379    };
42380  }
42381  /**
42382   * @internal
42383   */
42384
42385
42386  orientationChanged() {
42387    if (this.$fastController.isConnected) {
42388      this.setTabs();
42389      this.setTabPanels();
42390      this.handleActiveIndicatorPosition();
42391    }
42392  }
42393  /**
42394   * @internal
42395   */
42396
42397
42398  activeidChanged(oldValue, newValue) {
42399    if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
42400      this.prevActiveTabIndex = this.tabs.findIndex(item => item.id === oldValue);
42401      this.setTabs();
42402      this.setTabPanels();
42403      this.handleActiveIndicatorPosition();
42404    }
42405  }
42406  /**
42407   * @internal
42408   */
42409
42410
42411  tabsChanged() {
42412    if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
42413      this.tabIds = this.getTabIds();
42414      this.tabpanelIds = this.getTabPanelIds();
42415      this.setTabs();
42416      this.setTabPanels();
42417      this.handleActiveIndicatorPosition();
42418    }
42419  }
42420  /**
42421   * @internal
42422   */
42423
42424
42425  tabpanelsChanged() {
42426    if (this.$fastController.isConnected && this.tabpanels.length <= this.tabs.length) {
42427      this.tabIds = this.getTabIds();
42428      this.tabpanelIds = this.getTabPanelIds();
42429      this.setTabs();
42430      this.setTabPanels();
42431      this.handleActiveIndicatorPosition();
42432    }
42433  }
42434
42435  getActiveIndex() {
42436    const id = this.activeid;
42437
42438    if (id !== undefined) {
42439      return this.tabIds.indexOf(this.activeid) === -1 ? 0 : this.tabIds.indexOf(this.activeid);
42440    } else {
42441      return 0;
42442    }
42443  }
42444
42445  getTabIds() {
42446    return this.tabs.map(tab => {
42447      var _a;
42448
42449      return (_a = tab.getAttribute("id")) !== null && _a !== void 0 ? _a : `tab-${

42449(0, _fastWebUtilities.uniqueId)()}`;
42450    });
42451  }
42452
42453  getTabPanelIds() {
42454    return this.tabpanels.map(tabPanel => {
42455      var _a;
42456
42457      return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${(0, _fastWebUtilities.uniqueId)()}`;
42458    });
42459  }
42460
42461  setComponent() {
42462    if (this.activeTabIndex !== this.prevActiveTabIndex) {
42463      this.activeid = this.tabIds[this.activeTabIndex];
42464      this.focusTab();
42465      this.change();
42466    }
42467  }
42468
42469  isHorizontal() {
42470    return this.orientation === TabsOrientation.horizontal;
42471  }
42472
42473  handleActiveIndicatorPosition() {
42474    // Ignore if we click twice on the same tab
42475    if (this.showActiveIndicator && this.activeindicator && this.activeTabIndex !== this.prevActiveTabIndex) {
42476      if (this.ticking) {
42477        this.ticking = false;
42478      } else {
42479        this.ticking = true;
42480        this.animateActiveIndicator();
42481      }
42482    }
42483  }
42484
42485  animateActiveIndicator() {
42486    this.ticking = true;
42487    const gridProperty = this.isHorizontal() ? "gridColumn" : "gridRow";
42488    const translateProperty = this.isHorizontal() ? "translateX" : "translateY";
42489    const offsetProperty = this.isHorizontal() ? "offsetLeft" : "offsetTop";
42490    const prev = this.activeIndicatorRef[offsetProperty];
42491    this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
42492    const next = this.activeIndicatorRef[offsetProperty];
42493    this.activeIndicatorRef.style[gridProperty] = `${this.prevActiveTabIndex + 1}`;
42494    const dif = next - prev;
42495    this.activeIndicatorRef.style.transform = `${translateProperty}(${dif}px)`;
42496    this.activeIndicatorRef.classList.add("activeIndicatorTransition");
42497    this.activeIndicatorRef.addEventListener("transitionend", () => {
42498      this.ticking = false;
42499      this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
42500      this.activeIndicatorRef.style.transform = `${translateProperty}(0px)`;
42501      this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
42502    });
42503  }
42504  /**
42505   * The adjust method for FASTTabs
42506   * @public
42507   * @remarks
42508   * This method allows the active index to be adjusted by numerical increments
42509   */
42510
42511
42512  adjust(adjustment) {
42513    const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
42514    const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
42515    const nextTabIndex = (0, _fastWebUtilities.limit)(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment); // the index of the next focusable tab within the context of all available tabs
42516
42517    const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
42518
42519    if (nextIndex > -1) {
42520      this.moveToTabByIndex(this.tabs, nextIndex);
42521    }
42522  }
42523
42524  focusTab() {
42525    this.tabs[this.activeTabIndex].focus();
42526  }
42527  /**
42528   * @internal
42529   */
42530
42531
42532  connectedCallback() {
42533    super.connectedCallback();
42534    this.tabIds = this.getTabIds();
42535    this.tabpanelIds = this.getTabPanelIds();
42536    this.activeTabIndex = this.getActiveIndex();
42537  }
42538
42539}
42540
42541exports.Tabs = Tabs;
42542(0, _tslib.__decorate)([_fastElement.attr], Tabs.prototype, "orientation", void 0);
42543(0, _tslib.__decorate)([_fastElement.attr], Tabs.prototype, "activeid", void 0);
42544(0, _tslib.__decorate)([_fastElement.observable], Tabs.prototype, "tabs", void 0);
42545(0, _tslib.__decorate)([_fastElement.observable], Tabs.prototype, "tabpanels", void 0);
42546(0, _tslib.__decorate)([(0, _fastElement.attr)({
42547  mode: "boolean"
42548})], Tabs.prototype, "activeindicator", void 0);
42549(0, _tslib.__decorate)([_fastElement.observable], Tabs.prototype, "activeIndicatorRef", void 0);
42550(0, _tslib.__decorate)([_fastElement.observable], Tabs.prototype, "showActiveIndicator", void 0);
42551(0, _applyMixins.applyMixins)(Tabs, _startEnd.StartEnd);
42552
42553},{"../foundation-element/foundation-element.js":251,"../patterns/start-end.js":277,"../utilities/apply-mixins.js":358,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],334:[function(require,module,exports){
42554"use strict";
42555
42556Object.defineProperty(exports, "__esModule", {
42557  value: true
42558});
42559exports.tabsTemplate = void 0;
42560
42561var _fastElement = require("@microsoft/fast-element");
42562
42563var _startEnd = require("../patterns/start-end.js");
42564
42565/**
42566 * The template for the {@link @microsoft/fast-foundation#(Tabs:class)} component.
42567 * @public
42568 */
42569const tabsTemplate = (context, definition) => (0, _fastElement.html)`
42570    <template class="${x => x.orientation}">
42571        ${(0, _startEnd.startSlotTemplate)(context, definition)}
42572        <div class="tablist" part="tablist" role="tablist">
42573            <slot class="tab" name="tab" part="tab" ${(0, _fastElement.slotted)("tabs")}

42573></slot>
42574
42575            ${(0, _fastElement.when)(x => x.showActiveIndicator, (0, _fastElement.html)`
42576                    <div
42577                        ${(0, _fastElement.ref)("activeIndicatorRef")}
42578                        class="activeIndicator"
42579                        part="activeIndicator"
42580                    ></div>
42581                `)}
42582        </div>
42583        ${(0, _startEnd.endSlotTemplate)(context, definition)}
42584        <div class="tabpanel" part="tabpanel">
42585            <slot name="tabpanel" ${(0, _fastElement.slotted)("tabpanels")}></slot>
42586        </div>
42587    </template>
42588`;
42589
42590exports.tabsTemplate = tabsTemplate;
42591
42592},{"../patterns/start-end.js":277,"@microsoft/fast-element":151}],335:[function(require,module,exports){
42593"use strict";
42594
42595Object.defineProperty(exports, "__esModule", {
42596  value: true
42597});
42598
42599var _textAreaTemplate = require("./text-area.template.js");
42600
42601Object.keys(_textAreaTemplate).forEach(function (key) {
42602  if (key === "default" || key === "__esModule") return;
42603  if (key in exports && exports[key] === _textAreaTemplate[key]) return;
42604  Object.defineProperty(exports, key, {
42605    enumerable: true,
42606    get: function () {
42607      return _textAreaTemplate[key];
42608    }
42609  });
42610});
42611
42612var _textArea = require("./text-area.js");
42613
42614Object.keys(_textArea).forEach(function (key) {
42615  if (key === "default" || key === "__esModule") return;
42616  if (key in exports && exports[key] === _textArea[key]) return;
42617  Object.defineProperty(exports, key, {
42618    enumerable: true,
42619    get: function () {
42620      return _textArea[key];
42621    }
42622  });
42623});
42624
42625},{"./text-area.js":337,"./text-area.template.js":339}],336:[function(require,module,exports){
42626"use strict";
42627
42628Object.defineProperty(exports, "__esModule", {
42629  value: true
42630});
42631exports.FormAssociatedTextArea = void 0;
42632
42633var _formAssociated = require("../form-associated/form-associated.js");
42634
42635var _foundationElement = require("../foundation-element/foundation-element.js");
42636
42637class _TextArea extends _foundationElement.FoundationElement {}
42638/**
42639 * A form-associated base class for the {@link @microsoft/fast-foundation#(TextArea:class)} component.
42640 *
42641 * @internal
42642 */
42643
42644
42645class FormAssociatedTextArea extends (0, _formAssociated.FormAssociated)(_TextArea) {
42646  constructor() {
42647    super(...arguments);
42648    this.proxy = document.createElement("textarea");
42649  }
42650
42651}
42652
42653exports.FormAssociatedTextArea = FormAssociatedTextArea;
42654
42655},{"../form-associated/form-associated.js":249,"../foundation-element/foundation-element.js":251}],337:[function(require,module,exports){
42656"use strict";
42657
42658Object.defineProperty(exports, "__esModule", {
42659  value: true
42660});
42661exports.TextArea = void 0;
42662Object.defineProperty(exports, "TextAreaResize", {
42663  enumerable: true,
42664  get: function () {
42665    return _textAreaOptions.TextAreaResize;
42666  }
42667});
42668
42669var _tslib = require("tslib");
42670
42671var _fastElement = require("@microsoft/fast-element");
42672
42673var _textField = require("../text-field/text-field.js");
42674
42675var _applyMixins = require("../utilities/apply-mixins.js");
42676
42677var _textAreaFormAssociated = require("./text-area.form-associated.js");
42678
42679var _textAreaOptions = require("./text-area.options.js");
42680
42681/**
42682 * A Text Area Custom HTML Element.
42683 * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | <textarea> element }.
42684 *
42685 * @slot - The default slot for the label
42686 * @csspart label - The label
42687 * @csspart root - The element wrapping the control
42688 * @csspart control - The textarea element
42689 * @fires change - Emits a custom 'change' event when the textarea emits a change event
42690 *
42691 * @public
42692 */
42693class TextArea extends _textAreaFormAssociated.FormAssociatedTextArea {
42694  constructor() {
42695    super(...arguments);
42696    /**
42697     * The resize mode of the element.
42698     * @public
42699     * @remarks
42700     * HTML Attribute: resize
42701     */
42702
42703    this.resize = _textAreaOptions.TextAreaResize.none;
42704    /**
42705     * Sizes the element horizontally by a number of character columns.
42706     *
42707     * @public
42708     * @remarks
42709     * HTML Attribute: cols
42710     */
42711
42712    this.cols = 20;
42713    /**
42714     * @internal
42715     */
42716
42717    this.handleTextInput = () => {
42718      this.value = this.control.value;
42719    };
42720  }
42721
42722  readOnlyChanged() {
42723    if (this.proxy instanceof HTMLTextAreaElement) {
42724      this.proxy.readOnly = this.readOnly;
42725    }
42726  }
42727
42728  autofocusChanged() {
42729    if (this.proxy instanceof HTMLTextAreaElement) {
42730      this.proxy.autofocus = this.autofocus;
42731    }
42732  }
42733
42734  listChanged() {
42735    if (this.proxy instanceof HTMLTextAreaElement) {
42736      this.proxy.setAttribute("list", this.list);
42737    }
42738  }
42739
42740  maxlengthChanged() {
42741    if (this.proxy instanceof HTMLTextAreaElement) {
42742      this.proxy.maxLength = this.maxlength;
42743    }
42744  }
42745
42746  minlengthChanged() {
42747    if (this.proxy instanceof HTMLTextAreaElement) {
42748      this.proxy.minLength = this.minlength;
42749    }
42750  }
42751
42752  spellcheckChanged() {
42753    if (this.proxy instanceof HTMLTextAreaElement) {
42754      this.proxy.spellcheck = this.spellcheck;
42755    }
42756  }
42757  /**
42758   * Selects all the text in the text area
42759   *
42760   * @public
42761   */
42762
42763
42764  select() {
42765    this.control.select();
42766    /**
42767     * The select event does not permeate the shadow DOM boundary.
42768     * This fn effectively proxies the select event,
42769     * emitting a `select` event whenever the internal
42770     * control emits a `select` event
42771     */
42772
42773    this.$emit("select");
42774  }
42775  /**
42776   * Change event handler for inner control.
42777   * @remarks
42778   * "Change" events are not `composable` so they will not
42779   * permeate the shadow DOM boundary. This fn effectively proxies
42780   * the change event, emitting a `change` event whenever the internal
42781   * control emits a `change` event
42782   * @internal
42783   */
42784
42785
42786  handleChange() {
42787    this.$emit("change");
42788  }
42789  /** {@inheritDoc (FormAssociated:interface).validate} */
42790
42791
42792  validate() {
42793    super.validate(this.control);
42794  }
42795
42796}
42797
42798exports.TextArea = TextArea;
42799(0, _tslib.__decorate)([(0, _fastElement.attr)({
42800  mode: "boolean"
42801})], TextArea.prototype, "readOnly", void 0);
42802(0, _tslib.__decorate)([_fastElement.attr], TextArea.prototype, "resize", void 0);
42803(0, _tslib.__decorate)([(0, _fastElement.attr)({
42804  mode: "boolean"
42805})], TextArea.prototype, "autofocus", void 0);
42806(0, _tslib.__decorate)([(0, _fastElement.attr)({
42807  attribute: "form"
42808})], TextArea.prototype, "formId", void 0);
42809(0, _tslib.__decorate)([_fastElement.attr], TextArea.prototype, "list", void 0);
42810(0, _tslib.__decorate)([(0, _fastElement.attr)({
42811  converter: _fastElement.nullableNumberConverter
42812})], TextArea.prototype, "maxlength", void 0);
42813(0, _tslib.__decorate)([(0, _fastElement.attr)({
42814  converter: _fastElement.nullableNumberConverter
42815})], TextArea.prototype, "minlength", void 0);
42816(0, _tslib.__decorate)([_fastElement.attr], TextArea.prototype, "n

42816ame", void 0);
42817(0, _tslib.__decorate)([_fastElement.attr], TextArea.prototype, "placeholder", void 0);
42818(0, _tslib.__decorate)([(0, _fastElement.attr)({
42819  converter: _fastElement.nullableNumberConverter,
42820  mode: "fromView"
42821})], TextArea.prototype, "cols", void 0);
42822(0, _tslib.__decorate)([(0, _fastElement.attr)({
42823  converter: _fastElement.nullableNumberConverter,
42824  mode: "fromView"
42825})], TextArea.prototype, "rows", void 0);
42826(0, _tslib.__decorate)([(0, _fastElement.attr)({
42827  mode: "boolean"
42828})], TextArea.prototype, "spellcheck", void 0);
42829(0, _tslib.__decorate)([_fastElement.observable], TextArea.prototype, "defaultSlottedNodes", void 0);
42830(0, _applyMixins.applyMixins)(TextArea, _textField.DelegatesARIATextbox);
42831
42832},{"../text-field/text-field.js":342,"../utilities/apply-mixins.js":358,"./text-area.form-associated.js":336,"./text-area.options.js":338,"@microsoft/fast-element":151,"tslib":372}],338:[function(require,module,exports){
42833"use strict";
42834
42835Object.defineProperty(exports, "__esModule", {
42836  value: true
42837});
42838exports.TextAreaResize = void 0;
42839
42840/**
42841 * Resize mode for a TextArea
42842 * @public
42843 */
42844const TextAreaResize = {
42845  /**
42846   * No resize.
42847   */
42848  none: "none",
42849
42850  /**
42851   * Resize vertically and horizontally.
42852   */
42853  both: "both",
42854
42855  /**
42856   * Resize horizontally.
42857   */
42858  horizontal: "horizontal",
42859
42860  /**
42861   * Resize vertically.
42862   */
42863  vertical: "vertical"
42864};
42865exports.TextAreaResize = TextAreaResize;
42866
42867},{}],339:[function(require,module,exports){
42868"use strict";
42869
42870Object.defineProperty(exports, "__esModule", {
42871  value: true
42872});
42873exports.textAreaTemplate = void 0;
42874
42875var _fastElement = require("@microsoft/fast-element");
42876
42877var _textArea = require("./text-area.js");
42878
42879/**
42880 * The template for the {@link @microsoft/fast-foundation#(TextArea:class)} component.
42881 * @public
42882 */
42883const textAreaTemplate = (context, definition) => (0, _fastElement.html)`
42884    <template
42885        class="
42886            ${x => x.readOnly ? "readonly" : ""}
42887            ${x => x.resize !== _textArea.TextAreaResize.none ? `resize-${x.resize}` : ""}"
42888    >
42889        <label
42890            part="label"
42891            for="control"
42892            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"
42893        >
42894            <slot ${(0, _fastElement.slotted)("defaultSlottedNodes")}></slot>
42895        </label>
42896        <textarea
42897            part="control"
42898            class="control"
42899            id="control"
42900            ?autofocus="${x => x.autofocus}"
42901            cols="${x => x.cols}"
42902            ?disabled="${x => x.disabled}"
42903            form="${x => x.form}"
42904            list="${x => x.list}"
42905            maxlength="${x => x.maxlength}"
42906            minlength="${x => x.minlength}"
42907            name="${x => x.name}"
42908            placeholder="${x => x.placeholder}"
42909            ?readonly="${x => x.readOnly}"
42910            ?required="${x => x.required}"
42911            rows="${x => x.rows}"
42912            ?spellcheck="${x => x.spellcheck}"
42913            :value="${x => x.value}"
42914            aria-atomic="${x => x.ariaAtomic}"
42915            aria-busy="${x => x.ariaBusy}"
42916            aria-controls="${x => x.ariaControls}"
42917            aria-current="${x => x.ariaCurrent}"
42918            aria-describedby="${x => x.ariaDescribedby}"
42919            aria-details="${x => x.ariaDetails}"
42920            aria-disabled="${x => x.ariaDisabled}"
42921            aria-errormessage="${x => x.ariaErrormessage}"
42922            aria-flowto="${x => x.ariaFlowto}"
42923            aria-haspopup="${x => x.ariaHaspopup}"
42924            aria-hidden="${x => x.ariaHidden}"
42925            aria-invalid="${x => x.ariaInvalid}"
42926            aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
42927            aria-label="${x => x.ariaLabel}"
42928            aria-labelledby="${x => x.ariaLabelledby}"
42929            aria-live="${x => x.ariaLive}"
42930            aria-owns="${x => x.ariaOwns}"
42931            aria-relevant="${x => x.ariaRelevant}"
42932            aria-roledescription="${x => x.ariaRoledescription}"
42933            @input="${(x, c) => x.handleTextInput()}"
42934            @change="${x => x.handleChange()}"
42935            ${(0, _fastElement.ref)("control")}
42936        ></textarea>
42937    </template>
42938`;
42939
42940exports.textAreaTemplate = textAreaTemplate;
42941
42942},{"./text-area.js":337,"@microsoft/fast-element":151}],340:[function(require,module,exports){
42943"use strict";
42944
42945Object.defineProperty(exports, "__esModule", {
42946  value: true
42947});
42948
42949var _textFieldTemplate = require("./text-field.template.js");
42950
42951Object.keys(_textFieldTemplate).forEach(function (key) {

42952  if (key === "default" || key === "__esModule") return;
42953  if (key in exports && exports[key] === _textFieldTemplate[key]) return;
42954  Object.defineProperty(exports, key, {
42955    enumerable: true,
42956    get: function () {
42957      return _textFieldTemplate[key];
42958    }
42959  });
42960});
42961
42962var _textField = require("./text-field.js");
42963
42964Object.keys(_textField).forEach(function (key) {
42965  if (key === "default" || key === "__esModule") return;
42966  if (key in exports && exports[key] === _textField[key]) return;
42967  Object.defineProperty(exports, key, {
42968    enumerable: true,
42969    get: function () {
42970      return _textField[key];
42971    }
42972  });
42973});
42974
42975},{"./text-field.js":342,"./text-field.template.js":344}],341:[function(require,module,exports){
42976"use strict";
42977
42978Object.defineProperty(exports, "__esModule", {
42979  value: true
42980});
42981exports.FormAssociatedTextField = void 0;
42982
42983var _formAssociated = require("../form-associated/form-associated.js");
42984
42985var _foundationElement = require("../foundation-element/foundation-element.js");
42986
42987class _TextField extends _foundationElement.FoundationElement {}
42988/**
42989 * A form-associated base class for the {@link @microsoft/fast-foundation#(TextField:class)} component.
42990 *
42991 * @internal
42992 */
42993
42994
42995class FormAssociatedTextField extends (0, _formAssociated.FormAssociated)(_TextField) {
42996  constructor() {
42997    super(...arguments);
42998    this.proxy = document.createElement("input");
42999  }
43000
43001}
43002
43003exports.FormAssociatedTextField = FormAssociatedTextField;
43004
43005},{"../form-associated/form-associated.js":249,"../foundation-element/foundation-element.js":251}],342:[function(require,module,exports){
43006"use strict";
43007
43008Object.defineProperty(exports, "__esModule", {
43009  value: true
43010});
43011exports.TextField = exports.DelegatesARIATextbox = void 0;
43012Object.defineProperty(exports, "TextFieldType", {
43013  enumerable: true,
43014  get: function () {
43015    return _textFieldOptions.TextFieldType;
43016  }
43017});
43018
43019var _tslib = require("tslib");
43020
43021var _fastElement = require("@microsoft/fast-element");
43022
43023var _index = require("../patterns/index.js");
43024
43025var _applyMixins = require("../utilities/apply-mixins.js");
43026
43027var _textFieldFormAssociated = require("./text-field.form-associated.js");
43028
43029var _textFieldOptions = require("./text-field.options.js");
43030
43031/**
43032 * A Text Field Custom HTML Element.
43033 * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text | <input type="text" /> element }.
43034 *
43035 * @slot start - Content which can be provided before the number field input
43036 * @slot end - Content which can be provided after the number field input
43037 * @slot - The default slot for the label
43038 * @csspart label - The label
43039 * @csspart root - The element wrapping the control, including start and end slots
43040 * @csspart control - The text field element
43041 * @fires change - Fires a custom 'change' event when the value has changed
43042 *
43043 * @public
43044 */
43045class TextField extends _textFieldFormAssociated.FormAssociatedTextField {
43046  constructor() {
43047    super(...arguments);
43048    /**
43049     * Allows setting a type or mode of text.
43050     * @public
43051     * @remarks
43052     * HTML Attribute: type
43053     */
43054
43055    this.type = _textFieldOptions.TextFieldType.text;
43056  }
43057
43058  readOnlyChanged() {
43059    if (this.proxy instanceof HTMLInputElement) {
43060      this.proxy.readOnly = this.readOnly;
43061      this.validate();
43062    }
43063  }
43064
43065  autofocusChanged() {
43066    if (this.proxy instanceof HTMLInputElement) {
43067      this.proxy.autofocus = this.autofocus;
43068      this.validate();
43069    }
43070  }
43071
43072  placeholderChanged() {
43073    if (this.proxy instanceof HTMLInputElement) {
43074      this.proxy.placeholder = this.placeholder;
43075    }
43076  }
43077
43078  typeChanged() {
43079    if (this.proxy instanceof HTMLInputElement) {
43080      this.proxy.type = this.type;
43081      this.validate();
43082    }
43083  }
43084
43085  listChanged() {
43086    if (this.proxy instanceof HTMLInputElement) {
43087      this.proxy.setAttribute("list", this.list);
43088      this.validate();
43089    }
43090  }
43091
43092  maxlengthChanged() {
43093    if (this.proxy instanceof HTMLInputElement) {
43094      this.proxy.maxLength = this.maxlength;
43095      this.validate();
43096    }
43097  }
43098
43099  minlengthChanged() {
43100    if (this.proxy instanceof HTMLInputElement) {
43101      this.proxy.minLength = this.minlength;
43102      this.validate();
43103    }
43104  }
43105
43106  patternChanged() {
43107    if (this.proxy instanceof HTMLInputElement) {
43108      this.proxy.pattern = this.pattern;
43109      this.validate();
43110    }
43111  }
43112
43113  sizeChanged() {
43114    if (this.proxy instanceof HTMLInputElement) {
43115      this.proxy.size = this.size;
43116    }
43117  }
43118
43119  spellcheckChanged() {
43120    if (this.proxy instanceof HTMLInputElement) {
43121      this.proxy.spellcheck = this.spellcheck;
43122    }
43123  }
43124  /**
43125   * @internal
43126   */
43127
43128
43129  connectedCallback() {
43130    super.connectedCallback();
43131    this.proxy.setAttribute("type", this.type);
43132    this.validate();
43133
43134    if (this.autofocus) {
43135      _fastElement.DOM.queueUpdate(() => {
43136        this.focus();
43137      });
43138    }
43139  }
43140  /**
43141   * Selects all the text in the text field
43142   *
43143   * @public
43144   */
43145
43146
43147  select() {
43148    this.control.select();
43149    /**
43150     * The select event does not permeate the shadow DOM boundary.
43151     * This fn effectively proxies the select event,
43152     * emitting a `select` event whenever the internal
43153     * control emits a `select` event
43154     */
43155
43156    this.$emit("select");
43157  }
43158  /**

43159   * Handles the internal control's `input` event
43160   * @internal
43161   */
43162
43163
43164  handleTextInput() {
43165    this.value = this.control.value;
43166  }
43167  /**
43168   * Change event handler for inner control.
43169   * @remarks
43170   * "Change" events are not `composable` so they will not
43171   * permeate the shadow DOM boundary. This fn effectively proxies
43172   * the change event, emitting a `change` event whenever the internal
43173   * control emits a `change` event
43174   * @internal
43175   */
43176
43177
43178  handleChange() {
43179    this.$emit("change");
43180  }
43181  /** {@inheritDoc (FormAssociated:interface).validate} */
43182
43183
43184  validate() {
43185    super.validate(this.control);
43186  }
43187
43188}
43189
43190exports.TextField = TextField;
43191(0, _tslib.__decorate)([(0, _fastElement.attr)({
43192  attribute: "readonly",
43193  mode: "boolean"
43194})], TextField.prototype, "readOnly", void 0);
43195(0, _tslib.__decorate)([(0, _fastElement.attr)({
43196  mode: "boolean"
43197})], TextField.prototype, "autofocus", void 0);
43198(0, _tslib.__decorate)([_fastElement.attr], TextField.prototype, "placeholder", void 0);
43199(0, _tslib.__decorate)([_fastElement.attr], TextField.prototype, "type", void 0);
43200(0, _tslib.__decorate)([_fastElement.attr], TextField.prototype, "list", void 0);
43201(0, _tslib.__decorate)([(0, _fastElement.attr)({
43202  converter: _fastElement.nullableNumberConverter
43203})], TextField.prototype, "maxlength", void 0);
43204(0, _tslib.__decorate)([(0, _fastElement.attr)({
43205  converter: _fastElement.nullableNumberConverter
43206})], TextField.prototype, "minlength", void 0);
43207(0, _tslib.__decorate)([_fastElement.attr], TextField.prototype, "pattern", void 0);
43208(0, _tslib.__decorate)([(0, _fastElement.attr)({
43209  converter: _fastElement.nullableNumberConverter
43210})], TextField.prototype, "size", void 0);
43211(0, _tslib.__decorate)([(0, _fastElement.attr)({
43212  mode: "boolean"
43213})], TextField.prototype, "spellcheck", void 0);
43214(0, _tslib.__decorate)([_fastElement.observable], TextField.prototype, "defaultSlottedNodes", void 0);
43215/**
43216 * Includes ARIA states and properties relating to the ARIA textbox role
43217 *
43218 * @public
43219 */
43220
43221class DelegatesARIATextbox {}
43222
43223exports.DelegatesARIATextbox = DelegatesARIATextbox;
43224(0, _applyMixins.applyMixins)(DelegatesARIATextbox, _index.ARIAGlobalStatesAndProperties);
43225(0, _applyMixins.applyMixins)(TextField, _index.StartEnd, DelegatesARIATextbox);
43226
43227},{"../patterns/index.js":276,"../utilities/apply-mixins.js":358,"./text-field.form-associated.js":341,"./text-field.options.js":343,"@microsoft/fast-element":151,"tslib":372}],343:[function(require,module,exports){
43228"use strict";
43229
43230Object.defineProperty(exports, "__esModule", {
43231  value: true
43232});
43233exports.TextFieldType = void 0;
43234
43235/**
43236 * Text field sub-types
43237 * @public
43238 */
43239const TextFieldType = {
43240  /**
43241   * An email TextField
43242   */
43243  email: "email",
43244
43245  /**
43246   * A password TextField
43247   */
43248  password: "password",
43249
43250  /**
43251   * A telephone TextField
43252   */
43253  tel: "tel",
43254
43255  /**
43256   * A text TextField
43257   */
43258  text: "text",
43259
43260  /**
43261   * A URL TextField
43262   */
43263  url: "url"
43264};
43265exports.TextFieldType = TextFieldType;
43266
43267},{}],344:[function(require,module,exports){
43268"use strict";
43269
43270Object.defineProperty(exports, "__esModule", {
43271  value: true
43272});
43273exports.textFieldTemplate = void 0;
43274
43275var _fastElement = require("@microsoft/fast-element");
43276
43277var _startEnd = require("../patterns/start-end.js");
43278
43279var _whitespaceFilter = require("../utilities/whitespace-filter.js");
43280
43281/**
43282 * The template for the {@link @microsoft/fast-foundation#(TextField:class)} component.
43283 * @public
43284 */
43285const textFieldTemplate = (context, definition) => (0, _fastElement.html)`
43286    <template
43287        class="
43288            ${x => x.readOnly ? "readonly" : ""}
43289        "
43290    >
43291        <label
43292            part="label"
43293            for="control"
43294            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"
43295        >
43296            <slot
43297                ${(0, _fastElement.slotted)({
43298  property: "defaultSlottedNodes",
43299  filter: _whitespaceFilter.whitespaceFilter
43300})}
43301            ></slot>
43302        </label>
43303        <div class="root" part="root">
43304            ${(0, _startEnd.startSlotTemplate)(context, definition)}
43305            <input
43306                class="control"
43307                part="control"
43308                id="control"

43309                @input="${x => x.handleTextInput()}"
43310                @change="${x => x.handleChange()}"
43311                ?autofocus="${x => x.autofocus}"
43312                ?disabled="${x => x.disabled}"
43313                list="${x => x.list}"
43314                maxlength="${x => x.maxlength}"
43315                minlength="${x => x.minlength}"
43316                pattern="${x => x.pattern}"
43317                placeholder="${x => x.placeholder}"
43318                ?readonly="${x => x.readOnly}"
43319                ?required="${x => x.required}"
43320                size="${x => x.size}"
43321                ?spellcheck="${x => x.spellcheck}"
43322                :value="${x => x.value}"
43323                type="${x => x.type}"
43324                aria-atomic="${x => x.ariaAtomic}"
43325                aria-busy="${x => x.ariaBusy}"
43326                aria-controls="${x => x.ariaControls}"
43327                aria-current="${x => x.ariaCurrent}"
43328                aria-describedby="${x => x.ariaDescribedby}"
43329                aria-details="${x => x.ariaDetails}"
43330                aria-disabled="${x => x.ariaDisabled}"
43331                aria-errormessage="${x => x.ariaErrormessage}"
43332                aria-flowto="${x => x.ariaFlowto}"
43333                aria-haspopup="${x => x.ariaHaspopup}"
43334                aria-hidden="${x => x.ariaHidden}"
43335                aria-invalid="${x => x.ariaInvalid}"
43336                aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
43337                aria-label="${x => x.ariaLabel}"
43338                aria-labelledby="${x => x.ariaLabelledby}"
43339                aria-live="${x => x.ariaLive}"
43340                aria-owns="${x => x.ariaOwns}"
43341                aria-relevant="${x => x.ariaRelevant}"
43342                aria-roledescription="${x => x.ariaRoledescription}"
43343                ${(0, _fastElement.ref)("control")}
43344            />
43345            ${(0, _startEnd.endSlotTemplate)(context, definition)}
43346        </div>
43347    </template>
43348`;
43349
43350exports.textFieldTemplate = textFieldTemplate;
43351
43352},{"../patterns/start-end.js":277,"../utilities/whitespace-filter.js":371,"@microsoft/fast-element":151}],345:[function(require,module,exports){
43353"use strict";
43354
43355Object.defineProperty(exports, "__esModule", {
43356  value: true
43357});
43358
43359var _toolbarTemplate = require("./toolbar.template.js");
43360
43361Object.keys(_toolbarTemplate).forEach(function (key) {
43362  if (key === "default" || key === "__esModule") return;
43363  if (key in exports && exports[key] === _toolbarTemplate[key]) return;
43364  Object.defineProperty(exports, key, {
43365    enumerable: true,
43366    get: function () {
43367      return _toolbarTemplate[key];
43368    }
43369  });
43370});
43371
43372var _toolbar = require("./toolbar.js");
43373
43374Object.keys(_toolbar).forEach(function (key) {
43375  if (key === "default" || key === "__esModule") return;
43376  if (key in exports && exports[key] === _toolbar[key]) return;
43377  Object.defineProperty(exports, key, {
43378    enumerable: true,
43379    get: function () {
43380      return _toolbar[key];
43381    }
43382  });
43383});
43384
43385},{"./toolbar.js":346,"./toolbar.template.js":347}],346:[function(require,module,exports){
43386"use strict";
43387
43388Object.defineProperty(exports, "__esModule", {
43389  value: true
43390});
43391exports.Toolbar = exports.DelegatesARIAToolbar = void 0;
43392
43393var _tslib = require("tslib");
43394
43395var _fastElement = require("@microsoft/fast-element");
43396
43397var _fastWebUtilities = require("@microsoft/fast-web-utilities");
43398
43399var _tabbable = require("tabbable");
43400
43401var _foundationElement = require("../foundation-element/foundation-element.js");
43402
43403var _ariaGlobal = require("../patterns/aria-global.js");
43404
43405var _startEnd = require("../patterns/start-end.js");
43406
43407var _applyMixins = require("../utilities/apply-mixins.js");
43408
43409var _direction = require("../utilities/direction.js");
43410
43411var _rootActiveElement = require("../utilities/root-active-element.js");
43412
43413/**
43414 * A map for directionality derived from keyboard input strings,
43415 * visual orientation, and text direction.
43416 *
43417 * @internal
43418 */
43419const ToolbarArrowKeyMap = Object.freeze({
43420  [_fastWebUtilities.ArrowKeys.ArrowUp]: {
43421    [_fastWebUtilities.Orientation.vertical]: -1
43422  },
43423  [_fastWebUtilities.ArrowKeys.ArrowDown]: {
43424    [_fastWebUtilities.Orientation.vertical]: 1
43425  },
43426  [_fastWebUtilities.ArrowKeys.ArrowLeft]: {
43427    [_fastWebUtilities.Orientation.horizontal]: {
43428      [_fastWebUtilities.Direction.ltr]: -1,
43429      [_fastWebUtilities.Direction.rtl]: 1
43430    }
43431  },
43432  [_fastWebUtilities.ArrowKeys.ArrowRight]: {
43433    [_fastWebUtilities.Orientation.horizontal]: {
43434      [_fastWebUtilities.Direction.ltr]: 1,
43435      [_fastWebUtilities.Direction.rtl]: -1
43436    }
43437  }
43438});
43439/**
43440 * A Toolbar Custom HTML Element.
43441 * Implements the {@link https://w3c.github.io/aria-practices/#Toolbar|ARIA Toolbar}.
43442 *
43443 * @slot start - Content which can be provided before the slotted items
43444 * @slot end - Content which can be provided after the slotted items
43445 * @slot - The default slot for slotted items
43446 * @slot label - The toolbar label
43447 * @csspart positioning-region - The element containing the items, start and end slots
43448 *
43449 * @public
43450 */
43451
43452class Toolbar extends _foundationElement.FoundationElement {
43453  constructor() {
43454    super(...arguments);
43455    /**
43456     * The internal index of the currently focused element.
43457     *
43458     * @internal
43459     */
43460
43461    this._activeIndex = 0;
43462    /**
43463     * The text direction of the toolbar.
43464     *
43465     * @internal
43466     */
43467
43468    this.direction = _fastWebUtilities.Direction.ltr;
43469    /**
43470     * The orientation of the toolbar.
43471     *
43472     * @public
43473     * @remarks
43474     * HTML Attribute: `orientation`
43475     */
43476
43477    this.orientation = _fastWebUtilities.Orientation.horizontal;
43478  }
43479  /**
43480   * The index of the currently focused element, clamped between 0 and the last element.
43481   *
43482   * @internal
43483   */
43484
43485
43486  get activeIndex() {
43487    _fastElement.Observable.track(this, "activeIndex");
43488
43489    return this._activeIndex;
43490  }
43491
43492  set activeIndex(value) {
43493    if (this.$fastController.isConnected) {
43494      this._activeIndex = (0, _fastWebUtilities.limit)(0, this.focusableElements.length - 1, value);
43495
43496      _fastElement.Observable.notify(this, "activeIndex");
43497    }
43498  }
43499
43500  slottedItemsChanged() {
43501    if (this.$fastController.isConnected) {
43502      this.reduceFocusableElements();
43503    }
43504  }
43505  /**
43506   * Set the activeIndex when a focusable element in the toolbar is clicked.
43507   *
43508   * @internal
43509   */
43510
43511
43512  mouseDownHandler(e) {
43513    var _a;
43514
43515    const activeIndex = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a.findIndex(x => x.contains(e.target));
43516
43517    if (activeIndex > -1 && this.activeIndex !== activeIndex) {
43518      this.setFocusedElement(activeIndex);
43519    }
43520
43521    return true;
43522  }
43523
43524  childItemsChanged(prev, next) {
43525    if (this.$fastController.isConnected) {
43526      this.reduceFocusableElements();
43527    }
43528  }
43529  /**
43530   * @internal
43531   */
43532
43533
43534  connectedCallback() {
43535    super.connectedCallback();
43536    this.direction = (0, _direction.getDirection)(this);
43537  }
43538  /**
43539   * When the toolbar receives focus, set the currently active element as focused.
43540   *
43541   * @internal
43542   */
43543
43544
43545  focusinHandler(e) {
43546    const relatedTarget = e.relatedTarget;
43547
43548    if (!relatedTarget || this.contains(relatedTarget)) {
43549      return;
43550    }
43551
43552    this.setFocusedElement();
43553  }
43554  /**
43555   * Determines a value that can be used to iterate a list with the arrow keys.
43556   *
43557   * @param this - An element with an orientation and direction
43558   * @param key - The event key value
43559   * @internal
43560   */
43561
43562
43563  getDirectionalIncrementer(key) {
43564    var _a, _b, _c, _d, _e;
43565
43566    return (_e = (_c = (_b = (_a = ToolbarArrowKeyMap[key]) === null || _a === void 0 ? void 0 : _a[this.orientation]) === null || _b === void 0 ? void 0 : _b[this.direction]) !== null && _c !== void 0 ? _c : (_d = ToolbarArrowKeyMap[key]) === null || _d === void 0 ? void 0 : _d[this.orientation]) !== null && _e !== void 0 ? _e : 0;
43567  }
43568  /**
43569   * Handle keyboard events for the toolbar.
43570   *
43571   * @internal
43572   */
43573
43574
43575  keydownHandler(e) {

43576    const key = e.key;
43577
43578    if (!(key in _fastWebUtilities.ArrowKeys) || e.defaultPrevented || e.shiftKey) {
43579      return true;
43580    }
43581
43582    const incrementer = this.getDirectionalIncrementer(key);
43583
43584    if (!incrementer) {
43585      return !e.target.closest("[role=radiogroup]");
43586    }
43587
43588    const nextIndex = this.activeIndex + incrementer;
43589
43590    if (this.focusableElements[nextIndex]) {
43591      e.preventDefault();
43592    }
43593
43594    this.setFocusedElement(nextIndex);
43595    return true;
43596  }
43597  /**
43598   * get all the slotted elements
43599   * @internal
43600   */
43601
43602
43603  get allSlottedItems() {
43604    return [...this.start.assignedElements(), ...this.slottedItems, ...this.end.assignedElements()];
43605  }
43606  /**
43607   * Prepare the slotted elements which can be focusable.
43608   *
43609   * @internal
43610   */
43611
43612
43613  reduceFocusableElements() {
43614    var _a;
43615
43616    const previousFocusedElement = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a[this.activeIndex];
43617    this.focusableElements = this.allSlottedItems.reduce(Toolbar.reduceFocusableItems, []); // If the previously active item is still focusable, adjust the active index to the
43618    // index of that item.
43619
43620    const adjustedActiveIndex = this.focusableElements.indexOf(previousFocusedElement);
43621    this.activeIndex = Math.max(0, adjustedActiveIndex);
43622    this.setFocusableElements();
43623  }
43624  /**
43625   * Set the activeIndex and focus the corresponding control.
43626   *
43627   * @param activeIndex - The new index to set
43628   * @internal
43629   */
43630
43631
43632  setFocusedElement(activeIndex = this.activeIndex) {
43633    this.activeIndex = activeIndex;
43634    this.setFocusableElements();
43635
43636    if (this.focusableElements[this.activeIndex] && // Don't focus the toolbar element if some event handlers moved
43637    // the focus on another element in the page.
43638    this.contains((0, _rootActiveElement.getRootActiveElement)(this))) {
43639      this.focusableElements[this.activeIndex].focus();
43640    }
43641  }
43642  /**
43643   * Reduce a collection to only its focusable elements.
43644   *
43645   * @param elements - Collection of elements to reduce
43646   * @param element - The current element
43647   *
43648   * @internal
43649   */
43650
43651
43652  static reduceFocusableItems(elements, element) {
43653    var _a, _b, _c, _d;
43654
43655    const isRoleRadio = element.getAttribute("role") === "radio";
43656    const isFocusableFastElement = (_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus;
43657    const hasFocusableShadow = Array.from((_d = (_c = element.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll("*")) !== null && _d !== void 0 ? _d : []).some(x => (0, _tabbable.isFocusable)(x));
43658
43659    if (!element.hasAttribute("disabled") && !element.hasAttribute("hidden") && ((0, _tabbable.isFocusable)(element) || isRoleRadio || isFocusableFastElement || hasFocusableShadow)) {
43660      elements.push(element);
43661      return elements;
43662    }
43663
43664    if (element.childElementCount) {
43665      return elements.concat(Array.from(element.children).reduce(Toolbar.reduceFocusableItems, []));
43666    }
43667
43668    return elements;
43669  }
43670  /**
43671   * @internal
43672   */
43673
43674
43675  setFocusableElements() {
43676    if (this.$fastController.isConnected && this.focusableElements.length > 0) {
43677      this.focusableElements.forEach((element, index) => {
43678        element.tabIndex = this.activeIndex === index ? 0 : -1;
43679      });
43680    }
43681  }
43682
43683}
43684
43685exports.Toolbar = Toolbar;
43686(0, _tslib.__decorate)([_fastElement.observable], Toolbar.prototype, "direction", void 0);
43687(0, _tslib.__decorate)([_fastElement.attr], Toolbar.prototype, "orientation", void 0);
43688(0, _tslib.__decorate)([_fastElement.observable], Toolbar.prototype, "slottedItems", void 0);
43689(0, _tslib.__decorate)([_fastElement.observable], Toolbar.prototype, "slottedLabel", void 0);
43690(0, _tslib.__decorate)([_fastElement.observable], Toolbar.prototype, "childItems", void 0);
43691/**
43692 * Includes ARIA states and properties relating to the ARIA toolbar role
43693 *
43694 * @public
43695 */
43696
43697class DelegatesARIAToolbar {}
43698
43699exports.DelegatesARIAToolbar = DelegatesARIAToolbar;
43700(0, _tslib.__decorate)([(0, _fastElement.attr)({
43701  attribute: "aria-labelledby"
43702})], DelegatesARIAToolbar.prototype, "ariaLabelledby", void 0);
43703(0, _tslib.__decorate)([(0, _fastElement.attr)({
43704  attribute: "aria-label"
43705})], DelegatesARIAToolbar.prototype, "ariaLabel", void 0);
43706(0, _applyMixins.applyMixins)(DelegatesARIAToolbar, _ariaGlobal.ARIAGlobalStatesAndProperties);
43707(0, _applyMixins.applyMixins)(Toolbar, _startEnd.StartEnd, DelegatesARIAToolbar);
43708
43709}

43709,{"../foundation-element/foundation-element.js":251,"../patterns/aria-global.js":275,"../patterns/start-end.js":277,"../utilities/apply-mixins.js":358,"../utilities/direction.js":361,"../utilities/root-active-element.js":366,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tabbable":465,"tslib":372}],347:[function(require,module,exports){
43710"use strict";
43711
43712Object.defineProperty(exports, "__esModule", {
43713  value: true
43714});
43715exports.toolbarTemplate = void 0;
43716
43717var _fastElement = require("@microsoft/fast-element");
43718
43719var _startEnd = require("../patterns/start-end.js");
43720
43721/**
43722 * The template for the {@link @microsoft/fast-foundation#(Toolbar:class)} component.
43723 *
43724 * @public
43725 */
43726const toolbarTemplate = (context, definition) => (0, _fastElement.html)`
43727    <template
43728        aria-label="${x => x.ariaLabel}"
43729        aria-labelledby="${x => x.ariaLabelledby}"
43730        aria-orientation="${x => x.orientation}"
43731        orientation="${x => x.orientation}"
43732        role="toolbar"
43733        @mousedown="${(x, c) => x.mouseDownHandler(c.event)}"
43734        @focusin="${(x, c) => x.focusinHandler(c.event)}"
43735        @keydown="${(x, c) => x.keydownHandler(c.event)}"
43736        ${(0, _fastElement.children)({
43737  property: "childItems",
43738  attributeFilter: ["disabled", "hidden"],
43739  filter: (0, _fastElement.elements)(),
43740  subtree: true
43741})}
43742    >
43743        <slot name="label"></slot>
43744        <div class="positioning-region" part="positioning-region">
43745            ${(0, _startEnd.startSlotTemplate)(context, definition)}
43746            <slot
43747                ${(0, _fastElement.slotted)({
43748  filter: (0, _fastElement.elements)(),
43749  property: "slottedItems"
43750})}
43751            ></slot>
43752            ${(0, _startEnd.endSlotTemplate)(context, definition)}
43753        </div>
43754    </template>
43755`;
43756
43757exports.toolbarTemplate = toolbarTemplate;
43758
43759},{"../patterns/start-end.js":277,"@microsoft/fast-element":151}],348:[function(require,module,exports){
43760"use strict";
43761
43762Object.defineProperty(exports, "__esModule", {
43763  value: true
43764});
43765
43766var _tooltipTemplate = require("./tooltip.template.js");
43767
43768Object.keys(_tooltipTemplate).forEach(function (key) {
43769  if (key === "default" || key === "__esModule") return;
43770  if (key in exports && exports[key] === _tooltipTemplate[key]) return;
43771  Object.defineProperty(exports, key, {
43772    enumerable: true,
43773    get: function () {
43774      return _tooltipTemplate[key];
43775    }
43776  });
43777});
43778
43779var _tooltip = require("./tooltip.js");
43780
43781Object.keys(_tooltip).forEach(function (key) {
43782  if (key === "default" || key === "__esModule") return;
43783  if (key in exports && exports[key] === _tooltip[key]) return;
43784  Object.defineProperty(exports, key, {
43785    enumerable: true,
43786    get: function () {
43787      return _tooltip[key];
43788    }
43789  });
43790});
43791
43792},{"./tooltip.js":349,"./tooltip.template.js":351}],349:[function(require,module,exports){
43793"use strict";
43794
43795Object.defineProperty(exports, "__esModule", {
43796  value: true
43797});
43798exports.Tooltip = void 0;
43799Object.defineProperty(exports, "TooltipPosition", {
43800  enumerable: true,
43801  get: function () {
43802    return _tooltipOptions.TooltipPosition;
43803  }
43804});
43805
43806var _tslib = require("tslib");
43807
43808var _fastElement = require("@microsoft/fast-element");
43809
43810var _fastWebUtilities = require("@microsoft/fast-web-utilities");
43811
43812var _direction = require("../utilities/direction.js");
43813
43814var _foundationElement = require("../foundation-element/foundation-element.js");
43815
43816var _tooltipOptions = require("./tooltip.options.js");
43817
43818/**
43819 * An Tooltip Custom HTML Element.
43820 *
43821 * @slot - The default slot for the tooltip content
43822 * @csspart tooltip - The tooltip element
43823 * @fires dismiss - Fires a custom 'dismiss' event when the tooltip is visible and escape key is pressed
43824 *
43825 * @public
43826 */
43827class Tooltip extends _foundationElement.FoundationElement {
43828  constructor() {
43829    super(...arguments);
43830    /**
43831     * The id of the element the tooltip is anchored to
43832     *
43833     * @defaultValue - undefined
43834     * @public
43835     * HTML Attribute: anchor
43836     */
43837
43838    this.anchor = "";
43839    /**
43840     * The delay in milliseconds before a tooltip is shown after a hover event
43841     *
43842     * @defaultValue - 300
43843     * @public
43844     * HTML Attribute: delay
43845     */
43846
43847    this.delay = 300;
43848    /**
43849     * Controls when the tooltip updates its position, default is 'anchor' which only updates when

43850     * the anchor is resized.  'auto' will update on scroll/resize events.
43851     * Corresponds to anchored-region auto-update-mode.
43852     * @public
43853     * @remarks
43854     * HTML Attribute: auto-update-mode
43855     */
43856
43857    this.autoUpdateMode = "anchor";
43858    /**
43859     * the html element currently being used as anchor.
43860     * Setting this directly overrides the anchor attribute.
43861     *
43862     * @public
43863     */
43864
43865    this.anchorElement = null;
43866    /**
43867     * The current viewport element instance
43868     *
43869     * @internal
43870     */
43871
43872    this.viewportElement = null;
43873    /**
43874     * @internal
43875     * @defaultValue "dynamic"
43876     */
43877
43878    this.verticalPositioningMode = "dynamic";
43879    /**
43880     * @internal
43881     * @defaultValue "dynamic"
43882     */
43883
43884    this.horizontalPositioningMode = "dynamic";
43885    /**
43886     * @internal
43887     */
43888
43889    this.horizontalInset = "false";
43890    /**
43891     * @internal
43892     */
43893
43894    this.verticalInset = "false";
43895    /**
43896     * @internal
43897     */
43898
43899    this.horizontalScaling = "content";
43900    /**
43901     * @internal
43902     */
43903
43904    this.verticalScaling = "content";
43905    /**
43906     * @internal
43907     */
43908
43909    this.verticalDefaultPosition = undefined;
43910    /**
43911     * @internal
43912     */
43913
43914    this.horizontalDefaultPosition = undefined;
43915    /**
43916     * @internal
43917     */
43918
43919    this.tooltipVisible = false;
43920    /**
43921     * Track current direction to pass to the anchored region
43922     * updated when tooltip is shown
43923     *
43924     * @internal
43925     */
43926
43927    this.currentDirection = _fastWebUtilities.Direction.ltr;
43928    /**
43929     * The timer that tracks delay time before the tooltip is shown on hover
43930     */
43931
43932    this.showDelayTimer = null;
43933    /**
43934     * The timer that tracks delay time before the tooltip is hidden
43935     */
43936
43937    this.hideDelayTimer = null;
43938    /**
43939     * Indicates whether the anchor is currently being hovered or has focus
43940     */
43941
43942    this.isAnchorHoveredFocused = false;
43943    /**
43944     * Indicates whether the region is currently being hovered
43945     */
43946
43947    this.isRegionHovered = false;
43948    /**
43949     * invoked when the anchored region's position relative to the anchor changes
43950     *
43951     * @internal
43952     */
43953
43954    this.handlePositionChange = ev => {
43955      this.classList.toggle("top", this.region.verticalPosition === "start");
43956      this.classList.toggle("bottom", this.region.verticalPosition === "end");
43957      this.classList.toggle("inset-top", this.region.verticalPosition === "insetStart");
43958      this.classList.toggle("inset-bottom", this.region.verticalPosition === "insetEnd");
43959      this.classList.toggle("center-vertical", this.region.verticalPosition === "center");
43960      this.classList.toggle("left", this.region.horizontalPosition === "start");
43961      this.classList.toggle("right", this.region.horizontalPosition === "end");
43962      this.classList.toggle("inset-left", this.region.horizontalPosition === "insetStart");
43963      this.classList.toggle("inset-right", this.region.horizontalPosition === "insetEnd");
43964      this.classList.toggle("center-horizontal", this.region.horizontalPosition === "center");
43965    };
43966    /**
43967     * mouse enters region
43968     */
43969
43970
43971    this.handleRegionMouseOver = ev => {
43972      this.isRegionHovered = true;
43973    };
43974    /**
43975     * mouse leaves region
43976     */
43977
43978
43979    this.handleRegionMouseOut = ev => {
43980      this.isRegionHovered = false;
43981      this.startHideDelayTimer();
43982    };
43983    /**
43984     * mouse enters anchor
43985     */
43986
43987
43988    this.handleAnchorMouseOver = ev => {
43989      if (this.tooltipVisible) {
43990        // tooltip is already visible, just set the anchor hover flag
43991        this.isAnchorHoveredFocused = true;
43992        return;
43993      }
43994
43995      this.startShowDelayTimer();
43996    };
43997    /**
43998     * mouse leaves anchor
43999     */
44000
44001
44002    this.handleAnchorMouseOut = ev => {
44003      this.isAnchorHoveredFocused = false;
44004      this.clearShowDelayTimer();
44005      this.startHideDelayTimer();
44006    };
44007    /**
44008     * anchor gets focus
44009     */
44010
44011
44012    this.handleAnchorFocusIn = ev => {
44013      this.startShowDelayTimer();
44014    };
44015    /**
44016     * anchor loses focus
44017     */
44018
44019
44020    this.handleAnchorFocusOut = ev => {
44021      this.isAnchorHoveredFocused = false;
44022      this.clearShowDelayTimer();
44023      this.startHideDelayTimer();
44024    };
44025    /**
44026     * starts the hide timer
44027     */
44028
44029
44030    this.startHideDelayTimer = () => {
44031      this.clearHideDelayTimer();
44032
44033      if (!this.tooltipVisible) {
44034        return;
44035      } // allow 60 ms for account for pointer to move between anchor/tooltip
44036      // without hiding tooltip
44037
44038
44039      this.hideDelayTimer = window.setTimeout(() => {
44040        this.updateTooltipVisibility();
44041      }, 60);
44042    };
44043    /**
44044     * clears the hide delay
44045     */
44046
44047
44048    this.clearHideDelayTimer = () => {
44049      if (this.hideDelayTimer !== null) {
44050        clearTimeout(this.hideDelayTimer);
44051        this.hideDelayTimer = null;
44052      }
44053    };
44054    /**
44055     * starts the show timer if not currently running
44056     */
44057
44058
44059    this.startShowDelayTimer = () => {
44060      if (this.isAnchorHoveredFocused) {
44061        return;
44062      }
44063
44064      if (this.delay > 1) {
44065        if (this.showDelayTimer === null) this.showDelayTimer = window.setTimeout(() => {
44066          this.startHover();
44067        }, this.delay);
44068        return;
44069      }
44070
44071      this.startHover();
44072    };
44073    /**
44074     * start hover
44075     */
44076
44077
44078    this.startHover = () => {
44079      this.isAnchorHoveredFocused = true;
44080      this.updateTooltipVisibility();
44081    };
44082    /**
44083     * clears the show delay
44084     */
44085
44086
44087    this.clearShowDelayTimer = () => {
44088      if (this.showDelayTimer !== null) {
44089        clearTimeout(this.showDelayTimer);
44090        this.showDelayTimer = null;
44091      }
44092    };
44093    /**

vendor: 4,425 bytes, lines 44094-44249

44094     *  Gets the anchor element by id
44095     */
44096
44097
44098    this.getAnchor = () => {
44099      const rootNode = this.getRootNode();
44100
44101      if (rootNode instanceof ShadowRoot) {
44102        return rootNode.getElementById(this.anchor);
44103      }
44104
44105      return document.getElementById(this.anchor);
44106    };
44107    /**
44108     * handles key down events to check for dismiss
44109     */
44110
44111
44112    this.handleDocumentKeydown = e => {
44113      if (!e.defaultPrevented && this.tooltipVisible) {
44114        switch (e.key) {
44115          case _fastWebUtilities.keyEscape:
44116            this.isAnchorHoveredFocused = false;
44117            this.updateTooltipVisibility();
44118            this.$emit("dismiss");
44119            break;
44120        }
44121      }
44122    };
44123    /**
44124     * determines whether to show or hide the tooltip based on current state
44125     */
44126
44127
44128    this.updateTooltipVisibility = () => {
44129      if (this.visible === false) {
44130        this.hideTooltip();
44131      } else if (this.visible === true) {
44132        this.showTooltip();
44133        return;
44134      } else {
44135        if (this.isAnchorHoveredFocused || this.isRegionHovered) {
44136          this.showTooltip();
44137          return;
44138        }
44139
44140        this.hideTooltip();
44141      }
44142    };
44143    /**
44144     * shows the tooltip
44145     */
44146
44147
44148    this.showTooltip = () => {
44149      if (this.tooltipVisible) {
44150        return;
44151      }
44152
44153      this.currentDirection = (0, _direction.getDirection)(this);
44154      this.tooltipVisible = true;
44155      document.addEventListener("keydown", this.handleDocumentKeydown);
44156
44157      _fastElement.DOM.queueUpdate(this.setRegionProps);
44158    };
44159    /**
44160     * hides the tooltip
44161     */
44162
44163
44164    this.hideTooltip = () => {
44165      if (!this.tooltipVisible) {
44166        return;
44167      }
44168
44169      this.clearHideDelayTimer();
44170
44171      if (this.region !== null && this.region !== undefined) {
44172        this.region.removeEventListener("positionchange", this.handlePositionChange);
44173        this.region.viewportElement = null;
44174        this.region.anchorElement = null;
44175        this.region.removeEventListener("mouseover", this.handleRegionMouseOver);
44176        this.region.removeEventListener("mouseout", this.handleRegionMouseOut);
44177      }
44178
44179      document.removeEventListener("keydown", this.handleDocumentKeydown);
44180      this.tooltipVisible = false;
44181    };
44182    /**
44183     * updates the tooltip anchored region props after it has been
44184     * added to the DOM
44185     */
44186
44187
44188    this.setRegionProps = () => {
44189      if (!this.tooltipVisible) {
44190        return;
44191      }
44192
44193      this.region.viewportElement = this.viewportElement;
44194      this.region.anchorElement = this.anchorElement;
44195      this.region.addEventListener("positionchange", this.handlePositionChange);
44196      this.region.addEventListener("mouseover", this.handleRegionMouseOver, {
44197        passive: true
44198      });
44199      this.region.addEventListener("mouseout", this.handleRegionMouseOut, {
44200        passive: true
44201      });
44202    };
44203  }
44204
44205  visibleChanged() {
44206    if (this.$fastController.isConnected) {
44207      this.updateTooltipVisibility();
44208      this.updateLayout();
44209    }
44210  }
44211
44212  anchorChanged() {
44213    if (this.$fastController.isConnected) {
44214      this.anchorElement = this.getAnchor();
44215    }
44216  }
44217
44218  positionChanged() {
44219    if (this.$fastController.isConnected) {
44220      this.updateLayout();
44221    }
44222  }
44223
44224  anchorElementChanged(oldValue) {
44225    if (this.$fastController.isConnected) {
44226      if (oldValue !== null && oldValue !== undefined) {
44227        oldValue.removeEventListener("mouseover", this.handleAnchorMouseOver);
44228        oldValue.removeEventListener("mouseout", this.handleAnchorMouseOut);
44229        oldValue.removeEventListener("focusin", this.handleAnchorFocusIn);
44230        oldValue.removeEventListener("focusout", this.handleAnchorFocusOut);
44231      }
44232
44233      if (this.anchorElement !== null && this.anchorElement !== undefined) {
44234        this.anchorElement.addEventListener("mouseover", this.handleAnchorMouseOver, {
44235          passive: true
44236        });
44237        this.anchorElement.addEventListener("mouseout", this.handleAnchorMouseOut, {
44238          passive: true
44239        });
44240        this.anchorElement.addEventListener("focusin", this.handleAnchorFocusIn, {
44241          passive: true
44242        });
44243        this.anchorElement.addEventListener("focusout", this.handleAnchorFocusOut, {
44244          passive: true
44245        });
44246        const anchorId = this.anchorElement.id;
44247
44248        if (this.anchorElement.parentElement !== null) {
44249          this.anchorElement.parentElement.querySelectorAll(":hover").forEach(element => {

44250            if (element.id === anchorId) {
44251              this.startShowDelayTimer();
44252            }
44253          });
44254        }
44255      }
44256
44257      if (this.region !== null && this.region !== undefined && this.tooltipVisible) {
44258        this.region.anchorElement = this.anchorElement;
44259      }
44260
44261      this.updateLayout();
44262    }
44263  }
44264
44265  viewportElementChanged() {
44266    if (this.region !== null && this.region !== undefined) {
44267      this.region.viewportElement = this.viewportElement;
44268    }
44269
44270    this.updateLayout();
44271  }
44272
44273  connectedCallback() {
44274    super.connectedCallback();
44275    this.anchorElement = this.getAnchor();
44276    this.updateTooltipVisibility();
44277  }
44278
44279  disconnectedCallback() {
44280    this.hideTooltip();
44281    this.clearShowDelayTimer();
44282    this.clearHideDelayTimer();
44283    super.disconnectedCallback();
44284  }
44285  /**
44286   * updated the properties being passed to the anchored region
44287   */
44288
44289
44290  updateLayout() {
44291    this.verticalPositioningMode = "locktodefault";
44292    this.horizontalPositioningMode = "locktodefault";
44293
44294    switch (this.position) {
44295      case _tooltipOptions.TooltipPosition.top:
44296      case _tooltipOptions.TooltipPosition.bottom:
44297        this.verticalDefaultPosition = this.position;
44298        this.horizontalDefaultPosition = "center";
44299        break;
44300
44301      case _tooltipOptions.TooltipPosition.right:
44302      case _tooltipOptions.TooltipPosition.left:
44303      case _tooltipOptions.TooltipPosition.start:
44304      case _tooltipOptions.TooltipPosition.end:
44305        this.verticalDefaultPosition = "center";
44306        this.horizontalDefaultPosition = this.position;
44307        break;
44308
44309      case _tooltipOptions.TooltipPosition.topLeft:
44310        this.verticalDefaultPosition = "top";
44311        this.horizontalDefaultPosition = "left";
44312        break;
44313
44314      case _tooltipOptions.TooltipPosition.topRight:
44315        this.verticalDefaultPosition = "top";
44316        this.horizontalDefaultPosition = "right";
44317        break;
44318
44319      case _tooltipOptions.TooltipPosition.bottomLeft:
44320        this.verticalDefaultPosition = "bottom";
44321        this.horizontalDefaultPosition = "left";
44322        break;
44323
44324      case _tooltipOptions.TooltipPosition.bottomRight:
44325        this.verticalDefaultPosition = "bottom";
44326        this.horizontalDefaultPosition = "right";
44327        break;
44328
44329      case _tooltipOptions.TooltipPosition.topStart:
44330        this.verticalDefaultPosition = "top";
44331        this.horizontalDefaultPosition = "start";
44332        break;
44333
44334      case _tooltipOptions.TooltipPosition.topEnd:
44335        this.verticalDefaultPosition = "top";
44336        this.horizontalDefaultPosition = "end";
44337        break;
44338
44339      case _tooltipOptions.TooltipPosition.bottomStart:
44340        this.verticalDefaultPosition = "bottom";
44341        this.horizontalDefaultPosition = "start";
44342        break;
44343
44344      case _tooltipOptions.TooltipPosition.bottomEnd:
44345        this.verticalDefaultPosition = "bottom";
44346        this.horizontalDefaultPosition = "end";
44347        break;
44348
44349      default:
44350        this.verticalPositioningMode = "dynamic";
44351        this.horizontalPositioningMode = "dynamic";
44352        this.verticalDefaultPosition = void 0;
44353        this.horizontalDefaultPosition = "center";
44354        break;
44355    }
44356  }
44357
44358}
44359
44360exports.Tooltip = Tooltip;
44361(0, _tslib.__decorate)([(0, _fastElement.attr)({
44362  mode: "boolean"
44363})], Tooltip.prototype, "visible", void 0);
44364(0, _tslib.__decorate)([_fastElement.attr], Tooltip.prototype, "anchor", void 0);
44365(0, _tslib.__decorate)([_fastElement.attr], Tooltip.prototype, "delay", void 0);
44366(0, _tslib.__decorate)([_fastElement.attr], Tooltip.prototype, "position", void 0);
44367(0, _tslib.__decorate)([(0, _fastElement.attr)({
44368  attribute: "auto-update-mode"
44369})], Tooltip.prototype, "autoUpdateMode", void 0);
44370(0, _tslib.__decorate)([(0, _fastElement.attr)({
44371  attribute: "horizontal-viewport-lock"
44372})], Tooltip.prototype, "horizontalViewportLock", void 0);
44373(0, _tslib.__decorate)([(0, _fastElement.attr)({
44374  attribute: "vertical-viewport-lock"
44375})], Tooltip.prototype, "verticalViewportLock", void 0);
44376(0, _tslib.__decorate)([_fastElement.observable], Tooltip.prototype, "anchorElement", void 0);
44377(0, _tslib.__decorate)([_fastElement.observable], Tooltip.prototype, "viewportElement", void 0);
44378(0, _tslib.__decorate)([_fastElement.observable], Tooltip.prototype, "verticalPositioningMode", void 0);
44379(0, _tslib.__decorate)([_fastElement.observable], Tooltip.prototype, "horizontalPositioningMode", void 0);
44380(0, _tslib.__decorate)([_fastElement.observable], Tooltip.prototype, "horizontalInset", void 0);
44381(0, _tslib.__decorate)([_fastElement.observable], Tooltip.prototype, "verticalInset", void 0);
44382(0, _tslib.__decorate)([_fastElement.observable], Tooltip.prototype, "horizontalScaling", void 0);
44383(0, _tslib.__decorate)([_fastElement.observable], Tooltip.prototype, "verticalScaling", void 0);
44384(0, _tslib.__decorate)([_fastElement.observable], Tooltip.prototype, "verticalDefaultPosition", void 0);
44385(0, _tslib.__decorate)([_fastElement.observable], Tooltip.prototype, "horizontalDefaultPosition", void 0);
44386(0, _tslib.__decorate)([_fastElement.observable], Tooltip.prototype, "tooltipVisible", void 0);
44387(0, _tslib.__decorate)([_fastElement.observable], Tooltip.prototype, "currentDirection", void 0);
44388
44389}

44389,{"../foundation-element/foundation-element.js":251,"../utilities/direction.js":361,"./tooltip.options.js":350,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],350:[function(require,module,exports){
44390"use strict";
44391
44392Object.defineProperty(exports, "__esModule", {
44393  value: true
44394});
44395exports.TooltipPosition = void 0;
44396
44397/**
44398 * Enumerates possible tooltip positions
44399 *
44400 * @public
44401 */
44402const TooltipPosition = {
44403  /**
44404   * The tooltip is positioned above the element
44405   */
44406  top: "top",
44407
44408  /**
44409   * The tooltip is positioned to the right of the element
44410   */
44411  right: "right",
44412
44413  /**
44414   * The tooltip is positioned below the element
44415   */
44416  bottom: "bottom",
44417
44418  /**
44419   * The tooltip is positioned to the left of the element
44420   */
44421  left: "left",
44422
44423  /**
44424   * The tooltip is positioned before the element
44425   */
44426  start: "start",
44427
44428  /**
44429   * The tooltip is positioned after the element
44430   */
44431  end: "end",
44432
44433  /**
44434   * The tooltip is positioned above the element and to the left
44435   */
44436  topLeft: "top-left",
44437
44438  /**
44439   * The tooltip is positioned above the element and to the right
44440   */
44441  topRight: "top-right",
44442
44443  /**
44444   * The tooltip is positioned below the element and to the left
44445   */
44446  bottomLeft: "bottom-left",
44447
44448  /**
44449   * The tooltip is positioned below the element and to the right
44450   */
44451  bottomRight: "bottom-right",
44452
44453  /**
44454   * The tooltip is positioned above the element and to the left
44455   */
44456  topStart: "top-start",
44457
44458  /**
44459   * The tooltip is positioned above the element and to the right
44460   */
44461  topEnd: "top-end",
44462
44463  /**
44464   * The tooltip is positioned below the element and to the left
44465   */
44466  bottomStart: "bottom-start",
44467
44468  /**
44469   * The tooltip is positioned below the element and to the right
44470   */
44471  bottomEnd: "bottom-end"
44472};
44473exports.TooltipPosition = TooltipPosition;
44474
44475},{}],351:[function(require,module,exports){
44476"use strict";
44477
44478Object.defineProperty(exports, "__esModule", {
44479  value: true
44480});
44481exports.tooltipTemplate = void 0;
44482
44483var _fastElement = require("@microsoft/fast-element");
44484
44485var _anchoredRegion = require("../anchored-region/anchored-region.js");
44486
44487/**
44488 * Creates a template for the {@link @microsoft/fast-foundation#(Tooltip:class)} component using the provided prefix.
44489 * @public
44490 */
44491const tooltipTemplate = (context, definition) => {
44492  return (0, _fastElement.html)`
44493        ${(0, _fastElement.when)(x => x.tooltipVisible, (0, _fastElement.html)`
44494            <${context.tagFor(_anchoredRegion.AnchoredRegion)}
44495                fixed-placement="true"
44496                auto-update-mode="${x => x.autoUpdateMode}"
44497                vertical-positioning-mode="${x => x.verticalPositioningMode}"
44498                vertical-default-position="${x => x.verticalDefaultPosition}"
44499                vertical-inset="${x => x.verticalInset}"
44500                vertical-scaling="${x => x.verticalScaling}"
44501                horizontal-positioning-mode="${x => x.horizontalPositioningMode}"
44502                horizontal-default-position="${x => x.horizontalDefaultPosition}"
44503                horizontal-scaling="${x => x.horizontalScaling}"
44504                horizontal-inset="${x => x.horizontalInset}"
44505                vertical-viewport-lock="${x => x.horizontalViewportLock}"
44506                horizontal-viewport-lock="${x => x.verticalViewportLock}"
44507                dir="${x => x.currentDirection}"
44508                ${(0, _fastElement.ref)("region")}
44509            >
44510                <div class="tooltip" part="tooltip" role="tooltip">
44511                    <slot></slot>
44512                </div>
44513            </${context.tagFor(_anchoredRegion.AnchoredRegion)}>
44514        `)}
44515    `;
44516};
44517
44518exports.tooltipTemplate = tooltipTemplate;
44519
44520},{"../anchored-region/anchored-region.js":182,"@microsoft/fast-element":151}],352:[function(require,module,exports){
44521"use strict";
44522
44523Object.defineProperty(exports, "__esModule", {
44524  value: true
44525});
44526
44527var _treeItemTemplate = require("./tree-item.template.js");
44528
44529Object.keys(_treeItemTemplate).forEach(function (key) {
44530  if (key === "default" || key === "__esModule") return;
44531  if (key in exports && exports[key] === _treeItemTemplate[key]) return;
44532  Object.defineProperty(exports, key, {
44533    enumerable: true,
44534    get: function () {
44535      return _treeItemTemplate[key];
44536    }
44537  });
44538});
44539
44540var _treeItem = require("./tree-item.js");
44541
44542Object.keys(_treeItem).forEach(function (key) {

44543  if (key === "default" || key === "__esModule") return;
44544  if (key in exports && exports[key] === _treeItem[key]) return;
44545  Object.defineProperty(exports, key, {
44546    enumerable: true,
44547    get: function () {
44548      return _treeItem[key];
44549    }
44550  });
44551});
44552
44553},{"./tree-item.js":353,"./tree-item.template.js":354}],353:[function(require,module,exports){
44554"use strict";
44555
44556Object.defineProperty(exports, "__esModule", {
44557  value: true
44558});
44559exports.TreeItem = void 0;
44560exports.isTreeItemElement = isTreeItemElement;
44561
44562var _tslib = require("tslib");
44563
44564var _fastElement = require("@microsoft/fast-element");
44565
44566var _fastWebUtilities = require("@microsoft/fast-web-utilities");
44567
44568var _startEnd = require("../patterns/start-end.js");
44569
44570var _applyMixins = require("../utilities/apply-mixins.js");
44571
44572var _foundationElement = require("../foundation-element/foundation-element.js");
44573
44574/**
44575 * check if the item is a tree item
44576 * @public
44577 * @remarks
44578 * determines if element is an HTMLElement and if it has the role treeitem
44579 */
44580function isTreeItemElement(el) {
44581  return (0, _fastWebUtilities.isHTMLElement)(el) && el.getAttribute("role") === "treeitem";
44582}
44583/**
44584 * A Tree item Custom HTML Element.
44585 *
44586 * @slot start - Content which can be provided before the tree item content
44587 * @slot end - Content which can be provided after the tree item content
44588 * @slot - The default slot for tree item text content
44589 * @slot item - The slot for tree items (fast tree items manage this assignment themselves)
44590 * @slot expand-collapse-button - The expand/collapse button
44591 * @csspart positioning-region - The element used to position the tree item content with exception of any child nodes
44592 * @csspart content-region - The element containing the expand/collapse, start, and end slots
44593 * @csspart items - The element wrapping any child items
44594 * @csspart expand-collapse-button - The expand/collapse button
44595 * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
44596 * @fires selected-change - Fires a custom 'selected-change' event when the selected state changes
44597 *
44598 * @public
44599 */
44600
44601
44602class TreeItem extends _foundationElement.FoundationElement {
44603  constructor() {
44604    super(...arguments);
44605    /**
44606     * When true, the control will be appear expanded by user interaction.
44607     * @public
44608     * @remarks
44609     * HTML Attribute: expanded
44610     */
44611
44612    this.expanded = false;
44613    /**
44614     * Whether the item is focusable
44615     *
44616     * @internal
44617     */
44618
44619    this.focusable = false;
44620    /**
44621     * Whether the tree is nested
44622     *
44623     * @public
44624     */
44625
44626    this.isNestedItem = () => {
44627      return isTreeItemElement(this.parentElement);
44628    };
44629    /**
44630     * Handle expand button click
44631     *
44632     * @internal
44633     */
44634
44635
44636    this.handleExpandCollapseButtonClick = e => {
44637      if (!this.disabled && !e.defaultPrevented) {
44638        this.expanded = !this.expanded;
44639      }
44640    };
44641    /**
44642     * Handle focus events
44643     *
44644     * @internal
44645     */
44646
44647
44648    this.handleFocus = e => {
44649      this.setAttribute("tabindex", "0");
44650    };
44651    /**
44652     * Handle blur events
44653     *
44654     * @internal
44655     */
44656
44657
44658    this.handleBlur = e => {
44659      this.setAttribute("tabindex", "-1");
44660    };
44661  }
44662
44663  expandedChanged() {
44664    if (this.$fastController.isConnected) {
44665      this.$emit("expanded-change", this);
44666    }
44667  }
44668
44669  selectedChanged() {
44670    if (this.$fastController.isConnected) {
44671      this.$emit("selected-change", this);
44672    }
44673  }
44674
44675  itemsChanged(oldValue, newValue) {
44676    if (this.$fastController.isConnected) {
44677      this.items.forEach(node => {
44678        if (isTreeItemElement(node)) {
44679          // TODO: maybe not require it to be a TreeItem?
44680          node.nested = true;
44681        }
44682      });
44683    }
44684  }
44685  /**
44686   * Places document focus on a tree item
44687   *
44688   * @public
44689   * @param el - the element to focus
44690   */
44691
44692
44693  static focusItem(el) {
44694    el.focusable = true;
44695    el.focus();
44696  }
44697  /**
44698   * Gets number of children
44699   *
44700   * @internal
44701   */
44702
44703
44704  childItemLength() {
44705    const treeChildren = this.childItems.filter(item => {
44706      return isTreeItemElement(item);
44707    });
44708    return treeChildren ? treeChildren.length : 0;
44709  }
44710
44711}
44712
44713exports.TreeItem = TreeItem;
44714(0, _tslib.__decorate)([(0, _fastElement.attr)({
44715  mode: "boolean"
44716})], TreeItem.prototype, "expanded", void 0);
44717(0, _tslib.__decorate)([(0, _fastElement.attr)({
44718  mode: "boolean"
44719})], TreeItem.prototype, "selected", void 0);
44720(0, _tslib.__decorate)([(0, _fastElement.attr)({
44721  mode: "boolean"
44722})], TreeItem.prototype, "disabled", void 0);
44723(0, _tslib.__decorate)([_fastElement.observable], TreeItem.prototype, "focu

44723sable", void 0);
44724(0, _tslib.__decorate)([_fastElement.observable], TreeItem.prototype, "childItems", void 0);
44725(0, _tslib.__decorate)([_fastElement.observable], TreeItem.prototype, "items", void 0);
44726(0, _tslib.__decorate)([_fastElement.observable], TreeItem.prototype, "nested", void 0);
44727(0, _tslib.__decorate)([_fastElement.observable], TreeItem.prototype, "renderCollapsedChildren", void 0);
44728(0, _applyMixins.applyMixins)(TreeItem, _startEnd.StartEnd);
44729
44730},{"../foundation-element/foundation-element.js":251,"../patterns/start-end.js":277,"../utilities/apply-mixins.js":358,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],354:[function(require,module,exports){
44731"use strict";
44732
44733Object.defineProperty(exports, "__esModule", {
44734  value: true
44735});
44736exports.treeItemTemplate = void 0;
44737
44738var _fastElement = require("@microsoft/fast-element");
44739
44740var _startEnd = require("../patterns/start-end.js");
44741
44742/**
44743 * The template for the {@link @microsoft/fast-foundation#(TreeItem:class)} component.
44744 * @public
44745 */
44746const treeItemTemplate = (context, definition) => (0, _fastElement.html)`
44747    <template
44748        role="treeitem"
44749        slot="${x => x.isNestedItem() ? "item" : void 0}"
44750        tabindex="-1"
44751        class="${x => x.expanded ? "expanded" : ""} ${x => x.selected ? "selected" : ""} ${x => x.nested ? "nested" : ""}
44752            ${x => x.disabled ? "disabled" : ""}"
44753        aria-expanded="${x => x.childItems && x.childItemLength() > 0 ? x.expanded : void 0}"
44754        aria-selected="${x => x.selected}"
44755        aria-disabled="${x => x.disabled}"
44756        @focusin="${(x, c) => x.handleFocus(c.event)}"
44757        @focusout="${(x, c) => x.handleBlur(c.event)}"
44758        ${(0, _fastElement.children)({
44759  property: "childItems",
44760  filter: (0, _fastElement.elements)()
44761})}
44762    >
44763        <div class="positioning-region" part="positioning-region">
44764            <div class="content-region" part="content-region">
44765                ${(0, _fastElement.when)(x => x.childItems && x.childItemLength() > 0, (0, _fastElement.html)`
44766                        <div
44767                            aria-hidden="true"
44768                            class="expand-collapse-button"
44769                            part="expand-collapse-button"
44770                            @click="${(x, c) => x.handleExpandCollapseButtonClick(c.event)}"
44771                            ${(0, _fastElement.ref)("expandCollapseButton")}
44772                        >
44773                            <slot name="expand-collapse-glyph">
44774                                ${definition.expandCollapseGlyph || ""}
44775                            </slot>
44776                        </div>
44777                    `)}
44778                ${(0, _startEnd.startSlotTemplate)(context, definition)}
44779                <slot></slot>
44780                ${(0, _startEnd.endSlotTemplate)(context, definition)}
44781            </div>
44782        </div>
44783        ${(0, _fastElement.when)(x => x.childItems && x.childItemLength() > 0 && (x.expanded || x.renderCollapsedChildren), (0, _fastElement.html)`
44784                <div role="group" class="items" part="items">
44785                    <slot name="item" ${(0, _fastElement.slotted)("items")}></slot>
44786                </div>
44787            `)}
44788    </template>
44789`;
44790
44791exports.treeItemTemplate = treeItemTemplate;
44792
44793},{"../patterns/start-end.js":277,"@microsoft/fast-element":151}],355:[function(require,module,exports){
44794"use strict";
44795
44796Object.defineProperty(exports, "__esModule", {
44797  value: true
44798});
44799
44800var _treeViewTemplate = require("./tree-view.template.js");
44801
44802Object.keys(_treeViewTemplate).forEach(function (key) {
44803  if (key === "default" || key === "__esModule") return;
44804  if (key in exports && exports[key] === _treeViewTemplate[key]) return;
44805  Object.defineProperty(exports, key, {
44806    enumerable: true,
44807    get: function () {
44808      return _treeViewTemplate[key];
44809    }
44810  });
44811});
44812
44813var _treeView = require("./tree-view.js");
44814
44815Object.keys(_treeView).forEach(function (key) {
44816  if (key === "default" || key === "__esModule") return;
44817  if (key in exports && exports[key] === _treeView[key]) return;
44818  Object.defineProperty(exports, key, {
44819    enumerable: true,
44820    get: function () {
44821      return _treeView[key];
44822    }
44823  });
44824});
44825
44826},{"./tree-view.js":356,"./tree-view.template.js":357}],356:[function(require,module,exports){
44827"use strict";
44828
44829Object.defineProperty(exports, "__esModule", {
44830  value: true
44831});
44832exports.TreeView = void 0;
44833
44834var _tslib = require("tslib");
44835
44836var _fastElement = require("@microsoft/fast-element");
44837
44838var _fastWebUtilities = require("@microsoft/fast-web-utilities");
44839
44840var _treeItem = require("../tree-item/tree-item.js");
44841

44842var _foundationElement = require("../foundation-element/foundation-element.js");
44843
44844/**
44845 * A Tree view Custom HTML Element.
44846 * Implements the {@link https://w3c.github.io/aria-practices/#TreeView | ARIA TreeView }.
44847 *
44848 * @slot - The default slot for tree items
44849 *
44850 * @public
44851 */
44852class TreeView extends _foundationElement.FoundationElement {
44853  constructor() {
44854    super(...arguments);
44855    /**
44856     * The tree item that is designated to be in the tab queue.
44857     *
44858     * @internal
44859     */
44860
44861    this.currentFocused = null;
44862    /**
44863     * Handle focus events
44864     *
44865     * @internal
44866     */
44867
44868    this.handleFocus = e => {
44869      if (this.slottedTreeItems.length < 1) {
44870        // no child items, nothing to do
44871        return;
44872      }
44873
44874      if (e.target === this) {
44875        if (this.currentFocused === null) {
44876          this.currentFocused = this.getValidFocusableItem();
44877        }
44878
44879        if (this.currentFocused !== null) {
44880          _treeItem.TreeItem.focusItem(this.currentFocused);
44881        }
44882
44883        return;
44884      }
44885
44886      if (this.contains(e.target)) {
44887        this.setAttribute("tabindex", "-1");
44888        this.currentFocused = e.target;
44889      }
44890    };
44891    /**
44892     * Handle blur events
44893     *
44894     * @internal
44895     */
44896
44897
44898    this.handleBlur = e => {
44899      if (e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget))) {
44900        this.setAttribute("tabindex", "0");
44901      }
44902    };
44903    /**
44904     * KeyDown handler
44905     *
44906     *  @internal
44907     */
44908
44909
44910    this.handleKeyDown = e => {
44911      if (e.defaultPrevented) {
44912        return;
44913      }
44914
44915      if (this.slottedTreeItems.length < 1) {
44916        return true;
44917      }
44918
44919      const treeItems = this.getVisibleNodes();
44920
44921      switch (e.key) {
44922        case _fastWebUtilities.keyHome:
44923          if (treeItems.length) {
44924            _treeItem.TreeItem.focusItem(treeItems[0]);
44925          }
44926
44927          return;
44928
44929        case _fastWebUtilities.keyEnd:
44930          if (treeItems.length) {
44931            _treeItem.TreeItem.focusItem(treeItems[treeItems.length - 1]);
44932          }
44933
44934          return;
44935
44936        case _fastWebUtilities.keyArrowLeft:
44937          if (e.target && this.isFocusableElement(e.target)) {
44938            const item = e.target;
44939
44940            if (item instanceof _treeItem.TreeItem && item.childItemLength() > 0 && item.expanded) {
44941              item.expanded = false;
44942            } else if (item instanceof _treeItem.TreeItem && item.parentElement instanceof _treeItem.TreeItem) {
44943              _treeItem.TreeItem.focusItem(item.parentElement);
44944            }
44945          }
44946
44947          return false;
44948
44949        case _fastWebUtilities.keyArrowRight:
44950          if (e.target && this.isFocusableElement(e.target)) {
44951            const item = e.target;
44952
44953            if (item instanceof _treeItem.TreeItem && item.childItemLength() > 0 && !item.expanded) {
44954              item.expanded = true;
44955            } else if (item instanceof _treeItem.TreeItem && item.childItemLength() > 0) {
44956              this.focusNextNode(1, e.target);
44957            }
44958          }
44959
44960          return;
44961
44962        case _fastWebUtilities.keyArrowDown:
44963          if (e.target && this.isFocusableElement(e.target)) {
44964            this.focusNextNode(1, e.target);
44965          }
44966
44967          return;
44968
44969        case _fastWebUtilities.keyArrowUp:
44970          if (e.target && this.isFocusableElement(e.target)) {
44971            this.focusNextNode(-1, e.target);
44972          }
44973
44974          return;
44975
44976        case _fastWebUtilities.keyEnter:
44977          // In single-select trees where selection does not follow focus (see note below),
44978          // the default action is typically to select the focused node.
44979          this.handleClick(e);
44980          return;
44981      } // don't prevent default if we took no action
44982
44983
44984      return true;
44985    };
44986    /**
44987     * Handles the selected-changed events bubbling up
44988     * from child tree items
44989     *
44990     *  @internal
44991     */
44992
44993
44994    this.handleSelectedChange = e => {
44995      if (e.defaultPrevented) {
44996        return;
44997      }
44998
44999      if (!(e.target instanceof Element) || !(0, _treeItem.isTreeItemElement)(e.target)) {
45000        return true;
45001      }
45002
45003      const item = e.target;
45004
45005      if (item.selected) {
45006        if (this.currentSelected && this.currentSelected !== item) {
45007          this.currentSelected.selected = false;

45008        } // new selected item
45009
45010
45011        this.currentSelected = item;
45012      } else if (!item.selected && this.currentSelected === item) {
45013        // selected item deselected
45014        this.currentSelected = null;
45015      }
45016
45017      return;
45018    };
45019    /**
45020     * Updates the tree view when slottedTreeItems changes
45021     */
45022
45023
45024    this.setItems = () => {
45025      // force single selection
45026      // defaults to first one found
45027      const selectedItem = this.treeView.querySelector("[aria-selected='true']");
45028      this.currentSelected = selectedItem; // invalidate the current focused item if it is no longer valid
45029
45030      if (this.currentFocused === null || !this.contains(this.currentFocused)) {
45031        this.currentFocused = this.getValidFocusableItem();
45032      } // toggle properties on child elements
45033
45034
45035      this.nested = this.checkForNestedItems();
45036      const treeItems = this.getVisibleNodes();
45037      treeItems.forEach(node => {
45038        if ((0, _treeItem.isTreeItemElement)(node)) {
45039          node.nested = this.nested;
45040        }
45041      });
45042    };
45043    /**
45044     * check if the item is focusable
45045     */
45046
45047
45048    this.isFocusableElement = el => {
45049      return (0, _treeItem.isTreeItemElement)(el);
45050    };
45051
45052    this.isSelectedElement = el => {
45053      return el.selected;
45054    };
45055  }
45056
45057  slottedTreeItemsChanged() {
45058    if (this.$fastController.isConnected) {
45059      // update for slotted children change
45060      this.setItems();
45061    }
45062  }
45063
45064  connectedCallback() {
45065    super.connectedCallback();
45066    this.setAttribute("tabindex", "0");
45067
45068    _fastElement.DOM.queueUpdate(() => {
45069      this.setItems();
45070    });
45071  }
45072  /**
45073   * Handles click events bubbling up
45074   *
45075   *  @internal
45076   */
45077
45078
45079  handleClick(e) {
45080    if (e.defaultPrevented) {
45081      // handled, do nothing
45082      return;
45083    }
45084
45085    if (!(e.target instanceof Element) || !(0, _treeItem.isTreeItemElement)(e.target)) {
45086      // not a tree item, ignore
45087      return true;
45088    }
45089
45090    const item = e.target;
45091
45092    if (!item.disabled) {
45093      item.selected = !item.selected;
45094    }
45095
45096    return;
45097  }
45098  /**
45099   * Move focus to a tree item based on its offset from the provided item
45100   */
45101
45102
45103  focusNextNode(delta, item) {
45104    const visibleNodes = this.getVisibleNodes();
45105
45106    if (!visibleNodes) {
45107      return;
45108    }
45109
45110    const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
45111
45112    if ((0, _fastWebUtilities.isHTMLElement)(focusItem)) {
45113      _treeItem.TreeItem.focusItem(focusItem);
45114    }
45115  }
45116  /**
45117   * checks if there are any nested tree items
45118   */
45119
45120
45121  getValidFocusableItem() {
45122    const treeItems = this.getVisibleNodes(); // default to selected element if there is one
45123
45124    let focusIndex = treeItems.findIndex(this.isSelectedElement);
45125
45126    if (focusIndex === -1) {
45127      // otherwise first focusable tree item
45128      focusIndex = treeItems.findIndex(this.isFocusableElement);
45129    }
45130
45131    if (focusIndex !== -1) {
45132      return treeItems[focusIndex];
45133    }
45134
45135    return null;
45136  }
45137  /**
45138   * checks if there are any nested tree items
45139   */
45140
45141
45142  checkForNestedItems() {
45143    return this.slottedTreeItems.some(node => {
45144      return (0, _treeItem.isTreeItemElement)(node) && node.querySelector("[role='treeitem']");
45145    });
45146  }
45147
45148  getVisibleNodes() {
45149    return (0, _fastWebUtilities.getDisplayedNodes)(this, "[role='treeitem']") || [];
45150  }
45151
45152}
45153
45154exports.TreeView = TreeView;
45155(0, _tslib.__decorate)([(0, _fastElement.attr)({
45156  attribute: "render-collapsed-nodes"
45157})], TreeView.prototype, "renderCollapsedNodes", void 0);
45158(0, _tslib.__decorate)([_fastElement.observable], TreeView.prototype, "currentSelected", void 0);
45159(0, _tslib.__decorate)([_fastElement.observable], TreeView.prototype, "slottedTreeItems", void 0);
45160
45161},{"../foundation-element/foundation-element.js":251,"../tree-item/tree-item.js":353,"@microsoft/fast-element":151,"@microsoft/fast-web-utilities":379,"tslib":372}],357:[function(require,module,exports){
45162"use strict";
45163
45164Object.defineProperty(exports, "__esModule", {
45165  value: true
45166});
45167exports.treeViewTemplate = void 0;
45168
45169var _fastElement = require("@microsoft/fast-element");
45170
45171/**
45172 * The template for the {@link @microsoft/fast-foundation#TreeView} component.
45173 * @public
45174 */
45175const treeViewTemplate = (context, definition) => (0, _fastElement.html)`
45176    <template
45177        role="tree"
45178        ${(0, _fastElement.ref)("treeView")}
45179        @keydown="${(x, c) => x.handleKeyDown(c.event)}"
45180        @focusin="${(x, c) => x.handleFocus(c.event)}"
45181        @focusout="${(x, c) => x.handleBlur(c.event)}"
45182        @click="${(x, c) => x.handleClick(c.event)}"
45183        @selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
45184    >
45185        <slot ${(0, _fastElement.slotted)("slottedTreeItems")}></slot>
45186    </template>
45187`;
45188
45189exports.treeViewTemplate = treeViewTemplate;
45190
45191},{"@microsoft/fast-element":151}],358:[function(require,module,exports){
45192"use strict";
45193
45194Object.defineProperty(exports, "__esModule", {
45195  value: true
45196});

45197exports.applyMixins = applyMixins;
45198
45199var _fastElement = require("@microsoft/fast-element");
45200
45201/**
45202 * Apply mixins to a constructor.
45203 * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
45204 * @public
45205 */
45206function applyMixins(derivedCtor, ...baseCtors) {
45207  const derivedAttributes = _fastElement.AttributeConfiguration.locate(derivedCtor);
45208
45209  baseCtors.forEach(baseCtor => {
45210    Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
45211      if (name !== "constructor") {
45212        Object.defineProperty(derivedCtor.prototype, name,
45213        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
45214        Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
45215      }
45216    });
45217
45218    const baseAttributes = _fastElement.AttributeConfiguration.locate(baseCtor);
45219
45220    baseAttributes.forEach(x => derivedAttributes.push(x));
45221  });
45222}
45223
45224},{"@microsoft/fast-element":151}],359:[function(require,module,exports){
45225"use strict";
45226
45227Object.defineProperty(exports, "__esModule", {
45228  value: true
45229});
45230exports.composedContains = composedContains;
45231
45232var _composedParent = require("./composed-parent.js");
45233
45234/**
45235 * Determines if the reference element contains the test element in a "composed" DOM tree that
45236 * ignores shadow DOM boundaries.
45237 *
45238 * Returns true of the test element is a descendent of the reference, or exist in
45239 * a shadow DOM that is a logical descendent of the reference. Otherwise returns false.
45240 * @param reference - The element to test for containment against.
45241 * @param test - The element being tested for containment.
45242 *
45243 * @public
45244 */
45245function composedContains(reference, test) {
45246  let current = test;
45247
45248  while (current !== null) {
45249    if (current === reference) {
45250      return true;
45251    }
45252
45253    current = (0, _composedParent.composedParent)(current);
45254  }
45255
45256  return false;
45257}
45258
45259},{"./composed-parent.js":360}],360:[function(require,module,exports){
45260"use strict";
45261
45262Object.defineProperty(exports, "__esModule", {
45263  value: true
45264});
45265exports.composedParent = composedParent;
45266
45267/**
45268 * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
45269 * When the parent of a node is a shadow-root, it will return the host
45270 * element of the shadow root. Otherwise it will return the parent node or null if
45271 * no parent node exists.
45272 * @param element - The element for which to retrieve the composed parent
45273 *
45274 * @public
45275 */
45276function composedParent(element) {
45277  const parentNode = element.parentElement;
45278
45279  if (parentNode) {
45280    return parentNode;
45281  } else {
45282    const rootNode = element.getRootNode();
45283
45284    if (rootNode.host instanceof HTMLElement) {
45285      // this is shadow-root
45286      return rootNode.host;
45287    }
45288  }
45289
45290  return null;
45291}
45292
45293},{}],361:[function(require,module,exports){
45294"use strict";
45295
45296Object.defineProperty(exports, "__esModule", {
45297  value: true
45298});
45299exports.getDirection = void 0;
45300
45301var _fastWebUtilities = require("@microsoft/fast-web-utilities");
45302
45303/**
45304 * a method to determine the current localization direction of the view
45305 * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
45306 * @public
45307 */
45308const getDirection = rootNode => {
45309  const dirNode = rootNode.closest("[dir]");
45310  return dirNode !== null && dirNode.dir === "rtl" ? _fastWebUtilities.Direction.rtl : _fastWebUtilities.Direction.ltr;
45311};
45312
45313exports.getDirection = getDirection;
45314
45315},{"@microsoft/fast-web-utilities":379}],362:[function(require,module,exports){
45316"use strict";
45317
45318Object.defineProperty(exports, "__esModule", {
45319  value: true
45320});
45321var _exportNames = {
45322  composedContains: true
45323};
45324Object.defineProperty(exports, "composedContains", {
45325  enumerable: true,
45326  get: function () {
45327    return _composedContains.composedContains;
45328  }
45329});
45330
45331var _applyMixins = require("./apply-mixins.js");
45332
45333Object.keys(_applyMixins).forEach(function (key) {
45334  if (key === "default" || key === "__esModule") return;
45335  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
45336  if (key in exports && exports[key] === _applyMixins[key]) return;
45337  Object.defineProperty(exports, key, {
45338    enumerable: true,
45339    get: function () {
45340      return _applyMixins[key];
45341    }
45342  });
45343});
45344
45345var _composedParent = require("./composed-parent.js");
45346
45347Object.keys(_composedParent).forEach(function (key) {

45348  if (key === "default" || key === "__esModule") return;
45349  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
45350  if (key in exports && exports[key] === _composedParent[key]) return;
45351  Object.defineProperty(exports, key, {
45352    enumerable: true,
45353    get: function () {
45354      return _composedParent[key];
45355    }
45356  });
45357});
45358
45359var _composedContains = require("./composed-contains.js");
45360
45361var _matchMediaStylesheetBehavior = require("./match-media-stylesheet-behavior.js");
45362
45363Object.keys(_matchMediaStylesheetBehavior).forEach(function (key) {
45364  if (key === "default" || key === "__esModule") return;
45365  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
45366  if (key in exports && exports[key] === _matchMediaStylesheetBehavior[key]) return;
45367  Object.defineProperty(exports, key, {
45368    enumerable: true,
45369    get: function () {
45370      return _matchMediaStylesheetBehavior[key];
45371    }
45372  });
45373});
45374
45375var _propertyStylesheetBehavior = require("./property-stylesheet-behavior.js");
45376
45377Object.keys(_propertyStylesheetBehavior).forEach(function (key) {
45378  if (key === "default" || key === "__esModule") return;
45379  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
45380  if (key in exports && exports[key] === _propertyStylesheetBehavior[key]) return;
45381  Object.defineProperty(exports, key, {
45382    enumerable: true,
45383    get: function () {
45384      return _propertyStylesheetBehavior[key];
45385    }
45386  });
45387});
45388
45389var _index = require("./style/index.js");
45390
45391Object.keys(_index).forEach(function (key) {
45392  if (key === "default" || key === "__esModule") return;
45393  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
45394  if (key in exports && exports[key] === _index[key]) return;
45395  Object.defineProperty(exports, key, {
45396    enumerable: true,
45397    get: function () {
45398      return _index[key];
45399    }
45400  });
45401});
45402
45403var _direction = require("./direction.js");
45404
45405Object.keys(_direction).forEach(function (key) {
45406  if (key === "default" || key === "__esModule") return;
45407  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
45408  if (key in exports && exports[key] === _direction[key]) return;
45409  Object.defineProperty(exports, key, {
45410    enumerable: true,
45411    get: function () {
45412      return _direction[key];
45413    }
45414  });
45415});
45416
45417var _whitespaceFilter = require("./whitespace-filter.js");
45418
45419Object.keys(_whitespaceFilter).forEach(function (key) {
45420  if (key === "default" || key === "__esModule") return;
45421  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
45422  if (key in exports && exports[key] === _whitespaceFilter[key]) return;
45423  Object.defineProperty(exports, key, {
45424    enumerable: true,
45425    get: function () {
45426      return _whitespaceFilter[key];
45427    }
45428  });
45429});
45430
45431},{"./apply-mixins.js":358,"./composed-contains.js":359,"./composed-parent.js":360,"./direction.js":361,"./match-media-stylesheet-behavior.js":364,"./property-stylesheet-behavior.js":365,"./style/index.js":370,"./whitespace-filter.js":371}],363:[function(require,module,exports){
45432"use strict";
45433
45434Object.defineProperty(exports, "__esModule", {
45435  value: true
45436});
45437exports.IntersectionService = void 0;
45438
45439var _fastElement = require("@microsoft/fast-element");
45440
45441/**
45442 *  A service to batch intersection event callbacks so multiple elements can share a single observer
45443 *
45444 * @public
45445 */
45446class IntersectionService {
45447  constructor() {
45448    this.intersectionDetector = null;
45449    this.observedElements = new Map();
45450    /**
45451     * Request the position of a target element
45452     *
45453     * @internal
45454     */
45455
45456    this.requestPosition = (target, callback) => {
45457      var _a;
45458
45459      if (this.intersectionDetector === null) {
45460        return;
45461      }
45462
45463      if (this.observedElements.has(target)) {
45464        (_a = this.observedElements.get(target)) === null || _a === void 0 ? void 0 : _a.push(callback);
45465        return;
45466      }
45467
45468      this.observedElements.set(target, [callback]);
45469      this.intersectionDetector.observe(target);
45470    };
45471    /**
45472     * Cancel a position request
45473     *
45474     * @internal
45475     */
45476
45477
45478    this.cancelRequestPosition = (target, callback) => {
45479      const callbacks = this.observedElements.get(target);
45480
45481      if (callbacks !== undefined) {
45482        const callBackIndex = callbacks.indexOf(callback);
45483
45484        if (callBackIndex !== -1) {
45485          callbacks.splice(callBackIndex, 1);
45486        }
45487      }
45488    };
45489    /**
45490     * initialize intersection detector
45491     */
45492
45493
45494    this.initializeIntersectionDetector = () => {
45495      if (!_fastElement.$global.IntersectionObserver) {
45496        //intersection observer not supported
45497        return;
45498      }
45499
45500      this.intersectionDetector = new IntersectionObserver(this.handleIntersection, {
45501        root: null,
45502        rootMargin: "0px",
45503        threshold: [0, 1]
45504      });
45505    };
45506    /**
45507     *  Handle intersections
45508     */
45509
45510
45511    this.handleIntersection = entries => {
45512      if (this.intersectionDetector === null) {
45513        return;
45514      }
45515
45516      const pendingCallbacks = [];
45517      const pendingCallbackParams = []; // go through the entries to build a list of callbacks and params for each
45518

45519      entries.forEach(entry => {
45520        var _a; // stop watching this element until we get new update requests for it
45521
45522
45523        (_a = this.intersectionDetector) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);
45524        const thisElementCallbacks = this.observedElements.get(entry.target);
45525
45526        if (thisElementCallbacks !== undefined) {
45527          thisElementCallbacks.forEach(callback => {
45528            let targetCallbackIndex = pendingCallbacks.indexOf(callback);
45529
45530            if (targetCallbackIndex === -1) {
45531              targetCallbackIndex = pendingCallbacks.length;
45532              pendingCallbacks.push(callback);
45533              pendingCallbackParams.push([]);
45534            }
45535
45536            pendingCallbackParams[targetCallbackIndex].push(entry);
45537          });
45538          this.observedElements.delete(entry.target);
45539        }
45540      }); // execute callbacks
45541
45542      pendingCallbacks.forEach((callback, index) => {
45543        callback(pendingCallbackParams[index]);
45544      });
45545    };
45546
45547    this.initializeIntersectionDetector();
45548  }
45549
45550}
45551
45552exports.IntersectionService = IntersectionService;
45553
45554},{"@microsoft/fast-element":151}],364:[function(require,module,exports){
45555"use strict";
45556
45557Object.defineProperty(exports, "__esModule", {
45558  value: true
45559});
45560exports.lightModeStylesheetBehavior = exports.forcedColorsStylesheetBehavior = exports.darkModeStylesheetBehavior = exports.MatchMediaStyleSheetBehavior = exports.MatchMediaBehavior = void 0;
45561
45562/**
45563 * An abstract behavior to react to media queries. Implementations should implement
45564 * the `constructListener` method to perform some action based on media query changes.
45565 *
45566 * @public
45567 */
45568class MatchMediaBehavior {
45569  /**
45570   *
45571   * @param query - The media query to operate from.
45572   */
45573  constructor(query) {
45574    /**
45575     * The behavior needs to operate on element instances but elements might share a behavior instance.
45576     * To ensure proper attachment / detachment per instance, we construct a listener for
45577     * each bind invocation and cache the listeners by element reference.
45578     */
45579    this.listenerCache = new WeakMap();
45580    this.query = query;
45581  }
45582  /**
45583   * Binds the behavior to the element.
45584   * @param source - The element for which the behavior is bound.
45585   */
45586
45587
45588  bind(source) {
45589    const {
45590      query
45591    } = this;
45592    const listener = this.constructListener(source); // Invoke immediately to add if the query currently matches
45593
45594    listener.bind(query)();
45595    query.addListener(listener);
45596    this.listenerCache.set(source, listener);
45597  }
45598  /**
45599   * Unbinds the behavior from the element.
45600   * @param source - The element for which the behavior is unbinding.
45601   */
45602
45603
45604  unbind(source) {
45605    const listener = this.listenerCache.get(source);
45606
45607    if (listener) {
45608      this.query.removeListener(listener);
45609      this.listenerCache.delete(source);
45610    }
45611  }
45612
45613}
45614/**
45615 * A behavior to add or remove a stylesheet from an element based on a media query. The behavior ensures that
45616 * styles are applied while the a query matches the environment and that styles are not applied if the query does
45617 * not match the environment.
45618 *
45619 * @public
45620 */
45621
45622
45623exports.MatchMediaBehavior = MatchMediaBehavior;
45624
45625class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
45626  /**
45627   * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
45628   * @param query - The media query to operate from.
45629   * @param styles - The styles to coordinate with the query.
45630   */
45631  constructor(query, styles) {
45632    super(query);
45633    this.styles = styles;
45634  }
45635  /**
45636   * Defines a function to construct {@link MatchMediaStyleSheetBehavior | MatchMediaStyleSheetBehaviors} for
45637   * a provided query.
45638   * @param query - The media query to operate from.
45639   *
45640   * @public
45641   * @example
45642   *
45643   * ```ts
45644   * import { css } from "@microsoft/fast-element";
45645   * import { MatchMediaStyleSheetBehavior } from "@microsoft/fast-foundation";
45646   *
45647   * const landscapeBehavior = MatchMediaStyleSheetBehavior.with(
45648   *   window.matchMedia("(orientation: landscape)")
45649   * );
45650   * const styles = css`
45651   *   :host {
45652   *     width: 200px;
45653   *     height: 400px;
45654   *   }
45655   * `
45656   * .withBehaviors(landscapeBehavior(css`
45657   *   :host {
45658   *     width: 400px;
45659   *     height: 200px;
45660   *   }
45661   * `))
45662   * ```
45663   */
45664
45665
45666  static with(query) {
45667    return styles => {
45668      return new MatchMediaStyleSheetBehavior(query, styles);
45669    };
45670  }
45671  /**
45672   * Constructs a match-media listener for a provided element.
45673   * @param source - the element for which to attach or detach styles.
45674   * @internal
45675   */
45676
45677
45678  constructListener(source) {
45679    let attached = false;

45680    const styles = this.styles;
45681    return function listener() {
45682      const {
45683        matches
45684      } = this;
45685
45686      if (matches && !attached) {
45687        source.$fastController.addStyles(styles);
45688        attached = matches;
45689      } else if (!matches && attached) {
45690        source.$fastController.removeStyles(styles);
45691        attached = matches;
45692      }
45693    };
45694  }
45695  /**
45696   * Unbinds the behavior from the element.
45697   * @param source - The element for which the behavior is unbinding.
45698   * @internal
45699   */
45700
45701
45702  unbind(source) {
45703    super.unbind(source);
45704    source.$fastController.removeStyles(this.styles);
45705  }
45706
45707}
45708/**
45709 * This can be used to construct a behavior to apply a forced-colors only stylesheet.
45710 * @public
45711 */
45712
45713
45714exports.MatchMediaStyleSheetBehavior = MatchMediaStyleSheetBehavior;
45715const forcedColorsStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(forced-colors)"));
45716/**
45717 * This can be used to construct a behavior to apply a prefers color scheme: dark only stylesheet.
45718 * @public
45719 */
45720
45721exports.forcedColorsStylesheetBehavior = forcedColorsStylesheetBehavior;
45722const darkModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: dark)"));
45723/**
45724 * This can be used to construct a behavior to apply a prefers color scheme: light only stylesheet.
45725 * @public
45726 */
45727
45728exports.darkModeStylesheetBehavior = darkModeStylesheetBehavior;
45729const lightModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: light)"));
45730exports.lightModeStylesheetBehavior = lightModeStylesheetBehavior;
45731
45732},{}],365:[function(require,module,exports){
45733"use strict";
45734
45735Object.defineProperty(exports, "__esModule", {
45736  value: true
45737});
45738exports.PropertyStyleSheetBehavior = void 0;
45739
45740var _fastElement = require("@microsoft/fast-element");
45741
45742/**
45743 * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
45744 * styles are applied while the property matches and that styles are not applied if the property does
45745 * not match.
45746 *
45747 * @public
45748 */
45749class PropertyStyleSheetBehavior {
45750  /**
45751   * Constructs a {@link PropertyStyleSheetBehavior} instance.
45752   * @param propertyName - The property name to operate from.
45753   * @param value - The property value to operate from.
45754   * @param styles - The styles to coordinate with the property.
45755   */
45756  constructor(propertyName, value, styles) {
45757    this.propertyName = propertyName;
45758    this.value = value;
45759    this.styles = styles;
45760  }
45761  /**
45762   * Binds the behavior to the element.
45763   * @param elementInstance - The element for which the property is applied.
45764   */
45765
45766
45767  bind(elementInstance) {
45768    _fastElement.Observable.getNotifier(elementInstance).subscribe(this, this.propertyName);
45769
45770    this.handleChange(elementInstance, this.propertyName);
45771  }
45772  /**
45773   * Unbinds the behavior from the element.
45774   * @param source - The element for which the behavior is unbinding.
45775   * @internal
45776   */
45777
45778
45779  unbind(source) {
45780    _fastElement.Observable.getNotifier(source).unsubscribe(this, this.propertyName);
45781
45782    source.$fastController.removeStyles(this.styles);
45783  }
45784  /**
45785   * Change event for the provided element.
45786   * @param source - the element for which to attach or detach styles.
45787   * @param key - the key to lookup to know if the element already has the styles
45788   * @internal
45789   */
45790
45791
45792  handleChange(source, key) {
45793    if (source[key] === this.value) {
45794      source.$fastController.addStyles(this.styles);
45795    } else {
45796      source.$fastController.removeStyles(this.styles);
45797    }
45798  }
45799
45800}
45801
45802exports.PropertyStyleSheetBehavior = PropertyStyleSheetBehavior;
45803
45804},{"@microsoft/fast-element":151}],366:[function(require,module,exports){
45805"use strict";
45806
45807Object.defineProperty(exports, "__esModule", {
45808  value: true
45809});
45810exports.getRootActiveElement = getRootActiveElement;
45811
45812// returns the active element in the shadow context of the element in question.
45813function getRootActiveElement(element) {
45814  const rootNode = element.getRootNode();
45815
45816  if (rootNode instanceof ShadowRoot) {
45817    return rootNode.activeElement;
45818  }
45819
45820  return document.activeElement;
45821}
45822
45823},{}],367:[function(require,module,exports){
45824"use strict";
45825
45826Object.defineProperty(exports, "__esModule", {
45827  value: true
45828});
45829exports.disabledCursor = void 0;
45830
45831/**
45832 * The CSS value for disabled cursors.
45833 * @public
45834 */
45835const disabledCursor = "not-allowed";
45836exports.disabledCursor = disabledCursor;
45837
45838},{}],368:[function(require,module,exports){
45839"use strict";
45840
45841Object.defineProperty(exports, "__esModule", {
45842  value: true
45843});
45844exports.display = display;
45845exports.hidden = void 0;
45846
45847/**
45848 * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
45849 * @public
45850 */
45851const hidden = `:host([hidden]){display:none}`;
45852/**
45853 * Applies a CSS display property.
45854 * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
45855 * @param display - The CSS display property value
45856 * @public
45857 */
45858
45859exports.hidden = hidden;
45860
45861function display(displayValue) {
45862  return `${hidden}:host{display:${displayValue}}`;

45863}
45864
45865},{}],369:[function(require,module,exports){
45866"use strict";
45867
45868Object.defineProperty(exports, "__esModule", {
45869  value: true
45870});
45871exports.focusVisible = void 0;
45872
45873var _fastWebUtilities = require("@microsoft/fast-web-utilities");
45874
45875/**
45876 * The string representing the focus selector to be used. Value
45877 * will be "focus-visible" when https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
45878 * is supported and "focus" when it is not.
45879 *
45880 * @public
45881 */
45882const focusVisible = (0, _fastWebUtilities.canUseFocusVisible)() ? "focus-visible" : "focus";
45883exports.focusVisible = focusVisible;
45884
45885},{"@microsoft/fast-web-utilities":379}],370:[function(require,module,exports){
45886"use strict";
45887
45888Object.defineProperty(exports, "__esModule", {
45889  value: true
45890});
45891
45892var _disabled = require("./disabled.js");
45893
45894Object.keys(_disabled).forEach(function (key) {
45895  if (key === "default" || key === "__esModule") return;
45896  if (key in exports && exports[key] === _disabled[key]) return;
45897  Object.defineProperty(exports, key, {
45898    enumerable: true,
45899    get: function () {
45900      return _disabled[key];
45901    }
45902  });
45903});
45904
45905var _display = require("./display.js");
45906

45907Object.keys(_display).forEach(function (key) {
45908  if (key === "default" || key === "__esModule") return;
45909  if (key in exports && exports[key] === _display[key]) return;
45910  Object.defineProperty(exports, key, {
45911    enumerable: true,
45912    get: function () {
45913      return _display[key];
45914    }
45915  });
45916});
45917
45918var _focus = require("./focus.js");
45919
45920Object.keys(_focus).forEach(function (key) {
45921  if (key === "default" || key === "__esModule") return;
45922  if (key in exports && exports[key] === _focus[key]) return;
45923  Object.defineProperty(exports, key, {
45924    enumerable: true,
45925    get: function () {
45926      return _focus[key];
45927    }
45928  });
45929});
45930
45931},{"./disabled.js":367,"./display.js":368,"./focus.js":369}],371:[function(require,module,exports){
45932"use strict";
45933
45934Object.defineProperty(exports, "__esModule", {
45935  value: true
45936});
45937exports.whitespaceFilter = whitespaceFilter;
45938
45939/**
45940 * a method to filter out any whitespace _only_ nodes, to be used inside a template
45941 * @param value - The Node that is being inspected
45942 * @param index - The index of the node within the array
45943 * @param array - The Node array that is being filtered
45944 *
45945 * @public
45946 */
45947function whitespaceFilter(value, index, array) {
45948  return value.nodeType !== Node.TEXT_NODE ? true : typeof value.nodeValue === "string" && !!value.nodeValue.trim().length;
45949}
45950
45951},{}],372:[function(require,module,exports){
45952"use strict";
45953
45954Object.defineProperty(exports, "__esModule", {
45955  value: true
45956});
45957exports.__assign = void 0;
45958exports.__asyncDelegator = __asyncDelegator;
45959exports.__asyncGenerator = __asyncGenerator;
45960exports.__asyncValues = __asyncValues;
45961exports.__await = __await;
45962exports.__awaiter = __awaiter;
45963exports.__classPrivateFieldGet = __classPrivateFieldGet;
45964exports.__classPrivateFieldSet = __classPrivateFieldSet;
45965exports.__createBinding = __createBinding;
45966exports.__decorate = __decorate;
45967exports.__exportStar = __exportStar;
45968exports.__extends = __extends;
45969exports.__generator = __generator;
45970exports.__importDefault = __importDefault;
45971exports.__importStar = __importStar;

45972exports.__makeTemplateObject = __makeTemplateObject;
45973exports.__metadata = __metadata;
45974exports.__param = __param;
45975exports.__read = __read;
45976exports.__rest = __rest;
45977exports.__spread = __spread;
45978exports.__spreadArrays = __spreadArrays;
45979exports.__values = __values;
45980
45981/*! *****************************************************************************
45982Copyright (c) Microsoft Corporation.
45983
45984Permission to use, copy, modify, and/or distribute this software for any
45985purpose with or without fee is hereby granted.
45986
45987THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
45988REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
45989AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
45990INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
45991LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
45992OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
45993PERFORMANCE OF THIS SOFTWARE.
45994***************************************************************************** */
45995
45996/* global Reflect, Promise */
45997var extendStatics = function (d, b) {
45998  extendStatics = Object.setPrototypeOf || {
45999    __proto__: []
46000  } instanceof Array && function (d, b) {
46001    d.__proto__ = b;
46002  } || function (d, b) {
46003    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
46004  };
46005
46006  return extendStatics(d, b);
46007};
46008
46009function __extends(d, b) {
46010  extendStatics(d, b);
46011
46012  function __() {
46013    this.constructor = d;
46014  }
46015
46016  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
46017}
46018
46019var __assign = function () {
46020  exports.__assign = __assign = Object.assign || function __assign(t) {
46021    for (var s, i = 1, n = arguments.length; i < n; i++) {
46022      s = arguments[i];
46023
46024      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
46025    }
46026
46027    return t;
46028  };
46029
46030  return __assign.apply(this, arguments);
46031};
46032
46033exports.__assign = __assign;
46034
46035function __rest(s, e) {
46036  var t = {};
46037
46038  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
46039
46040  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
46041    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
46042  }
46043  return t;
46044}
46045
46046function __decorate(decorators, target, key, desc) {
46047  var c = arguments.length,
46048      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
46049      d;
46050  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
46051  return c > 3 && r && Object.defineProperty(target, key, r), r;
46052}
46053
46054function __param(paramIndex, decorator) {
46055  return function (target, key) {
46056    decorator(target, key, paramIndex);
46057  };
46058}
46059
46060function __metadata(metadataKey, metadataValue) {
46061  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
46062}
46063
46064function __awaiter(thisArg, _arguments, P, generator) {
46065  function adopt(value) {
46066    return value instanceof P ? value : new P(function (resolve) {
46067      resolve(value);
46068    });
46069  }
46070
46071  return new (P || (P = Promise))(function (resolve, reject) {
46072    function fulfilled(value) {
46073      try {
46074        step(generator.next(value));
46075      } catch (e) {
46076        reject(e);
46077      }
46078    }
46079
46080    function rejected(value) {
46081      try {
46082        step(generator["throw"](value));
46083      } catch (e) {
46084        reject(e);
46085      }
46086    }
46087
46088    function step(result) {
46089      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
46090    }
46091
46092    step((generator = generator.apply(thisArg, _arguments || [])).next());
46093  });
46094}
46095
46096function __generator(thisArg, body) {
46097  var _ = {
46098    label: 0,
46099    sent: function () {
46100      if (t[0] & 1) throw t[1];
46101      return t[1];
46102    },
46103    trys: [],
46104    ops: []
46105  },
46106      f,
46107      y,
46108      t,
46109      g;
46110  return g = {
46111    next: verb(0),
46112    "throw": verb(1),
46113    "return": verb(2)
46114  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
46115    return this;
46116  }), g;
46117
46118  function verb(n) {
46119    return function (v) {
46120      return step([n, v]);
46121    };
46122  }
46123
46124  function step(op) {
46125    if (f) throw new TypeError("Generator is already executing.");
46126
46127    while (_) try {

vendor: 5,208 bytes, lines 46128-46361

46128      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
46129      if (y = 0, t) op = [op[0] & 2, t.value];
46130
46131      switch (op[0]) {
46132        case 0:
46133        case 1:
46134          t = op;
46135          break;
46136
46137        case 4:
46138          _.label++;
46139          return {
46140            value: op[1],
46141            done: false
46142          };
46143
46144        case 5:
46145          _.label++;
46146          y = op[1];
46147          op = [0];
46148          continue;
46149
46150        case 7:
46151          op = _.ops.pop();
46152
46153          _.trys.pop();
46154
46155          continue;
46156
46157        default:
46158          if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
46159            _ = 0;
46160            continue;
46161          }
46162
46163          if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
46164            _.label = op[1];
46165            break;
46166          }
46167
46168          if (op[0] === 6 && _.label < t[1]) {
46169            _.label = t[1];
46170            t = op;
46171            break;
46172          }
46173
46174          if (t && _.label < t[2]) {
46175            _.label = t[2];
46176
46177            _.ops.push(op);
46178
46179            break;
46180          }
46181
46182          if (t[2]) _.ops.pop();
46183
46184          _.trys.pop();
46185
46186          continue;
46187      }
46188
46189      op = body.call(thisArg, _);
46190    } catch (e) {
46191      op = [6, e];
46192      y = 0;
46193    } finally {
46194      f = t = 0;
46195    }
46196
46197    if (op[0] & 5) throw op[1];
46198    return {
46199      value: op[0] ? op[1] : void 0,
46200      done: true
46201    };
46202  }
46203}
46204
46205function __createBinding(o, m, k, k2) {
46206  if (k2 === undefined) k2 = k;
46207  o[k2] = m[k];
46208}
46209
46210function __exportStar(m, exports) {
46211  for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) exports[p] = m[p];
46212}
46213
46214function __values(o) {
46215  var s = typeof Symbol === "function" && Symbol.iterator,
46216      m = s && o[s],
46217      i = 0;
46218  if (m) return m.call(o);
46219  if (o && typeof o.length === "number") return {
46220    next: function () {
46221      if (o && i >= o.length) o = void 0;
46222      return {
46223        value: o && o[i++],
46224        done: !o
46225      };
46226    }
46227  };
46228  throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
46229}
46230
46231function __read(o, n) {
46232  var m = typeof Symbol === "function" && o[Symbol.iterator];
46233  if (!m) return o;
46234  var i = m.call(o),
46235      r,
46236      ar = [],
46237      e;
46238
46239  try {
46240    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
46241  } catch (error) {
46242    e = {
46243      error: error
46244    };
46245  } finally {
46246    try {
46247      if (r && !r.done && (m = i["return"])) m.call(i);
46248    } finally {
46249      if (e) throw e.error;
46250    }
46251  }
46252
46253  return ar;
46254}
46255
46256function __spread() {
46257  for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
46258
46259  return ar;
46260}
46261
46262function __spreadArrays() {
46263  for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
46264
46265  for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
46266
46267  return r;
46268}
46269
46270;
46271
46272function __await(v) {
46273  return this instanceof __await ? (this.v = v, this) : new __await(v);
46274}
46275
46276function __asyncGenerator(thisArg, _arguments, generator) {
46277  if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
46278  var g = generator.apply(thisArg, _arguments || []),
46279      i,
46280      q = [];
46281  return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () {
46282    return this;
46283  }, i;
46284
46285  function verb(n) {
46286    if (g[n]) i[n] = function (v) {
46287      return new Promise(function (a, b) {
46288        q.push([n, v, a, b]) > 1 || resume(n, v);
46289      });
46290    };
46291  }
46292
46293  function resume(n, v) {
46294    try {
46295      step(g[n](v));
46296    } catch (e) {
46297      settle(q[0][3], e);
46298    }
46299  }
46300
46301  function step(r) {
46302    r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r);
46303  }
46304
46305  function fulfill(value) {
46306    resume("next", value);
46307  }
46308
46309  function reject(value) {
46310    resume("throw", value);
46311  }
46312
46313  function settle(f, v) {
46314    if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]);
46315  }
46316}
46317
46318function __asyncDelegator(o) {
46319  var i, p;
46320  return i = {}, verb("next"), verb("throw", function (e) {
46321    throw e;
46322  }), verb("return"), i[Symbol.iterator] = function () {
46323    return this;
46324  }, i;
46325
46326  function verb(n, f) {
46327    i[n] = o[n] ? function (v) {
46328      return (p = !p) ? {
46329        value: __await(o[n](v)),
46330        done: n === "return"
46331      } : f ? f(v) : v;
46332    } : f;
46333  }
46334}
46335
46336function __asyncValues(o) {
46337  if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
46338  var m = o[Symbol.asyncIterator],
46339      i;
46340  return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () {
46341    return this;
46342  }, i);
46343
46344  function verb(n) {
46345    i[n] = o[n] && function (v) {
46346      return new Promise(function (resolve, reject) {
46347        v = o[n](v), settle(resolve, reject, v.done, v.value);
46348      });
46349    };
46350  }
46351
46352  function settle(resolve, reject, d, v) {
46353    Promise.resolve(v).then(function (v) {
46354      resolve({
46355        value: v,
46356        done: d
46357      });
46358    }, reject);
46359  }
46360}
46361

46362function __makeTemplateObject(cooked, raw) {
46363  if (Object.defineProperty) {
46364    Object.defineProperty(cooked, "raw", {
46365      value: raw
46366    });
46367  } else {
46368    cooked.raw = raw;
46369  }
46370
46371  return cooked;
46372}
46373
46374;
46375
46376function __importStar(mod) {
46377  if (mod && mod.__esModule) return mod;
46378  var result = {};
46379  if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
46380  result.default = mod;
46381  return result;
46382}
46383
46384function __importDefault(mod) {
46385  return mod && mod.__esModule ? mod : {
46386    default: mod
46387  };
46388}
46389
46390function __classPrivateFieldGet(receiver, privateMap) {
46391  if (!privateMap.has(receiver)) {
46392    throw new TypeError("attempted to get private field on non-instance");
46393  }
46394
46395  return privateMap.get(receiver);
46396}
46397
46398function __classPrivateFieldSet(receiver, privateMap, value) {
46399  if (!privateMap.has(receiver)) {
46400    throw new TypeError("attempted to set private field on non-instance");
46401  }
46402
46403  privateMap.set(receiver, value);
46404  return value;
46405}
46406
46407},{}],373:[function(require,module,exports){
46408"use strict";
46409
46410Object.defineProperty(exports, "__esModule", {
46411  value: true
46412});
46413exports.Orientation = void 0;
46414
46415/**
46416 * Standard orientation values
46417 */
46418const Orientation = {
46419  horizontal: "horizontal",
46420  vertical: "vertical"
46421};
46422exports.Orientation = Orientation;
46423
46424},{}],374:[function(require,module,exports){
46425"use strict";
46426
46427Object.defineProperty(exports, "__esModule", {
46428  value: true
46429});
46430exports.findLastIndex = findLastIndex;
46431
46432/**
46433 * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
46434 *
46435 * @param array - the array to test
46436 * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
46437 */
46438function findLastIndex(array, predicate) {
46439  let k = array.length;
46440
46441  while (k--) {
46442    if (predicate(array[k], k, array)) {
46443      return k;
46444    }
46445  }
46446
46447  return -1;
46448}
46449
46450},{}],375:[function(require,module,exports){
46451"use strict";
46452
46453Object.defineProperty(exports, "__esModule", {
46454  value: true
46455});
46456exports.classNames = classNames;
46457
46458function classNames(...args) {
46459  return args.reduce((accum, value) => {
46460    const leadingChar = accum.length ? " " : "";
46461    const normalizedValue = Array.isArray(value) && value[1] ? classNames.call(null, value[0]) : typeof value === "function" ? value() : typeof value === "string" ? value : "";
46462    return !normalizedValue.length ? accum : accum + leadingChar + normalizedValue;
46463  }, "");
46464}
46465
46466},{}],376:[function(require,module,exports){
46467"use strict";
46468
46469Object.defineProperty(exports, "__esModule", {
46470  value: true
46471});
46472exports.canUseCssGrid = canUseCssGrid;
46473exports.canUseFocusVisible = canUseFocusVisible;
46474exports.canUseForcedColors = canUseForcedColors;
46475exports.canUsedForcedColors = void 0;
46476exports.getDisplayedNodes = getDisplayedNodes;
46477exports.getKeyCode = getKeyCode;
46478exports.isHTMLElement = isHTMLElement;
46479exports.resetDocumentCache = resetDocumentCache;
46480
46481var _exenvEs = require("exenv-es6");
46482
46483/**
46484 * A test that ensures that all arguments are HTML Elements
46485 */
46486function isHTMLElement(...args) {
46487  return args.every(arg => arg instanceof HTMLElement);
46488}
46489/**
46490 * Returns all displayed elements inside of a root node that match a provided selector
46491 */
46492
46493
46494function getDisplayedNodes(rootNode, selector) {
46495  if (!rootNode || !selector || !isHTMLElement(rootNode)) {
46496    return;
46497  }
46498
46499  const nodes = Array.from(rootNode.querySelectorAll(selector)); // offsetParent will be null if the element isn't currently displayed,
46500  // so this will allow us to operate only on visible nodes
46501
46502  return nodes.filter(node => node.offsetParent !== null);
46503}
46504/**
46505 * Gets the numeric key code associated with a keyboard event. This method is for use with DOM level 3 events
46506 * that still use the deprecated keyCode property.
46507 */
46508
46509
46510function getKeyCode(event) {
46511  return event === null ? null : event.which || event.keyCode || event.charCode;
46512}
46513/**
46514 * Returns the nonce used in the page, if any.
46515 *
46516 * Based on https://github.com/cssinjs/jss/blob/master/packages/jss/src/DomRenderer.js
46517 */
46518
46519
46520function getNonce() {
46521  const node = document.querySelector('meta[property="csp-nonce"]');
46522
46523  if (node) {
46524    return node.getAttribute("content");
46525  } else {
46526    return null;
46527  }
46528}
46529/**
46530 * Test if the document supports :focus-visible
46531 */
46532
46533
46534let _canUseFocusVisible;
46535
46536function canUseFocusVisible() {

46537  if (typeof _canUseFocusVisible === "boolean") {
46538    return _canUseFocusVisible;
46539  }
46540
46541  if (!(0, _exenvEs.canUseDOM)()) {
46542    _canUseFocusVisible = false;
46543    return _canUseFocusVisible;
46544  } // Check to see if the document supports the focus-visible element
46545
46546
46547  const styleElement = document.createElement("style"); // If nonces are present on the page, use it when creating the style element
46548  // to test focus-visible support.
46549
46550  const styleNonce = getNonce();
46551
46552  if (styleNonce !== null) {
46553    styleElement.setAttribute("nonce", styleNonce);
46554  }
46555
46556  document.head.appendChild(styleElement);
46557
46558  try {
46559    styleElement.sheet.insertRule("foo:focus-visible {color:inherit}", 0);
46560    _canUseFocusVisible = true;
46561  } catch (e) {
46562    _canUseFocusVisible = false;
46563  } finally {
46564    document.head.removeChild(styleElement);
46565  }
46566
46567  return _canUseFocusVisible;
46568}
46569
46570let _canUseCssGrid;
46571
46572function canUseCssGrid() {
46573  if (typeof _canUseCssGrid === "boolean") {
46574    return _canUseCssGrid;
46575  }
46576
46577  try {
46578    _canUseCssGrid = CSS.supports("display", "grid");
46579  } catch (_a) {
46580    _canUseCssGrid = false;
46581  }
46582
46583  return _canUseCssGrid;
46584}
46585
46586function canUseForcedColors() {
46587  return (0, _exenvEs.canUseDOM)() && (window.matchMedia("(forced-colors: none)").matches || window.matchMedia("(forced-colors: active)").matches);
46588}
46589
46590function resetDocumentCache() {
46591  _canUseCssGrid = undefined;
46592  _canUseFocusVisible = undefined;
46593}
46594/**
46595 * @deprecated Use 'canUseForcedColors' instead
46596 */
46597
46598
46599const canUsedForcedColors = canUseForcedColors;
46600exports.canUsedForcedColors = canUsedForcedColors;
46601
46602},{"exenv-es6":448}],377:[function(require,module,exports){
46603"use strict";
46604
46605Object.defineProperty(exports, "__esModule", {
46606  value: true
46607});
46608exports.eventRepeatEvent = exports.eventReadyStateChange = exports.eventRateChange = exports.eventPushSubscriptionChange = exports.eventPush = exports.eventProgress = exports.eventPopState = exports.eventPointerUp = exports.eventPointerOver = exports.eventPointerOut = exports.eventPointerMove = exports.eventPointerLockError = exports.eventPointerLockChange = exports.eventPointerLeave = exports.eventPointerEnter = exports.eventPointerDown = exports.eventPointerCancel = exports.eventPlaying = exports.eventPlay = exports.eventPause = exports.eventPaste = exports.eventPageShow = exports.eventPageHide = exports.eventOrientationChange = exports.eventOpen = exports.eventOnline = exports.eventOffline = exports.eventNotificationClick = exports.eventMouseUp = exports.eventMouseOver = exports.eventMouseOut = exports.eventMouseMove = exports.eventMouseLeave = exports.eventMouseEnter = exports.eventMouseDown = exports.eventMessageError = exports.eventMessage = exports.eventLostPointerCapture = exports.eventLoadedMetaData = exports.eventLoadedData = exports.eventLoadStart = exports.eventLoadEnd = exports.eventLoad = exports.eventLevelChange = exports.eventKeyUp = exports.eventKeyDown = exports.eventInvalid = exports.eventInput = exports.eventHashChange = exports.eventGotPointerCapture = exports.eventGamePadDisconnected = exports.eventGamePadConnected = exports.eventFullScreenError = exports.eventFullScreenChange = exports.eventFocusOut = exports.eventFocusIn = exports.eventFocus = exports.eventError = exports.eventEnded = exports.eventEndEvent = exports.eventEmptied = exports.eventDurationChange = exports.eventDrop = exports.eventDragStart = exports.eventDragOver = exports.eventDragLeave = exports.eventDragEnter = exports.eventDragEnd = exports.eventDrag = exports.eventDischargingTimeChange = exports.eventDeviceOrientation = exports.eventDeviceMotion = exports.eventDeviceChange = exports.eventDblClick = exports.eventCut = exports.eventCopy = exports.eventContextMenu = exports.eventCompositionUpdate = exports.eventCompositionStart = exports.eventCompositionEnd = exp

46608orts.eventComplete = exports.eventClose = exports.eventClick = exports.eventChargingTimeChange = exports.eventChargingChange = exports.eventChange = exports.eventCanPlayThrough = exports.eventCanPlay = exports.eventBlur = exports.eventBlocked = exports.eventBeginEvent = exports.eventBeforeUnload = exports.eventBeforePrint = exports.eventAppInstalled = exports.eventAnimationStart = exports.eventAnimationIteration = exports.eventAnimationEnd = exports.eventAnimationCancel = exports.eventAfterPrint = exports.eventAbort = void 0;
46609exports.eventWheel = exports.eventWaiting = exports.eventVolumeChange = exports.eventVisibilityChange = exports.eventVersionChange = exports.eventUserProximity = exports.eventUpgradeNeeded = exports.eventUnload = exports.eventTransitionEnd = exports.eventTouchStart = exports.eventTouchMove = exports.eventTouchEnd = exports.eventTouchCancel = exports.eventTimeUpdate = exports.eventTimeOut = exports.eventSuspend = exports.eventSuccess = exports.eventSubmit = exports.eventStorage = exports.eventStart = exports.eventStalled = exports.eventSlotChange = exports.eventShow = exports.eventSelect = exports.eventSeeking = exports.eventSeeked = exports.eventScroll = exports.eventSVGZoom = exports.eventSVGUnload = exports.eventSVGScroll = exports.eventSVGResize = exports.eventSVGLoad = exports.eventSVGError = exports.eventSVGAbort = exports.eventResourceTimingBufferFull = exports.eventResize = exports.eventReset = exports.eventRepeatEvent = exports.eventReadyStateChange = exports.eventRateChange = exports.eventPushSubscriptionChange = exports.eventPush = exports.eventProgress = exports.eventPopState = exports.eventPointerUp = exports.eventPointerOver = exports.eventPointerOut = exports.eventPointerMove = exports.eventPointerLockError = exports.eventPointerLockChange = exports.eventPointerLeave = exports.eventPointerEnter = exports.eventPointerDown = exports.eventPointerCancel = exports.eventPlaying = exports.eventPlay = exports.eventPause = exports.eventPaste = exports.eventPageShow = exports.eventPageHide = exports.eventOrientationChange = exports.eventOpen = exports.eventOnline = exports.eventOffline = exports.eventNotificationClick = exports.eventMouseUp = exports.eventMouseOver = exports.eventMouseOut = exports.eventMouseMove = exports.eventMouseLeave = exports.eventMouseEnter = exports.eventMouseDown = exports.eventMessageError = exports.eventMessage = exports.eventLostPointerCapture = exports.eventLoadedMetaData = exports.eventLoadedData = exports.eventLoadStart = exports.eventLoadEnd = exports.eventLoad = exports.eventLevelChange = exports.eventKeyUp = exports.eventKeyDown = exports.eventInvalid = exports.eventInput = exports.eventHashChange = exports.eventGotPointerCapture = exports.eventGamePadDisconnected = exports.eventGamePadConnected = exports.eventFullScreenError = exports.eventFullScreenChange = exports.eventFocusOut = exports.eventFocusIn = exports.eventFocus = exports.eventError = exports.eventEnded = exports.eventEndEvent = exports.eventEmptied = exports.eventDurationChange = exports.eventDrop = exports.eventDragStart = exports.eventDragOver = exports.eventDragLeave = exports.eventDragEnter = exports.eventDragEnd = exports.eventDrag = exports.eventDischargingTimeChange = exports.eventDeviceOrientation = exports.eventDeviceMotion = exports.eventDeviceChange = exports.eventDblClick = exports.eventCut = exports.eventCopy = exports.eventContextMenu = exports.eventCompositionUpdate = exports.eventCompositionStart = exports.eventCompositionEnd = exp

46609orts.eventComplete = exports.eventClose = exports.eventClick = exports.eventChargingTimeChange = exports.eventChargingChange = exports.eventChange = exports.eventCanPlayThrough = exports.eventCanPlay = exports.eventBlur = exports.eventBlocked = exports.eventBeginEvent = exports.eventBeforeUnload = exports.eventBeforePrint = exports.eventAppInstalled = exports.eventAnimationStart = exports.eventAnimationIteration = exports.eventAnimationEnd = exports.eventAnimationCancel = exports.eventAfterPrint = exports.eventAbort = void 0;
46610
46611/**
46612 * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
46613 * and should include all non-deprecated and non-experimental Standard events
46614 */
46615const eventAbort = "abort";
46616exports.eventAbort = eventAbort;
46617const eventAfterPrint = "afterprint";
46618exports.eventAfterPrint = eventAfterPrint;
46619const eventAnimationCancel = "animationcancel";
46620exports.eventAnimationCancel = eventAnimationCancel;
46621const eventAnimationEnd = "animationend";
46622exports.eventAnimationEnd = eventAnimationEnd;
46623const eventAnimationIteration = "animationiteration";
46624exports.eventAnimationIteration = eventAnimationIteration;
46625const eventAnimationStart = "animationstart";
46626exports.eventAnimationStart = eventAnimationStart;
46627const eventAppInstalled = "appinstalled";
46628exports.eventAppInstalled = eventAppInstalled;
46629const eventBeforePrint = "beforeprint";
46630exports.eventBeforePrint = eventBeforePrint;
46631const eventBeforeUnload = "beforeunload";
46632exports.eventBeforeUnload = eventBeforeUnload;
46633const eventBeginEvent = "beginEvent";
46634exports.eventBeginEvent = eventBeginEvent;
46635const eventBlocked = "blocked";
46636exports.eventBlocked = eventBlocked;
46637const eventBlur = "blur";
46638exports.eventBlur = eventBlur;
46639const eventCanPlay = "canplay";
46640exports.eventCanPlay = eventCanPlay;
46641const eventCanPlayThrough = "canplaythrough";
46642exports.eventCanPlayThrough = eventCanPlayThrough;
46643const eventChange = "change";
46644exports.eventChange = eventChange;
46645const eventChargingChange = "chargingchange";
46646exports.eventChargingChange = eventChargingChange;
46647const eventChargingTimeChange = "chargingtimechange";
46648exports.eventChargingTimeChange = eventChargingTimeChange;
46649const eventClick = "click";
46650exports.eventClick = eventClick;
46651const eventClose = "close";
46652exports.eventClose = eventClose;
46653const eventComplete = "complete";
46654exports.eventComplete = eventComplete;
46655const eventCompositionEnd = "compositionend";
46656exports.eventCompositionEnd = eventCompositionEnd;
46657const eventCompositionStart = "compositionstart";
46658exports.eventCompositionStart = eventCompositionStart;
46659const eventCompositionUpdate = "compositionupdate";
46660exports.eventCompositionUpdate = eventCompositionUpdate;
46661const eventContextMenu = "contextmenu";
46662exports.eventContextMenu = eventContextMenu;
46663const eventCopy = "copy";
46664exports.eventCopy = eventCopy;
46665const eventCut = "cut";
46666exports.eventCut = eventCut;
46667const eventDblClick = "dblclick";
46668exports.eventDblClick = eventDblClick;
46669const eventDeviceChange = "devicechange";
46670exports.eventDeviceChange = eventDeviceChange;
46671const eventDeviceMotion = "devicemotion";
46672exports.eventDeviceMotion = eventDeviceMotion;
46673const eventDeviceOrientation = "deviceorientation";
46674exports.eventDeviceOrientation = eventDeviceOrientation;
46675const eventDischargingTimeChange = "dischargingtimechange";
46676exports.eventDischargingTimeChange = eventDischargingTimeChange;
46677const eventDrag = "drag";
46678exports.eventDrag = eventDrag;
46679const eventDragEnd = "dragend";
46680exports.eventDragEnd = eventDragEnd;
46681const eventDragEnter = "dragenter";
46682exports.eventDragEnter = eventDragEnter;
46683const eventDragLeave = "dragleave";
46684exports.eventDragLeave = eventDragLeave;
46685const eventDragOver = "dragover";
46686exports.eventDragOver = eventDragOver;
46687const eventDragStart = "dragstart";
46688exports.eventDragStart = eventDragStart;
46689const eventDrop = "drop";
46690exports.eventDrop = eventDrop;
46691const eventDurationChange = "durationchange";
46692exports.eventDurationChange = eventDurationChange;
46693const eventEmptied = "emptied";
46694exports.eventEmptied = eventEmptied;
46695const eventEnded = "ended";
46696exports.eventEnded = eventEnded;
46697const eventEndEvent = "endevent";
46698exports.eventEndEvent = eventEndEvent;
46699const eventError = "error";
46700exports.eventError = eventError;
46701const eventFocus = "focus";
46702exports.eventFocus = eventFocus;
46703const eventFocusIn = "focusin";
46704exports.eventFocusIn = eventFocusIn;
46705const eventFocusOut = "focusout";
46706exports.eventFocusOut = eventFocusOut;
46707const eventFullScreenChange = "fullscreenchange";
46708exports.eventFullScreenChange = eventFullScreenChange;
46709const eventFullScreenError = "fullscreenerror";
46710exports.eventFullScreenError = eventFullScreenError;
46711const eventGamePadConnected = "gamepadconnected";
46712exports.eventGamePadConnected = eventGamePadConnected;
46713const eventGamePadDisconnected = "gamepaddisconnected";
46714exports.eventGamePadDisconnected = eventGamePadDisconnected;
46715const eventGotPointerCapture = "gotpointercapture";
46716exports.eventGotPointerCapture = eventGotPointerCapture;

46717const eventHashChange = "hashchange";
46718exports.eventHashChange = eventHashChange;
46719const eventLostPointerCapture = "lostpointercapture";
46720exports.eventLostPointerCapture = eventLostPointerCapture;
46721const eventInput = "input";
46722exports.eventInput = eventInput;
46723const eventInvalid = "invalid";
46724exports.eventInvalid = eventInvalid;
46725const eventKeyDown = "keydown";
46726exports.eventKeyDown = eventKeyDown;
46727const eventKeyUp = "keyup";
46728exports.eventKeyUp = eventKeyUp;
46729const eventLevelChange = "levelchange";
46730exports.eventLevelChange = eventLevelChange;
46731const eventLoad = "load";
46732exports.eventLoad = eventLoad;
46733const eventLoadedData = "loadeddata";
46734exports.eventLoadedData = eventLoadedData;
46735const eventLoadedMetaData = "loadedmetadata";
46736exports.eventLoadedMetaData = eventLoadedMetaData;
46737const eventLoadEnd = "loadend";
46738exports.eventLoadEnd = eventLoadEnd;
46739const eventLoadStart = "loadstart";
46740exports.eventLoadStart = eventLoadStart;
46741const eventMessage = "message";
46742exports.eventMessage = eventMessage;
46743const eventMessageError = "messageerror";
46744exports.eventMessageError = eventMessageError;
46745const eventMouseDown = "mousedown";
46746exports.eventMouseDown = eventMouseDown;
46747const eventMouseEnter = "mouseenter";
46748exports.eventMouseEnter = eventMouseEnter;
46749const eventMouseLeave = "mouseleave";
46750exports.eventMouseLeave = eventMouseLeave;
46751const eventMouseMove = "mousemove";
46752exports.eventMouseMove = eventMouseMove;
46753const eventMouseOut = "mouseout";
46754exports.eventMouseOut = eventMouseOut;
46755const eventMouseOver = "mouseover";
46756exports.eventMouseOver = eventMouseOver;
46757const eventMouseUp = "mouseup";
46758exports.eventMouseUp = eventMouseUp;
46759const eventNotificationClick = "notificationclick";
46760exports.eventNotificationClick = eventNotificationClick;
46761const eventOffline = "offline";
46762exports.eventOffline = eventOffline;
46763const eventOnline = "online";
46764exports.eventOnline = eventOnline;
46765const eventOpen = "open";
46766exports.eventOpen = eventOpen;
46767const eventOrientationChange = "orientationchange";
46768exports.eventOrientationChange = eventOrientationChange;
46769const eventPageHide = "pagehide";
46770exports.eventPageHide = eventPageHide;
46771const eventPageShow = "pageshow";
46772exports.eventPageShow = eventPageShow;
46773const eventPaste = "paste";
46774exports.eventPaste = eventPaste;
46775const eventPause = "pause";
46776exports.eventPause = eventPause;
46777const eventPointerCancel = "pointercancel";
46778exports.eventPointerCancel = eventPointerCancel;
46779const eventPointerDown = "pointerdown";
46780exports.eventPointerDown = eventPointerDown;
46781const eventPointerEnter = "pointerenter";
46782exports.eventPointerEnter = eventPointerEnter;
46783const eventPointerLeave = "pointerleave";
46784exports.eventPointerLeave = eventPointerLeave;
46785const eventPointerLockChange = "pointerlockchange";
46786exports.eventPointerLockChange = eventPointerLockChange;
46787const eventPointerLockError = "pointerlockerror";
46788exports.eventPointerLockError = eventPointerLockError;
46789const eventPointerMove = "pointermove";
46790exports.eventPointerMove = eventPointerMove;
46791const eventPointerOut = "pointerout";
46792exports.eventPointerOut = eventPointerOut;
46793const eventPointerOver = "pointerover";
46794exports.eventPointerOver = eventPointerOver;
46795const eventPointerUp = "pointerup";
46796exports.eventPointerUp = eventPointerUp;
46797const eventPlay = "play";
46798exports.eventPlay = eventPlay;
46799const eventPlaying = "playing";
46800exports.eventPlaying = eventPlaying;
46801const eventPopState = "popstate";
46802exports.eventPopState = eventPopState;
46803const eventProgress = "progress";
46804exports.eventProgress = eventProgress;
46805const eventPush = "push";
46806exports.eventPush = eventPush;
46807const eventPushSubscriptionChange = "pushsubscriptionchange";
46808exports.eventPushSubscriptionChange = eventPushSubscriptionChange;
46809const eventRateChange = "ratechange";
46810exports.eventRateChange = eventRateChange;
46811const eventReadyStateChange = "readystatechange";
46812exports.eventReadyStateChange = eventReadyStateChange;
46813const eventRepeatEvent = "repeatevent";
46814exports.eventRepeatEvent = eventRepeatEvent;
46815const eventReset = "reset";
46816exports.eventReset = eventReset;
46817const eventResize = "resize";
46818exports.eventResize = eventResize;
46819const eventResourceTimingBufferFull = "resourcetimingbufferfull";
46820exports.eventResourceTimingBufferFull = eventResourceTimingBufferFull;
46821const eventScroll = "scroll";
46822exports.eventScroll = eventScroll;
46823const eventSeeked = "seeked";
46824exports.eventSeeked = eventSeeked;
46825const eventSeeking = "seeking";
46826exports.eventSeeking = eventSeeking;
46827const eventSelect = "select";
46828exports.eventSelect = eventSelect;
46829const eventShow = "show";
46830exports.eventShow = eventShow;
46831const eventSlotChange = "slotchange";
46832exports.eventSlotChange = eventSlotChange;
46833const eventStalled = "stalled";
46834exports.eventStalled = eventStalled;
46835const eventStart = "start";
46836exports.eventStart = eventStart;
46837const eventStorage = "storage";
46838exports.eventStorage = eventStorage;
46839const eventSubmit = "submit";
46840exports.eventSubmit = eventSubmit;
46841const eventSuccess = "success";
46842exports.eventSuccess = eventSuccess;
46843const eventSuspend = "suspend";
46844exports.eventSuspend = eventSuspend;
46845const eventSVGAbort = "SVGAbort";
46846exports.eventSVGAbort = eventSVGAbort;
46847const eventSVGError = "SVGError";
46848exports.eventSVGError = eventSVGError;
46849const eventSVGLoad = "SVGLoad";
46850exports.eventSVGLoad = eventSVGLoad;
46851const eventSVGResize = "SVGResize";
46852exports.eventSVGResize = eventSVGResize;
46853const eventSVGScroll = "SVGScroll";
46854exports.eventSVGScroll = eventSVGScroll;
46855const eventSVGUnload = "SVGUnload";
46856exports.eventSVGUnload = eventSVGUnload;
46857const eventSVGZoom = "SVGZoom";
46858exports.eventSVGZoom = eventSVGZoom;
46859const eventTimeOut = "timeout";
46860exports.eventTimeOut = eventTimeOut;
46861const eventTimeUpdate = "timeupdate";
46862exports.eventTimeUpdate = eventTimeUpdate;
46863const eventTouchCancel = "touchcancel";
46864exports.eventTouchCancel = eventTouchCancel;
46865const eventTouchEnd = "touchend";
46866exports.eventTouchEnd = eventTouchEnd;
46867const eventTouchMove = "touchmove";
46868exports.eventTouchMove = eventTouchMove;
46869const eventTouchStart = "touchstart";
46870exports.eventTouchStart = eventTouchStart;
46871const eventTransitionEnd = "transitionend";
46872exports.eventTransitionEnd = eventTransitionEnd;
46873const eventUnload = "unload";
46874exports.eventUnload = eventUnload;

46875const eventUpgradeNeeded = "upgradeneeded";
46876exports.eventUpgradeNeeded = eventUpgradeNeeded;
46877const eventUserProximity = "userproximity";
46878exports.eventUserProximity = eventUserProximity;
46879const eventVersionChange = "versionchange";
46880exports.eventVersionChange = eventVersionChange;
46881const eventVisibilityChange = "visibilitychange";
46882exports.eventVisibilityChange = eventVisibilityChange;
46883const eventVolumeChange = "volumechange";
46884exports.eventVolumeChange = eventVolumeChange;
46885const eventWaiting = "waiting";
46886exports.eventWaiting = eventWaiting;
46887const eventWheel = "wheel";
46888exports.eventWheel = eventWheel;
46889
46890},{}],378:[function(require,module,exports){
46891"use strict";
46892
46893Object.defineProperty(exports, "__esModule", {
46894  value: true
46895});
46896exports.convertStylePropertyPixelsToNumber = convertStylePropertyPixelsToNumber;
46897exports.getClientRectWithMargin = getClientRectWithMargin;
46898
46899function convertStylePropertyPixelsToNumber(computedStyle, property) {
46900  if (!computedStyle || !property) {
46901    return;
46902  }
46903
46904  return parseInt(computedStyle.getPropertyValue(property).substring(0, computedStyle.getPropertyValue(property).length - 2), 10);
46905}
46906/**
46907 * Gets the client bounding rectangle including any margins of an element.
46908 */
46909
46910
46911function getClientRectWithMargin(element) {
46912  if (!element) {
46913    return;
46914  }
46915
46916  const rect = element.getBoundingClientRect();
46917  const style = window.getComputedStyle(element, null);
46918  const clone = {
46919    width: rect.width,
46920    height: rect.height,
46921    top: rect.top,
46922    bottom: rect.bottom,
46923    left: rect.left,
46924    right: rect.right
46925  };
46926  clone.width += convertStylePropertyPixelsToNumber(style, "margin-left");
46927  clone.width += convertStylePropertyPixelsToNumber(style, "margin-right");
46928  clone.height += convertStylePropertyPixelsToNumber(style, "margin-top");
46929  clone.height += convertStylePropertyPixelsToNumber(style, "margin-bottom");
46930  return clone;
46931}
46932
46933},{}],379:[function(require,module,exports){
46934"use strict";
46935
46936Object.defineProperty(exports, "__esModule", {
46937  value: true
46938});
46939
46940var _aria = require("./aria.js");
46941
46942Object.keys(_aria).forEach(function (key) {
46943  if (key === "default" || key === "__esModule") return;
46944  if (key in exports && exports[key] === _aria[key]) return;
46945  Object.defineProperty(exports, key, {
46946    enumerable: true,
46947    get: function () {
46948      return _aria[key];
46949    }
46950  });
46951});
46952
46953var _array = require("./array.js");
46954
46955Object.keys(_array).forEach(function (key) {
46956  if (key === "default" || key === "__esModule") return;
46957  if (key in exports && exports[key] === _array[key]) return;
46958  Object.defineProperty(exports, key, {
46959    enumerable: true,
46960    get: function () {
46961      return _array[key];
46962    }
46963  });
46964});
46965
46966var _classNames = require("./class-names.js");
46967
46968Object.keys(_classNames).forEach(function (key) {
46969  if (key === "default" || key === "__esModule") return;
46970  if (key in exports && exports[key] === _classNames[key]) return;
46971  Object.defineProperty(exports, key, {
46972    enumerable: true,
46973    get: function () {
46974      return _classNames[key];
46975    }
46976  });
46977});
46978
46979var _dom = require("./dom.js");
46980
46981Object.keys(_dom).forEach(function (key) {
46982  if (key === "default" || key === "__esModule") return;
46983  if (key in exports && exports[key] === _dom[key]) return;
46984  Object.defineProperty(exports, key, {
46985    enumerable: true,
46986    get: function () {
46987      return _dom[key];
46988    }
46989  });
46990});
46991
46992var _events = require("./events.js");
46993
46994Object.keys(_events).forEach(function (key) {
46995  if (key === "default" || key === "__esModule") return;
46996  if (key in exports && exports[key] === _events[key]) return;
46997  Object.defineProperty(exports, key, {
46998    enumerable: true,
46999    get: function () {
47000      return _events[key];
47001    }
47002  });
47003});
47004
47005var _html = require("./html.js");
47006
47007Object.keys(_html).forEach(function (key) {
47008  if (key === "default" || key === "__esModule") return;
47009  if (key in exports && exports[key] === _html[key]) return;
47010  Object.defineProperty(exports, key, {
47011    enumerable: true,
47012    get: function () {
47013      return _html[key];
47014    }
47015  });
47016});
47017
47018var _keyCodes = require("./key-codes.js");
47019
47020Object.keys(_keyCodes).forEach(function (key) {

47021  if (key === "default" || key === "__esModule") return;
47022  if (key in exports && exports[key] === _keyCodes[key]) return;
47023  Object.defineProperty(exports, key, {
47024    enumerable: true,
47025    get: function () {
47026      return _keyCodes[key];
47027    }
47028  });
47029});
47030
47031var _localization = require("./localization.js");
47032
47033Object.keys(_localization).forEach(function (key) {
47034  if (key === "default" || key === "__esModule") return;
47035  if (key in exports && exports[key] === _localization[key]) return;
47036  Object.defineProperty(exports, key, {
47037    enumerable: true,
47038    get: function () {
47039      return _localization[key];
47040    }
47041  });
47042});
47043
47044var _numbers = require("./numbers.js");
47045
47046Object.keys(_numbers).forEach(function (key) {
47047  if (key === "default" || key === "__esModule") return;
47048  if (key in exports && exports[key] === _numbers[key]) return;
47049  Object.defineProperty(exports, key, {
47050    enumerable: true,
47051    get: function () {
47052      return _numbers[key];
47053    }
47054  });
47055});
47056
47057var _strings = require("./strings.js");
47058
47059Object.keys(_strings).forEach(function (key) {
47060  if (key === "default" || key === "__esModule") return;
47061  if (key in exports && exports[key] === _strings[key]) return;
47062  Object.defineProperty(exports, key, {
47063    enumerable: true,
47064    get: function () {
47065      return _strings[key];
47066    }
47067  });
47068});
47069
47070var _query = require("./query.js");
47071
47072Object.keys(_query).forEach(function (key) {
47073  if (key === "default" || key === "__esModule") return;
47074  if (key in exports && exports[key] === _query[key]) return;
47075  Object.defineProperty(exports, key, {
47076    enumerable: true,
47077    get: function () {
47078      return _query[key];
47079    }
47080  });
47081});
47082
47083var _rtlScrollConverter = require("./rtl-scroll-converter.js");
47084
47085Object.keys(_rtlScrollConverter).forEach(function (key) {
47086  if (key === "default" || key === "__esModule") return;
47087  if (key in exports && exports[key] === _rtlScrollConverter[key]) return;
47088  Object.defineProperty(exports, key, {
47089    enumerable: true,
47090    get: function () {
47091      return _rtlScrollConverter[key];
47092    }
47093  });
47094});
47095
47096var _systemColors = require("./system-colors.js");
47097
47098Object.keys(_systemColors).forEach(function (key) {
47099  if (key === "default" || key === "__esModule") return;
47100  if (key in exports && exports[key] === _systemColors[key]) return;
47101  Object.defineProperty(exports, key, {
47102    enumerable: true,
47103    get: function () {
47104      return _systemColors[key];
47105    }
47106  });
47107});
47108
47109},{"./aria.js":373,"./array.js":374,"./class-names.js":375,"./dom.js":376,"./events.js":377,"./html.js":378,"./key-codes.js":380,"./localization.js":381,"./numbers.js":382,"./query.js":383,"./rtl-scroll-converter.js":384,"./strings.js":385,"./system-colors.js":386}],380:[function(require,module,exports){
47110"use strict";
47111
47112Object.defineProperty(exports, "__esModule", {
47113  value: true
47114});
47115exports.keyTab = exports.keySpace = exports.keyPageUp = exports.keyPageDown = exports.keyHome = exports.keyFunction2 = exports.keyEscape = exports.keyEnter = exports.keyEnd = exports.keyDelete = exports.keyCodeWindowsRight = exports.keyCodeWindowsOpera = exports.keyCodeWindowsLeft = exports.keyCodeTilde = exports.keyCodeTab = exports.keyCodeSpace = exports.keyCodeShift = exports.keyCodeScrollLock = exports.keyCodeQuote = exports.keyCodePrint = exports.keyCodePeriod = exports.keyCodePageUp = exports.keyCodePageDown = exports.keyCodeOpenBracket = exports.keyCodeNumPadPlus = exports.keyCodeNumPadMultiply = exports.keyCodeNumPadMinus = exports.keyCodeNumPadDot = exports.keyCodeNumPadDivide = exports.keyCodeNumPad9 = exports.keyCodeNumPad8 = exports.keyCodeNumPad7 = exports.keyCodeNumPad6 = exports.keyCodeNumPad5 = exports.keyCodeNumPad4 = exports.keyCodeNumPad3 = exports.keyCodeNumPad2 = exports.keyCodeNumPad1 = exports.keyCodeNumPad0 = exports.keyCodeNumLock = exports.keyCodeMinus2 = exports.keyCodeMinus = exports.keyCodeMenu = exports.keyCodeInsert = exports.keyCodeHome = exports.keyCodeFunction9 = exports.keyCodeFunction8 = exports.keyCodeFunction7 = exports.keyCodeFunction6 = exports.keyCodeFunction5 = exports.keyCodeFunction4 = exports.keyCodeFunction3 = exports.keyCodeFunction2 = exports.keyCodeFunction12 = exports.keyCodeFunction11 = exports.keyCodeFunction10 = exports.keyCodeFunction1 = exports.keyCodeForwardSlash = exports.keyCodeEscape = exports.keyCodeEquals3 = exports.keyCodeEquals2 = exports.keyCodeEquals = exports.keyCodeEnter = exports.keyCodeEnd = exp

47115orts.keyCodeDelete = exports.keyCodeCtrl = exports.keyCodeComma = exports.keyCodeColon2 = exports.keyCodeColon = exports.keyCodeCloseBracket = exports.keyCodeCapsLock = exports.keyCodeBreak = exports.keyCodeBackSlash = exports.keyCodeBack = exports.keyCodeArrowUp = exports.keyCodeArrowRight = exports.keyCodeArrowLeft = exports.keyCodeArrowDown = exports.keyCodeAlt = exports.keyBackspace = exports.keyArrowUp = exports.keyArrowRight = exports.keyArrowLeft = exports.keyArrowDown = exports.KeyCodes = exports.ArrowKeys = void 0;
47116
47117/**
47118 * Key Code values
47119 * @deprecated - KeyCodes are deprecated, use individual string key exports
47120 */
47121var KeyCodes;
47122exports.KeyCodes = KeyCodes;
47123
47124(function (KeyCodes) {
47125  KeyCodes[KeyCodes["alt"] = 18] = "alt";
47126  KeyCodes[KeyCodes["arrowDown"] = 40] = "arrowDown";
47127  KeyCodes[KeyCodes["arrowLeft"] = 37] = "arrowLeft";
47128  KeyCodes[KeyCodes["arrowRight"] = 39] = "arrowRight";
47129  KeyCodes[KeyCodes["arrowUp"] = 38] = "arrowUp";
47130  KeyCodes[KeyCodes["back"] = 8] = "back";
47131  KeyCodes[KeyCodes["backSlash"] = 220] = "backSlash";
47132  KeyCodes[KeyCodes["break"] = 19] = "break";
47133  KeyCodes[KeyCodes["capsLock"] = 20] = "capsLock";
47134  KeyCodes[KeyCodes["closeBracket"] = 221] = "closeBracket";
47135  KeyCodes[KeyCodes["colon"] = 186] = "colon";
47136  KeyCodes[KeyCodes["colon2"] = 59] = "colon2";
47137  KeyCodes[KeyCodes["comma"] = 188] = "comma";
47138  KeyCodes[KeyCodes["ctrl"] = 17] = "ctrl";
47139  KeyCodes[KeyCodes["delete"] = 46] = "delete";
47140  KeyCodes[KeyCodes["end"] = 35] = "end";
47141  KeyCodes[KeyCodes["enter"] = 13] = "enter";
47142  KeyCodes[KeyCodes["equals"] = 187] = "equals";
47143  KeyCodes[KeyCodes["equals2"] = 61] = "equals2";
47144  KeyCodes[KeyCodes["equals3"] = 107] = "equals3";
47145  KeyCodes[KeyCodes["escape"] = 27] = "escape";
47146  KeyCodes[KeyCodes["forwardSlash"] = 191] = "forwardSlash";
47147  KeyCodes[KeyCodes["function1"] = 112] = "function1";
47148  KeyCodes[KeyCodes["function10"] = 121] = "function10";
47149  KeyCodes[KeyCodes["function11"] = 122] = "function11";
47150  KeyCodes[KeyCodes["function12"] = 123] = "function12";
47151  KeyCodes[KeyCodes["function2"] = 113] = "function2";
47152  KeyCodes[KeyCodes["function3"] = 114] = "function3";
47153  KeyCodes[KeyCodes["function4"] = 115] = "function4";
47154  KeyCodes[KeyCodes["function5"] = 116] = "function5";
47155  KeyCodes[KeyCodes["function6"] = 117] = "function6";
47156  KeyCodes[KeyCodes["function7"] = 118] = "function7";
47157  KeyCodes[KeyCodes["function8"] = 119] = "function8";
47158  KeyCodes[KeyCodes["function9"] = 120] = "function9";
47159  KeyCodes[KeyCodes["home"] = 36] = "home";
47160  KeyCodes[KeyCodes["insert"] = 45] = "insert";
47161  KeyCodes[KeyCodes["menu"] = 93] = "menu";
47162  KeyCodes[KeyCodes["minus"] = 189] = "minus";
47163  KeyCodes[KeyCodes["minus2"] = 109] = "minus2";
47164  KeyCodes[KeyCodes["numLock"] = 144] = "numLock";
47165  KeyCodes[KeyCodes["numPad0"] = 96] = "numPad0";
47166  KeyCodes[KeyCodes["numPad1"] = 97] = "numPad1";
47167  KeyCodes[KeyCodes["numPad2"] = 98] = "numPad2";
47168  KeyCodes[KeyCodes["numPad3"] = 99] = "numPad3";
47169  KeyCodes[KeyCodes["numPad4"] = 100] = "numPad4";
47170  KeyCodes[KeyCodes["numPad5"] = 101] = "numPad5";
47171  KeyCodes[KeyCodes["numPad6"] = 102] = "numPad6";
47172  KeyCodes[KeyCodes["numPad7"] = 103] = "numPad7";
47173  KeyCodes[KeyCodes["numPad8"] = 104] = "numPad8";
47174  KeyCodes[KeyCodes["numPad9"] = 105] = "numPad9";
47175  KeyCodes[KeyCodes["numPadDivide"] = 111] = "numPadDivide";
47176  KeyCodes[KeyCodes["numPadDot"] = 110] = "numPadDot";
47177  KeyCodes[KeyCodes["numPadMinus"] = 109] = "numPadMinus";
47178  KeyCodes[KeyCodes["numPadMultiply"] = 106] = "numPadMultiply";
47179  KeyCodes[KeyCodes["numPadPlus"] = 107] = "numPadPlus";
47180  KeyCodes[KeyCodes["openBracket"] = 219] = "openBracket";
47181  KeyCodes[KeyCodes["pageDown"] = 34] = "pageDown";
47182  KeyCodes[KeyCodes["pageUp"] = 33] = "pageUp";
47183  KeyCodes[KeyCodes["period"] = 190] = "period";
47184  KeyCodes[KeyCodes["print"] = 44] = "print";
47185  KeyCodes[KeyCodes["quote"] = 222] = "quote";
47186  KeyCodes[KeyCodes["scrollLock"] = 145] = "scrollLock";
47187  KeyCodes[KeyCodes["shift"] = 16] = "shift";
47188  KeyCodes[KeyCodes["space"] = 32] = "space";
47189  KeyCodes[KeyCodes["tab"] = 9] = "tab";
47190  KeyCodes[KeyCodes["tilde"] = 192] = "tilde";
47191  KeyCodes[KeyCodes["windowsLeft"] = 91] = "windowsLeft";
47192  KeyCodes[KeyCodes["windowsOpera"] = 219] = "windowsOpera";
47193  KeyCodes[KeyCodes["windowsRight"] = 92] = "windowsRight";
47194})(KeyCodes || (exports.KeyCodes = KeyCodes = {}));
47195/**
47196 * @deprecated - KeyCodes are deprecated, use string key exports
47197 */
47198
47199
47200const keyCodeAlt = 18;
47201/**
47202 * @deprecated - KeyCodes are deprecated, use string key exports
47203 */
47204
47205exports.keyCodeAlt = keyCodeAlt;
47206const keyCodeArrowDown = 40;
47207/**
47208 * @deprecated - KeyCodes are deprecated, use string key exports
47209 */
47210
47211exports.keyCodeArrowDown = keyCodeArrowDown;
47212const keyCodeArrowLeft = 37;
47213/**
47214 * @deprecated - KeyCodes are deprecated, use string key exports
47215 */
47216
47217exports.keyCodeArrowLeft = keyCodeArrowLeft;
47218const keyCodeArrowRight = 39;
47219/**
47220 * @deprecated - KeyCodes are deprecated, use string key exports
47221 */
47222
47223exports.keyCodeArrowRight = keyCodeArrowRight;
47224const keyCodeArrowUp = 38;
47225/**
47226 * @deprecated - KeyCodes are deprecated, use string key exports
47227 */
47228
47229exports.keyCodeArrowUp = keyCodeArrowUp;
47230const keyCodeBack = 8;
47231/**
47232 * @deprecated - KeyCodes are deprecated, use string key exports
47233 */
47234
47235exports.keyCodeBack = keyCodeBack;
47236const keyCodeBackSlash = 220;
47237/**
47238 * @deprecated - KeyCodes are deprecated, use string key exports
47239 */
47240
47241exports.keyCodeBackSlash = keyCodeBackSlash;
47242const keyCodeBreak = 19;
47243/**
47244 * @deprecated - KeyCodes are deprecated, use string key exports
47245 */
47246
47247exports.keyCodeBreak = keyCodeBreak;
47248const keyCodeCapsLock = 20;
47249/**
47250 * @deprecated - KeyCodes are deprecated, use string key exports
47251 */
47252
47253exports.keyCodeCapsLock = keyCodeCapsLock;
47254const keyCodeCloseBracket = 221;
47255/**
47256 * @deprecated - KeyCodes are deprecated, use string key exports
47257 */
47258
47259exports.keyCodeCloseBracket = keyCodeCloseBracket;

47260const keyCodeColon = 186;
47261/**
47262 * @deprecated - KeyCodes are deprecated, use string key exports
47263 */
47264
47265exports.keyCodeColon = keyCodeColon;
47266const keyCodeColon2 = 59; // Opera and Firefox
47267
47268/**
47269 * @deprecated - KeyCodes are deprecated, use string key exports
47270 */
47271
47272exports.keyCodeColon2 = keyCodeColon2;
47273const keyCodeComma = 188;
47274/**
47275 * @deprecated - KeyCodes are deprecated, use string key exports
47276 */
47277
47278exports.keyCodeComma = keyCodeComma;
47279const keyCodeCtrl = 17;
47280/**
47281 * @deprecated - KeyCodes are deprecated, use string key exports
47282 */
47283
47284exports.keyCodeCtrl = keyCodeCtrl;
47285const keyCodeDelete = 46;
47286/**
47287 * @deprecated - KeyCodes are deprecated, use string key exports
47288 */
47289
47290exports.keyCodeDelete = keyCodeDelete;
47291const keyCodeEnd = 35;
47292/**
47293 * @deprecated - KeyCodes are deprecated, use string key exports
47294 */
47295
47296exports.keyCodeEnd = keyCodeEnd;
47297const keyCodeEnter = 13;
47298/**
47299 * @deprecated - KeyCodes are deprecated, use string key exports
47300 */
47301
47302exports.keyCodeEnter = keyCodeEnter;
47303const keyCodeEquals = 187;
47304/**
47305 * @deprecated - KeyCodes are deprecated, use string key exports
47306 */
47307
47308exports.keyCodeEquals = keyCodeEquals;
47309const keyCodeEquals2 = 61; // Opera
47310
47311/**
47312 * @deprecated - KeyCodes are deprecated, use string key exports
47313 */
47314
47315exports.keyCodeEquals2 = keyCodeEquals2;
47316const keyCodeEquals3 = 107; // Firefox
47317
47318/**
47319 * @deprecated - KeyCodes are deprecated, use string key exports
47320 */
47321
47322exports.keyCodeEquals3 = keyCodeEquals3;
47323const keyCodeEscape = 27;
47324/**
47325 * @deprecated - KeyCodes are deprecated, use string key exports
47326 */
47327
47328exports.keyCodeEscape = keyCodeEscape;
47329const keyCodeForwardSlash = 191;
47330/**
47331 * @deprecated - KeyCodes are deprecated, use string key exports
47332 */
47333
47334exports.keyCodeForwardSlash = keyCodeForwardSlash;
47335const keyCodeFunction1 = 112;
47336/**
47337 * @deprecated - KeyCodes are deprecated, use string key exports
47338 */
47339
47340exports.keyCodeFunction1 = keyCodeFunction1;
47341const keyCodeFunction10 = 121;
47342/**
47343 * @deprecated - KeyCodes are deprecated, use string key exports
47344 */
47345
47346exports.keyCodeFunction10 = keyCodeFunction10;
47347const keyCodeFunction11 = 122;
47348/**
47349 * @deprecated - KeyCodes are deprecated, use string key exports
47350 */
47351
47352exports.keyCodeFunction11 = keyCodeFunction11;
47353const keyCodeFunction12 = 123;
47354/**
47355 * @deprecated - KeyCodes are deprecated, use string key exports
47356 */
47357

47358exports.keyCodeFunction12 = keyCodeFunction12;
47359const keyCodeFunction2 = 113;
47360/**
47361 * @deprecated - KeyCodes are deprecated, use string key exports
47362 */
47363
47364exports.keyCodeFunction2 = keyCodeFunction2;
47365const keyCodeFunction3 = 114;
47366/**
47367 * @deprecated - KeyCodes are deprecated, use string key exports
47368 */
47369
47370exports.keyCodeFunction3 = keyCodeFunction3;
47371const keyCodeFunction4 = 115;
47372/**
47373 * @deprecated - KeyCodes are deprecated, use string key exports
47374 */
47375
47376exports.keyCodeFunction4 = keyCodeFunction4;
47377const keyCodeFunction5 = 116;
47378/**
47379 * @deprecated - KeyCodes are deprecated, use string key exports
47380 */
47381
47382exports.keyCodeFunction5 = keyCodeFunction5;
47383const keyCodeFunction6 = 117;
47384/**
47385 * @deprecated - KeyCodes are deprecated, use string key exports
47386 */
47387
47388exports.keyCodeFunction6 = keyCodeFunction6;
47389const keyCodeFunction7 = 118;
47390/**
47391 * @deprecated - KeyCodes are deprecated, use string key exports
47392 */
47393
47394exports.keyCodeFunction7 = keyCodeFunction7;
47395const keyCodeFunction8 = 119;
47396/**
47397 * @deprecated - KeyCodes are deprecated, use string key exports
47398 */
47399
47400exports.keyCodeFunction8 = keyCodeFunction8;
47401const keyCodeFunction9 = 120;
47402/**
47403 * @deprecated - KeyCodes are deprecated, use string key exports
47404 */
47405
47406exports.keyCodeFunction9 = keyCodeFunction9;
47407const keyCodeHome = 36;
47408/**
47409 * @deprecated - KeyCodes are deprecated, use string key exports
47410 */
47411
47412exports.keyCodeHome = keyCodeHome;
47413const keyCodeInsert = 45;
47414/**
47415 * @deprecated - KeyCodes are deprecated, use string key exports
47416 */
47417
47418exports.keyCodeInsert = keyCodeInsert;
47419const keyCodeMenu = 93;
47420/**
47421 * @deprecated - KeyCodes are deprecated, use string key exports
47422 */
47423
47424exports.keyCodeMenu = keyCodeMenu;
47425const keyCodeMinus = 189;
47426/**
47427 * @deprecated - KeyCodes are deprecated, use string key exports
47428 */
47429
47430exports.keyCodeMinus = keyCodeMinus;
47431const keyCodeMinus2 = 109; // Opera and Firefox
47432
47433/**
47434 * @deprecated - KeyCodes are deprecated, use string key exports
47435 */
47436
47437exports.keyCodeMinus2 = keyCodeMinus2;
47438const keyCodeNumLock = 144;
47439/**
47440 * @deprecated - KeyCodes are deprecated, use string key exports
47441 */
47442
47443exports.keyCodeNumLock = keyCodeNumLock;
47444const keyCodeNumPad0 = 96;
47445/**
47446 * @deprecated - KeyCodes are deprecated, use string key exports
47447 */
47448
47449exports.keyCodeNumPad0 = keyCodeNumPad0;
47450const keyCodeNumPad1 = 97;
47451/**
47452 * @deprecated - KeyCodes are deprecated, use string key exports
47453 */
47454
47455exports.keyCodeNumPad1 = keyCodeNumPad1;
47456const keyCodeNumPad2 = 98;
47457/**
47458 * @deprecated - KeyCodes are deprecated, use string key exports
47459 */
47460
47461exports.keyCodeNumPad2 = keyCodeNumPad2;
47462const keyCodeNumPad3 = 99;
47463/**
47464 * @deprecated - KeyCodes are deprecated, use string key exports
47465 */
47466
47467exports.keyCodeNumPad3 = keyCodeNumPad3;
47468const keyCodeNumPad4 = 100;
47469/**
47470 * @deprecated - KeyCodes are deprecated, use string key exports
47471 */
47472
47473exports.keyCodeNumPad4 = keyCodeNumPad4;
47474const keyCodeNumPad5 = 101;
47475/**
47476 * @deprecated - KeyCodes are deprecated, use string key exports
47477 */
47478
47479exports.keyCodeNumPad5 = keyCodeNumPad5;
47480const keyCodeNumPad6 = 102;
47481/**
47482 * @deprecated - KeyCodes are deprecated, use string key exports
47483 */
47484
47485exports.keyCodeNumPad6 = keyCodeNumPad6;
47486const keyCodeNumPad7 = 103;
47487/**
47488 * @deprecated - KeyCodes are deprecated, use string key exports
47489 */
47490
47491exports.keyCodeNumPad7 = keyCodeNumPad7;
47492const keyCodeNumPad8 = 104;
47493/**
47494 * @deprecated - KeyCodes are deprecated, use string key exports
47495 */
47496
47497exports.keyCodeNumPad8 = keyCodeNumPad8;
47498const keyCodeNumPad9 = 105;
47499/**
47500 * @deprecated - KeyCodes are deprecated, use string key exports
47501 */
47502
47503exports.keyCodeNumPad9 = keyCodeNumPad9;
47504const keyCodeNumPadDivide = 111;
47505/**
47506 * @deprecated - KeyCodes are deprecated, use string key exports
47507 */
47508
47509exports.keyCodeNumPadDivide = keyCodeNumPadDivide;
47510const keyCodeNumPadDot = 110;
47511/**
47512 * @deprecated - KeyCodes are deprecated, use string key exports
47513 */
47514
47515exports.keyCodeNumPadDot = keyCodeNumPadDot;
47516const keyCodeNumPadMinus = 109;
47517/**
47518 * @deprecated - KeyCodes are deprecated, use string key exports
47519 */
47520
47521exports.keyCodeNumPadMinus = keyCodeNumPadMinus;
47522const keyCodeNumPadMultiply = 106;
47523/**
47524 * @deprecated - KeyCodes are deprecated, use string key exports
47525 */
47526
47527exports.keyCodeNumPadMultiply = keyCodeNumPadMultiply;
47528const keyCodeNumPadPlus = 107;
47529/**
47530 * @deprecated - KeyCodes are deprecated, use string key exports
47531 */
47532
47533exports.keyCodeNumPadPlus = keyCodeNumPadPlus;
47534const keyCodeOpenBracket = 219;
47535/**
47536 * @deprecated - KeyCodes are deprecated, use string key exports
47537 */
47538
47539exports.keyCodeOpenBracket = keyCodeOpenBracket;
47540const keyCodePageDown = 34;
47541/**
47542 * @deprecated - KeyCodes are deprecated, use string key exports
47543 */
47544
47545exports.keyCodePageDown = keyCodePageDown;
47546const keyCodePageUp = 33;
47547/**
47548 * @deprecated - KeyCodes are deprecated, use string key exports
47549 */
47550
47551exports.keyCodePageUp = keyCodePageUp;
47552const keyCodePeriod = 190;
47553/**
47554 * @deprecated - KeyCodes are deprecated, use string key exports
47555 */
47556
47557exports.keyCodePeriod = keyCodePeriod;
47558const keyCodePrint = 44;
47559/**
47560 * @deprecated - KeyCodes are deprecated, use string key exports
47561 */
47562

47563exports.keyCodePrint = keyCodePrint;
47564const keyCodeQuote = 222;
47565/**
47566 * @deprecated - KeyCodes are deprecated, use string key exports
47567 */
47568
47569exports.keyCodeQuote = keyCodeQuote;
47570const keyCodeScrollLock = 145;
47571/**
47572 * @deprecated - KeyCodes are deprecated, use string key exports
47573 */
47574
47575exports.keyCodeScrollLock = keyCodeScrollLock;
47576const keyCodeShift = 16;
47577/**
47578 * @deprecated - KeyCodes are deprecated, use string key exports
47579 */
47580
47581exports.keyCodeShift = keyCodeShift;
47582const keyCodeSpace = 32;
47583/**
47584 * @deprecated - KeyCodes are deprecated, use string key exports
47585 */
47586
47587exports.keyCodeSpace = keyCodeSpace;
47588const keyCodeTab = 9;
47589/**
47590 * @deprecated - KeyCodes are deprecated, use string key exports
47591 */
47592
47593exports.keyCodeTab = keyCodeTab;
47594const keyCodeTilde = 192;
47595/**
47596 * @deprecated - KeyCodes are deprecated, use string key exports
47597 */
47598
47599exports.keyCodeTilde = keyCodeTilde;
47600const keyCodeWindowsLeft = 91;
47601/**
47602 * @deprecated - KeyCodes are deprecated, use string key exports
47603 */
47604
47605exports.keyCodeWindowsLeft = keyCodeWindowsLeft;
47606const keyCodeWindowsOpera = 219; // Opera
47607
47608/**
47609 * @deprecated - KeyCodes are deprecated, use string key exports
47610 */
47611
47612exports.keyCodeWindowsOpera = keyCodeWindowsOpera;
47613const keyCodeWindowsRight = 92;
47614/**
47615 * String values for use with KeyboardEvent.key
47616 */
47617
47618exports.keyCodeWindowsRight = keyCodeWindowsRight;
47619const keyArrowDown = "ArrowDown";
47620exports.keyArrowDown = keyArrowDown;
47621const keyArrowLeft = "ArrowLeft";
47622exports.keyArrowLeft = keyArrowLeft;
47623const keyArrowRight = "ArrowRight";
47624exports.keyArrowRight = keyArrowRight;
47625const keyArrowUp = "ArrowUp";
47626exports.keyArrowUp = keyArrowUp;
47627const keyEnter = "Enter";
47628exports.keyEnter = keyEnter;
47629const keyEscape = "Escape";
47630exports.keyEscape = keyEscape;
47631const keyHome = "Home";
47632exports.keyHome = keyHome;
47633const keyEnd = "End";
47634exports.keyEnd = keyEnd;
47635const keyFunction2 = "F2";
47636exports.keyFunction2 = keyFunction2;
47637const keyPageDown = "PageDown";
47638exports.keyPageDown = keyPageDown;
47639const keyPageUp = "PageUp";
47640exports.keyPageUp = keyPageUp;
47641const keySpace = " ";
47642exports.keySpace = keySpace;
47643const keyTab = "Tab";
47644exports.keyTab = keyTab;
47645const keyBackspace = "Backspace";
47646exports.keyBackspace = keyBackspace;
47647const keyDelete = "Delete";
47648exports.keyDelete = keyDelete;
47649const ArrowKeys = {
47650  ArrowDown: keyArrowDown,
47651  ArrowLeft: keyArrowLeft,
47652  ArrowRight: keyArrowRight,
47653  ArrowUp: keyArrowUp
47654};
47655exports.ArrowKeys = ArrowKeys;
47656
47657},{}],381:[function(require,module,exports){
47658"use strict";
47659
47660Object.defineProperty(exports, "__esModule", {
47661  value: true
47662});
47663exports.Direction = void 0;
47664
47665/**
47666 * Expose ltr and rtl strings
47667 */
47668var Direction;
47669exports.Direction = Direction;
47670
47671(function (Direction) {
47672  Direction["ltr"] = "ltr";
47673  Direction["rtl"] = "rtl";
47674})(Direction || (exports.Direction = Direction = {}));
47675
47676},{}],382:[function(require,module,exports){
47677"use strict";
47678
47679Object.defineProperty(exports, "__esModule", {
47680  value: true
47681});
47682exports.inRange = inRange;
47683exports.limit = limit;
47684exports.wrapInBounds = wrapInBounds;
47685
47686/**
47687 * This method keeps a given value within the bounds of a min and max value. If the value
47688 * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
47689 * the maximum will be returned. Otherwise, the value is returned un-changed.
47690 */
47691function wrapInBounds(min, max, value) {
47692  if (value < min) {
47693    return max;
47694  } else if (value > max) {
47695    return min;
47696  }
47697
47698  return value;
47699}
47700/**
47701 * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
47702 * If value is greater than max, max will be returned.
47703 */
47704
47705
47706function limit(min, max, value) {
47707  return Math.min(Math.max(value, min), max);
47708}
47709/**
47710 * Determines if a number value is within a specified range.
47711 *
47712 * @param value - the value to check
47713 * @param min - the range start
47714 * @param max - the range end
47715 */
47716
47717
47718function inRange(value, min, max = 0) {
47719  [min, max] = [min, max].sort((a, b) => a - b);
47720  return min <= value && value < max;
47721}
47722
47723},{}],383:[function(require,module,exports){
47724"use strict";
47725
47726Object.defineProperty(exports, "__esModule", {
47727  value: true
47728});
47729exports.parseQueryStringParams = parseQueryStringParams;
47730
47731/**
47732 * @param input Can be in the form ANYTHING?a=1&b=2&c=3  ... or just a=1&b=2&c=3 ...
47733 *              all query string keys and values will be run through decode

47733URIComponent
47734 */
47735function parseQueryStringParams(input) {
47736  const retVal = new Map();
47737
47738  if (typeof input !== "string" || input.length <= 0) {
47739    return retVal;
47740  }
47741
47742  const splitLocation = input.split("?");
47743  let rawQuery;
47744
47745  if (splitLocation.length === 1) {
47746    rawQuery = splitLocation[0];
47747  } else {
47748    rawQuery = splitLocation[1];
47749  }
47750
47751  const querySegments = rawQuery.split("&");
47752
47753  for (const querySegment of querySegments) {
47754    const paramSegments = querySegment.split("=");
47755
47756    if (paramSegments.length === 2) {
47757      retVal.set(decodeURIComponent(paramSegments[0]), decodeURIComponent(paramSegments[1]));
47758    }
47759  }
47760
47761  return retVal;
47762}
47763
47764},{}],384:[function(require,module,exports){
47765"use strict";
47766
47767Object.defineProperty(exports, "__esModule", {
47768  value: true
47769});
47770exports.RtlScrollConverter = void 0;
47771
47772var _exenvEs = require("exenv-es6");
47773
47774var _localization = require("./localization.js");
47775
47776/**
47777 * Standardize left scroll conversion when direction is rtl
47778 * inspired by
47779 * https://github.com/alitaheri/normalize-scroll-left
47780 */
47781class RtlScrollConverter {
47782  /**
47783   *  Gets the scrollLeft value of the provided element
47784   */
47785  static getScrollLeft(scrolledElement, direction) {
47786    if (direction === _localization.Direction.rtl) {
47787      return RtlScrollConverter.getRtlScrollLeftConverter(scrolledElement);
47788    }
47789
47790    return scrolledElement.scrollLeft;
47791  }
47792  /**
47793   * Sets the scrollLeft value of the provided element
47794   */
47795
47796
47797  static setScrollLeft(scrolledElement, scrollValue, direction) {
47798    if (direction === _localization.Direction.rtl) {
47799      RtlScrollConverter.setRtlScrollLeftConverter(scrolledElement, scrollValue);
47800      return;
47801    }
47802
47803    scrolledElement.scrollLeft = scrollValue;
47804  }
47805  /**
47806   * The initial rtl scroll converter getter function, it calls the browser test to set the correct converter
47807   * functions and then invokes the getter
47808   */
47809
47810
47811  static initialGetRtlScrollConverter(scrolledElement) {
47812    RtlScrollConverter.initializeRtlScrollConverters();
47813    return RtlScrollConverter.getRtlScrollLeftConverter(scrolledElement);
47814  }
47815  /**
47816   * The "direct" rtl get scroll converter does not need to tamper with the scrollLeft
47817   * values as the browser is already doing the right thing.  Content start = 0 and
47818   * scrolling left goes negative.
47819   */
47820
47821
47822  static directGetRtlScrollConverter(scrolledElement) {
47823    return scrolledElement.scrollLeft;
47824  }
47825  /**
47826   * The "inverted" get scroll converter is used when the browser reports scroll left
47827   * as a positive maximum scroll value at content start and then goes to zero as content
47828   * is scrolled left
47829   */
47830
47831
47832  static invertedGetRtlScrollConverter(scrolledElement) {
47833    return -Math.abs(scrolledElement.scrollLeft);
47834  }
47835  /**
47836   * The "reverse" get scroll converter is used when the browser reports scroll left
47837   * as 0 at content start and then goes positive as content is scrolled left
47838   */
47839
47840
47841  static reverseGetRtlScrollConverter(scrolledElement) {
47842    return scrolledElement.scrollLeft - (scrolledElement.scrollWidth - scrolledElement.clientWidth);
47843  }
47844  /**
47845   * The initial rtl scroll converter setter function, it calls the browser test to set the correct converter
47846   * functions and then invokes the setter
47847   */
47848
47849
47850  static initialSetRtlScrollConverter(scrolledElement, newScrollValue) {
47851    RtlScrollConverter.initializeRtlScrollConverters();
47852    RtlScrollConverter.setRtlScrollLeftConverter(scrolledElement, newScrollValue);
47853  }
47854  /**
47855   * The "direct" rtl set scroll converter does not need to tamper with the scrollLeft
47856   * values as the browser is already doing the right thing.  Content start = 0 and
47857   * scrolling left goes negative.
47858   */
47859
47860
47861  static directSetRtlScrollConverter(scrolledElement, newScrollValue) {
47862    scrolledElement.scrollLeft = newScrollValue;
47863  }
47864  /**
47865   * The "inverted" set scroll converter is used when the browser reports scroll left
47866   * as a positive maximum scroll value at content start and then goes to zero as content
47867   * is scrolled left
47868   */
47869
47870
47871  static invertedSetRtlScrollConverter(scrolledElement, newScrollValue) {
47872    scrolledElement.scrollLeft = Math.abs(newScrollValue);
47873  }
47874  /**
47875   * The "reverse" set scroll converter is used when the browser reports scroll left
47876   * as 0 at content start and then goes positive as content is scrolled left
47877   */
47878
47879
47880  static reverseSetRtlScrollConverter(scrolledElement, newScrollValue) {
47881    const maxScroll = scrolledElement.scrollWidth - scrolledElement.clientWidth;
47882    scrolledElement.scrollLeft = maxScroll + newScrollValue;
47883  }
47884  /**
47885   * detects the appropriate rtl scroll converter functions and assigns them
47886   * should only run once
47887   */
47888
47889
47890  static initializeRtlScrollConverters() {
47891    if (!(0, _exenvEs.canUseDOM)()) {
47892      RtlScrollConverter.applyDirectScrollConverters();
47893      return;
47894    }
47895
47896    const testElement = RtlScrollConverter.getTestElement();
47897    document.body.appendChild(testElement);
47898    RtlScrollConverter.checkForScrollType(testElement);
47899    document.body.removeChild(testElement);
47900  }
47901  /**
47902   * checks the provided test element to determine scroll type
47903   * and apply appropriate converters
47904   */
47905
47906
47907  static checkForScrollType(testElement) {
47908    if (RtlScrollConverter.isReverse(testElement)) {

47909      RtlScrollConverter.applyReverseScrollConverters();
47910    } else {
47911      if (RtlScrollConverter.isDirect(testElement)) {
47912        RtlScrollConverter.applyDirectScrollConverters();
47913      } else {
47914        RtlScrollConverter.applyInvertedScrollConverters();
47915      }
47916    }
47917  }
47918  /**
47919   * checks test element initial state for rtl "reverse" mode
47920   */
47921
47922
47923  static isReverse(testElement) {
47924    return testElement.scrollLeft > 0;
47925  }
47926  /**
47927   * checks test element for rtl "direct" mode
47928   */
47929
47930
47931  static isDirect(testElement) {
47932    testElement.scrollLeft = -1;
47933    return testElement.scrollLeft < 0;
47934  }
47935  /**
47936   * apply direct scroll conververters
47937   */
47938
47939
47940  static applyDirectScrollConverters() {
47941    RtlScrollConverter.setRtlScrollLeftConverter = RtlScrollConverter.directSetRtlScrollConverter;
47942    RtlScrollConverter.getRtlScrollLeftConverter = RtlScrollConverter.directGetRtlScrollConverter;
47943  }
47944  /**
47945   * apply inverted scroll conververters
47946   */
47947
47948
47949  static applyInvertedScrollConverters() {
47950    RtlScrollConverter.setRtlScrollLeftConverter = RtlScrollConverter.invertedSetRtlScrollConverter;
47951    RtlScrollConverter.getRtlScrollLeftConverter = RtlScrollConverter.invertedGetRtlScrollConverter;
47952  }
47953  /**
47954   * apply reverse scroll conververters
47955   */
47956
47957
47958  static applyReverseScrollConverters() {
47959    RtlScrollConverter.setRtlScrollLeftConverter = RtlScrollConverter.reverseSetRtlScrollConverter;
47960    RtlScrollConverter.getRtlScrollLeftConverter = RtlScrollConverter.reverseGetRtlScrollConverter;
47961  }
47962  /**
47963   * generate a test element for rtl testing
47964   */
47965
47966
47967  static getTestElement() {
47968    const testElement = document.createElement("div");
47969    testElement.appendChild(document.createTextNode("ABCD"));
47970    testElement.dir = "rtl";

47971    testElement.style.fontSize = "14px";
47972    testElement.style.width = "4px";
47973    testElement.style.height = "1px";
47974    testElement.style.position = "absolute";
47975    testElement.style.top = "-1000px";
47976    testElement.style.overflow = "scroll";
47977    return testElement;
47978  }
47979
47980}
47981/**
47982 * This variable holds the appropriate converter function to get the scrollLeft value
47983 * The functions initially assigned triggers a browser check when called which sets
47984 * the correct converter based on browser and then invokes it
47985 */
47986
47987
47988exports.RtlScrollConverter = RtlScrollConverter;
47989RtlScrollConverter.getRtlScrollLeftConverter = RtlScrollConverter.initialGetRtlScrollConverter;
47990/**
47991 * This variable holds the appropriate converter function to set the scrollLeft value
47992 * The functions initially assigned triggers a browser check when called which sets
47993 * the correct function based on browser and then invokes it
47994 */
47995
47996RtlScrollConverter.setRtlScrollLeftConverter = RtlScrollConverter.initialSetRtlScrollConverter;
47997
47998},{"./localization.js":381,"exenv-es6":448}],385:[function(require,module,exports){
47999"use strict";
48000
48001Object.defineProperty(exports, "__esModule", {
48002  value: true
48003});
48004exports.format = format;
48005exports.isNullOrWhiteSpace = isNullOrWhiteSpace;
48006exports.pascalCase = pascalCase;
48007exports.spinalCase = spinalCase;
48008exports.startsWith = startsWith;
48009exports.uniqueId = uniqueId;
48010let uniqueIdCounter = 0;
48011/**
48012 * Generates a unique ID based on incrementing a counter.
48013 */
48014
48015function uniqueId(prefix = "") {
48016  return `${prefix}${uniqueIdCounter++}`;
48017}
48018/**
48019 * Builds a string from a format specifier and replacement parameters.
48020 */
48021
48022
48023function format(formatSpecifier, ...parameters) {
48024  return formatSpecifier.replace(/{(\d+)}/g, function (match, index) {
48025    if (index >= parameters.length) {
48026      return match;
48027    }
48028
48029    const value = parameters[index];
48030
48031    if (typeof value !== "number" && !value) {
48032      return "";
48033    }
48034
48035    return value;
48036  });
48037}
48038/**
48039 * Check to see if one string starts with another
48040 */
48041
48042
48043function startsWith(stringToSearch, searchFor, position = 0) {
48044  if (!stringToSearch || !searchFor) {
48045    return false;
48046  }
48047
48048  return stringToSearch.substr(position, searchFor.length) === searchFor;
48049}
48050/**
48051 * Determines if the specified string is undefined, null, empty, or whitespace.
48052 * True if the value is undefined, null, empty, or whitespace, otherwise false.
48053 */
48054
48055
48056function isNullOrWhiteSpace(value) {
48057  return !value || !value.trim();
48058}
48059/**
48060 * Converts a string to Pascal Case
48061 * where the first letter of each compound word is capitalized.
48062 */
48063
48064
48065function pascalCase(value) {
48066  let newValue = `${value}`.replace(new RegExp(/[-_]+/, "g"), " ").replace(new RegExp(/[^\w\s]/, "g"), "").replace(/^\s+|\s+$|\s+(?=\s)/g, "").replace(new RegExp(/\s+(.)(\w*)/, "g"), ($1, $2, $3) => `${$2.toUpperCase() + $3.toLowerCase()}`).replace(new RegExp(/\w/), s => s.toUpperCase());
48067  let firstLowerIdx = 0;
48068
48069  for (let i = 0; i < newValue.length; i++) {
48070    const currChar = newValue.charAt(i);
48071
48072    if (currChar == currChar.toLowerCase()) {
48073      firstLowerIdx = i;
48074      break;
48075    }
48076  }
48077
48078  if (firstLowerIdx > 1) {
48079    newValue = `${newValue.charAt(0).toUpperCase()}${newValue.slice(1, firstLowerIdx - 1).toLowerCase()}` + newValue.slice(firstLowerIdx - 1);
48080  }
48081
48082  return newValue;
48083}
48084/**
48085 * converts a string from camelCase or pascalCase to spinal-case
48086 * which is an lowercase dash separated naming style.
48087 *
48088 * An example of spinal case: foo-bar-bat
48089 */
48090
48091
48092function spinalCase(value) {
48093  const valueWithLowerCaseFirstLetter = `${value.charAt(0).toLowerCase()}${value.slice(1)}`;
48094  return valueWithLowerCaseFirstLetter.replace(/([A-Z]|[0-9])/g, function (match, group1) {
48095    return `-${group1.toLowerCase()}`;
48096  });
48097}
48098
48099},{}],386:[function(require,module,exports){
48100"use strict";
48101
48102Object.defineProperty(exports, "__esModule", {
48103  value: true
48104});
48105exports.SystemColors = void 0;
48106
48107/**
48108 * Define system colors for use in CSS stylesheets.
48109 *
48110 * https://drafts.csswg.org/css-color/#css-system-colors
48111 */
48112var SystemColors;
48113exports.SystemColors = SystemColors;
48114
48115(function (SystemColors) {
48116  SystemColors["Canvas"] = "Canvas";
48117  SystemColors["CanvasText"] = "CanvasText";
48118  SystemColors["LinkText"] = "LinkText";
48119  SystemColors["VisitedText"] = "VisitedText";
48120  SystemColors["ActiveText"] = "ActiveText";
48121  SystemColors["ButtonFace"] = "ButtonFace";
48122  SystemColors["ButtonText"] = "ButtonText";
48123  SystemColors["Field"] = "Field";
48124  SystemColors["FieldText"] = "FieldText";
48125  SystemColors["Highlight"] = "Highlight";
48126  SystemColors["HighlightText"] = "HighlightText";
48127  SystemColors["GrayText"] = "GrayText";
48128})(SystemColors || (exports.SystemColors = SystemColors = {}));
48129
48130},{}],387:[function(require,module,exports){
48131"use strict";
48132
48133Object.defineProperty(exports, "__esModule", {
48134  value: true
48135});
48136exports.default = void 0;
48137
48138var _GoTrueAdminApi = _interopRequireDefault(require("./GoTrueAdminApi"));
48139
48140function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
48141
48142const AuthAdminApi = _GoTrueAdminApi.default;
48143var _default = AuthAdminApi;
48144exports.default = _default;
48145
48146},{"./GoTrueAdminApi":389}],388:[function(require,module,exports){
48147"use strict";
48148
48149Object.defineProperty(exports, "__esModule", {
48150  value: true
48151});
48152exports.default = void 0;
48153
48154var _GoTrueClient = _interopRequireDefault(require("./GoTrueClient"));
48155
48156function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
48157
48158const AuthClient = _GoTrueClient.default;
48159var _default = AuthClient;
48160exports.default = _default;
48161
48162},{"./GoTrueClient":390}],389:[function(require,module,exports){
48163"use strict";
48164
48165Object.defineProperty(exports, "__esModule", {
48166  value: true
48167});
48168exports.default = void 0;
48169
48170var _fetch = require("./lib/fetch");
48171
48172var _helpers = require("./lib/helpers");
48173
48174var _errors = require("./lib/errors");
48175
48176var __rest = void 0 && (void 0).__rest || function (s, e) {
48177  var t = {};
48178
48179  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
48180
48181  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
48182    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
48183  }
48184  return t;
48185};
48186
48187class GoTrueAdminApi {
48188  constructor({
48189    url = '',
48190    headers = {},
48191    fetch
48192  }) {
48193    this.url = url;
48194    this.headers = headers;
48195    this.fetch = (0, _helpers.resolveFetch)(fetch);
48196    this.mfa = {
48197      listFactors: this._listFactors.bind(this),
48198      deleteFactor: this._deleteFactor.bind(this)
48199    };
48200  }
48201  /**
48202   * Removes a logged-in session.
48203   * @param jwt A valid, logged-in JWT.
48204   * @param scope The logout sope.
48205   */
48206
48207
48208  async signOut(jwt, scope = 'global') {
48209    try {
48210      await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/logout?scope=${scope}`, {
48211        headers: this.headers,
48212        jwt,
48213        noResolveJson: true
48214      });
48215      return {
48216        data: null,
48217        error: null
48218      };
48219    } catch (error) {
48220      if ((0, _errors.isAuthError)(error)) {
48221        return {
48222          data: null,
48223          error
48224        };
48225      }
48226
48227      throw error;
48228    }
48229  }
48230  /**
48231   * Sends an invite link to an email address.
48232   * @param email The email address of the user.
48233   * @param options Additional options to be included when inviting.
48234   */
48235
48236

vendor: 6,455 bytes, lines 48237-48462

48237  async inviteUserByEmail(email, options = {}) {
48238    try {
48239      return await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/invite`, {
48240        body: {
48241          email,
48242          data: options.data
48243        },
48244        headers: this.headers,
48245        redirectTo: options.redirectTo,
48246        xform: _fetch._userResponse
48247      });
48248    } catch (error) {
48249      if ((0, _errors.isAuthError)(error)) {
48250        return {
48251          data: {
48252            user: null
48253          },
48254          error
48255        };
48256      }
48257
48258      throw error;
48259    }
48260  }
48261  /**
48262   * Generates email links and OTPs to be sent via a custom email provider.
48263   * @param email The user's email.
48264   * @param options.password User password. For signup only.
48265   * @param options.data Optional user metadata. For signup only.
48266   * @param options.redirectTo The redirect url which should be appended to the generated link
48267   */
48268
48269
48270  async generateLink(params) {
48271    try {
48272      const {
48273        options
48274      } = params,
48275            rest = __rest(params, ["options"]);
48276
48277      const body = Object.assign(Object.assign({}, rest), options);
48278
48279      if ('newEmail' in rest) {
48280        // replace newEmail with new_email in request body
48281        body.new_email = rest === null || rest === void 0 ? void 0 : rest.newEmail;
48282        delete body['newEmail'];
48283      }
48284
48285      return await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/admin/generate_link`, {
48286        body: body,
48287        headers: this.headers,
48288        xform: _fetch._generateLinkResponse,
48289        redirectTo: options === null || options === void 0 ? void 0 : options.redirectTo
48290      });
48291    } catch (error) {
48292      if ((0, _errors.isAuthError)(error)) {
48293        return {
48294          data: {
48295            properties: null,
48296            user: null
48297          },
48298          error
48299        };
48300      }
48301
48302      throw error;
48303    }
48304  } // User Admin API
48305
48306  /**
48307   * Creates a new user.
48308   * This function should only be called on a server. Never expose your `service_role` key in the browser.
48309   */
48310
48311
48312  async createUser(attributes) {
48313    try {
48314      return await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/admin/users`, {
48315        body: attributes,
48316        headers: this.headers,
48317        xform: _fetch._userResponse
48318      });
48319    } catch (error) {
48320      if ((0, _errors.isAuthError)(error)) {
48321        return {
48322          data: {
48323            user: null
48324          },
48325          error
48326        };
48327      }
48328
48329      throw error;
48330    }
48331  }
48332  /**
48333   * Get a list of users.
48334   *
48335   * This function should only be called on a server. Never expose your `service_role` key in the browser.
48336   * @param params An object which supports `page` and `perPage` as numbers, to alter the paginated results.
48337   */
48338
48339
48340  async listUsers(params) {
48341    var _a, _b, _c, _d, _e, _f, _g;
48342
48343    try {
48344      const pagination = {
48345        nextPage: null,
48346        lastPage: 0,
48347        total: 0
48348      };
48349      const response = await (0, _fetch._request)(this.fetch, 'GET', `${this.url}/admin/users`, {
48350        headers: this.headers,
48351        noResolveJson: true,
48352        query: {
48353          page: (_b = (_a = params === null || params === void 0 ? void 0 : params.page) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '',
48354          per_page: (_d = (_c = params === null || params === void 0 ? void 0 : params.perPage) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : ''
48355        },
48356        xform: _fetch._noResolveJsonResponse
48357      });
48358      if (response.error) throw response.error;
48359      const users = await response.json();
48360      const total = (_e = response.headers.get('x-total-count')) !== null && _e !== void 0 ? _e : 0;
48361      const links = (_g = (_f = response.headers.get('link')) === null || _f === void 0 ? void 0 : _f.split(',')) !== null && _g !== void 0 ? _g : [];
48362
48363      if (links.length > 0) {
48364        links.forEach(link => {
48365          const page = parseInt(link.split(';')[0].split('=')[1].substring(0, 1));
48366          const rel = JSON.parse(link.split(';')[1].split('=')[1]);
48367          pagination[`${rel}Page`] = page;
48368        });
48369        pagination.total = parseInt(total);
48370      }
48371
48372      return {
48373        data: Object.assign(Object.assign({}, users), pagination),
48374        error: null
48375      };
48376    } catch (error) {
48377      if ((0, _errors.isAuthError)(error)) {
48378        return {
48379          data: {
48380            users: []
48381          },
48382          error
48383        };
48384      }
48385
48386      throw error;
48387    }
48388  }
48389  /**
48390   * Get user by id.
48391   *
48392   * @param uid The user's unique identifier
48393   *
48394   * This function should only be called on a server. Never expose your `service_role` key in the browser.
48395   */
48396
48397
48398  async getUserById(uid) {
48399    try {
48400      return await (0, _fetch._request)(this.fetch, 'GET', `${this.url}/admin/users/${uid}`, {
48401        headers: this.headers,
48402        xform: _fetch._userResponse
48403      });
48404    } catch (error) {
48405      if ((0, _errors.isAuthError)(error)) {
48406        return {
48407          data: {
48408            user: null
48409          },
48410          error
48411        };
48412      }
48413
48414      throw error;
48415    }
48416  }
48417  /**
48418   * Updates the user data.
48419   *
48420   * @param attributes The data you want to update.
48421   *
48422   * This function should only be called on a server. Never expose your `service_role` key in the browser.
48423   */
48424
48425
48426  async updateUserById(uid, attributes) {
48427    try {
48428      return await (0, _fetch._request)(this.fetch, 'PUT', `${this.url}/admin/users/${uid}`, {
48429        body: attributes,
48430        headers: this.headers,
48431        xform: _fetch._userResponse
48432      });
48433    } catch (error) {
48434      if ((0, _errors.isAuthError)(error)) {
48435        return {
48436          data: {
48437            user: null
48438          },
48439          error
48440        };
48441      }
48442
48443      throw error;
48444    }
48445  }
48446  /**
48447   * Delete a user. Requires a `service_role` key.
48448   *
48449   * @param id The user id you want to remove.
48450   * @param shouldSoftDelete If true, then the user will be soft-deleted (setting `deleted_at` to the current timestamp and disabling their account while preserving their data) from the auth schema.
48451   * Defaults to false for backward compatibility.
48452   *
48453   * This function should only be called on a server. Never expose your `service_role` key in the browser.
48454   */
48455
48456
48457  async deleteUser(id, shouldSoftDelete = false) {
48458    try {
48459      return await (0, _fetch._request)(this.fetch, 'DELETE', `${this.url}/admin/users/${id}`, {
48460        headers: this.headers,
48461        body: {
48462          should_soft_delete: shouldSoftDelete

48463        },
48464        xform: _fetch._userResponse
48465      });
48466    } catch (error) {
48467      if ((0, _errors.isAuthError)(error)) {
48468        return {
48469          data: {
48470            user: null
48471          },
48472          error
48473        };
48474      }
48475
48476      throw error;
48477    }
48478  }
48479
48480  async _listFactors(params) {
48481    try {
48482      const {
48483        data,
48484        error
48485      } = await (0, _fetch._request)(this.fetch, 'GET', `${this.url}/admin/users/${params.userId}/factors`, {
48486        headers: this.headers,
48487        xform: factors => {
48488          return {
48489            data: {
48490              factors
48491            },
48492            error: null
48493          };
48494        }
48495      });
48496      return {
48497        data,
48498        error
48499      };
48500    } catch (error) {
48501      if ((0, _errors.isAuthError)(error)) {
48502        return {
48503          data: null,
48504          error
48505        };
48506      }
48507
48508      throw error;
48509    }
48510  }
48511
48512  async _deleteFactor(params) {
48513    try {
48514      const data = await (0, _fetch._request)(this.fetch, 'DELETE', `${this.url}/admin/users/${params.userId}/factors/${params.id}`, {
48515        headers: this.headers
48516      });
48517      return {
48518        data,
48519        error: null
48520      };
48521    } catch (error) {
48522      if ((0, _errors.isAuthError)(error)) {
48523        return {
48524          data: null,
48525          error
48526        };
48527      }
48528
48529      throw error;
48530    }
48531  }
48532
48533}
48534
48535exports.default = GoTrueAdminApi;
48536
48537},{"./lib/errors":393,"./lib/fetch":394,"./lib/helpers":395}],390:[function(require,module,exports){
48538"use strict";
48539
48540Object.defineProperty(exports, "__esModule", {
48541  value: true
48542});
48543exports.default = void 0;
48544
48545var _GoTrueAdminApi = _interopRequireDefault(require("./GoTrueAdminApi"));
48546
48547var _constants = require("./lib/constants");
48548
48549var _errors = require("./lib/errors");
48550
48551var _fetch = require("./lib/fetch");
48552
48553var _helpers = require("./lib/helpers");
48554
48555var _localStorage = require("./lib/local-storage");
48556
48557var _polyfills = require("./lib/polyfills");
48558
48559var _version = require("./lib/version");
48560
48561var _locks = require("./lib/locks");
48562
48563function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
48564
48565(0, _polyfills.polyfillGlobalThis)(); // Make "globalThis" available
48566
48567const DEFAULT_OPTIONS = {
48568  url: _constants.GOTRUE_URL,
48569  storageKey: _constants.STORAGE_KEY,
48570  autoRefreshToken: true,
48571  persistSession: true,
48572  detectSessionInUrl: true,
48573  headers: _constants.DEFAULT_HEADERS,
48574  flowType: 'implicit',
48575  debug: false,
48576  hasCustomAuthorizationHeader: false
48577};
48578/** Current session will be checked for refresh at this interval. */
48579
48580const AUTO_REFRESH_TICK_DURATION = 30 * 1000;
48581/**
48582 * A token refresh will be attempted this many ticks before the current session expires. */
48583
48584const AUTO_REFRESH_TICK_THRESHOLD = 3;
48585
48586async function lockNoOp(name, acquireTimeout, fn) {
48587  return await fn();
48588}
48589
48590class GoTrueClient {
48591  /**
48592   * Create a new client for use in the browser.
48593   */
48594  constructor(options) {
48595    var _a, _b;
48596
48597    this.memoryStorage = null;
48598    this.stateChangeEmitters = new Map();
48599    this.autoRefreshTicker = null;
48600    this.visibilityChangedCallback = null;
48601    this.refreshingDeferred = null;
48602    /**
48603     * Keeps track of the async client initialization.
48604     * When null or not yet resolved the auth state is `unknown`
48605     * Once resolved the the auth state is known and it's save to call any further client methods.
48606     * Keep extra care to never reject or throw uncaught errors
48607     */
48608
48609    this.initializePromise = null;
48610    this.detectSessionInUrl = true;
48611    this.hasCustomAuthorizationHeader = false;

48612    this.suppressGetSessionWarning = false;
48613    this.lockAcquired = false;
48614    this.pendingInLock = [];
48615    /**
48616     * Used to broadcast state change events to other tabs listening.
48617     */
48618
48619    this.broadcastChannel = null;
48620    this.logger = console.log;
48621    this.instanceID = GoTrueClient.nextInstanceID;
48622    GoTrueClient.nextInstanceID += 1;
48623
48624    if (this.instanceID > 0 && (0, _helpers.isBrowser)()) {
48625      console.warn('Multiple GoTrueClient instances detected in the same browser context. It is not an error, but this should be avoided as it may produce undefined behavior when used concurrently under the same storage key.');
48626    }
48627
48628    const settings = Object.assign(Object.assign({}, DEFAULT_OPTIONS), options);
48629    this.logDebugMessages = !!settings.debug;
48630
48631    if (typeof settings.debug === 'function') {
48632      this.logger = settings.debug;
48633    }
48634
48635    this.persistSession = settings.persistSession;
48636    this.storageKey = settings.storageKey;
48637    this.autoRefreshToken = settings.autoRefreshToken;
48638    this.admin = new _GoTrueAdminApi.default({
48639      url: settings.url,
48640      headers: settings.headers,
48641      fetch: settings.fetch
48642    });
48643    this.url = settings.url;
48644    this.headers = settings.headers;
48645    this.fetch = (0, _helpers.resolveFetch)(settings.fetch);
48646    this.lock = settings.lock || lockNoOp;
48647    this.detectSessionInUrl = settings.detectSessionInUrl;
48648    this.flowType = settings.flowType;
48649    this.hasCustomAuthorizationHeader = settings.hasCustomAuthorizationHeader;
48650
48651    if (settings.lock) {
48652      this.lock = settings.lock;
48653    } else if ((0, _helpers.isBrowser)() && ((_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.navigator) === null || _a === void 0 ? void 0 : _a.locks)) {
48654      this.lock = _locks.navigatorLock;
48655    } else {
48656      this.lock = lockNoOp;
48657    }
48658
48659    this.mfa = {
48660      verify: this._verify.bind(this),
48661      enroll: this._enroll.bind(this),
48662      unenroll: this._unenroll.bind(this),
48663      challenge: this._challenge.bind(this),
48664      listFactors: this._listFactors.bind(this),
48665      challengeAndVerify: this._challengeAndVerify.bind(this),
48666      getAuthenticatorAssuranceLevel: this._getAuthenticatorAssuranceLevel.bind(this)
48667    };
48668
48669    if (this.persistSession) {
48670      if (settings.storage) {
48671        this.storage = settings.storage;
48672      } else {
48673        if ((0, _helpers.supportsLocalStorage)()) {
48674          this.storage = _localStorage.localStorageAdapter;
48675        } else {
48676          this.memoryStorage = {};
48677          this.storage = (0, _localStorage.memoryLocalStorageAdapter)(this.memoryStorage);
48678        }
48679      }
48680    } else {
48681      this.memoryStorage = {};
48682      this.storage = (0, _localStorage.memoryLocalStorageAdapter)(this.memoryStorage);
48683    }
48684
48685    if ((0, _helpers.isBrowser)() && globalThis.BroadcastChannel && this.persistSession && this.storageKey) {
48686      try {
48687        this.broadcastChannel = new globalThis.BroadcastChannel(this.storageKey);
48688      } catch (e) {
48689        console.error('Failed to create a new BroadcastChannel, multi-tab state changes will not be available', e);
48690      }
48691
48692      (_b = this.broadcastChannel) === null || _b === void 0 ? void 0 : _b.addEventListener('message', async event => {
48693        this._debug('received broadcast notification from other tab or client', event);
48694
48695        await this._notifyAllSubscribers(event.data.event, event.data.session, false); // broadcast = false so we don't get an endless loop of messages
48696      });
48697    }
48698
48699    this.initialize();
48700  }
48701
48702  _debug(...args) {
48703    if (this.logDebugMessages) {
48704      this.logger(`GoTrueClient@${this.instanceID} (${_version.version}) ${new Date().toISOString()}`, ...args);
48705    }
48706
48707    return this;
48708  }
48709  /**
48710   * Initializes the client session either from the url or from storage.
48711   * This method is automatically called when instantiating the client, but should also be called
48712   * manually when checking for an error from an auth redirect (oauth, magiclink, password recovery, etc).
48713   */
48714
48715
48716  async initialize() {
48717    if (this.initializePromise) {
48718      return await this.initializePromise;
48719    }
48720
48721    this.initializePromise = (async () => {
48722      return await this._acquireLock(-1, async () => {
48723        return await this._initialize();
48724      });
48725    })();
48726
48727    return await this.initializePromise;
48728  }
48729  /**
48730   * IMPORTANT:
48731   * 1. Never throw in this method, as it is called from the constructor
48732   * 2. Never return a session from this method as it would be cached over
48733   *    the whole lifetime of the client
48734   */
48735
48736
48737  async _initialize() {
48738    try {
48739      const isPKCEFlow = (0, _helpers.isBrowser)() ? await this._isPKCEFlow() : false;

48740
48741      this._debug('#_initialize()', 'begin', 'is PKCE flow', isPKCEFlow);
48742
48743      if (isPKCEFlow || this.detectSessionInUrl && this._isImplicitGrantFlow()) {
48744        const {
48745          data,
48746          error
48747        } = await this._getSessionFromURL(isPKCEFlow);
48748
48749        if (error) {
48750          this._debug('#_initialize()', 'error detecting session from URL', error); // hacky workaround to keep the existing session if there's an error returned from identity linking
48751          // TODO: once error codes are ready, we should match against it instead of the message
48752
48753
48754          if ((error === null || error === void 0 ? void 0 : error.message) === 'Identity is already linked' || (error === null || error === void 0 ? void 0 : error.message) === 'Identity is already linked to another user') {
48755            return {
48756              error
48757            };
48758          } // failed login attempt via url,
48759          // remove old session as in verifyOtp, signUp and signInWith*
48760
48761
48762          await this._removeSession();
48763          return {
48764            error
48765          };
48766        }
48767
48768        const {
48769          session,
48770          redirectType
48771        } = data;
48772
48773        this._debug('#_initialize()', 'detected session in URL', session, 'redirect type', redirectType);
48774
48775        await this._saveSession(session);
48776        setTimeout(async () => {
48777          if (redirectType === 'recovery') {
48778            await this._notifyAllSubscribers('PASSWORD_RECOVERY', session);
48779          } else {
48780            await this._notifyAllSubscribers('SIGNED_IN', session);
48781          }
48782        }, 0);
48783        return {
48784          error: null
48785        };
48786      } // no login attempt via callback url try to recover session from storage
48787
48788
48789      await this._recoverAndRefresh();
48790      return {
48791        error: null
48792      };
48793    } catch (error) {
48794      if ((0, _errors.isAuthError)(error)) {
48795        return {
48796          error
48797        };
48798      }
48799
48800      return {
48801        error: new _errors.AuthUnknownError('Unexpected error during initialization', error)
48802      };
48803    } finally {
48804      await this._handleVisibilityChange();
48805
48806      this._debug('#_initialize()', 'end');
48807    }
48808  }
48809  /**
48810   * Creates a new anonymous user.
48811   *
48812   * @returns A session where the is_anonymous claim in the access token JWT set to true
48813   */
48814
48815
48816  async signInAnonymously(credentials) {
48817    var _a, _b, _c;
48818
48819    try {
48820      await this._removeSession();
48821      const res = await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/signup`, {
48822        headers: this.headers,
48823        body: {
48824          data: (_b = (_a = credentials === null || credentials === void 0 ? void 0 : credentials.options) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : {},
48825          gotrue_meta_security: {
48826            captcha_token: (_c = credentials === null || credentials === void 0 ? void 0 : credentials.options) === null || _c === void 0 ? void 0 : _c.captchaToken
48827          }
48828        },
48829        xform: _fetch._sessionResponse
48830      });
48831      const {
48832        data,
48833        error
48834      } = res;
48835
48836      if (error || !data) {
48837        return {
48838          data: {
48839            user: null,
48840            session: null
48841          },
48842          error: error
48843        };
48844      }
48845
48846      const session = data.session;
48847      const user = data.user;
48848
48849      if (data.session) {
48850        await this._saveSession(data.session);
48851        await this._notifyAllSubscribers('SIGNED_IN', session);
48852      }
48853
48854      return {
48855        data: {
48856          user,
48857          session
48858        },
48859        error: null
48860      };
48861    } catch (error) {
48862      if ((0, _errors.isAuthError)(error)) {
48863        return {
48864          data: {
48865            user: null,
48866            session: null
48867          },
48868          error
48869        };
48870      }
48871
48872      throw error;
48873    }
48874  }
48875  /**
48876   * Creates a new user.
48877   *
48878   * Be aware that if a user account exists in the system you may get back an
48879   * error message that attempts to hide this information from the user.
48880   * This method has support for PKCE via email signups. The PKCE flow cannot be used when autoconfirm is enabled.
48881   *
48882   * @returns A logged-in session if the server has "autoconfirm" ON
48883   * @returns A user if the server has "autoconfirm" OFF
48884   */
48885
48886
48887  async signUp(credentials) {
48888    var _a, _b, _c;
48889
48890    try {
48891      await this._removeSession();
48892      let res;
48893
48894      if ('email' in credentials) {
48895        const {
48896          email,
48897          password,
48898          options
48899        } = credentials;
48900        let codeChallenge = null;
48901        let codeChallengeMethod = null;
48902
48903        if (this.flowType === 'pkce') {
48904          ;
48905          [codeChallenge, codeChallengeMethod] = await (0, _helpers.getCodeChallengeAndMethod)(this.storage, this.storageKey);
48906        }
48907
48908        res = await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/signup`, {
48909          headers: this.headers,
48910          redirectTo: options === null || options === void 0 ? void 0 : options.emailRedirectTo,
48911          body: {
48912            email,
48913            password,
48914            data: (_a = options === null || options === void 0 ? void 0 : options.data) !== null && _a !== void 0 ? _a : {},
48915            gotrue_meta_security: {
48916              captcha_token: options === null || options === void 0 ? void 0 : options.captchaToken
48917            },
48918            code_challenge: codeChallenge,
48919            code_challenge_method: codeChallengeMethod
48920          },
48921          xform: _fetch._sessionResponse
48922        });
48923      } else if ('phone' in credentials) {
48924        const {
48925          phone,
48926          password,
48927          options
48928        } = credentials;
48929        res = await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/signup`, {
48930          headers: this.headers,
48931          body: {
48932            phone,
48933            password,
48934            data: (_b = options === null || options === void 0 ? void 0 : options.data) !== null && _b !== void 0 ? _b : {},
48935            channel: (_c = options === null || options === void 0 ? void 0 : options.channel) !== null && _c !== void 0 ? _c : 'sms',
48936            gotrue_meta_security: {
48937              captcha_token: options === null || options === void 0 ? void 0 : options.captchaToken
48938            }
48939          },
48940          xform: _fetch._sessionResponse
48941        });
48942      } else {
48943        throw new _errors.AuthInvalidCredentialsError('You must provide either an email or phone number and a password');
48944      }
48945
48946      const {
48947        data,
48948        error
48949      } = res;
48950
48951      if (error || !data) {
48952        return {
48953          data: {
48954            user: null,
48955            session: null
48956          },
48957          error: error
48958        };
48959      }
48960
48961      const session = data.session;
48962      const user = data.user;
48963
48964      if (data.session) {
48965        await this._saveSession(data.session);
48966        await this._notifyAllSubscribers('SIGNED_IN', session);
48967      }
48968
48969      return {
48970        data: {
48971          user,
48972          session
48973        },
48974        error: null
48975      };
48976    } catch (error) {
48977      if ((0, _errors.isAuthError)(error)) {
48978        return {
48979          data: {
48980            user: null,
48981            session: null
48982          },
48983          error
48984        };
48985      }
48986
48987      throw error;
48988    }
48989  }
48990  /**
48991   * Log in an existing user with an email and password or phone and password.
48992   *
48993   * Be aware that you may get back an error message that will not distinguish
48994   * between the cases where the account does not exist or that the
48995   * email/phone and password combination is wrong or that the account can only
48996   * be accessed via social login.
48997   */
48998
48999
49000  async signInWithPassword(credentials) {
49001    try {
49002      await this._removeSession();
49003      let res;
49004
49005      if ('email' in credentials) {
49006        const {
49007          email,
49008          password,
49009          options
49010        } = credentials;
49011        res = await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/token?grant_type=password`, {
49012          headers: this.headers,
49013          body: {
49014            email,
49015            password,
49016            gotrue_meta_security: {
49017              captcha_token: options === null || options === void 0 ? void 0 : options.captchaToken
49018            }
49019          },
49020          xform: _fetch._sessionResponsePassword
49021        });
49022      } else if ('phone' in credentials) {
49023        const {
49024          phone,
49025          password,
49026          options
49027        } = credentials;
49028        res = await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/token?grant_type=password`, {
49029          headers: this.headers,
49030          body: {
49031            phone,
49032            password,
49033            gotrue_meta_security: {
49034              captcha_token: options === null || options === void 0 ? void 0 : options.captchaToken
49035            }
49036          },
49037          xform: _fetch._sessionResponsePassword
49038        });
49039      } else {
49040        throw new _errors.AuthInvalidCredentialsError('You must provide either an email or phone number and a password');
49041      }
49042
49043      const {
49044        data,
49045        error
49046      } = res;
49047
49048      if (error) {
49049        return {
49050          data: {
49051            user: null,
49052            session: null
49053          },
49054          error
49055        };
49056      } else if (!data || !data.session || !data.user) {
49057        return {
49058          data: {
49059            user: null,
49060            session: null
49061          },

49062          error: new _errors.AuthInvalidTokenResponseError()
49063        };
49064      }
49065
49066      if (data.session) {
49067        await this._saveSession(data.session);
49068        await this._notifyAllSubscribers('SIGNED_IN', data.session);
49069      }
49070
49071      return {
49072        data: Object.assign({
49073          user: data.user,
49074          session: data.session
49075        }, data.weak_password ? {
49076          weakPassword: data.weak_password
49077        } : null),
49078        error
49079      };
49080    } catch (error) {
49081      if ((0, _errors.isAuthError)(error)) {
49082        return {
49083          data: {
49084            user: null,
49085            session: null
49086          },
49087          error
49088        };
49089      }
49090
49091      throw error;
49092    }
49093  }
49094  /**
49095   * Log in an existing user via a third-party provider.
49096   * This method supports the PKCE flow.
49097   */
49098
49099
49100  async signInWithOAuth(credentials) {
49101    var _a, _b, _c, _d;
49102
49103    await this._removeSession();
49104    return await this._handleProviderSignIn(credentials.provider, {
49105      redirectTo: (_a = credentials.options) === null || _a === void 0 ? void 0 : _a.redirectTo,
49106      scopes: (_b = credentials.options) === null || _b === void 0 ? void 0 : _b.scopes,
49107      queryParams: (_c = credentials.options) === null || _c === void 0 ? void 0 : _c.queryParams,
49108      skipBrowserRedirect: (_d = credentials.options) === null || _d === void 0 ? void 0 : _d.skipBrowserRedirect
49109    });
49110  }
49111  /**
49112   * Log in an existing user by exchanging an Auth Code issued during the PKCE flow.
49113   */
49114
49115
49116  async exchangeCodeForSession(authCode) {
49117    await this.initializePromise;
49118    return this._acquireLock(-1, async () => {
49119      return this._exchangeCodeForSession(authCode);
49120    });
49121  }
49122
49123  async _exchangeCodeForSession(authCode) {
49124    const storageItem = await (0, _helpers.getItemAsync)(this.storage, `${this.storageKey}-code-verifier`);
49125    const [codeVerifier, redirectType] = (storageItem !== null && storageItem !== void 0 ? storageItem : '').split('/');
49126    const {
49127      data,
49128      error
49129    } = await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/token?grant_type=pkce`, {
49130      headers: this.headers,
49131      body: {
49132        auth_code: authCode,
49133        code_verifier: codeVerifier
49134      },
49135      xform: _fetch._sessionResponse
49136    });
49137    await (0, _helpers.removeItemAsync)(this.storage, `${this.storageKey}-code-verifier`);
49138
49139    if (error) {
49140      return {
49141        data: {
49142          user: null,
49143          session: null,
49144          redirectType: null
49145        },
49146        error
49147      };
49148    } else if (!data || !data.session || !data.user) {
49149      return {
49150        data: {
49151          user: null,
49152          session: null,
49153          redirectType: null
49154        },

49155        error: new _errors.AuthInvalidTokenResponseError()
49156      };
49157    }
49158
49159    if (data.session) {
49160      await this._saveSession(data.session);
49161      await this._notifyAllSubscribers('SIGNED_IN', data.session);
49162    }
49163
49164    return {
49165      data: Object.assign(Object.assign({}, data), {
49166        redirectType: redirectType !== null && redirectType !== void 0 ? redirectType : null
49167      }),
49168      error
49169    };
49170  }
49171  /**
49172   * Allows signing in with an OIDC ID token. The authentication provider used
49173   * should be enabled and configured.
49174   */
49175
49176
49177  async signInWithIdToken(credentials) {
49178    await this._removeSession();
49179
49180    try {
49181      const {
49182        options,
49183        provider,
49184        token,
49185        access_token,
49186        nonce
49187      } = credentials;
49188      const res = await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/token?grant_type=id_token`, {
49189        headers: this.headers,
49190        body: {
49191          provider,
49192          id_token: token,
49193          access_token,
49194          nonce,
49195          gotrue_meta_security: {
49196            captcha_token: options === null || options === void 0 ? void 0 : options.captchaToken
49197          }
49198        },
49199        xform: _fetch._sessionResponse
49200      });
49201      const {
49202        data,
49203        error
49204      } = res;
49205
49206      if (error) {
49207        return {
49208          data: {
49209            user: null,
49210            session: null
49211          },
49212          error
49213        };
49214      } else if (!data || !data.session || !data.user) {
49215        return {
49216          data: {
49217            user: null,
49218            session: null
49219          },

49220          error: new _errors.AuthInvalidTokenResponseError()
49221        };
49222      }
49223
49224      if (data.session) {
49225        await this._saveSession(data.session);
49226        await this._notifyAllSubscribers('SIGNED_IN', data.session);
49227      }
49228
49229      return {
49230        data,
49231        error
49232      };
49233    } catch (error) {
49234      if ((0, _errors.isAuthError)(error)) {
49235        return {
49236          data: {
49237            user: null,
49238            session: null
49239          },
49240          error
49241        };
49242      }
49243
49244      throw error;
49245    }
49246  }
49247  /**
49248   * Log in a user using magiclink or a one-time password (OTP).
49249   *
49250   * If the `{{ .ConfirmationURL }}` variable is specified in the email template, a magiclink will be sent.
49251   * If the `{{ .Token }}` variable is specified in the email template, an OTP will be sent.
49252   * If you're using phone sign-ins, only an OTP will be sent. You won't be able to send a magiclink for phone sign-ins.
49253   *
49254   * Be aware that you may get back an error message that will not distinguish
49255   * between the cases where the account does not exist or, that the account
49256   * can only be accessed via social login.
49257   *
49258   * Do note that you will need to configure a Whatsapp sender on Twilio
49259   * if you are using phone sign in with the 'whatsapp' channel. The whatsapp
49260   * channel is not supported on other providers
49261   * at this time.
49262   * This method supports PKCE when an email is passed.
49263   */
49264
49265
49266  async signInWithOtp(credentials) {
49267    var _a, _b, _c, _d, _e;
49268
49269    try {
49270      await this._removeSession();
49271
49272      if ('email' in credentials) {
49273        const {
49274          email,
49275          options
49276        } = credentials;
49277        let codeChallenge = null;
49278        let codeChallengeMethod = null;
49279
49280        if (this.flowType === 'pkce') {
49281          ;
49282          [codeChallenge, codeChallengeMethod] = await (0, _helpers.getCodeChallengeAndMethod)(this.storage, this.storageKey);
49283        }
49284
49285        const {
49286          error
49287        } = await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/otp`, {
49288          headers: this.headers,
49289          body: {
49290            email,
49291            data: (_a = options === null || options === void 0 ? void 0 : options.data) !== null && _a !== void 0 ? _a : {},
49292            create_user: (_b = options === null || options === void 0 ? void 0 : options.shouldCreateUser) !== null && _b !== void 0 ? _b : true,
49293            gotrue_meta_security: {
49294              captcha_token: options === null || options === void 0 ? void 0 : options.captchaToken
49295            },
49296            code_challenge: codeChallenge,
49297            code_challenge_method: codeChallengeMethod
49298          },
49299          redirectTo: options === null || options === void 0 ? void 0 : options.emailRedirectTo
49300        });
49301        return {
49302          data: {
49303            user: null,
49304            session: null
49305          },
49306          error
49307        };
49308      }
49309
49310      if ('phone' in credentials) {
49311        const {
49312          phone,
49313          options
49314        } = credentials;
49315        const {
49316          data,
49317          error
49318        } = await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/otp`, {
49319          headers: this.headers,
49320          body: {
49321            phone,
49322            data: (_c = options === null || options === void 0 ? void 0 : options.data) !== null && _c !== void 0 ? _c : {},
49323            create_user: (_d = options === null || options === void 0 ? void 0 : options.shouldCreateUser) !== null && _d !== void 0 ? _d : true,
49324            gotrue_meta_security: {
49325              captcha_token: options === null || options === void 0 ? void 0 : options.captchaToken
49326            },
49327            channel: (_e = options === null || options === void 0 ? void 0 : options.channel) !== null && _e !== void 0 ? _e : 'sms'
49328          }
49329        });
49330        return {
49331          data: {
49332            user: null,
49333            session: null,
49334            messageId: data === null || data === void 0 ? void 0 : data.message_id
49335          },
49336          error
49337        };
49338      }
49339
49340      throw new _errors.AuthInvalidCredentialsError('You must provide either an email or phone number.');
49341    } catch (error) {
49342      if ((0, _errors.isAuthError)(error)) {
49343        return {
49344          data: {
49345            user: null,
49346            session: null
49347          },
49348          error
49349        };
49350      }
49351
49352      throw error;
49353    }
49354  }
49355  /**
49356   * Log in a user given a User supplied OTP or TokenHash received through mobile or email.
49357   */
49358
49359
49360  async verifyOtp(params) {
49361    var _a, _b;
49362
49363    try {
49364      if (params.type !== 'email_change' && params.type !== 'phone_change') {
49365        // we don't want to remove the authenticated session if the user is performing an email_change or phone_change verification
49366        await this._removeSession();
49367      }
49368
49369      let redirectTo = undefined;
49370      let captchaToken = undefined;
49371
49372      if ('options' in params) {
49373        redirectTo = (_a = params.options) === null || _a === void 0 ? void 0 : _a.redirectTo;
49374        captchaToken = (_b = params.options) === null || _b === void 0 ? void 0 : _b.captchaToken;
49375      }
49376
49377      const {
49378        data,
49379        error
49380      } = await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/verify`, {
49381        headers: this.headers,
49382        body: Object.assign(Object.assign({}, params), {
49383          gotrue_meta_security: {
49384            captcha_token: captchaToken
49385          }
49386        }),
49387        redirectTo,
49388        xform: _fetch._sessionResponse
49389      });
49390
49391      if (error) {
49392        throw error;
49393      }
49394
49395      if (!data) {
49396        throw new Error('An error occurred on token verification.');
49397      }
49398
49399      const session = data.session;
49400      const user = data.user;
49401
49402      if (session === null || session === void 0 ? void 0 : session.access_token) {
49403        await this._saveSession(session);
49404        await this._notifyAllSubscribers(params.type == 'recovery' ? 'PASSWORD_RECOVERY' : 'SIGNED_IN', session);
49405      }
49406
49407      return {
49408        data: {
49409          user,
49410          session
49411        },
49412        error: null
49413      };
49414    } catch (error) {
49415      if ((0, _errors.isAuthError)(error)) {
49416        return {
49417          data: {
49418            user: null,
49419            session: null
49420          },
49421          error
49422        };
49423      }
49424
49425      throw error;
49426    }
49427  }
49428  /**
49429   * Attempts a single-sign on using an enterprise Identity Provider. A
49430   * successful SSO attempt will redirect the current page to the identity
49431   * provider authorization page. The redirect URL is implementation and SSO
49432   * protocol specific.
49433   *
49434   * You can use it by providing a SSO domain. Typically you can extract this
49435   * domain by asking users for their email address. If this domain is
49436   * registered on the Auth instance the redirect will use that organization's
49437   * currently active SSO Identity Provider for the login.
49438   *
49439   * If you have built an organization-specific login page, you can use the
49440   * organization's SSO Identity Provider UUID directly instead.
49441   */
49442
49443
49444  async signInWithSSO(params) {
49445    var _a, _b, _c;
49446
49447    try {
49448      await this._removeSession();
49449      let codeChallenge = null;
49450      let codeChallengeMethod = null;
49451
49452      if (this.flowType === 'pkce') {
49453        ;
49454        [codeChallenge, codeChallengeMethod] = await (0, _helpers.getCodeChallengeAndMethod)(this.storage, this.storageKey);
49455      }
49456
49457      return await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/sso`, {
49458        body: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, 'providerId' in params ? {
49459          provider_id: params.providerId
49460        } : null), 'domain' in params ? {
49461          domain: params.domain
49462        } : null), {
49463          redirect_to: (_b = (_a = params.options) === null || _a === void 0 ? void 0 : _a.redirectTo) !== null && _b !== void 0 ? _b : undefined
49464        }), ((_c = params === null || params === void 0 ? void 0 : params.options) === null || _c === void 0 ? void 0 : _c.captchaToken) ? {
49465          gotrue_meta_security: {
49466            captcha_token: params.options.captchaToken
49467          }
49468        } : null), {
49469          skip_http_redirect: true,
49470          code_challenge: codeChallenge,
49471          code_challenge_method: codeChallengeMethod
49472        }),
49473        headers: this.headers,
49474        xform: _fetch._ssoResponse
49475      });
49476    } catch (error) {
49477      if ((0, _errors.isAuthError)(error)) {
49478        return {
49479          data: null,
49480          error
49481        };
49482      }
49483
49484      throw error;
49485    }
49486  }
49487  /**
49488   * Sends a reauthentication OTP to the user's email or phone number.
49489   * Requires the user to be signed-in.
49490   */
49491
49492
49493  async reauthenticate() {
49494    await this.initializePromise;
49495    return await this._acquireLock(-1, async () => {
49496      return await this._reauthenticate();
49497    });
49498  }
49499
49500  async _reauthenticate() {
49501    try {
49502      return await this._useSession(async result => {
49503        const {
49504          data: {
49505            session
49506          },
49507          error: sessionError
49508        } = result;
49509        if (sessionError) throw sessionError;
49510        if (!session) throw new _errors.AuthSessionMissingError();
49511        const {
49512          error
49513        } = await (0, _fetch._request)(this.fetch, 'GET', `${this.url}/reauthenticate`, {
49514          headers: this.headers,
49515          jwt: session.access_token
49516        });
49517        return {
49518          data: {
49519            user: null,
49520            session: null
49521          },
49522          error
49523        };
49524      });
49525    } catch (error) {
49526      if ((0, _errors.isAuthError)(error)) {
49527        return {
49528          data: {
49529            user: null,
49530            session: null
49531          },
49532          error
49533        };
49534      }
49535
49536      throw error;
49537    }
49538  }
49539  /**
49540   * Resends an existing signup confirmation email, email change email, SMS OTP or phone change OTP.
49541   */
49542
49543
49544  async resend(credentials) {
49545    try {
49546      if (credentials.type != 'email_change' && credentials.type != 'phone_change') {
49547        await this._removeSession();
49548      }
49549
49550      const endpoint = `${this.url}/resend`;
49551
49552      if ('email' in credentials) {
49553        const {
49554          email,
49555          type,
49556          options
49557        } = credentials;
49558        const {
49559          error
49560        } = await (0, _fetch._request)(this.fetch, 'POST', endpoint, {
49561          headers: this.headers,
49562          body: {
49563            email,
49564            type,
49565            gotrue_meta_security: {
49566              captcha_token: options === null || options === void 0 ? void 0 : options.captchaToken
49567            }
49568          },
49569          redirectTo: options === null || options === void 0 ? void 0 : options.emailRedirectTo
49570        });
49571        return {
49572          data: {
49573            user: null,
49574            session: null
49575          },
49576          error
49577        };
49578      } else if ('phone' in credentials) {
49579        const {
49580          phone,
49581          type,
49582          options
49583        } = credentials;
49584        const {
49585          data,
49586          error
49587        } = await (0, _fetch._request)(this.fetch, 'POST', endpoint, {
49588          headers: this.headers,
49589          body: {
49590            phone,
49591            type,
49592            gotrue_meta_security: {
49593              captcha_token: options === null || options === void 0 ? void 0 : options.captchaToken
49594            }
49595          }
49596        });
49597        return {
49598          data: {
49599            user: null,
49600            session: null,
49601            messageId: data === null || data === void 0 ? void 0 : data.message_id
49602          },
49603          error
49604        };
49605      }
49606
49607      throw new _errors.AuthInvalidCredentialsError('You must provide either an email or phone number and a type');
49608    } catch (error) {
49609      if ((0, _errors.isAuthError)(error)) {
49610        return {
49611          data: {
49612            user: null,
49613            session: null
49614          },
49615          error
49616        };
49617      }
49618
49619      throw error;
49620    }
49621  }
49622  /**
49623   * Returns the session, refreshing it if necessary.
49624   *
49625   * The session returned can be null if the session is not detected which can happen in the event a user is not signed-in or has logged out.
49626   *
49627   * **IMPORTANT:** This method loads values directly from the storage attached
49628   * to the client. If that storage is based on request cookies for example,
49629   * the values in it may not be authentic and therefore it's strongly advised
49630   * against using this method and its results in such circumstances. A warning
49631   * will be emitted if this is detected. Use {@link #getUser()} instead.
49632   */
49633
49634
49635  async getSession() {
49636    await this.initializePromise;
49637    const result = await this._acquireLock(-1, async () => {
49638      return this._useSession(async result => {
49639        return result;
49640      });
49641    });
49642    return result;
49643  }
49644  /**
49645   * Acquires a global lock based on the storage key.
49646   */
49647
49648
49649  async _acquireLock(acquireTimeout, fn) {
49650    this._debug('#_acquireLock', 'begin', acquireTimeout);
49651
49652    try {
49653      if (this.lockAcquired) {
49654        const last = this.pendingInLock.length ? this.pendingInLock[this.pendingInLock.length - 1] : Promise.resolve();
49655
49656        const result = (async () => {
49657          await last;
49658          return await fn();
49659        })();
49660
49661        this.pendingInLock.push((async () => {
49662          try {
49663            await result;
49664          } catch (e) {// we just care if it finished
49665          }
49666        })());
49667        return result;
49668      }
49669
49670      return await this.lock(`lock:${this.storageKey}`, acquireTimeout, async () => {
49671        this._debug('#_acquireLock', 'lock acquired for storage key', this.storageKey);
49672
49673        try {
49674          this.lockAcquired = true;
49675          const result = fn();
49676          this.pendingInLock.push((async () => {
49677            try {
49678              await result;
49679            } catch (e) {// we just care if it finished
49680            }
49681          })());
49682          await result; // keep draining the queue until there's nothing to wait on
49683
49684          while (this.pendingInLock.length) {
49685            const waitOn = [...this.pendingInLock];
49686            await Promise.all(waitOn);
49687            this.pendingInLock.splice(0, waitOn.length);
49688          }
49689
49690          return await result;
49691        } finally {
49692          this._debug('#_acquireLock', 'lock released for storage key', this.storageKey);
49693
49694          this.lockAcquired = false;

49695        }
49696      });
49697    } finally {
49698      this._debug('#_acquireLock', 'end');
49699    }
49700  }
49701  /**
49702   * Use instead of {@link #getSession} inside the library. It is
49703   * semantically usually what you want, as getting a session involves some
49704   * processing afterwards that requires only one client operating on the
49705   * session at once across multiple tabs or processes.
49706   */
49707
49708
49709  async _useSession(fn) {
49710    this._debug('#_useSession', 'begin');
49711
49712    try {
49713      // the use of __loadSession here is the only correct use of the function!
49714      const result = await this.__loadSession();
49715      return await fn(result);
49716    } finally {
49717      this._debug('#_useSession', 'end');
49718    }
49719  }
49720  /**
49721   * NEVER USE DIRECTLY!
49722   *
49723   * Always use {@link #_useSession}.
49724   */
49725
49726
49727  async __loadSession() {
49728    this._debug('#__loadSession()', 'begin');
49729
49730    if (!this.lockAcquired) {
49731      this._debug('#__loadSession()', 'used outside of an acquired lock!', new Error().stack);
49732    }
49733
49734    try {
49735      let currentSession = null;
49736      const maybeSession = await (0, _helpers.getItemAsync)(this.storage, this.storageKey);
49737
49738      this._debug('#getSession()', 'session from storage', maybeSession);
49739
49740      if (maybeSession !== null) {
49741        if (this._isValidSession(maybeSession)) {
49742          currentSession = maybeSession;
49743        } else {
49744          this._debug('#getSession()', 'session from storage is not valid');
49745
49746          await this._removeSession();
49747        }
49748      }
49749
49750      if (!currentSession) {
49751        return {
49752          data: {
49753            session: null
49754          },
49755          error: null
49756        };
49757      }
49758
49759      const hasExpired = currentSession.expires_at ? currentSession.expires_at <= Date.now() / 1000 : false;
49760
49761      this._debug('#__loadSession()', `session has${hasExpired ? '' : ' not'} expired`, 'expires_at', currentSession.expires_at);
49762
49763      if (!hasExpired) {
49764        if (this.storage.isServer) {
49765          const suppressWarning = this.suppressGetSessionWarning;
49766          const proxySession = new Proxy(currentSession, {
49767            get(target, prop, receiver) {
49768              if (!suppressWarning && prop === 'user') {
49769                // only show warning when the user object is being accessed from the server
49770                console.warn('Using the user object as returned from supabase.auth.getSession() or from some supabase.auth.onAuthStateChange() events could be insecure! This value comes directly from the storage medium (usually cookies on the server) and many not be authentic. Use supabase.auth.getUser() instead which authenticates the data by contacting the Supabase Auth server.');
49771              }
49772
49773              return Reflect.get(target, prop, receiver);
49774            }
49775
49776          });
49777          currentSession = proxySession;
49778        }
49779
49780        return {
49781          data: {
49782            session: currentSession
49783          },
49784          error: null
49785        };
49786      }
49787
49788      const {
49789        session,
49790        error
49791      } = await this._callRefreshToken(currentSession.refresh_token);
49792
49793      if (error) {
49794        return {
49795          data: {
49796            session: null
49797          },
49798          error
49799        };
49800      }
49801
49802      return {
49803        data: {
49804          session
49805        },
49806        error: null
49807      };
49808    } finally {
49809      this._debug('#__loadSession()', 'end');
49810    }
49811  }
49812  /**
49813   * Gets the current user details if there is an existing session. This method
49814   * performs a network request to the Supabase Auth server, so the returned
49815   * value is authentic and can be used to base authorization rules on.
49816   *
49817   * @param jwt Takes in an optional access token JWT. If no JWT is provided, the JWT from the current session is used.
49818   */
49819
49820
49821  async getUser(jwt) {
49822    if (jwt) {
49823      return await this._getUser(jwt);
49824    }
49825
49826    await this.initializePromise;
49827    const result = await this._acquireLock(-1, async () => {
49828      return await this._getUser();
49829    });
49830    return result;
49831  }
49832
49833  async _getUser(jwt) {
49834    try {
49835      if (jwt) {
49836        return await (0, _fetch._request)(this.fetch, 'GET', `${this.url}/user`, {
49837          headers: this.headers,
49838          jwt: jwt,
49839          xform: _fetch._userResponse
49840        });
49841      }
49842
49843      return await this._useSession(async result => {
49844        var _a, _b, _c;
49845
49846        const {
49847          data,
49848          error
49849        } = result;
49850
49851        if (error) {
49852          throw error;
49853        } // returns an error if there is no access_token or custom authorization header
49854
49855
49856        if (!((_a = data.session) === null || _a === void 0 ? void 0 : _a.access_token) && !this.hasCustomAuthorizationHeader) {
49857          return {
49858            data: {
49859              user: null
49860            },
49861            error: new _errors.AuthSessionMissingError()
49862          };
49863        }
49864
49865        return await (0, _fetch._request)(this.fetch, 'GET', `${this.url}/user`, {
49866          headers: this.headers,
49867          jwt: (_c = (_b = data.session) === null || _b === void 0 ? void 0 : _b.access_token) !== null && _c !== void 0 ? _c : undefined,
49868          xform: _fetch._userResponse
49869        });
49870      });
49871    } catch (error) {
49872      if ((0, _errors.isAuthError)(error)) {
49873        return {
49874          data: {
49875            user: null
49876          },
49877          error
49878        };
49879      }
49880
49881      throw error;
49882    }
49883  }
49884  /**
49885   * Updates user data for a logged in user.
49886   */
49887
49888
49889  async updateUser(attributes, options = {}) {
49890    await this.initializePromise;
49891    return await this._acquireLock(-1, async () => {
49892      return await this._updateUser(attributes, options);
49893    });
49894  }
49895
49896  async _updateUser(attributes, options = {}) {
49897    try {
49898      return await this._useSession(async result => {
49899        const {
49900          data: sessionData,
49901          error: sessionError
49902        } = result;
49903
49904        if (sessionError) {
49905          throw sessionError;
49906        }
49907
49908        if (!sessionData.session) {
49909          throw new _errors.AuthSessionMissingError();
49910        }
49911
49912        const session = sessionData.session;
49913        let codeChallenge = null;
49914        let codeChallengeMethod = null;
49915
49916        if (this.flowType === 'pkce' && attributes.email != null) {
49917          ;
49918          [codeChallenge, codeChallengeMethod] = await (0, _helpers.getCodeChallengeAndMethod)(this.storage, this.storageKey);
49919        }
49920
49921        const {
49922          data,
49923          error: userError
49924        } = await (0, _fetch._request)(this.fetch, 'PUT', `${this.url}/user`, {
49925          headers: this.headers,
49926          redirectTo: options === null || options === void 0 ? void 0 : options.emailRedirectTo,
49927          body: Object.assign(Object.assign({}, attributes), {
49928            code_challenge: codeChallenge,
49929            code_challenge_method: codeChallengeMethod
49930          }),
49931          jwt: session.access_token,
49932          xform: _fetch._userResponse
49933        });
49934        if (userError) throw userError;
49935        session.user = data.user;
49936        await this._saveSession(session);
49937        await this._notifyAllSubscribers('USER_UPDATED', session);
49938        return {
49939          data: {
49940            user: session.user
49941          },
49942          error: null
49943        };
49944      });
49945    } catch (error) {
49946      if ((0, _errors.isAuthError)(error)) {
49947        return {
49948          data: {
49949            user: null
49950          },
49951          error
49952        };
49953      }
49954
49955      throw error;
49956    }
49957  }
49958  /**
49959   * Decodes a JWT (without performing any validation).
49960   */
49961
49962
49963  _decodeJWT(jwt) {
49964    return (0, _helpers.decodeJWTPayload)(jwt);
49965  }
49966  /**
49967   * Sets the session data from the current session. If the current session is expired, setSession will take care of refreshing it to obtain a new session.
49968   * If the refresh token or access token in the current session is invali

49968d, an error will be thrown.
49969   * @param currentSession The current session that minimally contains an access token and refresh token.
49970   */
49971
49972
49973  async setSession(currentSession) {
49974    await this.initializePromise;
49975    return await this._acquireLock(-1, async () => {
49976      return await this._setSession(currentSession);
49977    });
49978  }
49979
49980  async _setSession(currentSession) {
49981    try {
49982      if (!currentSession.access_token || !currentSession.refresh_token) {
49983        throw new _errors.AuthSessionMissingError();
49984      }
49985
49986      const timeNow = Date.now() / 1000;
49987      let expiresAt = timeNow;
49988      let hasExpired = true;
49989      let session = null;
49990      const payload = (0, _helpers.decodeJWTPayload)(currentSession.access_token);
49991
49992      if (payload.exp) {
49993        expiresAt = payload.exp;
49994        hasExpired = expiresAt <= timeNow;
49995      }
49996
49997      if (hasExpired) {
49998        const {
49999          session: refreshedSession,
50000          error
50001        } = await this._callRefreshToken(currentSession.refresh_token);
50002
50003        if (error) {
50004          return {
50005            data: {
50006              user: null,
50007              session: null
50008            },
50009            error: error
50010          };
50011        }
50012
50013        if (!refreshedSession) {
50014          return {
50015            data: {
50016              user: null,
50017              session: null
50018            },
50019            error: null
50020          };
50021        }
50022
50023        session = refreshedSession;
50024      } else {
50025        const {
50026          data,
50027          error
50028        } = await this._getUser(currentSession.access_token);
50029
50030        if (error) {
50031          throw error;
50032        }
50033
50034        session = {
50035          access_token: currentSession.access_token,
50036          refresh_token: currentSession.refresh_token,
50037          user: data.user,
50038          token_type: 'bearer',
50039          expires_in: expiresAt - timeNow,
50040          expires_at: expiresAt
50041        };
50042        await this._saveSession(session);
50043        await this._notifyAllSubscribers('SIGNED_IN', session);
50044      }
50045
50046      return {
50047        data: {
50048          user: session.user,
50049          session
50050        },
50051        error: null
50052      };
50053    } catch (error) {
50054      if ((0, _errors.isAuthError)(error)) {
50055        return {
50056          data: {
50057            session: null,
50058            user: null
50059          },
50060          error
50061        };
50062      }
50063
50064      throw error;
50065    }
50066  }
50067  /**
50068   * Returns a new session, regardless of expiry status.
50069   * Takes in an optional current session. If not passed in, then refreshSession() will attempt to retrieve it from getSession().
50070   * If the current session's refresh token is invalid, an error will be thrown.
50071   * @param currentSession The current session. If passed in, it must contain a refresh token.
50072   */
50073
50074
50075  async refreshSession(currentSession) {
50076    await this.initializePromise;
50077    return await this._acquireLock(-1, async () => {
50078      return await this._refreshSession(currentSession);
50079    });
50080  }
50081
50082  async _refreshSession(currentSession) {
50083    try {
50084      return await this._useSession(async result => {
50085        var _a;
50086
50087        if (!currentSession) {
50088          const {
50089            data,
50090            error
50091          } = result;
50092
50093          if (error) {
50094            throw error;
50095          }
50096
50097          currentSession = (_a = data.session) !== null && _a !== void 0 ? _a : undefined;
50098        }
50099
50100        if (!(currentSession === null || currentSession === void 0 ? void 0 : currentSession.refresh_token)) {
50101          throw new _errors.AuthSessionMissingError();
50102        }
50103
50104        const {
50105          session,
50106          error
50107        } = await this._callRefreshToken(currentSession.refresh_token);
50108
50109        if (error) {
50110          return {
50111            data: {
50112              user: null,
50113              session: null
50114            },
50115            error: error
50116          };
50117        }
50118
50119        if (!session) {
50120          return {
50121            data: {
50122              user: null,
50123              session: null
50124            },
50125            error: null
50126          };
50127        }
50128
50129        return {
50130          data: {
50131            user: session.user,
50132            session
50133          },
50134          error: null
50135        };
50136      });
50137    } catch (error) {
50138      if ((0, _errors.isAuthError)(error)) {
50139        return {
50140          data: {
50141            user: null,
50142            session: null
50143          },
50144          error
50145        };
50146      }
50147
50148      throw error;
50149    }
50150  }
50151  /**
50152   * Gets the session data from a URL string
50153   */
50154
50155
50156  async _getSessionFromURL(isPKCEFlow) {
50157    try {
50158      if (!(0, _helpers.isBrowser)()) throw new _errors.AuthImplicitGrantRedirectError('No browser detected.');
50159
50160      if (this.flowType === 'implicit' && !this._isImplicitGrantFlow()) {
50161        throw new _errors.AuthImplicitGrantRedirectError('Not a valid implicit grant flow url.');
50162      } else if (this.flowType == 'pkce' && !isPKCEFlow) {
50163        throw new _errors.AuthPKCEGrantCodeExchangeError('Not a valid PKCE flow url.');
50164      }
50165
50166      const params = (0, _helpers.parseParametersFromURL)(window.location.href);
50167
50168      if (isPKCEFlow) {
50169        if (!params.code) throw new _errors.AuthPKCEGrantCodeExchangeError('No code detected.');
50170        const {
50171          data,
50172          error
50173        } = await this._exchangeCodeForSession(params.code);
50174        if (error) throw error;
50175        const url = new URL(window.location.href);

50176        url.searchParams.delete('code');
50177        window.history.replaceState(window.history.state, '', url.toString());
50178        return {
50179          data: {
50180            session: data.session,
50181            redirectType: null
50182          },
50183          error: null
50184        };
50185      }
50186
50187      if (params.error || params.error_description || params.error_code) {
50188        throw new _errors.AuthImplicitGrantRedirectError(params.error_description || 'Error in URL with unspecified error_description', {
50189          error: params.error || 'unspecified_error',
50190          code: params.error_code || 'unspecified_code'
50191        });
50192      }
50193
50194      const {
50195        provider_token,
50196        provider_refresh_token,
50197        access_token,
50198        refresh_token,
50199        expires_in,
50200        expires_at,
50201        token_type
50202      } = params;
50203
50204      if (!access_token || !expires_in || !refresh_token || !token_type) {
50205        throw new _errors.AuthImplicitGrantRedirectError('No session defined in URL');
50206      }
50207
50208      const timeNow = Math.round(Date.now() / 1000);
50209      const expiresIn = parseInt(expires_in);
50210      let expiresAt = timeNow + expiresIn;
50211
50212      if (expires_at) {
50213        expiresAt = parseInt(expires_at);
50214      }
50215
50216      const actuallyExpiresIn = expiresAt - timeNow;
50217
50218      if (actuallyExpiresIn * 1000 <= AUTO_REFRESH_TICK_DURATION) {
50219        console.warn(`@supabase/gotrue-js: Session as retrieved from URL expires in ${actuallyExpiresIn}s, should have been closer to ${expiresIn}s`);
50220      }
50221
50222      const issuedAt = expiresAt - expiresIn;
50223
50224      if (timeNow - issuedAt >= 120) {
50225        console.warn('@supabase/gotrue-js: Session as retrieved from URL was issued over 120s ago, URL could be stale', issuedAt, expiresAt, timeNow);
50226      } else if (timeNow - issuedAt < 0) {
50227        console.warn('@supabase/gotrue-js: Session as retrieved from URL was issued in the future? Check the device clok for skew', issuedAt, expiresAt, timeNow);
50228      }
50229
50230      const {
50231        data,
50232        error
50233      } = await this._getUser(access_token);
50234      if (error) throw error;
50235      const session = {
50236        provider_token,
50237        provider_refresh_token,
50238        access_token,
50239        expires_in: expiresIn,
50240        expires_at: expiresAt,
50241        refresh_token,
50242        token_type,
50243        user: data.user
50244      }; // Remove tokens from URL
50245
50246      window.location.hash = '';
50247
50248      this._debug('#_getSessionFromURL()', 'clearing window.location.hash');
50249
50250      return {
50251        data: {
50252          session,
50253          redirectType: params.type
50254        },
50255        error: null
50256      };
50257    } catch (error) {
50258      if ((0, _errors.isAuthError)(error)) {
50259        return {
50260          data: {
50261            session: null,
50262            redirectType: null
50263          },
50264          error
50265        };
50266      }
50267
50268      throw error;
50269    }
50270  }
50271  /**
50272   * Checks if the current URL contains parameters given by an implicit oauth grant flow (https://www.rfc-editor.org/rfc/rfc6749.html#section-4.2)
50273   */
50274
50275
50276  _isImplicitGrantFlow() {
50277    const params = (0, _helpers.parseParametersFromURL)(window.location.href);
50278    return !!((0, _helpers.isBrowser)() && (params.access_token || params.error_description));
50279  }
50280  /**
50281   * Checks if the current URL and backing storage contain parameters given by a PKCE flow
50282   */
50283
50284
50285  async _isPKCEFlow() {
50286    const params = (0, _helpers.parseParametersFromURL)(window.location.href);
50287    const currentStorageContent = await (0, _helpers.getItemAsync)(this.storage, `${this.storageKey}-code-verifier`);
50288    return !!(params.code && currentStorageContent);
50289  }
50290  /**
50291   * Inside a browser context, `signOut()` will remove the logged in user from the browser session and log them out - removing all items from localstorage and then trigger a `"SIGNED_OUT"` event.
50292   *
50293   * For server-side management, you can revoke all refresh tokens for a user by passing a user's JWT through to `auth.api.signOut(JWT: string)`.
50294   * There is no way to revoke a user's access token jwt until it expires. It is recommended to set a shorter expiry on the jwt for this reason.
50295   *
50296   * If using `others` scope, no `SIGNED_OUT` event is fired!
50297   */
50298
50299
50300  async signOut(options = {
50301    scope: 'global'
50302  }) {
50303    await this.initializePromise;
50304    return await this._acquireLock(-1, async () => {
50305      return await this._signOut(options);
50306    });
50307  }
50308
50309  async _signOut({
50310    scope
50311  } = {
50312    scope: 'global'
50313  }) {
50314    return await this._useSession(async result => {
50315      var _a;
50316
50317      const {
50318        data,
50319        error: sessionError
50320      } = result;
50321
50322      if (sessionError) {
50323        return {
50324          error: sessionError
50325        };
50326      }
50327
50328      const accessToken = (_a = data.session) === null || _a === void 0 ? void 0 : _a.access_token;
50329
50330      if (accessToken) {
50331        const {
50332          error
50333        } = await this.admin.signOut(accessToken, scope);
50334
50335        if (error) {
50336          // ignore 404s since user might not exist anymore

50337          // ignore 401s since an invalid or expired JWT should sign out the current session
50338          if (!((0, _errors.isAuthApiError)(error) && (error.status === 404 || error.status === 401 || error.status === 403))) {
50339            return {
50340              error
50341            };
50342          }
50343        }
50344      }
50345
50346      if (scope !== 'others') {
50347        await this._removeSession();
50348        await (0, _helpers.removeItemAsync)(this.storage, `${this.storageKey}-code-verifier`);
50349        await this._notifyAllSubscribers('SIGNED_OUT', null);
50350      }
50351
50352      return {
50353        error: null
50354      };
50355    });
50356  }
50357  /**
50358   * Receive a notification every time an auth event happens.
50359   * @param callback A callback function to be invoked when an auth event happens.
50360   */
50361
50362
50363  onAuthStateChange(callback) {
50364    const id = (0, _helpers.uuid)();
50365    const subscription = {
50366      id,
50367      callback,
50368      unsubscribe: () => {
50369        this._debug('#unsubscribe()', 'state change callback with id removed', id);
50370
50371        this.stateChangeEmitters.delete(id);
50372      }
50373    };
50374
50375    this._debug('#onAuthStateChange()', 'registered callback with id', id);
50376
50377    this.stateChangeEmitters.set(id, subscription);
50378
50379    (async () => {
50380      await this.initializePromise;
50381      await this._acquireLock(-1, async () => {
50382        this._emitInitialSession(id);
50383      });
50384    })();
50385
50386    return {
50387      data: {
50388        subscription
50389      }
50390    };
50391  }
50392
50393  async _emitInitialSession(id) {
50394    return await this._useSession(async result => {
50395      var _a, _b;
50396
50397      try {
50398        const {
50399          data: {
50400            session
50401          },
50402          error
50403        } = result;
50404        if (error) throw error;
50405        await ((_a = this.stateChangeEmitters.get(id)) === null || _a === void 0 ? void 0 : _a.callback('INITIAL_SESSION', session));
50406
50407        this._debug('INITIAL_SESSION', 'callback id', id, 'session', session);
50408      } catch (err) {
50409        await ((_b = this.stateChangeEmitters.get(id)) === null || _b === void 0 ? void 0 : _b.callback('INITIAL_SESSION', null));
50410
50411        this._debug('INITIAL_SESSION', 'callback id', id, 'error', err);
50412
50413        console.error(err);
50414      }
50415    });
50416  }
50417  /**
50418   * Sends a password reset request to an email address. This method supports the PKCE flow.
50419   *
50420   * @param email The email address of the user.
50421   * @param options.redirectTo The URL to send the user to after they click the password reset link.
50422   * @param options.captchaToken Verification token received when the user completes the captcha on the site.
50423   */
50424
50425
50426  async resetPasswordForEmail(email, options = {}) {

50427    let codeChallenge = null;
50428    let codeChallengeMethod = null;
50429
50430    if (this.flowType === 'pkce') {
50431      ;
50432      [codeChallenge, codeChallengeMethod] = await (0, _helpers.getCodeChallengeAndMethod)(this.storage, this.storageKey, true // isPasswordRecovery
50433      );
50434    }
50435
50436    try {
50437      return await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/recover`, {
50438        body: {
50439          email,
50440          code_challenge: codeChallenge,
50441          code_challenge_method: codeChallengeMethod,
50442          gotrue_meta_security: {
50443            captcha_token: options.captchaToken
50444          }
50445        },
50446        headers: this.headers,
50447        redirectTo: options.redirectTo
50448      });
50449    } catch (error) {
50450      if ((0, _errors.isAuthError)(error)) {
50451        return {
50452          data: null,
50453          error
50454        };
50455      }
50456
50457      throw error;
50458    }
50459  }
50460  /**
50461   * Gets all the identities linked to a user.
50462   */
50463
50464
50465  async getUserIdentities() {
50466    var _a;
50467
50468    try {
50469      const {
50470        data,
50471        error
50472      } = await this.getUser();
50473      if (error) throw error;
50474      return {
50475        data: {
50476          identities: (_a = data.user.identities) !== null && _a !== void 0 ? _a : []
50477        },
50478        error: null
50479      };
50480    } catch (error) {
50481      if ((0, _errors.isAuthError)(error)) {
50482        return {
50483          data: null,
50484          error
50485        };
50486      }
50487
50488      throw error;
50489    }
50490  }
50491  /**
50492   * Links an oauth identity to an existing user.
50493   * This method supports the PKCE flow.
50494   */
50495
50496
50497  async linkIdentity(credentials) {
50498    var _a;
50499
50500    try {
50501      const {
50502        data,
50503        error
50504      } = await this._useSession(async result => {
50505        var _a, _b, _c, _d, _e;
50506
50507        const {
50508          data,
50509          error
50510        } = result;
50511        if (error) throw error;
50512        const url = await this._getUrlForProvider(`${this.url}/user/identities/authorize`, credentials.provider, {
50513          redirectTo: (_a = credentials.options) === null || _a === void 0 ? void 0 : _a.redirectTo,
50514          scopes: (_b = credentials.options) === null || _b === void 0 ? void 0 : _b.scopes,
50515          queryParams: (_c = credentials.options) === null || _c === void 0 ? void 0 : _c.queryParams,
50516          skipBrowserRedirect: true
50517        });
50518        return await (0, _fetch._request)(this.fetch, 'GET', url, {
50519          headers: this.headers,
50520          jwt: (_e = (_d = data.session) === null || _d === void 0 ? void 0 : _d.access_token) !== null && _e !== void 0 ? _e : undefined
50521        });
50522      });
50523      if (error) throw error;
50524
50525      if ((0, _helpers.isBrowser)() && !((_a = credentials.options) === null || _a === void 0 ? void 0 : _a.skipBrowserRedirect)) {
50526        window.location.assign(data === null || data === void 0 ? void 0 : data.url);
50527      }
50528
50529      return {
50530        data: {
50531          provider: credentials.provider,
50532          url: data === null || data === void 0 ? void 0 : data.url
50533        },
50534        error: null
50535      };
50536    } catch (error) {
50537      if ((0, _errors.isAuthError)(error)) {
50538        return {
50539          data: {
50540            provider: credentials.provider,
50541            url: null
50542          },
50543          error
50544        };
50545      }
50546
50547      throw error;
50548    }
50549  }
50550  /**
50551   * Unlinks an identity from a user by deleting it. The user will no longer be able to sign in with that identity once it's unlinked.
50552   */
50553
50554
50555  async unlinkIdentity(identity) {
50556    try {
50557      return await this._useSession(async result => {
50558        var _a, _b;
50559
50560        const {
50561          data,
50562          error
50563        } = result;
50564
50565        if (error) {
50566          throw error;
50567        }
50568
50569        return await (0, _fetch._request)(this.fetch, 'DELETE', `${this.url}/user/identities/${identity.identity_id}`, {
50570          headers: this.headers,
50571          jwt: (_b = (_a = data.session) === null || _a === void 0 ? void 0 : _a.access_token) !== null && _b !== void 0 ? _b : undefined
50572        });
50573      });
50574    } catch (error) {
50575      if ((0, _errors.isAuthError)(error)) {
50576        return {
50577          data: null,
50578          error
50579        };
50580      }
50581
50582      throw error;
50583    }
50584  }
50585  /**
50586   * Generates a new JWT.
50587   * @param refreshToken A valid refresh token that was returned on login.
50588   */
50589
50590
50591  async _refreshAccessToken(refreshToken) {
50592    const debugName = `#_refreshAccessToken(${refreshToken.substring(0, 5)}...)`;
50593
50594    this._debug(debugName, 'begin');
50595
50596    try {
50597      const startedAt = Date.now(); // will attempt to refresh the token with exponential backoff
50598
50599      return await (0, _helpers.retryable)(async attempt => {
50600        if (attempt > 0) {
50601          await (0, _helpers.sleep)(200 * Math.pow(2, attempt - 1)); // 200, 400, 800, ...
50602        }
50603
50604        this._debug(debugName, 'refreshing attempt', attempt);
50605
50606        return await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/token?grant_type=refresh_token`, {
50607          body: {
50608            refresh_token: refreshToken
50609          },
50610          headers: this.headers,
50611          xform: _fetch._sessionResponse
50612        });
50613      }, (attempt, error) => {
50614        const nextBackOffInterval = 200 * Math.pow(2, attempt);
50615        return error && (0, _errors.isAuthRetryableFetchError)(error) && // retryable only if the request can be sent before the backoff overflows the tick duration
50616        Date.now() + nextBackOffInterval - startedAt < AUTO_REFRESH_TICK_DURATION;
50617      });
50618    } catch (error) {
50619      this._debug(debugName, 'error', error);
50620
50621      if ((0, _errors.isAuthError)(error)) {
50622        return {
50623          data: {
50624            session: null,
50625            user: null
50626          },
50627          error
50628        };
50629      }
50630
50631      throw error;
50632    } finally {
50633      this._debug(debugName, 'end');
50634    }
50635  }
50636
50637  _isValidSession(maybeSession) {
50638    const isValidSession = typeof maybeSession === 'object' && maybeSession !== null && 'access_token' in maybeSession && 'refresh_token' in maybeSession && 'expires_at' in maybeSession;
50639    return isValidSession;
50640  }
50641
50642  async _handleProviderSignIn(provider, options) {
50643    const url = await this._getUrlForProvider(`${this.url}/authorize`, provider, {
50644      redirectTo: options.redirectTo,
50645      scopes: options.scopes,
50646      queryParams: options.queryParams
50647    });
50648
50649    this._debug('#_handleProviderSignIn()', 'provider', provider, 'options', options, 'url', url); // try to open on the browser
50650
50651
50652    if ((0, _helpers.isBrowser)() && !options.skipBrowserRedirect) {
50653      window.location.assign(url);
50654    }
50655
50656    return {
50657      data: {
50658        provider,
50659        url
50660      },
50661      error: null
50662    };
50663  }
50664  /**
50665   * Recovers the session from LocalStorage and refreshes
50666   * Note: this method is async to accommodate for AsyncStorage e.g. in React native.
50667   */
50668
50669
50670  async _recoverAndRefresh() {
50671    var _a;
50672
50673    const debugName = '#_recoverAndRefresh()';
50674
50675    this._debug(debugName, 'begin');
50676
50677    try {
50678      const currentSession = await (0, _helpers.getItemAsync)(this.storage, this.storageKey);
50679
50680      this._debug(debugName, 'session from storage', currentSession);
50681
50682      if (!this._isValidSession(currentSession)) {

50683        this._debug(debugName, 'session is not valid');
50684
50685        if (currentSession !== null) {
50686          await this._removeSession();
50687        }
50688
50689        return;
50690      }
50691
50692      const timeNow = Math.round(Date.now() / 1000);
50693      const expiresWithMargin = ((_a = currentSession.expires_at) !== null && _a !== void 0 ? _a : Infinity) < timeNow + _constants.EXPIRY_MARGIN;
50694
50695      this._debug(debugName, `session has${expiresWithMargin ? '' : ' not'} expired with margin of ${_constants.EXPIRY_MARGIN}s`);
50696
50697      if (expiresWithMargin) {
50698        if (this.autoRefreshToken && currentSession.refresh_token) {
50699          const {
50700            error
50701          } = await this._callRefreshToken(currentSession.refresh_token);
50702
50703          if (error) {
50704            console.error(error);
50705
50706            if (!(0, _errors.isAuthRetryableFetchError)(error)) {
50707              this._debug(debugName, 'refresh failed with a non-retryable error, removing the session', error);
50708
50709              await this._removeSession();
50710            }
50711          }
50712        }
50713      } else {
50714        // no need to persist currentSession again, as we just loaded it from
50715        // local storage; persisting it again may overwrite a value saved by
50716        // another client with access to the same local storage
50717        await this._notifyAllSubscribers('SIGNED_IN', currentSession);
50718      }
50719    } catch (err) {
50720      this._debug(debugName, 'error', err);
50721
50722      console.error(err);
50723      return;
50724    } finally {
50725      this._debug(debugName, 'end');
50726    }
50727  }
50728
50729  async _callRefreshToken(refreshToken) {
50730    var _a, _b;
50731
50732    if (!refreshToken) {
50733      throw new _errors.AuthSessionMissingError();
50734    } // refreshing is already in progress
50735
50736
50737    if (this.refreshingDeferred) {
50738      return this.refreshingDeferred.promise;
50739    }
50740
50741    const debugName = `#_callRefreshToken(${refreshToken.substring(0, 5)}...)`;
50742
50743    this._debug(debugName, 'begin');
50744
50745    try {
50746      this.refreshingDeferred = new _helpers.Deferred();
50747      const {
50748        data,
50749        error
50750      } = await this._refreshAccessToken(refreshToken);
50751      if (error) throw error;
50752      if (!data.session) throw new _errors.AuthSessionMissingError();
50753      await this._saveSession(data.session);
50754      await this._notifyAllSubscribers('TOKEN_REFRESHED', data.session);
50755      const result = {
50756        session: data.session,
50757        error: null
50758      };
50759      this.refreshingDeferred.resolve(result);
50760      return result;
50761    } catch (error) {
50762      this._debug(debugName, 'error', error);
50763
50764      if ((0, _errors.isAuthError)(error)) {
50765        const result = {
50766          session: null,
50767          error
50768        };
50769
50770        if (!(0, _errors.isAuthRetryableFetchError)(error)) {
50771          await this._removeSession();
50772          await this._notifyAllSubscribers('SIGNED_OUT', null);
50773        }
50774
50775        (_a = this.refreshingDeferred) === null || _a === void 0 ? void 0 : _a.resolve(result);
50776        return result;
50777      }
50778
50779      (_b = this.refreshingDeferred) === null || _b === void 0 ? void 0 : _b.reject(error);
50780      throw error;
50781    } finally {
50782      this.refreshingDeferred = null;
50783
50784      this._debug(debugName, 'end');
50785    }
50786  }
50787
50788  async _notifyAllSubscribers(event, session, broadcast = true) {
50789    const debugName = `#_notifyAllSubscribers(${event})`;
50790
50791    this._debug(debugName, 'begin', session, `broadcast = ${broadcast}`);
50792
50793    try {
50794      if (this.broadcastChannel && broadcast) {
50795        this.broadcastChannel.postMessage({
50796          event,
50797          session
50798        });
50799      }
50800
50801      const errors = [];
50802      const promises = Array.from(this.stateChangeEmitters.values()).map(async x => {
50803        try {
50804          await x.callback(event, session);
50805        } catch (e) {
50806          errors.push(e);
50807        }
50808      });
50809      await Promise.all(promises);
50810
50811      if (errors.length > 0) {
50812        for (let i = 0; i < errors.length; i += 1) {
50813          console.error(errors[i]);
50814        }
50815
50816        throw errors[0];
50817      }
50818    } finally {
50819      this._debug(debugName, 'end');
50820    }
50821  }
50822  /**
50823   * set currentSession and currentUser
50824   * process to _startAutoRefreshToken if possible
50825   */
50826
50827
50828  async _saveSession(session) {
50829    this._debug('#_saveSession()', session); // _saveSession is always called whenever a new session has been acquired
50830    // so we can safely suppress the warning returned by future getSession calls
50831
50832
50833    this.suppressGetSessionWarning = true;
50834    await (0, _helpers.setItemAsync)(this.storage, this.storageKey, session);
50835  }
50836
50837  async _removeSession() {
50838    this._debug('#_removeSession()');
50839
50840    await (0, _helpers.removeItemAsync)(this.storage, this.storageKey);
50841  }
50842  /**

50843   * Removes any registered visibilitychange callback.
50844   *
50845   * {@see #startAutoRefresh}
50846   * {@see #stopAutoRefresh}
50847   */
50848
50849
50850  _removeVisibilityChangedCallback() {
50851    this._debug('#_removeVisibilityChangedCallback()');
50852
50853    const callback = this.visibilityChangedCallback;
50854    this.visibilityChangedCallback = null;
50855
50856    try {
50857      if (callback && (0, _helpers.isBrowser)() && (window === null || window === void 0 ? void 0 : window.removeEventListener)) {
50858        window.removeEventListener('visibilitychange', callback);
50859      }
50860    } catch (e) {
50861      console.error('removing visibilitychange callback failed', e);
50862    }
50863  }
50864  /**
50865   * This is the private implementation of {@link #startAutoRefresh}. Use this
50866   * within the library.
50867   */
50868
50869
50870  async _startAutoRefresh() {
50871    await this._stopAutoRefresh();
50872
50873    this._debug('#_startAutoRefresh()');
50874
50875    const ticker = setInterval(() => this._autoRefreshTokenTick(), AUTO_REFRESH_TICK_DURATION);
50876    this.autoRefreshTicker = ticker;
50877
50878    if (ticker && typeof ticker === 'object' && typeof ticker.unref === 'function') {
50879      // ticker is a NodeJS Timeout object that has an `unref` method
50880      // https://nodejs.org/api/timers.html#timeoutunref
50881      // When auto refresh is used in NodeJS (like for testing) the
50882      // `setInterval` is preventing the process from being marked as
50883      // finished and tests run endlessly. This can be prevented by calling
50884      // `unref()` on the returned object.
50885      ticker.unref(); // @ts-ignore
50886    } else if (typeof Deno !== 'undefined' && typeof Deno.unrefTimer === 'function') {
50887      // similar like for NodeJS, but with the Deno API
50888      // https://deno.land/api@latest?unstable&s=Deno.unrefTimer
50889      // @ts-ignore
50890      Deno.unrefTimer(ticker);
50891    } // run the tick immediately, but in the next pass of the event loop so that
50892    // #_initialize can be allowed to complete without recursively waiting on
50893    // itself
50894
50895
50896    setTimeout(async () => {
50897      await this.initializePromise;
50898      await this._autoRefreshTokenTick();
50899    }, 0);
50900  }
50901  /**
50902   * This is the private implementation of {@link #stopAutoRefresh}. Use this
50903   * within the library.
50904   */
50905
50906
50907  async _stopAutoRefresh() {
50908    this._debug('#_stopAutoRefresh()');
50909
50910    const ticker = this.autoRefreshTicker;
50911    this.autoRefreshTicker = null;
50912
50913    if (ticker) {
50914      clearInterval(ticker);
50915    }
50916  }
50917  /**
50918   * Starts an auto-refresh process in the background. The session is checked
50919   * every few seconds. Close to the time of expiration a process is started to
50920   * refresh the session. If refreshing fails it will be retried for as long as
50921   * necessary.
50922   *
50923   * If you set the {@link GoTrueClientOptions#autoRefreshToken} you don't need
50924   * to call this function, it will be called for you.
50925   *
50926   * On browsers the refresh process works only when the tab/window is in the
50927   * foreground to conserve resources as well as prevent race conditions and
50928   * flooding auth with requests. If you call this method any managed
50929   * visibility change callback will be removed and you must manage visibility
50930   * changes on your own.
50931   *
50932   * On non-browser platforms the refresh process works *continuously* in the
50933   * background, which may not be desirable. You should hook into your
50934   * platform's foreground indication mechanism and call these methods
50935   * appropriately to conserve resources.
50936   *
50937   * {@see #stopAutoRefresh}
50938   */
50939
50940
50941  async startAutoRefresh() {
50942    this._removeVisibilityChangedCallback();
50943
50944    await this._startAutoRefresh();
50945  }
50946  /**
50947   * Stops an active auto refresh process running in the background (if any).
50948   *
50949   * If you call this method any managed visibility change callback will be
50950   * removed and you must manage visibility changes on your own.
50951   *
50952   * See {@link #startAutoRefresh} for more details.
50953   */
50954
50955
50956  async stopAutoRefresh() {
50957    this._removeVisibilityChangedCallback();
50958
50959    await this._stopAutoRefresh();
50960  }
50961  /**
50962   * Runs the auto refresh token tick.
50963   */
50964
50965
50966  async _autoRefreshTokenTick() {
50967    this._debug('#_autoRefreshTokenTick()', 'begin');
50968
50969    try {
50970      await this._acquireLock(0, async () => {
50971        try {
50972          const now = Date.now();
50973
50974          try {
50975            return await this._useSession(async result => {
50976              const {
50977                data: {
50978                  session
50979                }
50980              } = result;
50981
50982              if (!session || !session.refresh_token || !session.expires_at) {

50983                this._debug('#_autoRefreshTokenTick()', 'no session');
50984
50985                return;
50986              } // session will expire in this many ticks (or has already expired if <= 0)
50987
50988
50989              const expiresInTicks = Math.floor((session.expires_at * 1000 - now) / AUTO_REFRESH_TICK_DURATION);
50990
50991              this._debug('#_autoRefreshTokenTick()', `access token expires in ${expiresInTicks} ticks, a tick lasts ${AUTO_REFRESH_TICK_DURATION}ms, refresh threshold is ${AUTO_REFRESH_TICK_THRESHOLD} ticks`);
50992
50993              if (expiresInTicks <= AUTO_REFRESH_TICK_THRESHOLD) {
50994                await this._callRefreshToken(session.refresh_token);
50995              }
50996            });
50997          } catch (e) {
50998            console.error('Auto refresh tick failed with error. This is likely a transient error.', e);
50999          }
51000        } finally {
51001          this._debug('#_autoRefreshTokenTick()', 'end');
51002        }
51003      });
51004    } catch (e) {
51005      if (e.isAcquireTimeout || e instanceof _locks.LockAcquireTimeoutError) {
51006        this._debug('auto refresh token tick lock not available');
51007      } else {
51008        throw e;
51009      }
51010    }
51011  }
51012  /**
51013   * Registers callbacks on the browser / platform, which in-turn run
51014   * algorithms when the browser window/tab are in foreground. On non-browser
51015   * platforms it assumes always foreground.
51016   */
51017
51018
51019  async _handleVisibilityChange() {
51020    this._debug('#_handleVisibilityChange()');
51021
51022    if (!(0, _helpers.isBrowser)() || !(window === null || window === void 0 ? void 0 : window.addEventListener)) {
51023      if (this.autoRefreshToken) {
51024        // in non-browser environments the refresh token ticker runs always
51025        this.startAutoRefresh();
51026      }
51027
51028      return false;
51029    }
51030
51031    try {
51032      this.visibilityChangedCallback = async () => await this._onVisibilityChanged(false);
51033
51034      window === null || window === void 0 ? void 0 : window.addEventListener('visibilitychange', this.visibilityChangedCallback); // now immediately call the visbility changed callback to setup with the
51035      // current visbility state
51036
51037      await this._onVisibilityChanged(true); // initial call

51038    } catch (error) {
51039      console.error('_handleVisibilityChange', error);
51040    }
51041  }
51042  /**
51043   * Callback registered with `window.addEventListener('visibilitychange')`.
51044   */
51045
51046
51047  async _onVisibilityChanged(calledFromInitialize) {
51048    const methodName = `#_onVisibilityChanged(${calledFromInitialize})`;
51049
51050    this._debug(methodName, 'visibilityState', document.visibilityState);
51051
51052    if (document.visibilityState === 'visible') {
51053      if (this.autoRefreshToken) {
51054        // in browser environments the refresh token ticker runs only on focused tabs
51055        // which prevents race conditions
51056        this._startAutoRefresh();
51057      }
51058
51059      if (!calledFromInitialize) {
51060        // called when the visibility has changed, i.e. the browser
51061        // transitioned from hidden -> visible so we need to see if the session
51062        // should be recovered immediately... but to do that we need to acquire
51063        // the lock first asynchronously
51064        await this.initializePromise;
51065        await this._acquireLock(-1, async () => {
51066          if (document.visibilityState !== 'visible') {
51067            this._debug(methodName, 'acquired the lock to recover the session, but the browser visibilityState is no longer visible, aborting'); // visibility has changed while waiting for the lock, abort
51068
51069
51070            return;
51071          } // recover the session
51072
51073
51074          await this._recoverAndRefresh();
51075        });
51076      }
51077    } else if (document.visibilityState === 'hidden') {
51078      if (this.autoRefreshToken) {
51079        this._stopAutoRefresh();
51080      }
51081    }
51082  }
51083  /**
51084   * Generates the relevant login URL for a third-party provider.
51085   * @param options.redirectTo A URL or mobile address to send the user to after they are confirmed.
51086   * @param options.scopes A space-separated list of scopes granted to the OAuth application.
51087   * @param options.queryParams An object of key-value pairs containing query parameters granted to the OAuth application.
51088   */
51089
51090
51091  async _getUrlForProvider(url, provider, options) {
51092    const urlParams = [`provider=${encodeURIComponent(provider)}`];
51093
51094    if (options === null || options === void 0 ? void 0 : options.redirectTo) {
51095      urlParams.push(`redirect_to=${encodeURIComponent(options.redirectTo)}`);
51096    }
51097
51098    if (options === null || options === void 0 ? void 0 : options.scopes) {
51099      urlParams.push(`scopes=${encodeURIComponent(options.scopes)}`);
51100    }
51101
51102    if (this.flowType === 'pkce') {
51103      const [codeChallenge, codeChallengeMethod] = await (0, _helpers.getCodeChallengeAndMethod)(this.storage, this.storageKey);
51104      const flowParams = new URLSearchParams({
51105        code_challenge: `${encodeURIComponent(codeChallenge)}`,
51106        code_challenge_method: `${encodeURIComponent(codeChallengeMethod)}`
51107      });
51108      urlParams.push(flowParams.toString());
51109    }
51110
51111    if (options === null || options === void 0 ? void 0 : options.queryParams) {
51112      const query = new URLSearchParams(options.queryParams);
51113      urlParams.push(query.toString());
51114    }
51115
51116    if (options === null || options === void 0 ? void 0 : options.skipBrowserRedirect) {
51117      urlParams.push(`skip_http_redirect=${options.skipBrowserRedirect}`);
51118    }
51119
51120    return `${url}?${urlParams.join('&')}`;
51121  }
51122
51123  async _unenroll(params) {
51124    try {
51125      return await this._useSession(async result => {
51126        var _a;
51127
51128        const {
51129          data: sessionData,
51130          error: sessionError
51131        } = result;
51132
51133        if (sessionError) {
51134          return {
51135            data: null,
51136            error: sessionError
51137          };
51138        }
51139
51140        return await (0, _fetch._request)(this.fetch, 'DELETE', `${this.url}/factors/${params.factorId}`, {
51141          headers: this.headers,
51142          jwt: (_a = sessionData === null || sessionData === void 0 ? void 0 : sessionData.session) === null || _a === void 0 ? void 0 : _a.access_token
51143        });
51144      });
51145    } catch (error) {
51146      if ((0, _errors.isAuthError)(error)) {
51147        return {
51148          data: null,
51149          error
51150        };
51151      }
51152
51153      throw error;
51154    }
51155  }
51156  /**
51157   * {@see GoTrueMFAApi#enroll}
51158   */
51159
51160
51161  async _enroll(params) {
51162    try {
51163      return await this._useSession(async result => {
51164        var _a, _b;
51165
51166        const {
51167          data: sessionData,
51168          error: sessionError
51169        } = result;
51170
51171        if (sessionError) {
51172          return {
51173            data: null,
51174            error: sessionError
51175          };
51176        }
51177
51178        const {
51179          data,
51180          error
51181        } = await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/factors`, {
51182          body: {
51183            friendly_name: params.friendlyName,
51184            factor_type: params.factorType,
51185            issuer: params.issuer
51186          },
51187          headers: this.headers,
51188          jwt: (_a = sessionData === null || sessionData === void 0 ? void 0 : sessionData.session) === null || _a === void 0 ? void 0 : _a.access_token
51189        });
51190
51191        if (error) {
51192          return {
51193            data: null,
51194            error
51195          };
51196        }
51197
51198        if ((_b = data === null || data === void 0 ? void 0 : data.totp) === null || _b === void 0 ? void 0 : _b.qr_code) {
51199          data.totp.qr_code = `data:image/svg+xml;utf-8,${data.totp.qr_code}`;
51200        }
51201
51202        return {
51203          data,
51204          error: null
51205        };
51206      });
51207    } catch (error) {
51208      if ((0, _errors.isAuthError)(error)) {
51209        return {
51210          data: null,
51211          error
51212        };
51213      }
51214
51215      throw error;
51216    }
51217  }
51218  /**
51219   * {@see GoTrueMFAApi#verify}
51220   */
51221
51222
51223  async _verify(params) {
51224    return this._acquireLock(-1, async () => {

51225      try {
51226        return await this._useSession(async result => {
51227          var _a;
51228
51229          const {
51230            data: sessionData,
51231            error: sessionError
51232          } = result;
51233
51234          if (sessionError) {
51235            return {
51236              data: null,
51237              error: sessionError
51238            };
51239          }
51240
51241          const {
51242            data,
51243            error
51244          } = await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/factors/${params.factorId}/verify`, {
51245            body: {
51246              code: params.code,
51247              challenge_id: params.challengeId
51248            },
51249            headers: this.headers,
51250            jwt: (_a = sessionData === null || sessionData === void 0 ? void 0 : sessionData.session) === null || _a === void 0 ? void 0 : _a.access_token
51251          });
51252
51253          if (error) {
51254            return {
51255              data: null,
51256              error
51257            };
51258          }
51259
51260          await this._saveSession(Object.assign({
51261            expires_at: Math.round(Date.now() / 1000) + data.expires_in
51262          }, data));
51263          await this._notifyAllSubscribers('MFA_CHALLENGE_VERIFIED', data);
51264          return {
51265            data,
51266            error
51267          };
51268        });
51269      } catch (error) {
51270        if ((0, _errors.isAuthError)(error)) {
51271          return {
51272            data: null,
51273            error
51274          };
51275        }
51276
51277        throw error;
51278      }
51279    });
51280  }
51281  /**
51282   * {@see GoTrueMFAApi#challenge}
51283   */
51284
51285
51286  async _challenge(params) {
51287    return this._acquireLock(-1, async () => {
51288      try {
51289        return await this._useSession(async result => {
51290          var _a;
51291
51292          const {
51293            data: sessionData,
51294            error: sessionError
51295          } = result;
51296
51297          if (sessionError) {
51298            return {
51299              data: null,
51300              error: sessionError
51301            };
51302          }
51303
51304          return await (0, _fetch._request)(this.fetch, 'POST', `${this.url}/factors/${params.factorId}/challenge`, {
51305            headers: this.headers,
51306            jwt: (_a = sessionData === null || sessionData === void 0 ? void 0 : sessionData.session) === null || _a === void 0 ? void 0 : _a.access_token
51307          });
51308        });
51309      } catch (error) {
51310        if ((0, _errors.isAuthError)(error)) {
51311          return {
51312            data: null,
51313            error
51314          };
51315        }
51316
51317        throw error;
51318      }
51319    });
51320  }
51321  /**
51322   * {@see GoTrueMFAApi#challengeAndVerify}
51323   */
51324
51325
51326  async _challengeAndVerify(params) {
51327    // both _challenge and _verify independently acquire the lock, so no need
51328    // to acquire it here
51329    const {
51330      data: challengeData,
51331      error: challengeError
51332    } = await this._challenge({
51333      factorId: params.factorId
51334    });
51335
51336    if (challengeError) {
51337      return {
51338        data: null,
51339        error: challengeError
51340      };
51341    }
51342
51343    return await this._verify({
51344      factorId: params.factorId,
51345      challengeId: challengeData.id,
51346      code: params.code
51347    });
51348  }
51349  /**
51350   * {@see GoTrueMFAApi#listFactors}
51351   */
51352
51353
51354  async _listFactors() {
51355    // use #getUser instead of #_getUser as the former acquires a lock
51356    const {
51357      data: {
51358        user
51359      },
51360      error: userError
51361    } = await this.getUser();
51362
51363    if (userError) {
51364      return {
51365        data: null,
51366        error: userError
51367      };
51368    }
51369
51370    const factors = (user === null || user === void 0 ? void 0 : user.factors) || [];
51371    const totp = factors.filter(factor => factor.factor_type === 'totp' && factor.status === 'verified');
51372    return {
51373      data: {
51374        all: factors,
51375        totp
51376      },
51377      error: null
51378    };
51379  }
51380  /**
51381   * {@see GoTrueMFAApi#getAuthenticatorAssuranceLevel}
51382   */
51383
51384
51385  async _getAuthenticatorAssuranceLevel() {
51386    return this._acquireLock(-1, async () => {
51387      return await this._useSession(async result => {
51388        var _a, _b;
51389
51390        const {
51391          data: {
51392            session
51393          },
51394          error: sessionError
51395        } = result;
51396
51397        if (sessionError) {
51398          return {
51399            data: null,
51400            error: sessionError
51401          };
51402        }
51403
51404        if (!session) {
51405          return {
51406            data: {
51407              currentLevel: null,
51408              nextLevel: null,
51409              currentAuthenticationMethods: []
51410            },
51411            error: null
51412          };
51413        }
51414
51415        const payload = this._decodeJWT(session.access_token);
51416
51417        let currentLevel = null;
51418
51419        if (payload.aal) {
51420          currentLevel = payload.aal;
51421        }
51422
51423        let nextLevel = currentLevel;

51424        const verifiedFactors = (_b = (_a = session.user.factors) === null || _a === void 0 ? void 0 : _a.filter(factor => factor.status === 'verified')) !== null && _b !== void 0 ? _b : [];
51425
51426        if (verifiedFactors.length > 0) {
51427          nextLevel = 'aal2';
51428        }
51429
51430        const currentAuthenticationMethods = payload.amr || [];
51431        return {
51432          data: {
51433            currentLevel,
51434            nextLevel,
51435            currentAuthenticationMethods
51436          },
51437          error: null
51438        };
51439      });
51440    });
51441  }
51442
51443}
51444
51445exports.default = GoTrueClient;
51446GoTrueClient.nextInstanceID = 0;
51447
51448},{"./GoTrueAdminApi":389,"./lib/constants":392,"./lib/errors":393,"./lib/fetch":394,"./lib/helpers":395,"./lib/local-storage":396,"./lib/locks":397,"./lib/polyfills":398,"./lib/version":400}],391:[function(require,module,exports){
51449"use strict";
51450
51451Object.defineProperty(exports, "__esModule", {
51452  value: true
51453});
51454var _exportNames = {
51455  GoTrueAdminApi: true,
51456  GoTrueClient: true,
51457  AuthAdminApi: true,
51458  AuthClient: true,
51459  navigatorLock: true,
51460  NavigatorLockAcquireTimeoutError: true,
51461  lockInternals: true
51462};
51463Object.defineProperty(exports, "AuthAdminApi", {
51464  enumerable: true,
51465  get: function () {
51466    return _AuthAdminApi.default;
51467  }
51468});
51469Object.defineProperty(exports, "AuthClient", {
51470  enumerable: true,
51471  get: function () {
51472    return _AuthClient.default;
51473  }
51474});
51475Object.defineProperty(exports, "GoTrueAdminApi", {
51476  enumerable: true,
51477  get: function () {
51478    return _GoTrueAdminApi.default;
51479  }
51480});
51481Object.defineProperty(exports, "GoTrueClient", {
51482  enumerable: true,
51483  get: function () {
51484    return _GoTrueClient.default;
51485  }
51486});
51487Object.defineProperty(exports, "NavigatorLockAcquireTimeoutError", {
51488  enumerable: true,
51489  get: function () {
51490    return _locks.NavigatorLockAcquireTimeoutError;
51491  }
51492});
51493Object.defineProperty(exports, "lockInternals", {
51494  enumerable: true,
51495  get: function () {
51496    return _locks.internals;
51497  }
51498});
51499Object.defineProperty(exports, "navigatorLock", {
51500  enumerable: true,
51501  get: function () {
51502    return _locks.navigatorLock;
51503  }
51504});
51505
51506var _GoTrueAdminApi = _interopRequireDefault(require("./GoTrueAdminApi"));
51507
51508var _GoTrueClient = _interopRequireDefault(require("./GoTrueClient"));
51509
51510var _AuthAdminApi = _interopRequireDefault(require("./AuthAdminApi"));
51511
51512var _AuthClient = _interopRequireDefault(require("./AuthClient"));
51513
51514var _types = require("./lib/types");
51515
51516Object.keys(_types).forEach(function (key) {
51517  if (key === "default" || key === "__esModule") return;
51518  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
51519  if (key in exports && exports[key] === _types[key]) return;
51520  Object.defineProperty(exports, key, {
51521    enumerable: true,
51522    get: function () {
51523      return _types[key];
51524    }
51525  });
51526});
51527
51528var _errors = require("./lib/errors");
51529
51530Object.keys(_errors).forEach(function (key) {
51531  if (key === "default" || key === "__esModule") return;
51532  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
51533  if (key in exports && exports[key] === _errors[key]) return;
51534  Object.defineProperty(exports, key, {
51535    enumerable: true,
51536    get: function () {
51537      return _errors[key];
51538    }
51539  });
51540});
51541
51542var _locks = require("./lib/locks");
51543
51544function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
51545
51546},{"./AuthAdminApi":387,"./AuthClient":388,"./GoTrueAdminApi":389,"./GoTrueClient":390,"./lib/errors":393,"./lib/locks":397,"./lib/types":399}],392:[function(require,module,exports){
51547"use strict";
51548
51549Object.defineProperty(exports, "__esModule", {
51550  value: true
51551});
51552exports.STORAGE_KEY = exports.NETWORK_FAILURE = exports.GOTRUE_URL = exports.EXPIRY_MARGIN = exports.DEFAULT_HEADERS = exports.AUDIENCE = exports.API_VERSION_HEADER_NAME = exports.API_VERSIONS = void 0;
51553
51554var _version = require("./version");
51555
51556const GOTRUE_URL = 'http://localhost:9999';
51557exports.GOTRUE_URL = GOTRUE_URL;
51558const STORAGE_KEY = 'supabase.auth.token';
51559exports.STORAGE_KEY = STORAGE_KEY;
51560const AUDIENCE = '';
51561exports.AUDIENCE = AUDIENCE;
51562const DEFAULT_HEADERS = {
51563  'X-Client-Info': `gotrue-js/${_version.version}`
51564};
51565exports.DEFAULT_HEADERS = DEFAULT_HEADERS;
51566const EXPIRY_MARGIN = 10; // in seconds
51567
51568exports.EXPIRY_MARGIN = EXPIRY_MARGIN;
51569const NETWORK_FAILURE = {
51570  MAX_RETRIES: 10,
51571  RETRY_INTERVAL: 2 // in deciseconds
51572
51573};
51574exports.NETWORK_FAILURE = NETWORK_FAILURE;
51575const API_VERSION_HEADER_NAME = 'X-Supabase-Api-Version';
51576exports.API_VERSION_HEADER_NAME = API_VERSION_HEADER_NAME;
51577const API_VERSIONS = {
51578  '2024-01-01': {
51579    timestamp: Date.parse('2024-01-01T00:00:00.0Z'),
51580    name: '2024-01-01'
51581  }
51582};
51583exports.API_VERSIONS = API_VERSIONS;
51584
51585},{"./version":400}],393:[function(require,module,exports){
51586"use strict";
51587
51588Object.defineProperty(exports, "__esModule", {
51589  value: true
51590});
51591exports.CustomAuthError = exports.AuthWeakPasswordError = exports.AuthUnknownError = exports.AuthSessionMissingError = exports.AuthRetryableFetchError = exports.AuthPKCEGrantCodeExchangeError = exports.AuthInvalidToken

51591ResponseError = exports.AuthInvalidCredentialsError = exports.AuthImplicitGrantRedirectError = exports.AuthError = exports.AuthApiError = void 0;
51592exports.isAuthApiError = isAuthApiError;
51593exports.isAuthError = isAuthError;
51594exports.isAuthRetryableFetchError = isAuthRetryableFetchError;
51595exports.isAuthWeakPasswordError = isAuthWeakPasswordError;
51596
51597class AuthError extends Error {
51598  constructor(message, status, code) {
51599    super(message);
51600    this.__isAuthError = true;
51601    this.name = 'AuthError';
51602    this.status = status;
51603    this.code = code;
51604  }
51605
51606}
51607
51608exports.AuthError = AuthError;
51609
51610function isAuthError(error) {
51611  return typeof error === 'object' && error !== null && '__isAuthError' in error;
51612}
51613
51614class AuthApiError extends AuthError {
51615  constructor(message, status, code) {
51616    super(message, status, code);
51617    this.name = 'AuthApiError';
51618    this.status = status;
51619    this.code = code;
51620  }
51621
51622}
51623
51624exports.AuthApiError = AuthApiError;
51625
51626function isAuthApiError(error) {
51627  return isAuthError(error) && error.name === 'AuthApiError';
51628}
51629
51630class AuthUnknownError extends AuthError {
51631  constructor(message, originalError) {
51632    super(message);
51633    this.name = 'AuthUnknownError';
51634    this.originalError = originalError;
51635  }
51636
51637}
51638
51639exports.AuthUnknownError = AuthUnknownError;
51640
51641class CustomAuthError extends AuthError {
51642  constructor(message, name, status, code) {
51643    super(message, status, code);
51644    this.name = name;
51645    this.status = status;
51646  }
51647
51648}
51649
51650exports.CustomAuthError = CustomAuthError;
51651
51652class AuthSessionMissingError extends CustomAuthError {
51653  constructor() {
51654    super('Auth session missing!', 'AuthSessionMissingError', 400, undefined);
51655  }
51656
51657}
51658
51659exports.AuthSessionMissingError = AuthSessionMissingError;
51660

51661class AuthInvalidTokenResponseError extends CustomAuthError {
51662  constructor() {
51663    super('Auth session or user missing', 'AuthInvalidTokenResponseError', 500, undefined);
51664  }
51665
51666}
51667
51668exports.AuthInvalidTokenResponseError = AuthInvalidTokenResponseError;
51669
51670class AuthInvalidCredentialsError extends CustomAuthError {
51671  constructor(message) {
51672    super(message, 'AuthInvalidCredentialsError', 400, undefined);
51673  }
51674
51675}
51676
51677exports.AuthInvalidCredentialsError = AuthInvalidCredentialsError;
51678
51679class AuthImplicitGrantRedirectError extends CustomAuthError {
51680  constructor(message, details = null) {
51681    super(message, 'AuthImplicitGrantRedirectError', 500, undefined);
51682    this.details = null;
51683    this.details = details;
51684  }
51685
51686  toJSON() {
51687    return {
51688      name: this.name,
51689      message: this.message,
51690      status: this.status,
51691      details: this.details
51692    };
51693  }
51694
51695}
51696
51697exports.AuthImplicitGrantRedirectError = AuthImplicitGrantRedirectError;
51698
51699class AuthPKCEGrantCodeExchangeError extends CustomAuthError {
51700  constructor(message, details = null) {
51701    super(message, 'AuthPKCEGrantCodeExchangeError', 500, undefined);
51702    this.details = null;
51703    this.details = details;
51704  }
51705
51706  toJSON() {
51707    return {
51708      name: this.name,
51709      message: this.message,
51710      status: this.status,
51711      details: this.details
51712    };
51713  }
51714
51715}
51716
51717exports.AuthPKCEGrantCodeExchangeError = AuthPKCEGrantCodeExchangeError;
51718
51719class AuthRetryableFetchError extends CustomAuthError {
51720  constructor(message, status) {
51721    super(message, 'AuthRetryableFetchError', status, undefined);
51722  }
51723
51724}
51725
51726exports.AuthRetryableFetchError = AuthRetryableFetchError;
51727
51728function isAuthRetryableFetchError(error) {
51729  return isAuthError(error) && error.name === 'AuthRetryableFetchError';
51730}
51731/**
51732 * This error is thrown on certain methods when the password used is deemed
51733 * weak. Inspect the reasons to identify what password strength rules are
51734 * inadequate.
51735 */
51736
51737
51738class AuthWeakPasswordError extends CustomAuthError {
51739  constructor(message, status, reasons) {
51740    super(message, 'AuthWeakPasswordError', status, 'weak_password');
51741    this.reasons = reasons;
51742  }
51743
51744}
51745
51746exports.AuthWeakPasswordError = AuthWeakPasswordError;
51747
51748function isAuthWeakPasswordError(error) {
51749  return isAuthError(error) && error.name === 'AuthWeakPasswordError';
51750}
51751
51752},{}],394:[function(require,module,exports){
51753"use strict";
51754
51755Object.defineProperty(exports, "__esModule", {
51756  value: true
51757});
51758exports._generateLinkResponse = _generateLinkResponse;
51759exports._noResolveJsonResponse = _noResolveJsonResponse;
51760exports._request = _request;
51761exports._sessionResponse = _sessionResponse;
51762exports._sessionResponsePassword = _sessionResponsePassword;
51763exports._ssoResponse = _ssoResponse;
51764exports._userResponse = _userResponse;
51765exports.handleError = handleError;
51766
51767var _constants = require("./constants");
51768
51769var _helpers = require("./helpers");
51770
51771var _errors = require("./errors");
51772
51773var __rest = void 0 && (void 0).__rest || function (s, e) {
51774  var t = {};
51775
51776  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
51777
51778  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
51779    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
51780  }
51781  return t;
51782};
51783
51784const _getErrorMessage = err => err.msg || err.message || err.error_description || err.error || JSON.stringify(err);
51785
51786const NETWORK_ERROR_CODES = [502, 503, 504];
51787
51788async function handleError(error) {
51789  var _a;
51790
51791  if (!(0, _helpers.looksLikeFetchResponse)(error)) {
51792    throw new _errors.AuthRetryableFetchError(_getErrorMessage(error), 0);
51793  }
51794
51795  if (NETWORK_ERROR_CODES.includes(error.status)) {
51796    // status in 500...599 range - server had an error, request might be retryed.
51797    throw new _errors.AuthRetryableFetchError(_getErrorMessage(error), error.status);
51798  }
51799
51800  let data;
51801
51802  try {
51803    data = await error.json();
51804  } catch (e) {
51805    throw new _errors.AuthUnknownError(_getErrorMessage(e), e);
51806  }
51807
51808  let errorCode = undefined;
51809  const responseAPIVersion = (0, _helpers.parseResponseAPIVersion)(error);
51810
51811  if (responseAPIVersion && responseAPIVersion.getTime() >= _constants.API_VERSIONS['2024-01-01'].timestamp && typeof data === 'object' && data && typeof data.code === 'string') {
51812    errorCode = data.code;

vendor: 2,776 bytes, lines 51813-51876

51813  } else if (typeof data === 'object' && data && typeof data.error_code === 'string') {
51814    errorCode = data.error_code;
51815  }
51816
51817  if (!errorCode) {
51818    // Legacy support for weak password errors, when there were no error codes
51819    if (typeof data === 'object' && data && typeof data.weak_password === 'object' && data.weak_password && Array.isArray(data.weak_password.reasons) && data.weak_password.reasons.length && data.weak_password.reasons.reduce((a, i) => a && typeof i === 'string', true)) {
51820      throw new _errors.AuthWeakPasswordError(_getErrorMessage(data), error.status, data.weak_password.reasons);
51821    }
51822  } else if (errorCode === 'weak_password') {
51823    throw new _errors.AuthWeakPasswordError(_getErrorMessage(data), error.status, ((_a = data.weak_password) === null || _a === void 0 ? void 0 : _a.reasons) || []);
51824  }
51825
51826  throw new _errors.AuthApiError(_getErrorMessage(data), error.status || 500, errorCode);
51827}
51828
51829const _getRequestParams = (method, options, parameters, body) => {
51830  const params = {
51831    method,
51832    headers: (options === null || options === void 0 ? void 0 : options.headers) || {}
51833  };
51834
51835  if (method === 'GET') {
51836    return params;
51837  }
51838
51839  params.headers = Object.assign({
51840    'Content-Type': 'application/json;charset=UTF-8'
51841  }, options === null || options === void 0 ? void 0 : options.headers);
51842  params.body = JSON.stringify(body);
51843  return Object.assign(Object.assign({}, params), parameters);
51844};
51845
51846async function _request(fetcher, method, url, options) {
51847  var _a;
51848
51849  const headers = Object.assign({}, options === null || options === void 0 ? void 0 : options.headers);
51850
51851  if (!headers[_constants.API_VERSION_HEADER_NAME]) {
51852    headers[_constants.API_VERSION_HEADER_NAME] = _constants.API_VERSIONS['2024-01-01'].name;
51853  }
51854
51855  if (options === null || options === void 0 ? void 0 : options.jwt) {
51856    headers['Authorization'] = `Bearer ${options.jwt}`;
51857  }
51858
51859  const qs = (_a = options === null || options === void 0 ? void 0 : options.query) !== null && _a !== void 0 ? _a : {};
51860
51861  if (options === null || options === void 0 ? void 0 : options.redirectTo) {
51862    qs['redirect_to'] = options.redirectTo;
51863  }
51864
51865  const queryString = Object.keys(qs).length ? '?' + new URLSearchParams(qs).toString() : '';
51866  const data = await _handleRequest(fetcher, method, url + queryString, {
51867    headers,
51868    noResolveJson: options === null || options === void 0 ? void 0 : options.noResolveJson
51869  }, {}, options === null || options === void 0 ? void 0 : options.body);
51870  return (options === null || options === void 0 ? void 0 : options.xform) ? options === null || options === void 0 ? void 0 : options.xform(data) : {
51871    data: Object.assign({}, data),
51872    error: null
51873  };
51874}
51875
51876async function _handleRequest(fetcher, method, url, options, parameters, body) {

51877  const requestParams = _getRequestParams(method, options, parameters, body);
51878
51879  let result;
51880
51881  try {
51882    result = await fetcher(url, Object.assign({}, requestParams));
51883  } catch (e) {
51884    console.error(e); // fetch failed, likely due to a network or CORS error
51885
51886    throw new _errors.AuthRetryableFetchError(_getErrorMessage(e), 0);
51887  }
51888
51889  if (!result.ok) {
51890    await handleError(result);
51891  }
51892
51893  if (options === null || options === void 0 ? void 0 : options.noResolveJson) {
51894    return result;
51895  }
51896
51897  try {
51898    return await result.json();
51899  } catch (e) {
51900    await handleError(e);
51901  }
51902}
51903
51904function _sessionResponse(data) {
51905  var _a;
51906
51907  let session = null;
51908
51909  if (hasSession(data)) {
51910    session = Object.assign({}, data);
51911
51912    if (!data.expires_at) {
51913      session.expires_at = (0, _helpers.expiresAt)(data.expires_in);
51914    }
51915  }
51916
51917  const user = (_a = data.user) !== null && _a !== void 0 ? _a : data;
51918  return {
51919    data: {
51920      session,
51921      user
51922    },
51923    error: null
51924  };
51925}
51926
51927function _sessionResponsePassword(data) {
51928  const response = _sessionResponse(data);
51929
51930  if (!response.error && data.weak_password && typeof data.weak_password === 'object' && Array.isArray(data.weak_password.reasons) && data.weak_password.reasons.length && data.weak_password.message && typeof data.weak_password.message === 'string' && data.weak_password.reasons.reduce((a, i) => a && typeof i === 'string', true)) {
51931    response.data.weak_password = data.weak_password;
51932  }
51933
51934  return response;
51935}
51936
51937function _userResponse(data) {
51938  var _a;
51939
51940  const user = (_a = data.user) !== null && _a !== void 0 ? _a : data;
51941  return {
51942    data: {
51943      user
51944    },
51945    error: null
51946  };
51947}
51948
51949function _ssoResponse(data) {
51950  return {
51951    data,
51952    error: null
51953  };
51954}
51955
51956function _generateLinkResponse(data) {
51957  const {
51958    action_link,
51959    email_otp,
51960    hashed_token,
51961    redirect_to,
51962    verification_type
51963  } = data,
51964        rest = __rest(data, ["action_link", "email_otp", "hashed_token", "redirect_to", "verification_type"]);
51965
51966  const properties = {
51967    action_link,
51968    email_otp,
51969    hashed_token,
51970    redirect_to,
51971    verification_type
51972  };
51973  const user = Object.assign({}, rest);
51974  return {
51975    data: {
51976      properties,
51977      user
51978    },
51979    error: null
51980  };
51981}
51982
51983function _noResolveJsonResponse(data) {
51984  return data;
51985}
51986/**
51987 * hasSession checks if the response object contains a valid session
51988 * @param data A response object
51989 * @returns true if a session is in the response
51990 */
51991
51992
51993function hasSession(data) {
51994  return data.access_token && data.refresh_token && data.expires_in;
51995}
51996
51997},{"./constants":392,"./errors":393,"./helpers":395}],395:[function(require,module,exports){
51998"use strict";
51999
52000Object.defineProperty(exports, "__esModule", {
52001  value: true
52002});
52003exports.Deferred = void 0;
52004exports.decodeBase64URL = decodeBase64URL;
52005exports.decodeJWTPayload = decodeJWTPayload;
52006exports.expiresAt = expiresAt;
52007exports.generatePKCEChallenge = generatePKCEChallenge;
52008exports.generatePKCEVerifier = generatePKCEVerifier;
52009exports.getCodeChallengeAndMethod = getCodeChallengeAndMethod;
52010exports.looksLikeFetchResponse = exports.isBrowser = exports.getItemAsync = void 0;
52011exports.parseParametersFromURL = parseParametersFromURL;
52012exports.parseResponseAPIVersion = parseResponseAPIVersion;

52013exports.resolveFetch = exports.removeItemAsync = void 0;
52014exports.retryable = retryable;
52015exports.setItemAsync = void 0;
52016exports.sleep = sleep;
52017exports.supportsLocalStorage = void 0;
52018exports.uuid = uuid;
52019
52020var _constants = require("./constants");
52021
52022function expiresAt(expiresIn) {
52023  const timeNow = Math.round(Date.now() / 1000);
52024  return timeNow + expiresIn;
52025}
52026
52027function uuid() {
52028  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
52029    const r = Math.random() * 16 | 0,
52030          v = c == 'x' ? r : r & 0x3 | 0x8;
52031    return v.toString(16);
52032  });
52033}
52034
52035const isBrowser = () => typeof document !== 'undefined';
52036
52037exports.isBrowser = isBrowser;
52038const localStorageWriteTests = {
52039  tested: false,
52040  writable: false
52041};
52042/**
52043 * Checks whether localStorage is supported on this browser.
52044 */
52045
52046const supportsLocalStorage = () => {
52047  if (!isBrowser()) {
52048    return false;
52049  }
52050
52051  try {
52052    if (typeof globalThis.localStorage !== 'object') {
52053      return false;
52054    }
52055  } catch (e) {
52056    // DOM exception when accessing `localStorage`
52057    return false;
52058  }
52059
52060  if (localStorageWriteTests.tested) {
52061    return localStorageWriteTests.writable;
52062  }
52063
52064  const randomKey = `lswt-${Math.random()}${Math.random()}`;
52065
52066  try {
52067    globalThis.localStorage.setItem(randomKey, randomKey);
52068    globalThis.localStorage.removeItem(randomKey);
52069    localStorageWriteTests.tested = true;
52070    localStorageWriteTests.writable = true;
52071  } catch (e) {
52072    // localStorage can't be written to
52073    // https://www.chromium.org/for-testers/bug-reporting-guidelines/uncaught-securityerror-failed-to-read-the-localstorage-property-from-window-access-is-denied-for-this-document
52074    localStorageWriteTests.tested = true;
52075    localStorageWriteTests.writable = false;
52076  }
52077
52078  return localStorageWriteTests.writable;
52079};
52080/**
52081 * Extracts parameters encoded in the URL both in the query and fragment.
52082 */
52083
52084
52085exports.supportsLocalStorage = supportsLocalStorage;
52086
52087function parseParametersFromURL(href) {
52088  const result = {};
52089  const url = new URL(href);
52090
52091  if (url.hash && url.hash[0] === '#') {
52092    try {
52093      const hashSearchParams = new URLSearchParams(url.hash.substring(1));
52094      hashSearchParams.forEach((value, key) => {
52095        result[key] = value;
52096      });
52097    } catch (e) {// hash is not a query string
52098    }
52099  } // search parameters take precedence over hash parameters
52100
52101
52102  url.searchParams.forEach((value, key) => {
52103    result[key] = value;
52104  });
52105  return result;
52106}
52107
52108const resolveFetch = customFetch => {
52109  let _fetch;
52110
52111  if (customFetch) {
52112    _fetch = customFetch;
52113  } else if (typeof fetch === 'undefined') {
52114    _fetch = (...args) => import('@supabase/node-fetch').then(({
52115      default: fetch
52116    }) => fetch(...args));
52117  } else {
52118    _fetch = fetch;
52119  }
52120
52121  return (...args) => _fetch(...args);
52122};
52123
52124exports.resolveFetch = resolveFetch;
52125
52126const looksLikeFetchResponse = maybeResponse => {
52127  return typeof maybeResponse === 'object' && maybeResponse !== null && 'status' in maybeResponse && 'ok' in maybeResponse && 'json' in maybeResponse && typeof maybeResponse.json === 'function';
52128}; // Storage helpers
52129
52130
52131exports.looksLikeFetchResponse = looksLikeFetchResponse;
52132
52133const setItemAsync = async (storage, key, data) => {
52134  await storage.setItem(key, JSON.stringify(data));
52135};
52136
52137exports.setItemAsync = setItemAsync;
52138
52139const getItemAsync = async (storage, key) => {
52140  const value = await storage.getItem(key);
52141
52142  if (!value) {
52143    return null;
52144  }
52145
52146  try {
52147    return JSON.parse(value);
52148  } catch (_a) {
52149    return value;
52150  }
52151};
52152
52153exports.getItemAsync = getItemAsync;
52154
52155const removeItemAsync = async (storage, key) => {
52156  await storage.removeItem(key);
52157};
52158
52159exports.removeItemAsync = removeItemAsync;
52160
52161function decodeBase64URL(value) {
52162  const key = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
52163  let base64 = '';
52164  let chr1, chr2, chr3;
52165  let enc1, enc2, enc3, enc4;
52166  let i = 0;
52167  value = value.replace('-', '+').replace('_', '/');
52168
52169  while (i < value.length) {
52170    enc1 = key.indexOf(value.charAt(i++));
52171    enc2 = key.indexOf(value.charAt(i++));
52172    enc3 = key.indexOf(value.charAt(i++));
52173    enc4 = key.indexOf(value.charAt(i++));
52174    chr1 = enc1 << 2 | enc2 >> 4;
52175    chr2 = (enc2 & 15) << 4 | enc3 >> 2;
52176    chr3 = (enc3 & 3) << 6 | enc4;
52177    base64 = base64 + String.fromCharCode(chr1);
52178
52179    if (enc3 != 64 && chr2 != 0) {
52180      base64 = base64 + String.fromCharCode(chr2);
52181    }
52182
52183    if (enc4 != 64 && chr3 != 0) {
52184      base64 = base64 + String.fromCharCode(chr3);
52185    }
52186  }
52187
52188  return base64;
52189}
52190/**
52191 * A deferred represents some asynchronous work that is not yet finished, which
52192 * may or may not culminate in a value.
52193 * Taken from: https://github.com/mike-north/types/blob/master/src/async.ts
52194 */
52195
52196
52197class Deferred {
52198  constructor() {
52199    // eslint-disable-next-line @typescript-eslint/no-extra-semi
52200    ;
52201    this.promise = new Deferred.promiseConstructor((res, rej) => {
52202      // eslint-disable-next-line @typescript-eslint/no-extra-semi
52203      ;
52204      this.resolve = res;
52205      this.reject = rej;
52206    });
52207  }
52208
52209}
52210
52211exports.Deferred = Deferred;
52212Deferred.promiseConstructor = Promise; // Taken from: https://stackoverflow.com/questions/38552003/how-to-decode-jwt-token-in-javascript-without-using-a-library
52213
52214function decodeJWTPayload(token) {
52215  // Regex checks for base64url format
52216  const base64UrlRegex = /^([a-z0-9_-]{4})*($|[a-z0-9_-]{3}=?$|[a-z0-9_-]{2}(==)?$)$/i;
52217  const parts = token.split('.');
52218
52219  if (parts.length !== 3) {

52220    throw new Error('JWT is not valid: not a JWT structure');
52221  }
52222
52223  if (!base64UrlRegex.test(parts[1])) {
52224    throw new Error('JWT is not valid: payload is not in base64url format');
52225  }
52226
52227  const base64Url = parts[1];
52228  return JSON.parse(decodeBase64URL(base64Url));
52229}
52230/**
52231 * Creates a promise that resolves to null after some time.
52232 */
52233
52234
52235async function sleep(time) {
52236  return await new Promise(accept => {
52237    setTimeout(() => accept(null), time);
52238  });
52239}
52240/**
52241 * Converts the provided async function into a retryable function. Each result
52242 * or thrown error is sent to the isRetryable function which should return true
52243 * if the function should run again.
52244 */
52245
52246
52247function retryable(fn, isRetryable) {
52248  const promise = new Promise((accept, reject) => {
52249    // eslint-disable-next-line @typescript-eslint/no-extra-semi
52250    ;
52251
52252    (async () => {
52253      for (let attempt = 0; attempt < Infinity; attempt++) {
52254        try {
52255          const result = await fn(attempt);
52256
52257          if (!isRetryable(attempt, null, result)) {
52258            accept(result);
52259            return;
52260          }
52261        } catch (e) {
52262          if (!isRetryable(attempt, e)) {
52263            reject(e);
52264            return;
52265          }
52266        }
52267      }
52268    })();
52269  });
52270  return promise;
52271}
52272
52273function dec2hex(dec) {
52274  return ('0' + dec.toString(16)).substr(-2);
52275} // Functions below taken from: https://stackoverflow.com/questions/63309409/creating-a-code-verifier-and-challenge-for-pkce-auth-on-spotify-api-in-reactjs
52276
52277
52278function generatePKCEVerifier() {
52279  const verifierLength = 56;
52280  const array = new Uint32Array(verifierLength);
52281
52282  if (typeof crypto === 'undefined') {
52283    const charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
52284    const charSetLen = charSet.length;
52285    let verifier = '';
52286
52287    for (let i = 0; i < verifierLength; i++) {
52288      verifier += charSet.charAt(Math.floor(Math.random() * charSetLen));
52289    }
52290
52291    return verifier;
52292  }
52293
52294  crypto.getRandomValues(array);
52295  return Array.from(array, dec2hex).join('');
52296}
52297
52298async function sha256(randomString) {
52299  const encoder = new TextEncoder();
52300  const encodedData = encoder.encode(randomString);
52301  const hash = await crypto.subtle.digest('SHA-256', encodedData);
52302  const bytes = new Uint8Array(hash);
52303  return Array.from(bytes).map(c => String.fromCharCode(c)).join('');
52304}
52305
52306function base64urlencode(str) {
52307  return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
52308}
52309
52310async function generatePKCEChallenge(verifier) {
52311  const hasCryptoSupport = typeof crypto !== 'undefined' && typeof crypto.subtle !== 'undefined' && typeof TextEncoder !== 'undefined';
52312
52313  if (!hasCryptoSupport) {
52314    console.warn('WebCrypto API is not supported. Code challenge method will default to use plain instead of sha256.');
52315    return verifier;
52316  }
52317
52318  const hashed = await sha256(verifier);
52319  return base64urlencode(hashed);
52320}
52321
52322async function getCodeChallengeAndMethod(storage, storageKey, isPasswordRecovery = false) {
52323  const codeVerifier = generatePKCEVerifier();
52324  let storedCodeVerifier = codeVerifier;
52325
52326  if (isPasswordRecovery) {
52327    storedCodeVerifier += '/PASSWORD_RECOVERY';
52328  }
52329
52330  await setItemAsync(storage, `${storageKey}-code-verifier`, storedCodeVerifier);
52331  const codeChallenge = await generatePKCEChallenge(codeVerifier);
52332  const codeChallengeMethod = codeVerifier === codeChallenge ? 'plain' : 's256';
52333  return [codeChallenge, codeChallengeMethod];
52334}
52335/** Parses the API version which is 2YYY-MM-DD. */
52336
52337
52338const API_VERSION_REGEX = /^2[0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|1[0-9]|2[0-9]|3[0-1])$/i;
52339
52340function parseResponseAPIVersion(response) {
52341  const apiVersion = response.headers.get(_constants.API_VERSION_HEADER_NAME);
52342
52343  if (!apiVersion) {
52344    return null;
52345  }
52346
52347  if (!apiVersion.match(API_VERSION_REGEX)) {
52348    return null;
52349  }
52350
52351  try {
52352    const date = new Date(`${apiVersion}T00:00:00.0Z`);
52353    return date;
52354  } catch (e) {
52355    return null;
52356  }
52357}
52358
52359},{"./constants":392}],396:[function(require,module,exports){
52360"use strict";
52361
52362Object.defineProperty(exports, "__esModule", {
52363  value: true
52364});
52365exports.localStorageAdapter = void 0;
52366exports.memoryLocalStorageAdapter = memoryLocalStorageAdapter;
52367
52368var _helpers = require("./helpers");
52369
52370/**
52371 * Provides safe access to the globalThis.localStorage property.
52372 */
52373const localStorageAdapter = {
52374  getItem: key => {
52375    if (!(0, _helpers.supportsLocalStorage)()) {
52376      return null;
52377    }
52378
52379    return globalThis.localStorage.getItem(key);
52380  },
52381  setItem: (key, value) => {
52382    if (!(0, _helpers.supportsLocalStorage)()) {
52383      return;
52384    }
52385
52386    globalThis.localStorage.setItem(key, value);
52387  },
52388  removeItem: key => {
52389    if (!(0, _helpers.supportsLocalStorage)()) {
52390      return;
52391    }
52392
52393    globalThis.localStorage.removeItem(key);
52394  }
52395};
52396/**
52397 * Returns a localStorage-like object that stores the key-value pairs in
52398 * memory.
52399 */
52400
52401exports.localStorageAdapter = localStorageAdapter;
52402
52403function memoryLocalStorageAdapter(store = {}) {
52404  return {
52405    getItem: key => {
52406      return store[key] || null;
52407    },
52408    setItem: (key, value) => {
52409      store[key] = value;
52410    },
52411    removeItem: key => {
52412      delete store[key];
52413    }
52414  };
52415}
52416
52417},{"./helpers":395}],397:[function(require,module,exports){
52418"use strict";
52419
52420Object.defineProperty(exports, "__esModule", {
52421  value: true
52422});
52423exports.internals = exports.NavigatorLockAcquireTimeoutError = exports.LockAcquireTimeoutError = void 0;
52424exports.navigatorLock = navigatorLock;
52425
52426var _helpers = require("./helpers");
52427
52428/**
52429 * @experimental
52430 */
52431const internals = {
52432  /**
52433   * @experimental
52434   */
52435  debug: !!(globalThis && (0, _helpers.supportsLocalStorage)() && globalThis.localStorage && globalThis.localStorage.getItem('supabase.gotrue-js.locks.debug') 

52435=== 'true')
52436};
52437/**
52438 * An error thrown when a lock cannot be acquired after some amount of time.
52439 *
52440 * Use the {@link #isAcquireTimeout} property instead of checking with `instanceof`.
52441 */
52442
52443exports.internals = internals;
52444
52445class LockAcquireTimeoutError extends Error {
52446  constructor(message) {
52447    super(message);
52448    this.isAcquireTimeout = true;
52449  }
52450
52451}
52452
52453exports.LockAcquireTimeoutError = LockAcquireTimeoutError;
52454
52455class NavigatorLockAcquireTimeoutError extends LockAcquireTimeoutError {}
52456/**
52457 * Implements a global exclusive lock using the Navigator LockManager API. It
52458 * is available on all browsers released after 2022-03-15 with Safari being the
52459 * last one to release support. If the API is not available, this function will
52460 * throw. Make sure you check availablility before configuring {@link
52461 * GoTrueClient}.
52462 *
52463 * You can turn on debugging by setting the `supabase.gotrue-js.locks.debug`
52464 * local storage item to `true`.
52465 *
52466 * Internals:
52467 *
52468 * Since the LockManager API does not preserve stack traces for the async
52469 * function passed in the `request` method, a trick is used where acquiring the
52470 * lock releases a previously started promise to run the operation in the `fn`
52471 * function. The lock waits for that promise to finish (with or without error),
52472 * while the function will finally wait for the result anyway.
52473 *
52474 * @param name Name of the lock to be acquired.
52475 * @param acquireTimeout If negative, no timeout. If 0 an error is thrown if
52476 *                       the lock can't be acquired without waiting. If positive, the lock acquire
52477 *                       will time out after so many milliseconds. An error is
52478 *                       a timeout if it has `isAcquireTimeout` set to true.
52479 * @param fn The operation to run once the lock is acquired.
52480 */
52481
52482
52483exports.NavigatorLockAcquireTimeoutError = NavigatorLockAcquireTimeoutError;
52484
52485async function navigatorLock(name, acquireTimeout, fn) {
52486  if (internals.debug) {
52487    console.log('@supabase/gotrue-js: navigatorLock: acquire lock', name, acquireTimeout);
52488  }
52489
52490  const abortController = new globalThis.AbortController();
52491
52492  if (acquireTimeout > 0) {
52493    setTimeout(() => {
52494      abortController.abort();
52495
52496      if (internals.debug) {
52497        console.log('@supabase/gotrue-js: navigatorLock acquire timed out', name);
52498      }
52499    }, acquireTimeout);
52500  } // MDN article: https://developer.mozilla.org/en-US/docs/Web/API/LockManager/request
52501
52502
52503  return await globalThis.navigator.locks.request(name, acquireTimeout === 0 ? {
52504    mode: 'exclusive',
52505    ifAvailable: true
52506  } : {
52507    mode: 'exclusive',
52508    signal: abortController.signal
52509  }, async lock => {
52510    if (lock) {
52511      if (internals.debug) {
52512        console.log('@supabase/gotrue-js: navigatorLock: acquired', name, lock.name);
52513      }
52514
52515      try {
52516        return await fn();
52517      } finally {
52518        if (internals.debug) {
52519          console.log('@supabase/gotrue-js: navigatorLock: released', name, lock.name);
52520        }
52521      }
52522    } else {
52523      if (acquireTimeout === 0) {
52524        if (internals.debug) {
52525          console.log('@supabase/gotrue-js: navigatorLock: not immediately available', name);
52526        }
52527
52528        throw new NavigatorLockAcquireTimeoutError(`Acquiring an exclusive Navigator LockManager lock "${name}" immediately failed`);
52529      } else {
52530        if (internals.debug) {
52531          try {
52532            const result = await globalThis.navigator.locks.query();
52533            console.log('@supabase/gotrue-js: Navigator LockManager state', JSON.stringify(result, null, '  '));
52534          } catch (e) {
52535            console.warn('@supabase/gotrue-js: Error when querying Navigator LockManager state', e);
52536          }
52537        } // Browser is not following the Navigator LockManager spec, it
52538        // returned a null lock when we didn't use ifAvailable. So we can
52539        // pretend the lock is acquired in the name of backward compatibility
52540        // and user experience and just run the function.
52541
52542
52543        console.warn('@supabase/gotrue-js: Navigator LockManager returned a null lock when using #request without ifAvailable set to true, it appears this browser is not following the LockManager spec https://developer.mozilla.org/en-US/docs/Web/API/LockManager/request');
52544        return await fn();
52545      }
52546    }
52547  });
52548}
52549
52550},{"./helpers":395}],398:[function(require,module,exports){
52551"use strict";
52552
52553Object.defineProperty(exports, "__esModule", {
52554  value: true
52555});
52556exports.polyfillGlobalThis = polyfillGlobalThis;
52557
52558/**
52559 * https://mathiasbynens.be/notes/globalthis
52560 */
52561function polyfillGlobalThis() {
52562  if (typeof globalThis === 'object') return;
52563
52564  try {
52565    Object.defineProperty(Object.prototype, '__magic__', {
52566      get: function () {
52567        return this;
52568      },
52569      configurable: true
52570    }); // @ts-expect-error 'Allow access to magic'
52571
52572    __magic__.globalThis = __magic__; // @ts-expect-error 'Allow access to magic'
52573
52574    delete Object.prototype.__magic__;
52575  } catch (e) {
52576    if (typeof self !== 'undefined') {
52577      // @ts-expect-error 'Allow access to globals'
52578      self.globalThis = self;
52579    }
52580  }
52581}
52582
52583},{}],399:[function(require,module,exports){
52584"use strict";
52585
52586Object.defineProperty(exports, "__esModule", {
52587  value: true
52588});
52589
52590},{}],400:[function(require,module,exports){
52591"use strict";
52592
52593Object.defineProperty(exports, "__esModule", {
52594  value: true
52595});
52596exports.version = void 0;
52597const version = '2.64.2';
52598exports.version = version;
52599
52600},{}],401:[function(require,module,exports){
52601"use strict";
52602
52603Object.defineProperty(exports, "__esModule", {
52604  value: true
52605});
52606exports.FunctionsClient = void 0;
52607
52608var _helper = require("./helper");
52609
52610var _types = require("./types");
52611
52612var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
52613  function adopt(value) {
52614    return value instanceof P ? value : new P(function (resolve) {
52615      resolve(value);
52616    });
52617  }
52618
52619  return new (P || (P = Promise))(function (resolve, reject) {
52620    function fulfilled(value) {

52621      try {
52622        step(generator.next(value));
52623      } catch (e) {
52624        reject(e);
52625      }
52626    }
52627
52628    function rejected(value) {
52629      try {
52630        step(generator["throw"](value));
52631      } catch (e) {
52632        reject(e);
52633      }
52634    }
52635
52636    function step(result) {
52637      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
52638    }
52639
52640    step((generator = generator.apply(thisArg, _arguments || [])).next());
52641  });
52642};
52643
52644class FunctionsClient {
52645  constructor(url, {
52646    headers = {},
52647    customFetch,
52648    region = _types.FunctionRegion.Any
52649  } = {}) {
52650    this.url = url;
52651    this.headers = headers;
52652    this.region = region;
52653    this.fetch = (0, _helper.resolveFetch)(customFetch);
52654  }
52655  /**
52656   * Updates the authorization header
52657   * @param token - the new jwt token sent in the authorisation header
52658   */
52659
52660
52661  setAuth(token) {
52662    this.headers.Authorization = `Bearer ${token}`;
52663  }
52664  /**
52665   * Invokes a function
52666   * @param functionName - The name of the Function to invoke.
52667   * @param options - Options for invoking the Function.
52668   */
52669
52670
52671  invoke(functionName, options = {}) {
52672    var _a;
52673
52674    return __awaiter(this, void 0, void 0, function* () {
52675      try {
52676        const {
52677          headers,
52678          method,
52679          body: functionArgs
52680        } = options;
52681        let _headers = {};
52682        let {
52683          region
52684        } = options;
52685
52686        if (!region) {
52687          region = this.region;
52688        }
52689
52690        if (region && region !== 'any') {
52691          _headers['x-region'] = region;
52692        }
52693
52694        let body;
52695
52696        if (functionArgs && (headers && !Object.prototype.hasOwnProperty.call(headers, 'Content-Type') || !headers)) {
52697          if (typeof Blob !== 'undefined' && functionArgs instanceof Blob || functionArgs instanceof ArrayBuffer) {
52698            // will work for File as File inherits Blob
52699            // also works for ArrayBuffer as it is the same underlying structure as a Blob
52700            _headers['Content-Type'] = 'application/octet-stream';
52701            body = functionArgs;
52702          } else if (typeof functionArgs === 'string') {
52703            // plain string
52704            _headers['Content-Type'] = 'text/plain';
52705            body = functionArgs;
52706          } else if (typeof FormData !== 'undefined' && functionArgs instanceof FormData) {
52707            // don't set content-type headers
52708            // Request will automatically add the right boundary value
52709            body = functionArgs;
52710          } else {
52711            // default, assume this is JSON
52712            _headers['Content-Type'] = 'application/json';
52713            body = JSON.stringify(functionArgs);
52714          }
52715        }
52716
52717        const response = yield this.fetch(`${this.url}/${functionName}`, {
52718          method: method || 'POST',
52719          // headers priority is (high to low):
52720          // 1. invoke-level headers
52721          // 2. client-level headers
52722          // 3. default Content-Type header
52723          headers: Object.assign(Object.assign(Object.assign({}, _headers), this.headers), headers),
52724          body
52725        }).catch(fetchError => {
52726          throw new _types.FunctionsFetchError(fetchError);
52727        });
52728        const isRelayError = response.headers.get('x-relay-error');
52729
52730        if (isRelayError && isRelayError === 'true') {
52731          throw new _types.FunctionsRelayError(response);
52732        }
52733
52734        if (!response.ok) {
52735          throw new _types.FunctionsHttpError(response);
52736        }
52737
52738        let responseType = ((_a = response.headers.get('Content-Type')) !== null && _a !== void 0 ? _a : 'text/plain').split(';')[0].trim();
52739        let data;
52740
52741        if (responseType === 'application/json') {
52742          data = yield response.json();
52743        } else if (responseType === 'application/octet-stream') {
52744          data = yield response.blob();
52745        } else if (responseType === 'text/event-stream') {
52746          data = response;
52747        } else if (responseType === 'multipart/form-data') {
52748          data = yield response.formData();
52749        } else {
52750          // default to text
52751          data = yield response.text();
52752        }
52753
52754        return {
52755          data,
52756          error: null
52757        };
52758      } catch (error) {
52759        return {
52760          data: null,
52761          error
52762        };
52763      }
52764    });
52765  }
52766
52767}
52768
52769exports.FunctionsClient = FunctionsClient;
52770
52771},{"./helper":402,"./types":404}],402:[function(require,module,exports){
52772"use strict";
52773
52774Object.defineProperty(exports, "__esModule", {
52775  value: true
52776});
52777exports.resolveFetch = void 0;
52778
52779const resolveFetch = customFetch => {
52780  let _fetch;
52781
52782  if (customFetch) {
52783    _fetch = customFetch;
52784  } else if (typeof fetch === 'undefined') {
52785    _fetch = (...args) => import('@supabase/node-fetch').then(({
52786      default: fetch
52787    }) => fetch(...args));
52788  } else {
52789    _fetch = fetch;
52790  }
52791
52792  return (...args) => _fetch(...args);
52793};
52794
52795exports.resolveFetch = resolveFetch;
52796
52797},{}],403:[function(require,module,exports){
52798"use strict";
52799
52800Object.defineProperty(exports, "__esModule", {
52801  value: true
52802});
52803Object.defineProperty(exports, "FunctionRegion", {
52804  enumerable: true,
52805  get: function () {
52806    return _types.FunctionRegion;
52807  }
52808});
52809Object.defineProperty(exports, "FunctionsClient", {
52810  enumerable: true,
52811  get: function () {

52812    return _FunctionsClient.FunctionsClient;
52813  }
52814});
52815Object.defineProperty(exports, "FunctionsError", {
52816  enumerable: true,
52817  get: function () {
52818    return _types.FunctionsError;
52819  }
52820});
52821Object.defineProperty(exports, "FunctionsFetchError", {
52822  enumerable: true,
52823  get: function () {
52824    return _types.FunctionsFetchError;
52825  }
52826});
52827Object.defineProperty(exports, "FunctionsHttpError", {
52828  enumerable: true,
52829  get: function () {
52830    return _types.FunctionsHttpError;
52831  }
52832});
52833Object.defineProperty(exports, "FunctionsRelayError", {
52834  enumerable: true,
52835  get: function () {
52836    return _types.FunctionsRelayError;
52837  }
52838});
52839
52840var _FunctionsClient = require("./FunctionsClient");
52841
52842var _types = require("./types");
52843
52844},{"./FunctionsClient":401,"./types":404}],404:[function(require,module,exports){
52845"use strict";
52846
52847Object.defineProperty(exports, "__esModule", {
52848  value: true
52849});
52850exports.FunctionsRelayError = exports.FunctionsHttpError = exports.FunctionsFetchError = exports.FunctionsError = exports.FunctionRegion = void 0;
52851
52852class FunctionsError extends Error {
52853  constructor(message, name = 'FunctionsError', context) {
52854    super(message);
52855    this.name = name;
52856    this.context = context;
52857  }
52858
52859}
52860
52861exports.FunctionsError = FunctionsError;
52862
52863class FunctionsFetchError extends FunctionsError {
52864  constructor(context) {
52865    super('Failed to send a request to the Edge Function', 'FunctionsFetchError', context);
52866  }
52867
52868}
52869
52870exports.FunctionsFetchError = FunctionsFetchError;
52871
52872class FunctionsRelayError extends FunctionsError {
52873  constructor(context) {
52874    super('Relay Error invoking the Edge Function', 'FunctionsRelayError', context);
52875  }
52876
52877}
52878
52879exports.FunctionsRelayError = FunctionsRelayError;
52880
52881class FunctionsHttpError extends FunctionsError {
52882  constructor(context) {
52883    super('Edge Function returned a non-2xx status code', 'FunctionsHttpError', context);
52884  }
52885
52886} // Define the enum for the 'region' property
52887
52888
52889exports.FunctionsHttpError = FunctionsHttpError;
52890var FunctionRegion;
52891exports.FunctionRegion = FunctionRegion;
52892
52893(function (FunctionRegion) {
52894  FunctionRegion["Any"] = "any";
52895  FunctionRegion["ApNortheast1"] = "ap-northeast-1";
52896  FunctionRegion["ApNortheast2"] = "ap-northeast-2";
52897  FunctionRegion["ApSouth1"] = "ap-south-1";
52898  FunctionRegion["ApSoutheast1"] = "ap-southeast-1";
52899  FunctionRegion["ApSoutheast2"] = "ap-southeast-2";
52900  FunctionRegion["CaCentral1"] = "ca-central-1";
52901  FunctionRegion["EuCentral1"] = "eu-central-1";
52902  FunctionRegion["EuWest1"] = "eu-west-1";
52903  FunctionRegion["EuWest2"] = "eu-west-2";
52904  FunctionRegion["EuWest3"] = "eu-west-3";
52905  FunctionRegion["SaEast1"] = "sa-east-1";
52906  FunctionRegion["UsEast1"] = "us-east-1";
52907  FunctionRegion["UsWest1"] = "us-west-1";
52908  FunctionRegion["UsWest2"] = "us-west-2";
52909})(FunctionRegion || (exports.FunctionRegion = FunctionRegion = {}));
52910
52911},{}],405:[function(require,module,exports){
52912(function (global){(function (){
52913"use strict"; // ref: https://github.com/tc39/proposal-global
52914
52915Object.defineProperty(exports, "__esModule", {
52916  value: true
52917});
52918exports.fetch = exports.default = exports.Response = exports.Request = exports.Headers = void 0;
52919
52920var getGlobal = function () {
52921  // the only reliable means to get the global object is
52922  // `Function('return this')()`
52923  // However, this causes CSP violations in Chrome apps.
52924  if (typeof self !== 'undefined') {
52925    return self;
52926  }
52927
52928  if (typeof window !== 'undefined') {
52929    return window;
52930  }
52931
52932  if (typeof global !== 'undefined') {
52933    return global;
52934  }
52935
52936  throw new Error('unable to locate global object');
52937};
52938
52939var globalObject = getGlobal();
52940const fetch = globalObject.fetch;
52941exports.fetch = fetch;
52942
52943var _default = globalObject.fetch.bind(globalObject);
52944
52945exports.default = _default;
52946const Headers = globalObject.Headers;
52947exports.Headers = Headers;
52948const Request = globalObject.Request;
52949exports.Request = Request;
52950const Response = globalObject.Response;
52951exports.Response = Response;
52952
52953}).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
52954},{}],406:[function(require,module,exports){
52955"use strict";
52956
52957Object.defineProperty(exports, "__esModule", {
52958  value: true
52959});
52960exports.default = void 0;
52961
52962var _nodeFetch = _interopRequireDefault(require("@supabase/node-fetch"));
52963
52964var _PostgrestError = _interopRequireDefault(require("./PostgrestError"));
52965
52966function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
52967
52968// @ts-ignore
52969class PostgrestBuilder {
52970  constructor(builder) {
52971    this.shouldThrowOnError = false;

52972    this.method = builder.method;
52973    this.url = builder.url;
52974    this.headers = builder.headers;
52975    this.schema = builder.schema;
52976    this.body = builder.body;
52977    this.shouldThrowOnError = builder.shouldThrowOnError;
52978    this.signal = builder.signal;
52979    this.isMaybeSingle = builder.isMaybeSingle;
52980
52981    if (builder.fetch) {
52982      this.fetch = builder.fetch;
52983    } else if (typeof fetch === 'undefined') {
52984      this.fetch = _nodeFetch.default;
52985    } else {
52986      this.fetch = fetch;
52987    }
52988  }
52989  /**
52990   * If there's an error with the query, throwOnError will reject the promise by
52991   * throwing the error instead of returning it as part of a successful response.
52992   *
52993   * {@link https://github.com/supabase/supabase-js/issues/92}
52994   */
52995
52996
52997  throwOnError() {
52998    this.shouldThrowOnError = true;
52999    return this;
53000  }
53001
53002  then(onfulfilled, onrejected) {
53003    // https://postgrest.org/en/stable/api.html#switching-schemas
53004    if (this.schema === undefined) {// skip
53005    } else if (['GET', 'HEAD'].includes(this.method)) {
53006      this.headers['Accept-Profile'] = this.schema;
53007    } else {
53008      this.headers['Content-Profile'] = this.schema;
53009    }
53010
53011    if (this.method !== 'GET' && this.method !== 'HEAD') {
53012      this.headers['Content-Type'] = 'application/json';
53013    } // NOTE: Invoke w/o `this` to avoid illegal invocation error.
53014    // https://github.com/supabase/postgrest-js/pull/247
53015
53016
53017    const _fetch = this.fetch;
53018
53019    let res = _fetch(this.url.toString(), {
53020      method: this.method,
53021      headers: this.headers,
53022      body: JSON.stringify(this.body),
53023      signal: this.signal
53024    }).then(async res => {
53025      var _a, _b, _c;
53026
53027      let error = null;
53028      let data = null;
53029      let count = null;
53030      let status = res.status;
53031      let statusText = res.statusText;
53032
53033      if (res.ok) {
53034        if (this.method !== 'HEAD') {
53035          const body = await res.text();
53036
53037          if (body === '') {// Prefer: return=minimal
53038          } else if (this.headers['Accept'] === 'text/csv') {
53039            data = body;
53040          } else if (this.headers['Accept'] && this.headers['Accept'].includes('application/vnd.pgrst.plan+text')) {
53041            data = body;
53042          } else {
53043            data = JSON.parse(body);
53044          }
53045        }
53046
53047        const countHeader = (_a = this.headers['Prefer']) === null || _a === void 0 ? void 0 : _a.match(/count=(exact|planned|estimated)/);
53048        const contentRange = (_b = res.headers.get('content-range')) === null || _b === void 0 ? void 0 : _b.split('/');
53049
53050        if (countHeader && contentRange && contentRange.length > 1) {
53051          count = parseInt(contentRange[1]);
53052        } // Temporary partial fix for https://github.com/supabase/postgrest-js/issues/361
53053        // Issue persists e.g. for `.insert([...]).select().maybeSingle()`
53054
53055
53056        if (this.isMaybeSingle && this.method === 'GET' && Array.isArray(data)) {
53057          if (data.length > 1) {
53058            error = {
53059              // https://github.com/PostgREST/postgrest/blob/a867d79c42419af16c18c3fb019eba8df992626f/src/PostgREST/Error.hs#L553
53060              code: 'PGRST116',
53061              details: `Results contain ${data.length} rows, application/vnd.pgrst.object+json requires 1 row`,
53062              hint: null,
53063              message: 'JSON object requested, multiple (or no) rows returned'
53064            };
53065            data = null;
53066            count = null;
53067            status = 406;
53068            statusText = 'Not Acceptable';
53069          } else if (data.length === 1) {
53070            data = data[0];
53071          } else {
53072            data = null;
53073          }
53074        }
53075      } else {
53076        const body = await res.text();
53077
53078        try {
53079          error = JSON.parse(body); // Workaround for https://github.com/supabase/postgrest-js/issues/295
53080
53081          if (Array.isArray(error) && res.status === 404) {
53082            data = [];
53083            error = null;
53084            status = 200;
53085            statusText = 'OK';
53086          }
53087        } catch (_d) {
53088          // Workaround for https://github.com/supabase/postgrest-js/issues/295
53089          if (res.status === 404 && body === '') {
53090            status = 204;
53091            statusText = 'No Content';
53092          } else {
53093            error = {
53094              message: body
53095            };
53096          }
53097        }
53098
53099        if (error && this.isMaybeSingle && ((_c = error === null || error === void 0 ? void 0 : error.details) === null || _c === void 0 ? void 0 : _c.includes('0 rows'))) {
53100          error = null;
53101          status = 200;
53102          statusText = 'OK';
53103        }
53104
53105        if (error && this.shouldThrowOnError) {
53106          throw new _PostgrestError.default(error);
53107        }
53108      }
53109
53110      const postgrestResponse = {
53111        error,
53112        data,
53113        count,
53114        status,
53115        statusText
53116      };
53117      return postgrestResponse;
53118    });
53119
53120    if (!this.shouldThrowOnError) {
53121      res = res.catch(fetchError => {
53122        var _a, _b, _c;
53123
53124        return {
53125          error: {
53126            message: `${(_a = fetchError === null || fetchError === void 0 ? void 0 : fetchError.name) !== null && _a !== void 0 ? _a : 'FetchError'}: ${fetchError === null || fetchError === void 0 ? void 0 : fetchError.message}`,
53127            details: `${(_b = fetchError === null || fetchError === void 0 ? void 0 : fetchError.stack) !== null && _b !== void 0 ? _b : ''}`,
53128            hint: '',
53129            code: `${(_c = fetchError === null || fetchError === void 0 ? void 0 : fetchError.code) !== null && _c !== void 0 ? _c : ''}`
53130          },
53131          data: null,
53132          count: null,
53133          status: 0,
53134          statusText: ''
53135        };
53136      });
53137    }
53138
53139    return res.then(onfulfilled, onrejected);
53140  }
53141
53142}
53143
53144exports.default = PostgrestBuilder;
53145
53146},{"./PostgrestError":408,"@supabase/node-fetch":405}],407:[function(require,module,exports){
53147"use strict";
53148
53149Object.defineProperty(exports, "__esModule", {
53150  value: true
53151});
53152exports.default = void 0;
53153
53154var _PostgrestQueryBuilder = _interopRequireDefault(require("./PostgrestQueryBuilder"));
53155
53156var _PostgrestFilterBuilder = _interopRequireDefault(require("./PostgrestFilterBuilder"));
53157
53158var _constants = require("./constants");
53159
53160function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
53161
53162/**
53163 * PostgREST client.
53164 *
53165 * @typeParam Database - Types for the schema from the [type
53166 * generator](https://supabase.com/docs/reference/javascript/next/typescript-support)
53167 *
53168 * @typeParam SchemaName - Postgres schema to switch to. Must be a string
53169 * literal, the same one passed to the constructor. If the schema is not
53170 * `"public"`, this must be supplied manually.
53171 */
53172class PostgrestClient {
53173  // TODO: Add back shouldThrowOnError once we figure out the typings
53174
53175  /**
53176   * Creates a PostgREST client.
53177   *

53178   * @param url - URL of the PostgREST endpoint
53179   * @param options - Named parameters
53180   * @param options.headers - Custom headers
53181   * @param options.schema - Postgres schema to switch to
53182   * @param options.fetch - Custom fetch
53183   */
53184  constructor(url, {
53185    headers = {},
53186    schema,
53187    fetch
53188  } = {}) {
53189    this.url = url;
53190    this.headers = Object.assign(Object.assign({}, _constants.DEFAULT_HEADERS), headers);
53191    this.schemaName = schema;
53192    this.fetch = fetch;
53193  }
53194  /**
53195   * Perform a query on a table or a view.
53196   *
53197   * @param relation - The table or view name to query
53198   */
53199
53200
53201  from(relation) {
53202    const url = new URL(`${this.url}/${relation}`);
53203    return new _PostgrestQueryBuilder.default(url, {
53204      headers: Object.assign({}, this.headers),
53205      schema: this.schemaName,
53206      fetch: this.fetch
53207    });
53208  }
53209  /**
53210   * Select a schema to query or perform an function (rpc) call.
53211   *
53212   * The schema needs to be on the list of exposed schemas inside Supabase.
53213   *
53214   * @param schema - The schema to query
53215   */
53216
53217
53218  schema(schema) {
53219    return new PostgrestClient(this.url, {
53220      headers: this.headers,
53221      schema,
53222      fetch: this.fetch
53223    });
53224  }
53225  /**
53226   * Perform a function call.
53227   *
53228   * @param fn - The function name to call
53229   * @param args - The arguments to pass to the function call
53230   * @param options - Named parameters
53231   * @param options.head - When set to `true`, `data` will not be returned.
53232   * Useful if you only need the count.
53233   * @param options.get - When set to `true`, the function will be called with
53234   * read-only access mode.
53235   * @param options.count - Count algorithm to use to count rows returned by the
53236   * function. Only applicable for [set-returning
53237   * functions](https://www.postgresql.org/docs/current/functions-srf.html).
53238   *
53239   * `"exact"`: Exact but slow count algorithm. Performs a `COUNT(*)` under the
53240   * hood.
53241   *
53242   * `"planned"`: Approximated but fast count algorithm. Uses the Postgres
53243   * statistics under the hood.
53244   *
53245   * `"estimated"`: Uses exact count for low numbers and planned count for high
53246   * numbers.
53247   */
53248
53249
53250  rpc(fn, args = {}, {
53251    head = false,
53252    get = false,
53253    count
53254  } = {}) {
53255    let method;
53256    const url = new URL(`${this.url}/rpc/${fn}`);
53257    let body;
53258
53259    if (head || get) {
53260      method = head ? 'HEAD' : 'GET';
53261      Object.entries(args) // params with undefined value needs to be filtered out, otherwise it'll
53262      // show up as `?param=undefined`
53263      .filter(([_, value]) => value !== undefined) // array values need special syntax
53264      .map(([name, value]) => [name, Array.isArray(value) ? `{${value.join(',')}}` : `${value}`]).forEach(([name, value]) => {
53265        url.searchParams.append(name, value);
53266      });
53267    } else {
53268      method = 'POST';
53269      body = args;
53270    }
53271
53272    const headers = Object.assign({}, this.headers);
53273
53274    if (count) {
53275      headers['Prefer'] = `count=${count}`;
53276    }
53277
53278    return new _PostgrestFilterBuilder.default({
53279      method,
53280      url,
53281      headers,
53282      schema: this.schemaName,
53283      body,
53284      fetch: this.fetch,
53285      allowEmpty: false
53286    });
53287  }
53288
53289}
53290
53291exports.default = PostgrestClient;
53292
53293},{"./PostgrestFilterBuilder":409,"./PostgrestQueryBuilder":410,"./constants":412}],408:[function(require,module,exports){
53294"use strict";
53295
53296Object.defineProperty(exports, "__esModule", {
53297  value: true
53298});
53299exports.default = void 0;
53300
53301class PostgrestError extends Error {
53302  constructor(context) {
53303    super(context.message);
53304    this.name = 'PostgrestError';
53305    this.details = context.details;
53306    this.hint = context.hint;
53307    this.code = context.code;
53308  }
53309
53310}
53311
53312exports.default = PostgrestError;
53313
53314},{}],409:[function(require,module,exports){
53315"use strict";
53316
53317Object.defineProperty(exports, "__esModule", {
53318  value: true
53319});
53320exports.default = void 0;
53321
53322var _PostgrestTransformBuilder = _interopRequireDefault(require("./PostgrestTransformBuilder"));
53323
53324function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
53325
53326class PostgrestFilterBuilder extends _PostgrestTransformBuilder.default {
53327  /**
53328   * Match only rows where `column` is equal to `value`.
53329   *
53330   * To check if the value of `column` is NULL, you should use `.is()` instead.
53331   *
53332   * @param column - The column to filter on
53333   * @param value - The value to filter with
53334   */
53335  eq(column, value) {
53336    this.url.searchParams.append(column, `eq.${value}`);
53337    return this;
53338  }
53339  /**
53340   * Match only rows where `column` is not equal to `value`.
53341   *
53342   * @param column - The column to filter on
53343   * @param value - The value to filter with
53344   */
53345
53346
53347  neq(column, value) {
53348    this.url.searchParams.append(column, `neq.${value}`);
53349    return this;
53350  }
53351  /**
53352   * Match only rows where `column` is greater than `value`.
53353   *
53354   * @param column - The column to filter on
53355   * @param value - The value to filter with
53356   */
53357
53358
53359  gt(column, value) {
53360    this.url.searchParams.append(column, `gt.${value}`);
53361    return this;
53362  }
53363  /**
53364   * Match only rows where `column` is greater than or equal to `value`.
53365   *
53366   * @param column - The column to filter on
53367   * @param value - The value to filter with
53368   */
53369
53370
53371  gte(column, value) {
53372    this.url.searchParams.append(column, `gte.${value}`);
53373    return this;
53374  }
53375  /**
53376   * Match only rows where `column` is less than `value`.
53377   *
53378   * @param column - The column to filter on
53379   * @param value - The value to filter with
53380   */
53381
53382
53383  lt(column, value) {
53384    this.url.searchParams.append(column, `lt.${value}`);
53385    return this;
53386  }
53387  /**
53388   * Match only rows where `column` is less than or equal to `value`.
53389   *
53390   * @param column - The column to filter on
53391   * @param value - The value to filter with
53392   */
53393
53394
53395  lte(column, value) {
53396    this.url.searchParams.append(column, `lte.${value}`);
53397    return this;
53398  }
53399  /**
53400   * Match only rows where `column` matches `pattern` case-sensitively.
53401   *
53402   * @param column - The column to filter on
53403   * @param pattern - The pattern to match with
53404   */
53405
53406
53407  like(column, pattern) {
53408    this.url.searchParams.append(column, `like.${pattern}`);
53409    return this;
53410  }
53411  /**
53412   * Match only rows where `column` matches all of `patterns` case-sensitively.
53413   *
53414   * @param column - The column to filter on
53415   * @param patterns - The patterns to match with
53416   */
53417
53418
53419  likeAllOf(column, patterns) {
53420    this.url.searchParams.append(column, `like(all).{${patterns.join(',')}}`);
53421    return this;
53422  }
53423  /**
53424   * Match only rows where `column` matches any of `patterns` case-sensitively.
53425   *
53426   * @param column - The column to filter on
53427   * @param patterns - The patterns to match with
53428   */
53429
53430
53431  likeAnyOf(column, patterns) {
53432    this.url.searchParams.append(column, `like(any).{${patterns.join(',')}}`);
53433    return this;
53434  }
53435  /**
53436   * Match only rows where `column` matches `pattern` case-insensitively.
53437   *
53438   * @param column - The column to filter on
53439   * @param pattern - The pattern to match with
53440   */
53441
53442
53443  ilike(column, pattern) {
53444    this.url.searchParams.append(column, `ilike.${pattern}`);
53445    return this;
53446  }
53447  /**
53448   * Match only rows where `column` matches all of `patterns` case-insensitively.
53449   *
53450   * @param column - The column to filter on
53451   * @param patterns - The patterns to match with
53452   */
53453
53454
53455  ilikeAllOf(column, patterns) {
53456    this.url.searchParams.append(column, `ilike(all).{${patterns.join(',')}}`);
53457    return this;
53458  }
53459  /**
53460   * Match only rows where `column` matches any of `patterns` case-insensitively.
53461   *
53462   * @param column - The column to filter on
53463   * @param patterns - The patterns to match with
53464   */
53465
53466
53467  ilikeAnyOf(column, patterns) {
53468    this.url.searchParams.append(column, `ilike(any).{${patterns.join(',')}}`);
53469    return this;
53470  }
53471  /**
53472   * Match only rows where `column` IS `value`.
53473   *
53474   * For non-boolean columns, this is only relevant for checking if the value of
53475   * `column` is NULL by setting `value` to `null`.
53476   *
53477   * For boolean columns, you can also set `value` to `true` or `false` and it
53478   * will behave the same way as `.eq()`.
53479   *
53480   * @param column - The column to filter on
53481   * @param value - The value to filter with
53482   */
53483
53484
53485  is(column, value) {
53486    this.url.searchParams.append(column, `is.${value}`);
53487    return this;
53488  }
53489  /**
53490   * Match only rows where `column` is included in the `values` array.
53491   *
53492   * @param column - The column to filter on
53493   * @param values - The values array to filter with
53494   */
53495
53496
53497  in(column, values) {
53498    const cleanedValues = Array.from(new Set(values)).map(s => {
53499      // handle postgrest reserved characters
53500      // https://postgrest.org/en/v7.0.0/api.html#reserved-characters
53501      if (typeof s === 'string' && new RegExp('[,()]').test(s)) return `"${s}"`;else return `${s}`;
53502    }).join(',');
53503    this.url.searchParams.append(column, `in.(${cleanedValues})`);
53504    return this;
53505  }
53506  /**
53507   * Only relevant for jsonb, array, and range columns. Match only rows where
53508   * `column` contains every element appearing in `value`.
53509   *
53510   * @param column - The jsonb, array, or range column to filter on
53511   * @param value - The jsonb, array, or range value to filter with
53512   */
53513
53514
53515  contains(column, value) {
53516    if (typeof value === 'string') {
53517      // range types can be inclusive '[', ']' or exclusive '(', ')' so just
53518      // keep it simple and accept a string
53519      this.url.searchParams.append(column, `cs.${value}`);
53520    } else if (Array.isArray(value)) {
53521      // array
53522      this.url.searchParams.append(column, `cs.{${value.join(',')}}`);
53523    } else {
53524      // json
53525      this.url.searchParams.append(column, `cs.${JSON.stringify(value)}`);
53526    }
53527
53528    return this;
53529  }
53530  /**
53531   * Only relevant for jsonb, array, and range columns. Match only rows where
53532   * every element appearing in `column` is contained by `value`.
53533   *
53534   * @param column - The jsonb, array, or range column to filter on
53535   * @param value - The jsonb, array, or range value to filter with
53536   */
53537
53538
53539  containedBy(column, value) {
53540    if (typeof value === 'string') {
53541      // range
53542      this.url.searchParams.append(column, `cd.${value}`);
53543    } else if (Array.isArray(value)) {
53544      // array
53545      this.url.searchParams.append(column, `cd.{${value.join(',')}}`);
53546    } else {
53547      // json
53548      this.url.searchParams.append(column, `cd.${JSON.stringify(value)}`);
53549    }
53550
53551    return this;
53552  }
53553  /**
53554   * Only relevant for range columns. Match only rows where every element in
53555   * `column` is greater than any element in `range`.
53556   *
53557   * @param column - The range column to filter on
53558   * @param range - The range to filter with
53559   */
53560
53561
53562  rangeGt(column, range) {
53563    this.url.searchParams.append(column, `sr.${range}`);
53564    return this;
53565  }
53566  /**
53567   * Only relevant for range columns. Match only rows where every element in
53568   * `column` is either contained in `range` or greater than any element in
53569   * `range`.
53570   *
53571   * @param column - The range column to filter on
53572   * @param range - The range to filter with
53573   */
53574
53575
53576  rangeGte(column, range) {
53577    this.url.searchParams.append(column, `nxl.${range}`);
53578    return this;
53579  }
53580  /**
53581   * Only relevant for range columns. Match only rows where every element in
53582   * `column` is less than any element in `range`.
53583   *
53584   * @param column - The range column to filter on
53585   * @param range - The range to filter with
53586   */
53587
53588
53589  rangeLt(column, range) {
53590    this.url.searchParams.append(column, `sl.${range}`);
53591    return this;
53592  }
53593  /**
53594   * Only relevant for range columns. Match only rows where every element in
53595   * `column` is either contained in `range` or less than any element in
53596   * `range`.
53597   *
53598   * @param column - The range column to filter on
53599   * @param range - The range to filter with
53600   */
53601
53602
53603  rangeLte(column, range) {
53604    this.url.searchParams.append(column, `nxr.${range}`);
53605    return this;
53606  }
53607  /**
53608   * Only relevant for range columns. Match only rows where `column` is
53609   * mutually exclusive to `range` and there can be no element between the two
53610   * ranges.
53611   *
53612   * @param column - The range column to filter on
53613   * @param range - The range to filter with
53614   */
53615
53616
53617  rangeAdjacent(column, range) {
53618    this.url.searchParams.append(column, `adj.${range}`);
53619    return this;
53620  }
53621  /**
53622   * Only relevant for array and range columns. Match only rows where
53623   * `column` and `value` have an element in common.
53624   *
53625   * @param column - The array or range column to filter on
53626   * @param value - The array or range value to filter with
53627   */
53628
53629
53630  overlaps(column, value) {
53631    if (typeof value === 'string') {
53632      // range
53633      this.url.searchParams.append(column, `ov.${value}`);
53634    } else {
53635      // array
53636      this.url.searchParams.append(column, `ov.{${value.join(',')}}`);
53637    }
53638
53639    return this;
53640  }
53641  /**
53642   * Only relevant for text and tsvector columns. Match only rows where
53643   * `column` matches the query string in `query`.
53644   *
53645   * @param column - The text or tsvector column to filter on
53646   * @param query - The query text to match with

53647   * @param options - Named parameters
53648   * @param options.config - The text search configuration to use
53649   * @param options.type - Change how the `query` text is interpreted
53650   */
53651
53652
53653  textSearch(column, query, {
53654    config,
53655    type
53656  } = {}) {
53657    let typePart = '';
53658
53659    if (type === 'plain') {
53660      typePart = 'pl';
53661    } else if (type === 'phrase') {
53662      typePart = 'ph';
53663    } else if (type === 'websearch') {
53664      typePart = 'w';
53665    }
53666
53667    const configPart = config === undefined ? '' : `(${config})`;
53668    this.url.searchParams.append(column, `${typePart}fts${configPart}.${query}`);
53669    return this;
53670  }
53671  /**
53672   * Match only rows where each column in `query` keys is equal to its
53673   * associated value. Shorthand for multiple `.eq()`s.
53674   *
53675   * @param query - The object to filter with, with column names as keys mapped
53676   * to their filter values
53677   */
53678
53679
53680  match(query) {
53681    Object.entries(query).forEach(([column, value]) => {
53682      this.url.searchParams.append(column, `eq.${value}`);
53683    });
53684    return this;
53685  }
53686  /**
53687   * Match only rows which doesn't satisfy the filter.
53688   *
53689   * Unlike most filters, `opearator` and `value` are used as-is and need to
53690   * follow [PostgREST
53691   * syntax](https://postgrest.org/en/stable/api.html#operators). You also need
53692   * to make sure they are properly sanitized.
53693   *
53694   * @param column - The column to filter on
53695   * @param operator - The operator to be negated to filter with, following
53696   * PostgREST syntax
53697   * @param value - The value to filter with, following PostgREST syntax
53698   */
53699
53700
53701  not(column, operator, value) {
53702    this.url.searchParams.append(column, `not.${operator}.${value}`);
53703    return this;
53704  }
53705  /**
53706   * Match only rows which satisfy at least one of the filters.
53707   *
53708   * Unlike most filters, `filters` is used as-is and needs to follow [PostgREST
53709   * syntax](https://postgrest.org/en/stable/api.html#operators). You also need
53710   * to make sure it's properly sanitized.
53711   *
53712   * It's currently not possible to do an `.or()` filter across multiple tables.
53713   *
53714   * @param filters - The filters to use, following PostgREST syntax
53715   * @param options - Named parameters
53716   * @param options.referencedTable - Set this to filter on referenced tables
53717   * instead of the parent table
53718   * @param options.foreignTable - Deprecated, use `referencedTable` instead
53719   */
53720
53721
53722  or(filters, {
53723    foreignTable,
53724    referencedTable = foreignTable
53725  } = {}) {
53726    const key = referencedTable ? `${referencedTable}.or` : 'or';
53727    this.url.searchParams.append(key, `(${filters})`);
53728    return this;
53729  }
53730  /**
53731   * Match only rows which satisfy the filter. This is an escape hatch - you
53732   * should use the specific filter methods wherever possible.
53733   *
53734   * Unlike most filters, `opearator` and `value` are used as-is and need to
53735   * follow [PostgREST
53736   * syntax](https://postgrest.org/en/stable/api.html#operators). You also need
53737   * to make sure they are properly sanitized.
53738   *
53739   * @param column - The column to filter on
53740   * @param operator - The operator to filter with, following PostgREST syntax
53741   * @param value - The value to filter with, following PostgREST syntax
53742   */
53743
53744
53745  filter(column, operator, value) {
53746    this.url.searchParams.append(column, `${operator}.${value}`);
53747    return this;
53748  }
53749
53750}
53751
53752exports.default = PostgrestFilterBuilder;
53753
53754},{"./PostgrestTransformBuilder":411}],410:[function(require,module,exports){
53755"use strict";
53756
53757Object.defineProperty(exports, "__esModule", {
53758  value: true
53759});
53760exports.default = void 0;
53761
53762var _PostgrestFilterBuilder = _interopRequireDefault(require("./PostgrestFilterBuilder"));
53763
53764function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
53765
53766class PostgrestQueryBuilder {
53767  constructor(url, {
53768    headers = {},
53769    schema,
53770    fetch
53771  }) {
53772    this.url = url;
53773    this.headers = headers;
53774    this.schema = schema;
53775    this.fetch = fetch;
53776  }
53777  /**
53778   * Perform a SELECT query on the table or view.
53779   *
53780   * @param columns - The columns to retrieve, separated by commas. Columns can be renamed when returned with `customName:columnName`
53781   *

53782   * @param options - Named parameters
53783   *
53784   * @param options.head - When set to `true`, `data` will not be returned.
53785   * Useful if you only need the count.
53786   *
53787   * @param options.count - Count algorithm to use to count rows in the table or view.
53788   *
53789   * `"exact"`: Exact but slow count algorithm. Performs a `COUNT(*)` under the
53790   * hood.
53791   *
53792   * `"planned"`: Approximated but fast count algorithm. Uses the Postgres
53793   * statistics under the hood.
53794   *
53795   * `"estimated"`: Uses exact count for low numbers and planned count for high
53796   * numbers.
53797   */
53798
53799
53800  select(columns, {
53801    head = false,
53802    count
53803  } = {}) {
53804    const method = head ? 'HEAD' : 'GET'; // Remove whitespaces except when quoted
53805
53806    let quoted = false;
53807    const cleanedColumns = (columns !== null && columns !== void 0 ? columns : '*').split('').map(c => {
53808      if (/\s/.test(c) && !quoted) {
53809        return '';
53810      }
53811
53812      if (c === '"') {
53813        quoted = !quoted;
53814      }
53815
53816      return c;
53817    }).join('');
53818    this.url.searchParams.set('select', cleanedColumns);
53819
53820    if (count) {
53821      this.headers['Prefer'] = `count=${count}`;
53822    }
53823
53824    return new _PostgrestFilterBuilder.default({
53825      method,
53826      url: this.url,
53827      headers: this.headers,
53828      schema: this.schema,
53829      fetch: this.fetch,
53830      allowEmpty: false
53831    });
53832  }
53833  /**
53834   * Perform an INSERT into the table or view.
53835   *
53836   * By default, inserted rows are not returned. To return it, chain the call
53837   * with `.select()`.
53838   *
53839   * @param values - The values to insert. Pass an object to insert a single row
53840   * or an array to insert multiple rows.
53841   *
53842   * @param options - Named parameters
53843   *
53844   * @param options.count - Count algorithm to use to count inserted rows.
53845   *
53846   * `"exact"`: Exact but slow count algorithm. Performs a `COUNT(*)` under the
53847   * hood.
53848   *
53849   * `"planned"`: Approximated but fast count algorithm. Uses the Postgres
53850   * statistics under the hood.
53851   *
53852   * `"estimated"`: Uses exact count for low numbers and planned count for high
53853   * numbers.
53854   *
53855   * @param options.defaultToNull - Make missing fields default to `null`.
53856   * Otherwise, use the default value for the column. Only applies for bulk
53857   * inserts.
53858   */
53859
53860
53861  insert(values, {
53862    count,
53863    defaultToNull = true
53864  } = {}) {
53865    const method = 'POST';
53866    const prefersHeaders = [];
53867
53868    if (this.headers['Prefer']) {
53869      prefersHeaders.push(this.headers['Prefer']);
53870    }
53871
53872    if (count) {
53873      prefersHeaders.push(`count=${count}`);
53874    }
53875
53876    if (!defaultToNull) {
53877      prefersHeaders.push('missing=default');
53878    }
53879
53880    this.headers['Prefer'] = prefersHeaders.join(',');
53881
53882    if (Array.isArray(values)) {
53883      const columns = values.reduce((acc, x) => acc.concat(Object.keys(x)), []);
53884
53885      if (columns.length > 0) {
53886        const uniqueColumns = [...new Set(columns)].map(column => `"${column}"`);
53887        this.url.searchParams.set('columns', uniqueColumns.join(','));
53888      }
53889    }
53890
53891    return new _PostgrestFilterBuilder.default({
53892      method,
53893      url: this.url,
53894      headers: this.headers,
53895      schema: this.schema,
53896      body: values,
53897      fetch: this.fetch,
53898      allowEmpty: false
53899    });
53900  }
53901  /**
53902   * Perform an UPSERT on the table or view. Depending on the column(s) passed
53903   * to `onConflict`, `.upsert()` allows you to perform the equivalent of
53904   * `.insert()` if a row with the corresponding `onConflict` columns doesn't
53905   * exist, or if it does exist, perform an alternative action depending on
53906   * `ignoreDuplicates`.
53907   *
53908   * By default, upserted rows are not returned. To return it, chain the call
53909   * with `.select()`.
53910   *
53911   * @param values - The values to upsert with. Pass an object to upsert a
53912   * single row or an array to upsert multiple rows.
53913   *
53914   * @param options - Named parameters
53915   *
53916   * @param options.onConflict - Comma-separated UNIQUE column(s) to specify how
53917   * duplicate rows are determined. Two rows are duplicates if all the
53918   * `onConflict` columns are equal.
53919   *
53920   * @param options.ignoreDuplicates - If `true`, duplicate rows are ignored. If
53921   * `false`, duplicate rows are merged with existing rows.
53922   *
53923   * @param options.count - Count algorithm to use to count upserted rows.
53924   *
53925   * `"exact"`: Exact but slow count algorithm. Performs a `COUNT(*)` under the
53926   * hood.
53927   *
53928   * `"planned"`: Approximated but fast count algorithm. Uses the Postgres
53929   * statistics under the hood.
53930   *
53931   * `"estimated"`: Uses exact count for low numbers and planned count for high
53932   * numbers.
53933   *
53934   * @param options.defaultToNull - Make missing fields default to `null`.
53935   * Otherwise, use the default value for the column. This only applies when
53936   * inserting new rows, not when merging with existing rows under
53937   * `ignoreDuplicates: false`. This also only applies when doing bulk upserts.
53938   */
53939
53940
53941  upsert(values, {
53942    onConflict,
53943    ignoreDuplicates = false,
53944    count,
53945    defaultToNull = true
53946  } = {}) {
53947    const method = 'POST';
53948    const prefersHeaders = [`resolution=${ignoreDuplicates ? 'ignore' : 'merge'}-duplicates`];
53949    if (onConflict !== undefined) this.url.searchParams.set('on_conflict', onConflict);
53950
53951    if (this.headers['Prefer']) {
53952      prefersHeaders.push(this.headers['Prefer']);
53953    }
53954
53955    if (count) {
53956      prefersHeaders.push(`count=${count}`);
53957    }
53958
53959    if (!defaultToNull) {
53960      prefersHeaders.push('missing=default');
53961    }
53962
53963    this.headers['Prefer'] = prefersHeaders.join(',');
53964
53965    if (Array.isArray(values)) {
53966      const columns = values.reduce((acc, x) => acc.concat(Object.keys(x)), []);
53967
53968      if (columns.length > 0) {
53969        const uniqueColumns = [...new Set(columns)].map(column => `"${column}"`);
53970        this.url.searchParams.set('columns', uniqueColumns.join(','));
53971      }
53972    }
53973
53974    return new _PostgrestFilterBuilder.default({
53975      method,
53976      url: this.url,
53977      headers: this.headers,
53978      schema: this.schema,
53979      body: values,
53980      fetch: this.fetch,
53981      allowEmpty: false
53982    });
53983  }
53984  /**
53985   * Perform an UPDATE on the table or view.
53986   *
53987   * By default, updated rows are not returned. To return it, chain the call

53988   * with `.select()` after filters.
53989   *
53990   * @param values - The values to update with
53991   *
53992   * @param options - Named parameters
53993   *
53994   * @param options.count - Count algorithm to use to count updated rows.
53995   *
53996   * `"exact"`: Exact but slow count algorithm. Performs a `COUNT(*)` under the
53997   * hood.
53998   *
53999   * `"planned"`: Approximated but fast count algorithm. Uses the Postgres
54000   * statistics under the hood.
54001   *
54002   * `"estimated"`: Uses exact count for low numbers and planned count for high
54003   * numbers.
54004   */
54005
54006
54007  update(values, {
54008    count
54009  } = {}) {
54010    const method = 'PATCH';
54011    const prefersHeaders = [];
54012
54013    if (this.headers['Prefer']) {
54014      prefersHeaders.push(this.headers['Prefer']);
54015    }
54016
54017    if (count) {
54018      prefersHeaders.push(`count=${count}`);
54019    }
54020
54021    this.headers['Prefer'] = prefersHeaders.join(',');
54022    return new _PostgrestFilterBuilder.default({
54023      method,
54024      url: this.url,
54025      headers: this.headers,
54026      schema: this.schema,
54027      body: values,
54028      fetch: this.fetch,
54029      allowEmpty: false
54030    });
54031  }
54032  /**
54033   * Perform a DELETE on the table or view.
54034   *
54035   * By default, deleted rows are not returned. To return it, chain the call
54036   * with `.select()` after filters.
54037   *
54038   * @param options - Named parameters
54039   *
54040   * @param options.count - Count algorithm to use to count deleted rows.
54041   *
54042   * `"exact"`: Exact but slow count algorithm. Performs a `COUNT(*)` under the
54043   * hood.
54044   *
54045   * `"planned"`: Approximated but fast count algorithm. Uses the Postgres
54046   * statistics under the hood.
54047   *
54048   * `"estimated"`: Uses exact count for low numbers and planned count for high
54049   * numbers.
54050   */
54051
54052
54053  delete({
54054    count
54055  } = {}) {
54056    const method = 'DELETE';
54057    const prefersHeaders = [];
54058
54059    if (count) {
54060      prefersHeaders.push(`count=${count}`);
54061    }
54062
54063    if (this.headers['Prefer']) {
54064      prefersHeaders.unshift(this.headers['Prefer']);
54065    }
54066
54067    this.headers['Prefer'] = prefersHeaders.join(',');
54068    return new _PostgrestFilterBuilder.default({
54069      method,
54070      url: this.url,
54071      headers: this.headers,
54072      schema: this.schema,
54073      fetch: this.fetch,
54074      allowEmpty: false
54075    });
54076  }
54077
54078}
54079
54080exports.default = PostgrestQueryBuilder;
54081
54082},{"./PostgrestFilterBuilder":409}],411:[function(require,module,exports){
54083"use strict";
54084
54085Object.defineProperty(exports, "__esModule", {
54086  value: true
54087});
54088exports.default = void 0;
54089
54090var _PostgrestBuilder = _interopRequireDefault(require("./PostgrestBuilder"));
54091
54092function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
54093
54094class PostgrestTransformBuilder extends _PostgrestBuilder.default {
54095  /**
54096   * Perform a SELECT on the query result.
54097   *
54098   * By default, `.insert()`, `.update()`, `.upsert()`, and `.delete()` do not
54099   * return modified rows. By calling this method, modified rows are returned in
54100   * `data`.
54101   *
54102   * @param columns - The columns to retrieve, separated by commas
54103   */
54104  select(columns) {
54105    // Remove whitespaces except when quoted
54106    let quoted = false;
54107    const cleanedColumns = (columns !== null && columns !== void 0 ? columns : '*').split('').map(c => {
54108      if (/\s/.test(c) && !quoted) {
54109        return '';
54110      }
54111
54112      if (c === '"') {
54113        quoted = !quoted;
54114      }
54115
54116      return c;
54117    }).join('');
54118    this.url.searchParams.set('select', cleanedColumns);
54119
54120    if (this.headers['Prefer']) {
54121      this.headers['Prefer'] += ',';
54122    }
54123
54124    this.headers['Prefer'] += 'return=representation';
54125    return this;
54126  }
54127  /**
54128   * Order the query result by `column`.
54129   *
54130   * You can call this method multiple times to order by multiple columns.
54131   *
54132   * You can order referenced tables, but it only affects the ordering of the
54133   * parent table if you use `!inner` in the query.
54134   *
54135   * @param column - The column to order by
54136   * @param options - Named parameters
54137   * @param options.ascending - If `true`, the result will be in ascending order
54138   * @param options.nullsFirst - If `true`, `null`s appear first. If `false`,
54139   * `null`s appear last.
54140   * @param options.referencedTable - Set this to order a referenced table by
54141   * its columns
54142   * @param options.foreignTable - Deprecated, use `options.referencedTable`
54143   * instead
54144   */
54145
54146
54147  order(column, {
54148    ascending = true,
54149    nullsFirst,
54150    foreignTable,
54151    referencedTable = foreignTable
54152  } = {}) {

54153    const key = referencedTable ? `${referencedTable}.order` : 'order';
54154    const existingOrder = this.url.searchParams.get(key);
54155    this.url.searchParams.set(key, `${existingOrder ? `${existingOrder},` : ''}${column}.${ascending ? 'asc' : 'desc'}${nullsFirst === undefined ? '' : nullsFirst ? '.nullsfirst' : '.nullslast'}`);
54156    return this;
54157  }
54158  /**
54159   * Limit the query result by `count`.
54160   *
54161   * @param count - The maximum number of rows to return
54162   * @param options - Named parameters
54163   * @param options.referencedTable - Set this to limit rows of referenced
54164   * tables instead of the parent table
54165   * @param options.foreignTable - Deprecated, use `options.referencedTable`
54166   * instead
54167   */
54168
54169
54170  limit(count, {
54171    foreignTable,
54172    referencedTable = foreignTable
54173  } = {}) {
54174    const key = typeof referencedTable === 'undefined' ? 'limit' : `${referencedTable}.limit`;
54175    this.url.searchParams.set(key, `${count}`);
54176    return this;
54177  }
54178  /**
54179   * Limit the query result by starting at an offset (`from`) and ending at the offset (`from + to`).
54180   * Only records within this range are returned.
54181   * This respects the query order and if there is no order clause the range could behave unexpectedly.
54182   * The `from` and `to` values are 0-based and inclusive: `range(1, 3)` will include the second, third
54183   * and fourth rows of the query.
54184   *
54185   * @param from - The starting index from which to limit the result
54186   * @param to - The last index to which to limit the result
54187   * @param options - Named parameters
54188   * @param options.referencedTable - Set this to limit rows of referenced
54189   * tables instead of the parent table
54190   * @param options.foreignTable - Deprecated, use `options.referencedTable`
54191   * instead
54192   */
54193
54194
54195  range(from, to, {
54196    foreignTable,
54197    referencedTable = foreignTable
54198  } = {}) {
54199    const keyOffset = typeof referencedTable === 'undefined' ? 'offset' : `${referencedTable}.offset`;
54200    const keyLimit = typeof referencedTable === 'undefined' ? 'limit' : `${referencedTable}.limit`;
54201    this.url.searchParams.set(keyOffset, `${from}`); // Range is inclusive, so add 1
54202
54203    this.url.searchParams.set(keyLimit, `${to - from + 1}`);
54204    return this;
54205  }
54206  /**
54207   * Set the AbortSignal for the fetch request.
54208   *
54209   * @param signal - The AbortSignal to use for the fetch request
54210   */
54211
54212
54213  abortSignal(signal) {
54214    this.signal = signal;
54215    return this;
54216  }
54217  /**
54218   * Return `data` as a single object instead of an array of objects.
54219   *
54220   * Query result must be one row (e.g. using `.limit(1)`), otherwise this
54221   * returns an error.
54222   */
54223
54224
54225  single() {
54226    this.headers['Accept'] = 'application/vnd.pgrst.object+json';
54227    return this;
54228  }
54229  /**
54230   * Return `data` as a single object instead of an array of objects.
54231   *
54232   * Query result must be zero or one row (e.g. using `.limit(1)`), otherwise
54233   * this returns an error.
54234   */
54235
54236
54237  maybeSingle() {
54238    // Temporary partial fix for https://github.com/supabase/postgrest-js/issues/361
54239    // Issue persists e.g. for `.insert([...]).select().maybeSingle()`
54240    if (this.method === 'GET') {
54241      this.headers['Accept'] = 'application/json';
54242    } else {
54243      this.headers['Accept'] = 'application/vnd.pgrst.object+json';
54244    }
54245
54246    this.isMaybeSingle = true;
54247    return this;
54248  }
54249  /**
54250   * Return `data` as a string in CSV format.
54251   */
54252
54253
54254  csv() {
54255    this.headers['Accept'] = 'text/csv';
54256    return this;
54257  }
54258  /**
54259   * Return `data` as an object in [GeoJSON](https://geojson.org) format.
54260   */
54261
54262
54263  geojson() {
54264    this.headers['Accept'] = 'application/geo+json';
54265    return this;
54266  }
54267  /**
54268   * Return `data` as the EXPLAIN plan for the query.
54269   *
54270   * You need to enable the
54271   * [db_plan_enabled](https://supabase.com/docs/guides/database/debugging-performance#enabling-explain)
54272   * setting before using this method.
54273   *
54274   * @param options - Named parameters
54275   *
54276   * @param options.analyze - If `true`, the query will be executed and the
54277   * actual run time will be returned
54278   *
54279   * @param options.verbose - If `true`, the query identifier will be returned
54280   * and `data` will include the output columns of the query
54281   *
54282   * @param options.settings - If `true`, include information on configuration
54283   * parameters that affect query planning
54284   *
54285   * @param options.buffers - If `true`, include information on buffer usage
54286   *
54287   * @param options.wal - If `true`, include information on WAL record generation
54288   *
54289   * @param options.format - The format of the output, can be `"text"` (default)
54290   * or `"json"`
54291   */
54292
54293
54294  explain({
54295    analyze = false,
54296    verbose = false,
54297    settings = false,
54298    buffers = false,
54299    wal = false,
54300    format = 'text'
54301  }

54301 = {}) {
54302    var _a;
54303
54304    const options = [analyze ? 'analyze' : null, verbose ? 'verbose' : null, settings ? 'settings' : null, buffers ? 'buffers' : null, wal ? 'wal' : null].filter(Boolean).join('|'); // An Accept header can carry multiple media types but postgrest-js always sends one
54305
54306    const forMediatype = (_a = this.headers['Accept']) !== null && _a !== void 0 ? _a : 'application/json';
54307    this.headers['Accept'] = `application/vnd.pgrst.plan+${format}; for="${forMediatype}"; options=${options};`;
54308    if (format === 'json') return this;else return this;
54309  }
54310  /**
54311   * Rollback the query.
54312   *
54313   * `data` will still be returned, but the query is not committed.
54314   */
54315
54316
54317  rollback() {
54318    var _a;
54319
54320    if (((_a = this.headers['Prefer']) !== null && _a !== void 0 ? _a : '').trim().length > 0) {
54321      this.headers['Prefer'] += ',tx=rollback';
54322    } else {
54323      this.headers['Prefer'] = 'tx=rollback';
54324    }
54325
54326    return this;
54327  }
54328  /**
54329   * Override the type of the returned `data`.
54330   *
54331   * @typeParam NewResult - The new result type to override with
54332   */
54333
54334
54335  returns() {
54336    return this;
54337  }
54338
54339}
54340
54341exports.default = PostgrestTransformBuilder;
54342
54343},{"./PostgrestBuilder":406}],412:[function(require,module,exports){
54344"use strict";
54345
54346Object.defineProperty(exports, "__esModule", {
54347  value: true
54348});
54349exports.DEFAULT_HEADERS = void 0;
54350
54351var _version = require("./version");
54352
54353const DEFAULT_HEADERS = {
54354  'X-Client-Info': `postgrest-js/${_version.version}`
54355};
54356exports.DEFAULT_HEADERS = DEFAULT_HEADERS;
54357
54358},{"./version":414}],413:[function(require,module,exports){
54359"use strict";
54360
54361Object.defineProperty(exports, "__esModule", {
54362  value: true
54363});
54364Object.defineProperty(exports, "PostgrestBuilder", {
54365  enumerable: true,
54366  get: function () {
54367    return _PostgrestBuilder.default;
54368  }
54369});
54370Object.defineProperty(exports, "PostgrestClient", {
54371  enumerable: true,
54372  get: function () {
54373    return _PostgrestClient.default;
54374  }
54375});
54376Object.defineProperty(exports, "PostgrestFilterBuilder", {
54377  enumerable: true,
54378  get: function () {
54379    return _PostgrestFilterBuilder.default;
54380  }
54381});
54382Object.defineProperty(exports, "PostgrestQueryBuilder", {
54383  enumerable: true,
54384  get: function () {
54385    return _PostgrestQueryBuilder.default;
54386  }
54387});
54388Object.defineProperty(exports, "PostgrestTransformBuilder", {
54389  enumerable: true,
54390  get: function () {
54391    return _PostgrestTransformBuilder.default;
54392  }
54393});
54394
54395var _PostgrestClient = _interopRequireDefault(require("./PostgrestClient"));
54396
54397var _PostgrestQueryBuilder = _interopRequireDefault(require("./PostgrestQueryBuilder"));
54398
54399var _PostgrestFilterBuilder = _interopRequireDefault(require("./PostgrestFilterBuilder"));
54400
54401var _PostgrestTransformBuilder = _interopRequireDefault(require("./PostgrestTransformBuilder"));
54402
54403var _PostgrestBuilder = _interopRequireDefault(require("./PostgrestBuilder"));
54404
54405function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
54406
54407},{"./PostgrestBuilder":406,"./PostgrestClient":407,"./PostgrestFilterBuilder":409,"./PostgrestQueryBuilder":410,"./PostgrestTransformBuilder":411}],414:[function(require,module,exports){
54408"use strict";
54409
54410Object.defineProperty(exports, "__esModule", {
54411  value: true
54412});
54413exports.version = void 0;
54414const version = '1.15.2';
54415exports.version = version;
54416
54417},{}],415:[function(require,module,exports){
54418"use strict";
54419
54420Object.defineProperty(exports, "__esModule", {
54421  value: true
54422});
54423exports.default = exports.REALTIME_SUBSCRIBE_STATES = exports.REALTIME_POSTGRES_CHANGES_LISTEN_EVENT = exports.REALTIME_LISTEN_TYPES = exports.REALTIME_CHANNEL_STATES = void 0;
54424
54425var _constants = require("./lib/constants");
54426
54427var _push = _interopRequireDefault(require("./lib/push"));
54428
54429var _timer = _interopRequireDefault(require("./lib/timer"));
54430
54431var _RealtimePresence = _interopRequireDefault(require("./RealtimePresence"));
54432
54433var Transformers = _interopRequireWildcard(require("./lib/transformers"));
54434
54435function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
54436
54437function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;

54437 if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
54438
54439function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
54440
54441var REALTIME_POSTGRES_CHANGES_LISTEN_EVENT;
54442exports.REALTIME_POSTGRES_CHANGES_LISTEN_EVENT = REALTIME_POSTGRES_CHANGES_LISTEN_EVENT;
54443
54444(function (REALTIME_POSTGRES_CHANGES_LISTEN_EVENT) {
54445  REALTIME_POSTGRES_CHANGES_LISTEN_EVENT["ALL"] = "*";
54446  REALTIME_POSTGRES_CHANGES_LISTEN_EVENT["INSERT"] = "INSERT";
54447  REALTIME_POSTGRES_CHANGES_LISTEN_EVENT["UPDATE"] = "UPDATE";
54448  REALTIME_POSTGRES_CHANGES_LISTEN_EVENT["DELETE"] = "DELETE";
54449})(REALTIME_POSTGRES_CHANGES_LISTEN_EVENT || (exports.REALTIME_POSTGRES_CHANGES_LISTEN_EVENT = REALTIME_POSTGRES_CHANGES_LISTEN_EVENT = {}));
54450
54451var REALTIME_LISTEN_TYPES;
54452exports.REALTIME_LISTEN_TYPES = REALTIME_LISTEN_TYPES;
54453
54454(function (REALTIME_LISTEN_TYPES) {
54455  REALTIME_LISTEN_TYPES["BROADCAST"] = "broadcast";
54456  REALTIME_LISTEN_TYPES["PRESENCE"] = "presence";
54457  /**
54458   * listen to Postgres changes.
54459   */
54460
54461  REALTIME_LISTEN_TYPES["POSTGRES_CHANGES"] = "postgres_changes";
54462})(REALTIME_LISTEN_TYPES || (exports.REALTIME_LISTEN_TYPES = REALTIME_LISTEN_TYPES = {}));
54463
54464var REALTIME_SUBSCRIBE_STATES;
54465exports.REALTIME_SUBSCRIBE_STATES = REALTIME_SUBSCRIBE_STATES;
54466
54467(function (REALTIME_SUBSCRIBE_STATES) {
54468  REALTIME_SUBSCRIBE_STATES["SUBSCRIBED"] = "SUBSCRIBED";
54469  REALTIME_SUBSCRIBE_STATES["TIMED_OUT"] = "TIMED_OUT";
54470  REALTIME_SUBSCRIBE_STATES["CLOSED"] = "CLOSED";
54471  REALTIME_SUBSCRIBE_STATES["CHANNEL_ERROR"] = "CHANNEL_ERROR";
54472})(REALTIME_SUBSCRIBE_STATES || (exports.REALTIME_SUBSCRIBE_STATES = REALTIME_SUBSCRIBE_STATES = {}));
54473
54474const REALTIME_CHANNEL_STATES = _constants.CHANNEL_STATES;
54475/** A channel is the basic building block of Realtime
54476 * and narrows the scope of data flow to subscribed clients.
54477 * You can think of a channel as a chatroom where participants are able to see who's online
54478 * and send and receive messages.
54479 */
54480
54481exports.REALTIME_CHANNEL_STATES = REALTIME_CHANNEL_STATES;
54482
54483class RealtimeChannel {
54484  constructor(
54485  /** Topic name can be any string. */
54486  topic, params = {
54487    config: {}
54488  }, socket) {
54489    this.topic = topic;
54490    this.params = params;
54491    this.socket = socket;
54492    this.bindings = {};
54493    this.state = _constants.CHANNEL_STATES.closed;
54494    this.joinedOnce = false;
54495    this.pushBuffer = [];
54496    this.subTopic = topic.replace(/^realtime:/i, '');
54497    this.params.config = Object.assign({
54498      broadcast: {
54499        ack: false,
54500        self: false
54501      },
54502      presence: {
54503        key: ''
54504      }
54505    }, params.config);
54506    this.timeout = this.socket.timeout;
54507    this.joinPush = new _push.default(this, _constants.CHANNEL_EVENTS.join, this.params, this.timeout);
54508    this.rejoinTimer = new _timer.default(() => this._rejoinUntilConnected(), this.socket.reconnectAfterMs);
54509    this.joinPush.receive('ok', () => {
54510      this.state = _constants.CHANNEL_STATES.joined;
54511      this.rejoinTimer.reset();
54512      this.pushBuffer.forEach(pushEvent => pushEvent.send());
54513      this.pushBuffer = [];
54514    });
54515
54516    this._onClose(() => {
54517      this.rejoinTimer.reset();
54518      this.socket.log('channel', `close ${this.topic} ${this._joinRef()}`);
54519      this.state = _constants.CHANNEL_STATES.closed;
54520
54521      this.socket._remove(this);
54522    });
54523
54524    this._onError(reason => {
54525      if (this._isLeaving() || this._isClosed()) {
54526        return;
54527      }
54528
54529      this.socket.log('channel', `error ${this.topic}`, reason);
54530      this.state = _constants.CHANNEL_STATES.errored;
54531      this.rejoinTimer.scheduleTimeout();
54532    });
54533
54534    this.joinPush.receive('timeout', () => {
54535      if (!this._isJoining()) {
54536        return;
54537      }
54538
54539      this.socket.log('channel', `timeout ${this.topic}`, this.joinPush.timeout);
54540      this.state = _constants.CHANNEL_STATES.errored;
54541      this.rejoinTimer.scheduleTimeout();
54542    });
54543
54544    this._on(_constants.CHANNEL_EVENTS.reply, {}, (payload, ref) => {
54545      this._trigger(this._replyEventName(ref), payload);
54546    });
54547
54548    this.presence = new _RealtimePresence.default(this);
54549    this.broadcastEndpointURL = this._broadcastEndpointURL();
54550  }
54551  /** Subscribe registers your client with the server */
54552
54553
54554  subscribe(callback, timeout = this.timeout) {
54555    var _a, _b;
54556
54557    if (!this.socket.isConnected()) {
54558      this.socket.connect();
54559    }
54560
54561    if (this.joinedOnce) {
54562      throw `tried to subscribe multiple times. 'subscribe' can only be called a single time per channel instance`;
54563    } else {
54564      const {
54565        config: {
54566          broadcast,
54567          presence
54568        }
54569      } = this.params;
54570
54571      this._onError(e => callback && callback('CHANNEL_ERROR', e));
54572
54573      this._onClose(() => callback && callback('CLOSED'));
54574
54575      const accessTokenPayload = {};
54576      const config = {
54577        broadcast,
54578        presence,
54579        postgres_changes: (_b = (_a = this.bindings.postgres_changes) === null || _a === void 0 ? void 0 : _a.map(r => r.filter)) !== null && _b !== void 0 ? _b : []
54580      };
54581
54582      if (this.socket.accessToken) {
54583        accessTokenPayload.access_token = this.socket.accessToken;
54584      }
54585
54586      this.updateJoinPayload(Object.assign({
54587        config
54588      }, accessTokenPayload));
54589      this.joinedOnce = true;
54590
54591      this._rejoin(timeout);
54592
54593      this.joinPush.receive('ok', ({
54594        postgres_changes: serverPostgresFilters
54595      }) => {
54596        var _a;
54597
54598        this.socket.accessToken && this.socket.setAuth(this.socket.accessToken);
54599
54600        if (serverPostgresFilters === undefined) {
54601          callback && callback('SUBSCRIBED');
54602          return;
54603        } else {
54604          const clientPostgresBindings = this.bindings.postgres_changes;
54605          const bindingsLen = (_a = clientPostgresBindings === null || clientPostgresBindings === void 0 ? void 0 : clientPostgresBindings.length) !== null && _a !== void 0 ? _a : 0;
54606          const newPostgresBindings = [];
54607
54608          for (let i = 0; i < bindingsLen; i++) {
54609            const clientPostgresBinding = clientPostgresBindings[i];
54610            const {
54611              filter: {
54612                event,
54613                schema,
54614                table,
54615                filter
54616              }
54617            } = clientPostgresBinding;
54618            const serverPostgresFilter = serverPostgresFilters && serverPostgresFilters[i];
54619
54620            if (serverPostgresFilter && serverPostgresFilter.event === event && serverPostgresFilter.sc

54620hema === schema && serverPostgresFilter.table === table && serverPostgresFilter.filter === filter) {
54621              newPostgresBindings.push(Object.assign(Object.assign({}, clientPostgresBinding), {
54622                id: serverPostgresFilter.id
54623              }));
54624            } else {
54625              this.unsubscribe();
54626              callback && callback('CHANNEL_ERROR', new Error('mismatch between server and client bindings for postgres changes'));
54627              return;
54628            }
54629          }
54630
54631          this.bindings.postgres_changes = newPostgresBindings;
54632          callback && callback('SUBSCRIBED');
54633          return;
54634        }
54635      }).receive('error', error => {
54636        callback && callback('CHANNEL_ERROR', new Error(JSON.stringify(Object.values(error).join(', ') || 'error')));
54637        return;
54638      }).receive('timeout', () => {
54639        callback && callback('TIMED_OUT');
54640        return;
54641      });
54642    }
54643
54644    return this;
54645  }
54646
54647  presenceState() {
54648    return this.presence.state;
54649  }
54650
54651  async track(payload, opts = {}) {
54652    return await this.send({
54653      type: 'presence',
54654      event: 'track',
54655      payload
54656    }, opts.timeout || this.timeout);
54657  }
54658
54659  async untrack(opts = {}) {
54660    return await this.send({
54661      type: 'presence',
54662      event: 'untrack'
54663    }, opts);
54664  }
54665
54666  on(type, filter, callback) {
54667    return this._on(type, filter, callback);
54668  }
54669  /**
54670   * Sends a message into the channel.
54671   *
54672   * @param args Arguments to send to channel
54673   * @param args.type The type of event to send
54674   * @param args.event The name of the event being sent
54675   * @param args.payload Payload to be sent
54676   * @param opts Options to be used during the send process
54677   */
54678
54679
54680  async send(args, opts = {}) {
54681    var _a, _b;
54682
54683    if (!this._canPush() && args.type === 'broadcast') {
54684      const {
54685        event,
54686        payload: endpoint_payload
54687      } = args;
54688      const options = {
54689        method: 'POST',
54690        headers: {
54691          apikey: (_a = this.socket.apiKey) !== null && _a !== void 0 ? _a : '',
54692          'Content-Type': 'application/json'
54693        },
54694        body: JSON.stringify({
54695          messages: [{
54696            topic: this.subTopic,
54697            event,
54698            payload: endpoint_payload
54699          }]
54700        })
54701      };
54702
54703      try {
54704        const response = await this._fetchWithTimeout(this.broadcastEndpointURL, options, (_b = opts.timeout) !== null && _b !== void 0 ? _b : this.timeout);
54705
54706        if (response.ok) {
54707          return 'ok';
54708        } else {
54709          return 'error';
54710        }
54711      } catch (error) {
54712        if (error.name === 'AbortError') {
54713          return 'timed out';
54714        } else {
54715          return 'error';
54716        }
54717      }
54718    } else {
54719      return new Promise(resolve => {
54720        var _a, _b, _c;
54721
54722        const push = this._push(args.type, args, opts.timeout || this.timeout);
54723
54724        if (args.type === 'broadcast' && !((_c = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.broadcast) === null || _c === void 0 ? void 0 : _c.ack)) {
54725          resolve('ok');
54726        }
54727
54728        push.receive('ok', () => resolve('ok'));
54729        push.receive('error', () => resolve('error'));
54730        push.receive('timeout', () => resolve('timed out'));
54731      });
54732    }
54733  }
54734
54735  updateJoinPayload(payload) {
54736    this.joinPush.updatePayload(payload);
54737  }
54738  /**
54739   * Leaves the channel.
54740   *
54741   * Unsubscribes from server events, and instructs channel to terminate on server.
54742   * Triggers onClose() hooks.
54743   *
54744   * To receive leave acknowledgements, use the a `receive` hook to bind to the server ack, ie:
54745   * channel.unsubscribe().receive("ok", () => alert("left!") )
54746   */
54747
54748
54749  unsubscribe(timeout = this.timeout) {
54750    this.state = _constants.CHANNEL_STATES.leaving;
54751
54752    const onClose = () => {
54753      this.socket.log('channel', `leave ${this.topic}`);
54754
54755      this._trigger(_constants.CHANNEL_EVENTS.close, 'leave', this._joinRef());
54756    };
54757
54758    this.rejoinTimer.reset(); // Destroy joinPush to avoid connection timeouts during unscription phase
54759
54760    this.joinPush.destroy();
54761    return new Promise(resolve => {

54762      const leavePush = new _push.default(this, _constants.CHANNEL_EVENTS.leave, {}, timeout);
54763      leavePush.receive('ok', () => {
54764        onClose();
54765        resolve('ok');
54766      }).receive('timeout', () => {
54767        onClose();
54768        resolve('timed out');
54769      }).receive('error', () => {
54770        resolve('error');
54771      });
54772      leavePush.send();
54773
54774      if (!this._canPush()) {
54775        leavePush.trigger('ok', {});
54776      }
54777    });
54778  }
54779  /** @internal */
54780
54781
54782  _broadcastEndpointURL() {
54783    let url = this.socket.endPoint;
54784    url = url.replace(/^ws/i, 'http');
54785    url = url.replace(/(\/socket\/websocket|\/socket|\/websocket)\/?$/i, '');
54786    return url.replace(/\/+$/, '') + '/api/broadcast';
54787  }
54788
54789  async _fetchWithTimeout(url, options, timeout) {
54790    const controller = new AbortController();
54791    const id = setTimeout(() => controller.abort(), timeout);
54792    const response = await this.socket.fetch(url, Object.assign(Object.assign({}, options), {
54793      signal: controller.signal
54794    }));
54795    clearTimeout(id);
54796    return response;
54797  }
54798  /** @internal */
54799
54800
54801  _push(event, payload, timeout = this.timeout) {
54802    if (!this.joinedOnce) {
54803      throw `tried to push '${event}' to '${this.topic}' before joining. Use channel.subscribe() before pushing events`;
54804    }
54805
54806    let pushEvent = new _push.default(this, event, payload, timeout);
54807
54808    if (this._canPush()) {
54809      pushEvent.send();
54810    } else {
54811      pushEvent.startTimeout();
54812      this.pushBuffer.push(pushEvent);
54813    }
54814
54815    return pushEvent;
54816  }
54817  /**
54818   * Overridable message hook
54819   *
54820   * Receives all events for specialized message handling before dispatching to the channel callbacks.
54821   * Must return the payload, modified or unmodified.
54822   *
54823   * @internal
54824   */
54825
54826
54827  _onMessage(_event, payload, _ref) {
54828    return payload;
54829  }
54830  /** @internal */
54831
54832
54833  _isMember(topic) {
54834    return this.topic === topic;
54835  }
54836  /** @internal */
54837
54838
54839  _joinRef() {
54840    return this.joinPush.ref;
54841  }
54842  /** @internal */
54843
54844
54845  _trigger(type, payload, ref) {
54846    var _a, _b;
54847
54848    const typeLower = type.toLocaleLowerCase();
54849    const {
54850      close,
54851      error,
54852      leave,
54853      join
54854    } = _constants.CHANNEL_EVENTS;
54855    const events = [close, error, leave, join];
54856
54857    if (ref && events.indexOf(typeLower) >= 0 && ref !== this._joinRef()) {
54858      return;
54859    }
54860
54861    let handledPayload = this._onMessage(typeLower, payload, ref);
54862
54863    if (payload && !handledPayload) {
54864      throw 'channel onMessage callbacks must return the payload, modified or unmodified';
54865    }
54866
54867    if (['insert', 'update', 'delete'].includes(typeLower)) {
54868      (_a = this.bindings.postgres_changes) === null || _a === void 0 ? void 0 : _a.filter(bind => {
54869        var _a, _b, _c;
54870
54871        return ((_a = bind.filter) === null || _a === void 0 ? void 0 : _a.event) === '*' || ((_c = (_b = bind.filter) === null || _b === void 0 ? void 0 : _b.event) === null || _c === void 0 ? void 0 : _c.toLocaleLowerCase()) === typeLower;
54872      }).map(bind => bind.callback(handledPayload, ref));
54873    } else {
54874      (_b = this.bindings[typeLower]) === null || _b === void 0 ? void 0 : _b.filter(bind => {
54875        var _a, _b, _c, _d, _e, _f;
54876
54877        if (['broadcast', 'presence', 'postgres_changes'].includes(typeLower)) {
54878          if ('id' in bind) {
54879            const bindId = bind.id;
54880            const bindEvent = (_a = bind.filter) === null || _a === void 0 ? void 0 : _a.event;
54881            return bindId && ((_b = payload.ids) === null || _b === void 0 ? void 0 : _b.includes(bindId)) && (bindEvent === '*' || (bindEvent === null || bindEvent === void 0 ? void 0 : bindEvent.toLocaleLowerCase()) === ((_c = payload.data) === null || _c === void 0 ? void 0 : _c.type.toLocaleLowerCase()));
54882          } else {
54883            const bindEvent = (_e = (_d = bind === null || bind === void 0 ? void 0 : bind.filter) === null || _d === void 0 ? void 0 : _d.event) === null || _e === void 0 ? void 0 : _e.toLocaleLowerCase();
54884            return bindEvent === '*' || bindEvent === ((_f = payload === null || payload === void 0 ? void 0 : payload.event) === null || _f === void 0 ? void 0 : _f.toLocaleLowerCase());
54885          }
54886        } else {
54887          return bind.type.toLocaleLowerCase() === typeLower;
54888        }
54889      }).map(bind => {
54890        if (typeof handledPayload === 'object' && 'ids' in handledPayload) {
54891          const postgresChanges = handledPayload.data;
54892          const {
54893            schema,
54894            table,
54895            commit_timestamp,
54896            type,
54897            errors
54898          } = postgresChanges;
54899          const enrichedPayload = {
54900            schema: schema,
54901            table: table,
54902            commit_timestamp: commit_timestamp,
54903            eventType: type,
54904            new: {},
54905            old: {},
54906            errors: errors
54907          };
54908          handledPayload = Object.assign(Object.assign({}, enrichedPayload), this._getPayloadRecords(postgresChanges));
54909        }
54910
54911        bind.callback(handledPayload, ref);
54912      });
54913    }
54914  }
54915  /** @internal */
54916
54917
54918  _isClosed() {

54919    return this.state === _constants.CHANNEL_STATES.closed;
54920  }
54921  /** @internal */
54922
54923
54924  _isJoined() {
54925    return this.state === _constants.CHANNEL_STATES.joined;
54926  }
54927  /** @internal */
54928
54929
54930  _isJoining() {
54931    return this.state === _constants.CHANNEL_STATES.joining;
54932  }
54933  /** @internal */
54934
54935
54936  _isLeaving() {
54937    return this.state === _constants.CHANNEL_STATES.leaving;
54938  }
54939  /** @internal */
54940
54941
54942  _replyEventName(ref) {
54943    return `chan_reply_${ref}`;
54944  }
54945  /** @internal */
54946
54947
54948  _on(type, filter, callback) {
54949    const typeLower = type.toLocaleLowerCase();
54950    const binding = {
54951      type: typeLower,
54952      filter: filter,
54953      callback: callback
54954    };
54955
54956    if (this.bindings[typeLower]) {
54957      this.bindings[typeLower].push(binding);
54958    } else {
54959      this.bindings[typeLower] = [binding];
54960    }
54961
54962    return this;
54963  }
54964  /** @internal */
54965
54966
54967  _off(type, filter) {
54968    const typeLower = type.toLocaleLowerCase();
54969    this.bindings[typeLower] = this.bindings[typeLower].filter(bind => {
54970      var _a;
54971
54972      return !(((_a = bind.type) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === typeLower && RealtimeChannel.isEqual(bind.filter, filter));
54973    });
54974    return this;
54975  }
54976  /** @internal */
54977
54978
54979  static isEqual(obj1, obj2) {
54980    if (Object.keys(obj1).length !== Object.keys(obj2).length) {
54981      return false;
54982    }
54983
54984    for (const k in obj1) {
54985      if (obj1[k] !== obj2[k]) {
54986        return false;
54987      }
54988    }
54989
54990    return true;
54991  }
54992  /** @internal */
54993
54994
54995  _rejoinUntilConnected() {
54996    this.rejoinTimer.scheduleTimeout();
54997
54998    if (this.socket.isConnected()) {
54999      this._rejoin();
55000    }
55001  }
55002  /**
55003   * Registers a callback that will be executed when the channel closes.
55004   *
55005   * @internal
55006   */
55007
55008
55009  _onClose(callback) {
55010    this._on(_constants.CHANNEL_EVENTS.close, {}, callback);
55011  }
55012  /**
55013   * Registers a callback that will be executed when the channel encounteres an error.
55014   *
55015   * @internal
55016   */
55017
55018
55019  _onError(callback) {
55020    this._on(_constants.CHANNEL_EVENTS.error, {}, reason => callback(reason));
55021  }
55022  /**
55023   * Returns `true` if the socket is connected and the channel has been joined.
55024   *
55025   * @internal
55026   */
55027
55028
55029  _canPush() {
55030    return this.socket.isConnected() && this._isJoined();
55031  }
55032  /** @internal */
55033
55034
55035  _rejoin(timeout = this.timeout) {
55036    if (this._isLeaving()) {
55037      return;
55038    }
55039
55040    this.socket._leaveOpenTopic(this.topic);
55041
55042    this.state = _constants.CHANNEL_STATES.joining;
55043    this.joinPush.resend(timeout);
55044  }
55045  /** @internal */
55046
55047
55048  _getPayloadRecords(payload) {
55049    const records = {
55050      new: {},
55051      old: {}
55052    };
55053
55054    if (payload.type === 'INSERT' || payload.type === 'UPDATE') {
55055      records.new = Transformers.convertChangeData(payload.columns, payload.record);
55056    }
55057
55058    if (payload.type === 'UPDATE' || payload.type === 'DELETE') {
55059      records.old = Transformers.convertChangeData(payload.columns, payload.old_record);
55060    }
55061
55062    return records;
55063  }
55064
55065}
55066
55067exports.default = RealtimeChannel;
55068
55069},{"./RealtimePresence":417,"./lib/constants":419,"./lib/push":420,"./lib/timer":422,"./lib/transformers":423}],416:[function(require,module,exports){
55070"use strict";
55071
55072Object.defineProperty(exports, "__esModule", {
55073  value: true
55074});
55075exports.default = void 0;
55076
55077var _constants = require("./lib/constants");
55078
55079var _timer = _interopRequireDefault(require("./lib/timer"));
55080
55081var _serializer = _interopRequireDefault(require("./lib/serializer"));
55082
55083var _RealtimeChannel = _interopRequireDefault(require("./RealtimeChannel"));
55084
55085function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
55086
55087const noop = () => {};
55088
55089const NATIVE_WEBSOCKET_AVAILABLE = typeof WebSocket !== 'undefined';
55090
55091class RealtimeClient {
55092  /**
55093   * Initializes the Socket.
55094   *
55095   * @param endPoint The string WebSocket endpoint, ie, "ws://example.com/socket", "wss://example.com", "/socket" (inherited host & protocol)
55096   * @param options.transport The Websocket Transport, for example WebSocket.
55097   * @param options.timeout The default timeout in milliseconds to trigger push timeouts.
55098   * @param options.params The optional params to pass when connecting.
55099   * @param options.headers The optional headers to pass when connecting.
55100   * @param options.heartbeatIntervalMs The millisec interval to send a heartbeat message.
55101   * @param options.logger The optional function for specialized logging, ie: logger: (kind, msg, data) => { console.log(`${kind}: ${msg}`, data) }
55102   * @param options.encode The function to encode outgoing messages. Defaults to JSON: (payload, callback) => callback(JSON.stringify(payload))
55103   * @param options.decode The function to decode incoming messages. Defaults to Serializer's decode.
55104   * @param options.reconnectAfterMs he optional function that returns the millsec reconnect interval. Defaults to stepped backoff off.
55105   */
55106  constructor(endPoint, options) {
55107    var _a;
55108
55109    this.accessToken = null;
55110    this.apiKey = null;
55111    this.channels = [];
55112    this.endPoint = '';

55113    this.headers = _constants.DEFAULT_HEADERS;
55114    this.params = {};
55115    this.timeout = _constants.DEFAULT_TIMEOUT;
55116    this.heartbeatIntervalMs = 30000;
55117    this.heartbeatTimer = undefined;
55118    this.pendingHeartbeatRef = null;
55119    this.ref = 0;
55120    this.logger = noop;
55121    this.conn = null;
55122    this.sendBuffer = [];
55123    this.serializer = new _serializer.default();
55124    this.stateChangeCallbacks = {
55125      open: [],
55126      close: [],
55127      error: [],
55128      message: []
55129    };
55130    /**
55131     * Use either custom fetch, if provided, or default fetch to make HTTP requests
55132     *
55133     * @internal
55134     */
55135
55136    this._resolveFetch = customFetch => {
55137      let _fetch;
55138
55139      if (customFetch) {
55140        _fetch = customFetch;
55141      } else if (typeof fetch === 'undefined') {
55142        _fetch = (...args) => import('@supabase/node-fetch').then(({
55143          default: fetch
55144        }) => fetch(...args));
55145      } else {
55146        _fetch = fetch;
55147      }
55148
55149      return (...args) => _fetch(...args);
55150    };
55151
55152    this.endPoint = `${endPoint}/${_constants.TRANSPORTS.websocket}`;
55153
55154    if (options === null || options === void 0 ? void 0 : options.transport) {
55155      this.transport = options.transport;
55156    } else {
55157      this.transport = null;
55158    }
55159
55160    if (options === null || options === void 0 ? void 0 : options.params) this.params = options.params;
55161    if (options === null || options === void 0 ? void 0 : options.headers) this.headers = Object.assign(Object.assign({}, this.headers), options.headers);
55162    if (options === null || options === void 0 ? void 0 : options.timeout) this.timeout = options.timeout;
55163    if (options === null || options === void 0 ? void 0 : options.logger) this.logger = options.logger;
55164    if (options === null || options === void 0 ? void 0 : options.heartbeatIntervalMs) this.heartbeatIntervalMs = options.heartbeatIntervalMs;
55165    const accessToken = (_a = options === null || options === void 0 ? void 0 : options.params) === null || _a === void 0 ? void 0 : _a.apikey;
55166
55167    if (accessToken) {
55168      this.accessToken = accessToken;
55169      this.apiKey = accessToken;
55170    }
55171
55172    this.reconnectAfterMs = (options === null || options === void 0 ? void 0 : options.reconnectAfterMs) ? options.reconnectAfterMs : tries => {
55173      return [1000, 2000, 5000, 10000][tries - 1] || 10000;
55174    };
55175    this.encode = (options === null || options === void 0 ? void 0 : options.encode) ? options.encode : (payload, callback) => {
55176      return callback(JSON.stringify(payload));
55177    };
55178    this.decode = (options === null || options === void 0 ? void 0 : options.decode) ? options.decode : this.serializer.decode.bind(this.serializer);
55179    this.reconnectTimer = new _timer.default(async () => {
55180      this.disconnect();
55181      this.connect();
55182    }, this.reconnectAfterMs);
55183    this.fetch = this._resolveFetch(options === null || options === void 0 ? void 0 : options.fetch);
55184  }
55185  /**
55186   * Connects the socket, unless already connected.
55187   */
55188
55189
55190  connect() {
55191    if (this.conn) {
55192      return;
55193    }
55194
55195    if (this.transport) {
55196      this.conn = new this.transport(this._endPointURL(), undefined, {
55197        headers: this.headers
55198      });
55199      return;
55200    }
55201
55202    if (NATIVE_WEBSOCKET_AVAILABLE) {
55203      this.conn = new WebSocket(this._endPointURL());
55204      this.setupConnection();
55205      return;
55206    }
55207
55208    this.conn = new WSWebSocketDummy(this._endPointURL(), undefined, {
55209      close: () => {
55210        this.conn = null;
55211      }
55212    });
55213    import('ws').then(({
55214      default: WS
55215    }) => {
55216      this.conn = new WS(this._endPointURL(), undefined, {
55217        headers: this.headers
55218      });
55219      this.setupConnection();
55220    });
55221  }
55222  /**
55223   * Disconnects the socket.
55224   *
55225   * @param code A numeric status code to send on disconnect.
55226   * @param reason A custom reason for the disconnect.
55227   */
55228
55229
55230  disconnect(code, reason) {
55231    if (this.conn) {
55232      this.conn.onclose = function () {}; // noop
55233
55234
55235      if (code) {
55236        this.conn.close(code, reason !== null && reason !== void 0 ? reason : '');
55237      } else {
55238        this.conn.close();
55239      }
55240
55241      this.conn = null; // remove open handles
55242
55243      this.heartbeatTimer && clearInterval(this.heartbeatTimer);
55244      this.reconnectTimer.reset();
55245    }
55246  }
55247  /**
55248   * Returns all created channels
55249   */
55250
55251
55252  getChannels() {
55253    return this.channels;
55254  }
55255  /**
55256   * Unsubscribes and removes a single channel
55257   * @param channel A RealtimeChannel instance
55258   */
55259
55260
55261  async removeChannel(channel) {
55262    const status = await channel.unsubscribe();
55263
55264    if (this.channels.length === 0) {
55265      this.disconnect();
55266    }
55267
55268    return status;
55269  }
55270  /**
55271   * Unsubscribes and removes all channels
55272   */
55273
55274
55275  async removeAllChannels() {
55276    const values_1 = await Promise.all(this.channels.map(channel => channel.unsubscribe()));
55277    this.disconnect();
55278    return values_1;
55279  }
55280  /**
55281   * Logs the message.
55282   *
55283   * For customized logging, `this.logger` can be overridden.
55284   */
55285
55286
55287  log(kind, msg, data) {
55288    this.logger(kind, msg, data);
55289  }
55290  /**
55291   * Returns the current state of the socket.
55292   */
55293
55294
55295  connectionState() {
55296    switch (this.conn && this.conn.readyState) {
55297      case _constants.SOCKET_STATES.connecting:
55298        return _constants.CONNECTION_STATE.Connecting;
55299
55300      case _constants.SOCKET_STATES.open:
55301        return _constants.CONNECTION_STATE.Open;
55302
55303      case _constants.SOCKET_STATES.closing:
55304        return _constants.CONNECTION_STATE.Closing;
55305
55306      default:
55307        return _constants.CONNECTION_STATE.Closed;
55308    }
55309  }
55310  /**
55311   * Returns `true` is the connection is open.
55312   */
55313
55314
55315  isConnected() {
55316    return this.connectionState() === _constants.CONNECTION_STATE.Open;
55317  }
55318
55319  channel(topic, params = {
55320    config: {}
55321  }) {
55322    const chan = new _RealtimeChannel.default(`realtime:${topic}`, params, this);
55323    this.channels.push(chan);
55324    return chan;
55325  }
55326  /**
55327   * Push out a message if the socket is connected.
55328   *

55329   * If the socket is not connected, the message gets enqueued within a local buffer, and sent out when a connection is next established.
55330   */
55331
55332
55333  push(data) {
55334    const {
55335      topic,
55336      event,
55337      payload,
55338      ref
55339    } = data;
55340
55341    const callback = () => {
55342      this.encode(data, result => {
55343        var _a;
55344
55345        (_a = this.conn) === null || _a === void 0 ? void 0 : _a.send(result);
55346      });
55347    };
55348
55349    this.log('push', `${topic} ${event} (${ref})`, payload);
55350
55351    if (this.isConnected()) {
55352      callback();
55353    } else {
55354      this.sendBuffer.push(callback);
55355    }
55356  }
55357  /**
55358   * Sets the JWT access token used for channel subscription authorization and Realtime RLS.
55359   *
55360   * @param token A JWT string.
55361   */
55362
55363
55364  setAuth(token) {
55365    this.accessToken = token;
55366    this.channels.forEach(channel => {
55367      token && channel.updateJoinPayload({
55368        access_token: token
55369      });
55370
55371      if (channel.joinedOnce && channel._isJoined()) {
55372        channel._push(_constants.CHANNEL_EVENTS.access_token, {
55373          access_token: token
55374        });
55375      }
55376    });
55377  }
55378  /**
55379   * Return the next message ref, accounting for overflows
55380   *
55381   * @internal
55382   */
55383
55384
55385  _makeRef() {
55386    let newRef = this.ref + 1;
55387
55388    if (newRef === this.ref) {
55389      this.ref = 0;
55390    } else {
55391      this.ref = newRef;
55392    }
55393
55394    return this.ref.toString();
55395  }
55396  /**
55397   * Unsubscribe from channels with the specified topic.
55398   *
55399   * @internal
55400   */
55401
55402
55403  _leaveOpenTopic(topic) {
55404    let dupChannel = this.channels.find(c => c.topic === topic && (c._isJoined() || c._isJoining()));
55405
55406    if (dupChannel) {
55407      this.log('transport', `leaving duplicate topic "${topic}"`);
55408      dupChannel.unsubscribe();
55409    }
55410  }
55411  /**
55412   * Removes a subscription from the socket.
55413   *
55414   * @param channel An open subscription.
55415   *
55416   * @internal
55417   */
55418
55419
55420  _remove(channel) {
55421    this.channels = this.channels.filter(c => c._joinRef() !== channel._joinRef());
55422  }
55423  /**
55424   * Sets up connection handlers.
55425   *
55426   * @internal
55427   */
55428
55429
55430  setupConnection() {
55431    if (this.conn) {
55432      this.conn.binaryType = 'arraybuffer';
55433
55434      this.conn.onopen = () => this._onConnOpen();
55435
55436      this.conn.onerror = error => this._onConnError(error);
55437
55438      this.conn.onmessage = event => this._onConnMessage(event);
55439
55440      this.conn.onclose = event => this._onConnClose(event);
55441    }
55442  }
55443  /**
55444   * Returns the URL of the websocket.
55445   *
55446   * @internal
55447   */
55448
55449
55450  _endPointURL() {
55451    return this._appendParams(this.endPoint, Object.assign({}, this.params, {
55452      vsn: _constants.VSN
55453    }));
55454  }
55455  /** @internal */
55456
55457
55458  _onConnMessage(rawMessage) {
55459    this.decode(rawMessage.data, msg => {
55460      let {
55461        topic,
55462        event,
55463        payload,
55464        ref
55465      } = msg;
55466
55467      if (ref && ref === this.pendingHeartbeatRef || event === (payload === null || payload === void 0 ? void 0 : payload.type)) {
55468        this.pendingHeartbeatRef = null;
55469      }
55470
55471      this.log('receive', `${payload.status || ''} ${topic} ${event} ${ref && '(' + ref + ')' || ''}`, payload);
55472      this.channels.filter(channel => channel._isMember(topic)).forEach(channel => channel._trigger(event, payload, ref));
55473      this.stateChangeCallbacks.message.forEach(callback => callback(msg));
55474    });
55475  }
55476  /** @internal */
55477
55478
55479  _onConnOpen() {
55480    this.log('transport', `connected to ${this._endPointURL()}`);
55481
55482    this._flushSendBuffer();
55483
55484    this.reconnectTimer.reset();
55485    this.heartbeatTimer && clearInterval(this.heartbeatTimer);
55486    this.heartbeatTimer = setInterval(() => this._sendHeartbeat(), this.heartbeatIntervalMs);
55487    this.stateChangeCallbacks.open.forEach(callback => callback());
55488  }
55489  /** @internal */
55490
55491
55492  _onConnClose(event) {
55493    this.log('transport', 'close', event);
55494
55495    this._triggerChanError();
55496
55497    this.heartbeatTimer && clearInterval(this.heartbeatTimer);
55498    this.reconnectTimer.scheduleTimeout();
55499    this.stateChangeCallbacks.close.forEach(callback => callback(event));
55500  }
55501  /** @internal */
55502
55503
55504  _onConnError(error) {
55505    this.log('transport', error.message);
55506
55507    this._triggerChanError();
55508
55509    this.stateChangeCallbacks.error.forEach(callback => callback(error));
55510  }
55511  /** @internal */
55512
55513
55514  _triggerChanError() {

55515    this.channels.forEach(channel => channel._trigger(_constants.CHANNEL_EVENTS.error));
55516  }
55517  /** @internal */
55518
55519
55520  _appendParams(url, params) {
55521    if (Object.keys(params).length === 0) {
55522      return url;
55523    }
55524
55525    const prefix = url.match(/\?/) ? '&' : '?';
55526    const query = new URLSearchParams(params);
55527    return `${url}${prefix}${query}`;
55528  }
55529  /** @internal */
55530
55531
55532  _flushSendBuffer() {
55533    if (this.isConnected() && this.sendBuffer.length > 0) {
55534      this.sendBuffer.forEach(callback => callback());
55535      this.sendBuffer = [];
55536    }
55537  }
55538  /** @internal */
55539
55540
55541  _sendHeartbeat() {
55542    var _a;
55543
55544    if (!this.isConnected()) {
55545      return;
55546    }
55547
55548    if (this.pendingHeartbeatRef) {
55549      this.pendingHeartbeatRef = null;
55550      this.log('transport', 'heartbeat timeout. Attempting to re-establish connection');
55551      (_a = this.conn) === null || _a === void 0 ? void 0 : _a.close(_constants.WS_CLOSE_NORMAL, 'hearbeat timeout');
55552      return;
55553    }
55554
55555    this.pendingHeartbeatRef = this._makeRef();
55556    this.push({
55557      topic: 'phoenix',
55558      event: 'heartbeat',
55559      payload: {},
55560      ref: this.pendingHeartbeatRef
55561    });
55562    this.setAuth(this.accessToken);
55563  }
55564
55565}
55566
55567exports.default = RealtimeClient;
55568
55569class WSWebSocketDummy {
55570  constructor(address, _protocols, options) {
55571    this.binaryType = 'arraybuffer';
55572
55573    this.onclose = () => {};
55574
55575    this.onerror = () => {};
55576
55577    this.onmessage = () => {};
55578
55579    this.onopen = () => {};
55580
55581    this.readyState = _constants.SOCKET_STATES.connecting;
55582
55583    this.send = () => {};
55584
55585    this.url = null;
55586    this.url = address;
55587    this.close = options.close;
55588  }
55589
55590}
55591
55592},{"./RealtimeChannel":415,"./lib/constants":419,"./lib/serializer":421,"./lib/timer":422}],417:[function(require,module,exports){
55593"use strict";
55594
55595Object.defineProperty(exports, "__esModule", {
55596  value: true
55597});
55598exports.default = exports.REALTIME_PRESENCE_LISTEN_EVENTS = void 0;
55599
55600/*
55601  This file draws heavily from https://github.com/phoenixframework/phoenix/blob/d344ec0a732ab4ee204215b31de69cf4be72e3bf/assets/js/phoenix/presence.js
55602  License: https://github.com/phoenixframework/phoenix/blob/d344ec0a732ab4ee204215b31de69cf4be72e3bf/LICENSE.md
55603*/
55604var REALTIME_PRESENCE_LISTEN_EVENTS;
55605exports.REALTIME_PRESENCE_LISTEN_EVENTS = REALTIME_PRESENCE_LISTEN_EVENTS;
55606
55607(function (REALTIME_PRESENCE_LISTEN_EVENTS) {
55608  REALTIME_PRESENCE_LISTEN_EVENTS["SYNC"] = "sync";
55609  REALTIME_PRESENCE_LISTEN_EVENTS["JOIN"] = "join";
55610  REALTIME_PRESENCE_LISTEN_EVENTS["LEAVE"] = "leave";
55611})(REALTIME_PRESENCE_LISTEN_EVENTS || (exports.REALTIME_PRESENCE_LISTEN_EVENTS = REALTIME_PRESENCE_LISTEN_EVENTS = {}));
55612
55613class RealtimePresence {
55614  /**
55615   * Initializes the Presence.
55616   *
55617   * @param channel - The RealtimeChannel
55618   * @param opts - The options,
55619   *        for example `{events: {state: 'state', diff: 'diff'}}`
55620   */
55621  constructor(channel, opts) {
55622    this.channel = channel;
55623    this.state = {};
55624    this.pendingDiffs = [];
55625    this.joinRef = null;
55626    this.caller = {
55627      onJoin: () => {},
55628      onLeave: () => {},
55629      onSync: () => {}
55630    };
55631    const events = (opts === null || opts === void 0 ? void 0 : opts.events) || {
55632      state: 'presence_state',
55633      diff: 'presence_diff'
55634    };
55635
55636    this.channel._on(events.state, {}, newState => {
55637      const {
55638        onJoin,
55639        onLeave,
55640        onSync
55641      } = this.caller;
55642      this.joinRef = this.channel._joinRef();
55643      this.state = RealtimePresence.syncState(this.state, newState, onJoin, onLeave);
55644      this.pendingDiffs.forEach(diff => {
55645        this.state = RealtimePresence.syncDiff(this.state, diff, onJoin, onLeave);
55646      });
55647      this.pendingDiffs = [];
55648      onSync();
55649    });
55650
55651    this.channel._on(events.diff, {}, diff => {
55652      const {
55653        onJoin,
55654        onLeave,
55655        onSync
55656      } = this.caller;
55657
55658      if (this.inPendingSyncState()) {
55659        this.pendingDiffs.push(diff);
55660      } else {
55661        this.state = RealtimePresence.syncDiff(this.state, diff, onJoin, onLeave);
55662        onSync();
55663      }
55664    });
55665
55666    this.onJoin((key, currentPresences, newPresences) => {
55667      this.channel._trigger('presence', {
55668        event: 'join',
55669        key,
55670        currentPresences,
55671        newPresences
55672      });
55673    });
55674    this.onLeave((key, currentPresences, leftPresences) => {
55675      this.channel._trigger('presence', {
55676        event: 'leave',
55677        key,
55678        currentPresences,
55679        leftPresences
55680      });
55681    });
55682    this.onSync(() => {
55683      this.channel._trigger('presence', {
55684        event: 'sync'
55685      });
55686    });
55687  }
55688  /**
55689   * Used to sync the list of presences on the server with the
55690   * client's state.
55691   *
55692   * An optional `onJoin` and `onLeave` callback can be provided to
55693   * react to changes in the client's local presences across
55694   * disconnects and reconnects with the server.
55695   *
55696   * @internal
55697   */
55698
55699
55700  static syncState(currentState, newState, onJoin, onLeave) {
55701    const state = this.cloneDeep(currentState);
55702    const transformedState = this.transformState(newState);
55703    const joins = {};
55704    const leaves = {};
55705    this.map(state, (key, presences) => {
55706      if (!transformedState[key]) {
55707        leaves[key] = presences;
55708      }
55709    });
55710    this.map(transformedState, (key, newPresences) => {
55711      const currentPresences = state[key];
55712
55713      if (currentPresences) {
55714        const newPresenceRefs = newPresences.map(m => m.presence_ref);
55715        const curPresenceRefs = currentPresences.map(m => m.presence_ref);
55716        const joinedPresences = newPresences.filter(m => curPresenceRefs.indexOf(m.presence_ref) < 0);
55717        const leftPresences = currentPresences.filter(m => newPresenceRefs.indexOf(m.presence_ref) < 0);
55718
55719        if (joinedPresences.length > 0) {
55720          joins[key] = joinedPresences;
55721        }
55722
55723        if (leftPresences.length > 0) {
55724          leaves[key] = leftPresences;
55725        }
55726      } else {
55727        joins[key] = newPresences;
55728      }
55729    });
55730    return this.syncDiff(state, {
55731      joins,
55732      leaves
55733    }, onJoin, onLeave);
55734  }
55735  /**
55736   * Used to sync a diff of presence join and leave events from the
55737   * server, as they happen.
55738   *
55739   * Like `syncState`, `syncDiff` accepts optional `onJoin` and
55740   * `onLeave` callbacks to react to a user joining or leaving from a
55741   * device.
55742   *
55743   * @internal
55744   */
55745
55746
55747  static syncDiff(state, diff, onJoin, onLeave) {
55748    const {
55749      joins,
55750      leaves
55751    } = {
55752      joins: this.transformState(diff.joins),
55753      leaves: this.transformState(diff.leaves)
55754    };
55755
55756    if (!onJoin) {
55757      onJoin = () => {};
55758    }
55759
55760    if (!onLeave) {
55761      onLeave = () => {};
55762    }
55763
55764    this.map(joins, (key, newPresences) => {
55765      var _a;
55766
55767      const currentPresences = (_a = state[key]) !== null && _a !== void 0 ? _a : [];
55768      state[key] = this.cloneDeep(newPresences);
55769
55770      if (currentPresences.length > 0) {
55771        const joinedPresenceRefs = state[key].map(m => m.presence_ref);
55772        const curPresences = currentPresences.filter(m =>

55772 joinedPresenceRefs.indexOf(m.presence_ref) < 0);
55773        state[key].unshift(...curPresences);
55774      }
55775
55776      onJoin(key, currentPresences, newPresences);
55777    });
55778    this.map(leaves, (key, leftPresences) => {
55779      let currentPresences = state[key];
55780      if (!currentPresences) return;
55781      const presenceRefsToRemove = leftPresences.map(m => m.presence_ref);
55782      currentPresences = currentPresences.filter(m => presenceRefsToRemove.indexOf(m.presence_ref) < 0);
55783      state[key] = currentPresences;
55784      onLeave(key, currentPresences, leftPresences);
55785      if (currentPresences.length === 0) delete state[key];
55786    });
55787    return state;
55788  }
55789  /** @internal */
55790
55791
55792  static map(obj, func) {
55793    return Object.getOwnPropertyNames(obj).map(key => func(key, obj[key]));
55794  }
55795  /**
55796   * Remove 'metas' key
55797   * Change 'phx_ref' to 'presence_ref'
55798   * Remove 'phx_ref' and 'phx_ref_prev'
55799   *
55800   * @example
55801   * // returns {
55802   *  abc123: [
55803   *    { presence_ref: '2', user_id: 1 },
55804   *    { presence_ref: '3', user_id: 2 }
55805   *  ]
55806   * }
55807   * RealtimePresence.transformState({
55808   *  abc123: {
55809   *    metas: [
55810   *      { phx_ref: '2', phx_ref_prev: '1' user_id: 1 },
55811   *      { phx_ref: '3', user_id: 2 }
55812   *    ]
55813   *  }
55814   * })
55815   *
55816   * @internal
55817   */
55818
55819
55820  static transformState(state) {
55821    state = this.cloneDeep(state);
55822    return Object.getOwnPropertyNames(state).reduce((newState, key) => {
55823      const presences = state[key];
55824
55825      if ('metas' in presences) {
55826        newState[key] = presences.metas.map(presence => {
55827          presence['presence_ref'] = presence['phx_ref'];
55828          delete presence['phx_ref'];
55829          delete presence['phx_ref_prev'];
55830          return presence;
55831        });
55832      } else {
55833        newState[key] = presences;
55834      }
55835
55836      return newState;
55837    }, {});
55838  }
55839  /** @internal */
55840
55841
55842  static cloneDeep(obj) {
55843    return JSON.parse(JSON.stringify(obj));
55844  }
55845  /** @internal */
55846
55847
55848  onJoin(callback) {
55849    this.caller.onJoin = callback;
55850  }
55851  /** @internal */
55852
55853
55854  onLeave(callback) {
55855    this.caller.onLeave = callback;
55856  }
55857  /** @internal */
55858
55859
55860  onSync(callback) {
55861    this.caller.onSync = callback;
55862  }
55863  /** @internal */
55864
55865
55866  inPendingSyncState() {
55867    return !this.joinRef || this.joinRef !== this.channel._joinRef();
55868  }
55869
55870}
55871
55872exports.default = RealtimePresence;
55873
55874},{}],418:[function(require,module,exports){
55875"use strict";
55876
55877Object.defineProperty(exports, "__esModule", {
55878  value: true
55879});
55880Object.defineProperty(exports, "REALTIME_CHANNEL_STATES", {
55881  enumerable: true,
55882  get: function () {
55883    return _RealtimeChannel.REALTIME_CHANNEL_STATES;
55884  }
55885});
55886Object.defineProperty(exports, "REALTIME_LISTEN_TYPES", {
55887  enumerable: true,
55888  get: function () {
55889    return _RealtimeChannel.REALTIME_LISTEN_TYPES;
55890  }
55891});
55892Object.defineProperty(exports, "REALTIME_POSTGRES_CHANGES_LISTEN_EVENT", {
55893  enumerable: true,
55894  get: function () {
55895    return _RealtimeChannel.REALTIME_POSTGRES_CHANGES_LISTEN_EVENT;
55896  }
55897});
55898Object.defineProperty(exports, "REALTIME_PRESENCE_LISTEN_EVENTS", {
55899  enumerable: true,
55900  get: function () {
55901    return _RealtimePresence.REALTIME_PRESENCE_LISTEN_EVENTS;
55902  }
55903});
55904Object.defineProperty(exports, "REALTIME_SUBSCRIBE_STATES", {
55905  enumerable: true,
55906  get: function () {
55907    return _RealtimeChannel.REALTIME_SUBSCRIBE_STATES;
55908  }
55909});
55910Object.defineProperty(exports, "RealtimeChannel", {
55911  enumerable: true,
55912  get: function () {
55913    return _RealtimeChannel.default;
55914  }
55915});
55916Object.defineProperty(exports, "RealtimeClient", {
55917  enumerable: true,
55918  get: function () {
55919    return _RealtimeClient.default;
55920  }
55921});
55922Object.defineProperty(exports, "RealtimePresence", {
55923  enumerable: true,
55924  get: function () {
55925    return _RealtimePresence.default;
55926  }
55927});
55928
55929var _RealtimeClient = _interopRequireDefault(require("./RealtimeClient"));
55930
55931var _RealtimeChannel = _interopRequireWildcard(require("./RealtimeChannel"));
55932
55933var _RealtimePresence = _interopRequireWildcard(require("./RealtimePresence"));
55934
55935function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
55936
55937function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;

55937 if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
55938
55939function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
55940
55941},{"./RealtimeChannel":415,"./RealtimeClient":416,"./RealtimePresence":417}],419:[function(require,module,exports){
55942"use strict";
55943
55944Object.defineProperty(exports, "__esModule", {
55945  value: true
55946});
55947exports.WS_CLOSE_NORMAL = exports.VSN = exports.TRANSPORTS = exports.SOCKET_STATES = exports.DEFAULT_TIMEOUT = exports.DEFAULT_HEADERS = exports.CONNECTION_STATE = exports.CHANNEL_STATES = exports.CHANNEL_EVENTS = void 0;
55948
55949var _version = require("./version");
55950
55951const DEFAULT_HEADERS = {
55952  'X-Client-Info': `realtime-js/${_version.version}`
55953};
55954exports.DEFAULT_HEADERS = DEFAULT_HEADERS;
55955const VSN = '1.0.0';
55956exports.VSN = VSN;
55957const DEFAULT_TIMEOUT = 10000;
55958exports.DEFAULT_TIMEOUT = DEFAULT_TIMEOUT;
55959const WS_CLOSE_NORMAL = 1000;
55960exports.WS_CLOSE_NORMAL = WS_CLOSE_NORMAL;
55961var SOCKET_STATES;
55962exports.SOCKET_STATES = SOCKET_STATES;
55963
55964(function (SOCKET_STATES) {
55965  SOCKET_STATES[SOCKET_STATES["connecting"] = 0] = "connecting";
55966  SOCKET_STATES[SOCKET_STATES["open"] = 1] = "open";
55967  SOCKET_STATES[SOCKET_STATES["closing"] = 2] = "closing";
55968  SOCKET_STATES[SOCKET_STATES["closed"] = 3] = "closed";
55969})(SOCKET_STATES || (exports.SOCKET_STATES = SOCKET_STATES = {}));
55970
55971var CHANNEL_STATES;
55972exports.CHANNEL_STATES = CHANNEL_STATES;
55973
55974(function (CHANNEL_STATES) {
55975  CHANNEL_STATES["closed"] = "closed";
55976  CHANNEL_STATES["errored"] = "errored";
55977  CHANNEL_STATES["joined"] = "joined";
55978  CHANNEL_STATES["joining"] = "joining";
55979  CHANNEL_STATES["leaving"] = "leaving";
55980})(CHANNEL_STATES || (exports.CHANNEL_STATES = CHANNEL_STATES = {}));
55981
55982var CHANNEL_EVENTS;
55983exports.CHANNEL_EVENTS = CHANNEL_EVENTS;
55984
55985(function (CHANNEL_EVENTS) {
55986  CHANNEL_EVENTS["close"] = "phx_close";
55987  CHANNEL_EVENTS["error"] = "phx_error";
55988  CHANNEL_EVENTS["join"] = "phx_join";
55989  CHANNEL_EVENTS["reply"] = "phx_reply";
55990  CHANNEL_EVENTS["leave"] = "phx_leave";
55991  CHANNEL_EVENTS["access_token"] = "access_token";
55992})(CHANNEL_EVENTS || (exports.CHANNEL_EVENTS = CHANNEL_EVENTS = {}));
55993
55994var TRANSPORTS;
55995exports.TRANSPORTS = TRANSPORTS;
55996
55997(function (TRANSPORTS) {
55998  TRANSPORTS["websocket"] = "websocket";
55999})(TRANSPORTS || (exports.TRANSPORTS = TRANSPORTS = {}));
56000
56001var CONNECTION_STATE;
56002exports.CONNECTION_STATE = CONNECTION_STATE;
56003
56004(function (CONNECTION_STATE) {
56005  CONNECTION_STATE["Connecting"] = "connecting";
56006  CONNECTION_STATE["Open"] = "open";
56007  CONNECTION_STATE["Closing"] = "closing";
56008  CONNECTION_STATE["Closed"] = "closed";
56009})(CONNECTION_STATE || (exports.CONNECTION_STATE = CONNECTION_STATE = {}));
56010
56011},{"./version":424}],420:[function(require,module,exports){
56012"use strict";
56013
56014Object.defineProperty(exports, "__esModule", {
56015  value: true
56016});
56017exports.default = void 0;
56018
56019var _constants = require("../lib/constants");
56020
56021class Push {
56022  /**
56023   * Initializes the Push
56024   *
56025   * @param channel The Channel
56026   * @param event The event, for example `"phx_join"`
56027   * @param payload The payload, for example `{user_id: 123}`
56028   * @param timeout The push timeout in milliseconds
56029   */
56030  constructor(channel, event, payload = {}, timeout = _constants.DEFAULT_TIMEOUT) {
56031    this.channel = channel;
56032    this.event = event;
56033    this.payload = payload;
56034    this.timeout = timeout;
56035    this.sent = false;
56036    this.timeoutTimer = undefined;
56037    this.ref = '';
56038    this.receivedResp = null;
56039    this.recHooks = [];
56040    this.refEvent = null;
56041  }
56042
56043  resend(timeout) {
56044    this.timeout = timeout;
56045
56046    this._cancelRefEvent();
56047
56048    this.ref = '';
56049    this.refEvent = null;
56050    this.receivedResp = null;
56051    this.sent = false;
56052    this.send();
56053  }
56054
56055  send() {
56056    if (this._hasReceived('timeout')) {
56057      return;
56058    }
56059
56060    this.startTimeout();
56061    this.sent = true;
56062    this.channel.socket.push({
56063      topic: this.channel.topic,
56064      event: this.event,
56065      payload: this.payload,
56066      ref: this.ref,
56067      join_ref: this.channel._joinRef()
56068    });
56069  }
56070
56071  updatePayload(payload) {
56072    this.payload = Object.assign(Object.assign({}, this.payload), payload);
56073  }
56074

56075  receive(status, callback) {
56076    var _a;
56077
56078    if (this._hasReceived(status)) {
56079      callback((_a = this.receivedResp) === null || _a === void 0 ? void 0 : _a.response);
56080    }
56081
56082    this.recHooks.push({
56083      status,
56084      callback
56085    });
56086    return this;
56087  }
56088
56089  startTimeout() {
56090    if (this.timeoutTimer) {
56091      return;
56092    }
56093
56094    this.ref = this.channel.socket._makeRef();
56095    this.refEvent = this.channel._replyEventName(this.ref);
56096
56097    const callback = payload => {
56098      this._cancelRefEvent();
56099
56100      this._cancelTimeout();
56101
56102      this.receivedResp = payload;
56103
56104      this._matchReceive(payload);
56105    };
56106
56107    this.channel._on(this.refEvent, {}, callback);
56108
56109    this.timeoutTimer = setTimeout(() => {
56110      this.trigger('timeout', {});
56111    }, this.timeout);
56112  }
56113
56114  trigger(status, response) {
56115    if (this.refEvent) this.channel._trigger(this.refEvent, {
56116      status,
56117      response
56118    });
56119  }
56120
56121  destroy() {
56122    this._cancelRefEvent();
56123
56124    this._cancelTimeout();
56125  }
56126
56127  _cancelRefEvent() {
56128    if (!this.refEvent) {
56129      return;
56130    }
56131
56132    this.channel._off(this.refEvent, {});
56133  }
56134
56135  _cancelTimeout() {
56136    clearTimeout(this.timeoutTimer);
56137    this.timeoutTimer = undefined;
56138  }
56139
56140  _matchReceive({
56141    status,
56142    response
56143  }) {
56144    this.recHooks.filter(h => h.status === status).forEach(h => h.callback(response));
56145  }
56146
56147  _hasReceived(status) {
56148    return this.receivedResp && this.receivedResp.status === status;
56149  }
56150
56151}
56152
56153exports.default = Push;
56154
56155},{"../lib/constants":419}],421:[function(require,module,exports){
56156"use strict";
56157
56158Object.defineProperty(exports, "__esModule", {
56159  value: true
56160});
56161exports.default = void 0;
56162
56163// This file draws heavily from https://github.com/phoenixframework/phoenix/commit/cf098e9cf7a44ee6479d31d911a97d3c7430c6fe
56164// License: https://github.com/phoenixframework/phoenix/blob/master/LICENSE.md
56165class Serializer {
56166  constructor() {
56167    this.HEADER_LENGTH = 1;
56168  }
56169
56170  decode(rawPayload, callback) {
56171    if (rawPayload.constructor === ArrayBuffer) {
56172      return callback(this._binaryDecode(rawPayload));
56173    }
56174
56175    if (typeof rawPayload === 'string') {
56176      return callback(JSON.parse(rawPayload));
56177    }
56178
56179    return callback({});
56180  }
56181
56182  _binaryDecode(buffer) {
56183    const view = new DataView(buffer);
56184    const decoder = new TextDecoder();
56185    return this._decodeBroadcast(buffer, view, decoder);
56186  }
56187
56188  _decodeBroadcast(buffer, view, decoder) {
56189    const topicSize = view.getUint8(1);
56190    const eventSize = view.getUint8(2);
56191    let offset = this.HEADER_LENGTH + 2;
56192    const topic = decoder.decode(buffer.slice(offset, offset + topicSize));
56193    offset = offset + topicSize;
56194    const event = decoder.decode(buffer.slice(offset, offset + eventSize));
56195    offset = offset + eventSize;
56196    const data = JSON.parse(decoder.decode(buffer.slice(offset, buffer.byteLength)));
56197    return {
56198      ref: null,
56199      topic: topic,
56200      event: event,
56201      payload: data
56202    };
56203  }
56204
56205}
56206
56207exports.default = Serializer;
56208
56209},{}],422:[function(require,module,exports){
56210"use strict";
56211
56212Object.defineProperty(exports, "__esModule", {
56213  value: true
56214});
56215exports.default = void 0;
56216
56217/**
56218 * Creates a timer that accepts a `timerCalc` function to perform calculated timeout retries, such as exponential backoff.
56219 *
56220 * @example
56221 *    let reconnectTimer = new Timer(() => this.connect(), function(tries){
56222 *      return [1000, 5000, 10000][tries - 1] || 10000
56223 *    })
56224 *    reconnectTimer.scheduleTimeout() // fires after 1000
56225 *    reconnectTimer.scheduleTimeout() // fires after 5000
56226 *    reconnectTimer.reset()
56227 *    reconnectTimer.scheduleTimeout() // fires after 1000
56228 */
56229class Timer {
56230  constructor(callback, timerCalc) {
56231    this.callback = callback;
56232    this.timerCalc = timerCalc;
56233    this.timer = undefined;
56234    this.tries = 0;
56235    this.callback = callback;
56236    this.timerCalc = timerCalc;
56237  }
56238
56239  reset() {
56240    this.tries = 0;
56241    clearTimeout(this.timer);
56242  } // Cancels any previous scheduleTimeout and schedules callback
56243
56244
56245  scheduleTimeout() {
56246    clearTimeout(this.timer);
56247    this.timer = setTimeout(() => {
56248      this.tries = this.tries + 1;
56249      this.callback();
56250    }, this.timerCalc(this.tries + 1));
56251  }
56252
56253}
56254
56255exports.default = Timer;
56256
56257},{}],423:[function(require,module,exports){
56258"use strict";
56259
56260Object.defineProperty(exports, "__esModule", {
56261  value: true
56262});
56263exports.toTimestampString = exports.toNumber = exports.toJson = exports.toBo

56263olean = exports.toArray = exports.convertColumn = exports.convertChangeData = exports.convertCell = exports.PostgresTypes = void 0;
56264
56265/**
56266 * Helpers to convert the change Payload into native JS types.
56267 */
56268// Adapted from epgsql (src/epgsql_binary.erl), this module licensed under
56269// 3-clause BSD found here: https://raw.githubusercontent.com/epgsql/epgsql/devel/LICENSE
56270var PostgresTypes;
56271exports.PostgresTypes = PostgresTypes;
56272
56273(function (PostgresTypes) {
56274  PostgresTypes["abstime"] = "abstime";
56275  PostgresTypes["bool"] = "bool";
56276  PostgresTypes["date"] = "date";
56277  PostgresTypes["daterange"] = "daterange";
56278  PostgresTypes["float4"] = "float4";
56279  PostgresTypes["float8"] = "float8";
56280  PostgresTypes["int2"] = "int2";
56281  PostgresTypes["int4"] = "int4";
56282  PostgresTypes["int4range"] = "int4range";
56283  PostgresTypes["int8"] = "int8";
56284  PostgresTypes["int8range"] = "int8range";
56285  PostgresTypes["json"] = "json";
56286  PostgresTypes["jsonb"] = "jsonb";
56287  PostgresTypes["money"] = "money";
56288  PostgresTypes["numeric"] = "numeric";
56289  PostgresTypes["oid"] = "oid";
56290  PostgresTypes["reltime"] = "reltime";
56291  PostgresTypes["text"] = "text";
56292  PostgresTypes["time"] = "time";
56293  PostgresTypes["timestamp"] = "timestamp";
56294  PostgresTypes["timestamptz"] = "timestamptz";
56295  PostgresTypes["timetz"] = "timetz";
56296  PostgresTypes["tsrange"] = "tsrange";
56297  PostgresTypes["tstzrange"] = "tstzrange";
56298})(PostgresTypes || (exports.PostgresTypes = PostgresTypes = {}));
56299/**
56300 * Takes an array of columns and an object of string values then converts each string value
56301 * to its mapped type.
56302 *
56303 * @param {{name: String, type: String}[]} columns
56304 * @param {Object} record
56305 * @param {Object} options The map of various options that can be applied to the mapper
56306 * @param {Array} options.skipTypes The array of types that should not be converted
56307 *
56308 * @example convertChangeData([{name: 'first_name', type: 'text'}, {name: 'age', type: 'int4'}], {first_name: 'Paul', age:'33'}, {})
56309 * //=>{ first_name: 'Paul', age: 33 }
56310 */
56311
56312
56313const convertChangeData = (columns, record, options = {}) => {
56314  var _a;
56315
56316  const skipTypes = (_a = options.skipTypes) !== null && _a !== void 0 ? _a : [];
56317  return Object.keys(record).reduce((acc, rec_key) => {
56318    acc[rec_key] = convertColumn(rec_key, columns, record, skipTypes);
56319    return acc;
56320  }, {});
56321};
56322/**
56323 * Converts the value of an individual column.
56324 *
56325 * @param {String} columnName The column that you want to convert
56326 * @param {{name: String, type: String}[]} columns All of the columns
56327 * @param {Object} record The map of string values
56328 * @param {Array} skipTypes An array of types that should not be converted
56329 * @return {object} Useless information
56330 *
56331 * @example convertColumn('age', [{name: 'first_name', type: 'text'}, {name: 'age', type: 'int4'}], {first_name: 'Paul', age: '33'}, [])
56332 * //=> 33
56333 * @example convertColumn('age', [{name: 'first_name', type: 'text'}, {name: 'age', type: 'int4'}], {first_name: 'Paul', age: '33'}, ['int4'])
56334 * //=> "33"
56335 */
56336
56337
56338exports.convertChangeData = convertChangeData;
56339
56340const convertColumn = (columnName, columns, record, skipTypes) => {
56341  const column = columns.find(x => x.name === columnName);
56342  const colType = column === null || column === void 0 ? void 0 : column.type;
56343  const value = record[columnName];
56344
56345  if (colType && !skipTypes.includes(colType)) {
56346    return convertCell(colType, value);
56347  }
56348
56349  return noop(value);
56350};
56351/**
56352 * If the value of the cell is `null`, returns null.
56353 * Otherwise converts the string value to the correct type.
56354 * @param {String} type A postgres column type
56355 * @param {String} value The cell value
56356 *
56357 * @example convertCell('bool', 't')
56358 * //=> true
56359 * @example convertCell('int8', '10')
56360 * //=> 10
56361 * @example convertCell('_int4', '{1,2,3,4}')
56362 * //=> [1,2,3,4]
56363 */
56364
56365
56366exports.convertColumn = convertColumn;
56367
56368const convertCell = (type, value) => {
56369  // if data type is an array
56370  if (type.charAt(0) === '_') {
56371    const dataType = type.slice(1, type.length);
56372    return toArray(value, dataType);
56373  } // If not null, convert to correct type.
56374
56375
56376  switch (type) {
56377    case PostgresTypes.bool:
56378      return toBoolean(value);
56379
56380    case PostgresTypes.float4:
56381    case PostgresTypes.float8:
56382    case PostgresTypes.int2:
56383    case PostgresTypes.int4:
56384    case PostgresTypes.int8:
56385    case PostgresTypes.numeric:
56386    case PostgresTypes.oid:
56387      return toNumber(value);
56388
56389    case PostgresTypes.json:
56390    case PostgresTypes.jsonb:
56391      return toJson(value);
56392
56393    case PostgresTypes.timestamp:
56394      return toTimestampString(value);
56395    // Format to be consistent with PostgREST
56396
56397    case PostgresTypes.abstime: // To allow users to cast it based on Timezone
56398
56399    case PostgresTypes.date: // To allow users to cast it based on Timezone
56400
56401    case PostgresTypes.daterange:
56402    case PostgresTypes.int4range:
56403    case PostgresTypes.int8range:
56404    case PostgresTypes.money:
56405    case PostgresTypes.reltime: // To allow users to cast it based on Timezone
56406
56407    case PostgresTypes.text:
56408    case PostgresTypes.time: // To allow users to cast it based on Timezone
56409
56410    case PostgresTypes.timestamptz: // To allow users to cast it based on Timezone
56411
56412    case PostgresTypes.timetz: // To allow users to cast it based on Timezone
56413
56414    case PostgresTypes.tsrange:
56415    case PostgresTypes.tstzrange:
56416      return noop(value);
56417
56418    default:
56419      // Return the value for remaining types
56420      return noop(value);
56421  }
56422};
56423
56424exports.convertCell = convertCell;
56425
56426const noop = value => {
56427  return value;
56428};
56429

56430const toBoolean = value => {
56431  switch (value) {
56432    case 't':
56433      return true;
56434
56435    case 'f':
56436      return false;
56437
56438    default:
56439      return value;
56440  }
56441};
56442
56443exports.toBoolean = toBoolean;
56444
56445const toNumber = value => {
56446  if (typeof value === 'string') {
56447    const parsedValue = parseFloat(value);
56448
56449    if (!Number.isNaN(parsedValue)) {
56450      return parsedValue;
56451    }
56452  }
56453
56454  return value;
56455};
56456
56457exports.toNumber = toNumber;
56458
56459const toJson = value => {
56460  if (typeof value === 'string') {
56461    try {
56462      return JSON.parse(value);
56463    } catch (error) {
56464      console.log(`JSON parse error: ${error}`);
56465      return value;
56466    }
56467  }
56468
56469  return value;
56470};
56471/**
56472 * Converts a Postgres Array into a native JS array
56473 *
56474 * @example toArray('{}', 'int4')
56475 * //=> []
56476 * @example toArray('{"[2021-01-01,2021-12-31)","(2021-01-01,2021-12-32]"}', 'daterange')
56477 * //=> ['[2021-01-01,2021-12-31)', '(2021-01-01,2021-12-32]']
56478 * @example toArray([1,2,3,4], 'int4')
56479 * //=> [1,2,3,4]
56480 */
56481
56482
56483exports.toJson = toJson;
56484
56485const toArray = (value, type) => {
56486  if (typeof value !== 'string') {
56487    return value;
56488  }
56489
56490  const lastIdx = value.length - 1;
56491  const closeBrace = value[lastIdx];
56492  const openBrace = value[0]; // Confirm value is a Postgres array by checking curly brackets
56493
56494  if (openBrace === '{' && closeBrace === '}') {
56495    let arr;
56496    const valTrim = value.slice(1, lastIdx); // TODO: find a better solution to separate Postgres array data
56497
56498    try {
56499      arr = JSON.parse('[' + valTrim + ']');
56500    } catch (_) {
56501      // WARNING: splitting on comma does not cover all edge cases
56502      arr = valTrim ? valTrim.split(',') : [];
56503    }
56504
56505    return arr.map(val => convertCell(type, val));
56506  }
56507
56508  return value;
56509};
56510/**
56511 * Fixes timestamp to be ISO-8601. Swaps the space between the date and time for a 'T'
56512 * See https://github.com/supabase/supabase/issues/18
56513 *
56514 * @example toTimestampString('2019-09-10 00:00:00')
56515 * //=> '2019-09-10T00:00:00'
56516 */
56517
56518
56519exports.toArray = toArray;
56520
56521const toTimestampString = value => {
56522  if (typeof value === 'string') {
56523    return value.replace(' ', 'T');
56524  }
56525
56526  return value;
56527};
56528
56529exports.toTimestampString = toTimestampString;
56530
56531},{}],424:[function(require,module,exports){
56532"use strict";
56533
56534Object.defineProperty(exports, "__esModule", {
56535  value: true
56536});
56537exports.version = void 0;
56538const version = '2.9.5';
56539exports.version = version;
56540
56541},{}],425:[function(require,module,exports){
56542"use strict";
56543
56544Object.defineProperty(exports, "__esModule", {
56545  value: true
56546});
56547exports.StorageClient = void 0;
56548
56549var _StorageFileApi = _interopRequireDefault(require("./packages/StorageFileApi"));
56550
56551var _StorageBucketApi = _interopRequireDefault(require("./packages/StorageBucketApi"));
56552
56553function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
56554
56555class StorageClient extends _StorageBucketApi.default {
56556  constructor(url, headers = {}, fetch) {
56557    super(url, headers, fetch);
56558  }
56559  /**
56560   * Perform file operation in a bucket.
56561   *
56562   * @param id The bucket id to operate on.
56563   */
56564
56565
56566  from(id) {
56567    return new _StorageFileApi.default(this.url, this.headers, id, this.fetch);
56568  }
56569
56570}
56571
56572exports.StorageClient = StorageClient;
56573
56574},{"./packages/StorageBucketApi":433,"./packages/StorageFileApi":434}],426:[function(require,module,exports){
56575"use strict";
56576
56577Object.defineProperty(exports, "__esModule", {
56578  value: true
56579});
56580var _exportNames = {
56581  StorageClient: true
56582};
56583Object.defineProperty(exports, "StorageClient", {
56584  enumerable: true,
56585  get: function () {
56586    return _StorageClient.StorageClient;
56587  }
56588});
56589
56590var _StorageClient = require("./StorageClient");
56591
56592var _types = require("./lib/types");
56593
56594Object.keys(_types).forEach(function (key) {
56595  if (key === "default" || key === "__esModule") return;
56596  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
56597  if (key in exports && exports[key] === _types[key]) return;
56598  Object.defineProperty(exports, key, {
56599    enumerable: true,
56600    get: function () {
56601      return _types[key];
56602    }
56603  });
56604});
56605
56606var _errors = require("./lib/errors");
56607
56608Object.keys(_errors).forEach(function (key) {

56609  if (key === "default" || key === "__esModule") return;
56610  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
56611  if (key in exports && exports[key] === _errors[key]) return;
56612  Object.defineProperty(exports, key, {
56613    enumerable: true,
56614    get: function () {
56615      return _errors[key];
56616    }
56617  });
56618});
56619
56620},{"./StorageClient":425,"./lib/errors":428,"./lib/types":431}],427:[function(require,module,exports){
56621"use strict";
56622
56623Object.defineProperty(exports, "__esModule", {
56624  value: true
56625});
56626exports.DEFAULT_HEADERS = void 0;
56627
56628var _version = require("./version");
56629
56630const DEFAULT_HEADERS = {
56631  'X-Client-Info': `storage-js/${_version.version}`
56632};
56633exports.DEFAULT_HEADERS = DEFAULT_HEADERS;
56634
56635},{"./version":432}],428:[function(require,module,exports){
56636"use strict";
56637
56638Object.defineProperty(exports, "__esModule", {
56639  value: true
56640});
56641exports.StorageUnknownError = exports.StorageError = exports.StorageApiError = void 0;
56642exports.isStorageError = isStorageError;
56643
56644class StorageError extends Error {
56645  constructor(message) {
56646    super(message);
56647    this.__isStorageError = true;
56648    this.name = 'StorageError';
56649  }
56650
56651}
56652
56653exports.StorageError = StorageError;
56654
56655function isStorageError(error) {
56656  return typeof error === 'object' && error !== null && '__isStorageError' in error;
56657}
56658
56659class StorageApiError extends StorageError {
56660  constructor(message, status) {
56661    super(message);
56662    this.name = 'StorageApiError';
56663    this.status = status;
56664  }
56665
56666  toJSON() {
56667    return {
56668      name: this.name,
56669      message: this.message,
56670      status: this.status
56671    };
56672  }
56673
56674}
56675
56676exports.StorageApiError = StorageApiError;
56677
56678class StorageUnknownError extends StorageError {
56679  constructor(message, originalError) {
56680    super(message);
56681    this.name = 'StorageUnknownError';
56682    this.originalError = originalError;
56683  }
56684
56685}
56686
56687exports.StorageUnknownError = StorageUnknownError;
56688
56689},{}],429:[function(require,module,exports){
56690"use strict";
56691
56692Object.defineProperty(exports, "__esModule", {
56693  value: true
56694});
56695exports.get = get;
56696exports.post = post;
56697exports.put = put;
56698exports.remove = remove;
56699
56700var _errors = require("./errors");
56701
56702var _helpers = require("./helpers");
56703
56704var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
56705  function adopt(value) {
56706    return value instanceof P ? value : new P(function (resolve) {
56707      resolve(value);
56708    });
56709  }
56710
56711  return new (P || (P = Promise))(function (resolve, reject) {
56712    function fulfilled(value) {
56713      try {
56714        step(generator.next(value));
56715      } catch (e) {
56716        reject(e);
56717      }
56718    }
56719
56720    function rejected(value) {
56721      try {
56722        step(generator["throw"](value));
56723      } catch (e) {
56724        reject(e);
56725      }
56726    }
56727
56728    function step(result) {
56729      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
56730    }
56731
56732    step((generator = generator.apply(thisArg, _arguments || [])).next());
56733  });
56734};
56735
56736const _getErrorMessage = err => err.msg || err.message || err.error_description || err.error || JSON.stringify(err);
56737
56738const handleError = (error, reject) => __awaiter(void 0, void 0, void 0, function* () {
56739  const Res = yield (0, _helpers.resolveResponse)();
56740
56741  if (error instanceof Res) {
56742    error.json().then(err => {
56743      reject(new _errors.StorageApiError(_getErrorMessage(err), error.status || 500));
56744    }).catch(err => {
56745      reject(new _errors.StorageUnknownError(_getErrorMessage(err), err));
56746    });
56747  } else {
56748    reject(new _errors.StorageUnknownError(_getErrorMessage(error), error));
56749  }
56750});
56751

56752const _getRequestParams = (method, options, parameters, body) => {
56753  const params = {
56754    method,
56755    headers: (options === null || options === void 0 ? void 0 : options.headers) || {}
56756  };
56757
56758  if (method === 'GET') {
56759    return params;
56760  }
56761
56762  params.headers = Object.assign({
56763    'Content-Type': 'application/json'
56764  }, options === null || options === void 0 ? void 0 : options.headers);
56765  params.body = JSON.stringify(body);
56766  return Object.assign(Object.assign({}, params), parameters);
56767};
56768
56769function _handleRequest(fetcher, method, url, options, parameters, body) {
56770  return __awaiter(this, void 0, void 0, function* () {
56771    return new Promise((resolve, reject) => {
56772      fetcher(url, _getRequestParams(method, options, parameters, body)).then(result => {
56773        if (!result.ok) throw result;
56774        if (options === null || options === void 0 ? void 0 : options.noResolveJson) return result;
56775        return result.json();
56776      }).then(data => resolve(data)).catch(error => handleError(error, reject));
56777    });
56778  });
56779}
56780
56781function get(fetcher, url, options, parameters) {
56782  return __awaiter(this, void 0, void 0, function* () {
56783    return _handleRequest(fetcher, 'GET', url, options, parameters);
56784  });
56785}
56786
56787function post(fetcher, url, body, options, parameters) {
56788  return __awaiter(this, void 0, void 0, function* () {
56789    return _handleRequest(fetcher, 'POST', url, options, parameters, body);
56790  });
56791}
56792
56793function put(fetcher, url, body, options, parameters) {
56794  return __awaiter(this, void 0, void 0, function* () {
56795    return _handleRequest(fetcher, 'PUT', url, options, parameters, body);
56796  });
56797}
56798
56799function remove(fetcher, url, body, options, parameters) {
56800  return __awaiter(this, void 0, void 0, function* () {
56801    return _handleRequest(fetcher, 'DELETE', url, options, parameters, body);
56802  });
56803}
56804
56805},{"./errors":428,"./helpers":430}],430:[function(require,module,exports){
56806"use strict";
56807
56808Object.defineProperty(exports, "__esModule", {
56809  value: true
56810});
56811exports.resolveResponse = exports.resolveFetch = void 0;
56812
56813var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
56814  function adopt(value) {
56815    return value instanceof P ? value : new P(function (resolve) {
56816      resolve(value);
56817    });
56818  }
56819
56820  return new (P || (P = Promise))(function (resolve, reject) {
56821    function fulfilled(value) {
56822      try {
56823        step(generator.next(value));
56824      } catch (e) {
56825        reject(e);
56826      }
56827    }
56828
56829    function rejected(value) {
56830      try {
56831        step(generator["throw"](value));
56832      } catch (e) {
56833        reject(e);
56834      }
56835    }
56836
56837    function step(result) {
56838      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
56839    }
56840
56841    step((generator = generator.apply(thisArg, _arguments || [])).next());
56842  });
56843};
56844
56845const resolveFetch = customFetch => {
56846  let _fetch;
56847
56848  if (customFetch) {
56849    _fetch = customFetch;
56850  } else if (typeof fetch === 'undefined') {
56851    _fetch = (...args) => import('@supabase/node-fetch').then(({
56852      default: fetch
56853    }) => fetch(...args));
56854  } else {
56855    _fetch = fetch;
56856  }
56857
56858  return (...args) => _fetch(...args);
56859};
56860
56861exports.resolveFetch = resolveFetch;
56862
56863const resolveResponse = () => __awaiter(void 0, void 0, void 0, function* () {
56864  if (typeof Response === 'undefined') {
56865    // @ts-ignore
56866    return (yield import('@supabase/node-fetch')).Response;
56867  }
56868
56869  return Response;
56870});
56871
56872exports.resolveResponse = resolveResponse;
56873
56874},{}],431:[function(require,module,exports){
56875arguments[4][399][0].apply(exports,arguments)
56876},{"dup":399}],432:[function(require,module,exports){
56877"use strict";
56878
56879Object.defineProperty(exports, "__esModule", {
56880  value: true
56881});
56882exports.version = void 0;
56883// generated by genversion
56884const version = '2.5.5';
56885exports.version = version;
56886
56887},{}],433:[function(require,module,exports){
56888"use strict";
56889
56890Object.defineProperty(exports, "__esModule", {
56891  value: true
56892});
56893exports.default = void 0;
56894
56895var _constants = require("../lib/constants");
56896
56897var _errors = require("../lib/errors");
56898
56899var _fetch = require("../lib/fetch");
56900
56901var _helpers = require("../lib/helpers");
56902
56903var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
56904  function adopt(value) {
56905    return value instanceof P ? value : new P(function (resolve) {
56906      resolve(value);
56907    });
56908  }
56909
56910  return new (P || (P = Promise))(function (resolve, reject) {
56911    function fulfilled(value) {

56912      try {
56913        step(generator.next(value));
56914      } catch (e) {
56915        reject(e);
56916      }
56917    }
56918
56919    function rejected(value) {
56920      try {
56921        step(generator["throw"](value));
56922      } catch (e) {
56923        reject(e);
56924      }
56925    }
56926
56927    function step(result) {
56928      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
56929    }
56930
56931    step((generator = generator.apply(thisArg, _arguments || [])).next());
56932  });
56933};
56934
56935class StorageBucketApi {
56936  constructor(url, headers = {}, fetch) {
56937    this.url = url;
56938    this.headers = Object.assign(Object.assign({}, _constants.DEFAULT_HEADERS), headers);
56939    this.fetch = (0, _helpers.resolveFetch)(fetch);
56940  }
56941  /**
56942   * Retrieves the details of all Storage buckets within an existing project.
56943   */
56944
56945
56946  listBuckets() {
56947    return __awaiter(this, void 0, void 0, function* () {
56948      try {
56949        const data = yield (0, _fetch.get)(this.fetch, `${this.url}/bucket`, {
56950          headers: this.headers
56951        });
56952        return {
56953          data,
56954          error: null
56955        };
56956      } catch (error) {
56957        if ((0, _errors.isStorageError)(error)) {
56958          return {
56959            data: null,
56960            error
56961          };
56962        }
56963
56964        throw error;
56965      }
56966    });
56967  }
56968  /**
56969   * Retrieves the details of an existing Storage bucket.
56970   *
56971   * @param id The unique identifier of the bucket you would like to retrieve.
56972   */
56973
56974
56975  getBucket(id) {
56976    return __awaiter(this, void 0, void 0, function* () {
56977      try {
56978        const data = yield (0, _fetch.get)(this.fetch, `${this.url}/bucket/${id}`, {
56979          headers: this.headers
56980        });
56981        return {
56982          data,
56983          error: null
56984        };
56985      } catch (error) {
56986        if ((0, _errors.isStorageError)(error)) {
56987          return {
56988            data: null,
56989            error
56990          };
56991        }
56992
56993        throw error;
56994      }
56995    });
56996  }
56997  /**
56998   * Creates a new Storage bucket
56999   *
57000   * @param id A unique identifier for the bucket you are creating.
57001   * @param options.public The visibility of the bucket. Public buckets don't require an authorization token to download objects, but still require a valid token for all other operations. By default, buckets are private.
57002   * @param options.fileSizeLimit specifies the max file size in bytes that can be uploaded to this bucket.
57003   * The global file size limit takes precedence over this value.
57004   * The default value is null, which doesn't set a per bucket file size limit.
57005   * @param options.allowedMimeTypes specifies the allowed mime types that this bucket can accept during upload.
57006   * The default value is null, which allows files with all mime types to be uploaded.
57007   * Each mime type specified can be a wildcard, e.g. image/*, or a specific mime type, e.g. image/png.
57008   * @returns newly created bucket id
57009   */
57010
57011
57012  createBucket(id, options = {
57013    public: false
57014  }) {
57015    return __awaiter(this, void 0, void 0, function* () {
57016      try {
57017        const data = yield (0, _fetch.post)(this.fetch, `${this.url}/bucket`, {
57018          id,
57019          name: id,
57020          public: options.public,
57021          file_size_limit: options.fileSizeLimit,
57022          allowed_mime_types: options.allowedMimeTypes
57023        }, {
57024          headers: this.headers
57025        });
57026        return {
57027          data,
57028          error: null
57029        };
57030      } catch (error) {
57031        if ((0, _errors.isStorageError)(error)) {
57032          return {
57033            data: null,
57034            error
57035          };
57036        }
57037
57038        throw error;
57039      }
57040    });
57041  }
57042  /**
57043   * Updates a Storage bucket
57044   *
57045   * @param id A unique identifier for the bucket you are updating.
57046   * @param options.public The visibility of the bucket. Public buckets don't require an authorization token to download objects, but still require a valid token for all other operations.
57047   * @param options.fileSizeLimit specifies the max file size in bytes that can be uploaded to this bucket.
57048   * The global file size limit takes precedence over this value.
57049   * The default value is null, which doesn't set a per bucket file size limit.
57050   * @param options.allowedMimeTypes specifies the allowed mime types that this bucket can accept during upload.
57051   * The default value is null, which allows files with all mime types to be uploaded.

57052   * Each mime type specified can be a wildcard, e.g. image/*, or a specific mime type, e.g. image/png.
57053   */
57054
57055
57056  updateBucket(id, options) {
57057    return __awaiter(this, void 0, void 0, function* () {
57058      try {
57059        const data = yield (0, _fetch.put)(this.fetch, `${this.url}/bucket/${id}`, {
57060          id,
57061          name: id,
57062          public: options.public,
57063          file_size_limit: options.fileSizeLimit,
57064          allowed_mime_types: options.allowedMimeTypes
57065        }, {
57066          headers: this.headers
57067        });
57068        return {
57069          data,
57070          error: null
57071        };
57072      } catch (error) {
57073        if ((0, _errors.isStorageError)(error)) {
57074          return {
57075            data: null,
57076            error
57077          };
57078        }
57079
57080        throw error;
57081      }
57082    });
57083  }
57084  /**
57085   * Removes all objects inside a single bucket.
57086   *
57087   * @param id The unique identifier of the bucket you would like to empty.
57088   */
57089
57090
57091  emptyBucket(id) {
57092    return __awaiter(this, void 0, void 0, function* () {
57093      try {
57094        const data = yield (0, _fetch.post)(this.fetch, `${this.url}/bucket/${id}/empty`, {}, {
57095          headers: this.headers
57096        });
57097        return {
57098          data,
57099          error: null
57100        };
57101      } catch (error) {
57102        if ((0, _errors.isStorageError)(error)) {
57103          return {
57104            data: null,
57105            error
57106          };
57107        }
57108
57109        throw error;
57110      }
57111    });
57112  }
57113  /**
57114   * Deletes an existing bucket. A bucket can't be deleted with existing objects inside it.
57115   * You must first `empty()` the bucket.
57116   *
57117   * @param id The unique identifier of the bucket you would like to delete.
57118   */
57119
57120
57121  deleteBucket(id) {
57122    return __awaiter(this, void 0, void 0, function* () {
57123      try {
57124        const data = yield (0, _fetch.remove)(this.fetch, `${this.url}/bucket/${id}`, {}, {
57125          headers: this.headers
57126        });
57127        return {
57128          data,
57129          error: null
57130        };
57131      } catch (error) {
57132        if ((0, _errors.isStorageError)(error)) {
57133          return {
57134            data: null,
57135            error
57136          };
57137        }
57138
57139        throw error;
57140      }
57141    });
57142  }
57143
57144}
57145
57146exports.default = StorageBucketApi;
57147
57148},{"../lib/constants":427,"../lib/errors":428,"../lib/fetch":429,"../lib/helpers":430}],434:[function(require,module,exports){
57149"use strict";
57150
57151Object.defineProperty(exports, "__esModule", {
57152  value: true
57153});
57154exports.default = void 0;
57155
57156var _errors = require("../lib/errors");
57157
57158var _fetch = require("../lib/fetch");
57159
57160var _helpers = require("../lib/helpers");
57161
57162var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
57163  function adopt(value) {
57164    return value instanceof P ? value : new P(function (resolve) {
57165      resolve(value);
57166    });
57167  }
57168
57169  return new (P || (P = Promise))(function (resolve, reject) {
57170    function fulfilled(value) {
57171      try {
57172        step(generator.next(value));
57173      } catch (e) {
57174        reject(e);
57175      }
57176    }
57177
57178    function rejected(value) {
57179      try {
57180        step(generator["throw"](value));
57181      } catch (e) {
57182        reject(e);
57183      }
57184    }
57185
57186    function step(result) {
57187      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
57188    }
57189
57190    step((generator = generator.apply(thisArg, _arguments || [])).next());
57191  });
57192};
57193
57194const DEFAULT_SEARCH_OPTIONS = {
57195  limit: 100,
57196  offset: 0,
57197  sortBy: {
57198    column: 'name',
57199    order: 'asc'
57200  }
57201};
57202const DEFAULT_FILE_OPTIONS = {
57203  cacheControl: '3600',
57204  contentType: 'text/plain;charset=UTF-8',
57205  upsert: false
57206};
57207
57208class StorageFileApi {
57209  constructor(url, headers = {}, bucketId, fetch) {
57210    this.url = url;
57211    this.headers = headers;
57212    this.bucketId = bucketId;
57213    this.fetch = (0, _helpers.resolveFetch)(fetch);
57214  }
57215  /**
57216   * Uploads a file to an existing bucket or replaces an existing file at the specified path with a new one.
57217   *
57218   * @param method HTTP method.
57219   * @param path The relative file path. Should be of the format `folder/subfolder/filename.png`. The bucket must already exist before attempting to upload.
57220   * @param fileBody The body of the file to be stored in the bucket.
57221   */
57222
57223
57224  uploadOrUpdate(method, path, fileBody, fileOptions) {
57225    return __awaiter(this, void 0, void 0, function* () {

57226      try {
57227        let body;
57228        const options = Object.assign(Object.assign({}, DEFAULT_FILE_OPTIONS), fileOptions);
57229        const headers = Object.assign(Object.assign({}, this.headers), method === 'POST' && {
57230          'x-upsert': String(options.upsert)
57231        });
57232
57233        if (typeof Blob !== 'undefined' && fileBody instanceof Blob) {
57234          body = new FormData();
57235          body.append('cacheControl', options.cacheControl);
57236          body.append('', fileBody);
57237        } else if (typeof FormData !== 'undefined' && fileBody instanceof FormData) {
57238          body = fileBody;
57239          body.append('cacheControl', options.cacheControl);
57240        } else {
57241          body = fileBody;
57242          headers['cache-control'] = `max-age=${options.cacheControl}`;
57243          headers['content-type'] = options.contentType;
57244        }
57245
57246        const cleanPath = this._removeEmptyFolders(path);
57247
57248        const _path = this._getFinalPath(cleanPath);
57249
57250        const res = yield this.fetch(`${this.url}/object/${_path}`, Object.assign({
57251          method,
57252          body: body,
57253          headers
57254        }, (options === null || options === void 0 ? void 0 : options.duplex) ? {
57255          duplex: options.duplex
57256        } : {}));
57257        const data = yield res.json();
57258
57259        if (res.ok) {
57260          return {
57261            data: {
57262              path: cleanPath,
57263              id: data.Id,
57264              fullPath: data.Key
57265            },
57266            error: null
57267          };
57268        } else {
57269          const error = data;
57270          return {
57271            data: null,
57272            error
57273          };
57274        }
57275      } catch (error) {
57276        if ((0, _errors.isStorageError)(error)) {
57277          return {
57278            data: null,
57279            error
57280          };
57281        }
57282
57283        throw error;
57284      }
57285    });
57286  }
57287  /**
57288   * Uploads a file to an existing bucket.
57289   *
57290   * @param path The file path, including the file name. Should be of the format `folder/subfolder/filename.png`. The bucket must already exist before attempting to upload.
57291   * @param fileBody The body of the file to be stored in the bucket.
57292   */
57293
57294
57295  upload(path, fileBody, fileOptions) {
57296    return __awaiter(this, void 0, void 0, function* () {
57297      return this.uploadOrUpdate('POST', path, fileBody, fileOptions);
57298    });
57299  }
57300  /**
57301   * Upload a file with a token generated from `createSignedUploadUrl`.
57302   * @param path The file path, including the file name. Should be of the format `folder/subfolder/filename.png`. The bucket must already exist before attempting to upload.
57303   * @param token The token generated from `createSignedUploadUrl`
57304   * @param fileBody The body of the file to be stored in the bucket.
57305   */
57306
57307
57308  uploadToSignedUrl(path, token, fileBody, fileOptions) {
57309    return __awaiter(this, void 0, void 0, function* () {
57310      const cleanPath = this._removeEmptyFolders(path);
57311
57312      const _path = this._getFinalPath(cleanPath);
57313
57314      const url = new URL(this.url + `/object/upload/sign/${_path}`);
57315      url.searchParams.set('token', token);
57316
57317      try {
57318        let body;
57319        const options = Object.assign({
57320          upsert: DEFAULT_FILE_OPTIONS.upsert
57321        }, fileOptions);
57322        const headers = Object.assign(Object.assign({}, this.headers), {
57323          'x-upsert': String(options.upsert)
57324        });
57325
57326        if (typeof Blob !== 'undefined' && fileBody instanceof Blob) {
57327          body = new FormData();
57328          body.append('cacheControl', options.cacheControl);
57329          body.append('', fileBody);
57330        } else if (typeof FormData !== 'undefined' && fileBody instanceof FormData) {
57331          body = fileBody;
57332          body.append('cacheControl', options.cacheControl);
57333        } else {
57334          body = fileBody;
57335          headers['cache-control'] = `max-age=${options.cacheControl}`;
57336          headers['content-type'] = options.contentType;
57337        }
57338
57339        const res = yield this.fetch(url.toString(), {
57340          method: 'PUT',
57341          body: body,
57342          headers
57343        });
57344        const data = yield res.json();
57345
57346        if (res.ok) {
57347          return {
57348            data: {
57349              path: cleanPath,
57350              fullPath: data.Key
57351            },
57352            error: null
57353          };
57354        } else {
57355          const error = data;
57356          return {
57357            data: null,
57358            error
57359          };
57360        }
57361      } catch (error) {
57362        if ((0, _errors.isStorageError)(error)) {
57363          return {
57364            data: null,
57365            error
57366          };
57367        }
57368
57369        throw error;
57370      }
57371    });
57372  }
57373  /**
57374   * Creates a signed upload URL.
57375   * Signed upload URLs can be used to upload files to the bucket without further authentication.
57376   * They are valid for 2 hours.
57377   * @param path The file path, including the current file name. For example `folder/image.png`.
57378   */
57379
57380
57381  createSignedUploadUrl(path) {
57382    return __awaiter(this, void 0, void 0, function* () {

57383      try {
57384        let _path = this._getFinalPath(path);
57385
57386        const data = yield (0, _fetch.post)(this.fetch, `${this.url}/object/upload/sign/${_path}`, {}, {
57387          headers: this.headers
57388        });
57389        const url = new URL(this.url + data.url);
57390        const token = url.searchParams.get('token');
57391
57392        if (!token) {
57393          throw new _errors.StorageError('No token returned by API');
57394        }
57395
57396        return {
57397          data: {
57398            signedUrl: url.toString(),
57399            path,
57400            token
57401          },
57402          error: null
57403        };
57404      } catch (error) {
57405        if ((0, _errors.isStorageError)(error)) {
57406          return {
57407            data: null,
57408            error
57409          };
57410        }
57411
57412        throw error;
57413      }
57414    });
57415  }
57416  /**
57417   * Replaces an existing file at the specified path with a new one.
57418   *
57419   * @param path The relative file path. Should be of the format `folder/subfolder/filename.png`. The bucket must already exist before attempting to update.
57420   * @param fileBody The body of the file to be stored in the bucket.
57421   */
57422
57423
57424  update(path, fileBody, fileOptions) {
57425    return __awaiter(this, void 0, void 0, function* () {
57426      return this.uploadOrUpdate('PUT', path, fileBody, fileOptions);
57427    });
57428  }
57429  /**
57430   * Moves an existing file to a new path in the same bucket.
57431   *
57432   * @param fromPath The original file path, including the current file name. For example `folder/image.png`.
57433   * @param toPath The new file path, including the new file name. For example `folder/image-new.png`.
57434   */
57435
57436
57437  move(fromPath, toPath) {
57438    return __awaiter(this, void 0, void 0, function* () {
57439      try {
57440        const data = yield (0, _fetch.post)(this.fetch, `${this.url}/object/move`, {
57441          bucketId: this.bucketId,
57442          sourceKey: fromPath,
57443          destinationKey: toPath
57444        }, {
57445          headers: this.headers
57446        });
57447        return {
57448          data,
57449          error: null
57450        };
57451      } catch (error) {
57452        if ((0, _errors.isStorageError)(error)) {
57453          return {
57454            data: null,
57455            error
57456          };
57457        }
57458
57459        throw error;
57460      }
57461    });
57462  }
57463  /**
57464   * Copies an existing file to a new path in the same bucket.
57465   *
57466   * @param fromPath The original file path, including the current file name. For example `folder/image.png`.
57467   * @param toPath The new file path, including the new file name. For example `folder/image-copy.png`.
57468   */
57469
57470
57471  copy(fromPath, toPath) {
57472    return __awaiter(this, void 0, void 0, function* () {
57473      try {
57474        const data = yield (0, _fetch.post)(this.fetch, `${this.url}/object/copy`, {
57475          bucketId: this.bucketId,
57476          sourceKey: fromPath,
57477          destinationKey: toPath
57478        }, {
57479          headers: this.headers
57480        });
57481        return {
57482          data: {
57483            path: data.Key
57484          },
57485          error: null
57486        };
57487      } catch (error) {
57488        if ((0, _errors.isStorageError)(error)) {
57489          return {
57490            data: null,
57491            error
57492          };
57493        }
57494
57495        throw error;
57496      }
57497    });
57498  }
57499  /**
57500   * Creates a signed URL. Use a signed URL to share a file for a fixed amount of time.
57501   *
57502   * @param path The file path, including the current file name. For example `folder/image.png`.
57503   * @param expiresIn The number of seconds until the signed URL expires. For example, `60` for a URL which is valid for one minute.
57504   * @param options.download triggers the file as a download if set to true. Set this parameter as the name of the file if you want to trigger the download with a different filename.
57505   * @param options.transform Transform the asset before serving it to the client.
57506   */
57507
57508
57509  createSignedUrl(path, expiresIn, options) {
57510    return __awaiter(this, void 0, void 0, function* () {
57511      try {
57512        let _path = this._getFinalPath(path);
57513
57514        let data = yield (0, _fetch.post)(this.fetch, `${this.url}/object/sign/${_path}`, Object.assign({
57515          expiresIn
57516        }, (options === null || options === void 0 ? void 0 : options.transform) ? {
57517          transform: options.transform
57518        } : {}), {
57519          headers: this.headers
57520        });
57521        const downloadQueryParam = (options === null || options === void 0 ? void 0 : options.download) ? `&download=${options.download === true ? '' : options.download}` : '';
57522        const signedUrl = encodeURI(`${this.url}${data.signedURL}${downloadQueryParam}`);
57523        data = {
57524          signedUrl
57525        };
57526        return {
57527          data,
57528          error: null
57529        };
57530      } catch (error) {
57531        if ((0, _errors.isStorageError)(error)) {
57532          return {
57533            data: null,
57534            error
57535          };
57536        }
57537
57538        throw error;
57539      }
57540    });
57541  }
57542  /**
57543   * Creates multiple signed URLs. Use a signed URL to share a file for a fixed amount of time.
57544   *
57545   * @param paths The file paths to be downloaded, including the current file names. For example `['folder/image.png', 'folder2/image2.png']`.
57546   * @param expiresIn The number of seconds until the signed URLs expire. For example, `60` for URLs which are valid for one minute.
57547   * @param options.download triggers the file as a download if set to true. Set this parameter as the name of the file if you want to trigger the download with a different filename.
57548   */
57549
57550
57551  createSignedUrls(paths, expiresIn, options) {
57552    return __awaiter(this, void 0, void 0, function* () {

57553      try {
57554        const data = yield (0, _fetch.post)(this.fetch, `${this.url}/object/sign/${this.bucketId}`, {
57555          expiresIn,
57556          paths
57557        }, {
57558          headers: this.headers
57559        });
57560        const downloadQueryParam = (options === null || options === void 0 ? void 0 : options.download) ? `&download=${options.download === true ? '' : options.download}` : '';
57561        return {
57562          data: data.map(datum => Object.assign(Object.assign({}, datum), {
57563            signedUrl: datum.signedURL ? encodeURI(`${this.url}${datum.signedURL}${downloadQueryParam}`) : null
57564          })),
57565          error: null
57566        };
57567      } catch (error) {
57568        if ((0, _errors.isStorageError)(error)) {
57569          return {
57570            data: null,
57571            error
57572          };
57573        }
57574
57575        throw error;
57576      }
57577    });
57578  }
57579  /**
57580   * Downloads a file from a private bucket. For public buckets, make a request to the URL returned from `getPublicUrl` instead.
57581   *
57582   * @param path The full path and file name of the file to be downloaded. For example `folder/image.png`.
57583   * @param options.transform Transform the asset before serving it to the client.
57584   */
57585
57586
57587  download(path, options) {
57588    return __awaiter(this, void 0, void 0, function* () {
57589      const wantsTransformation = typeof (options === null || options === void 0 ? void 0 : options.transform) !== 'undefined';
57590      const renderPath = wantsTransformation ? 'render/image/authenticated' : 'object';
57591      const transformationQuery = this.transformOptsToQueryString((options === null || options === void 0 ? void 0 : options.transform) || {});
57592      const queryString = transformationQuery ? `?${transformationQuery}` : '';
57593
57594      try {
57595        const _path = this._getFinalPath(path);
57596
57597        const res = yield (0, _fetch.get)(this.fetch, `${this.url}/${renderPath}/${_path}${queryString}`, {
57598          headers: this.headers,
57599          noResolveJson: true
57600        });
57601        const data = yield res.blob();
57602        return {
57603          data,
57604          error: null
57605        };
57606      } catch (error) {
57607        if ((0, _errors.isStorageError)(error)) {
57608          return {
57609            data: null,
57610            error
57611          };
57612        }
57613
57614        throw error;
57615      }
57616    });
57617  }
57618  /**
57619   * A simple convenience function to get the URL for an asset in a public bucket. If you do not want to use this function, you can construct the public URL by concatenating the bucket URL with the path to the asset.
57620   * This function does not verify if the bucket is public. If a public URL is created for a bucket which is not public, you will not be able to download the asset.
57621   *
57622   * @param path The path and name of the file to generate the public URL for. For example `folder/image.png`.
57623   * @param options.download Triggers the file as a download if set to true. Set this parameter as the name of the file if you want to trigger the download with a different filename.
57624   * @param options.transform Transform the asset before serving it to the client.
57625   */
57626
57627
57628  getPublicUrl(path, options) {
57629    const _path = this._getFinalPath(path);
57630
57631    const _queryString = [];
57632    const downloadQueryParam = (options === null || options === void 0 ? void 0 : options.download) ? `download=${options.download === true ? '' : options.download}` : '';
57633
57634    if (downloadQueryParam !== '') {
57635      _queryString.push(downloadQueryParam);
57636    }
57637
57638    const wantsTransformation = typeof (options === null || options === void 0 ? void 0 : options.transform) !== 'undefined';
57639    const renderPath = wantsTransformation ? 'render/image' : 'object';
57640    const transformationQuery = this.transformOptsToQueryString((options === null || options === void 0 ? void 0 : options.transform) || {});
57641
57642    if (transformationQuery !== '') {
57643      _queryString.push(transformationQuery);
57644    }
57645
57646    let queryString = _queryString.join('&');
57647
57648    if (queryString !== '') {
57649      queryString = `?${queryString}`;
57650    }
57651
57652    return {
57653      data: {
57654        publicUrl: encodeURI(`${this.url}/${renderPath}/public/${_path}${queryString}`)
57655      }
57656    };
57657  }
57658  /**
57659   * Deletes files within the same bucket
57660   *
57661   * @param paths An array of files to delete, including the path and file name. For example [`'folder/image.png'`].

57662   */
57663
57664
57665  remove(paths) {
57666    return __awaiter(this, void 0, void 0, function* () {
57667      try {
57668        const data = yield (0, _fetch.remove)(this.fetch, `${this.url}/object/${this.bucketId}`, {
57669          prefixes: paths
57670        }, {
57671          headers: this.headers
57672        });
57673        return {
57674          data,
57675          error: null
57676        };
57677      } catch (error) {
57678        if ((0, _errors.isStorageError)(error)) {
57679          return {
57680            data: null,
57681            error
57682          };
57683        }
57684
57685        throw error;
57686      }
57687    });
57688  }
57689  /**
57690   * Get file metadata
57691   * @param id the file id to retrieve metadata
57692   */
57693  // async getMetadata(
57694  //   id: string
57695  // ): Promise<
57696  //   | {
57697  //       data: Metadata
57698  //       error: null
57699  //     }
57700  //   | {
57701  //       data: null
57702  //       error: StorageError
57703  //     }
57704  // > {
57705  //   try {
57706  //     const data = await get(this.fetch, `${this.url}/metadata/${id}`, { headers: this.headers })
57707  //     return { data, error: null }
57708  //   } catch (error) {
57709  //     if (isStorageError(error)) {
57710  //       return { data: null, error }
57711  //     }
57712  //     throw error
57713  //   }
57714  // }
57715
57716  /**
57717   * Update file metadata
57718   * @param id the file id to update metadata
57719   * @param meta the new file metadata
57720   */
57721  // async updateMetadata(
57722  //   id: string,
57723  //   meta: Metadata
57724  // ): Promise<
57725  //   | {
57726  //       data: Metadata
57727  //       error: null
57728  //     }
57729  //   | {
57730  //       data: null
57731  //       error: StorageError
57732  //     }
57733  // > {
57734  //   try {
57735  //     const data = await post(
57736  //       this.fetch,
57737  //       `${this.url}/metadata/${id}`,
57738  //       { ...meta },
57739  //       { headers: this.headers }
57740  //     )
57741  //     return { data, error: null }
57742  //   } catch (error) {
57743  //     if (isStorageError(error)) {
57744  //       return { data: null, error }
57745  //     }
57746  //     throw error
57747  //   }
57748  // }
57749
57750  /**
57751   * Lists all the files within a bucket.
57752   * @param path The folder path.
57753   */
57754
57755
57756  list(path, options, parameters) {
57757    return __awaiter(this, void 0, void 0, function* () {
57758      try {
57759        const body = Object.assign(Object.assign(Object.assign({}, DEFAULT_SEARCH_OPTIONS), options), {
57760          prefix: path || ''
57761        });
57762        const data = yield (0, _fetch.post)(this.fetch, `${this.url}/object/list/${this.bucketId}`, body, {
57763          headers: this.headers
57764        }, parameters);
57765        return {
57766          data,
57767          error: null
57768        };
57769      } catch (error) {
57770        if ((0, _errors.isStorageError)(error)) {
57771          return {
57772            data: null,
57773            error
57774          };
57775        }
57776
57777        throw error;
57778      }
57779    });
57780  }
57781
57782  _getFinalPath(path) {
57783    return `${this.bucketId}/${path}`;
57784  }
57785
57786  _removeEmptyFolders(path) {
57787    return path.replace(/^\/|\/$/g, '').replace(/\/+/g, '/');
57788  }
57789
57790  transformOptsToQueryString(transform) {
57791    const params = [];
57792
57793    if (transform.width) {
57794      params.push(`width=${transform.width}`);
57795    }
57796
57797    if (transform.height) {
57798      params.push(`height=${transform.height}`);
57799    }
57800
57801    if (transform.resize) {
57802      params.push(`resize=${transform.resize}`);
57803    }
57804
57805    if (transform.format) {
57806      params.push(`format=${transform.format}`);
57807    }
57808
57809    if (transform.quality) {
57810      params.push(`quality=${transform.quality}`);
57811    }
57812
57813    return params.join('&');
57814  }
57815
57816}
57817
57818exports.default = StorageFileApi;
57819
57820},{"../lib/errors":428,"../lib/fetch":429,"../lib/helpers":430}],435:[function(require,module,exports){
57821"use strict";
57822
57823Object.defineProperty(exports, "__esModule", {
57824  value: true
57825});
57826exports.default = void 0;
57827
57828var _functionsJs = require("@supabase/functions-js");
57829
57830var _postgrestJs = require("@supabase/postgrest-js");
57831
57832var _realtimeJs = require("@supabase/realtime-js");
57833
57834var _storageJs = require("@supabase/storage-js");
57835
57836var _constants = require("./lib/constants");
57837
57838var _fetch = require("./lib/fetch");
57839
57840var _helpers = require("./lib/helpers");
57841
57842var _SupabaseAuthClient = require("./lib/SupabaseAuthClient");
57843
57844var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
57845  function adopt(value) {
57846    return value instanceof P ? value : new P(function (resolve) {
57847      resolve(value);
57848    });
57849  }
57850
57851  return new (P || (P = Promise))(function (resolve, reject) {
57852    function fulfilled(value) {

57853      try {
57854        step(generator.next(value));
57855      } catch (e) {
57856        reject(e);
57857      }
57858    }
57859
57860    function rejected(value) {
57861      try {
57862        step(generator["throw"](value));
57863      } catch (e) {
57864        reject(e);
57865      }
57866    }
57867
57868    function step(result) {
57869      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
57870    }
57871
57872    step((generator = generator.apply(thisArg, _arguments || [])).next());
57873  });
57874};
57875
57876/**
57877 * Supabase Client.
57878 *
57879 * An isomorphic Javascript client for interacting with Postgres.
57880 */
57881class SupabaseClient {
57882  /**
57883   * Create a new client for use in the browser.
57884   * @param supabaseUrl The unique Supabase URL which is supplied when you create a new project in your project dashboard.
57885   * @param supabaseKey The unique Supabase Key which is supplied when you create a new project in your project dashboard.
57886   * @param options.db.schema You can switch in between schemas. The schema needs to be on the list of exposed schemas inside Supabase.
57887   * @param options.auth.autoRefreshToken Set to "true" if you want to automatically refresh the token before expiring.
57888   * @param options.auth.persistSession Set to "true" if you want to automatically save the user session into local storage.
57889   * @param options.auth.detectSessionInUrl Set to "true" if you want to automatically detects OAuth grants in the URL and signs in the user.
57890   * @param options.realtime Options passed along to realtime-js constructor.
57891   * @param options.global.fetch A custom fetch implementation.
57892   * @param options.global.headers Any additional headers to send with each network request.
57893   */
57894  constructor(supabaseUrl, supabaseKey, options) {
57895    var _a, _b, _c;
57896
57897    this.supabaseUrl = supabaseUrl;
57898    this.supabaseKey = supabaseKey;
57899    if (!supabaseUrl) throw new Error('supabaseUrl is required.');
57900    if (!supabaseKey) throw new Error('supabaseKey is required.');
57901
57902    const _supabaseUrl = (0, _helpers.stripTrailingSlash)(supabaseUrl);
57903
57904    this.realtimeUrl = `${_supabaseUrl}/realtime/v1`.replace(/^http/i, 'ws');
57905    this.authUrl = `${_supabaseUrl}/auth/v1`;
57906    this.storageUrl = `${_supabaseUrl}/storage/v1`;
57907    this.functionsUrl = `${_supabaseUrl}/functions/v1`; // default storage key uses the supabase project ref as a namespace
57908
57909    const defaultStorageKey = `sb-${new URL(this.authUrl).hostname.split('.')[0]}-auth-token`;
57910    const DEFAULTS = {
57911      db: _constants.DEFAULT_DB_OPTIONS,
57912      realtime: _constants.DEFAULT_REALTIME_OPTIONS,
57913      auth: Object.assign(Object.assign({}, _constants.DEFAULT_AUTH_OPTIONS), {
57914        storageKey: defaultStorageKey
57915      }),
57916      global: _constants.DEFAULT_GLOBAL_OPTIONS
57917    };
57918    const settings = (0, _helpers.applySettingDefaults)(options !== null && options !== void 0 ? options : {}, DEFAULTS);
57919    this.storageKey = (_a = settings.auth.storageKey) !== null && _a !== void 0 ? _a : '';
57920    this.headers = (_b = settings.global.headers) !== null && _b !== void 0 ? _b : {};
57921    this.auth = this._initSupabaseAuthClient((_c = settings.auth) !== null && _c !== void 0 ? _c : {}, this.headers, settings.global.fetch);
57922    this.fetch = (0, _fetch.fetchWithAuth)(supabaseKey, this._getAccessToken.bind(this), settings.global.fetch);
57923    this.realtime = this._initRealtimeClient(Object.assign({
57924      headers: this.headers
57925    }, settings.realtime));
57926    this.rest = new _postgrestJs.PostgrestClient(`${_supabaseUrl}/rest/v1`, {
57927      headers: this.headers,
57928      schema: settings.db.schema,
57929      fetch: this.fetch
57930    });
57931
57932    this._listenForAuthEvents();
57933  }
57934  /**
57935   * Supabase Functions allows you to deploy and invoke edge functions.
57936   */
57937
57938
57939  get functions() {
57940    return new _functionsJs.FunctionsClient(this.functionsUrl, {
57941      headers: this.headers,
57942      customFetch: this.fetch
57943    });
57944  }
57945  /**
57946   * Supabase Storage allows you to manage user-generated content, such as photos or videos.
57947   */
57948
57949
57950  get storage() {
57951    return new _storageJs.StorageClient(this.storageUrl, this.headers, this.fetch);
57952  }
57953  /**
57954   * Perform a query on a table or a view.
57955   *
57956   * @param relation - The table or view name to query
57957   */
57958
57959
57960  from(relation) {
57961    return this.rest.from(relation);
57962  } // NOTE: signatures must be kept in sync with PostgrestClient.schema
57963
57964  /**
57965   * Select a schema to query or perform an function (rpc) call.
57966   *
57967   * The schema needs to be on the list of exposed schemas inside Supabase.
57968   *
57969   * @param schema - The schema to query
57970   */
57971
57972
57973  schema(schema) {
57974    return this.rest.schema(schema);
57975  } // NOTE: signatures must be kept in sync with PostgrestClient.rpc
57976
57977  /**
57978   * Perform a function call.
57979   *
57980   * @param fn - The function name to call
57981   * @param args - The arguments to pass to the function call

57982   * @param options - Named parameters
57983   * @param options.head - When set to `true`, `data` will not be returned.
57984   * Useful if you only need the count.
57985   * @param options.get - When set to `true`, the function will be called with
57986   * read-only access mode.
57987   * @param options.count - Count algorithm to use to count rows returned by the
57988   * function. Only applicable for [set-returning
57989   * functions](https://www.postgresql.org/docs/current/functions-srf.html).
57990   *
57991   * `"exact"`: Exact but slow count algorithm. Performs a `COUNT(*)` under the
57992   * hood.
57993   *
57994   * `"planned"`: Approximated but fast count algorithm. Uses the Postgres
57995   * statistics under the hood.
57996   *
57997   * `"estimated"`: Uses exact count for low numbers and planned count for high
57998   * numbers.
57999   */
58000
58001
58002  rpc(fn, args = {}, options = {}) {
58003    return this.rest.rpc(fn, args, options);
58004  }
58005  /**
58006   * Creates a Realtime channel with Broadcast, Presence, and Postgres Changes.
58007   *
58008   * @param {string} name - The name of the Realtime channel.
58009   * @param {Object} opts - The options to pass to the Realtime channel.
58010   *
58011   */
58012
58013
58014  channel(name, opts = {
58015    config: {}
58016  }) {
58017    return this.realtime.channel(name, opts);
58018  }
58019  /**
58020   * Returns all Realtime channels.
58021   */
58022
58023
58024  getChannels() {
58025    return this.realtime.getChannels();
58026  }
58027  /**
58028   * Unsubscribes and removes Realtime channel from Realtime client.
58029   *
58030   * @param {RealtimeChannel} channel - The name of the Realtime channel.
58031   *
58032   */
58033
58034
58035  removeChannel(channel) {
58036    return this.realtime.removeChannel(channel);
58037  }
58038  /**
58039   * Unsubscribes and removes all Realtime channels from Realtime client.
58040   */
58041
58042
58043  removeAllChannels() {
58044    return this.realtime.removeAllChannels();
58045  }
58046
58047  _getAccessToken() {
58048    var _a, _b;
58049
58050    return __awaiter(this, void 0, void 0, function* () {
58051      const {
58052        data
58053      } = yield this.auth.getSession();
58054      return (_b = (_a = data.session) === null || _a === void 0 ? void 0 : _a.access_token) !== null && _b !== void 0 ? _b : null;
58055    });
58056  }
58057
58058  _initSupabaseAuthClient({
58059    autoRefreshToken,
58060    persistSession,
58061    detectSessionInUrl,
58062    storage,
58063    storageKey,
58064    flowType,
58065    debug
58066  }, headers, fetch) {
58067    var _a;
58068
58069    const authHeaders = {
58070      Authorization: `Bearer ${this.supabaseKey}`,
58071      apikey: `${this.supabaseKey}`
58072    };
58073    return new _SupabaseAuthClient.SupabaseAuthClient({
58074      url: this.authUrl,
58075      headers: Object.assign(Object.assign({}, authHeaders), headers),
58076      storageKey: storageKey,
58077      autoRefreshToken,
58078      persistSession,
58079      detectSessionInUrl,
58080      storage,
58081      flowType,
58082      debug,
58083      fetch,
58084      // auth checks if there is a custom authorizaiton header using this flag
58085      // so it knows whether to return an error when getUser is called with no session
58086      hasCustomAuthorizationHeader: (_a = 'Authorization' in this.headers) !== null && _a !== void 0 ? _a : false
58087    });
58088  }
58089
58090  _initRealtimeClient(options) {
58091    return new _realtimeJs.RealtimeClient(this.realtimeUrl, Object.assign(Object.assign({}, options), {
58092      params: Object.assign({
58093        apikey: this.supabaseKey
58094      }, options === null || options === void 0 ? void 0 : options.params)
58095    }));
58096  }
58097
58098  _listenForAuthEvents() {
58099    let data = this.auth.onAuthStateChange((event, session) => {
58100      this._handleTokenChanged(event, 'CLIENT', session === null || session === void 0 ? void 0 : session.access_token);
58101    });
58102    return data;
58103  }
58104
58105  _handleTokenChanged(event, source, token) {
58106    if ((event === 'TOKEN_REFRESHED' || event === 'SIGNED_IN') && this.changedAccessToken !== token) {
58107      // Token has changed
58108      this.realtime.setAuth(token !== null && token !== void 0 ? token : null);
58109      this.changedAccessToken = token;
58110    } else if (event === 'SIGNED_OUT') {
58111      // Token is removed
58112      this.realtime.setAuth(this.supabaseKey);
58113      if (source == 'STORAGE') this.auth.signOut();
58114      this.changedAccessToken = undefined;
58115    }
58116  }
58117
58118}
58119
58120exports.default = SupabaseClient;
58121
58122},{"./lib/SupabaseAuthClient":437,"./lib/constants":438,"./lib/fetch":439,"./lib/helpers":440,"@supabase/functions-js":403,"@supabase/postgrest-js":413,"@supabase/realtime-js":418,"@supabase/storage-js":426}],436:[function(require,module,exports){
58123"use strict";
58124
58125Object.defineProperty(exports, "__esModule", {
58126  value: true
58127});
58128var _exportNames = {
58129  createClient: true,
58130  SupabaseClient: true,
58131  FunctionsHttpError: true,
58132  FunctionsFetchError: true,
58133  FunctionsRelayError: true,
58134  FunctionsError: true,
58135  FunctionRegion: true
58136};
58137Object.defineProperty(exports, "FunctionRegion", {
58138  enumerable: true,
58139  get: function () {
58140    return _functionsJs.FunctionRegion;
58141  }
58142});
58143Object.defineProperty(exports, "FunctionsError", {
58144  enumerable: true,
58145  get: function () {
58146    return _functionsJs.FunctionsError;
58147  }
58148});
58149Object.defineProperty(exports, "FunctionsFetchError", {
58150  enumerable: true,
58151  get: function () {
58152    return _functionsJs.FunctionsFetchError;
58153  }
58154});
58155Object.defineProperty(exports, "FunctionsHttpError", {
58156  enumerable: true,
58157  get: function () {
58158    return _functionsJs.FunctionsHttpError;
58159  }
58160});
58161Object.defineProperty(exports, "FunctionsRelayError", {
58162  enumerable: true,
58163  get: function () {
58164    return _functionsJs.FunctionsRelayError;
58165  }
58166});
58167Object.defineProperty(exports, "SupabaseClient", {
58168  enumerable: true,
58169  get: function () {
58170    return _SupabaseClient.default;
58171  }
58172});
58173exports.createClient = void 0;
58174
58175var _SupabaseClient = _interopRequireDefault(require("./SupabaseClient"));
58176
58177var _authJs = require("@supabase/auth-js");
58178

58179Object.keys(_authJs).forEach(function (key) {
58180  if (key === "default" || key === "__esModule") return;
58181  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
58182  if (key in exports && exports[key] === _authJs[key]) return;
58183  Object.defineProperty(exports, key, {
58184    enumerable: true,
58185    get: function () {
58186      return _authJs[key];
58187    }
58188  });
58189});
58190
58191var _functionsJs = require("@supabase/functions-js");
58192
58193var _realtimeJs = require("@supabase/realtime-js");
58194
58195Object.keys(_realtimeJs).forEach(function (key) {
58196  if (key === "default" || key === "__esModule") return;
58197  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
58198  if (key in exports && exports[key] === _realtimeJs[key]) return;
58199  Object.defineProperty(exports, key, {
58200    enumerable: true,
58201    get: function () {
58202      return _realtimeJs[key];
58203    }
58204  });
58205});
58206
58207function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
58208
58209/**
58210 * Creates a new Supabase Client.
58211 */
58212const createClient = (supabaseUrl, supabaseKey, options) => {
58213  return new _SupabaseClient.default(supabaseUrl, supabaseKey, options);
58214};
58215
58216exports.createClient = createClient;
58217
58218},{"./SupabaseClient":435,"@supabase/auth-js":391,"@supabase/functions-js":403,"@supabase/realtime-js":418}],437:[function(require,module,exports){
58219"use strict";
58220
58221Object.defineProperty(exports, "__esModule", {
58222  value: true
58223});
58224exports.SupabaseAuthClient = void 0;
58225
58226var _authJs = require("@supabase/auth-js");
58227
58228class SupabaseAuthClient extends _authJs.AuthClient {
58229  constructor(options) {
58230    super(options);
58231  }
58232
58233}
58234
58235exports.SupabaseAuthClient = SupabaseAuthClient;
58236
58237},{"@supabase/auth-js":391}],438:[function(require,module,exports){
58238"use strict";
58239
58240Object.defineProperty(exports, "__esModule", {
58241  value: true
58242});
58243exports.DEFAULT_REALTIME_OPTIONS = exports.DEFAULT_HEADERS = exports.DEFAULT_GLOBAL_OPTIONS = exports.DEFAULT_DB_OPTIONS = exports.DEFAULT_AUTH_OPTIONS = void 0;
58244
58245var _version = require("./version");
58246
58247let JS_ENV = ''; // @ts-ignore
58248
58249if (typeof Deno !== 'undefined') {
58250  JS_ENV = 'deno';
58251} else if (typeof document !== 'undefined') {
58252  JS_ENV = 'web';
58253} else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
58254  JS_ENV = 'react-native';
58255} else {
58256  JS_ENV = 'node';
58257}
58258
58259const DEFAULT_HEADERS = {
58260  'X-Client-Info': `supabase-js-${JS_ENV}/${_version.version}`
58261};
58262exports.DEFAULT_HEADERS = DEFAULT_HEADERS;
58263const DEFAULT_GLOBAL_OPTIONS = {
58264  headers: DEFAULT_HEADERS
58265};
58266exports.DEFAULT_GLOBAL_OPTIONS = DEFAULT_GLOBAL_OPTIONS;
58267const DEFAULT_DB_OPTIONS = {
58268  schema: 'public'
58269};
58270exports.DEFAULT_DB_OPTIONS = DEFAULT_DB_OPTIONS;
58271const DEFAULT_AUTH_OPTIONS = {
58272  autoRefreshToken: true,
58273  persistSession: true,
58274  detectSessionInUrl: true,
58275  flowType: 'implicit'
58276};
58277exports.DEFAULT_AUTH_OPTIONS = DEFAULT_AUTH_OPTIONS;
58278const DEFAULT_REALTIME_OPTIONS = {};
58279exports.DEFAULT_REALTIME_OPTIONS = DEFAULT_REALTIME_OPTIONS;
58280
58281},{"./version":441}],439:[function(require,module,exports){
58282"use strict";
58283
58284Object.defineProperty(exports, "__esModule", {
58285  value: true
58286});

58287exports.resolveHeadersConstructor = exports.resolveFetch = exports.fetchWithAuth = void 0;
58288
58289var _nodeFetch = _interopRequireWildcard(require("@supabase/node-fetch"));
58290
58291function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
58292
58293function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
58294
58295var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
58296  function adopt(value) {
58297    return value instanceof P ? value : new P(function (resolve) {
58298      resolve(value);
58299    });
58300  }
58301
58302  return new (P || (P = Promise))(function (resolve, reject) {
58303    function fulfilled(value) {
58304      try {
58305        step(generator.next(value));
58306      } catch (e) {
58307        reject(e);
58308      }
58309    }
58310
58311    function rejected(value) {
58312      try {
58313        step(generator["throw"](value));
58314      } catch (e) {
58315        reject(e);
58316      }
58317    }
58318
58319    function step(result) {
58320      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
58321    }
58322
58323    step((generator = generator.apply(thisArg, _arguments || [])).next());
58324  });
58325}; // @ts-ignore
58326
58327
58328const resolveFetch = customFetch => {
58329  let _fetch;
58330
58331  if (customFetch) {
58332    _fetch = customFetch;
58333  } else if (typeof fetch === 'undefined') {
58334    _fetch = _nodeFetch.default;
58335  } else {
58336    _fetch = fetch;
58337  }
58338
58339  return (...args) => _fetch(...args);
58340};
58341
58342exports.resolveFetch = resolveFetch;
58343
58344const resolveHeadersConstructor = () => {
58345  if (typeof Headers === 'undefined') {
58346    return _nodeFetch.Headers;
58347  }
58348
58349  return Headers;
58350};
58351
58352exports.resolveHeadersConstructor = resolveHeadersConstructor;
58353
58354const fetchWithAuth = (supabaseKey, getAccessToken, customFetch) => {
58355  const fetch = resolveFetch(customFetch);
58356  const HeadersConstructor = resolveHeadersConstructor();
58357  return (input, init) => __awaiter(void 0, void 0, void 0, function* () {
58358    var _a;
58359
58360    const accessToken = (_a = yield getAccessToken()) !== null && _a !== void 0 ? _a : supabaseKey;
58361    let headers = new HeadersConstructor(init === null || init === void 0 ? void 0 : init.headers);
58362
58363    if (!headers.has('apikey')) {
58364      headers.set('apikey', supabaseKey);
58365    }
58366
58367    if (!headers.has('Authorization')) {
58368      headers.set('Authorization', `Bearer ${accessToken}`);
58369    }
58370
58371    return fetch(input, Object.assign(Object.assign({}, init), {
58372      headers
58373    }));
58374  });
58375};
58376
58377exports.fetchWithAuth = fetchWithAuth;
58378
58379},{"@supabase/node-fetch":405}],440:[function(require,module,exports){
58380"use strict";
58381
58382Object.defineProperty(exports, "__esModule", {
58383  value: true
58384});
58385exports.applySettingDefaults = applySettingDefaults;
58386exports.isBrowser = void 0;
58387exports.stripTrailingSlash = stripTrailingSlash;
58388exports.uuid = uuid;
58389
58390function uuid() {
58391  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
58392    var r = Math.random() * 16 | 0,
58393        v = c == 'x' ? r : r & 0x3 | 0x8;
58394    return v.toString(16);
58395  });
58396}
58397
58398function stripTrailingSlash(url) {
58399  return url.replace(/\/$/, '');
58400}
58401
58402const isBrowser = () => typeof window !== 'undefined';
58403
58404exports.isBrowser = isBrowser;
58405
58406function applySettingDefaults(options, defaults) {
58407  const {
58408    db: dbOptions,
58409    auth: authOptions,
58410    realtime: realtimeOptions,
58411    global: globalOptions
58412  } = options;
58413  const {
58414    db: DEFAULT_DB_OPTIONS,
58415    auth: DEFAULT_AUTH_OPTIONS,
58416    realtime: DEFAULT_REALTIME_OPTIONS,
58417    global: DEFAULT_GLOBAL_OPTIONS
58418  } = defaults;
58419  return {
58420    db: Object.assign(Object.assign({}, DEFAULT_DB_OPTIONS), dbOptions),
58421    auth: Object.assign(Object.assign({}, DEFAULT_AUTH_OPTIONS), authOptions),
58422    realtime: Object.assign(Object.assign({}, DEFAULT_REALTIME_OPTIONS), realtimeOptions),
58423    global: Object.assign(Object.assign({}, DEFAULT_GLOBAL_OPTIONS), globalOptions)
58424  };
58425}
58426
58427},{}],441:[function(require,module,exports){
58428"use strict";
58429
58430Object.defineProperty(exports, "__esModule", {
58431  value: true
58432});
58433exports.version = void 0;
58434const version = '2.43.4';
58435exports.version = version;
58436
58437},{}],442:[function(require,module,exports){
58438/**
58439 * matchesSelector v2.0.2
58440 * matchesSelector( element, '.selector' )
58441 * MIT license
58442 */
58443
58444/*jshint browser: true, strict: true, undef: true, unused: true */
58445
58446( function( window, factory ) {
58447  /*global define: false, module: false */
58448  'use strict';
58449  // universal module definition
58450  if ( typeof define == 'function' && define.amd ) {
58451    // AMD
58452    define( factory );
58453  } else if ( typeof module == 'object' && module.exports ) {
58454    // CommonJS
58455    module.exports = factory();
58456  } else {
58457    // browser global
58458    window.matchesSelector = factory();
58459  }
58460
58461}( window, function factory() {
58462  'use strict';
58463
58464  var matchesMethod = ( function() {
58465    var ElemProto = window.Element.prototype;

58466    // check for the standard method name first
58467    if ( ElemProto.matches ) {
58468      return 'matches';
58469    }
58470    // check un-prefixed
58471    if ( ElemProto.matchesSelector ) {
58472      return 'matchesSelector';
58473    }
58474    // check vendor prefixes
58475    var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];
58476
58477    for ( var i=0; i < prefixes.length; i++ ) {
58478      var prefix = prefixes[i];
58479      var method = prefix + 'MatchesSelector';
58480      if ( ElemProto[ method ] ) {
58481        return method;
58482      }
58483    }
58484  })();
58485
58486  return function matchesSelector( elem, selector ) {
58487    return elem[ matchesMethod ]( selector );
58488  };
58489
58490}));
58491
58492},{}],443:[function(require,module,exports){
58493/**
58494 * EvEmitter v1.1.0
58495 * Lil' event emitter
58496 * MIT License
58497 */
58498
58499/* jshint unused: true, undef: true, strict: true */
58500
58501( function( global, factory ) {
58502  // universal module definition
58503  /* jshint strict: false */ /* globals define, module, window */
58504  if ( typeof define == 'function' && define.amd ) {
58505    // AMD - RequireJS
58506    define( factory );
58507  } else if ( typeof module == 'object' && module.exports ) {
58508    // CommonJS - Browserify, Webpack
58509    module.exports = factory();
58510  } else {
58511    // Browser globals
58512    global.EvEmitter = factory();
58513  }
58514
58515}( typeof window != 'undefined' ? window : this, function() {
58516
58517"use strict";
58518
58519function EvEmitter() {}
58520
58521var proto = EvEmitter.prototype;
58522
58523proto.on = function( eventName, listener ) {
58524  if ( !eventName || !listener ) {
58525    return;
58526  }
58527  // set events hash
58528  var events = this._events = this._events || {};
58529  // set listeners array
58530  var listeners = events[ eventName ] = events[ eventName ] || [];
58531  // only add once
58532  if ( listeners.indexOf( listener ) == -1 ) {
58533    listeners.push( listener );
58534  }
58535
58536  return this;
58537};
58538
58539proto.once = function( eventName, listener ) {
58540  if ( !eventName || !listener ) {
58541    return;
58542  }
58543  // add event
58544  this.on( eventName, listener );
58545  // set once flag
58546  // set onceEvents hash
58547  var onceEvents = this._onceEvents = this._onceEvents || {};
58548  // set onceListeners object
58549  var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
58550  // set flag
58551  onceListeners[ listener ] = true;
58552
58553  return this;
58554};
58555
58556proto.off = function( eventName, listener ) {
58557  var listeners = this._events && this._events[ eventName ];
58558  if ( !listeners || !listeners.length ) {
58559    return;
58560  }
58561  var index = listeners.indexOf( listener );
58562  if ( index != -1 ) {
58563    listeners.splice( index, 1 );
58564  }
58565
58566  return this;
58567};
58568
58569proto.emitEvent = function( eventName, args ) {
58570  var listeners = this._events && this._events[ eventName ];
58571  if ( !listeners || !listeners.length ) {
58572    return;
58573  }
58574  // copy over to avoid interference if .off() in listener
58575  listeners = listeners.slice(0);
58576  args = args || [];
58577  // once stuff
58578  var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
58579
58580  for ( var i=0; i < listeners.length; i++ ) {
58581    var listener = listeners[i]
58582    var isOnce = onceListeners && onceListeners[ listener ];
58583    if ( isOnce ) {
58584      // remove listener
58585      // remove before trigger to prevent recursion
58586      this.off( eventName, listener );
58587      // unset once flag
58588      delete onceListeners[ listener ];
58589    }
58590    // trigger listener
58591    listener.apply( this, args );
58592  }
58593
58594  return this;
58595};
58596
58597proto.allOff = function() {
58598  delete this._events;
58599  delete this._onceEvents;
58600};
58601
58602return EvEmitter;
58603
58604}));
58605
58606},{}],444:[function(require,module,exports){
58607"use strict";
58608
58609Object.defineProperty(exports, "__esModule", {
58610  value: true
58611});
58612exports.canUseDOM = canUseDOM;
58613
58614/**
58615 * Checks if the DOM is available to access and use
58616 */
58617function canUseDOM() {
58618  return !!(typeof window !== "undefined" && window.document && window.document.createElement);
58619}
58620
58621},{}],445:[function(require,module,exports){
58622"use strict";
58623
58624Object.defineProperty(exports, "__esModule", {
58625  value: true
58626});
58627exports.canUseEventListeners = canUseEventListeners;
58628
58629var _canUseDom = require("./can-use-dom.js");
58630
58631/**
58632 * Checks if Event Listeners are available for use
58633 */
58634function canUseEventListeners() {
58635  return (0, _canUseDom.canUseDOM)() && !!(window.addEventListener || window["attachEvent"]);
58636}
58637
58638},{"./can-use-dom.js":444}],446:[function(require,module,exports){
58639"use strict";
58640
58641Object.defineProperty(exports, "__esModule", {
58642  value: true
58643});

58644exports.canUseViewport = canUseViewport;
58645
58646var _canUseDom = require("./can-use-dom.js");
58647
58648/**
58649 * Checks if viewport is available for use
58650 */
58651function canUseViewport() {
58652  return (0, _canUseDom.canUseDOM)() && !!window.screen;
58653}
58654
58655},{"./can-use-dom.js":444}],447:[function(require,module,exports){
58656"use strict";
58657
58658Object.defineProperty(exports, "__esModule", {
58659  value: true
58660});
58661exports.canUseWorkers = canUseWorkers;
58662
58663/**
58664 * Checks if Web Workers are available
58665 */
58666function canUseWorkers() {
58667  return typeof Worker !== "undefined";
58668}
58669
58670},{}],448:[function(require,module,exports){
58671"use strict";
58672
58673Object.defineProperty(exports, "__esModule", {
58674  value: true
58675});
58676
58677var _canUseDom = require("./can-use-dom.js");
58678
58679Object.keys(_canUseDom).forEach(function (key) {
58680  if (key === "default" || key === "__esModule") return;
58681  if (key in exports && exports[key] === _canUseDom[key]) return;
58682  Object.defineProperty(exports, key, {
58683    enumerable: true,
58684    get: function () {
58685      return _canUseDom[key];
58686    }
58687  });
58688});
58689
58690var _canUseEventListeners = require("./can-use-event-listeners.js");
58691
58692Object.keys(_canUseEventListeners).forEach(function (key) {
58693  if (key === "default" || key === "__esModule") return;
58694  if (key in exports && exports[key] === _canUseEventListeners[key]) return;
58695  Object.defineProperty(exports, key, {
58696    enumerable: true,
58697    get: function () {
58698      return _canUseEventListeners[key];
58699    }
58700  });
58701});
58702
58703var _canUseViewport = require("./can-use-viewport.js");
58704
58705Object.keys(_canUseViewport).forEach(function (key) {
58706  if (key === "default" || key === "__esModule") return;
58707  if (key in exports && exports[key] === _canUseViewport[key]) return;
58708  Object.defineProperty(exports, key, {
58709    enumerable: true,
58710    get: function () {
58711      return _canUseViewport[key];
58712    }
58713  });
58714});
58715
58716var _canUseWorkers = require("./can-use-workers.js");
58717
58718Object.keys(_canUseWorkers).forEach(function (key) {
58719  if (key === "default" || key === "__esModule") return;
58720  if (key in exports && exports[key] === _canUseWorkers[key]) return;
58721  Object.defineProperty(exports, key, {
58722    enumerable: true,
58723    get: function () {
58724      return _canUseWorkers[key];
58725    }
58726  });
58727});
58728
58729},{"./can-use-dom.js":444,"./can-use-event-listeners.js":445,"./can-use-viewport.js":446,"./can-use-workers.js":447}],449:[function(require,module,exports){
58730/**
58731 * Fizzy UI utils v2.0.7
58732 * MIT license
58733 */
58734
58735/*jshint browser: true, undef: true, unused: true, strict: true */
58736
58737( function( window, factory ) {
58738  // universal module definition
58739  /*jshint strict: false */ /*globals define, module, require */
58740
58741  if ( typeof define == 'function' && define.amd ) {
58742    // AMD
58743    define( [
58744      'desandro-matches-selector/matches-selector'
58745    ], function( matchesSelector ) {
58746      return factory( window, matchesSelector );
58747    });
58748  } else if ( typeof module == 'object' && module.exports ) {
58749    // CommonJS
58750    module.exports = factory(
58751      window,
58752      require('desandro-matches-selector')
58753    );
58754  } else {
58755    // browser global
58756    window.fizzyUIUtils = factory(
58757      window,
58758      window.matchesSelector
58759    );
58760  }
58761
58762}( window, function factory( window, matchesSelector ) {
58763
58764'use strict';
58765
58766var utils = {};
58767
58768// ----- extend ----- //
58769
58770// extends objects
58771utils.extend = function( a, b ) {
58772  for ( var prop in b ) {
58773    a[ prop ] = b[ prop ];
58774  }
58775  return a;
58776};
58777
58778// ----- modulo ----- //
58779
58780utils.modulo = function( num, div ) {
58781  return ( ( num % div ) + div ) % div;
58782};
58783
58784// ----- makeArray ----- //
58785
58786var arraySlice = Array.prototype.slice;
58787
58788// turn element or nodeList into an array
58789utils.makeArray = function( obj ) {
58790  if ( Array.isArray( obj ) ) {
58791    // use object if already an array
58792    return obj;
58793  }
58794  // return empty array if undefined or null. #6
58795  if ( obj === null || obj === undefined ) {
58796    return [];
58797  }
58798
58799  var isArrayLike = typeof obj == 'object' && typeof obj.length == 'number';
58800  if ( isArrayLike ) {
58801    // convert nodeList to array
58802    return arraySlice.call( obj );
58803  }
58804
58805  // array of single index
58806  return [ obj ];
58807};
58808
58809// ----- removeFrom ----- //
58810
58811utils.removeFrom = function( ary, obj ) {
58812  var index = ary.indexOf( obj );
58813  if ( index != -1 ) {
58814    ary.splice( index, 1 );
58815  }
58816};
58817
58818// ----- getParent ----- //
58819
58820utils.getParent = function( elem, selector ) {
58821  while ( elem.parentNode && elem != document.body ) {
58822    elem = elem.parentNode;
58823    if ( matchesSelector( elem, selector ) ) {
58824      return elem;
58825    }
58826  }
58827};
58828
58829// ----- getQueryElement ----- //
58830
58831// use element as selector string
58832utils.getQueryElement = function( elem ) {
58833  if ( typeof elem == 'string' ) {
58834    return document.querySelector( elem );
58835  }
58836  return elem;
58837};
58838
58839// ----- handleEvent ----- //
58840
58841// enable .ontype to trigger from .addEventListener( elem, 'type' )
58842utils.handleEvent = function( event ) {
58843  var method = 'on' + event.type;
58844  if ( this[ method ] ) {
58845    this[ method ]( event );
58846  }
58847};
58848
58849// ----- filterFindElements ----- //
58850
58851utils.filterFindElements = function( elems, selector ) {
58852  // make array of elems
58853  elems = utils.makeArray( elems );
58854  var ffElems = [];
58855

vendor: 5,835 bytes, lines 58856-59071

58856  elems.forEach( function( elem ) {
58857    // check that elem is an actual element
58858    if ( !( elem instanceof HTMLElement ) ) {
58859      return;
58860    }
58861    // add elem if no selector
58862    if ( !selector ) {
58863      ffElems.push( elem );
58864      return;
58865    }
58866    // filter & find items if we have a selector
58867    // filter
58868    if ( matchesSelector( elem, selector ) ) {
58869      ffElems.push( elem );
58870    }
58871    // find children
58872    var childElems = elem.querySelectorAll( selector );
58873    // concat childElems to filterFound array
58874    for ( var i=0; i < childElems.length; i++ ) {
58875      ffElems.push( childElems[i] );
58876    }
58877  });
58878
58879  return ffElems;
58880};
58881
58882// ----- debounceMethod ----- //
58883
58884utils.debounceMethod = function( _class, methodName, threshold ) {
58885  threshold = threshold || 100;
58886  // original method
58887  var method = _class.prototype[ methodName ];
58888  var timeoutName = methodName + 'Timeout';
58889
58890  _class.prototype[ methodName ] = function() {
58891    var timeout = this[ timeoutName ];
58892    clearTimeout( timeout );
58893
58894    var args = arguments;
58895    var _this = this;
58896    this[ timeoutName ] = setTimeout( function() {
58897      method.apply( _this, args );
58898      delete _this[ timeoutName ];
58899    }, threshold );
58900  };
58901};
58902
58903// ----- docReady ----- //
58904
58905utils.docReady = function( callback ) {
58906  var readyState = document.readyState;
58907  if ( readyState == 'complete' || readyState == 'interactive' ) {
58908    // do async to allow for other scripts to run. metafizzy/flickity#441
58909    setTimeout( callback );
58910  } else {
58911    document.addEventListener( 'DOMContentLoaded', callback );
58912  }
58913};
58914
58915// ----- htmlInit ----- //
58916
58917// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/
58918utils.toDashed = function( str ) {
58919  return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) {
58920    return $1 + '-' + $2;
58921  }).toLowerCase();
58922};
58923
58924var console = window.console;
58925/**
58926 * allow user to initialize classes via [data-namespace] or .js-namespace class
58927 * htmlInit( Widget, 'widgetName' )
58928 * options are parsed from data-namespace-options
58929 */
58930utils.htmlInit = function( WidgetClass, namespace ) {
58931  utils.docReady( function() {
58932    var dashedNamespace = utils.toDashed( namespace );
58933    var dataAttr = 'data-' + dashedNamespace;
58934    var dataAttrElems = document.querySelectorAll( '[' + dataAttr + ']' );
58935    var jsDashElems = document.querySelectorAll( '.js-' + dashedNamespace );
58936    var elems = utils.makeArray( dataAttrElems )
58937      .concat( utils.makeArray( jsDashElems ) );
58938    var dataOptionsAttr = dataAttr + '-options';
58939    var jQuery = window.jQuery;
58940
58941    elems.forEach( function( elem ) {
58942      var attr = elem.getAttribute( dataAttr ) ||
58943        elem.getAttribute( dataOptionsAttr );
58944      var options;
58945      try {
58946        options = attr && JSON.parse( attr );
58947      } catch ( error ) {
58948        // log error, do not initialize
58949        if ( console ) {
58950          console.error( 'Error parsing ' + dataAttr + ' on ' + elem.className +
58951          ': ' + error );
58952        }
58953        return;
58954      }
58955      // initialize
58956      var instance = new WidgetClass( elem, options );
58957      // make available via $().data('namespace')
58958      if ( jQuery ) {
58959        jQuery.data( elem, namespace, instance );
58960      }
58961    });
58962
58963  });
58964};
58965
58966// -----  ----- //
58967
58968return utils;
58969
58970}));
58971
58972},{"desandro-matches-selector":442}],450:[function(require,module,exports){
58973/*!
58974 * Flickity imagesLoaded v2.0.0
58975 * enables imagesLoaded option for Flickity
58976 */
58977
58978/*jshint browser: true, strict: true, undef: true, unused: true */
58979
58980( function( window, factory ) {
58981  // universal module definition
58982  /*jshint strict: false */ /*globals define, module, require */
58983  if ( typeof define == 'function' && define.amd ) {
58984    // AMD
58985    define( [
58986      'flickity/js/index',
58987      'imagesloaded/imagesloaded'
58988    ], function( Flickity, imagesLoaded ) {
58989      return factory( window, Flickity, imagesLoaded );
58990    });
58991  } else if ( typeof module == 'object' && module.exports ) {
58992    // CommonJS
58993    module.exports = factory(
58994      window,
58995      require('flickity'),
58996      require('imagesloaded')
58997    );
58998  } else {
58999    // browser global
59000    window.Flickity = factory(
59001      window,
59002      window.Flickity,
59003      window.imagesLoaded
59004    );
59005  }
59006
59007}( window, function factory( window, Flickity, imagesLoaded ) {
59008'use strict';
59009
59010Flickity.createMethods.push('_createImagesLoaded');
59011
59012var proto = Flickity.prototype;
59013
59014proto._createImagesLoaded = function() {
59015  this.on( 'activate', this.imagesLoaded );
59016};
59017
59018proto.imagesLoaded = function() {
59019  if ( !this.options.imagesLoaded ) {
59020    return;
59021  }
59022  var _this = this;
59023  function onImagesLoadedProgress( instance, image ) {
59024    var cell = _this.getParentCell( image.img );
59025    _this.cellSizeChange( cell && cell.element );
59026    if ( !_this.options.freeScroll ) {
59027      _this.positionSliderAtSelected();
59028    }
59029  }
59030  imagesLoaded( this.slider ).on( 'progress', onImagesLoadedProgress );
59031};
59032
59033return Flickity;
59034
59035}));
59036
59037},{"flickity":456,"imagesloaded":463}],451:[function(require,module,exports){
59038// add, remove cell
59039( function( window, factory ) {
59040  // universal module definition
59041  if ( typeof define == 'function' && define.amd ) {
59042    // AMD
59043    define( [
59044      './flickity',
59045      'fizzy-ui-utils/utils',
59046    ], function( Flickity, utils ) {
59047      return factory( window, Flickity, utils );
59048    } );
59049  } else if ( typeof module == 'object' && module.exports ) {
59050    // CommonJS
59051    module.exports = factory(
59052        window,
59053        require('./flickity'),
59054        require('fizzy-ui-utils')
59055    );
59056  } else {
59057    // browser global
59058    factory(
59059        window,
59060        window.Flickity,
59061        window.fizzyUIUtils
59062    );
59063  }
59064
59065}( window, function factory( window, Flickity, utils ) {
59066
59067'use strict';
59068
59069// append cells to a document fragment
59070function getCellsFragment( cells ) {
59071  var fragment = document.createDocumentFragment();

59072  cells.forEach( function( cell ) {
59073    fragment.appendChild( cell.element );
59074  } );
59075  return fragment;
59076}
59077
59078// -------------------------- add/remove cell prototype -------------------------- //
59079
59080var proto = Flickity.prototype;
59081
59082/**
59083 * Insert, prepend, or append cells
59084 * @param {[Element, Array, NodeList]} elems - Elements to insert
59085 * @param {Integer} index - Zero-based number to insert
59086 */
59087proto.insert = function( elems, index ) {
59088  var cells = this._makeCells( elems );
59089  if ( !cells || !cells.length ) {
59090    return;
59091  }
59092  var len = this.cells.length;
59093  // default to append
59094  index = index === undefined ? len : index;
59095  // add cells with document fragment
59096  var fragment = getCellsFragment( cells );
59097  // append to slider
59098  var isAppend = index == len;
59099  if ( isAppend ) {
59100    this.slider.appendChild( fragment );
59101  } else {
59102    var insertCellElement = this.cells[ index ].element;
59103    this.slider.insertBefore( fragment, insertCellElement );
59104  }
59105  // add to this.cells
59106  if ( index === 0 ) {
59107    // prepend, add to start
59108    this.cells = cells.concat( this.cells );
59109  } else if ( isAppend ) {
59110    // append, add to end
59111    this.cells = this.cells.concat( cells );
59112  } else {
59113    // insert in this.cells
59114    var endCells = this.cells.splice( index, len - index );
59115    this.cells = this.cells.concat( cells ).concat( endCells );
59116  }
59117
59118  this._sizeCells( cells );
59119  this.cellChange( index, true );
59120};
59121
59122proto.append = function( elems ) {
59123  this.insert( elems, this.cells.length );
59124};
59125
59126proto.prepend = function( elems ) {
59127  this.insert( elems, 0 );
59128};
59129
59130/**
59131 * Remove cells
59132 * @param {[Element, Array, NodeList]} elems - ELements to remove
59133 */
59134proto.remove = function( elems ) {
59135  var cells = this.getCells( elems );
59136  if ( !cells || !cells.length ) {
59137    return;
59138  }
59139
59140  var minCellIndex = this.cells.length - 1;
59141  // remove cells from collection & DOM
59142  cells.forEach( function( cell ) {
59143    cell.remove();
59144    var index = this.cells.indexOf( cell );
59145    minCellIndex = Math.min( index, minCellIndex );
59146    utils.removeFrom( this.cells, cell );
59147  }, this );
59148
59149  this.cellChange( minCellIndex, true );
59150};
59151
59152/**
59153 * logic to be run after a cell's size changes
59154 * @param {Element} elem - cell's element
59155 */
59156proto.cellSizeChange = function( elem ) {
59157  var cell = this.getCell( elem );
59158  if ( !cell ) {
59159    return;
59160  }
59161  cell.getSize();
59162
59163  var index = this.cells.indexOf( cell );
59164  this.cellChange( index );
59165};
59166
59167/**
59168 * logic any time a cell is changed: added, removed, or size changed
59169 * @param {Integer} changedCellIndex - index of the changed cell, optional
59170 * @param {Boolean} isPositioningSlider - Positions slider after selection
59171 */
59172proto.cellChange = function( changedCellIndex, isPositioningSlider ) {
59173  var prevSelectedElem = this.selectedElement;
59174  this._positionCells( changedCellIndex );
59175  this._getWrapShiftCells();
59176  this.setGallerySize();
59177  // update selectedIndex
59178  // try to maintain position & select previous selected element
59179  var cell = this.getCell( prevSelectedElem );
59180  if ( cell ) {
59181    this.selectedIndex = this.getCellSlideIndex( cell );
59182  }
59183  this.selectedIndex = Math.min( this.slides.length - 1, this.selectedIndex );
59184
59185  this.emitEvent( 'cellChange', [ changedCellIndex ] );
59186  // position slider
59187  this.select( this.selectedIndex );
59188  // do not position slider after lazy load
59189  if ( isPositioningSlider ) {
59190    this.positionSliderAtSelected();
59191  }
59192};
59193
59194// -----  ----- //
59195
59196return Flickity;
59197
59198} ) );
59199
59200},{"./flickity":455,"fizzy-ui-utils":449}],452:[function(require,module,exports){
59201// animate
59202( function( window, factory ) {
59203  // universal module definition
59204  if ( typeof define == 'function' && define.amd ) {
59205    // AMD
59206    define( [
59207      'fizzy-ui-utils/utils',
59208    ], function( utils ) {
59209      return factory( window, utils );
59210    } );
59211  } else if ( typeof module == 'object' && module.exports ) {
59212    // CommonJS
59213    module.exports = factory(
59214        window,
59215        require('fizzy-ui-utils')
59216    );
59217  } else {
59218    // browser global
59219    window.Flickity = window.Flickity || {};
59220    window.Flickity.animatePrototype = factory(
59221        window,
59222        window.fizzyUIUtils
59223    );
59224  }
59225
59226}( window, function factory( window, utils ) {
59227
59228'use strict';
59229
59230// -------------------------- animate -------------------------- //
59231
59232var proto = {};
59233
59234proto.startAnimation = function() {
59235  if ( this.isAnimating ) {
59236    return;
59237  }
59238
59239  this.isAnimating = true;
59240  this.restingFrames = 0;
59241  this.animate();
59242};
59243
59244proto.animate = function() {
59245  this.applyDragForce();
59246  this.applySelectedAttraction();
59247
59248  var previousX = this.x;
59249
59250  this.integratePhysics();
59251  this.positionSlider();
59252  this.settle( previousX );
59253  // animate next frame
59254  if ( this.isAnimating ) {
59255    var _this = this;
59256    requestAnimationFrame( function animateFrame() {
59257      _this.animate();
59258    } );
59259  }
59260};
59261
59262proto.positionSlider = function() {
59263  var x = this.x;
59264  // wrap position around
59265  if ( this.options.wrapAround && this.cells.length > 1 ) {
59266    x = utils.modulo( x, this.slideableWidth );
59267    x -= this.slideableWidth;
59268    this.shiftWrapCells( x );
59269  }
59270
59271  this.setTranslateX( x, this.isAnimating );
59272  this.dispatchScrollEvent();
59273};
59274
59275proto.setTranslateX = function( x, is3d ) {
59276  x += this.cursorPosition;
59277  // reverse if right-to-left and using transform
59278  x = this.options.rightToLeft ? -x : x;
59279  var translateX = this.getPositionValue( x );
59280  // use 3D transforms for hardware acceleration on iOS
59281  // but use 2D when settled, for better font-rendering
59282  this.slider.style.transform = is3d ?
59283    'translate3d(' + translateX + ',0,0)' : 'translateX(' + translateX + ')';
59284};
59285
59286proto.dispatchScrollEvent = function() {
59287  var firstSlide = this.slides[0];
59288  if ( !firstSlide ) {
59289    return;
59290  }
59291  var positionX = -this.x - firstSlide.target;
59292  var progress = positionX / this.slidesWidth;
59293  this.dispatchEvent( 'scroll', null, [ progress, positionX ] );
59294};
59295
59296proto.positionSliderAtSelected = function() {
59297  if ( !this.cells.length ) {
59298    return;
59299  }
59300  this.x = -this.selectedSlide.target;
59301  this.velocity = 0;

59301 // stop wobble
59302  this.positionSlider();
59303};
59304
59305proto.getPositionValue = function( position ) {
59306  if ( this.options.percentPosition ) {
59307    // percent position, round to 2 digits, like 12.34%
59308    return ( Math.round( ( position / this.size.innerWidth ) * 10000 ) * 0.01 ) + '%';
59309  } else {
59310    // pixel positioning
59311    return Math.round( position ) + 'px';
59312  }
59313};
59314
59315proto.settle = function( previousX ) {
59316  // keep track of frames where x hasn't moved
59317  var isResting = !this.isPointerDown &&
59318      Math.round( this.x * 100 ) == Math.round( previousX * 100 );
59319  if ( isResting ) {
59320    this.restingFrames++;
59321  }
59322  // stop animating if resting for 3 or more frames
59323  if ( this.restingFrames > 2 ) {
59324    this.isAnimating = false;
59325    delete this.isFreeScrolling;
59326    // render position with translateX when settled
59327    this.positionSlider();
59328    this.dispatchEvent( 'settle', null, [ this.selectedIndex ] );
59329  }
59330};
59331
59332proto.shiftWrapCells = function( x ) {
59333  // shift before cells
59334  var beforeGap = this.cursorPosition + x;
59335  this._shiftCells( this.beforeShiftCells, beforeGap, -1 );
59336  // shift after cells
59337  var afterGap = this.size.innerWidth - ( x + this.slideableWidth + this.cursorPosition );
59338  this._shiftCells( this.afterShiftCells, afterGap, 1 );
59339};
59340
59341proto._shiftCells = function( cells, gap, shift ) {
59342  for ( var i = 0; i < cells.length; i++ ) {
59343    var cell = cells[i];
59344    var cellShift = gap > 0 ? shift : 0;
59345    cell.wrapShift( cellShift );
59346    gap -= cell.size.outerWidth;
59347  }
59348};
59349
59350proto._unshiftCells = function( cells ) {
59351  if ( !cells || !cells.length ) {
59352    return;
59353  }
59354  for ( var i = 0; i < cells.length; i++ ) {
59355    cells[i].wrapShift( 0 );
59356  }
59357};
59358
59359// -------------------------- physics -------------------------- //
59360
59361proto.integratePhysics = function() {
59362  this.x += this.velocity;
59363  this.velocity *= this.getFrictionFactor();
59364};
59365
59366proto.applyForce = function( force ) {
59367  this.velocity += force;
59368};
59369
59370proto.getFrictionFactor = function() {
59371  return 1 - this.options[ this.isFreeScrolling ? 'freeScrollFriction' : 'friction' ];
59372};
59373
59374proto.getRestingPosition = function() {
59375  // my thanks to Steven Wittens, who simplified this math greatly
59376  return this.x + this.velocity / ( 1 - this.getFrictionFactor() );
59377};
59378
59379proto.applyDragForce = function() {
59380  if ( !this.isDraggable || !this.isPointerDown ) {
59381    return;
59382  }
59383  // change the position to drag position by applying force
59384  var dragVelocity = this.dragX - this.x;
59385  var dragForce = dragVelocity - this.velocity;
59386  this.applyForce( dragForce );
59387};
59388
59389proto.applySelectedAttraction = function() {
59390  // do not attract if pointer down or no slides
59391  var dragDown = this.isDraggable && this.isPointerDown;
59392  if ( dragDown || this.isFreeScrolling || !this.slides.length ) {
59393    return;
59394  }
59395  var distance = this.selectedSlide.target * -1 - this.x;
59396  var force = distance * this.options.selectedAttraction;
59397  this.applyForce( force );
59398};
59399
59400return proto;
59401
59402} ) );
59403
59404},{"fizzy-ui-utils":449}],453:[function(require,module,exports){
59405// Flickity.Cell
59406( function( window, factory ) {
59407  // universal module definition
59408  if ( typeof define == 'function' && define.amd ) {
59409    // AMD
59410    define( [
59411      'get-size/get-size',
59412    ], function( getSize ) {
59413      return factory( window, getSize );
59414    } );
59415  } else if ( typeof module == 'object' && module.exports ) {
59416    // CommonJS
59417    module.exports = factory(
59418        window,
59419        require('get-size')
59420    );
59421  } else {
59422    // browser global
59423    window.Flickity = window.Flickity || {};
59424    window.Flickity.Cell = factory(
59425        window,
59426        window.getSize
59427    );
59428  }
59429
59430}( window, function factory( window, getSize ) {
59431
59432'use strict';
59433
59434function Cell( elem, parent ) {
59435  this.element = elem;
59436  this.parent = parent;
59437
59438  this.create();
59439}
59440
59441var proto = Cell.prototype;
59442
59443proto.create = function() {
59444  this.element.style.position = 'absolute';
59445  this.element.setAttribute( 'aria-hidden', 'true' );
59446  this.x = 0;
59447  this.shift = 0;
59448};
59449
59450proto.destroy = function() {
59451  // reset style
59452  this.unselect();
59453  this.element.style.position = '';
59454  var side = this.parent.originSide;
59455  this.element.style[ side ] = '';
59456  this.element.removeAttribute('aria-hidden');
59457};
59458
59459proto.getSize = function() {
59460  this.size = getSize( this.element );
59461};
59462
59463proto.setPosition = function( x ) {
59464  this.x = x;
59465  this.updateTarget();
59466  this.renderPosition( x );
59467};
59468
59469// setDefaultTarget v1 method, backwards compatibility, remove in v3
59470proto.updateTarget = proto.setDefaultTarget = function() {
59471  var marginProperty = this.parent.originSide == 'left' ? 'marginLeft' : 'marginRight';
59472  this.target = this.x + this.size[ marginProperty ] +
59473    this.size.width * this.parent.cellAlign;
59474};
59475
59476proto.renderPosition = function( x ) {
59477  // render position of cell with in slider
59478  var side = this.parent.originSide;
59479  this.element.style[ side ] = this.parent.getPositionValue( x );
59480};
59481
59482proto.select = function() {
59483  this.element.classList.add('is-selected');
59484  this.element.removeAttribute('aria-hidden');
59485};
59486
59487proto.unselect = function() {
59488  this.element.classList.remove('is-selected');
59489  this.element.setAttribute( 'aria-hidden', 'true' );
59490};
59491
59492/**
59493 * @param {Integer} shift - 0, 1, or -1
59494 */
59495proto.wrapShift = function( shift ) {
59496  this.shift = shift;
59497  this.renderPosition( this.x + this.parent.slideableWidth * shift );
59498};
59499
59500proto.remove = function() {
59501  this.element.parentNode.removeChild( this.element );
59502};
59503
59504return Cell;
59505
59506} ) );
59507
59508},{"get-size":462}],454:[function(require,module,exports){
59509// drag
59510( function( window, factory ) {
59511  // universal module definition
59512  if ( typeof define == 'function' && define.amd ) {
59513    // AMD
59514    define( [
59515      './flickity',
59516      'unidragger/unidragger',
59517      'fizzy-ui-utils/utils',
59518    ], function( Flickity, Unidragger, utils ) {
59519      return factory( window, Flickity, Unidragger, utils );
59520    } );
59521  } else if ( typeof module == 'object' && module.exports ) {
59522    // CommonJS
59523    module.exports = factory(
59524        window,
59525        require('./flickity'),
59526        require('unidragger'),
59527        require('fizzy-ui-utils')
59528    );
59529  } else {
59530    // browser global
59531    window.Flickity = factory(
59532        window,
59533        window.Flickity,
59534        window.Unidragger,
59535        window.fizzyUIUtils
59536    );
59537  }
59538
59539}( window, function factory( window, Flickity, Unidragger, utils ) {
59540
59541'use strict';
59542
59543// ----- defaults ----- //
59544
59545utils.extend( Flickity.defaults, {
59546  draggable: '>1',
59547  dragThreshold: 3,
59548} );
59549
59550// ----- create ----- //
59551
59552Flickity.createMethods.push('_createDrag');
59553
59554// -------------------------- drag prototype -------------------------- //
59555
59556var proto = Flickity.prototype;
59557utils.extend( proto, Unidragger.prototype );
59558proto._touchActionValue = 'pan-y';
59559
59560// --------------------------  -------------------------- //
59561
59562var isTouch = 'createTouch' in document;
59563var isTouchmoveScrollCanceled = false;

59564
59565proto._createDrag = function() {
59566  this.on( 'activate', this.onActivateDrag );
59567  this.on( 'uiChange', this._uiChangeDrag );
59568  this.on( 'deactivate', this.onDeactivateDrag );
59569  this.on( 'cellChange', this.updateDraggable );
59570  // TODO updateDraggable on resize? if groupCells & slides change
59571  // HACK - add seemingly innocuous handler to fix iOS 10 scroll behavior
59572  // #457, RubaXa/Sortable#973
59573  if ( isTouch && !isTouchmoveScrollCanceled ) {
59574    window.addEventListener( 'touchmove', function() {} );
59575    isTouchmoveScrollCanceled = true;
59576  }
59577};
59578
59579proto.onActivateDrag = function() {
59580  this.handles = [ this.viewport ];
59581  this.bindHandles();
59582  this.updateDraggable();
59583};
59584
59585proto.onDeactivateDrag = function() {
59586  this.unbindHandles();
59587  this.element.classList.remove('is-draggable');
59588};
59589
59590proto.updateDraggable = function() {
59591  // disable dragging if less than 2 slides. #278
59592  if ( this.options.draggable == '>1' ) {
59593    this.isDraggable = this.slides.length > 1;
59594  } else {
59595    this.isDraggable = this.options.draggable;
59596  }
59597  if ( this.isDraggable ) {
59598    this.element.classList.add('is-draggable');
59599  } else {
59600    this.element.classList.remove('is-draggable');
59601  }
59602};
59603
59604// backwards compatibility
59605proto.bindDrag = function() {
59606  this.options.draggable = true;
59607  this.updateDraggable();
59608};
59609
59610proto.unbindDrag = function() {
59611  this.options.draggable = false;
59612  this.updateDraggable();
59613};
59614
59615proto._uiChangeDrag = function() {
59616  delete this.isFreeScrolling;
59617};
59618
59619// -------------------------- pointer events -------------------------- //
59620
59621proto.pointerDown = function( event, pointer ) {
59622  if ( !this.isDraggable ) {
59623    this._pointerDownDefault( event, pointer );
59624    return;
59625  }
59626  var isOkay = this.okayPointerDown( event );
59627  if ( !isOkay ) {
59628    return;
59629  }
59630
59631  this._pointerDownPreventDefault( event );
59632  this.pointerDownFocus( event );
59633  // blur
59634  if ( document.activeElement != this.element ) {
59635    // do not blur if already focused
59636    this.pointerDownBlur();
59637  }
59638
59639  // stop if it was moving
59640  this.dragX = this.x;
59641  this.viewport.classList.add('is-pointer-down');
59642  // track scrolling
59643  this.pointerDownScroll = getScrollPosition();
59644  window.addEventListener( 'scroll', this );
59645
59646  this._pointerDownDefault( event, pointer );
59647};
59648
59649// default pointerDown logic, used for staticClick
59650proto._pointerDownDefault = function( event, pointer ) {
59651  // track start event position
59652  // Safari 9 overrides pageX and pageY. These values needs to be copied. #779
59653  this.pointerDownPointer = {
59654    pageX: pointer.pageX,
59655    pageY: pointer.pageY,
59656  };
59657  // bind move and end events
59658  this._bindPostStartEvents( event );
59659  this.dispatchEvent( 'pointerDown', event, [ pointer ] );
59660};
59661
59662var focusNodes = {
59663  INPUT: true,
59664  TEXTAREA: true,
59665  SELECT: true,
59666};
59667
59668proto.pointerDownFocus = function( event ) {
59669  var isFocusNode = focusNodes[ event.target.nodeName ];
59670  if ( !isFocusNode ) {
59671    this.focus();
59672  }
59673};
59674
59675proto._pointerDownPreventDefault = function( event ) {
59676  var isTouchStart = event.type == 'touchstart';
59677  var isTouchPointer = event.pointerType == 'touch';
59678  var isFocusNode = focusNodes[ event.target.nodeName ];
59679  if ( !isTouchStart && !isTouchPointer && !isFocusNode ) {
59680    event.preventDefault();
59681  }
59682};
59683
59684// ----- move ----- //
59685
59686proto.hasDragStarted = function( moveVector ) {
59687  return Math.abs( moveVector.x ) > this.options.dragThreshold;
59688};
59689
59690// ----- up ----- //
59691
59692proto.pointerUp = function( event, pointer ) {
59693  delete this.isTouchScrolling;
59694  this.viewport.classList.remove('is-pointer-down');
59695  this.dispatchEvent( 'pointerUp', event, [ pointer ] );
59696  this._dragPointerUp( event, pointer );
59697};
59698
59699proto.pointerDone = function() {
59700  window.removeEventListener( 'scroll', this );
59701  delete this.pointerDownScroll;
59702};
59703
59704// -------------------------- dragging -------------------------- //
59705
59706proto.dragStart = function( event, pointer ) {
59707  if ( !this.isDraggable ) {
59708    return;
59709  }
59710  this.dragStartPosition = this.x;
59711  this.startAnimation();
59712  window.removeEventListener( 'scroll', this );
59713  this.dispatchEvent( 'dragStart', event, [ pointer ] );
59714};
59715
59716proto.pointerMove = function( event, pointer ) {
59717  var moveVector = this._dragPointerMove( event, pointer );
59718  this.dispatchEvent( 'pointerMove', event, [ pointer, moveVector ] );
59719  this._dragMove( event, pointer, moveVector );
59720};
59721
59722proto.dragMove = function( event, pointer, moveVector ) {
59723  if ( !this.isDraggable ) {
59724    return;
59725  }
59726  event.preventDefault();
59727
59728  this.previousDragX = this.dragX;
59729  // reverse if right-to-left
59730  var direction = this.options.rightToLeft ? -1 : 1;
59731  if ( this.options.wrapAround ) {
59732    // wrap around move. #589
59733    moveVector.x %= this.slideableWidth;
59734  }
59735  var dragX = this.dragStartPosition + moveVector.x * direction;
59736
59737  if ( !this.options.wrapAround && this.slides.length ) {
59738    // slow drag
59739    var originBound = Math.max( -this.slides[0].target, this.dragStartPosition );
59740    dragX = dragX > originBound ? ( dragX + originBound ) * 0.5 : dragX;
59741    var endBound = Math.min( -this.getLastSlide().target, this.dragStartPosition );
59742    dragX = dragX < endBound ? ( dragX + endBound ) * 0.5 : dragX;
59743  }
59744
59745  this.dragX = dragX;
59746
59747  this.dragMoveTime = new Date();
59748  this.dispatchEvent( 'dragMove', event, [ pointer, moveVector ] );
59749};
59750
59751proto.dragEnd = function( event, pointer ) {
59752  if ( !this.isDraggable ) {
59753    return;
59754  }
59755  if ( this.options.freeScroll ) {
59756    this.isFreeScrolling = true;
59757  }
59758  // set selectedIndex based on where flick will end up
59759  var index = this.dragEndRestingSelect();
59760
59761  if ( this.options.freeScroll && !this.options.wrapAround ) {
59762    // if free-scroll & not wrap around
59763    // do not free-scroll if going outside of bounding slides
59764    // so bounding slides can attract slider, and keep it in bounds
59765    var restingX = this.getRestingPosition();
59766    this.isFreeScrolling = -restingX > this.slides[0].target &&
59767      -restingX < this.getLastSlide().target;
59768  } else if ( !this.options.freeScroll && index == this.selectedIndex ) {
59769    // boost selection if selected index has not changed
59770    index += this.dragEndBoostSelect();
59771  }
59772  delete this.previousDragX;
59773  // apply selection
59774  // TODO refactor this, selecting here feels weird
59775  // HACK, set flag so dragging stays in correct direction
59776  this.isDragSelect = this.options.wrapAround;
59777  this.select( index );
59778  delete this.isDragSelect;
59779  this.dispatchEvent( 'dragEnd', event, [ pointer ] );
59780};
59781
59782proto.dragEndRestingSelect = function() {
59783  var restingX = this.getRestingPosition();
59784  // how far away from selected slide

59785  var distance = Math.abs( this.getSlideDistance( -restingX, this.selectedIndex ) );
59786  // get closet resting going up and going down
59787  var positiveResting = this._getClosestResting( restingX, distance, 1 );
59788  var negativeResting = this._getClosestResting( restingX, distance, -1 );
59789  // use closer resting for wrap-around
59790  var index = positiveResting.distance < negativeResting.distance ?
59791    positiveResting.index : negativeResting.index;
59792  return index;
59793};
59794
59795/**
59796 * given resting X and distance to selected cell
59797 * get the distance and index of the closest cell
59798 * @param {Number} restingX - estimated post-flick resting position
59799 * @param {Number} distance - distance to selected cell
59800 * @param {Integer} increment - +1 or -1, going up or down
59801 * @returns {Object} - { distance: {Number}, index: {Integer} }
59802 */
59803proto._getClosestResting = function( restingX, distance, increment ) {
59804  var index = this.selectedIndex;
59805  var minDistance = Infinity;
59806  var condition = this.options.contain && !this.options.wrapAround ?
59807    // if contain, keep going if distance is equal to minDistance
59808    function( dist, minDist ) {
59809      return dist <= minDist;
59810    } : function( dist, minDist ) {
59811      return dist < minDist;
59812    };
59813  while ( condition( distance, minDistance ) ) {
59814    // measure distance to next cell
59815    index += increment;
59816    minDistance = distance;
59817    distance = this.getSlideDistance( -restingX, index );
59818    if ( distance === null ) {
59819      break;
59820    }
59821    distance = Math.abs( distance );
59822  }
59823  return {
59824    distance: minDistance,
59825    // selected was previous index
59826    index: index - increment,
59827  };
59828};
59829
59830/**
59831 * measure distance between x and a slide target
59832 * @param {Number} x - horizontal position
59833 * @param {Integer} index - slide index
59834 * @returns {Number} - slide distance
59835 */
59836proto.getSlideDistance = function( x, index ) {
59837  var len = this.slides.length;
59838  // wrap around if at least 2 slides
59839  var isWrapAround = this.options.wrapAround && len > 1;
59840  var slideIndex = isWrapAround ? utils.modulo( index, len ) : index;
59841  var slide = this.slides[ slideIndex ];
59842  if ( !slide ) {
59843    return null;
59844  }
59845  // add distance for wrap-around slides
59846  var wrap = isWrapAround ? this.slideableWidth * Math.floor( index/len ) : 0;
59847  return x - ( slide.target + wrap );
59848};
59849
59850proto.dragEndBoostSelect = function() {
59851  // do not boost if no previousDragX or dragMoveTime
59852  if ( this.previousDragX === undefined || !this.dragMoveTime ||
59853    // or if drag was held for 100 ms
59854    new Date() - this.dragMoveTime > 100 ) {
59855    return 0;
59856  }
59857
59858  var distance = this.getSlideDistance( -this.dragX, this.selectedIndex );
59859  var delta = this.previousDragX - this.dragX;
59860  if ( distance > 0 && delta > 0 ) {
59861    // boost to next if moving towards the right, and positive velocity
59862    return 1;
59863  } else if ( distance < 0 && delta < 0 ) {
59864    // boost to previous if moving towards the left, and negative velocity
59865    return -1;
59866  }
59867  return 0;
59868};
59869
59870// ----- staticClick ----- //
59871
59872proto.staticClick = function( event, pointer ) {
59873  // get clickedCell, if cell was clicked
59874  var clickedCell = this.getParentCell( event.target );
59875  var cellElem = clickedCell && clickedCell.element;
59876  var cellIndex = clickedCell && this.cells.indexOf( clickedCell );
59877  this.dispatchEvent( 'staticClick', event, [ pointer, cellElem, cellIndex ] );
59878};
59879
59880// ----- scroll ----- //
59881
59882proto.onscroll = function() {
59883  var scroll = getScrollPosition();
59884  var scrollMoveX = this.pointerDownScroll.x - scroll.x;
59885  var scrollMoveY = this.pointerDownScroll.y - scroll.y;
59886  // cancel click/tap if scroll is too much
59887  if ( Math.abs( scrollMoveX ) > 3 || Math.abs( scrollMoveY ) > 3 ) {
59888    this._pointerDone();
59889  }
59890};
59891
59892// ----- utils ----- //
59893
59894function getScrollPosition() {
59895  return {
59896    x: window.pageXOffset,
59897    y: window.pageYOffset,
59898  };
59899}
59900
59901// -----  ----- //
59902
59903return Flickity;
59904
59905} ) );
59906
59907},{"./flickity":455,"fizzy-ui-utils":449,"unidragger":467}],455:[function(require,module,exports){
59908// Flickity main
59909/* eslint-disable max-params */
59910( function( window, factory ) {
59911  // universal module definition
59912  if ( typeof define == 'function' && define.amd ) {
59913    // AMD
59914    define( [
59915      'ev-emitter/ev-emitter',
59916      'get-size/get-size',
59917      'fizzy-ui-utils/utils',
59918      './cell',
59919      './slide',
59920      './animate',
59921    ], function( EvEmitter, getSize, utils, Cell, Slide, animatePrototype ) {
59922      return factory( window, EvEmitter, getSize, utils, Cell, Slide, animatePrototype );
59923    } );
59924  } else if ( typeof module == 'object' && module.exports ) {
59925    // CommonJS
59926    module.exports = factory(
59927        window,
59928        require('ev-emitter'),
59929        require('get-size'),
59930        require('fizzy-ui-utils'),
59931        require('./cell'),
59932        require('./slide'),
59933        require('./animate')
59934    );
59935  } else {
59936    // browser global
59937    var _Flickity = window.Flickity;
59938
59939    window.Flickity = factory(
59940        window,
59941        window.EvEmitter,
59942        window.getSize,
59943        window.fizzyUIUtils,
59944        _Flickity.Cell,
59945        _Flickity.Slide,
59946        _Flickity.animatePrototype
59947    );
59948  }
59949
59950}( window, function factory( window, EvEmitter, getSize,
59951    utils, Cell, Slide, animatePrototype ) {
59952
59953/* eslint-enable max-params */
59954'use strict';
59955
59956// vars
59957var jQuery = window.jQuery;
59958var getComputedStyle = window.getComputedStyle;
59959var console = window.console;
59960
59961function moveElements( elems, toElem ) {
59962  elems = utils.makeArray( elems );
59963  while ( elems.length ) {
59964    toElem.appendChild( elems.shift() );
59965  }
59966}
59967
59968// -------------------------- Flickity -------------------------- //
59969
59970// globally unique identifiers
59971var GUID = 0;
59972// internal store of all Flickity intances
59973var instances = {};
59974
59975function Flickity( element, options ) {
59976  var queryElement = utils.getQueryElement( element );
59977  if ( !queryElement ) {
59978    if ( console ) {
59979      console.error( 'Bad element for Flickity: ' + ( queryElement || element ) );
59980    }
59981    return;
59982  }
59983  this.element = queryElement;
59984  // do not initialize twice on same element
59985  if ( this.element.flickityGUID ) {
59986    var instance = instances[ this.element.flickityGUID ];
59987    if ( instance ) instance.option( options );
59988    return instance;
59989  }
59990
59991  // add jQuery
59992  if ( jQuery ) {
59993    this.$element = jQuery( this.element );
59994  }
59995  // options
59996  this.options = utils.extend( {}, this.constructor.defaults );
59997  this.option( options );
59998
59999  // kick things off
60000  this._create();
60001}
60002
60003Flickity.defaults = {
60004  accessibility: true,
60005  // adaptiveHeight: false,
60006  cellAlign: 'center',
60007  // cellSelector: undefined,

60008  // contain: false,
60009  freeScrollFriction: 0.075, // friction when free-scrolling
60010  friction: 0.28, // friction when selecting
60011  namespaceJQueryEvents: true,
60012  // initialIndex: 0,
60013  percentPosition: true,
60014  resize: true,
60015  selectedAttraction: 0.025,
60016  setGallerySize: true,
60017  // watchCSS: false,
60018  // wrapAround: false
60019};
60020
60021// hash of methods triggered on _create()
60022Flickity.createMethods = [];
60023
60024var proto = Flickity.prototype;
60025// inherit EventEmitter
60026utils.extend( proto, EvEmitter.prototype );
60027
60028proto._create = function() {
60029  // add id for Flickity.data
60030  var id = this.guid = ++GUID;
60031  this.element.flickityGUID = id; // expando
60032  instances[ id ] = this; // associate via id
60033  // initial properties
60034  this.selectedIndex = 0;
60035  // how many frames slider has been in same position
60036  this.restingFrames = 0;
60037  // initial physics properties
60038  this.x = 0;
60039  this.velocity = 0;
60040  this.originSide = this.options.rightToLeft ? 'right' : 'left';
60041  // create viewport & slider
60042  this.viewport = document.createElement('div');
60043  this.viewport.className = 'flickity-viewport';
60044  this._createSlider();
60045
60046  if ( this.options.resize || this.options.watchCSS ) {
60047    window.addEventListener( 'resize', this );
60048  }
60049
60050  // add listeners from on option
60051  for ( var eventName in this.options.on ) {
60052    var listener = this.options.on[ eventName ];
60053    this.on( eventName, listener );
60054  }
60055
60056  Flickity.createMethods.forEach( function( method ) {
60057    this[ method ]();
60058  }, this );
60059
60060  if ( this.options.watchCSS ) {
60061    this.watchCSS();
60062  } else {
60063    this.activate();
60064  }
60065
60066};
60067
60068/**
60069 * set options
60070 * @param {Object} opts - options to extend
60071 */
60072proto.option = function( opts ) {
60073  utils.extend( this.options, opts );
60074};
60075
60076proto.activate = function() {
60077  if ( this.isActive ) {
60078    return;
60079  }
60080  this.isActive = true;
60081  this.element.classList.add('flickity-enabled');
60082  if ( this.options.rightToLeft ) {
60083    this.element.classList.add('flickity-rtl');
60084  }
60085
60086  this.getSize();
60087  // move initial cell elements so they can be loaded as cells
60088  var cellElems = this._filterFindCellElements( this.element.children );
60089  moveElements( cellElems, this.slider );
60090  this.viewport.appendChild( this.slider );
60091  this.element.appendChild( this.viewport );
60092  // get cells from children
60093  this.reloadCells();
60094
60095  if ( this.options.accessibility ) {
60096    // allow element to focusable
60097    this.element.tabIndex = 0;
60098    // listen for key presses
60099    this.element.addEventListener( 'keydown', this );
60100  }
60101
60102  this.emitEvent('activate');
60103  this.selectInitialIndex();
60104  // flag for initial activation, for using initialIndex
60105  this.isInitActivated = true;
60106  // ready event. #493
60107  this.dispatchEvent('ready');
60108};
60109
60110// slider positions the cells
60111proto._createSlider = function() {
60112  // slider element does all the positioning
60113  var slider = document.createElement('div');
60114  slider.className = 'flickity-slider';
60115  slider.style[ this.originSide ] = 0;
60116  this.slider = slider;
60117};
60118
60119proto._filterFindCellElements = function( elems ) {
60120  return utils.filterFindElements( elems, this.options.cellSelector );
60121};
60122
60123// goes through all children
60124proto.reloadCells = function() {
60125  // collection of item elements
60126  this.cells = this._makeCells( this.slider.children );
60127  this.positionCells();
60128  this._getWrapShiftCells();
60129  this.setGallerySize();
60130};
60131
60132/**
60133 * turn elements into Flickity.Cells
60134 * @param {[Array, NodeList, HTMLElement]} elems - elements to make into cells
60135 * @returns {Array} items - collection of new Flickity Cells
60136 */
60137proto._makeCells = function( elems ) {
60138  var cellElems = this._filterFindCellElements( elems );
60139
60140  // create new Flickity for collection
60141  var cells = cellElems.map( function( cellElem ) {
60142    return new Cell( cellElem, this );
60143  }, this );
60144
60145  return cells;
60146};
60147
60148proto.getLastCell = function() {
60149  return this.cells[ this.cells.length - 1 ];
60150};
60151
60152proto.getLastSlide = function() {
60153  return this.slides[ this.slides.length - 1 ];
60154};
60155
60156// positions all cells
60157proto.positionCells = function() {
60158  // size all cells
60159  this._sizeCells( this.cells );
60160  // position all cells
60161  this._positionCells( 0 );
60162};
60163
60164/**
60165 * position certain cells
60166 * @param {Integer} index - which cell to start with
60167 */
60168proto._positionCells = function( index ) {
60169  index = index || 0;
60170  // also measure maxCellHeight
60171  // start 0 if positioning all cells
60172  this.maxCellHeight = index ? this.maxCellHeight || 0 : 0;
60173  var cellX = 0;
60174  // get cellX
60175  if ( index > 0 ) {
60176    var startCell = this.cells[ index - 1 ];
60177    cellX = startCell.x + startCell.size.outerWidth;
60178  }
60179  var len = this.cells.length;
60180  for ( var i = index; i < len; i++ ) {
60181    var cell = this.cells[i];
60182    cell.setPosition( cellX );
60183    cellX += cell.size.outerWidth;
60184    this.maxCellHeight = Math.max( cell.size.outerHeight, this.maxCellHeight );
60185  }
60186  // keep track of cellX for wrap-around
60187  this.slideableWidth = cellX;
60188  // slides
60189  this.updateSlides();
60190  // contain slides target
60191  this._containSlides();
60192  // update slidesWidth
60193  this.slidesWidth = len ? this.getLastSlide().target - this.slides[0].target : 0;
60194};
60195
60196/**
60197 * cell.getSize() on multiple cells
60198 * @param {Array} cells - cells to size
60199 */
60200proto._sizeCells = function( cells ) {

60201  cells.forEach( function( cell ) {
60202    cell.getSize();
60203  } );
60204};
60205
60206// --------------------------  -------------------------- //
60207
60208proto.updateSlides = function() {
60209  this.slides = [];
60210  if ( !this.cells.length ) {
60211    return;
60212  }
60213
60214  var slide = new Slide( this );
60215  this.slides.push( slide );
60216  var isOriginLeft = this.originSide == 'left';
60217  var nextMargin = isOriginLeft ? 'marginRight' : 'marginLeft';
60218
60219  var canCellFit = this._getCanCellFit();
60220
60221  this.cells.forEach( function( cell, i ) {
60222    // just add cell if first cell in slide
60223    if ( !slide.cells.length ) {
60224      slide.addCell( cell );
60225      return;
60226    }
60227
60228    var slideWidth = ( slide.outerWidth - slide.firstMargin ) +
60229      ( cell.size.outerWidth - cell.size[ nextMargin ] );
60230
60231    if ( canCellFit.call( this, i, slideWidth ) ) {
60232      slide.addCell( cell );
60233    } else {
60234      // doesn't fit, new slide
60235      slide.updateTarget();
60236
60237      slide = new Slide( this );
60238      this.slides.push( slide );
60239      slide.addCell( cell );
60240    }
60241  }, this );
60242  // last slide
60243  slide.updateTarget();
60244  // update .selectedSlide
60245  this.updateSelectedSlide();
60246};
60247
60248proto._getCanCellFit = function() {
60249  var groupCells = this.options.groupCells;
60250  if ( !groupCells ) {
60251    return function() {
60252      return false;
60253    };
60254  } else if ( typeof groupCells == 'number' ) {
60255    // group by number. 3 -> [0,1,2], [3,4,5], ...
60256    var number = parseInt( groupCells, 10 );
60257    return function( i ) {
60258      return ( i % number ) !== 0;
60259    };
60260  }
60261  // default, group by width of slide
60262  // parse '75%
60263  var percentMatch = typeof groupCells == 'string' &&
60264    groupCells.match( /^(\d+)%$/ );
60265  var percent = percentMatch ? parseInt( percentMatch[1], 10 ) / 100 : 1;
60266  return function( i, slideWidth ) {
60267    /* eslint-disable-next-line no-invalid-this */
60268    return slideWidth <= ( this.size.innerWidth + 1 ) * percent;
60269  };
60270};
60271
60272// alias _init for jQuery plugin .flickity()
60273proto._init =
60274proto.reposition = function() {
60275  this.positionCells();
60276  this.positionSliderAtSelected();
60277};
60278
60279proto.getSize = function() {
60280  this.size = getSize( this.element );
60281  this.setCellAlign();
60282  this.cursorPosition = this.size.innerWidth * this.cellAlign;
60283};
60284
60285var cellAlignShorthands = {
60286  // cell align, then based on origin side
60287  center: {
60288    left: 0.5,
60289    right: 0.5,
60290  },
60291  left: {
60292    left: 0,
60293    right: 1,
60294  },
60295  right: {
60296    right: 0,
60297    left: 1,
60298  },
60299};
60300
60301proto.setCellAlign = function() {
60302  var shorthand = cellAlignShorthands[ this.options.cellAlign ];
60303  this.cellAlign = shorthand ? shorthand[ this.originSide ] : this.options.cellAlign;
60304};
60305
60306proto.setGallerySize = function() {
60307  if ( this.options.setGallerySize ) {
60308    var height = this.options.adaptiveHeight && this.selectedSlide ?
60309      this.selectedSlide.height : this.maxCellHeight;
60310    this.viewport.style.height = height + 'px';
60311  }
60312};
60313
60314proto._getWrapShiftCells = function() {
60315  // only for wrap-around
60316  if ( !this.options.wrapAround ) {
60317    return;
60318  }
60319  // unshift previous cells
60320  this._unshiftCells( this.beforeShiftCells );
60321  this._unshiftCells( this.afterShiftCells );
60322  // get before cells
60323  // initial gap
60324  var gapX = this.cursorPosition;
60325  var cellIndex = this.cells.length - 1;
60326  this.beforeShiftCells = this._getGapCells( gapX, cellIndex, -1 );
60327  // get after cells
60328  // ending gap between last cell and end of gallery viewport
60329  gapX = this.size.innerWidth - this.cursorPosition;
60330  // start cloning at first cell, working forwards
60331  this.afterShiftCells = this._getGapCells( gapX, 0, 1 );
60332};
60333
60334proto._getGapCells = function( gapX, cellIndex, increment ) {
60335  // keep adding cells until the cover the initial gap
60336  var cells = [];
60337  while ( gapX > 0 ) {
60338    var cell = this.cells[ cellIndex ];
60339    if ( !cell ) {
60340      break;
60341    }
60342    cells.push( cell );
60343    cellIndex += increment;
60344    gapX -= cell.size.outerWidth;
60345  }
60346  return cells;
60347};
60348
60349// ----- contain ----- //
60350
60351// contain cell targets so no excess sliding
60352proto._containSlides = function() {
60353  if ( !this.options.contain || this.options.wrapAround || !this.cells.length ) {
60354    return;
60355  }
60356  var isRightToLeft = this.options.rightToLeft;
60357  var beginMargin = isRightToLeft ? 'marginRight' : 'marginLeft';
60358  var endMargin = isRightToLeft ? 'marginLeft' : 'marginRight';
60359  var contentWidth = this.slideableWidth - this.getLastCell().size[ endMargin ];
60360  // content is less than gallery size
60361  var isContentSmaller = contentWidth < this.size.innerWidth;
60362  // bounds
60363  var beginBound = this.cursorPosition + this.cells[0].size[ beginMargin ];
60364  var endBound = contentWidth - this.size.innerWidth * ( 1 - this.cellAlign );
60365  // contain each cell target

60366  this.slides.forEach( function( slide ) {
60367    if ( isContentSmaller ) {
60368      // all cells fit inside gallery
60369      slide.target = contentWidth * this.cellAlign;
60370    } else {
60371      // contain to bounds
60372      slide.target = Math.max( slide.target, beginBound );
60373      slide.target = Math.min( slide.target, endBound );
60374    }
60375  }, this );
60376};
60377
60378// -----  ----- //
60379
60380/**
60381 * emits events via eventEmitter and jQuery events
60382 * @param {String} type - name of event
60383 * @param {Event} event - original event
60384 * @param {Array} args - extra arguments
60385 */
60386proto.dispatchEvent = function( type, event, args ) {
60387  var emitArgs = event ? [ event ].concat( args ) : args;
60388  this.emitEvent( type, emitArgs );
60389
60390  if ( jQuery && this.$element ) {
60391    // default trigger with type if no event
60392    type += this.options.namespaceJQueryEvents ? '.flickity' : '';
60393    var $event = type;
60394    if ( event ) {
60395      // create jQuery event
60396      var jQEvent = new jQuery.Event( event );
60397      jQEvent.type = type;
60398      $event = jQEvent;
60399    }
60400    this.$element.trigger( $event, args );
60401  }
60402};
60403
60404// -------------------------- select -------------------------- //
60405
60406/**
60407 * @param {Integer} index - index of the slide
60408 * @param {Boolean} isWrap - will wrap-around to last/first if at the end
60409 * @param {Boolean} isInstant - will immediately set position at selected cell
60410 */
60411proto.select = function( index, isWrap, isInstant ) {
60412  if ( !this.isActive ) {
60413    return;
60414  }
60415  index = parseInt( index, 10 );
60416  this._wrapSelect( index );
60417
60418  if ( this.options.wrapAround || isWrap ) {
60419    index = utils.modulo( index, this.slides.length );
60420  }
60421  // bail if invalid index
60422  if ( !this.slides[ index ] ) {
60423    return;
60424  }
60425  var prevIndex = this.selectedIndex;
60426  this.selectedIndex = index;
60427  this.updateSelectedSlide();
60428  if ( isInstant ) {
60429    this.positionSliderAtSelected();
60430  } else {
60431    this.startAnimation();
60432  }
60433  if ( this.options.adaptiveHeight ) {
60434    this.setGallerySize();
60435  }
60436  // events
60437  this.dispatchEvent( 'select', null, [ index ] );
60438  // change event if new index
60439  if ( index != prevIndex ) {
60440    this.dispatchEvent( 'change', null, [ index ] );
60441  }
60442  // old v1 event name, remove in v3
60443  this.dispatchEvent('cellSelect');
60444};
60445
60446// wraps position for wrapAround, to move to closest slide. #113
60447proto._wrapSelect = function( index ) {
60448  var len = this.slides.length;
60449  var isWrapping = this.options.wrapAround && len > 1;
60450  if ( !isWrapping ) {
60451    return index;
60452  }
60453  var wrapIndex = utils.modulo( index, len );
60454  // go to shortest
60455  var delta = Math.abs( wrapIndex - this.selectedIndex );
60456  var backWrapDelta = Math.abs( ( wrapIndex + len ) - this.selectedIndex );
60457  var forewardWrapDelta = Math.abs( ( wrapIndex - len ) - this.selectedIndex );
60458  if ( !this.isDragSelect && backWrapDelta < delta ) {
60459    index += len;
60460  } else if ( !this.isDragSelect && forewardWrapDelta < delta ) {
60461    index -= len;
60462  }
60463  // wrap position so slider is within normal area
60464  if ( index < 0 ) {
60465    this.x -= this.slideableWidth;
60466  } else if ( index >= len ) {
60467    this.x += this.slideableWidth;
60468  }
60469};
60470
60471proto.previous = function( isWrap, isInstant ) {
60472  this.select( this.selectedIndex - 1, isWrap, isInstant );
60473};
60474
60475proto.next = function( isWrap, isInstant ) {
60476  this.select( this.selectedIndex + 1, isWrap, isInstant );
60477};
60478
60479proto.updateSelectedSlide = function() {
60480  var slide = this.slides[ this.selectedIndex ];
60481  // selectedIndex could be outside of slides, if triggered before resize()
60482  if ( !slide ) {
60483    return;
60484  }
60485  // unselect previous selected slide
60486  this.unselectSelectedSlide();
60487  // update new selected slide
60488  this.selectedSlide = slide;
60489  slide.select();
60490  this.selectedCells = slide.cells;
60491  this.selectedElements = slide.getCellElements();
60492  // HACK: selectedCell & selectedElement is first cell in slide, backwards compatibility
60493  // Remove in v3?
60494  this.selectedCell = slide.cells[0];
60495  this.selectedElement = this.selectedElements[0];
60496};
60497
60498proto.unselectSelectedSlide = function() {
60499  if ( this.selectedSlide ) {
60500    this.selectedSlide.unselect();
60501  }
60502};
60503
60504proto.selectInitialIndex = function() {
60505  var initialIndex = this.options.initialIndex;
60506  // already activated, select previous selectedIndex
60507  if ( this.isInitActivated ) {
60508    this.select( this.selectedIndex, false, true );
60509    return;
60510  }
60511  // select with selector string
60512  if ( initialIndex && typeof initialIndex == 'string' ) {
60513    var cell = this.queryCell( initialIndex );
60514    if ( cell ) {
60515      this.selectCell( initialIndex, false, true );
60516      return;
60517    }
60518  }
60519
60520  var index = 0;
60521  // select with number
60522  if ( initialIndex && this.slides[ initialIndex ] ) {
60523    index = initialIndex;
60524  }
60525  // select instantly
60526  this.select( index, false, true );
60527};
60528
60529/**
60530 * select slide from number or cell element
60531 * @param {[Element, Number]} value - zero-based index or element to select
60532 * @param {Boolean} isWrap - enables wrapping around for extra index
60533 * @param {Boolean} isInstant - disables slide animation
60534 */
60535proto.selectCell = function( value, isWrap, isInstant ) {
60536  // get cell
60537  var cell = this.queryCell( value );
60538  if ( !cell ) {
60539    return;
60540  }
60541
60542  var index = this.getCellSlideIndex( cell );
60543  this.select( index, isWrap, isInstant );
60544};
60545
60546proto.getCellSlideIndex = function( cell ) {
60547  // get index of slides that has cell
60548  for ( var i = 0; i < this.slides.length; i++ ) {
60549    var slide = this.slides[i];
60550    var index = slide.cells.indexOf( cell );
60551    if ( index != -1 ) {
60552      return i;
60553    }
60554  }
60555};
60556
60557// -------------------------- get cells -------------------------- //
60558
60559/**
60560 * get Flickity.Cell, given an Element
60561 * @param {Element} elem - matching cell element
60562 * @returns {Flickity.Cell} cell - matching cell
60563 */
60564proto.getCell = function( elem ) {
60565  // loop through cells to get the one that matches
60566  for ( var i = 0; i < this.cells.length; i++ ) {
60567    var cell = this.cells[i];
60568    if ( cell.element == elem ) {
60569      return cell;
60570    }
60571  }
60572};
60573
60574/**
60575 * get collection of Flickity.Cells, given Elements
60576 * @param {[Element, Array, NodeList]} elems - multiple elements
60577 * @returns {Array} cells - Flickity.Cells
60578 */
60579proto.getCells = function( elems ) {
60580  elems = utils.makeArray( elems );
60581  var cells = [];

60582  elems.forEach( function( elem ) {
60583    var cell = this.getCell( elem );
60584    if ( cell ) {
60585      cells.push( cell );
60586    }
60587  }, this );
60588  return cells;
60589};
60590
60591/**
60592 * get cell elements
60593 * @returns {Array} cellElems
60594 */
60595proto.getCellElements = function() {
60596  return this.cells.map( function( cell ) {
60597    return cell.element;
60598  } );
60599};
60600
60601/**
60602 * get parent cell from an element
60603 * @param {Element} elem - child element
60604 * @returns {Flickit.Cell} cell - parent cell
60605 */
60606proto.getParentCell = function( elem ) {
60607  // first check if elem is cell
60608  var cell = this.getCell( elem );
60609  if ( cell ) {
60610    return cell;
60611  }
60612  // try to get parent cell elem
60613  elem = utils.getParent( elem, '.flickity-slider > *' );
60614  return this.getCell( elem );
60615};
60616
60617/**
60618 * get cells adjacent to a slide
60619 * @param {Integer} adjCount - number of adjacent slides
60620 * @param {Integer} index - index of slide to start
60621 * @returns {Array} cells - array of Flickity.Cells
60622 */
60623proto.getAdjacentCellElements = function( adjCount, index ) {
60624  if ( !adjCount ) {
60625    return this.selectedSlide.getCellElements();
60626  }
60627  index = index === undefined ? this.selectedIndex : index;
60628
60629  var len = this.slides.length;
60630  if ( 1 + ( adjCount * 2 ) >= len ) {
60631    return this.getCellElements();
60632  }
60633
60634  var cellElems = [];
60635  for ( var i = index - adjCount; i <= index + adjCount; i++ ) {
60636    var slideIndex = this.options.wrapAround ? utils.modulo( i, len ) : i;
60637    var slide = this.slides[ slideIndex ];
60638    if ( slide ) {
60639      cellElems = cellElems.concat( slide.getCellElements() );
60640    }
60641  }
60642  return cellElems;
60643};
60644
60645/**
60646 * select slide from number or cell element
60647 * @param {[Element, String, Number]} selector - element, selector string, or index
60648 * @returns {Flickity.Cell} - matching cell
60649 */
60650proto.queryCell = function( selector ) {
60651  if ( typeof selector == 'number' ) {
60652    // use number as index
60653    return this.cells[ selector ];
60654  }
60655  if ( typeof selector == 'string' ) {
60656    // do not select invalid selectors from hash: #123, #/. #791
60657    if ( selector.match( /^[#.]?[\d/]/ ) ) {
60658      return;
60659    }
60660    // use string as selector, get element
60661    selector = this.element.querySelector( selector );
60662  }
60663  // get cell from element
60664  return this.getCell( selector );
60665};
60666
60667// -------------------------- events -------------------------- //
60668
60669proto.uiChange = function() {
60670  this.emitEvent('uiChange');
60671};
60672
60673// keep focus on element when child UI elements are clicked
60674proto.childUIPointerDown = function( event ) {
60675  // HACK iOS does not allow touch events to bubble up?!
60676  if ( event.type != 'touchstart' ) {
60677    event.preventDefault();
60678  }
60679  this.focus();
60680};
60681
60682// ----- resize ----- //
60683
60684proto.onresize = function() {
60685  this.watchCSS();
60686  this.resize();
60687};
60688
60689utils.debounceMethod( Flickity, 'onresize', 150 );
60690
60691proto.resize = function() {
60692  if ( !this.isActive ) {
60693    return;
60694  }
60695  this.getSize();
60696  // wrap values
60697  if ( this.options.wrapAround ) {
60698    this.x = utils.modulo( this.x, this.slideableWidth );
60699  }
60700  this.positionCells();
60701  this._getWrapShiftCells();
60702  this.setGallerySize();
60703  this.emitEvent('resize');
60704  // update selected index for group slides, instant
60705  // TODO: position can be lost between groups of various numbers
60706  var selectedElement = this.selectedElements && this.selectedElements[0];
60707  this.selectCell( selectedElement, false, true );
60708};
60709
60710// watches the :after property, activates/deactivates
60711proto.watchCSS = function() {
60712  var watchOption = this.options.watchCSS;
60713  if ( !watchOption ) {
60714    return;
60715  }
60716
60717  var afterContent = getComputedStyle( this.element, ':after' ).content;
60718  // activate if :after { content: 'flickity' }
60719  if ( afterContent.indexOf('flickity') != -1 ) {
60720    this.activate();
60721  } else {
60722    this.deactivate();
60723  }
60724};
60725
60726// ----- keydown ----- //
60727
60728// go previous/next if left/right keys pressed
60729proto.onkeydown = function( event ) {
60730  // only work if element is in focus
60731  var isNotFocused = document.activeElement && document.activeElement != this.element;
60732  if ( !this.options.accessibility || isNotFocused ) {
60733    return;
60734  }
60735
60736  var handler = Flickity.keyboardHandlers[ event.keyCode ];
60737  if ( handler ) {
60738    handler.call( this );
60739  }
60740};
60741
60742Flickity.keyboardHandlers = {
60743  // left arrow
60744  37: function() {
60745    var leftMethod = this.options.rightToLeft ? 'next' : 'previous';
60746    this.uiChange();
60747    this[ leftMethod ]();
60748  },
60749  // right arrow
60750  39: function() {
60751    var rightMethod = this.options.rightToLeft ? 'previous' : 'next';
60752    this.uiChange();
60753    this[ rightMethod ]();
60754  },
60755};
60756
60757// ----- focus ----- //
60758
60759proto.focus = function() {
60760  // TODO remove scrollTo once focus options gets more support
60761  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus ...
60762  //    #Browser_compatibility
60763  var prevScrollY = window.pageYOffset;
60764  this.element.focus({ preventScroll: true });
60765  // hack to fix scroll jump after focus, #76
60766  if ( window.pageYOffset != prevScrollY ) {
60767    window.scrollTo( window.pageXOffset, prevScrollY );
60768  }
60769};
60770
60771// -------------------------- destroy -------------------------- //
60772
60773// deactivate all Flickity functionality, but keep stuff available
60774proto.deactivate = function() {
60775  if ( !this.isActive ) {
60776    return;
60777  }
60778  this.element.classList.remove('flickity-enabled');
60779  this.element.classList.remove('flickity-rtl');
60780  this.unselectSelectedSlide();
60781  // destroy cells

60782  this.cells.forEach( function( cell ) {
60783    cell.destroy();
60784  } );
60785  this.element.removeChild( this.viewport );
60786  // move child elements back into element
60787  moveElements( this.slider.children, this.element );
60788  if ( this.options.accessibility ) {
60789    this.element.removeAttribute('tabIndex');
60790    this.element.removeEventListener( 'keydown', this );
60791  }
60792  // set flags
60793  this.isActive = false;
60794  this.emitEvent('deactivate');
60795};
60796
60797proto.destroy = function() {
60798  this.deactivate();
60799  window.removeEventListener( 'resize', this );
60800  this.allOff();
60801  this.emitEvent('destroy');
60802  if ( jQuery && this.$element ) {
60803    jQuery.removeData( this.element, 'flickity' );
60804  }
60805  delete this.element.flickityGUID;
60806  delete instances[ this.guid ];
60807};
60808
60809// -------------------------- prototype -------------------------- //
60810
60811utils.extend( proto, animatePrototype );
60812
60813// -------------------------- extras -------------------------- //
60814
60815/**
60816 * get Flickity instance from element
60817 * @param {[Element, String]} elem - element or selector string
60818 * @returns {Flickity} - Flickity instance
60819 */
60820Flickity.data = function( elem ) {
60821  elem = utils.getQueryElement( elem );
60822  var id = elem && elem.flickityGUID;
60823  return id && instances[ id ];
60824};
60825
60826utils.htmlInit( Flickity, 'flickity' );
60827
60828if ( jQuery && jQuery.bridget ) {
60829  jQuery.bridget( 'flickity', Flickity );
60830}
60831
60832// set internal jQuery, for Webpack + jQuery v3, #478
60833Flickity.setJQuery = function( jq ) {
60834  jQuery = jq;
60835};
60836
60837Flickity.Cell = Cell;
60838Flickity.Slide = Slide;
60839
60840return Flickity;
60841
60842} ) );
60843
60844},{"./animate":452,"./cell":453,"./slide":461,"ev-emitter":443,"fizzy-ui-utils":449,"get-size":462}],456:[function(require,module,exports){
60845/*!
60846 * Flickity v2.2.2
60847 * Touch, responsive, flickable carousels
60848 *
60849 * Licensed GPLv3 for open source use
60850 * or Flickity Commercial License for commercial use
60851 *
60852 * https://flickity.metafizzy.co
60853 * Copyright 2015-2021 Metafizzy
60854 */
60855
60856( function( window, factory ) {
60857  // universal module definition
60858  if ( typeof define == 'function' && define.amd ) {
60859    // AMD
60860    define( [
60861      './flickity',
60862      './drag',
60863      './prev-next-button',
60864      './page-dots',
60865      './player',
60866      './add-remove-cell',
60867      './lazyload',
60868    ], factory );
60869  } else if ( typeof module == 'object' && module.exports ) {
60870    // CommonJS
60871    module.exports = factory(
60872        require('./flickity'),
60873        require('./drag'),
60874        require('./prev-next-button'),
60875        require('./page-dots'),
60876        require('./player'),
60877        require('./add-remove-cell'),
60878        require('./lazyload')
60879    );
60880  }
60881
60882} )( window, function factory( Flickity ) {
60883  return Flickity;
60884} );
60885
60886},{"./add-remove-cell":451,"./drag":454,"./flickity":455,"./lazyload":457,"./page-dots":458,"./player":459,"./prev-next-button":460}],457:[function(require,module,exports){
60887// lazyload
60888( function( window, factory ) {
60889  // universal module definition
60890  if ( typeof define == 'function' && define.amd ) {
60891    // AMD
60892    define( [
60893      './flickity',
60894      'fizzy-ui-utils/utils',
60895    ], function( Flickity, utils ) {
60896      return factory( window, Flickity, utils );
60897    } );
60898  } else if ( typeof module == 'object' && module.exports ) {
60899    // CommonJS
60900    module.exports = factory(
60901        window,
60902        require('./flickity'),
60903        require('fizzy-ui-utils')
60904    );
60905  } else {
60906    // browser global
60907    factory(
60908        window,
60909        window.Flickity,
60910        window.fizzyUIUtils
60911    );
60912  }
60913
60914}( window, function factory( window, Flickity, utils ) {
60915'use strict';
60916
60917Flickity.createMethods.push('_createLazyload');
60918var proto = Flickity.prototype;
60919
60920proto._createLazyload = function() {
60921  this.on( 'select', this.lazyLoad );
60922};
60923
60924proto.lazyLoad = function() {
60925  var lazyLoad = this.options.lazyLoad;
60926  if ( !lazyLoad ) {
60927    return;
60928  }
60929  // get adjacent cells, use lazyLoad option for adjacent count
60930  var adjCount = typeof lazyLoad == 'number' ? lazyLoad : 0;
60931  var cellElems = this.getAdjacentCellElements( adjCount );
60932  // get lazy images in those cells
60933  var lazyImages = [];

60934  cellElems.forEach( function( cellElem ) {
60935    var lazyCellImages = getCellLazyImages( cellElem );
60936    lazyImages = lazyImages.concat( lazyCellImages );
60937  } );
60938  // load lazy images
60939  lazyImages.forEach( function( img ) {
60940    new LazyLoader( img, this );
60941  }, this );
60942};
60943
60944function getCellLazyImages( cellElem ) {
60945  // check if cell element is lazy image
60946  if ( cellElem.nodeName == 'IMG' ) {
60947    var lazyloadAttr = cellElem.getAttribute('data-flickity-lazyload');
60948    var srcAttr = cellElem.getAttribute('data-flickity-lazyload-src');
60949    var srcsetAttr = cellElem.getAttribute('data-flickity-lazyload-srcset');
60950    if ( lazyloadAttr || srcAttr || srcsetAttr ) {
60951      return [ cellElem ];
60952    }
60953  }
60954  // select lazy images in cell
60955  var lazySelector = 'img[data-flickity-lazyload], ' +
60956    'img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]';
60957  var imgs = cellElem.querySelectorAll( lazySelector );
60958  return utils.makeArray( imgs );
60959}
60960
60961// -------------------------- LazyLoader -------------------------- //
60962
60963/**
60964 * class to handle loading images
60965 * @param {Image} img - Image element
60966 * @param {Flickity} flickity - Flickity instance
60967 */
60968function LazyLoader( img, flickity ) {
60969  this.img = img;
60970  this.flickity = flickity;
60971  this.load();
60972}
60973
60974LazyLoader.prototype.handleEvent = utils.handleEvent;
60975
60976LazyLoader.prototype.load = function() {
60977  this.img.addEventListener( 'load', this );
60978  this.img.addEventListener( 'error', this );
60979  // get src & srcset
60980  var src = this.img.getAttribute('data-flickity-lazyload') ||
60981    this.img.getAttribute('data-flickity-lazyload-src');
60982  var srcset = this.img.getAttribute('data-flickity-lazyload-srcset');
60983  // set src & serset
60984  this.img.src = src;
60985  if ( srcset ) {
60986    this.img.setAttribute( 'srcset', srcset );
60987  }
60988  // remove attr
60989  this.img.removeAttribute('data-flickity-lazyload');
60990  this.img.removeAttribute('data-flickity-lazyload-src');
60991  this.img.removeAttribute('data-flickity-lazyload-srcset');
60992};
60993
60994LazyLoader.prototype.onload = function( event ) {
60995  this.complete( event, 'flickity-lazyloaded' );
60996};
60997
60998LazyLoader.prototype.onerror = function( event ) {
60999  this.complete( event, 'flickity-lazyerror' );
61000};
61001
61002LazyLoader.prototype.complete = function( event, className ) {
61003  // unbind events
61004  this.img.removeEventListener( 'load', this );
61005  this.img.removeEventListener( 'error', this );
61006
61007  var cell = this.flickity.getParentCell( this.img );
61008  var cellElem = cell && cell.element;
61009  this.flickity.cellSizeChange( cellElem );
61010
61011  this.img.classList.add( className );
61012  this.flickity.dispatchEvent( 'lazyLoad', event, cellElem );
61013};
61014
61015// -----  ----- //
61016
61017Flickity.LazyLoader = LazyLoader;
61018
61019return Flickity;
61020
61021} ) );
61022
61023},{"./flickity":455,"fizzy-ui-utils":449}],458:[function(require,module,exports){
61024// page dots
61025( function( window, factory ) {
61026  // universal module definition
61027  if ( typeof define == 'function' && define.amd ) {
61028    // AMD
61029    define( [
61030      './flickity',
61031      'unipointer/unipointer',
61032      'fizzy-ui-utils/utils',
61033    ], function( Flickity, Unipointer, utils ) {
61034      return factory( window, Flickity, Unipointer, utils );
61035    } );
61036  } else if ( typeof module == 'object' && module.exports ) {
61037    // CommonJS
61038    module.exports = factory(
61039        window,
61040        require('./flickity'),
61041        require('unipointer'),
61042        require('fizzy-ui-utils')
61043    );
61044  } else {
61045    // browser global
61046    factory(
61047        window,
61048        window.Flickity,
61049        window.Unipointer,
61050        window.fizzyUIUtils
61051    );
61052  }
61053
61054}( window, function factory( window, Flickity, Unipointer, utils ) {
61055
61056// -------------------------- PageDots -------------------------- //
61057
61058'use strict';
61059
61060function PageDots( parent ) {
61061  this.parent = parent;
61062  this._create();
61063}
61064
61065PageDots.prototype = Object.create( Unipointer.prototype );
61066
61067PageDots.prototype._create = function() {
61068  // create holder element
61069  this.holder = document.createElement('ol');
61070  this.holder.className = 'flickity-page-dots';
61071  // create dots, array of elements
61072  this.dots = [];
61073  // events
61074  this.handleClick = this.onClick.bind( this );
61075  this.on( 'pointerDown', this.parent.childUIPointerDown.bind( this.parent ) );
61076};
61077
61078PageDots.prototype.activate = function() {
61079  this.setDots();
61080  this.holder.addEventListener( 'click', this.handleClick );
61081  this.bindStartEvent( this.holder );
61082  // add to DOM
61083  this.parent.element.appendChild( this.holder );
61084};
61085
61086PageDots.prototype.deactivate = function() {
61087  this.holder.removeEventListener( 'click', this.handleClick );
61088  this.unbindStartEvent( this.holder );
61089  // remove from DOM
61090  this.parent.element.removeChild( this.holder );
61091};
61092
61093PageDots.prototype.setDots = function() {
61094  // get difference between number of slides and number of dots
61095  var delta = this.parent.slides.length - this.dots.length;
61096  if ( delta > 0 ) {
61097    this.addDots( delta );
61098  } else if ( delta < 0 ) {
61099    this.removeDots( -delta );
61100  }
61101};
61102
61103PageDots.prototype.addDots = function( count ) {
61104  var fragment = document.createDocumentFragment();
61105  var newDots = [];
61106  var length = this.dots.length;
61107  var max = length + count;
61108
61109  for ( var i = length; i < max; i++ ) {
61110    var dot = document.createElement('li');
61111    dot.className = 'dot';
61112    dot.setAttribute( 'aria-label', 'Page dot ' + ( i + 1 ) );
61113    fragment.appendChild( dot );
61114    newDots.push( dot );
61115  }
61116
61117  this.holder.appendChild( fragment );
61118  this.dots = this.dots.concat( newDots );
61119};
61120
61121PageDots.prototype.removeDots = function( count ) {
61122  // remove from this.dots collection
61123  var removeDots = this.dots.splice( this.dots.length - count, count );
61124  // remove from DOM

61125  removeDots.forEach( function( dot ) {
61126    this.holder.removeChild( dot );
61127  }, this );
61128};
61129
61130PageDots.prototype.updateSelected = function() {
61131  // remove selected class on previous
61132  if ( this.selectedDot ) {
61133    this.selectedDot.className = 'dot';
61134    this.selectedDot.removeAttribute('aria-current');
61135  }
61136  // don't proceed if no dots
61137  if ( !this.dots.length ) {
61138    return;
61139  }
61140  this.selectedDot = this.dots[ this.parent.selectedIndex ];
61141  this.selectedDot.className = 'dot is-selected';
61142  this.selectedDot.setAttribute( 'aria-current', 'step' );
61143};
61144
61145PageDots.prototype.onTap = // old method name, backwards-compatible
61146PageDots.prototype.onClick = function( event ) {
61147  var target = event.target;
61148  // only care about dot clicks
61149  if ( target.nodeName != 'LI' ) {
61150    return;
61151  }
61152
61153  this.parent.uiChange();
61154  var index = this.dots.indexOf( target );
61155  this.parent.select( index );
61156};
61157
61158PageDots.prototype.destroy = function() {
61159  this.deactivate();
61160  this.allOff();
61161};
61162
61163Flickity.PageDots = PageDots;
61164
61165// -------------------------- Flickity -------------------------- //
61166
61167utils.extend( Flickity.defaults, {
61168  pageDots: true,
61169} );
61170
61171Flickity.createMethods.push('_createPageDots');
61172
61173var proto = Flickity.prototype;
61174
61175proto._createPageDots = function() {
61176  if ( !this.options.pageDots ) {
61177    return;
61178  }
61179  this.pageDots = new PageDots( this );
61180  // events
61181  this.on( 'activate', this.activatePageDots );
61182  this.on( 'select', this.updateSelectedPageDots );
61183  this.on( 'cellChange', this.updatePageDots );
61184  this.on( 'resize', this.updatePageDots );
61185  this.on( 'deactivate', this.deactivatePageDots );
61186};
61187
61188proto.activatePageDots = function() {
61189  this.pageDots.activate();
61190};
61191
61192proto.updateSelectedPageDots = function() {
61193  this.pageDots.updateSelected();
61194};
61195
61196proto.updatePageDots = function() {
61197  this.pageDots.setDots();
61198};
61199
61200proto.deactivatePageDots = function() {
61201  this.pageDots.deactivate();
61202};
61203
61204// -----  ----- //
61205
61206Flickity.PageDots = PageDots;
61207
61208return Flickity;
61209
61210} ) );
61211
61212},{"./flickity":455,"fizzy-ui-utils":449,"unipointer":468}],459:[function(require,module,exports){
61213// player & autoPlay
61214( function( window, factory ) {
61215  // universal module definition
61216  if ( typeof define == 'function' && define.amd ) {
61217    // AMD
61218    define( [
61219      'ev-emitter/ev-emitter',
61220      'fizzy-ui-utils/utils',
61221      './flickity',
61222    ], function( EvEmitter, utils, Flickity ) {
61223      return factory( EvEmitter, utils, Flickity );
61224    } );
61225  } else if ( typeof module == 'object' && module.exports ) {
61226    // CommonJS
61227    module.exports = factory(
61228        require('ev-emitter'),
61229        require('fizzy-ui-utils'),
61230        require('./flickity')
61231    );
61232  } else {
61233    // browser global
61234    factory(
61235        window.EvEmitter,
61236        window.fizzyUIUtils,
61237        window.Flickity
61238    );
61239  }
61240
61241}( window, function factory( EvEmitter, utils, Flickity ) {
61242
61243'use strict';
61244
61245// -------------------------- Player -------------------------- //
61246
61247function Player( parent ) {
61248  this.parent = parent;
61249  this.state = 'stopped';
61250  // visibility change event handler
61251  this.onVisibilityChange = this.visibilityChange.bind( this );
61252  this.onVisibilityPlay = this.visibilityPlay.bind( this );
61253}
61254
61255Player.prototype = Object.create( EvEmitter.prototype );
61256
61257// start play
61258Player.prototype.play = function() {
61259  if ( this.state == 'playing' ) {
61260    return;
61261  }
61262  // do not play if page is hidden, start playing when page is visible
61263  var isPageHidden = document.hidden;
61264  if ( isPageHidden ) {
61265    document.addEventListener( 'visibilitychange', this.onVisibilityPlay );
61266    return;
61267  }
61268
61269  this.state = 'playing';
61270  // listen to visibility change
61271  document.addEventListener( 'visibilitychange', this.onVisibilityChange );
61272  // start ticking
61273  this.tick();
61274};
61275
61276Player.prototype.tick = function() {
61277  // do not tick if not playing
61278  if ( this.state != 'playing' ) {
61279    return;
61280  }
61281
61282  var time = this.parent.options.autoPlay;
61283  // default to 3 seconds
61284  time = typeof time == 'number' ? time : 3000;
61285  var _this = this;
61286  // HACK: reset ticks if stopped and started within interval
61287  this.clear();
61288  this.timeout = setTimeout( function() {
61289    _this.parent.next( true );
61290    _this.tick();
61291  }, time );
61292};
61293
61294Player.prototype.stop = function() {
61295  this.state = 'stopped';
61296  this.clear();
61297  // remove visibility change event
61298  document.removeEventListener( 'visibilitychange', this.onVisibilityChange );
61299};
61300
61301Player.prototype.clear = function() {
61302  clearTimeout( this.timeout );
61303};
61304
61305Player.prototype.pause = function() {
61306  if ( this.state == 'playing' ) {
61307    this.state = 'paused';
61308    this.clear();
61309  }
61310};
61311
61312Player.prototype.unpause = function() {
61313  // re-start play if paused
61314  if ( this.state == 'paused' ) {
61315    this.play();
61316  }
61317};
61318
61319// pause if page visibility is hidden, unpause if visible
61320Player.prototype.visibilityChange = function() {
61321  var isPageHidden = document.hidden;
61322  this[ isPageHidden ? 'pause' : 'unpause' ]();
61323};
61324
61325Player.prototype.visibilityPlay = function() {
61326  this.play();
61327  document.removeEventListener( 'visibilitychange', this.onVisibilityPlay );
61328};
61329
61330// -------------------------- Flickity -------------------------- //
61331
61332utils.extend( Flickity.defaults, {
61333  pauseAutoPlayOnHover: true,
61334} );
61335
61336Flickity.createMethods.push('_createPlayer');
61337var proto = Flickity.prototype;
61338
61339proto._createPlayer = function() {
61340  this.player = new Player( this );
61341
61342  this.on( 'activate', this.activatePlayer );
61343  this.on( 'uiChange', this.stopPlayer );
61344  this.on( 'pointerDown', this.stopPlayer );
61345  this.on( 'deactivate', this.deactivatePlayer );
61346};
61347
61348proto.activatePlayer = function() {
61349  if ( !this.options.autoPlay ) {
61350    return;
61351  }
61352  this.player.play();
61353  this.element.addEventListener( 'mouseenter', this );
61354};
61355
61356// Player API, don't hate the ... thanks I know where the door is
61357
61358proto.playPlayer = function() {
61359  this.player.play();
61360};
61361
61362proto.stopPlayer = function() {
61363  this.player.stop();
61364};
61365
61366proto.pausePlayer = function() {
61367  this.player.pause();
61368};
61369
61370proto.unpausePlayer = function() {
61371  this.player.unpause();
61372};
61373
61374proto.deactivatePlayer = function() {
61375  this.player.stop();
61376  this.element.removeEventListener( 'mouseenter', this );
61377};
61378
61379// ----- mouseenter/leave ----- //
61380
61381// pause auto-play on hover
61382proto.onmouseenter = function() {
61383  if ( !this.options.pauseAutoPlayOnHover ) {
61384    return;
61385  }
61386  this.player.pause();
61387  this.element.addEventListener( 'mouseleave', this );
61388};
61389
61390// resume auto-play on hover off
61391proto.onmouseleave = function() {
61392  this.player.unpause();
61393  this.element.removeEventListener( 'mouseleave', this );
61394};
61395
61396// -----  ----- //
61397
61398Flickity.Player = Player;
61399
61400return Flickity;
61401
61402} ) );
61403
61404},{"./flickity":455,"ev-emitter":443,"fizzy-ui-utils":449}],460:[function(require,module,exports){
61405// prev/next buttons
61406( function( window, factory ) {
61407  // universal module definition
61408  if ( typeof define == 'function' && define.amd ) {
61409    // AMD
61410    define( [
61411      './flickity',

61412      'unipointer/unipointer',
61413      'fizzy-ui-utils/utils',
61414    ], function( Flickity, Unipointer, utils ) {
61415      return factory( window, Flickity, Unipointer, utils );
61416    } );
61417  } else if ( typeof module == 'object' && module.exports ) {
61418    // CommonJS
61419    module.exports = factory(
61420        window,
61421        require('./flickity'),
61422        require('unipointer'),
61423        require('fizzy-ui-utils')
61424    );
61425  } else {
61426    // browser global
61427    factory(
61428        window,
61429        window.Flickity,
61430        window.Unipointer,
61431        window.fizzyUIUtils
61432    );
61433  }
61434
61435}( window, function factory( window, Flickity, Unipointer, utils ) {
61436'use strict';
61437
61438var svgURI = 'http://www.w3.org/2000/svg';
61439
61440// -------------------------- PrevNextButton -------------------------- //
61441
61442function PrevNextButton( direction, parent ) {
61443  this.direction = direction;
61444  this.parent = parent;
61445  this._create();
61446}
61447
61448PrevNextButton.prototype = Object.create( Unipointer.prototype );
61449
61450PrevNextButton.prototype._create = function() {
61451  // properties
61452  this.isEnabled = true;
61453  this.isPrevious = this.direction == -1;
61454  var leftDirection = this.parent.options.rightToLeft ? 1 : -1;
61455  this.isLeft = this.direction == leftDirection;
61456
61457  var element = this.element = document.createElement('button');
61458  element.className = 'flickity-button flickity-prev-next-button';
61459  element.className += this.isPrevious ? ' previous' : ' next';
61460  // prevent button from submitting form http://stackoverflow.com/a/10836076/182183
61461  element.setAttribute( 'type', 'button' );
61462  // init as disabled
61463  this.disable();
61464
61465  element.setAttribute( 'aria-label', this.isPrevious ? 'Previous' : 'Next' );
61466
61467  // create arrow
61468  var svg = this.createSVG();
61469  element.appendChild( svg );
61470  // events
61471  this.parent.on( 'select', this.update.bind( this ) );
61472  this.on( 'pointerDown', this.parent.childUIPointerDown.bind( this.parent ) );
61473};
61474
61475PrevNextButton.prototype.activate = function() {
61476  this.bindStartEvent( this.element );
61477  this.element.addEventListener( 'click', this );
61478  // add to DOM
61479  this.parent.element.appendChild( this.element );
61480};
61481
61482PrevNextButton.prototype.deactivate = function() {
61483  // remove from DOM
61484  this.parent.element.removeChild( this.element );
61485  // click events
61486  this.unbindStartEvent( this.element );
61487  this.element.removeEventListener( 'click', this );
61488};
61489
61490PrevNextButton.prototype.createSVG = function() {
61491  var svg = document.createElementNS( svgURI, 'svg' );
61492  svg.setAttribute( 'class', 'flickity-button-icon' );
61493  svg.setAttribute( 'viewBox', '0 0 100 100' );
61494  var path = document.createElementNS( svgURI, 'path' );
61495  var pathMovements = getArrowMovements( this.parent.options.arrowShape );
61496  path.setAttribute( 'd', pathMovements );
61497  path.setAttribute( 'class', 'arrow' );
61498  // rotate arrow
61499  if ( !this.isLeft ) {
61500    path.setAttribute( 'transform', 'translate(100, 100) rotate(180) ' );
61501  }
61502  svg.appendChild( path );
61503  return svg;
61504};
61505
61506// get SVG path movmement
61507function getArrowMovements( shape ) {
61508  // use shape as movement if string
61509  if ( typeof shape == 'string' ) {
61510    return shape;
61511  }
61512  // create movement string
61513  return 'M ' + shape.x0 + ',50' +
61514    ' L ' + shape.x1 + ',' + ( shape.y1 + 50 ) +
61515    ' L ' + shape.x2 + ',' + ( shape.y2 + 50 ) +
61516    ' L ' + shape.x3 + ',50 ' +
61517    ' L ' + shape.x2 + ',' + ( 50 - shape.y2 ) +
61518    ' L ' + shape.x1 + ',' + ( 50 - shape.y1 ) +
61519    ' Z';
61520}
61521
61522PrevNextButton.prototype.handleEvent = utils.handleEvent;
61523
61524PrevNextButton.prototype.onclick = function() {
61525  if ( !this.isEnabled ) {
61526    return;
61527  }
61528  this.parent.uiChange();
61529  var method = this.isPrevious ? 'previous' : 'next';
61530  this.parent[ method ]();
61531};
61532
61533// -----  ----- //
61534
61535PrevNextButton.prototype.enable = function() {
61536  if ( this.isEnabled ) {
61537    return;
61538  }
61539  this.element.disabled = false;
61540  this.isEnabled = true;
61541};
61542
61543PrevNextButton.prototype.disable = function() {
61544  if ( !this.isEnabled ) {
61545    return;
61546  }
61547  this.element.disabled = true;
61548  this.isEnabled = false;
61549};
61550
61551PrevNextButton.prototype.update = function() {
61552  // index of first or last slide, if previous or next
61553  var slides = this.parent.slides;
61554  // enable is wrapAround and at least 2 slides
61555  if ( this.parent.options.wrapAround && slides.length > 1 ) {
61556    this.enable();
61557    return;
61558  }
61559  var lastIndex = slides.length ? slides.length - 1 : 0;
61560  var boundIndex = this.isPrevious ? 0 : lastIndex;
61561  var method = this.parent.selectedIndex == boundIndex ? 'disable' : 'enable';
61562  this[ method ]();
61563};
61564
61565PrevNextButton.prototype.destroy = function() {
61566  this.deactivate();
61567  this.allOff();
61568};
61569
61570// -------------------------- Flickity prototype -------------------------- //
61571
61572utils.extend( Flickity.defaults, {
61573  prevNextButtons: true,
61574  arrowShape: {
61575    x0: 10,
61576    x1: 60, y1: 50,
61577    x2: 70, y2: 40,
61578    x3: 30,
61579  },
61580} );
61581
61582Flickity.createMethods.push('_createPrevNextButtons');
61583var proto = Flickity.prototype;
61584
61585proto._createPrevNextButtons = function() {
61586  if ( !this.options.prevNextButtons ) {
61587    return;
61588  }
61589
61590  this.prevButton = new PrevNextButton( -1, this );
61591  this.nextButton = new PrevNextButton( 1, this );
61592
61593  this.on( 'activate', this.activatePrevNextButtons );
61594};
61595
61596proto.activatePrevNextButtons = function() {
61597  this.prevButton.activate();
61598  this.nextButton.activate();
61599  this.on( 'deactivate', this.deactivatePrevNextButtons );
61600};
61601
61602proto.deactivatePrevNextButtons = function() {
61603  this.prevButton.deactivate();
61604  this.nextButton.deactivate();
61605  this.off( 'deactivate', this.deactivatePrevNextButtons );
61606};
61607
61608// --------------------------  -------------------------- //
61609
61610Flickity.PrevNextButton = PrevNextButton;
61611
61612return Flickity;
61613
61614} ) );
61615
61616},{"./flickity":455,"fizzy-ui-utils":449,"unipointer":468}],461:[function(require,module,exports){
61617// slide
61618( function( window, factory ) {
61619  // universal module definition
61620  if ( typeof define == 'function' && define.amd ) {
61621    // AMD
61622    define( factory );
61623  } else if ( typeof module == 'object' && module.exports ) {
61624    // CommonJS
61625    module.exports = factory();
61626  } else {
61627    // browser global
61628    window.Flickity = window.Flickity || {};
61629    window.Flickity.Slide = factory();
61630  }
61631
61632}( window, function factory() {
61633'use strict';
61634
61635function Slide( parent ) {
61636  this.parent = parent;
61637  this.isOriginLeft = parent.originSide == 'left';
61638  this.cells = [];
61639  this.outerWidth = 0;
61640  this.height = 0;
61641}
61642
61643var proto = Slide.prototype;
61644
61645proto.addCell = function( cell ) {
61646  this.cells.push( cell );
61647  this.outerWidth += cell.size.outerWidth;
61648  this.height = Math.max( cell.size.outerHeight, this.height );
61649  // first cell stuff
61650  if ( this.cells.length == 1 ) {
61651    this.x = cell.x; // x comes from first cell
61652    var beginMargin = this.isOriginLeft ? 'marginLeft' : 'marginRight';
61653    this.firstMargin = cell.size[ beginMargin ];
61654  }
61655};
61656
61657proto.updateTarget = function() {
61658  var endMargin = this.isOriginLeft ? 'marginRight' : 'marginLeft';
61659  var lastCell = this.getLastCell();
61660  var lastMargin = lastCell ? lastCell.size[ endMargin ] : 0;
61661  var slideWidth = this.outerWidth - ( this.firstMargin + lastMargin );
61662  this.target = this.x + this.firstMargin + slideWidth * this.parent.cellAlign;
61663};
61664
61665proto.getLastCell = function() {
61666  return this.cells[ this.cells.length - 1 ];
61667};
61668
61669proto.select = function() {

vendor: 5,528 bytes, lines 61670-61887

61670  this.cells.forEach( function( cell ) {
61671    cell.select();
61672  } );
61673};
61674
61675proto.unselect = function() {
61676  this.cells.forEach( function( cell ) {
61677    cell.unselect();
61678  } );
61679};
61680
61681proto.getCellElements = function() {
61682  return this.cells.map( function( cell ) {
61683    return cell.element;
61684  } );
61685};
61686
61687return Slide;
61688
61689} ) );
61690
61691},{}],462:[function(require,module,exports){
61692/*!
61693 * getSize v2.0.3
61694 * measure size of elements
61695 * MIT license
61696 */
61697
61698/* jshint browser: true, strict: true, undef: true, unused: true */
61699/* globals console: false */
61700
61701( function( window, factory ) {
61702  /* jshint strict: false */ /* globals define, module */
61703  if ( typeof define == 'function' && define.amd ) {
61704    // AMD
61705    define( factory );
61706  } else if ( typeof module == 'object' && module.exports ) {
61707    // CommonJS
61708    module.exports = factory();
61709  } else {
61710    // browser global
61711    window.getSize = factory();
61712  }
61713
61714})( window, function factory() {
61715'use strict';
61716
61717// -------------------------- helpers -------------------------- //
61718
61719// get a number from a string, not a percentage
61720function getStyleSize( value ) {
61721  var num = parseFloat( value );
61722  // not a percent like '100%', and a number
61723  var isValid = value.indexOf('%') == -1 && !isNaN( num );
61724  return isValid && num;
61725}
61726
61727function noop() {}
61728
61729var logError = typeof console == 'undefined' ? noop :
61730  function( message ) {
61731    console.error( message );
61732  };
61733
61734// -------------------------- measurements -------------------------- //
61735
61736var measurements = [
61737  'paddingLeft',
61738  'paddingRight',
61739  'paddingTop',
61740  'paddingBottom',
61741  'marginLeft',
61742  'marginRight',
61743  'marginTop',
61744  'marginBottom',
61745  'borderLeftWidth',
61746  'borderRightWidth',
61747  'borderTopWidth',
61748  'borderBottomWidth'
61749];
61750
61751var measurementsLength = measurements.length;
61752
61753function getZeroSize() {
61754  var size = {
61755    width: 0,
61756    height: 0,
61757    innerWidth: 0,
61758    innerHeight: 0,
61759    outerWidth: 0,
61760    outerHeight: 0
61761  };
61762  for ( var i=0; i < measurementsLength; i++ ) {
61763    var measurement = measurements[i];
61764    size[ measurement ] = 0;
61765  }
61766  return size;
61767}
61768
61769// -------------------------- getStyle -------------------------- //
61770
61771/**
61772 * getStyle, get style of element, check for Firefox bug
61773 * https://bugzilla.mozilla.org/show_bug.cgi?id=548397
61774 */
61775function getStyle( elem ) {
61776  var style = getComputedStyle( elem );
61777  if ( !style ) {
61778    logError( 'Style returned ' + style +
61779      '. Are you running this code in a hidden iframe on Firefox? ' +
61780      'See https://bit.ly/getsizebug1' );
61781  }
61782  return style;
61783}
61784
61785// -------------------------- setup -------------------------- //
61786
61787var isSetup = false;
61788
61789var isBoxSizeOuter;
61790
61791/**
61792 * setup
61793 * check isBoxSizerOuter
61794 * do on first getSize() rather than on page load for Firefox bug
61795 */
61796function setup() {
61797  // setup once
61798  if ( isSetup ) {
61799    return;
61800  }
61801  isSetup = true;
61802
61803  // -------------------------- box sizing -------------------------- //
61804
61805  /**
61806   * Chrome & Safari measure the outer-width on style.width on border-box elems
61807   * IE11 & Firefox<29 measures the inner-width
61808   */
61809  var div = document.createElement('div');
61810  div.style.width = '200px';
61811  div.style.padding = '1px 2px 3px 4px';
61812  div.style.borderStyle = 'solid';
61813  div.style.borderWidth = '1px 2px 3px 4px';
61814  div.style.boxSizing = 'border-box';
61815
61816  var body = document.body || document.documentElement;
61817  body.appendChild( div );
61818  var style = getStyle( div );
61819  // round value for browser zoom. desandro/masonry#928
61820  isBoxSizeOuter = Math.round( getStyleSize( style.width ) ) == 200;
61821  getSize.isBoxSizeOuter = isBoxSizeOuter;
61822
61823  body.removeChild( div );
61824}
61825
61826// -------------------------- getSize -------------------------- //
61827
61828function getSize( elem ) {
61829  setup();
61830
61831  // use querySeletor if elem is string
61832  if ( typeof elem == 'string' ) {
61833    elem = document.querySelector( elem );
61834  }
61835
61836  // do not proceed on non-objects
61837  if ( !elem || typeof elem != 'object' || !elem.nodeType ) {
61838    return;
61839  }
61840
61841  var style = getStyle( elem );
61842
61843  // if hidden, everything is 0
61844  if ( style.display == 'none' ) {
61845    return getZeroSize();
61846  }
61847
61848  var size = {};
61849  size.width = elem.offsetWidth;
61850  size.height = elem.offsetHeight;
61851
61852  var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box';
61853
61854  // get all measurements
61855  for ( var i=0; i < measurementsLength; i++ ) {
61856    var measurement = measurements[i];
61857    var value = style[ measurement ];
61858    var num = parseFloat( value );
61859    // any 'auto', 'medium' value will be 0
61860    size[ measurement ] = !isNaN( num ) ? num : 0;
61861  }
61862
61863  var paddingWidth = size.paddingLeft + size.paddingRight;
61864  var paddingHeight = size.paddingTop + size.paddingBottom;
61865  var marginWidth = size.marginLeft + size.marginRight;
61866  var marginHeight = size.marginTop + size.marginBottom;
61867  var borderWidth = size.borderLeftWidth + size.borderRightWidth;
61868  var borderHeight = size.borderTopWidth + size.borderBottomWidth;
61869
61870  var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
61871
61872  // overwrite width and height if we can get it from style
61873  var styleWidth = getStyleSize( style.width );
61874  if ( styleWidth !== false ) {
61875    size.width = styleWidth +
61876      // add padding and border unless it's already including it
61877      ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth );
61878  }
61879
61880  var styleHeight = getStyleSize( style.height );
61881  if ( styleHeight !== false ) {
61882    size.height = styleHeight +
61883      // add padding and border unless it's already including it
61884      ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight );
61885  }
61886
61887  size.innerWidth = size.width - ( paddingWidth + borderWidth );

vendor: 8,684 bytes, lines 61888-62221

61888  size.innerHeight = size.height - ( paddingHeight + borderHeight );
61889
61890  size.outerWidth = size.width + marginWidth;
61891  size.outerHeight = size.height + marginHeight;
61892
61893  return size;
61894}
61895
61896return getSize;
61897
61898});
61899
61900},{}],463:[function(require,module,exports){
61901/*!
61902 * imagesLoaded v4.1.4
61903 * JavaScript is all like "You images are done yet or what?"
61904 * MIT License
61905 */
61906
61907( function( window, factory ) { 'use strict';
61908  // universal module definition
61909
61910  /*global define: false, module: false, require: false */
61911
61912  if ( typeof define == 'function' && define.amd ) {
61913    // AMD
61914    define( [
61915      'ev-emitter/ev-emitter'
61916    ], function( EvEmitter ) {
61917      return factory( window, EvEmitter );
61918    });
61919  } else if ( typeof module == 'object' && module.exports ) {
61920    // CommonJS
61921    module.exports = factory(
61922      window,
61923      require('ev-emitter')
61924    );
61925  } else {
61926    // browser global
61927    window.imagesLoaded = factory(
61928      window,
61929      window.EvEmitter
61930    );
61931  }
61932
61933})( typeof window !== 'undefined' ? window : this,
61934
61935// --------------------------  factory -------------------------- //
61936
61937function factory( window, EvEmitter ) {
61938
61939'use strict';
61940
61941var $ = window.jQuery;
61942var console = window.console;
61943
61944// -------------------------- helpers -------------------------- //
61945
61946// extend objects
61947function extend( a, b ) {
61948  for ( var prop in b ) {
61949    a[ prop ] = b[ prop ];
61950  }
61951  return a;
61952}
61953
61954var arraySlice = Array.prototype.slice;
61955
61956// turn element or nodeList into an array
61957function makeArray( obj ) {
61958  if ( Array.isArray( obj ) ) {
61959    // use object if already an array
61960    return obj;
61961  }
61962
61963  var isArrayLike = typeof obj == 'object' && typeof obj.length == 'number';
61964  if ( isArrayLike ) {
61965    // convert nodeList to array
61966    return arraySlice.call( obj );
61967  }
61968
61969  // array of single index
61970  return [ obj ];
61971}
61972
61973// -------------------------- imagesLoaded -------------------------- //
61974
61975/**
61976 * @param {Array, Element, NodeList, String} elem
61977 * @param {Object or Function} options - if function, use as callback
61978 * @param {Function} onAlways - callback function
61979 */
61980function ImagesLoaded( elem, options, onAlways ) {
61981  // coerce ImagesLoaded() without new, to be new ImagesLoaded()
61982  if ( !( this instanceof ImagesLoaded ) ) {
61983    return new ImagesLoaded( elem, options, onAlways );
61984  }
61985  // use elem as selector string
61986  var queryElem = elem;
61987  if ( typeof elem == 'string' ) {
61988    queryElem = document.querySelectorAll( elem );
61989  }
61990  // bail if bad element
61991  if ( !queryElem ) {
61992    console.error( 'Bad element for imagesLoaded ' + ( queryElem || elem ) );
61993    return;
61994  }
61995
61996  this.elements = makeArray( queryElem );
61997  this.options = extend( {}, this.options );
61998  // shift arguments if no options set
61999  if ( typeof options == 'function' ) {
62000    onAlways = options;
62001  } else {
62002    extend( this.options, options );
62003  }
62004
62005  if ( onAlways ) {
62006    this.on( 'always', onAlways );
62007  }
62008
62009  this.getImages();
62010
62011  if ( $ ) {
62012    // add jQuery Deferred object
62013    this.jqDeferred = new $.Deferred();
62014  }
62015
62016  // HACK check async to allow time to bind listeners
62017  setTimeout( this.check.bind( this ) );
62018}
62019
62020ImagesLoaded.prototype = Object.create( EvEmitter.prototype );
62021
62022ImagesLoaded.prototype.options = {};
62023
62024ImagesLoaded.prototype.getImages = function() {
62025  this.images = [];
62026
62027  // filter & find items if we have an item selector
62028  this.elements.forEach( this.addElementImages, this );
62029};
62030
62031/**
62032 * @param {Node} element
62033 */
62034ImagesLoaded.prototype.addElementImages = function( elem ) {
62035  // filter siblings
62036  if ( elem.nodeName == 'IMG' ) {
62037    this.addImage( elem );
62038  }
62039  // get background image on element
62040  if ( this.options.background === true ) {
62041    this.addElementBackgroundImages( elem );
62042  }
62043
62044  // find children
62045  // no non-element nodes, #143
62046  var nodeType = elem.nodeType;
62047  if ( !nodeType || !elementNodeTypes[ nodeType ] ) {
62048    return;
62049  }
62050  var childImgs = elem.querySelectorAll('img');
62051  // concat childElems to filterFound array
62052  for ( var i=0; i < childImgs.length; i++ ) {
62053    var img = childImgs[i];
62054    this.addImage( img );
62055  }
62056
62057  // get child background images
62058  if ( typeof this.options.background == 'string' ) {
62059    var children = elem.querySelectorAll( this.options.background );
62060    for ( i=0; i < children.length; i++ ) {
62061      var child = children[i];
62062      this.addElementBackgroundImages( child );
62063    }
62064  }
62065};
62066
62067var elementNodeTypes = {
62068  1: true,
62069  9: true,
62070  11: true
62071};
62072
62073ImagesLoaded.prototype.addElementBackgroundImages = function( elem ) {
62074  var style = getComputedStyle( elem );
62075  if ( !style ) {
62076    // Firefox returns null if in a hidden iframe https://bugzil.la/548397
62077    return;
62078  }
62079  // get url inside url("...")
62080  var reURL = /url\((['"])?(.*?)\1\)/gi;
62081  var matches = reURL.exec( style.backgroundImage );
62082  while ( matches !== null ) {
62083    var url = matches && matches[2];
62084    if ( url ) {
62085      this.addBackground( url, elem );
62086    }
62087    matches = reURL.exec( style.backgroundImage );
62088  }
62089};
62090
62091/**
62092 * @param {Image} img
62093 */
62094ImagesLoaded.prototype.addImage = function( img ) {
62095  var loadingImage = new LoadingImage( img );
62096  this.images.push( loadingImage );
62097};
62098
62099ImagesLoaded.prototype.addBackground = function( url, elem ) {
62100  var background = new Background( url, elem );
62101  this.images.push( background );
62102};
62103
62104ImagesLoaded.prototype.check = function() {
62105  var _this = this;
62106  this.progressedCount = 0;
62107  this.hasAnyBroken = false;
62108  // complete if no images
62109  if ( !this.images.length ) {
62110    this.complete();
62111    return;
62112  }
62113
62114  function onProgress( image, elem, message ) {
62115    // HACK - Chrome triggers event before object properties have changed. #83
62116    setTimeout( function() {
62117      _this.progress( image, elem, message );
62118    });
62119  }
62120
62121  this.images.forEach( function( loadingImage ) {
62122    loadingImage.once( 'progress', onProgress );
62123    loadingImage.check();
62124  });
62125};
62126
62127ImagesLoaded.prototype.progress = function( image, elem, message ) {
62128  this.progressedCount++;
62129  this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
62130  // progress event
62131  this.emitEvent( 'progress', [ this, image, elem ] );
62132  if ( this.jqDeferred && this.jqDeferred.notify ) {
62133    this.jqDeferred.notify( this, image );
62134  }
62135  // check if completed
62136  if ( this.progressedCount == this.images.length ) {
62137    this.complete();
62138  }
62139
62140  if ( this.options.debug && console ) {
62141    console.log( 'progress: ' + message, image, elem );
62142  }
62143};
62144
62145ImagesLoaded.prototype.complete = function() {
62146  var eventName = this.hasAnyBroken ? 'fail' : 'done';
62147  this.isComplete = true;
62148  this.emitEvent( eventName, [ this ] );
62149  this.emitEvent( 'always', [ this ] );
62150  if ( this.jqDeferred ) {
62151    var jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';
62152    this.jqDeferred[ jqMethod ]( this );
62153  }
62154};
62155
62156// --------------------------  -------------------------- //
62157
62158function LoadingImage( img ) {
62159  this.img = img;
62160}
62161
62162LoadingImage.prototype = Object.create( EvEmitter.prototype );
62163
62164LoadingImage.prototype.check = function() {
62165  // If complete is true and browser supports natural sizes,
62166  // try to check for image status manually.
62167  var isComplete = this.getIsImageComplete();
62168  if ( isComplete ) {
62169    // report based on naturalWidth
62170    this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
62171    return;
62172  }
62173
62174  // If none of the checks above matched, simulate loading on detached element.
62175  this.proxyImage = new Image();
62176  this.proxyImage.addEventListener( 'load', this );
62177  this.proxyImage.addEventListener( 'error', this );
62178  // bind to image as well for Firefox. #191
62179  this.img.addEventListener( 'load', this );
62180  this.img.addEventListener( 'error', this );
62181  this.proxyImage.src = this.img.src;
62182};
62183
62184LoadingImage.prototype.getIsImageComplete = function() {
62185  // check for non-zero, non-undefined naturalWidth
62186  // fixes Safari+InfiniteScroll+Masonry bug infinite-scroll#671
62187  return this.img.complete && this.img.naturalWidth;
62188};
62189
62190LoadingImage.prototype.confirm = function( isLoaded, message ) {
62191  this.isLoaded = isLoaded;
62192  this.emitEvent( 'progress', [ this, this.img, message ] );
62193};
62194
62195// ----- events ----- //
62196
62197// trigger specified handler for event type
62198LoadingImage.prototype.handleEvent = function( event ) {
62199  var method = 'on' + event.type;
62200  if ( this[ method ] ) {
62201    this[ method ]( event );
62202  }
62203};
62204
62205LoadingImage.prototype.onload = function() {
62206  this.confirm( true, 'onload' );
62207  this.unbindEvents();
62208};
62209
62210LoadingImage.prototype.onerror = function() {
62211  this.confirm( false, 'onerror' );
62212  this.unbindEvents();
62213};
62214
62215LoadingImage.prototype.unbindEvents = function() {
62216  this.proxyImage.removeEventListener( 'load', this );
62217  this.proxyImage.removeEventListener( 'error', this );
62218  this.img.removeEventListener( 'load', this );
62219  this.img.removeEventListener( 'error', this );
62220};
62221

62222// -------------------------- Background -------------------------- //
62223
62224function Background( url, element ) {
62225  this.url = url;
62226  this.element = element;
62227  this.img = new Image();
62228}
62229
62230// inherit LoadingImage prototype
62231Background.prototype = Object.create( LoadingImage.prototype );
62232
62233Background.prototype.check = function() {
62234  this.img.addEventListener( 'load', this );
62235  this.img.addEventListener( 'error', this );
62236  this.img.src = this.url;
62237  // check if image is already complete
62238  var isComplete = this.getIsImageComplete();
62239  if ( isComplete ) {
62240    this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
62241    this.unbindEvents();
62242  }
62243};
62244
62245Background.prototype.unbindEvents = function() {
62246  this.img.removeEventListener( 'load', this );
62247  this.img.removeEventListener( 'error', this );
62248};
62249
62250Background.prototype.confirm = function( isLoaded, message ) {
62251  this.isLoaded = isLoaded;
62252  this.emitEvent( 'progress', [ this, this.element, message ] );
62253};
62254
62255// -------------------------- jQuery -------------------------- //
62256
62257ImagesLoaded.makeJQueryPlugin = function( jQuery ) {
62258  jQuery = jQuery || window.jQuery;
62259  if ( !jQuery ) {
62260    return;
62261  }
62262  // set local variable
62263  $ = jQuery;
62264  // $().imagesLoaded()
62265  $.fn.imagesLoaded = function( options, callback ) {
62266    var instance = new ImagesLoaded( this, options, callback );
62267    return instance.jqDeferred.promise( $(this) );
62268  };
62269};
62270// try making plugin
62271ImagesLoaded.makeJQueryPlugin();
62272
62273// --------------------------  -------------------------- //
62274
62275return ImagesLoaded;
62276
62277});
62278
62279},{"ev-emitter":443}],464:[function(require,module,exports){
62280"use strict";
62281
62282Object.defineProperty(exports, "__esModule", {
62283  value: true
62284});
62285exports.default = void 0;
62286
62287function _classCallCheck(instance, Constructor) {
62288  if (!(instance instanceof Constructor)) {
62289    throw new TypeError("Cannot call a class as a function");
62290  }
62291}
62292
62293function _defineProperties(target, props) {
62294  for (var i = 0; i < props.length; i++) {
62295    var descriptor = props[i];
62296    descriptor.enumerable = descriptor.enumerable || false;
62297    descriptor.configurable = true;
62298    if ("value" in descriptor) descriptor.writable = true;
62299    Object.defineProperty(target, descriptor.key, descriptor);
62300  }
62301}
62302
62303function _createClass(Constructor, protoProps, staticProps) {
62304  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
62305  if (staticProps) _defineProperties(Constructor, staticProps);
62306  return Constructor;
62307}
62308
62309function _toConsumableArray(arr) {
62310  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
62311}
62312
62313function _arrayWithoutHoles(arr) {
62314  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
62315}
62316
62317function _iterableToArray(iter) {
62318  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
62319}
62320
62321function _unsupportedIterableToArray(o, minLen) {
62322  if (!o) return;
62323  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
62324  var n = Object.prototype.toString.call(o).slice(8, -1);
62325  if (n === "Object" && o.constructor) n = o.constructor.name;
62326  if (n === "Map" || n === "Set") return Array.from(n);
62327  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
62328}
62329
62330function _arrayLikeToArray(arr, len) {
62331  if (len == null || len > arr.length) len = arr.length;
62332
62333  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
62334
62335  return arr2;
62336}
62337
62338function _nonIterableSpread() {
62339  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
62340}
62341
62342var MicroModal = function () {
62343  var FOCUSABLE_ELEMENTS = ['a[href]', 'area[href]', 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', 'select:not([disabled]):not([aria-hidden])', 'textarea:not([disabled]):not([aria-hidden])', 'button:not([disabled]):not([aria-hidden])', 'iframe', 'object', 'embed', '[contenteditable]', '[tabindex]:not([tabindex^="-"])'];
62344
62345  var Modal = /*#__PURE__*/function () {
62346    function Modal(_ref) {
62347      var targetModal = _ref.targetModal,
62348          _ref$triggers = _ref.triggers,
62349          triggers = _ref$triggers === void 0 ? [] : _ref$triggers,
62350          _ref$onShow = _ref.onShow,
62351          onShow = _ref$onShow === void 0 ? function () {} : _ref$onShow,
62352          _ref$onClose = _ref.onClose,
62353          onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
62354          _ref$openTrigger = _ref.openTrigger,
62355          openTrigger = _ref$openTrigger === void 0 ? 'data-micromodal-trigger' : _ref$openTrigger,
62356          _ref$closeTrigger = _ref.closeTrigger,
62357          closeTrigger = _ref$closeTrigger === void 0 ? 'data-micromodal-close' : _ref$closeTrigger,
62358          _ref$openClass = _ref.openClass,
62359          openClass = _ref$openClass === void 0 ? 'is-open' : _ref$openClass,
62360          _ref$disableScroll = _ref.disableScroll,
62361          disableScroll = _ref$disableScroll === void 0 ? false : _ref$disableScroll,
62362          _ref$disableFocus = _ref.disableFocus,
62363          disableFocus = _ref$disableFocus === void 0 ? false : _ref$disableFocus,
62364          _ref$awaitCloseAnimat = _ref.awaitCloseAnimation,
62365          awaitCloseAnimation = _ref$awaitCloseAnimat === void 0 ? false : _ref$awaitCloseAnimat,
62366          _ref$awaitOpenAnimati = _ref.awaitOpenAnimation,
62367          awaitOpenAnimation = _ref$awaitOpenAnimati === void 0 ? false : _ref$awaitOpenAnimati,
62368          _ref$debugMode = _ref.debugMode,
62369          debugMode = _ref$debugMode === void 0 ? false : _ref$debugMode;
62370
62371      _classCallCheck(this, Modal); // Save a reference of the modal
62372
62373
62374      this.modal = document.getElementById(targetModal); // Save a reference to the passed config
62375
62376      this.config = {
62377        debugMode: debugMode,
62378        disableScroll: disableScroll,
62379        openTrigger: openTrigger,
62380        closeTrigger: closeTrigger,
62381        openClass: openClass,
62382        onShow: onShow,
62383        onClose: onClose,
62384        awaitCloseAnimation: awaitCloseAnimation,
62385        awaitOpenAnimation: awaitOpenAnimation,
62386        disableFocus: disableFocus
62387      }; // Register click events only if pre binding eventListeners
62388
62389      if (triggers.length > 0) this.registerTriggers.apply(this, _toConsumableArray(triggers)); // pre bind functions for event listeners
62390
62391      this.onClick = this.onClick.bind(this);
62392      this.onKeydown = this.onKeydown.bind(this);
62393    }
62394    /**
62395     * Loops through all openTriggers and binds click event
62396     * @param  {array} triggers [Array of node elements]
62397     * @return {void}
62398     */
62399
62400
62401    _createClass(Modal, [{
62402      key: "registerTriggers",
62403      value: function registerTriggers() {
62404        var _this = this;
62405
62406        for (var _len = arguments.length, triggers = new Array(_len), _key = 0; _key < _len; _key++) {
62407          triggers[_key] = arguments[_key];
62408        }
62409

62410        triggers.filter(Boolean).forEach(function (trigger) {
62411          trigger.addEventListener('click', function (event) {
62412            return _this.showModal(event);
62413          });
62414        });
62415      }
62416    }, {
62417      key: "showModal",
62418      value: function showModal() {
62419        var _this2 = this;
62420
62421        var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
62422        this.activeElement = document.activeElement;
62423        this.modal.setAttribute('aria-hidden', 'false');
62424        this.modal.classList.add(this.config.openClass);
62425        this.scrollBehaviour('disable');
62426        this.addEventListeners();
62427
62428        if (this.config.awaitOpenAnimation) {
62429          var handler = function handler() {
62430            _this2.modal.removeEventListener('animationend', handler, false);
62431
62432            _this2.setFocusToFirstNode();
62433          };
62434
62435          this.modal.addEventListener('animationend', handler, false);
62436        } else {
62437          this.setFocusToFirstNode();
62438        }
62439
62440        this.config.onShow(this.modal, this.activeElement, event);
62441      }
62442    }, {
62443      key: "closeModal",
62444      value: function closeModal() {
62445        var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
62446        var modal = this.modal;
62447        this.modal.setAttribute('aria-hidden', 'true');
62448        this.removeEventListeners();
62449        this.scrollBehaviour('enable');
62450
62451        if (this.activeElement && this.activeElement.focus) {
62452          this.activeElement.focus();
62453        }
62454
62455        this.config.onClose(this.modal, this.activeElement, event);
62456
62457        if (this.config.awaitCloseAnimation) {
62458          var openClass = this.config.openClass; // <- old school ftw
62459
62460          this.modal.addEventListener('animationend', function handler() {
62461            modal.classList.remove(openClass);
62462            modal.removeEventListener('animationend', handler, false);
62463          }, false);
62464        } else {
62465          modal.classList.remove(this.config.openClass);
62466        }
62467      }
62468    }, {
62469      key: "closeModalById",
62470      value: function closeModalById(targetModal) {
62471        this.modal = document.getElementById(targetModal);
62472        if (this.modal) this.closeModal();
62473      }
62474    }, {
62475      key: "scrollBehaviour",
62476      value: function scrollBehaviour(toggle) {
62477        if (!this.config.disableScroll) return;
62478        var body = document.querySelector('body');
62479
62480        switch (toggle) {
62481          case 'enable':
62482            Object.assign(body.style, {
62483              overflow: ''
62484            });
62485            break;
62486
62487          case 'disable':
62488            Object.assign(body.style, {
62489              overflow: 'hidden'
62490            });
62491            break;
62492        }
62493      }
62494    }, {
62495      key: "addEventListeners",
62496      value: function addEventListeners() {
62497        this.modal.addEventListener('touchstart', this.onClick);
62498        this.modal.addEventListener('click', this.onClick);
62499        document.addEventListener('keydown', this.onKeydown);
62500      }
62501    }, {
62502      key: "removeEventListeners",
62503      value: function removeEventListeners() {
62504        this.modal.removeEventListener('touchstart', this.onClick);
62505        this.modal.removeEventListener('click', this.onClick);
62506        document.removeEventListener('keydown', this.onKeydown);
62507      }
62508    }, {
62509      key: "onClick",
62510      value: function onClick(event) {
62511        if (event.target.hasAttribute(this.config.closeTrigger)) {
62512          this.closeModal(event);
62513        }
62514      }
62515    }, {
62516      key: "onKeydown",
62517      value: function onKeydown(event) {
62518        if (event.keyCode === 27) this.closeModal(event); // esc
62519
62520        if (event.keyCode === 9) this.retainFocus(event); // tab
62521      }
62522    }, {
62523      key: "getFocusableNodes",
62524      value: function getFocusableNodes() {
62525        var nodes = this.modal.querySelectorAll(FOCUSABLE_ELEMENTS);
62526        return Array.apply(void 0, _toConsumableArray(nodes));
62527      }
62528      /**
62529       * Tries to set focus on a node which is not a close trigger
62530       * if no other nodes exist then focuses on first close trigger
62531       */
62532
62533    }, {
62534      key: "setFocusToFirstNode",
62535      value: function setFocusToFirstNode() {
62536        var _this3 = this;
62537
62538        if (this.config.disableFocus) return;
62539        var focusableNodes = this.getFocusableNodes(); // no focusable nodes
62540
62541        if (focusableNodes.length === 0) return; // remove nodes on whose click, the modal closes
62542        // could not think of a better name :(
62543

62544        var nodesWhichAreNotCloseTargets = focusableNodes.filter(function (node) {
62545          return !node.hasAttribute(_this3.config.closeTrigger);
62546        });
62547        if (nodesWhichAreNotCloseTargets.length > 0) nodesWhichAreNotCloseTargets[0].focus();
62548        if (nodesWhichAreNotCloseTargets.length === 0) focusableNodes[0].focus();
62549      }
62550    }, {
62551      key: "retainFocus",
62552      value: function retainFocus(event) {
62553        var focusableNodes = this.getFocusableNodes(); // no focusable nodes
62554
62555        if (focusableNodes.length === 0) return;
62556        /**
62557         * Filters nodes which are hidden to prevent
62558         * focus leak outside modal
62559         */
62560
62561        focusableNodes = focusableNodes.filter(function (node) {
62562          return node.offsetParent !== null;
62563        }); // if disableFocus is true
62564
62565        if (!this.modal.contains(document.activeElement)) {
62566          focusableNodes[0].focus();
62567        } else {
62568          var focusedItemIndex = focusableNodes.indexOf(document.activeElement);
62569
62570          if (event.shiftKey && focusedItemIndex === 0) {
62571            focusableNodes[focusableNodes.length - 1].focus();
62572            event.preventDefault();
62573          }
62574
62575          if (!event.shiftKey && focusableNodes.length > 0 && focusedItemIndex === focusableNodes.length - 1) {
62576            focusableNodes[0].focus();
62577            event.preventDefault();
62578          }
62579        }
62580      }
62581    }]);
62582
62583    return Modal;
62584  }();
62585  /**
62586   * Modal prototype ends.
62587   * Here on code is responsible for detecting and
62588   * auto binding event handlers on modal triggers
62589   */
62590  // Keep a reference to the opened modal
62591
62592
62593  var activeModal = null;
62594  /**
62595   * Generates an associative array of modals and it's
62596   * respective triggers
62597   * @param  {array} triggers     An array of all triggers
62598   * @param  {string} triggerAttr The data-attribute which triggers the module
62599   * @return {array}
62600   */
62601
62602  var generateTriggerMap = function generateTriggerMap(triggers, triggerAttr) {
62603    var triggerMap = [];
62604    triggers.forEach(function (trigger) {
62605      var targetModal = trigger.attributes[triggerAttr].value;
62606      if (triggerMap[targetModal] === undefined) triggerMap[targetModal] = [];
62607      triggerMap[targetModal].push(trigger);
62608    });
62609    return triggerMap;
62610  };
62611  /**
62612   * Validates whether a modal of the given id exists
62613   * in the DOM
62614   * @param  {number} id  The id of the modal
62615   * @return {boolean}
62616   */
62617
62618
62619  var validateModalPresence = function validateModalPresence(id) {
62620    if (!document.getElementById(id)) {
62621      console.warn("MicroModal: \u2757Seems like you have missed %c'".concat(id, "'"), 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', 'ID somewhere in your code. Refer example below to resolve it.');
62622      console.warn("%cExample:", 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', "<div class=\"modal\" id=\"".concat(id, "\"></div>"));
62623      return false;
62624    }
62625  };
62626  /**
62627   * Validates if there are modal triggers present
62628   * in the DOM
62629   * @param  {array} triggers An array of data-triggers
62630   * @return {boolean}
62631   */
62632
62633
62634  var validateTriggerPresence = function validateTriggerPresence(triggers) {
62635    if (triggers.length <= 0) {
62636      console.warn("MicroModal: \u2757Please specify at least one %c'micromodal-trigger'", 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', 'data attribute.');
62637      console.warn("%cExample:", 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', "<a href=\"#\" data-micromodal-trigger=\"my-modal\"></a>");
62638      return false;
62639    }
62640  };
62641  /**
62642   * Checks if triggers and their corresponding modals
62643   * are present in the DOM
62644   * @param  {array} triggers   Array of DOM nodes which have data-triggers
62645   * @param  {array} triggerMap Associative array of modals and their triggers
62646   * @return {boolean}
62647   */
62648
62649
62650  var validateArgs = function validateArgs(triggers, triggerMap) {
62651    validateTriggerPresence(triggers);
62652    if (!triggerMap) return true;
62653
62654    for (var id in triggerMap) {
62655      validateModalPresence(id);
62656    }
62657
62658    return true;
62659  };
62660  /**
62661   * Binds click handlers to all modal triggers
62662   * @param  {object} config [description]
62663   * @return void
62664   */
62665
62666
62667  var init = function init(config) {
62668    // Create an config object with default openTrigger
62669    var options = Object.assign({}, {
62670      openTrigger: 'data-micromodal-trigger'
62671    }, config); // Collects all the nodes with the trigger
62672
62673    var triggers = _toConsumableArray(document.querySelectorAll("[".concat(options.openTrigger, "]"))); // Makes a mappings of modals with their trigger nodes
62674
62675
62676    var triggerMap = generateTriggerMap(triggers, options.openTrigger); // Checks if modals and triggers exist in dom
62677
62678    if (options.debugMode === true && validateArgs(triggers, triggerMap) === false) return; // For every target modal creates a new instance
62679
62680    for (var key in triggerMap) {
62681      var value = triggerMap[key];
62682      options.targetModal = key;
62683      options.triggers = _toConsumableArray(value);
62684      activeModal = new Modal(options); // eslint-disable-line no-new
62685    }
62686  };
62687  /**
62688   * Shows a particular modal
62689   * @param  {string} targetModal [The id of the modal to display]
62690   * @param  {object} config [The configuration object to pass]
62691   * @return {void}
62692   */
62693
62694
62695  var show = function show(targetModal, config) {
62696    var options = config || {};
62697    options.targetModal = targetModal; // Checks if modals and triggers exist in dom
62698
62699    if (options.debugMode === true && validateModalPresence(targetModal) === false) return; // clear events in case previous modal wasn't close
62700
62701    if (activeModal) activeModal.removeEventListeners(); // stores reference to active modal
62702
62703    activeModal = new Modal(options); // eslint-disable-line no-new
62704
62705    activeModal.showModal();
62706  };
62707  /**
62708   * Closes the active modal
62709   * @param  {string} targetModal [The id of the modal to close]
62710   * @return {void}
62711   */
62712
62713
62714  var close = function close(targetModal) {
62715    targetModal ? activeModal.closeModalById(targetModal) : activeModal.closeModal();
62716  };
62717
62718  return {
62719    init: init,
62720    show: show,
62721    close: close
62722  };
62723}();
62724
62725window.MicroModal = MicroModal;
62726var _default = MicroModal;
62727exports.default = _default;
62728
62729},{}],465:[function(require,module,exports){
62730"use strict";
62731
62732Object.defineProperty(exports, "__esModule", {
62733  value: true
62734});
62735exports.tabbable = exports.isTabbable = exports.isFocusable = exports.focusable = void 0;
62736
62737/*!
62738* tabbable 5.3.3
62739* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
62740*/
62741var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]:not

62741(slot)', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
62742var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
62743var NoElement = typeof Element === 'undefined';
62744var matches = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
62745var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
62746  return element.getRootNode();
62747} : function (element) {
62748  return element.ownerDocument;
62749};
62750/**
62751 * @param {Element} el container to check in
62752 * @param {boolean} includeContainer add container to check
62753 * @param {(node: Element) => boolean} filter filter candidates
62754 * @returns {Element[]}
62755 */
62756
62757var getCandidates = function getCandidates(el, includeContainer, filter) {
62758  var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
62759
62760  if (includeContainer && matches.call(el, candidateSelector)) {
62761    candidates.unshift(el);
62762  }
62763
62764  candidates = candidates.filter(filter);
62765  return candidates;
62766};
62767/**
62768 * @callback GetShadowRoot
62769 * @param {Element} element to check for shadow root
62770 * @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.
62771 */
62772
62773/**
62774 * @callback ShadowRootFilter
62775 * @param {Element} shadowHostNode the element which contains shadow content
62776 * @returns {boolean} true if a shadow root could potentially contain valid candidates.
62777 */
62778
62779/**
62780 * @typedef {Object} CandidatesScope
62781 * @property {Element} scope contains inner candidates
62782 * @property {Element[]} candidates
62783 */
62784
62785/**
62786 * @typedef {Object} IterativeOptions
62787 * @property {GetShadowRoot|boolean} getShadowRoot true if shadow support is enabled; falsy if not;
62788 *  if a function, implies shadow support is enabled and either returns the shadow root of an element
62789 *  or a boolean stating if it has an undisclosed shadow root
62790 * @property {(node: Element) => boolean} filter filter candidates
62791 * @property {boolean} flatten if true then result will flatten any CandidatesScope into the returned list
62792 * @property {ShadowRootFilter} shadowRootFilter filter shadow roots;
62793 */
62794
62795/**
62796 * @param {Element[]} elements list of element containers to match candidates from
62797 * @param {boolean} includeContainer add container list to check
62798 * @param {IterativeOptions} options
62799 * @returns {Array.<Element|CandidatesScope>}
62800 */
62801
62802
62803var getCandidatesIteratively = function getCandidatesIteratively(elements, includeContainer, options) {
62804  var candidates = [];
62805  var elementsToCheck = Array.from(elements);
62806
62807  while (elementsToCheck.length) {
62808    var element = elementsToCheck.shift();
62809
62810    if (element.tagName === 'SLOT') {
62811      // add shadow dom slot scope (slot itself cannot be focusable)
62812      var assigned = element.assignedElements();
62813      var content = assigned.length ? assigned : element.children;
62814      var nestedCandidates = getCandidatesIteratively(content, true, options);
62815
62816      if (options.flatten) {
62817        candidates.push.apply(candidates, nestedCandidates);
62818      } else {
62819        candidates.push({
62820          scope: element,
62821          candidates: nestedCandidates
62822        });
62823      }
62824    } else {
62825      // check candidate element
62826      var validCandidate = matches.call(element, candidateSelector);
62827
62828      if (validCandidate && options.filter(element) && (includeContainer || !elements.includes(element))) {
62829        candidates.push(element);
62830      } // iterate over shadow content if possible
62831
62832
62833      var shadowRoot = element.shadowRoot || // check for an undisclosed shadow
62834      typeof options.getShadowRoot === 'function' && options.getShadowRoot(element);
62835      var validShadowRoot = !options.shadowRootFilter || options.shadowRootFilter(element);
62836
62837      if (shadowRoot && validShadowRoot) {
62838        // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed
62839        //  shadow exists, so look at light dom children as fallback BUT create a scope for any
62840        //  child candidates found because they're likely slotted elements (elements that are
62841        //  children of the web component element (which has the shadow), in the light dom, but
62842        //  slotted somewhere _inside_ the undisclosed shadow) -- the scope is created below,
62843        //  _after_ we return from this recursive call

62844        var _nestedCandidates = getCandidatesIteratively(shadowRoot === true ? element.children : shadowRoot.children, true, options);
62845
62846        if (options.flatten) {
62847          candidates.push.apply(candidates, _nestedCandidates);
62848        } else {
62849          candidates.push({
62850            scope: element,
62851            candidates: _nestedCandidates
62852          });
62853        }
62854      } else {
62855        // there's not shadow so just dig into the element's (light dom) children
62856        //  __without__ giving the element special scope treatment
62857        elementsToCheck.unshift.apply(elementsToCheck, element.children);
62858      }
62859    }
62860  }
62861
62862  return candidates;
62863};
62864
62865var getTabindex = function getTabindex(node, isScope) {
62866  if (node.tabIndex < 0) {
62867    // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
62868    // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
62869    // yet they are still part of the regular tab order; in FF, they get a default
62870    // `tabIndex` of 0; since Chrome still puts those elements in the regular tab
62871    // order, consider their tab index to be 0.
62872    // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
62873    // so if they don't have a tabindex attribute specifically set, assume it's 0.
62874    //
62875    // isScope is positive for custom element with shadow root or slot that by default
62876    // have tabIndex -1, but need to be sorted by document order in order for their
62877    // content to be inserted in the correct position
62878    if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || node.isContentEditable) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {
62879      return 0;
62880    }
62881  }
62882
62883  return node.tabIndex;
62884};
62885
62886var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
62887  return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
62888};
62889
62890var isInput = function isInput(node) {
62891  return node.tagName === 'INPUT';
62892};
62893
62894var isHiddenInput = function isHiddenInput(node) {
62895  return isInput(node) && node.type === 'hidden';
62896};
62897
62898var isDetailsWithSummary = function isDetailsWithSummary(node) {
62899  var r = node.tagName === 'DETAILS' && Array.prototype.slice.apply(node.children).some(function (child) {
62900    return child.tagName === 'SUMMARY';
62901  });
62902  return r;
62903};
62904
62905var getCheckedRadio = function getCheckedRadio(nodes, form) {
62906  for (var i = 0; i < nodes.length; i++) {
62907    if (nodes[i].checked && nodes[i].form === form) {
62908      return nodes[i];
62909    }
62910  }
62911};
62912
62913var isTabbableRadio = function isTabbableRadio(node) {
62914  if (!node.name) {
62915    return true;
62916  }
62917
62918  var radioScope = node.form || getRootNode(node);
62919
62920  var queryRadios = function queryRadios(name) {
62921    return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
62922  };
62923
62924  var radioSet;
62925
62926  if (typeof window !== 'undefined' && typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {
62927    radioSet = queryRadios(window.CSS.escape(node.name));
62928  } else {
62929    try {
62930      radioSet = queryRadios(node.name);
62931    } catch (err) {
62932      // eslint-disable-next-line no-console
62933      console.error('Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s', err.message);
62934      return false;
62935    }
62936  }
62937
62938  var checked = getCheckedRadio(radioSet, node.form);
62939  return !checked || checked === node;
62940};
62941
62942var isRadio = function isRadio(node) {
62943  return isInput(node) && node.type === 'radio';
62944};
62945
62946var isNonTabbableRadio = function isNonTabbableRadio(node) {
62947  return isRadio(node) && !isTabbableRadio(node);
62948};
62949
62950var isZeroArea = function isZeroArea(node) {
62951  var _node$getBoundingClie = node.getBoundingClientRect(),
62952      width = _node$getBoundingClie.width,
62953      height = _node$getBoundingClie.height;
62954
62955  return width === 0 && height === 0;
62956};
62957
62958var isHidden = function isHidden(node, _ref) {
62959  var displayCheck = _ref.displayCheck,
62960      getShadowRoot = _ref.getShadowRoot; // NOTE: visibility will be `undefined` if node is detached from the document
62961  //  (see notes about this further down), which means we will c

62961onsider it visible
62962  //  (this is legacy behavior from a very long way back)
62963  // NOTE: we check this regardless of `displayCheck="none"` because this is a
62964  //  _visibility_ check, not a _display_ check
62965
62966  if (getComputedStyle(node).visibility === 'hidden') {
62967    return true;
62968  }
62969
62970  var isDirectSummary = matches.call(node, 'details>summary:first-of-type');
62971  var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
62972
62973  if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
62974    return true;
62975  } // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
62976  //  (but NOT _the_ document; see second 'If' comment below for more).
62977  // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
62978  //  is attached, and the one we need to check if it's in the document or not (because the
62979  //  shadow, and all nodes it contains, is never considered in the document since shadows
62980  //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,
62981  //  is hidden, or is not in the document itself but is detached, it will affect the shadow's
62982  //  visibility, including all the nodes it contains). The host could be any normal node,
62983  //  or a custom element (i.e. web component). Either way, that's the one that is considered
62984  //  part of the document, not the shadow root, nor any of its children (i.e. the node being
62985  //  tested).
62986  // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the
62987  //  document (per the docs) and while it's a Document-type object, that document does not
62988  //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer
62989  //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
62990  //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
62991  //  node is actually detached.
62992
62993
62994  var nodeRootHost = getRootNode(node).host;
62995  var nodeIsAttached = (nodeRootHost === null || nodeRootHost === void 0 ? void 0 : nodeRootHost.ownerDocument.contains(nodeRootHost)) || node.ownerDocument.contains(node);
62996
62997  if (!displayCheck || displayCheck === 'full') {
62998    if (typeof getShadowRoot === 'function') {
62999      // figure out if we should consider the node to be in an undisclosed shadow and use the
63000      //  'non-zero-area' fallback
63001      var originalNode = node;
63002
63003      while (node) {
63004        var parentElement = node.parentElement;
63005        var rootNode = getRootNode(node);
63006
63007        if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true // check if there's an undisclosed shadow
63008        ) {
63009          // node has an undisclosed shadow which means we can only treat it as a black box, so we
63010          //  fall back to a non-zero-area test
63011          return isZeroArea(node);
63012        } else if (node.assignedSlot) {
63013          // iterate up slot
63014          node = node.assignedSlot;
63015        } else if (!parentElement && rootNode !== node.ownerDocument) {
63016          // cross shadow boundary
63017          node = rootNode.host;
63018        } else {
63019          // iterate up normal dom
63020          node = parentElement;
63021        }
63022      }
63023
63024      node = originalNode;
63025    } // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
63026    //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or
63027    //  it might be a falsy value, which means shadow DOM support is disabled
63028    // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)
63029    //  now we can just test to see if it would normally be visible or not, provided it's
63030    //  attached to the main document.
63031    // NOTE: We must consider case where node is inside a shadow DOM and given directly to
63032    //  `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.
63033
63034
63035    if (nodeIsAttached) {
63036      // this works wherever the node is: if there's at least one client rect, it's
63037      //  somehow displayed; it also covers the CSS 'display: contents' case where the
63038      //  node itself is hidden in place of its contents; and there's no need to search
63039      //  up the hierarchy either
63040      return !node.getClientRects().length;
63041    } // Else, the node isn't attached to the document, which means the `getClientRects()`
63042    //  API will __always__ return zero rects (this can happen, for example, if React
63043    //  is used to render nodes onto a detached tree, as confirmed in this thread:
63044    //  https://github.com/facebook/react/issues/9117#issuecomment-284228870)
63045    //
63046    // It also means that even window.getComputedStyle(node).display will return `undefined`
63047    //  because styles are only computed for nodes that are in the document.
63048    //
63049    // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable
63050    //  somehow. Though it was never stated officially, anyone who has ever used tabbable
63051    //  APIs on nodes in detached containers has actually implicitly used tabbable in what
63052    //  was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck="none"` mode -- essentially
63053    //  considering __everything__ to be visible because of the innability to determine styles.
63054
63055  } else if (displayCheck === 'non-zero-area') {
63056    // NOTE: Even though this tests that the node's client rect is non-zero to determine

vendor: 4,502 bytes, lines 63057-63186

63057    //  whether it's displayed, and that a detached node will __always__ have a zero-area
63058    //  client rect, we don't special-case for whether the node is attached or not. In
63059    //  this mode, we do want to consider nodes that have a zero area to be hidden at all
63060    //  times, and that includes attached or not.
63061    return isZeroArea(node);
63062  } // visible, as far as we can tell, or per current `displayCheck` mode
63063
63064
63065  return false;
63066}; // form fields (nested) inside a disabled fieldset are not focusable/tabbable
63067//  unless they are in the _first_ <legend> element of the top-most disabled
63068//  fieldset
63069
63070
63071var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
63072  if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
63073    var parentNode = node.parentElement; // check if `node` is contained in a disabled <fieldset>
63074
63075    while (parentNode) {
63076      if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {
63077        // look for the first <legend> among the children of the disabled <fieldset>
63078        for (var i = 0; i < parentNode.children.length; i++) {
63079          var child = parentNode.children.item(i); // when the first <legend> (in document order) is found
63080
63081          if (child.tagName === 'LEGEND') {
63082            // if its parent <fieldset> is not nested in another disabled <fieldset>,
63083            // return whether `node` is a descendant of its first <legend>
63084            return matches.call(parentNode, 'fieldset[disabled] *') ? true : !child.contains(node);
63085          }
63086        } // the disabled <fieldset> containing `node` has no <legend>
63087
63088
63089        return true;
63090      }
63091
63092      parentNode = parentNode.parentElement;
63093    }
63094  } // else, node's tabbable/focusable state should not be affected by a fieldset's
63095  //  enabled/disabled state
63096
63097
63098  return false;
63099};
63100
63101var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
63102  if (node.disabled || isHiddenInput(node) || isHidden(node, options) || // For a details element with a summary, the summary element gets the focus
63103  isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
63104    return false;
63105  }
63106
63107  return true;
63108};
63109
63110var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
63111  if (isNonTabbableRadio(node) || getTabindex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
63112    return false;
63113  }
63114
63115  return true;
63116};
63117
63118var isValidShadowRootTabbable = function isValidShadowRootTabbable(shadowHostNode) {
63119  var tabIndex = parseInt(shadowHostNode.getAttribute('tabindex'), 10);
63120
63121  if (isNaN(tabIndex) || tabIndex >= 0) {
63122    return true;
63123  } // If a custom element has an explicit negative tabindex,
63124  // browsers will not allow tab targeting said element's children.
63125
63126
63127  return false;
63128};
63129/**
63130 * @param {Array.<Element|CandidatesScope>} candidates
63131 * @returns Element[]
63132 */
63133
63134
63135var sortByOrder = function sortByOrder(candidates) {
63136  var regularTabbables = [];
63137  var orderedTabbables = [];
63138  candidates.forEach(function (item, i) {
63139    var isScope = !!item.scope;
63140    var element = isScope ? item.scope : item;
63141    var candidateTabindex = getTabindex(element, isScope);
63142    var elements = isScope ? sortByOrder(item.candidates) : element;
63143
63144    if (candidateTabindex === 0) {
63145      isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
63146    } else {
63147      orderedTabbables.push({
63148        documentOrder: i,
63149        tabIndex: candidateTabindex,
63150        item: item,
63151        isScope: isScope,
63152        content: elements
63153      });
63154    }
63155  });
63156  return orderedTabbables.sort(sortOrderedTabbables).reduce(function (acc, sortable) {
63157    sortable.isScope ? acc.push.apply(acc, sortable.content) : acc.push(sortable.content);
63158    return acc;
63159  }, []).concat(regularTabbables);
63160};
63161
63162var tabbable = function tabbable(el, options) {
63163  options = options || {};
63164  var candidates;
63165
63166  if (options.getShadowRoot) {
63167    candidates = getCandidatesIteratively([el], options.includeContainer, {
63168      filter: isNodeMatchingSelectorTabbable.bind(null, options),
63169      flatten: false,
63170      getShadowRoot: options.getShadowRoot,
63171      shadowRootFilter: isValidShadowRootTabbable
63172    });
63173  } else {
63174    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
63175  }
63176
63177  return sortByOrder(candidates);
63178};
63179
63180exports.tabbable = tabbable;
63181
63182var focusable = function focusable(el, options) {
63183  options = options || {};
63184  var candidates;
63185
63186  if (options.getShadowRoot) {

63187    candidates = getCandidatesIteratively([el], options.includeContainer, {
63188      filter: isNodeMatchingSelectorFocusable.bind(null, options),
63189      flatten: true,
63190      getShadowRoot: options.getShadowRoot
63191    });
63192  } else {
63193    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
63194  }
63195
63196  return candidates;
63197};
63198
63199exports.focusable = focusable;
63200
63201var isTabbable = function isTabbable(node, options) {
63202  options = options || {};
63203
63204  if (!node) {
63205    throw new Error('No node provided');
63206  }
63207
63208  if (matches.call(node, candidateSelector) === false) {
63209    return false;
63210  }
63211
63212  return isNodeMatchingSelectorTabbable(options, node);
63213};
63214
63215exports.isTabbable = isTabbable;
63216var focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');
63217
63218var isFocusable = function isFocusable(node, options) {
63219  options = options || {};
63220
63221  if (!node) {
63222    throw new Error('No node provided');
63223  }
63224
63225  if (matches.call(node, focusableCandidateSelector) === false) {
63226    return false;
63227  }
63228
63229  return isNodeMatchingSelectorFocusable(options, node);
63230};
63231
63232exports.isFocusable = isFocusable;
63233
63234},{}],466:[function(require,module,exports){
63235"use strict";
63236
63237Object.defineProperty(exports, "__esModule", {
63238  value: true
63239});
63240exports.__addDisposableResource = __addDisposableResource;
63241exports.__assign = void 0;
63242exports.__asyncDelegator = __asyncDelegator;
63243exports.__asyncGenerator = __asyncGenerator;
63244exports.__asyncValues = __asyncValues;
63245exports.__await = __await;
63246exports.__awaiter = __awaiter;
63247exports.__classPrivateFieldGet = __classPrivateFieldGet;
63248exports.__classPrivateFieldIn = __classPrivateFieldIn;
63249exports.__classPrivateFieldSet = __classPrivateFieldSet;
63250exports.__createBinding = void 0;
63251exports.__decorate = __decorate;
63252exports.__disposeResources = __disposeResources;
63253exports.__esDecorate = __esDecorate;
63254exports.__exportStar = __exportStar;
63255exports.__extends = __extends;
63256exports.__generator = __generator;
63257exports.__importDefault = __importDefault;
63258exports.__importStar = __importStar;

63259exports.__makeTemplateObject = __makeTemplateObject;
63260exports.__metadata = __metadata;
63261exports.__param = __param;
63262exports.__propKey = __propKey;
63263exports.__read = __read;
63264exports.__rest = __rest;
63265exports.__runInitializers = __runInitializers;
63266exports.__setFunctionName = __setFunctionName;
63267exports.__spread = __spread;
63268exports.__spreadArray = __spreadArray;
63269exports.__spreadArrays = __spreadArrays;
63270exports.__values = __values;
63271exports.default = void 0;
63272
63273/******************************************************************************
63274Copyright (c) Microsoft Corporation.
63275
63276Permission to use, copy, modify, and/or distribute this software for any
63277purpose with or without fee is hereby granted.
63278
63279THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
63280REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
63281AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
63282INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
63283LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
63284OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
63285PERFORMANCE OF THIS SOFTWARE.
63286***************************************************************************** */
63287
63288/* global Reflect, Promise, SuppressedError, Symbol */
63289var extendStatics = function (d, b) {
63290  extendStatics = Object.setPrototypeOf || {
63291    __proto__: []
63292  } instanceof Array && function (d, b) {
63293    d.__proto__ = b;
63294  } || function (d, b) {
63295    for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
63296  };
63297
63298  return extendStatics(d, b);
63299};
63300
63301function __extends(d, b) {
63302  if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
63303  extendStatics(d, b);
63304
63305  function __() {
63306    this.constructor = d;
63307  }
63308
63309  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
63310}
63311
63312var __assign = function () {
63313  exports.__assign = __assign = Object.assign || function __assign(t) {
63314    for (var s, i = 1, n = arguments.length; i < n; i++) {
63315      s = arguments[i];
63316
63317      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
63318    }
63319
63320    return t;
63321  };
63322
63323  return __assign.apply(this, arguments);
63324};
63325
63326exports.__assign = __assign;
63327
63328function __rest(s, e) {
63329  var t = {};
63330
63331  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
63332
63333  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
63334    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
63335  }
63336  return t;
63337}
63338
63339function __decorate(decorators, target, key, desc) {
63340  var c = arguments.length,
63341      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
63342      d;
63343  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
63344  return c > 3 && r && Object.defineProperty(target, key, r), r;
63345}
63346
63347function __param(paramIndex, decorator) {
63348  return function (target, key) {
63349    decorator(target, key, paramIndex);
63350  };
63351}
63352
63353function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
63354  function accept(f) {
63355    if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected");
63356    return f;
63357  }
63358
63359  var kind = contextIn.kind,
63360      key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
63361  var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
63362  var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
63363
63364  var _,
63365      done = false;
63366
63367  for (var i = decorators.length - 1; i >= 0; i--) {
63368    var context = {};
63369
63370    for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
63371
63372    for (var p in contextIn.access) context.access[p] = contextIn.access[p];
63373
63374    context.addInitializer = function (f) {

vendor: 4,145 bytes, lines 63375-63545

63375      if (done) throw new TypeError("Cannot add initializers after decoration has completed");
63376      extraInitializers.push(accept(f || null));
63377    };
63378
63379    var result = (0, decorators[i])(kind === "accessor" ? {
63380      get: descriptor.get,
63381      set: descriptor.set
63382    } : descriptor[key], context);
63383
63384    if (kind === "accessor") {
63385      if (result === void 0) continue;
63386      if (result === null || typeof result !== "object") throw new TypeError("Object expected");
63387      if (_ = accept(result.get)) descriptor.get = _;
63388      if (_ = accept(result.set)) descriptor.set = _;
63389      if (_ = accept(result.init)) initializers.unshift(_);
63390    } else if (_ = accept(result)) {
63391      if (kind === "field") initializers.unshift(_);else descriptor[key] = _;
63392    }
63393  }
63394
63395  if (target) Object.defineProperty(target, contextIn.name, descriptor);
63396  done = true;
63397}
63398
63399;
63400
63401function __runInitializers(thisArg, initializers, value) {
63402  var useValue = arguments.length > 2;
63403
63404  for (var i = 0; i < initializers.length; i++) {
63405    value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
63406  }
63407
63408  return useValue ? value : void 0;
63409}
63410
63411;
63412
63413function __propKey(x) {
63414  return typeof x === "symbol" ? x : "".concat(x);
63415}
63416
63417;
63418
63419function __setFunctionName(f, name, prefix) {
63420  if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
63421  return Object.defineProperty(f, "name", {
63422    configurable: true,
63423    value: prefix ? "".concat(prefix, " ", name) : name
63424  });
63425}
63426
63427;
63428
63429function __metadata(metadataKey, metadataValue) {
63430  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
63431}
63432
63433function __awaiter(thisArg, _arguments, P, generator) {
63434  function adopt(value) {
63435    return value instanceof P ? value : new P(function (resolve) {
63436      resolve(value);
63437    });
63438  }
63439
63440  return new (P || (P = Promise))(function (resolve, reject) {
63441    function fulfilled(value) {
63442      try {
63443        step(generator.next(value));
63444      } catch (e) {
63445        reject(e);
63446      }
63447    }
63448
63449    function rejected(value) {
63450      try {
63451        step(generator["throw"](value));
63452      } catch (e) {
63453        reject(e);
63454      }
63455    }
63456
63457    function step(result) {
63458      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
63459    }
63460
63461    step((generator = generator.apply(thisArg, _arguments || [])).next());
63462  });
63463}
63464
63465function __generator(thisArg, body) {
63466  var _ = {
63467    label: 0,
63468    sent: function () {
63469      if (t[0] & 1) throw t[1];
63470      return t[1];
63471    },
63472    trys: [],
63473    ops: []
63474  },
63475      f,
63476      y,
63477      t,
63478      g;
63479  return g = {
63480    next: verb(0),
63481    "throw": verb(1),
63482    "return": verb(2)
63483  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
63484    return this;
63485  }), g;
63486
63487  function verb(n) {
63488    return function (v) {
63489      return step([n, v]);
63490    };
63491  }
63492
63493  function step(op) {
63494    if (f) throw new TypeError("Generator is already executing.");
63495
63496    while (g && (g = 0, op[0] && (_ = 0)), _) try {
63497      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
63498      if (y = 0, t) op = [op[0] & 2, t.value];
63499
63500      switch (op[0]) {
63501        case 0:
63502        case 1:
63503          t = op;
63504          break;
63505
63506        case 4:
63507          _.label++;
63508          return {
63509            value: op[1],
63510            done: false
63511          };
63512
63513        case 5:
63514          _.label++;
63515          y = op[1];
63516          op = [0];
63517          continue;
63518
63519        case 7:
63520          op = _.ops.pop();
63521
63522          _.trys.pop();
63523
63524          continue;
63525
63526        default:
63527          if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
63528            _ = 0;
63529            continue;
63530          }
63531
63532          if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
63533            _.label = op[1];
63534            break;
63535          }
63536
63537          if (op[0] === 6 && _.label < t[1]) {
63538            _.label = t[1];
63539            t = op;
63540            break;
63541          }
63542
63543          if (t && _.label < t[2]) {
63544            _.label = t[2];
63545

vendor: 4,873 bytes, lines 63546-63758

63546            _.ops.push(op);
63547
63548            break;
63549          }
63550
63551          if (t[2]) _.ops.pop();
63552
63553          _.trys.pop();
63554
63555          continue;
63556      }
63557
63558      op = body.call(thisArg, _);
63559    } catch (e) {
63560      op = [6, e];
63561      y = 0;
63562    } finally {
63563      f = t = 0;
63564    }
63565
63566    if (op[0] & 5) throw op[1];
63567    return {
63568      value: op[0] ? op[1] : void 0,
63569      done: true
63570    };
63571  }
63572}
63573
63574var __createBinding = Object.create ? function (o, m, k, k2) {
63575  if (k2 === undefined) k2 = k;
63576  var desc = Object.getOwnPropertyDescriptor(m, k);
63577
63578  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
63579    desc = {
63580      enumerable: true,
63581      get: function () {
63582        return m[k];
63583      }
63584    };
63585  }
63586
63587  Object.defineProperty(o, k2, desc);
63588} : function (o, m, k, k2) {
63589  if (k2 === undefined) k2 = k;
63590  o[k2] = m[k];
63591};
63592
63593exports.__createBinding = __createBinding;
63594
63595function __exportStar(m, o) {
63596  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);
63597}
63598
63599function __values(o) {
63600  var s = typeof Symbol === "function" && Symbol.iterator,
63601      m = s && o[s],
63602      i = 0;
63603  if (m) return m.call(o);
63604  if (o && typeof o.length === "number") return {
63605    next: function () {
63606      if (o && i >= o.length) o = void 0;
63607      return {
63608        value: o && o[i++],
63609        done: !o
63610      };
63611    }
63612  };
63613  throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
63614}
63615
63616function __read(o, n) {
63617  var m = typeof Symbol === "function" && o[Symbol.iterator];
63618  if (!m) return o;
63619  var i = m.call(o),
63620      r,
63621      ar = [],
63622      e;
63623
63624  try {
63625    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
63626  } catch (error) {
63627    e = {
63628      error: error
63629    };
63630  } finally {
63631    try {
63632      if (r && !r.done && (m = i["return"])) m.call(i);
63633    } finally {
63634      if (e) throw e.error;
63635    }
63636  }
63637
63638  return ar;
63639}
63640/** @deprecated */
63641
63642
63643function __spread() {
63644  for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
63645
63646  return ar;
63647}
63648/** @deprecated */
63649
63650
63651function __spreadArrays() {
63652  for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
63653
63654  for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
63655
63656  return r;
63657}
63658
63659function __spreadArray(to, from, pack) {
63660  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
63661    if (ar || !(i in from)) {
63662      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
63663      ar[i] = from[i];
63664    }
63665  }
63666  return to.concat(ar || Array.prototype.slice.call(from));
63667}
63668
63669function __await(v) {
63670  return this instanceof __await ? (this.v = v, this) : new __await(v);
63671}
63672
63673function __asyncGenerator(thisArg, _arguments, generator) {
63674  if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
63675  var g = generator.apply(thisArg, _arguments || []),
63676      i,
63677      q = [];
63678  return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () {
63679    return this;
63680  }, i;
63681
63682  function verb(n) {
63683    if (g[n]) i[n] = function (v) {
63684      return new Promise(function (a, b) {
63685        q.push([n, v, a, b]) > 1 || resume(n, v);
63686      });
63687    };
63688  }
63689
63690  function resume(n, v) {
63691    try {
63692      step(g[n](v));
63693    } catch (e) {
63694      settle(q[0][3], e);
63695    }
63696  }
63697
63698  function step(r) {
63699    r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r);
63700  }
63701
63702  function fulfill(value) {
63703    resume("next", value);
63704  }
63705
63706  function reject(value) {
63707    resume("throw", value);
63708  }
63709
63710  function settle(f, v) {
63711    if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]);
63712  }
63713}
63714
63715function __asyncDelegator(o) {
63716  var i, p;
63717  return i = {}, verb("next"), verb("throw", function (e) {
63718    throw e;
63719  }), verb("return"), i[Symbol.iterator] = function () {
63720    return this;
63721  }, i;
63722
63723  function verb(n, f) {
63724    i[n] = o[n] ? function (v) {
63725      return (p = !p) ? {
63726        value: __await(o[n](v)),
63727        done: false
63728      } : f ? f(v) : v;
63729    } : f;
63730  }
63731}
63732
63733function __asyncValues(o) {
63734  if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
63735  var m = o[Symbol.asyncIterator],
63736      i;
63737  return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () {
63738    return this;
63739  }, i);
63740
63741  function verb(n) {
63742    i[n] = o[n] && function (v) {
63743      return new Promise(function (resolve, reject) {
63744        v = o[n](v), settle(resolve, reject, v.done, v.value);
63745      });
63746    };
63747  }
63748
63749  function settle(resolve, reject, d, v) {
63750    Promise.resolve(v).then(function (v) {
63751      resolve({
63752        value: v,
63753        done: d
63754      });
63755    }, reject);
63756  }
63757}
63758

63759function __makeTemplateObject(cooked, raw) {
63760  if (Object.defineProperty) {
63761    Object.defineProperty(cooked, "raw", {
63762      value: raw
63763    });
63764  } else {
63765    cooked.raw = raw;
63766  }
63767
63768  return cooked;
63769}
63770
63771;
63772
63773var __setModuleDefault = Object.create ? function (o, v) {
63774  Object.defineProperty(o, "default", {
63775    enumerable: true,
63776    value: v
63777  });
63778} : function (o, v) {
63779  o["default"] = v;
63780};
63781
63782function __importStar(mod) {
63783  if (mod && mod.__esModule) return mod;
63784  var result = {};
63785  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
63786
63787  __setModuleDefault(result, mod);
63788
63789  return result;
63790}
63791
63792function __importDefault(mod) {
63793  return mod && mod.__esModule ? mod : {
63794    default: mod
63795  };
63796}
63797
63798function __classPrivateFieldGet(receiver, state, kind, f) {
63799  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
63800  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
63801  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
63802}
63803
63804function __classPrivateFieldSet(receiver, state, value, kind, f) {
63805  if (kind === "m") throw new TypeError("Private method is not writable");
63806  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
63807  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
63808  return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
63809}
63810
63811function __classPrivateFieldIn(state, receiver) {
63812  if (receiver === null || typeof receiver !== "object" && typeof receiver !== "function") throw new TypeError("Cannot use 'in' operator on non-object");
63813  return typeof state === "function" ? receiver === state : state.has(receiver);
63814}
63815
63816function __addDisposableResource(env, value, async) {
63817  if (value !== null && value !== void 0) {
63818    if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
63819    var dispose;
63820
63821    if (async) {
63822      if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
63823      dispose = value[Symbol.asyncDispose];
63824    }
63825
63826    if (dispose === void 0) {
63827      if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
63828      dispose = value[Symbol.dispose];
63829    }
63830
63831    if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
63832    env.stack.push({
63833      value: value,
63834      dispose: dispose,
63835      async: async
63836    });
63837  } else if (async) {
63838    env.stack.push({
63839      async: true
63840    });
63841  }
63842
63843  return value;
63844}
63845
63846var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
63847  var e = new Error(message);
63848  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
63849};
63850
63851function __disposeResources(env) {
63852  function fail(e) {
63853    env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
63854    env.hasError = true;
63855  }
63856
63857  function next() {
63858    while (env.stack.length) {
63859      var rec = env.stack.pop();
63860
63861      try {
63862        var result = rec.dispose && rec.dispose.call(rec.value);
63863        if (rec.async) return Promise.resolve(result).then(next, function (e) {
63864          fail(e);
63865          return next();
63866        });
63867      } catch (e) {
63868        fail(e);
63869      }
63870    }
63871
63872    if (env.hasError) throw env.error;
63873  }
63874
63875  return next();
63876}
63877
63878var _default = {
63879  __extends: __extends,
63880  __assign: __assign,
63881  __rest: __rest,
63882  __decorate: __decorate,
63883  __param: __param,
63884  __metadata: __metadata,
63885  __awaiter: __awaiter,
63886  __generator: __generator,
63887  __createBinding: __createBinding,
63888  __exportStar: __exportStar,
63889  __values: __values,
63890  __read: __read,
63891  __spread: __spread,
63892  __spreadArrays: __spreadArrays,
63893  __spreadArray: __spreadArray,
63894  __await: __await,
63895  __asyncGenerator: __asyncGenerator,
63896  __asyncDelegator: __asyncDelegator,
63897  __asyncValues: __asyncValues,

63898  __makeTemplateObject: __makeTemplateObject,
63899  __importStar: __importStar,
63900  __importDefault: __importDefault,
63901  __classPrivateFieldGet: __classPrivateFieldGet,
63902  __classPrivateFieldSet: __classPrivateFieldSet,
63903  __classPrivateFieldIn: __classPrivateFieldIn,
63904  __addDisposableResource: __addDisposableResource,
63905  __disposeResources: __disposeResources
63906};
63907exports.default = _default;
63908
63909},{}],467:[function(require,module,exports){
63910/*!
63911 * Unidragger v2.3.1
63912 * Draggable base class
63913 * MIT license
63914 */
63915
63916/*jshint browser: true, unused: true, undef: true, strict: true */
63917
63918( function( window, factory ) {
63919  // universal module definition
63920  /*jshint strict: false */ /*globals define, module, require */
63921
63922  if ( typeof define == 'function' && define.amd ) {
63923    // AMD
63924    define( [
63925      'unipointer/unipointer'
63926    ], function( Unipointer ) {
63927      return factory( window, Unipointer );
63928    });
63929  } else if ( typeof module == 'object' && module.exports ) {
63930    // CommonJS
63931    module.exports = factory(
63932      window,
63933      require('unipointer')
63934    );
63935  } else {
63936    // browser global
63937    window.Unidragger = factory(
63938      window,
63939      window.Unipointer
63940    );
63941  }
63942
63943}( window, function factory( window, Unipointer ) {
63944
63945'use strict';
63946
63947// -------------------------- Unidragger -------------------------- //
63948
63949function Unidragger() {}
63950
63951// inherit Unipointer & EvEmitter
63952var proto = Unidragger.prototype = Object.create( Unipointer.prototype );
63953
63954// ----- bind start ----- //
63955
63956proto.bindHandles = function() {
63957  this._bindHandles( true );
63958};
63959
63960proto.unbindHandles = function() {
63961  this._bindHandles( false );
63962};
63963
63964/**
63965 * Add or remove start event
63966 * @param {Boolean} isAdd
63967 */
63968proto._bindHandles = function( isAdd ) {
63969  // munge isAdd, default to true
63970  isAdd = isAdd === undefined ? true : isAdd;
63971  // bind each handle
63972  var bindMethod = isAdd ? 'addEventListener' : 'removeEventListener';
63973  var touchAction = isAdd ? this._touchActionValue : '';
63974  for ( var i=0; i < this.handles.length; i++ ) {
63975    var handle = this.handles[i];
63976    this._bindStartEvent( handle, isAdd );
63977    handle[ bindMethod ]( 'click', this );
63978    // touch-action: none to override browser touch gestures. metafizzy/flickity#540
63979    if ( window.PointerEvent ) {
63980      handle.style.touchAction = touchAction;
63981    }
63982  }
63983};
63984
63985// prototype so it can be overwriteable by Flickity
63986proto._touchActionValue = 'none';
63987
63988// ----- start event ----- //
63989
63990/**
63991 * pointer start
63992 * @param {Event} event
63993 * @param {Event or Touch} pointer
63994 */
63995proto.pointerDown = function( event, pointer ) {
63996  var isOkay = this.okayPointerDown( event );
63997  if ( !isOkay ) {
63998    return;
63999  }
64000  // track start event position
64001  // Safari 9 overrides pageX and pageY. These values needs to be copied. flickity#842
64002  this.pointerDownPointer = {
64003    pageX: pointer.pageX,
64004    pageY: pointer.pageY,
64005  };
64006
64007  event.preventDefault();
64008  this.pointerDownBlur();
64009  // bind move and end events
64010  this._bindPostStartEvents( event );
64011  this.emitEvent( 'pointerDown', [ event, pointer ] );
64012};
64013
64014// nodes that have text fields
64015var cursorNodes = {
64016  TEXTAREA: true,
64017  INPUT: true,
64018  SELECT: true,
64019  OPTION: true,
64020};
64021
64022// input types that do not have text fields
64023var clickTypes = {
64024  radio: true,
64025  checkbox: true,
64026  button: true,
64027  submit: true,
64028  image: true,
64029  file: true,
64030};
64031
64032// dismiss inputs with text fields. flickity#403, flickity#404
64033proto.okayPointerDown = function( event ) {
64034  var isCursorNode = cursorNodes[ event.target.nodeName ];
64035  var isClickType = clickTypes[ event.target.type ];
64036  var isOkay = !isCursorNode || isClickType;
64037  if ( !isOkay ) {
64038    this._pointerReset();
64039  }
64040  return isOkay;
64041};
64042
64043// kludge to blur previously focused input
64044proto.pointerDownBlur = function() {
64045  var focused = document.activeElement;
64046  // do not blur body for IE10, metafizzy/flickity#117
64047  var canBlur = focused && focused.blur && focused != document.body;
64048  if ( canBlur ) {
64049    focused.blur();
64050  }
64051};
64052
64053// ----- move event ----- //
64054
64055/**
64056 * drag move
64057 * @param {Event} event
64058 * @param {Event or Touch} pointer
64059 */
64060proto.pointerMove = function( event, pointer ) {
64061  var moveVector = this._dragPointerMove( event, pointer );
64062  this.emitEvent( 'pointerMove', [ event, pointer, moveVector ] );
64063  this._dragMove( event, pointer, moveVector );
64064};
64065
64066// base pointer move logic
64067proto._dragPointerMove = function( event, pointer ) {
64068  var moveVector = {
64069    x: pointer.pageX - this.pointerDownPointer.pageX,
64070    y: pointer.pageY - this.pointerDownPointer.pageY
64071  };
64072  // start drag if pointer has moved far enough to start drag
64073  if ( !this.isDragging && this.hasDragStarted( moveVector ) ) {
64074    this._dragStart( event, pointer );
64075  }
64076  return moveVector;
64077};
64078
64079// condition if pointer has moved far enough to start drag
64080proto.hasDragStarted = function( moveVector ) {
64081  return Math.abs( moveVector.x ) > 3 || Math.abs( moveVector.y ) > 3;
64082};
64083
64084// ----- end event ----- //
64085
64086/**
64087 * pointer up
64088 * @param {Event} event
64089 * @param {Event or Touch} pointer
64090 */
64091proto.pointerUp = function( event, pointer ) {
64092  this.emitEvent( 'pointerUp', [ event, pointer ] );
64093  this._dragPointerUp( event, pointer );
64094};
64095
64096proto._dragPointerUp = function( event, pointer ) {
64097  if ( this.isDragging ) {
64098    this._dragEnd( event, pointer );
64099  } else {
64100    // pointer didn't move enough for drag to start
64101    this._staticClick( event, pointer );
64102  }
64103};
64104
64105// -------------------------- drag -------------------------- //
64106
64107// dragStart
64108proto._dragStart = function( event, pointer ) {
64109  this.isDragging = true;
64110  // prevent clicks

64111  this.isPreventingClicks = true;
64112  this.dragStart( event, pointer );
64113};
64114
64115proto.dragStart = function( event, pointer ) {
64116  this.emitEvent( 'dragStart', [ event, pointer ] );
64117};
64118
64119// dragMove
64120proto._dragMove = function( event, pointer, moveVector ) {
64121  // do not drag if not dragging yet
64122  if ( !this.isDragging ) {
64123    return;
64124  }
64125
64126  this.dragMove( event, pointer, moveVector );
64127};
64128
64129proto.dragMove = function( event, pointer, moveVector ) {
64130  event.preventDefault();
64131  this.emitEvent( 'dragMove', [ event, pointer, moveVector ] );
64132};
64133
64134// dragEnd
64135proto._dragEnd = function( event, pointer ) {
64136  // set flags
64137  this.isDragging = false;
64138  // re-enable clicking async
64139  setTimeout( function() {
64140    delete this.isPreventingClicks;
64141  }.bind( this ) );
64142
64143  this.dragEnd( event, pointer );
64144};
64145
64146proto.dragEnd = function( event, pointer ) {
64147  this.emitEvent( 'dragEnd', [ event, pointer ] );
64148};
64149
64150// ----- onclick ----- //
64151
64152// handle all clicks and prevent clicks when dragging
64153proto.onclick = function( event ) {
64154  if ( this.isPreventingClicks ) {
64155    event.preventDefault();
64156  }
64157};
64158
64159// ----- staticClick ----- //
64160
64161// triggered after pointer down & up with no/tiny movement
64162proto._staticClick = function( event, pointer ) {
64163  // ignore emulated mouse up clicks
64164  if ( this.isIgnoringMouseUp && event.type == 'mouseup' ) {
64165    return;
64166  }
64167
64168  this.staticClick( event, pointer );
64169
64170  // set flag for emulated clicks 300ms after touchend
64171  if ( event.type != 'mouseup' ) {
64172    this.isIgnoringMouseUp = true;
64173    // reset flag after 300ms
64174    setTimeout( function() {
64175      delete this.isIgnoringMouseUp;
64176    }.bind( this ), 400 );
64177  }
64178};
64179
64180proto.staticClick = function( event, pointer ) {
64181  this.emitEvent( 'staticClick', [ event, pointer ] );
64182};
64183
64184// ----- utils ----- //
64185
64186Unidragger.getPointerPoint = Unipointer.getPointerPoint;
64187
64188// -----  ----- //
64189
64190return Unidragger;
64191
64192}));
64193
64194},{"unipointer":468}],468:[function(require,module,exports){
64195/*!
64196 * Unipointer v2.3.0
64197 * base class for doing one thing with pointer event
64198 * MIT license
64199 */
64200
64201/*jshint browser: true, undef: true, unused: true, strict: true */
64202
64203( function( window, factory ) {
64204  // universal module definition
64205  /* jshint strict: false */ /*global define, module, require */
64206  if ( typeof define == 'function' && define.amd ) {
64207    // AMD
64208    define( [
64209      'ev-emitter/ev-emitter'
64210    ], function( EvEmitter ) {
64211      return factory( window, EvEmitter );
64212    });
64213  } else if ( typeof module == 'object' && module.exports ) {
64214    // CommonJS
64215    module.exports = factory(
64216      window,
64217      require('ev-emitter')
64218    );
64219  } else {
64220    // browser global
64221    window.Unipointer = factory(
64222      window,
64223      window.EvEmitter
64224    );
64225  }
64226
64227}( window, function factory( window, EvEmitter ) {
64228
64229'use strict';
64230
64231function noop() {}
64232
64233function Unipointer() {}
64234
64235// inherit EvEmitter
64236var proto = Unipointer.prototype = Object.create( EvEmitter.prototype );
64237
64238proto.bindStartEvent = function( elem ) {
64239  this._bindStartEvent( elem, true );
64240};
64241
64242proto.unbindStartEvent = function( elem ) {
64243  this._bindStartEvent( elem, false );
64244};
64245
64246/**
64247 * Add or remove start event
64248 * @param {Boolean} isAdd - remove if falsey
64249 */
64250proto._bindStartEvent = function( elem, isAdd ) {
64251  // munge isAdd, default to true
64252  isAdd = isAdd === undefined ? true : isAdd;
64253  var bindMethod = isAdd ? 'addEventListener' : 'removeEventListener';
64254
64255  // default to mouse events
64256  var startEvent = 'mousedown';
64257  if ( window.PointerEvent ) {
64258    // Pointer Events
64259    startEvent = 'pointerdown';
64260  } else if ( 'ontouchstart' in window ) {
64261    // Touch Events. iOS Safari
64262    startEvent = 'touchstart';
64263  }
64264  elem[ bindMethod ]( startEvent, this );
64265};
64266
64267// trigger handler methods for events
64268proto.handleEvent = function( event ) {
64269  var method = 'on' + event.type;
64270  if ( this[ method ] ) {
64271    this[ method ]( event );
64272  }
64273};
64274
64275// returns the touch that we're keeping track of
64276proto.getTouch = function( touches ) {
64277  for ( var i=0; i < touches.length; i++ ) {
64278    var touch = touches[i];
64279    if ( touch.identifier == this.pointerIdentifier ) {
64280      return touch;
64281    }
64282  }
64283};
64284
64285// ----- start event ----- //
64286
64287proto.onmousedown = function( event ) {
64288  // dismiss clicks from right or middle buttons
64289  var button = event.button;
64290  if ( button && ( button !== 0 && button !== 1 ) ) {
64291    return;
64292  }
64293  this._pointerDown( event, event );
64294};
64295
64296proto.ontouchstart = function( event ) {
64297  this._pointerDown( event, event.changedTouches[0] );
64298};
64299
64300proto.onpointerdown = function( event ) {
64301  this._pointerDown( event, event );
64302};
64303
64304/**
64305 * pointer start
64306 * @param {Event} event
64307 * @param {Event or Touch} pointer
64308 */
64309proto._pointerDown = function( event, pointer ) {
64310  // dismiss right click and other pointers
64311  // button = 0 is okay, 1-4 not
64312  if ( event.button || this.isPointerDown ) {
64313    return;
64314  }
64315
64316  this.isPointerDown = true;
64317  // save pointer identifier to match up touch events
64318  this.pointerIdentifier = pointer.pointerId !== undefined ?
64319    // pointerId for pointer events, touch.indentifier for touch events
64320    pointer.pointerId : pointer.identifier;
64321
64322  this.pointerDown( event, pointer );
64323};
64324
64325proto.pointerDown = function( event, pointer ) {
64326  this._bindPostStartEvents( event );
64327  this.emitEvent( 'pointerDown', [ event, pointer ] );
64328};
64329
64330// hash of events to be bound after start event
64331var postStartEvents = {

64332  mousedown: [ 'mousemove', 'mouseup' ],
64333  touchstart: [ 'touchmove', 'touchend', 'touchcancel' ],
64334  pointerdown: [ 'pointermove', 'pointerup', 'pointercancel' ],
64335};
64336
64337proto._bindPostStartEvents = function( event ) {
64338  if ( !event ) {
64339    return;
64340  }
64341  // get proper events to match start event
64342  var events = postStartEvents[ event.type ];
64343  // bind events to node
64344  events.forEach( function( eventName ) {
64345    window.addEventListener( eventName, this );
64346  }, this );
64347  // save these arguments
64348  this._boundPointerEvents = events;
64349};
64350
64351proto._unbindPostStartEvents = function() {
64352  // check for _boundEvents, in case dragEnd triggered twice (old IE8 bug)
64353  if ( !this._boundPointerEvents ) {
64354    return;
64355  }
64356  this._boundPointerEvents.forEach( function( eventName ) {
64357    window.removeEventListener( eventName, this );
64358  }, this );
64359
64360  delete this._boundPointerEvents;
64361};
64362
64363// ----- move event ----- //
64364
64365proto.onmousemove = function( event ) {
64366  this._pointerMove( event, event );
64367};
64368
64369proto.onpointermove = function( event ) {
64370  if ( event.pointerId == this.pointerIdentifier ) {
64371    this._pointerMove( event, event );
64372  }
64373};
64374
64375proto.ontouchmove = function( event ) {
64376  var touch = this.getTouch( event.changedTouches );
64377  if ( touch ) {
64378    this._pointerMove( event, touch );
64379  }
64380};
64381
64382/**
64383 * pointer move
64384 * @param {Event} event
64385 * @param {Event or Touch} pointer
64386 * @private
64387 */
64388proto._pointerMove = function( event, pointer ) {
64389  this.pointerMove( event, pointer );
64390};
64391
64392// public
64393proto.pointerMove = function( event, pointer ) {
64394  this.emitEvent( 'pointerMove', [ event, pointer ] );
64395};
64396
64397// ----- end event ----- //
64398
64399
64400proto.onmouseup = function( event ) {
64401  this._pointerUp( event, event );
64402};
64403
64404proto.onpointerup = function( event ) {
64405  if ( event.pointerId == this.pointerIdentifier ) {
64406    this._pointerUp( event, event );
64407  }
64408};
64409
64410proto.ontouchend = function( event ) {
64411  var touch = this.getTouch( event.changedTouches );
64412  if ( touch ) {
64413    this._pointerUp( event, touch );
64414  }
64415};
64416
64417/**
64418 * pointer up
64419 * @param {Event} event
64420 * @param {Event or Touch} pointer
64421 * @private
64422 */
64423proto._pointerUp = function( event, pointer ) {
64424  this._pointerDone();
64425  this.pointerUp( event, pointer );
64426};
64427
64428// public
64429proto.pointerUp = function( event, pointer ) {
64430  this.emitEvent( 'pointerUp', [ event, pointer ] );
64431};
64432
64433// ----- pointer done ----- //
64434
64435// triggered on pointer up & pointer cancel
64436proto._pointerDone = function() {
64437  this._pointerReset();
64438  this._unbindPostStartEvents();
64439  this.pointerDone();
64440};
64441
64442proto._pointerReset = function() {
64443  // reset properties
64444  this.isPointerDown = false;
64445  delete this.pointerIdentifier;
64446};
64447
64448proto.pointerDone = noop;
64449
64450// ----- pointer cancel ----- //
64451
64452proto.onpointercancel = function( event ) {
64453  if ( event.pointerId == this.pointerIdentifier ) {
64454    this._pointerCancel( event, event );
64455  }
64456};
64457
64458proto.ontouchcancel = function( event ) {
64459  var touch = this.getTouch( event.changedTouches );
64460  if ( touch ) {
64461    this._pointerCancel( event, touch );
64462  }
64463};
64464
64465/**
64466 * pointer cancel
64467 * @param {Event} event
64468 * @param {Event or Touch} pointer
64469 * @private
64470 */
64471proto._pointerCancel = function( event, pointer ) {
64472  this._pointerDone();
64473  this.pointerCancel( event, pointer );
64474};
64475
64476// public
64477proto.pointerCancel = function( event, pointer ) {
64478  this.emitEvent( 'pointerCancel', [ event, pointer ] );
64479};
64480
64481// -----  ----- //
64482
64483// utility function for getting x/y coords from event
64484Unipointer.getPointerPoint = function( pointer ) {
64485  return {
64486    x: pointer.pageX,
64487    y: pointer.pageY
64488  };
64489};
64490
64491// -----  ----- //
64492
64493return Unipointer;
64494
64495}));
64496
64497},{"ev-emitter":443}],469:[function(require,module,exports){
64498"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}var _navigation=require("./modules/navigation"),_youtube=require("./modules/youtube"),_socialShare=require("./modules/socialShare"),_tabs=require("./modules/tabs"),_fullscreenImage=_interopRequireDefault(require("./modules/fullscreenImage")),_videoPlayer=_interopRequireDefault(require("./modules/videoPlayer")),_init=require("./modules/gallery/init"),_fontSize=require("./modules/fontSize"),_shows=require("./modules/shows"),_accordion=require("./modules/accordion"),_micromodal=require("./modules/micromodal"),Supabase=_interopRequireWildcard(require("@supabase/supabase-js")),Fluent=_interopRequireWildcard(require("@fluentui/web-components")),FASTFoundation=_interopRequireWildcard(require("@microsoft/fast-foundation"));function _getRequireWildcardCache(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(a,b){if(!b&&a&&a.__esModule)return a;

64498if(null===a||"object"!==_typeof(a)&&"function"!=typeof a)return{default:a};var c=_getRequireWildcardCache(b);if(c&&c.has(a))return c.get(a);var d={},e=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var f in a)if("default"!=f&&Object.prototype.hasOwnProperty.call(a,f)){var g=e?Object.getOwnPropertyDescriptor(a,f):null;g&&(g.get||g.set)?Object.defineProperty(d,f,g):d[f]=a[f]}return d.default=a,c&&c.set(a,d),d}function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}// Import our Modules
64499// Listen for navigation drawer toggles
64500// Handle YouTube responsive within posts
64501// Tab functionality
64502// Handle all of the social sharing
64503// Handle fullscreen image on click
64504// Drilldown menu
64505// Video player on home page
64506// Hide sticky footer on click
64507// Hide interstitial footer on click
64508// Create instances of carousels
64509// Handle font size changes
64510// Handle show logic
64511window.Fluent=Fluent,window.FASTFoundation=FASTFoundation,window.Supabase=Supabase,(0,_accordion.handleAccordions)(document.querySelectorAll(".accordion")),(0,_micromodal.handleMicroModal)(document.querySelectorAll(".modal")),(0,_navigation.navigationToggle)(document.querySelector("[data-drawer-trigger]"),document.querySelector("[data-drawer-target]")),(0,_navigation.navigationToggle)(document.querySelector("[data-drawer-close]"),document.querySelector("[data-drawer-target]")),(0,_navigation.navigationToggle)(document.querySelector("[data-main-drawer-trigger]"),document.querySelector("[data-drawer-target]")),(0,_youtube.makeYouTubeResponsive)(document.querySelectorAll("[data-article] iframe[src*=\"youtube\"]")),(0,_youtube.makeFeaturedVideoResponsive)(),(0,_tabs.makeTabHeightsEqual)(document.querySelector("[data-tabs-wrapper=\"primary\"]")),(0,_tabs.makeTabHeightsEqual)(document.querySelector("[data-tabs-wrapper=\"secondary\"]")),(0,_socialShare.handleSocial)(document.querySelectorAll("[data-social-trigger]")),(0,_fullscreenImage.default)(),(0,_navigation.handleDrilldownMenu)(document.querySelectorAll(".drilldown-has-submenu:not(.Video) > a"),document.querySelectorAll("[data-drilldown-back]")),(0,_videoPlayer.default)(document.querySelectorAll("[data-video-trigger]"),document.querySelector("[data-video-target]"),document.querySelector("[data-video-description]"),document.querySelector("[data-video-placeholder]")),(0,_navigation.handleStickyToggle)(document.querySelector("[data-close-sticky-trigger]"),document.querySelector("[data-close-sticky-target]")),(0,_navigation.handleStickyToggle)(document.querySelector("[data-close-interstitial-trigger]"),document.querySelector("[data-close-interstitial-target]")),(0,_init.initCarousels)(),(0,_fontSize.toggleFontSize)(document.querySelector("[data-font-increase]"),document.querySelector("[data-font-decrease]"),document.querySelector("[data-article]")),(0,_shows.toggleEpisodeDescription)(document.querySelector("[data-show-episode-more]")),setTimeout(function(){(0,_socialShare.handleComments)(document.querySelectorAll("[data-share-comments]"))},0);
64512
64513},{"./modules/accordion":470,"./modules/fontSize":471,"./modules/fullscreenImage":472,"./modules/gallery/init":474,"./modules/micromodal":475,"./modules/navigation":476,"./modules/shows":477,"./modules/socialShare":478,"./modules/tabs":479,"./modules/videoPlayer":481,"./modules/youtube":482,"@fluentui/web-components":63,"@microsoft/fast-foundation":256,"@supabase/supabase-js":436}],470:[function(require,module,exports){
64514"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.handleAccordions=void 0;var handleAccordions=function(a){if(a){// will only look for url hashes on pages where accordion elements are present
64515// this is used to open an specific accordion element
64516if(window.location.hash){var b=window.location.hash.substring(1),c=document.getElementById(b);//Puts hash in variable, and removes the # character
64517c&&window.addEventListener("load",function(){c.click()})}a.forEach(function(a){a.onclick=function(){this.classList.toggle("is-open");var a=this.nextElementSibling;a.style.maxHeight=a.style.maxHeight?null:a.scrollHeight+"px"}})}};exports.handleAccordions=handleAccordions;
64518
64519},{}],471:[function(require,module,exports){
64520"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.toggleFontSize=void 0;var toggleFontSize=function(a,b,c){function d(){var a=localStorage.getItem("fontSize");a&&(k.size=+a,h(c,k.size))}

64520function e(){k.size===k.maxSize&&i(k.increaseButton),k.size===k.minSize&&i(k.decreaseButton)}function f(a){k.size===k.maxSize||(k.size+=10,localStorage.setItem("fontSize",k.size),h(a,k.size),k.size===k.maxSize&&i(k.increaseButton),k.size>k.minSize&&j(k.decreaseButton))}function g(a){k.size===k.minSize||(k.size-=10,localStorage.setItem("fontSize",k.size),h(a,k.size),k.size===k.minSize&&i(k.decreaseButton),k.size<k.maxSize&&j(k.increaseButton))}function h(a,b){a.style.fontSize="".concat(b,"%")}function i(a){a.setAttribute("disabled","disabled")}function j(a){a.removeAttribute("disabled")}if(a&&b&&c){var k={increaseButton:a,decreaseButton:b,size:100,minSize:100,maxSize:130};d(),e(),a.addEventListener("click",function(){f(c)}),b.addEventListener("click",function(){g(c)})}};exports.toggleFontSize=toggleFontSize;
64521
64522},{}],472:[function(require,module,exports){
64523"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _utils=require("./utils");function handleFullscreenImage(){var a=document.querySelector("[data-fade-screen]");a&&(handleFeaturedImage(a),handleImagesInPost(a))}function handleFeaturedImage(a){if(a){var b=document.querySelector("[data-fullscreen-image]"),c=document.querySelector("[data-fullscreen-image-trigger]");b&&c&&c.addEventListener("click",function(){(0,_utils.toggle)(b),(0,_utils.toggle)(a),a.addEventListener("click",function(){(0,_utils.toggle)(a),(0,_utils.toggle)(b)},{once:!0}),document.addEventListener("keyup",function(c){b.classList.contains("is-active")&&"Escape"===c.key&&((0,_utils.toggle)(a),(0,_utils.toggle)(b))},{once:!0})})}}function handleImagesInPost(a){a&&handleWordPressImages(a)}function handleWordPressImages(a){var b=document.querySelector("[data-article]");if(b){var c=b.querySelectorAll("[id^=\"attachment\"]");if(c)for(var d,e=function(b){var d=c[b].querySelector("img");return d?void(c[b].classList.add("featured-image"),c[b].classList.add("relative"),c[b].addEventListener("click",function(){(0,_utils.toggle)(c[b]),c[b].style.width="100%",(0,_utils.toggle)(a),a.addEventListener("click",function(){(0,_utils.toggle)(a),(0,_utils.toggle)(c[b])},{once:!0})})):"continue"},f=0;f<c.length;f++)d=e(f),"continue"===d}}var _default=handleFullscreenImage;exports.default=_default;
64524
64525},{"./utils":480}],473:[function(require,module,exports){
64526"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createMainGallery=void 0;var _utils=require("../utils"),_init=require("./init"),createMainGallery=function(){setGalleryLink();// Bail out of here if we don't have a gallery to hook onto
64527var a=document.querySelector("[data-gallery]");if(a){var b=(0,_init.createCarousel)({selector:document.querySelector("[data-gallery]"),options:{pageDots:!1,imagesLoaded:!0,wrapAround:!0,initialIndex:".".concat(window.params.slide),// send to a specific slide based on the URL
64528on:{ready:function ready(){setInitialSlide()}}}});// Prevent the page from scrolling when on the gallery page
64529(0,_utils.toggle)(document.querySelector("body")),b.on("change",function(a){updateURL(b,a),removeCaption(),resetPreviousSlideSize(b,a)}),b.on("settle",function(a){zoomCurrentSlideIntoView(b,a),zoomCurrentSlideCaptionIntoView(b,a)})}};exports.createMainGallery=createMainGallery;function setInitialSlide(){var a=document.querySelector("[data-slide=\"".concat(window.params.slide,"\"]")),b=document.querySelector("[data-title-destination]");b.innerText=a.getAttribute("data-title-source");// Animate the first slide (zoom)
64530var c=a.querySelector("[data-gallery-image]");c&&c.setAttribute("style","max-height: 100%; max-width: 100%;")}/**
64531 * On article page, set the link to the gallery based on the first slide
64532 */function setGalleryLink(){var a=document.querySelector("[data-gallery-trigger]"),b=document.querySelector("[data-gallery-url-source]");a&&b&&a.setAttribute("href",b.getAttribute("data-gallery-url"))}/**
64533 * Set the styles for when the slide comes into view
64534 */function zoomCurrentSlideIntoView(a,b){var c=a.cells[b].element,d=c.querySelector("[data-gallery-image]");d&&d.setAttribute("style","max-height: 100%; max-width: 100%;")}/**
64535 * Set the caption text and animation
64536 */function zoomCurrentSlideCaptionIntoView(a,b){var c=a.cells[b].element,d=c.dataset.titleSource,e=document.querySelector("[data-title-destination]");

64536e&&d&&(e.classList.add("carousel-caption-slideUp"),e.innerText=d)}/**
64537 * Update the gallery URL to the current slide
64538 */function updateURL(a,b){var c=document.querySelector("meta[property='og:url']").getAttribute("content").replace(/^.*\/\/[^\/]+/,""),d=a.cells[b].element.dataset.slide;history.replaceState({slide:d},"",c+d)}/**
64539 * Remove the slide caption and its associated class (animation)
64540 */function removeCaption(){var a=document.querySelector("[data-title-destination]");a&&(a.classList.remove("carousel-caption-slideUp"),a.innerText="")}/**
64541 * Reset the slide size to create a zoom effect when the current slide is moving away
64542 */function resetPreviousSlideSize(a,b){var c=a.cells[b-1].element,d=c.querySelector("[data-gallery-image]");d&&d.setAttribute("style","")}
64543
64544},{"../utils":480,"./init":474}],474:[function(require,module,exports){
64545"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.initCarousels=exports.createCarousel=void 0;var _flickity=_interopRequireDefault(require("flickity")),_gallery=require("./gallery");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}require("flickity-imagesloaded");var initCarousels=function(){(0,_gallery.createMainGallery)()};exports.initCarousels=initCarousels;var createCarousel=function(a){var b=a.selector,c=a.options;return!!b&&!!c&&new _flickity.default(b,c)};exports.createCarousel=createCarousel;
64546
64547},{"./gallery":473,"flickity":456,"flickity-imagesloaded":450}],475:[function(require,module,exports){
64548"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.handleMicroModal=void 0;var _micromodal=_interopRequireDefault(require("micromodal"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}// es6 module
64549var handleMicroModal=function(a){a&&_micromodal.default.init()};exports.handleMicroModal=handleMicroModal;
64550
64551},{"micromodal":464}],476:[function(require,module,exports){
64552"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.navigationToggle=exports.handleStickyToggle=exports.handleDrilldownMenu=void 0;var _utils=require("./utils"),navigationToggle=function(a,b){if(a&&b){var c=document.querySelector("[data-fade-screen]"),d=document.querySelector("body");c&&d&&(// Trigger the nav if we're open when clicked-away
64553c.addEventListener("click",function(){d.classList.contains("is-active")&&((0,_utils.toggle)(c),(0,_utils.toggle)(b),(0,_utils.toggle)(d))}),a.addEventListener("click",function(a){a.preventDefault(),(0,_utils.toggle)(c),(0,_utils.toggle)(b),(0,_utils.toggle)(d)}))}};exports.navigationToggle=navigationToggle;var handleDrilldownMenu=function(a,b){if(a&&b){for(var c=0;c<a.length;c++)a[c].addEventListener("click",function(a){a.preventDefault(),this.nextElementSibling.classList.add("is-active")});for(var d=0;d<b.length;d++)b[d].addEventListener("click",function(a){a.preventDefault(),document.querySelector(".drilldown-submenu.is-active").classList.remove("is-active")})}};exports.handleDrilldownMenu=handleDrilldownMenu;var handleStickyToggle=function(a,b){a&&b&&a.addEventListener("click",function(){b.classList.add("hidden")})};exports.handleStickyToggle=handleStickyToggle;
64554
64555},{"./utils":480}],477:[function(require,module,exports){
64556"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.toggleEpisodeDescription=void 0;var toggleEpisodeDescription=function(a){if(a){var b=a.querySelector("[data-trigger]"),c=a.querySelector("[data-target]");b&&c&&b.addEventListener("click",function(){return c.classList.toggle("hidden")})}};exports.toggleEpisodeDescription=toggleEpisodeDescription;
64557
64558},{}],478:[function(require,module,exports){
64559"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.handleSocial=exports.handleComments=void 0;var _utils=require("./utils"),handleComments=function(a){a&&a.length};exports.handleComments=handleComments;var handleSocial=function(a){if(a)for(var b=0;b<a.length;b++)a[b].addEventListener("click",function(){var a=window.config.twitter.site,b=encodeURI(this.dataset.link),c=encodeURI(this.dataset.title),d=this.dataset.social,e=!1,f="",g=function(){if(!b.includes("https://dailycaller.com")){var a=new URL(window.location);f=a.host+b,a.pathname.includes("/stream/")&&(f="https://dailycaller.com"+a.pathname)}else f=b};

64559switch(g(),d){case"fb":e="http://www.facebook.com/sharer.php?u=".concat(f,"&display=popup");break;case"tw":e="https://twitter.com/intent/tweet?text=".concat(c,"&url=").concat(f,"&via=").concat(a);break;case"pin":e="https://www.pinterest.com/pin/create/button/?url=".concat(f,"&description=").concat(c);break;case"reddit":e="https://www.reddit.com/submit?url=".concat(f,"&title=").concat(c);break;default:return console.error("No matching social property found."),void window.alert("Sorry, we couldn't process your sharing. Please try again later."+d);}// Send GA event
64560// Open the sharing window
64561return(0,_utils.sendGoogleAnalyticsEvent)(d,b),dc_track("Social Share"),window.open(e,"socialwindow","left=20,top=20,width=600,height=700,toolbar=0,resizable=1")})};exports.handleSocial=handleSocial;
64562
64563},{"./utils":480}],479:[function(require,module,exports){
64564"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.makeTabHeightsEqual=void 0;/**
64565 * Make the tab contents equal. We need to wait until the images are loaded before determining
64566 * height, since the image is used to calculate height
64567 */var makeTabHeightsEqual=function(a){if(a){var b=a.querySelectorAll("section[role=\"tabpanel\"]");b&&0!==b.length&&// We need to wait until the images are downloaded before determining the heights
64568window.addEventListener("load",function(){for(var a=getTallestTab(b),c=0;c<b.length;c++)setTabHeight(b[c],a),showTab(b[c])})}// Bail if we don't have any tabs. Some browsers still return an empty NodeList
64569};exports.makeTabHeightsEqual=makeTabHeightsEqual;function getTallestTab(a){for(var b,c=[],d=0;d<a.length;d++)b=a[d].querySelector("[data-tab-image]"),b&&c.push(a[d].offsetHeight);return 0!==c.length&&(c.sort(function(c,a){return a-c}),c[0]);// Sort by highest value
64570}function setTabHeight(a,b){!1===b||a.setAttribute("style","min-height: ".concat(b,"px"))}function showTab(a){a.classList.remove("absolute"),a.classList.remove("invisible"),a.classList.remove("w-full"),a.classList.add("hidden")}
64571
64572},{}],480:[function(require,module,exports){
64573"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.toggle=exports.sendGoogleAnalyticsEvent=void 0;var toggle=function(a){return a.classList.toggle("is-active")};exports.toggle=toggle;var sendGoogleAnalyticsEvent=function(a,b){// Bail if ga isn't available
64574return window.gtag?a?b?window.gtag?window.gtag("send","social",a,"share",b):void 0:void 0:void 0:void 0;// Bail if we aren't provided a social property (ie FB, Twitter, etc...)
64575// Bail if we aren't provided a url
64576// Bail if GA isn't available
64577// Fire off a ga call
64578};exports.sendGoogleAnalyticsEvent=sendGoogleAnalyticsEvent;
64579
64580},{}],481:[function(require,module,exports){
64581"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;function handleVideo(a,b,c,d){if(a&&b&&d)for(var e=function(e){a[e].addEventListener("click",function(f){var g=getIframe(a[e]),h=a[e].getAttribute("aria-label");g&&(f.preventDefault(),clearExistingVideo(b,a),pasteIframe(g,h,b,c),hidePlaceholder(d),showNowPlaying(a[e]))})},f=0;f<a.length;f++)e(f)}function getIframe(a){var b=a.querySelector("iframe[data-src*=\"youtube\"]");if(!b)return!1;/**
64582   * Lazyload handling. Set src to data-src.
64583   */var c=b.getAttribute("data-src");return c&&(b.src=c),b.cloneNode(!0)}function pasteIframe(a,b,c,d){c.appendChild(a),c.classList.remove("hidden"),c.setAttribute("aria-hidden","false"),d&&(d.innerHTML=b);var e=document.querySelector("#nowPlayingEpisodeTitle");e?e.innerText=b:console.error("[videoPlayer.js pasteIframe] titleDisplay missing, title not set!");var f=document.querySelector("[role=\"main\"]");f?f.scrollIntoView({behavior:"smooth"}):console.error("[videoPlayer.js pasteIframe] scrollTarget missing"),makeIframeResponsive(a),playVideo(a)}function hidePlaceholder(a){a.classList.add("hidden")}function makeIframeResponsive(a){a.setAttribute("style","position: absolute; top: 0; left: 0; width: 100%; height: 100%;")}/*
64584 * Hack. We're not using the YouTube API, so we don't have access to play, pause methods.
64585 */function playVideo(a){a.src="".concat(a.src,"&autoplay=1")}function showNowPlaying(a){var b=a.querySelector("[data-now-playing]");b&&(b.classList.remove("hidden"),b.classList.add("flex"),b.setAttribute("aria-hidden","false"))}/*
64586 * Clear out any videos that are currently playing, should a user toggle between vids
64587 */function clearExistingVideo(a,b){for(var c,d=0;d<b.length;d++)c=b[d].querySelector("[data-now-playing]"),c&&(c.classList.remove("flex"),c.classList.add("hidden"),c.setAttribute("aria-hidden","true"));for(;a.firstChild;)a.removeChild(a.firstChild)}var _default=handleVideo;exports.default=_default;
64588
64589},{}],482:[function(require,module,exports){
64590"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.makeYouTubeResponsive=exports.makeFeaturedVideoResponsive=void 0;

64590var makeYouTubeResponsive=function(a){if(a&&0!==a.length)for(var d=0;d<a.length;d++){var b=document.createElement("div"),c=a[d].parentNode;c.insertBefore(b,a[d]),b.appendChild(a[d]),a[d].setAttribute("style","position: absolute; top: 0; left: 0; width: 100%; height: 100%;"),b.setAttribute("style","padding-bottom: 56.25%"),b.classList.add("mb-6","relative")}};exports.makeYouTubeResponsive=makeYouTubeResponsive;var makeFeaturedVideoResponsive=function(){var a=document.querySelector("[data-featured-video]");a&&a.querySelector("iframe[src*=\"youtube\"]")&&a.querySelector("iframe[src*=\"youtube\"]").setAttribute("style","position: absolute; top: 0; left: 0; width: 100%; height: 100%;")};exports.makeFeaturedVideoResponsive=makeFeaturedVideoResponsive;
64591
64592},{}]},{},[469]);