{ "version": 3, "sources": ["../node_modules/@fluentui/web-components/dist/web-components.js", "../src/SplitPanels.ts", "../src/Design/ColorsUtils.ts", "../src/Design/ThemeStorage.ts", "../src/Design/Synchronization.ts", "../src/DesignTheme.ts", "../src/FluentPageScript.ts", "../src/index.ts"], "sourcesContent": ["/**\n * A reference to globalThis, with support\n * for browsers that don't yet support the spec.\n * @public\n */\nconst $global = function () {\n if (typeof globalThis !== \"undefined\") {\n // We're running in a modern environment.\n return globalThis;\n }\n if (typeof global !== \"undefined\") {\n // We're running in NodeJS\n return global;\n }\n if (typeof self !== \"undefined\") {\n // We're running in a worker.\n return self;\n }\n if (typeof window !== \"undefined\") {\n // We're running in the browser's main thread.\n return window;\n }\n try {\n // Hopefully we never get here...\n // Not all environments allow eval and Function. Use only as a last resort:\n // eslint-disable-next-line no-new-func\n return new Function(\"return this\")();\n } catch (_a) {\n // If all fails, give up and create an object.\n // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n return {};\n }\n}();\n// API-only Polyfill for trustedTypes\nif ($global.trustedTypes === void 0) {\n $global.trustedTypes = {\n createPolicy: (n, r) => r\n };\n}\nconst propConfig = {\n configurable: false,\n enumerable: false,\n writable: false\n};\nif ($global.FAST === void 0) {\n Reflect.defineProperty($global, \"FAST\", Object.assign({\n value: Object.create(null)\n }, propConfig));\n}\n/**\n * The FAST global.\n * @internal\n */\nconst FAST = $global.FAST;\nif (FAST.getById === void 0) {\n const storage = Object.create(null);\n Reflect.defineProperty(FAST, \"getById\", Object.assign({\n value(id, initialize) {\n let found = storage[id];\n if (found === void 0) {\n found = initialize ? storage[id] = initialize() : null;\n }\n return found;\n }\n }, propConfig));\n}\n/**\n * A readonly, empty array.\n * @remarks\n * Typically returned by APIs that return arrays when there are\n * no actual items to return.\n * @internal\n */\nconst emptyArray = Object.freeze([]);\n/**\n * Creates a function capable of locating metadata associated with a type.\n * @returns A metadata locator function.\n * @internal\n */\nfunction createMetadataLocator() {\n const metadataLookup = new WeakMap();\n return function (target) {\n let metadata = metadataLookup.get(target);\n if (metadata === void 0) {\n let currentTarget = Reflect.getPrototypeOf(target);\n while (metadata === void 0 && currentTarget !== null) {\n metadata = metadataLookup.get(currentTarget);\n currentTarget = Reflect.getPrototypeOf(currentTarget);\n }\n metadata = metadata === void 0 ? [] : metadata.slice(0);\n metadataLookup.set(target, metadata);\n }\n return metadata;\n };\n}\n\nconst updateQueue = $global.FAST.getById(1 /* updateQueue */, () => {\n const tasks = [];\n const pendingErrors = [];\n function throwFirstError() {\n if (pendingErrors.length) {\n throw pendingErrors.shift();\n }\n }\n function tryRunTask(task) {\n try {\n task.call();\n } catch (error) {\n pendingErrors.push(error);\n setTimeout(throwFirstError, 0);\n }\n }\n function process() {\n const capacity = 1024;\n let index = 0;\n while (index < tasks.length) {\n tryRunTask(tasks[index]);\n index++;\n // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.\n // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will\n // grow, but to avoid an O(n) walk for every task we execute, we don't\n // shift tasks off the queue after they have been executed.\n // Instead, we periodically shift 1024 tasks off the queue.\n if (index > capacity) {\n // Manually shift all values starting at the index back to the\n // beginning of the queue.\n for (let scan = 0, newLength = tasks.length - index; scan < newLength; scan++) {\n tasks[scan] = tasks[scan + index];\n }\n tasks.length -= index;\n index = 0;\n }\n }\n tasks.length = 0;\n }\n function enqueue(callable) {\n if (tasks.length < 1) {\n $global.requestAnimationFrame(process);\n }\n tasks.push(callable);\n }\n return Object.freeze({\n enqueue,\n process\n });\n});\n/* eslint-disable */\nconst fastHTMLPolicy = $global.trustedTypes.createPolicy(\"fast-html\", {\n createHTML: html => html\n});\n/* eslint-enable */\nlet htmlPolicy = fastHTMLPolicy;\nconst marker = `fast-${Math.random().toString(36).substring(2, 8)}`;\n/** @internal */\nconst _interpolationStart = `${marker}{`;\n/** @internal */\nconst _interpolationEnd = `}${marker}`;\n/**\n * Common DOM APIs.\n * @public\n */\nconst DOM = Object.freeze({\n /**\n * Indicates whether the DOM supports the adoptedStyleSheets feature.\n */\n supportsAdoptedStyleSheets: Array.isArray(document.adoptedStyleSheets) && \"replace\" in CSSStyleSheet.prototype,\n /**\n * Sets the HTML trusted types policy used by the templating engine.\n * @param policy - The policy to set for HTML.\n * @remarks\n * This API can only be called once, for security reasons. It should be\n * called by the application developer at the start of their program.\n */\n setHTMLPolicy(policy) {\n if (htmlPolicy !== fastHTMLPolicy) {\n throw new Error(\"The HTML policy can only be set once.\");\n }\n htmlPolicy = policy;\n },\n /**\n * Turns a string into trusted HTML using the configured trusted types policy.\n * @param html - The string to turn into trusted HTML.\n * @remarks\n * Used internally by the template engine when creating templates\n * and setting innerHTML.\n */\n createHTML(html) {\n return htmlPolicy.createHTML(html);\n },\n /**\n * Determines if the provided node is a template marker used by the runtime.\n * @param node - The node to test.\n */\n isMarker(node) {\n return node && node.nodeType === 8 && node.data.startsWith(marker);\n },\n /**\n * Given a marker node, extract the {@link HTMLDirective} index from the placeholder.\n * @param node - The marker node to extract the index from.\n */\n extractDirectiveIndexFromMarker(node) {\n return parseInt(node.data.replace(`${marker}:`, \"\"));\n },\n /**\n * Creates a placeholder string suitable for marking out a location *within*\n * an attribute value or HTML content.\n * @param index - The directive index to create the placeholder for.\n * @remarks\n * Used internally by binding directives.\n */\n createInterpolationPlaceholder(index) {\n return `${_interpolationStart}${index}${_interpolationEnd}`;\n },\n /**\n * Creates a placeholder that manifests itself as an attribute on an\n * element.\n * @param attributeName - The name of the custom attribute.\n * @param index - The directive index to create the placeholder for.\n * @remarks\n * Used internally by attribute directives such as `ref`, `slotted`, and `children`.\n */\n createCustomAttributePlaceholder(attributeName, index) {\n return `${attributeName}=\"${this.createInterpolationPlaceholder(index)}\"`;\n },\n /**\n * Creates a placeholder that manifests itself as a marker within the DOM structure.\n * @param index - The directive index to create the placeholder for.\n * @remarks\n * Used internally by structural directives such as `repeat`.\n */\n createBlockPlaceholder(index) {\n return ``;\n },\n /**\n * Schedules DOM update work in the next async batch.\n * @param callable - The callable function or object to queue.\n */\n queueUpdate: updateQueue.enqueue,\n /**\n * Immediately processes all work previously scheduled\n * through queueUpdate.\n * @remarks\n * This also forces nextUpdate promises\n * to resolve.\n */\n processUpdates: updateQueue.process,\n /**\n * Resolves with the next DOM update.\n */\n nextUpdate() {\n return new Promise(updateQueue.enqueue);\n },\n /**\n * Sets an attribute value on an element.\n * @param element - The element to set the attribute value on.\n * @param attributeName - The attribute name to set.\n * @param value - The value of the attribute to set.\n * @remarks\n * If the value is `null` or `undefined`, the attribute is removed, otherwise\n * it is set to the provided value using the standard `setAttribute` API.\n */\n setAttribute(element, attributeName, value) {\n if (value === null || value === undefined) {\n element.removeAttribute(attributeName);\n } else {\n element.setAttribute(attributeName, value);\n }\n },\n /**\n * Sets a boolean attribute value.\n * @param element - The element to set the boolean attribute value on.\n * @param attributeName - The attribute name to set.\n * @param value - The value of the attribute to set.\n * @remarks\n * If the value is true, the attribute is added; otherwise it is removed.\n */\n setBooleanAttribute(element, attributeName, value) {\n value ? element.setAttribute(attributeName, \"\") : element.removeAttribute(attributeName);\n },\n /**\n * Removes all the child nodes of the provided parent node.\n * @param parent - The node to remove the children from.\n */\n removeChildNodes(parent) {\n for (let child = parent.firstChild; child !== null; child = parent.firstChild) {\n parent.removeChild(child);\n }\n },\n /**\n * Creates a TreeWalker configured to walk a template fragment.\n * @param fragment - The fragment to walk.\n */\n createTemplateWalker(fragment) {\n return document.createTreeWalker(fragment, 133,\n // element, text, comment\n null, false);\n }\n});\n\n/**\n * An implementation of {@link Notifier} that efficiently keeps track of\n * subscribers interested in a specific change notification on an\n * observable source.\n *\n * @remarks\n * This set is optimized for the most common scenario of 1 or 2 subscribers.\n * With this in mind, it can store a subscriber in an internal field, allowing it to avoid Array#push operations.\n * If the set ever exceeds two subscribers, it upgrades to an array automatically.\n * @public\n */\nclass SubscriberSet {\n /**\n * Creates an instance of SubscriberSet for the specified source.\n * @param source - The object source that subscribers will receive notifications from.\n * @param initialSubscriber - An initial subscriber to changes.\n */\n constructor(source, initialSubscriber) {\n this.sub1 = void 0;\n this.sub2 = void 0;\n this.spillover = void 0;\n this.source = source;\n this.sub1 = initialSubscriber;\n }\n /**\n * Checks whether the provided subscriber has been added to this set.\n * @param subscriber - The subscriber to test for inclusion in this set.\n */\n has(subscriber) {\n return this.spillover === void 0 ? this.sub1 === subscriber || this.sub2 === subscriber : this.spillover.indexOf(subscriber) !== -1;\n }\n /**\n * Subscribes to notification of changes in an object's state.\n * @param subscriber - The object that is subscribing for change notification.\n */\n subscribe(subscriber) {\n const spillover = this.spillover;\n if (spillover === void 0) {\n if (this.has(subscriber)) {\n return;\n }\n if (this.sub1 === void 0) {\n this.sub1 = subscriber;\n return;\n }\n if (this.sub2 === void 0) {\n this.sub2 = subscriber;\n return;\n }\n this.spillover = [this.sub1, this.sub2, subscriber];\n this.sub1 = void 0;\n this.sub2 = void 0;\n } else {\n const index = spillover.indexOf(subscriber);\n if (index === -1) {\n spillover.push(subscriber);\n }\n }\n }\n /**\n * Unsubscribes from notification of changes in an object's state.\n * @param subscriber - The object that is unsubscribing from change notification.\n */\n unsubscribe(subscriber) {\n const spillover = this.spillover;\n if (spillover === void 0) {\n if (this.sub1 === subscriber) {\n this.sub1 = void 0;\n } else if (this.sub2 === subscriber) {\n this.sub2 = void 0;\n }\n } else {\n const index = spillover.indexOf(subscriber);\n if (index !== -1) {\n spillover.splice(index, 1);\n }\n }\n }\n /**\n * Notifies all subscribers.\n * @param args - Data passed along to subscribers during notification.\n */\n notify(args) {\n const spillover = this.spillover;\n const source = this.source;\n if (spillover === void 0) {\n const sub1 = this.sub1;\n const sub2 = this.sub2;\n if (sub1 !== void 0) {\n sub1.handleChange(source, args);\n }\n if (sub2 !== void 0) {\n sub2.handleChange(source, args);\n }\n } else {\n for (let i = 0, ii = spillover.length; i < ii; ++i) {\n spillover[i].handleChange(source, args);\n }\n }\n }\n}\n/**\n * An implementation of Notifier that allows subscribers to be notified\n * of individual property changes on an object.\n * @public\n */\nclass PropertyChangeNotifier {\n /**\n * Creates an instance of PropertyChangeNotifier for the specified source.\n * @param source - The object source that subscribers will receive notifications from.\n */\n constructor(source) {\n this.subscribers = {};\n this.sourceSubscribers = null;\n this.source = source;\n }\n /**\n * Notifies all subscribers, based on the specified property.\n * @param propertyName - The property name, passed along to subscribers during notification.\n */\n notify(propertyName) {\n var _a;\n const subscribers = this.subscribers[propertyName];\n if (subscribers !== void 0) {\n subscribers.notify(propertyName);\n }\n (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.notify(propertyName);\n }\n /**\n * Subscribes to notification of changes in an object's state.\n * @param subscriber - The object that is subscribing for change notification.\n * @param propertyToWatch - The name of the property that the subscriber is interested in watching for changes.\n */\n subscribe(subscriber, propertyToWatch) {\n var _a;\n if (propertyToWatch) {\n let subscribers = this.subscribers[propertyToWatch];\n if (subscribers === void 0) {\n this.subscribers[propertyToWatch] = subscribers = new SubscriberSet(this.source);\n }\n subscribers.subscribe(subscriber);\n } else {\n this.sourceSubscribers = (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);\n this.sourceSubscribers.subscribe(subscriber);\n }\n }\n /**\n * Unsubscribes from notification of changes in an object's state.\n * @param subscriber - The object that is unsubscribing from change notification.\n * @param propertyToUnwatch - The name of the property that the subscriber is no longer interested in watching.\n */\n unsubscribe(subscriber, propertyToUnwatch) {\n var _a;\n if (propertyToUnwatch) {\n const subscribers = this.subscribers[propertyToUnwatch];\n if (subscribers !== void 0) {\n subscribers.unsubscribe(subscriber);\n }\n } else {\n (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);\n }\n }\n}\n\n/**\n * Common Observable APIs.\n * @public\n */\nconst Observable = FAST.getById(2 /* observable */, () => {\n const volatileRegex = /(:|&&|\\|\\||if)/;\n const notifierLookup = new WeakMap();\n const queueUpdate = DOM.queueUpdate;\n let watcher = void 0;\n let createArrayObserver = array => {\n throw new Error(\"Must call enableArrayObservation before observing arrays.\");\n };\n function getNotifier(source) {\n let found = source.$fastController || notifierLookup.get(source);\n if (found === void 0) {\n if (Array.isArray(source)) {\n found = createArrayObserver(source);\n } else {\n notifierLookup.set(source, found = new PropertyChangeNotifier(source));\n }\n }\n return found;\n }\n const getAccessors = createMetadataLocator();\n class DefaultObservableAccessor {\n constructor(name) {\n this.name = name;\n this.field = `_${name}`;\n this.callback = `${name}Changed`;\n }\n getValue(source) {\n if (watcher !== void 0) {\n watcher.watch(source, this.name);\n }\n return source[this.field];\n }\n setValue(source, newValue) {\n const field = this.field;\n const oldValue = source[field];\n if (oldValue !== newValue) {\n source[field] = newValue;\n const callback = source[this.callback];\n if (typeof callback === \"function\") {\n callback.call(source, oldValue, newValue);\n }\n getNotifier(source).notify(this.name);\n }\n }\n }\n class BindingObserverImplementation extends SubscriberSet {\n constructor(binding, initialSubscriber, isVolatileBinding = false) {\n super(binding, initialSubscriber);\n this.binding = binding;\n this.isVolatileBinding = isVolatileBinding;\n this.needsRefresh = true;\n this.needsQueue = true;\n this.first = this;\n this.last = null;\n this.propertySource = void 0;\n this.propertyName = void 0;\n this.notifier = void 0;\n this.next = void 0;\n }\n observe(source, context) {\n if (this.needsRefresh && this.last !== null) {\n this.disconnect();\n }\n const previousWatcher = watcher;\n watcher = this.needsRefresh ? this : void 0;\n this.needsRefresh = this.isVolatileBinding;\n const result = this.binding(source, context);\n watcher = previousWatcher;\n return result;\n }\n disconnect() {\n if (this.last !== null) {\n let current = this.first;\n while (current !== void 0) {\n current.notifier.unsubscribe(this, current.propertyName);\n current = current.next;\n }\n this.last = null;\n this.needsRefresh = this.needsQueue = true;\n }\n }\n watch(propertySource, propertyName) {\n const prev = this.last;\n const notifier = getNotifier(propertySource);\n const current = prev === null ? this.first : {};\n current.propertySource = propertySource;\n current.propertyName = propertyName;\n current.notifier = notifier;\n notifier.subscribe(this, propertyName);\n if (prev !== null) {\n if (!this.needsRefresh) {\n // Declaring the variable prior to assignment below circumvents\n // a bug in Angular's optimization process causing infinite recursion\n // of this watch() method. Details https://github.com/microsoft/fast/issues/4969\n let prevValue;\n watcher = void 0;\n /* eslint-disable-next-line */\n prevValue = prev.propertySource[prev.propertyName];\n /* eslint-disable-next-line @typescript-eslint/no-this-alias */\n watcher = this;\n if (propertySource === prevValue) {\n this.needsRefresh = true;\n }\n }\n prev.next = current;\n }\n this.last = current;\n }\n handleChange() {\n if (this.needsQueue) {\n this.needsQueue = false;\n queueUpdate(this);\n }\n }\n call() {\n if (this.last !== null) {\n this.needsQueue = true;\n this.notify(this);\n }\n }\n records() {\n let next = this.first;\n return {\n next: () => {\n const current = next;\n if (current === undefined) {\n return {\n value: void 0,\n done: true\n };\n } else {\n next = next.next;\n return {\n value: current,\n done: false\n };\n }\n },\n [Symbol.iterator]: function () {\n return this;\n }\n };\n }\n }\n return Object.freeze({\n /**\n * @internal\n * @param factory - The factory used to create array observers.\n */\n setArrayObserverFactory(factory) {\n createArrayObserver = factory;\n },\n /**\n * Gets a notifier for an object or Array.\n * @param source - The object or Array to get the notifier for.\n */\n getNotifier,\n /**\n * Records a property change for a source object.\n * @param source - The object to record the change against.\n * @param propertyName - The property to track as changed.\n */\n track(source, propertyName) {\n if (watcher !== void 0) {\n watcher.watch(source, propertyName);\n }\n },\n /**\n * Notifies watchers that the currently executing property getter or function is volatile\n * with respect to its observable dependencies.\n */\n trackVolatile() {\n if (watcher !== void 0) {\n watcher.needsRefresh = true;\n }\n },\n /**\n * Notifies subscribers of a source object of changes.\n * @param source - the object to notify of changes.\n * @param args - The change args to pass to subscribers.\n */\n notify(source, args) {\n getNotifier(source).notify(args);\n },\n /**\n * Defines an observable property on an object or prototype.\n * @param target - The target object to define the observable on.\n * @param nameOrAccessor - The name of the property to define as observable;\n * or a custom accessor that specifies the property name and accessor implementation.\n */\n defineProperty(target, nameOrAccessor) {\n if (typeof nameOrAccessor === \"string\") {\n nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);\n }\n getAccessors(target).push(nameOrAccessor);\n Reflect.defineProperty(target, nameOrAccessor.name, {\n enumerable: true,\n get: function () {\n return nameOrAccessor.getValue(this);\n },\n set: function (newValue) {\n nameOrAccessor.setValue(this, newValue);\n }\n });\n },\n /**\n * Finds all the observable accessors defined on the target,\n * including its prototype chain.\n * @param target - The target object to search for accessor on.\n */\n getAccessors,\n /**\n * Creates a {@link BindingObserver} that can watch the\n * provided {@link Binding} for changes.\n * @param binding - The binding to observe.\n * @param initialSubscriber - An initial subscriber to changes in the binding value.\n * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.\n */\n binding(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {\n return new BindingObserverImplementation(binding, initialSubscriber, isVolatileBinding);\n },\n /**\n * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated\n * on every evaluation of the value.\n * @param binding - The binding to inspect.\n */\n isVolatileBinding(binding) {\n return volatileRegex.test(binding.toString());\n }\n });\n});\n/**\n * Decorator: Defines an observable property on the target.\n * @param target - The target to define the observable on.\n * @param nameOrAccessor - The property name or accessor to define the observable as.\n * @public\n */\nfunction observable(target, nameOrAccessor) {\n Observable.defineProperty(target, nameOrAccessor);\n}\n/**\n * Decorator: Marks a property getter as having volatile observable dependencies.\n * @param target - The target that the property is defined on.\n * @param name - The property name.\n * @param name - The existing descriptor.\n * @public\n */\nfunction volatile(target, name, descriptor) {\n return Object.assign({}, descriptor, {\n get: function () {\n Observable.trackVolatile();\n return descriptor.get.apply(this);\n }\n });\n}\nconst contextEvent = FAST.getById(3 /* contextEvent */, () => {\n let current = null;\n return {\n get() {\n return current;\n },\n set(event) {\n current = event;\n }\n };\n});\n/**\n * Provides additional contextual information available to behaviors and expressions.\n * @public\n */\nclass ExecutionContext {\n constructor() {\n /**\n * The index of the current item within a repeat context.\n */\n this.index = 0;\n /**\n * The length of the current collection within a repeat context.\n */\n this.length = 0;\n /**\n * The parent data object within a repeat context.\n */\n this.parent = null;\n /**\n * The parent execution context when in nested context scenarios.\n */\n this.parentContext = null;\n }\n /**\n * The current event within an event handler.\n */\n get event() {\n return contextEvent.get();\n }\n /**\n * Indicates whether the current item within a repeat context\n * has an even index.\n */\n get isEven() {\n return this.index % 2 === 0;\n }\n /**\n * Indicates whether the current item within a repeat context\n * has an odd index.\n */\n get isOdd() {\n return this.index % 2 !== 0;\n }\n /**\n * Indicates whether the current item within a repeat context\n * is the first item in the collection.\n */\n get isFirst() {\n return this.index === 0;\n }\n /**\n * Indicates whether the current item within a repeat context\n * is somewhere in the middle of the collection.\n */\n get isInMiddle() {\n return !this.isFirst && !this.isLast;\n }\n /**\n * Indicates whether the current item within a repeat context\n * is the last item in the collection.\n */\n get isLast() {\n return this.index === this.length - 1;\n }\n /**\n * Sets the event for the current execution context.\n * @param event - The event to set.\n * @internal\n */\n static setEvent(event) {\n contextEvent.set(event);\n }\n}\nObservable.defineProperty(ExecutionContext.prototype, \"index\");\nObservable.defineProperty(ExecutionContext.prototype, \"length\");\n/**\n * The default execution context used in binding expressions.\n * @public\n */\nconst defaultExecutionContext = Object.seal(new ExecutionContext());\n\n/**\n * Instructs the template engine to apply behavior to a node.\n * @public\n */\nclass HTMLDirective {\n constructor() {\n /**\n * The index of the DOM node to which the created behavior will apply.\n */\n this.targetIndex = 0;\n }\n}\n/**\n * A {@link HTMLDirective} that targets a named attribute or property on a node.\n * @public\n */\nclass TargetedHTMLDirective extends HTMLDirective {\n constructor() {\n super(...arguments);\n /**\n * Creates a placeholder string based on the directive's index within the template.\n * @param index - The index of the directive within the template.\n */\n this.createPlaceholder = DOM.createInterpolationPlaceholder;\n }\n}\n/**\n * A directive that attaches special behavior to an element via a custom attribute.\n * @public\n */\nclass AttachedBehaviorHTMLDirective extends HTMLDirective {\n /**\n *\n * @param name - The name of the behavior; used as a custom attribute on the element.\n * @param behavior - The behavior to instantiate and attach to the element.\n * @param options - Options to pass to the behavior during creation.\n */\n constructor(name, behavior, options) {\n super();\n this.name = name;\n this.behavior = behavior;\n this.options = options;\n }\n /**\n * Creates a placeholder string based on the directive's index within the template.\n * @param index - The index of the directive within the template.\n * @remarks\n * Creates a custom attribute placeholder.\n */\n createPlaceholder(index) {\n return DOM.createCustomAttributePlaceholder(this.name, index);\n }\n /**\n * Creates a behavior for the provided target node.\n * @param target - The node instance to create the behavior for.\n * @remarks\n * Creates an instance of the `behavior` type this directive was constructed with\n * and passes the target and options to that `behavior`'s constructor.\n */\n createBehavior(target) {\n return new this.behavior(target, this.options);\n }\n}\n\nfunction normalBind(source, context) {\n this.source = source;\n this.context = context;\n if (this.bindingObserver === null) {\n this.bindingObserver = Observable.binding(this.binding, this, this.isBindingVolatile);\n }\n this.updateTarget(this.bindingObserver.observe(source, context));\n}\nfunction triggerBind(source, context) {\n this.source = source;\n this.context = context;\n this.target.addEventListener(this.targetName, this);\n}\nfunction normalUnbind() {\n this.bindingObserver.disconnect();\n this.source = null;\n this.context = null;\n}\nfunction contentUnbind() {\n this.bindingObserver.disconnect();\n this.source = null;\n this.context = null;\n const view = this.target.$fastView;\n if (view !== void 0 && view.isComposed) {\n view.unbind();\n view.needsBindOnly = true;\n }\n}\nfunction triggerUnbind() {\n this.target.removeEventListener(this.targetName, this);\n this.source = null;\n this.context = null;\n}\nfunction updateAttributeTarget(value) {\n DOM.setAttribute(this.target, this.targetName, value);\n}\nfunction updateBooleanAttributeTarget(value) {\n DOM.setBooleanAttribute(this.target, this.targetName, value);\n}\nfunction updateContentTarget(value) {\n // If there's no actual value, then this equates to the\n // empty string for the purposes of content bindings.\n if (value === null || value === undefined) {\n value = \"\";\n }\n // If the value has a \"create\" method, then it's a template-like.\n if (value.create) {\n this.target.textContent = \"\";\n let view = this.target.$fastView;\n // If there's no previous view that we might be able to\n // reuse then create a new view from the template.\n if (view === void 0) {\n view = value.create();\n } else {\n // If there is a previous view, but it wasn't created\n // from the same template as the new value, then we\n // need to remove the old view if it's still in the DOM\n // and create a new view from the template.\n if (this.target.$fastTemplate !== value) {\n if (view.isComposed) {\n view.remove();\n view.unbind();\n }\n view = value.create();\n }\n }\n // It's possible that the value is the same as the previous template\n // and that there's actually no need to compose it.\n if (!view.isComposed) {\n view.isComposed = true;\n view.bind(this.source, this.context);\n view.insertBefore(this.target);\n this.target.$fastView = view;\n this.target.$fastTemplate = value;\n } else if (view.needsBindOnly) {\n view.needsBindOnly = false;\n view.bind(this.source, this.context);\n }\n } else {\n const view = this.target.$fastView;\n // If there is a view and it's currently composed into\n // the DOM, then we need to remove it.\n if (view !== void 0 && view.isComposed) {\n view.isComposed = false;\n view.remove();\n if (view.needsBindOnly) {\n view.needsBindOnly = false;\n } else {\n view.unbind();\n }\n }\n this.target.textContent = value;\n }\n}\nfunction updatePropertyTarget(value) {\n this.target[this.targetName] = value;\n}\nfunction updateClassTarget(value) {\n const classVersions = this.classVersions || Object.create(null);\n const target = this.target;\n let version = this.version || 0;\n // Add the classes, tracking the version at which they were added.\n if (value !== null && value !== undefined && value.length) {\n const names = value.split(/\\s+/);\n for (let i = 0, ii = names.length; i < ii; ++i) {\n const currentName = names[i];\n if (currentName === \"\") {\n continue;\n }\n classVersions[currentName] = version;\n target.classList.add(currentName);\n }\n }\n this.classVersions = classVersions;\n this.version = version + 1;\n // If this is the first call to add classes, there's no need to remove old ones.\n if (version === 0) {\n return;\n }\n // Remove classes from the previous version.\n version -= 1;\n for (const name in classVersions) {\n if (classVersions[name] === version) {\n target.classList.remove(name);\n }\n }\n}\n/**\n * A directive that configures data binding to element content and attributes.\n * @public\n */\nclass HTMLBindingDirective extends TargetedHTMLDirective {\n /**\n * Creates an instance of BindingDirective.\n * @param binding - A binding that returns the data used to update the DOM.\n */\n constructor(binding) {\n super();\n this.binding = binding;\n this.bind = normalBind;\n this.unbind = normalUnbind;\n this.updateTarget = updateAttributeTarget;\n this.isBindingVolatile = Observable.isVolatileBinding(this.binding);\n }\n /**\n * Gets/sets the name of the attribute or property that this\n * binding is targeting.\n */\n get targetName() {\n return this.originalTargetName;\n }\n set targetName(value) {\n this.originalTargetName = value;\n if (value === void 0) {\n return;\n }\n switch (value[0]) {\n case \":\":\n this.cleanedTargetName = value.substr(1);\n this.updateTarget = updatePropertyTarget;\n if (this.cleanedTargetName === \"innerHTML\") {\n const binding = this.binding;\n this.binding = (s, c) => DOM.createHTML(binding(s, c));\n }\n break;\n case \"?\":\n this.cleanedTargetName = value.substr(1);\n this.updateTarget = updateBooleanAttributeTarget;\n break;\n case \"@\":\n this.cleanedTargetName = value.substr(1);\n this.bind = triggerBind;\n this.unbind = triggerUnbind;\n break;\n default:\n this.cleanedTargetName = value;\n if (value === \"class\") {\n this.updateTarget = updateClassTarget;\n }\n break;\n }\n }\n /**\n * Makes this binding target the content of an element rather than\n * a particular attribute or property.\n */\n targetAtContent() {\n this.updateTarget = updateContentTarget;\n this.unbind = contentUnbind;\n }\n /**\n * Creates the runtime BindingBehavior instance based on the configuration\n * information stored in the BindingDirective.\n * @param target - The target node that the binding behavior should attach to.\n */\n createBehavior(target) {\n /* eslint-disable-next-line @typescript-eslint/no-use-before-define */\n return new BindingBehavior(target, this.binding, this.isBindingVolatile, this.bind, this.unbind, this.updateTarget, this.cleanedTargetName);\n }\n}\n/**\n * A behavior that updates content and attributes based on a configured\n * BindingDirective.\n * @public\n */\nclass BindingBehavior {\n /**\n * Creates an instance of BindingBehavior.\n * @param target - The target of the data updates.\n * @param binding - The binding that returns the latest value for an update.\n * @param isBindingVolatile - Indicates whether the binding has volatile dependencies.\n * @param bind - The operation to perform during binding.\n * @param unbind - The operation to perform during unbinding.\n * @param updateTarget - The operation to perform when updating.\n * @param targetName - The name of the target attribute or property to update.\n */\n constructor(target, binding, isBindingVolatile, bind, unbind, updateTarget, targetName) {\n /** @internal */\n this.source = null;\n /** @internal */\n this.context = null;\n /** @internal */\n this.bindingObserver = null;\n this.target = target;\n this.binding = binding;\n this.isBindingVolatile = isBindingVolatile;\n this.bind = bind;\n this.unbind = unbind;\n this.updateTarget = updateTarget;\n this.targetName = targetName;\n }\n /** @internal */\n handleChange() {\n this.updateTarget(this.bindingObserver.observe(this.source, this.context));\n }\n /** @internal */\n handleEvent(event) {\n ExecutionContext.setEvent(event);\n const result = this.binding(this.source, this.context);\n ExecutionContext.setEvent(null);\n if (result !== true) {\n event.preventDefault();\n }\n }\n}\n\nlet sharedContext = null;\nclass CompilationContext {\n addFactory(factory) {\n factory.targetIndex = this.targetIndex;\n this.behaviorFactories.push(factory);\n }\n captureContentBinding(directive) {\n directive.targetAtContent();\n this.addFactory(directive);\n }\n reset() {\n this.behaviorFactories = [];\n this.targetIndex = -1;\n }\n release() {\n /* eslint-disable-next-line @typescript-eslint/no-this-alias */\n sharedContext = this;\n }\n static borrow(directives) {\n const shareable = sharedContext || new CompilationContext();\n shareable.directives = directives;\n shareable.reset();\n sharedContext = null;\n return shareable;\n }\n}\nfunction createAggregateBinding(parts) {\n if (parts.length === 1) {\n return parts[0];\n }\n let targetName;\n const partCount = parts.length;\n const finalParts = parts.map(x => {\n if (typeof x === \"string\") {\n return () => x;\n }\n targetName = x.targetName || targetName;\n return x.binding;\n });\n const binding = (scope, context) => {\n let output = \"\";\n for (let i = 0; i < partCount; ++i) {\n output += finalParts[i](scope, context);\n }\n return output;\n };\n const directive = new HTMLBindingDirective(binding);\n directive.targetName = targetName;\n return directive;\n}\nconst interpolationEndLength = _interpolationEnd.length;\nfunction parseContent(context, value) {\n const valueParts = value.split(_interpolationStart);\n if (valueParts.length === 1) {\n return null;\n }\n const bindingParts = [];\n for (let i = 0, ii = valueParts.length; i < ii; ++i) {\n const current = valueParts[i];\n const index = current.indexOf(_interpolationEnd);\n let literal;\n if (index === -1) {\n literal = current;\n } else {\n const directiveIndex = parseInt(current.substring(0, index));\n bindingParts.push(context.directives[directiveIndex]);\n literal = current.substring(index + interpolationEndLength);\n }\n if (literal !== \"\") {\n bindingParts.push(literal);\n }\n }\n return bindingParts;\n}\nfunction compileAttributes(context, node, includeBasicValues = false) {\n const attributes = node.attributes;\n for (let i = 0, ii = attributes.length; i < ii; ++i) {\n const attr = attributes[i];\n const attrValue = attr.value;\n const parseResult = parseContent(context, attrValue);\n let result = null;\n if (parseResult === null) {\n if (includeBasicValues) {\n result = new HTMLBindingDirective(() => attrValue);\n result.targetName = attr.name;\n }\n } else {\n result = createAggregateBinding(parseResult);\n }\n if (result !== null) {\n node.removeAttributeNode(attr);\n i--;\n ii--;\n context.addFactory(result);\n }\n }\n}\nfunction compileContent(context, node, walker) {\n const parseResult = parseContent(context, node.textContent);\n if (parseResult !== null) {\n let lastNode = node;\n for (let i = 0, ii = parseResult.length; i < ii; ++i) {\n const currentPart = parseResult[i];\n const currentNode = i === 0 ? node : lastNode.parentNode.insertBefore(document.createTextNode(\"\"), lastNode.nextSibling);\n if (typeof currentPart === \"string\") {\n currentNode.textContent = currentPart;\n } else {\n currentNode.textContent = \" \";\n context.captureContentBinding(currentPart);\n }\n lastNode = currentNode;\n context.targetIndex++;\n if (currentNode !== node) {\n walker.nextNode();\n }\n }\n context.targetIndex--;\n }\n}\n/**\n * Compiles a template and associated directives into a raw compilation\n * result which include a cloneable DocumentFragment and factories capable\n * of attaching runtime behavior to nodes within the fragment.\n * @param template - The template to compile.\n * @param directives - The directives referenced by the template.\n * @remarks\n * The template that is provided for compilation is altered in-place\n * and cannot be compiled again. If the original template must be preserved,\n * it is recommended that you clone the original and pass the clone to this API.\n * @public\n */\nfunction compileTemplate(template, directives) {\n const fragment = template.content;\n // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864\n document.adoptNode(fragment);\n const context = CompilationContext.borrow(directives);\n compileAttributes(context, template, true);\n const hostBehaviorFactories = context.behaviorFactories;\n context.reset();\n const walker = DOM.createTemplateWalker(fragment);\n let node;\n while (node = walker.nextNode()) {\n context.targetIndex++;\n switch (node.nodeType) {\n case 1:\n // element node\n compileAttributes(context, node);\n break;\n case 3:\n // text node\n compileContent(context, node, walker);\n break;\n case 8:\n // comment\n if (DOM.isMarker(node)) {\n context.addFactory(directives[DOM.extractDirectiveIndexFromMarker(node)]);\n }\n }\n }\n let targetOffset = 0;\n if (\n // If the first node in a fragment is a marker, that means it's an unstable first node,\n // because something like a when, repeat, etc. could add nodes before the marker.\n // To mitigate this, we insert a stable first node. However, if we insert a node,\n // that will alter the result of the TreeWalker. So, we also need to offset the target index.\n DOM.isMarker(fragment.firstChild) ||\n // Or if there is only one node and a directive, it means the template's content\n // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by\n // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.\n fragment.childNodes.length === 1 && directives.length) {\n fragment.insertBefore(document.createComment(\"\"), fragment.firstChild);\n targetOffset = -1;\n }\n const viewBehaviorFactories = context.behaviorFactories;\n context.release();\n return {\n fragment,\n viewBehaviorFactories,\n hostBehaviorFactories,\n targetOffset\n };\n}\n\n// A singleton Range instance used to efficiently remove ranges of DOM nodes.\n// See the implementation of HTMLView below for further details.\nconst range = document.createRange();\n/**\n * The standard View implementation, which also implements ElementView and SyntheticView.\n * @public\n */\nclass HTMLView {\n /**\n * Constructs an instance of HTMLView.\n * @param fragment - The html fragment that contains the nodes for this view.\n * @param behaviors - The behaviors to be applied to this view.\n */\n constructor(fragment, behaviors) {\n this.fragment = fragment;\n this.behaviors = behaviors;\n /**\n * The data that the view is bound to.\n */\n this.source = null;\n /**\n * The execution context the view is running within.\n */\n this.context = null;\n this.firstChild = fragment.firstChild;\n this.lastChild = fragment.lastChild;\n }\n /**\n * Appends the view's DOM nodes to the referenced node.\n * @param node - The parent node to append the view's DOM nodes to.\n */\n appendTo(node) {\n node.appendChild(this.fragment);\n }\n /**\n * Inserts the view's DOM nodes before the referenced node.\n * @param node - The node to insert the view's DOM before.\n */\n insertBefore(node) {\n if (this.fragment.hasChildNodes()) {\n node.parentNode.insertBefore(this.fragment, node);\n } else {\n const end = this.lastChild;\n if (node.previousSibling === end) return;\n const parentNode = node.parentNode;\n let current = this.firstChild;\n let next;\n while (current !== end) {\n next = current.nextSibling;\n parentNode.insertBefore(current, node);\n current = next;\n }\n parentNode.insertBefore(end, node);\n }\n }\n /**\n * Removes the view's DOM nodes.\n * The nodes are not disposed and the view can later be re-inserted.\n */\n remove() {\n const fragment = this.fragment;\n const end = this.lastChild;\n let current = this.firstChild;\n let next;\n while (current !== end) {\n next = current.nextSibling;\n fragment.appendChild(current);\n current = next;\n }\n fragment.appendChild(end);\n }\n /**\n * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.\n * Once a view has been disposed, it cannot be inserted or bound again.\n */\n dispose() {\n const parent = this.firstChild.parentNode;\n const end = this.lastChild;\n let current = this.firstChild;\n let next;\n while (current !== end) {\n next = current.nextSibling;\n parent.removeChild(current);\n current = next;\n }\n parent.removeChild(end);\n const behaviors = this.behaviors;\n const oldSource = this.source;\n for (let i = 0, ii = behaviors.length; i < ii; ++i) {\n behaviors[i].unbind(oldSource);\n }\n }\n /**\n * Binds a view's behaviors to its binding source.\n * @param source - The binding source for the view's binding behaviors.\n * @param context - The execution context to run the behaviors within.\n */\n bind(source, context) {\n const behaviors = this.behaviors;\n if (this.source === source) {\n return;\n } else if (this.source !== null) {\n const oldSource = this.source;\n this.source = source;\n this.context = context;\n for (let i = 0, ii = behaviors.length; i < ii; ++i) {\n const current = behaviors[i];\n current.unbind(oldSource);\n current.bind(source, context);\n }\n } else {\n this.source = source;\n this.context = context;\n for (let i = 0, ii = behaviors.length; i < ii; ++i) {\n behaviors[i].bind(source, context);\n }\n }\n }\n /**\n * Unbinds a view's behaviors from its binding source.\n */\n unbind() {\n if (this.source === null) {\n return;\n }\n const behaviors = this.behaviors;\n const oldSource = this.source;\n for (let i = 0, ii = behaviors.length; i < ii; ++i) {\n behaviors[i].unbind(oldSource);\n }\n this.source = null;\n }\n /**\n * Efficiently disposes of a contiguous range of synthetic view instances.\n * @param views - A contiguous range of views to be disposed.\n */\n static disposeContiguousBatch(views) {\n if (views.length === 0) {\n return;\n }\n range.setStartBefore(views[0].firstChild);\n range.setEndAfter(views[views.length - 1].lastChild);\n range.deleteContents();\n for (let i = 0, ii = views.length; i < ii; ++i) {\n const view = views[i];\n const behaviors = view.behaviors;\n const oldSource = view.source;\n for (let j = 0, jj = behaviors.length; j < jj; ++j) {\n behaviors[j].unbind(oldSource);\n }\n }\n }\n}\n\n/**\n * A template capable of creating HTMLView instances or rendering directly to DOM.\n * @public\n */\n/* eslint-disable-next-line @typescript-eslint/no-unused-vars */\nclass ViewTemplate {\n /**\n * Creates an instance of ViewTemplate.\n * @param html - The html representing what this template will instantiate, including placeholders for directives.\n * @param directives - The directives that will be connected to placeholders in the html.\n */\n constructor(html, directives) {\n this.behaviorCount = 0;\n this.hasHostBehaviors = false;\n this.fragment = null;\n this.targetOffset = 0;\n this.viewBehaviorFactories = null;\n this.hostBehaviorFactories = null;\n this.html = html;\n this.directives = directives;\n }\n /**\n * Creates an HTMLView instance based on this template definition.\n * @param hostBindingTarget - The element that host behaviors will be bound to.\n */\n create(hostBindingTarget) {\n if (this.fragment === null) {\n let template;\n const html = this.html;\n if (typeof html === \"string\") {\n template = document.createElement(\"template\");\n template.innerHTML = DOM.createHTML(html);\n const fec = template.content.firstElementChild;\n if (fec !== null && fec.tagName === \"TEMPLATE\") {\n template = fec;\n }\n } else {\n template = html;\n }\n const result = compileTemplate(template, this.directives);\n this.fragment = result.fragment;\n this.viewBehaviorFactories = result.viewBehaviorFactories;\n this.hostBehaviorFactories = result.hostBehaviorFactories;\n this.targetOffset = result.targetOffset;\n this.behaviorCount = this.viewBehaviorFactories.length + this.hostBehaviorFactories.length;\n this.hasHostBehaviors = this.hostBehaviorFactories.length > 0;\n }\n const fragment = this.fragment.cloneNode(true);\n const viewFactories = this.viewBehaviorFactories;\n const behaviors = new Array(this.behaviorCount);\n const walker = DOM.createTemplateWalker(fragment);\n let behaviorIndex = 0;\n let targetIndex = this.targetOffset;\n let node = walker.nextNode();\n for (let ii = viewFactories.length; behaviorIndex < ii; ++behaviorIndex) {\n const factory = viewFactories[behaviorIndex];\n const factoryIndex = factory.targetIndex;\n while (node !== null) {\n if (targetIndex === factoryIndex) {\n behaviors[behaviorIndex] = factory.createBehavior(node);\n break;\n } else {\n node = walker.nextNode();\n targetIndex++;\n }\n }\n }\n if (this.hasHostBehaviors) {\n const hostFactories = this.hostBehaviorFactories;\n for (let i = 0, ii = hostFactories.length; i < ii; ++i, ++behaviorIndex) {\n behaviors[behaviorIndex] = hostFactories[i].createBehavior(hostBindingTarget);\n }\n }\n return new HTMLView(fragment, behaviors);\n }\n /**\n * Creates an HTMLView from this template, binds it to the source, and then appends it to the host.\n * @param source - The data source to bind the template to.\n * @param host - The Element where the template will be rendered.\n * @param hostBindingTarget - An HTML element to target the host bindings at if different from the\n * host that the template is being attached to.\n */\n render(source, host, hostBindingTarget) {\n if (typeof host === \"string\") {\n host = document.getElementById(host);\n }\n if (hostBindingTarget === void 0) {\n hostBindingTarget = host;\n }\n const view = this.create(hostBindingTarget);\n view.bind(source, defaultExecutionContext);\n view.appendTo(host);\n return view;\n }\n}\n// Much thanks to LitHTML for working this out!\nconst lastAttributeNameRegex = /* eslint-disable-next-line no-control-regex */\n/([ \\x09\\x0a\\x0c\\x0d])([^\\0-\\x1F\\x7F-\\x9F \"'>=/]+)([ \\x09\\x0a\\x0c\\x0d]*=[ \\x09\\x0a\\x0c\\x0d]*(?:[^ \\x09\\x0a\\x0c\\x0d\"'`<>=]*|\"[^\"]*|'[^']*))$/;\n/**\n * Transforms a template literal string into a renderable ViewTemplate.\n * @param strings - The string fragments that are interpolated with the values.\n * @param values - The values that are interpolated with the string fragments.\n * @remarks\n * The html helper supports interpolation of strings, numbers, binding expressions,\n * other template instances, and Directive instances.\n * @public\n */\nfunction html(strings, ...values) {\n const directives = [];\n let html = \"\";\n for (let i = 0, ii = strings.length - 1; i < ii; ++i) {\n const currentString = strings[i];\n let value = values[i];\n html += currentString;\n if (value instanceof ViewTemplate) {\n const template = value;\n value = () => template;\n }\n if (typeof value === \"function\") {\n value = new HTMLBindingDirective(value);\n }\n if (value instanceof TargetedHTMLDirective) {\n const match = lastAttributeNameRegex.exec(currentString);\n if (match !== null) {\n value.targetName = match[2];\n }\n }\n if (value instanceof HTMLDirective) {\n // Since not all values are directives, we can't use i\n // as the index for the placeholder. Instead, we need to\n // use directives.length to get the next index.\n html += value.createPlaceholder(directives.length);\n directives.push(value);\n } else {\n html += value;\n }\n }\n html += strings[strings.length - 1];\n return new ViewTemplate(html, directives);\n}\n\n/**\n * Represents styles that can be applied to a custom element.\n * @public\n */\nclass ElementStyles {\n constructor() {\n this.targets = new WeakSet();\n }\n /** @internal */\n addStylesTo(target) {\n this.targets.add(target);\n }\n /** @internal */\n removeStylesFrom(target) {\n this.targets.delete(target);\n }\n /** @internal */\n isAttachedTo(target) {\n return this.targets.has(target);\n }\n /**\n * Associates behaviors with this set of styles.\n * @param behaviors - The behaviors to associate.\n */\n withBehaviors(...behaviors) {\n this.behaviors = this.behaviors === null ? behaviors : this.behaviors.concat(behaviors);\n return this;\n }\n}\n/**\n * Create ElementStyles from ComposableStyles.\n */\nElementStyles.create = (() => {\n if (DOM.supportsAdoptedStyleSheets) {\n const styleSheetCache = new Map();\n return styles =>\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n new AdoptedStyleSheetsStyles(styles, styleSheetCache);\n }\n // eslint-disable-next-line @typescript-eslint/no-use-before-define\n return styles => new StyleElementStyles(styles);\n})();\nfunction reduceStyles(styles) {\n return styles.map(x => x instanceof ElementStyles ? reduceStyles(x.styles) : [x]).reduce((prev, curr) => prev.concat(curr), []);\n}\nfunction reduceBehaviors(styles) {\n return styles.map(x => x instanceof ElementStyles ? x.behaviors : null).reduce((prev, curr) => {\n if (curr === null) {\n return prev;\n }\n if (prev === null) {\n prev = [];\n }\n return prev.concat(curr);\n }, null);\n}\nlet addAdoptedStyleSheets = (target, sheets) => {\n target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...sheets];\n};\nlet removeAdoptedStyleSheets = (target, sheets) => {\n target.adoptedStyleSheets = target.adoptedStyleSheets.filter(x => sheets.indexOf(x) === -1);\n};\nif (DOM.supportsAdoptedStyleSheets) {\n try {\n // Test if browser implementation uses FrozenArray.\n // If not, use push / splice to alter the stylesheets\n // in place. This circumvents a bug in Safari 16.4 where\n // periodically, assigning the array would previously\n // cause sheets to be removed.\n document.adoptedStyleSheets.push();\n document.adoptedStyleSheets.splice();\n addAdoptedStyleSheets = (target, sheets) => {\n target.adoptedStyleSheets.push(...sheets);\n };\n removeAdoptedStyleSheets = (target, sheets) => {\n for (const sheet of sheets) {\n const index = target.adoptedStyleSheets.indexOf(sheet);\n if (index !== -1) {\n target.adoptedStyleSheets.splice(index, 1);\n }\n }\n };\n } catch (e) {\n // Do nothing if an error is thrown, the default\n // case handles FrozenArray.\n }\n}\n/**\n * https://wicg.github.io/construct-stylesheets/\n * https://developers.google.com/web/updates/2019/02/constructable-stylesheets\n *\n * @internal\n */\nclass AdoptedStyleSheetsStyles extends ElementStyles {\n constructor(styles, styleSheetCache) {\n super();\n this.styles = styles;\n this.styleSheetCache = styleSheetCache;\n this._styleSheets = void 0;\n this.behaviors = reduceBehaviors(styles);\n }\n get styleSheets() {\n if (this._styleSheets === void 0) {\n const styles = this.styles;\n const styleSheetCache = this.styleSheetCache;\n this._styleSheets = reduceStyles(styles).map(x => {\n if (x instanceof CSSStyleSheet) {\n return x;\n }\n let sheet = styleSheetCache.get(x);\n if (sheet === void 0) {\n sheet = new CSSStyleSheet();\n sheet.replaceSync(x);\n styleSheetCache.set(x, sheet);\n }\n return sheet;\n });\n }\n return this._styleSheets;\n }\n addStylesTo(target) {\n addAdoptedStyleSheets(target, this.styleSheets);\n super.addStylesTo(target);\n }\n removeStylesFrom(target) {\n removeAdoptedStyleSheets(target, this.styleSheets);\n super.removeStylesFrom(target);\n }\n}\nlet styleClassId = 0;\nfunction getNextStyleClass() {\n return `fast-style-class-${++styleClassId}`;\n}\n/**\n * @internal\n */\nclass StyleElementStyles extends ElementStyles {\n constructor(styles) {\n super();\n this.styles = styles;\n this.behaviors = null;\n this.behaviors = reduceBehaviors(styles);\n this.styleSheets = reduceStyles(styles);\n this.styleClass = getNextStyleClass();\n }\n addStylesTo(target) {\n const styleSheets = this.styleSheets;\n const styleClass = this.styleClass;\n target = this.normalizeTarget(target);\n for (let i = 0; i < styleSheets.length; i++) {\n const element = document.createElement(\"style\");\n element.innerHTML = styleSheets[i];\n element.className = styleClass;\n target.append(element);\n }\n super.addStylesTo(target);\n }\n removeStylesFrom(target) {\n target = this.normalizeTarget(target);\n const styles = target.querySelectorAll(`.${this.styleClass}`);\n for (let i = 0, ii = styles.length; i < ii; ++i) {\n target.removeChild(styles[i]);\n }\n super.removeStylesFrom(target);\n }\n isAttachedTo(target) {\n return super.isAttachedTo(this.normalizeTarget(target));\n }\n normalizeTarget(target) {\n return target === document ? document.body : target;\n }\n}\n\n/**\n * Metadata used to configure a custom attribute's behavior.\n * @public\n */\nconst AttributeConfiguration = Object.freeze({\n /**\n * Locates all attribute configurations associated with a type.\n */\n locate: createMetadataLocator()\n});\n/**\n * A {@link ValueConverter} that converts to and from `boolean` values.\n * @remarks\n * Used automatically when the `boolean` {@link AttributeMode} is selected.\n * @public\n */\nconst booleanConverter = {\n toView(value) {\n return value ? \"true\" : \"false\";\n },\n fromView(value) {\n if (value === null || value === void 0 || value === \"false\" || value === false || value === 0) {\n return false;\n }\n return true;\n }\n};\n/**\n * A {@link ValueConverter} that converts to and from `number` values.\n * @remarks\n * This converter allows for nullable numbers, returning `null` if the\n * input was `null`, `undefined`, or `NaN`.\n * @public\n */\nconst nullableNumberConverter = {\n toView(value) {\n if (value === null || value === undefined) {\n return null;\n }\n const number = value * 1;\n return isNaN(number) ? null : number.toString();\n },\n fromView(value) {\n if (value === null || value === undefined) {\n return null;\n }\n const number = value * 1;\n return isNaN(number) ? null : number;\n }\n};\n/**\n * An implementation of {@link Accessor} that supports reactivity,\n * change callbacks, attribute reflection, and type conversion for\n * custom elements.\n * @public\n */\nclass AttributeDefinition {\n /**\n * Creates an instance of AttributeDefinition.\n * @param Owner - The class constructor that owns this attribute.\n * @param name - The name of the property associated with the attribute.\n * @param attribute - The name of the attribute in HTML.\n * @param mode - The {@link AttributeMode} that describes the behavior of this attribute.\n * @param converter - A {@link ValueConverter} that integrates with the property getter/setter\n * to convert values to and from a DOM string.\n */\n constructor(Owner, name, attribute = name.toLowerCase(), mode = \"reflect\", converter) {\n this.guards = new Set();\n this.Owner = Owner;\n this.name = name;\n this.attribute = attribute;\n this.mode = mode;\n this.converter = converter;\n this.fieldName = `_${name}`;\n this.callbackName = `${name}Changed`;\n this.hasCallback = this.callbackName in Owner.prototype;\n if (mode === \"boolean\" && converter === void 0) {\n this.converter = booleanConverter;\n }\n }\n /**\n * Sets the value of the attribute/property on the source element.\n * @param source - The source element to access.\n * @param value - The value to set the attribute/property to.\n */\n setValue(source, newValue) {\n const oldValue = source[this.fieldName];\n const converter = this.converter;\n if (converter !== void 0) {\n newValue = converter.fromView(newValue);\n }\n if (oldValue !== newValue) {\n source[this.fieldName] = newValue;\n this.tryReflectToAttribute(source);\n if (this.hasCallback) {\n source[this.callbackName](oldValue, newValue);\n }\n source.$fastController.notify(this.name);\n }\n }\n /**\n * Gets the value of the attribute/property on the source element.\n * @param source - The source element to access.\n */\n getValue(source) {\n Observable.track(source, this.name);\n return source[this.fieldName];\n }\n /** @internal */\n onAttributeChangedCallback(element, value) {\n if (this.guards.has(element)) {\n return;\n }\n this.guards.add(element);\n this.setValue(element, value);\n this.guards.delete(element);\n }\n tryReflectToAttribute(element) {\n const mode = this.mode;\n const guards = this.guards;\n if (guards.has(element) || mode === \"fromView\") {\n return;\n }\n DOM.queueUpdate(() => {\n guards.add(element);\n const latestValue = element[this.fieldName];\n switch (mode) {\n case \"reflect\":\n const converter = this.converter;\n DOM.setAttribute(element, this.attribute, converter !== void 0 ? converter.toView(latestValue) : latestValue);\n break;\n case \"boolean\":\n DOM.setBooleanAttribute(element, this.attribute, latestValue);\n break;\n }\n guards.delete(element);\n });\n }\n /**\n * Collects all attribute definitions associated with the owner.\n * @param Owner - The class constructor to collect attribute for.\n * @param attributeLists - Any existing attributes to collect and merge with those associated with the owner.\n * @internal\n */\n static collect(Owner, ...attributeLists) {\n const attributes = [];\n attributeLists.push(AttributeConfiguration.locate(Owner));\n for (let i = 0, ii = attributeLists.length; i < ii; ++i) {\n const list = attributeLists[i];\n if (list === void 0) {\n continue;\n }\n for (let j = 0, jj = list.length; j < jj; ++j) {\n const config = list[j];\n if (typeof config === \"string\") {\n attributes.push(new AttributeDefinition(Owner, config));\n } else {\n attributes.push(new AttributeDefinition(Owner, config.property, config.attribute, config.mode, config.converter));\n }\n }\n }\n return attributes;\n }\n}\nfunction attr(configOrTarget, prop) {\n let config;\n function decorator($target, $prop) {\n if (arguments.length > 1) {\n // Non invocation:\n // - @attr\n // Invocation with or w/o opts:\n // - @attr()\n // - @attr({...opts})\n config.property = $prop;\n }\n AttributeConfiguration.locate($target.constructor).push(config);\n }\n if (arguments.length > 1) {\n // Non invocation:\n // - @attr\n config = {};\n decorator(configOrTarget, prop);\n return;\n }\n // Invocation with or w/o opts:\n // - @attr()\n // - @attr({...opts})\n config = configOrTarget === void 0 ? {} : configOrTarget;\n return decorator;\n}\n\nconst defaultShadowOptions = {\n mode: \"open\"\n};\nconst defaultElementOptions = {};\nconst fastRegistry = FAST.getById(4 /* elementRegistry */, () => {\n const typeToDefinition = new Map();\n return Object.freeze({\n register(definition) {\n if (typeToDefinition.has(definition.type)) {\n return false;\n }\n typeToDefinition.set(definition.type, definition);\n return true;\n },\n getByType(key) {\n return typeToDefinition.get(key);\n }\n });\n});\n/**\n * Defines metadata for a FASTElement.\n * @public\n */\nclass FASTElementDefinition {\n /**\n * Creates an instance of FASTElementDefinition.\n * @param type - The type this definition is being created for.\n * @param nameOrConfig - The name of the element to define or a config object\n * that describes the element to define.\n */\n constructor(type, nameOrConfig = type.definition) {\n if (typeof nameOrConfig === \"string\") {\n nameOrConfig = {\n name: nameOrConfig\n };\n }\n this.type = type;\n this.name = nameOrConfig.name;\n this.template = nameOrConfig.template;\n const attributes = AttributeDefinition.collect(type, nameOrConfig.attributes);\n const observedAttributes = new Array(attributes.length);\n const propertyLookup = {};\n const attributeLookup = {};\n for (let i = 0, ii = attributes.length; i < ii; ++i) {\n const current = attributes[i];\n observedAttributes[i] = current.attribute;\n propertyLookup[current.name] = current;\n attributeLookup[current.attribute] = current;\n }\n this.attributes = attributes;\n this.observedAttributes = observedAttributes;\n this.propertyLookup = propertyLookup;\n this.attributeLookup = attributeLookup;\n this.shadowOptions = nameOrConfig.shadowOptions === void 0 ? defaultShadowOptions : nameOrConfig.shadowOptions === null ? void 0 : Object.assign(Object.assign({}, defaultShadowOptions), nameOrConfig.shadowOptions);\n this.elementOptions = nameOrConfig.elementOptions === void 0 ? defaultElementOptions : Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);\n this.styles = nameOrConfig.styles === void 0 ? void 0 : Array.isArray(nameOrConfig.styles) ? ElementStyles.create(nameOrConfig.styles) : nameOrConfig.styles instanceof ElementStyles ? nameOrConfig.styles : ElementStyles.create([nameOrConfig.styles]);\n }\n /**\n * Indicates if this element has been defined in at least one registry.\n */\n get isDefined() {\n return !!fastRegistry.getByType(this.type);\n }\n /**\n * Defines a custom element based on this definition.\n * @param registry - The element registry to define the element in.\n */\n define(registry = customElements) {\n const type = this.type;\n if (fastRegistry.register(this)) {\n const attributes = this.attributes;\n const proto = type.prototype;\n for (let i = 0, ii = attributes.length; i < ii; ++i) {\n Observable.defineProperty(proto, attributes[i]);\n }\n Reflect.defineProperty(type, \"observedAttributes\", {\n value: this.observedAttributes,\n enumerable: true\n });\n }\n if (!registry.get(this.name)) {\n registry.define(this.name, type, this.elementOptions);\n }\n return this;\n }\n}\n/**\n * Gets the element definition associated with the specified type.\n * @param type - The custom element type to retrieve the definition for.\n */\nFASTElementDefinition.forType = fastRegistry.getByType;\n\nconst shadowRoots = new WeakMap();\nconst defaultEventOptions = {\n bubbles: true,\n composed: true,\n cancelable: true\n};\nfunction getShadowRoot(element) {\n return element.shadowRoot || shadowRoots.get(element) || null;\n}\n/**\n * Controls the lifecycle and rendering of a `FASTElement`.\n * @public\n */\nclass Controller extends PropertyChangeNotifier {\n /**\n * Creates a Controller to control the specified element.\n * @param element - The element to be controlled by this controller.\n * @param definition - The element definition metadata that instructs this\n * controller in how to handle rendering and other platform integrations.\n * @internal\n */\n constructor(element, definition) {\n super(element);\n this.boundObservables = null;\n this.behaviors = null;\n this.needsInitialization = true;\n this._template = null;\n this._styles = null;\n this._isConnected = false;\n /**\n * This allows Observable.getNotifier(...) to return the Controller\n * when the notifier for the Controller itself is being requested. The\n * result is that the Observable system does not need to create a separate\n * instance of Notifier for observables on the Controller. The component and\n * the controller will now share the same notifier, removing one-object construct\n * per web component instance.\n */\n this.$fastController = this;\n /**\n * The view associated with the custom element.\n * @remarks\n * If `null` then the element is managing its own rendering.\n */\n this.view = null;\n this.element = element;\n this.definition = definition;\n const shadowOptions = definition.shadowOptions;\n if (shadowOptions !== void 0) {\n const shadowRoot = element.attachShadow(shadowOptions);\n if (shadowOptions.mode === \"closed\") {\n shadowRoots.set(element, shadowRoot);\n }\n }\n // Capture any observable values that were set by the binding engine before\n // the browser upgraded the element. Then delete the property since it will\n // shadow the getter/setter that is required to make the observable operate.\n // Later, in the connect callback, we'll re-apply the values.\n const accessors = Observable.getAccessors(element);\n if (accessors.length > 0) {\n const boundObservables = this.boundObservables = Object.create(null);\n for (let i = 0, ii = accessors.length; i < ii; ++i) {\n const propertyName = accessors[i].name;\n const value = element[propertyName];\n if (value !== void 0) {\n delete element[propertyName];\n boundObservables[propertyName] = value;\n }\n }\n }\n }\n /**\n * Indicates whether or not the custom element has been\n * connected to the document.\n */\n get isConnected() {\n Observable.track(this, \"isConnected\");\n return this._isConnected;\n }\n setIsConnected(value) {\n this._isConnected = value;\n Observable.notify(this, \"isConnected\");\n }\n /**\n * Gets/sets the template used to render the component.\n * @remarks\n * This value can only be accurately read after connect but can be set at any time.\n */\n get template() {\n return this._template;\n }\n set template(value) {\n if (this._template === value) {\n return;\n }\n this._template = value;\n if (!this.needsInitialization) {\n this.renderTemplate(value);\n }\n }\n /**\n * Gets/sets the primary styles used for the component.\n * @remarks\n * This value can only be accurately read after connect but can be set at any time.\n */\n get styles() {\n return this._styles;\n }\n set styles(value) {\n if (this._styles === value) {\n return;\n }\n if (this._styles !== null) {\n this.removeStyles(this._styles);\n }\n this._styles = value;\n if (!this.needsInitialization && value !== null) {\n this.addStyles(value);\n }\n }\n /**\n * Adds styles to this element. Providing an HTMLStyleElement will attach the element instance to the shadowRoot.\n * @param styles - The styles to add.\n */\n addStyles(styles) {\n const target = getShadowRoot(this.element) || this.element.getRootNode();\n if (styles instanceof HTMLStyleElement) {\n target.append(styles);\n } else if (!styles.isAttachedTo(target)) {\n const sourceBehaviors = styles.behaviors;\n styles.addStylesTo(target);\n if (sourceBehaviors !== null) {\n this.addBehaviors(sourceBehaviors);\n }\n }\n }\n /**\n * Removes styles from this element. Providing an HTMLStyleElement will detach the element instance from the shadowRoot.\n * @param styles - the styles to remove.\n */\n removeStyles(styles) {\n const target = getShadowRoot(this.element) || this.element.getRootNode();\n if (styles instanceof HTMLStyleElement) {\n target.removeChild(styles);\n } else if (styles.isAttachedTo(target)) {\n const sourceBehaviors = styles.behaviors;\n styles.removeStylesFrom(target);\n if (sourceBehaviors !== null) {\n this.removeBehaviors(sourceBehaviors);\n }\n }\n }\n /**\n * Adds behaviors to this element.\n * @param behaviors - The behaviors to add.\n */\n addBehaviors(behaviors) {\n const targetBehaviors = this.behaviors || (this.behaviors = new Map());\n const length = behaviors.length;\n const behaviorsToBind = [];\n for (let i = 0; i < length; ++i) {\n const behavior = behaviors[i];\n if (targetBehaviors.has(behavior)) {\n targetBehaviors.set(behavior, targetBehaviors.get(behavior) + 1);\n } else {\n targetBehaviors.set(behavior, 1);\n behaviorsToBind.push(behavior);\n }\n }\n if (this._isConnected) {\n const element = this.element;\n for (let i = 0; i < behaviorsToBind.length; ++i) {\n behaviorsToBind[i].bind(element, defaultExecutionContext);\n }\n }\n }\n /**\n * Removes behaviors from this element.\n * @param behaviors - The behaviors to remove.\n * @param force - Forces unbinding of behaviors.\n */\n removeBehaviors(behaviors, force = false) {\n const targetBehaviors = this.behaviors;\n if (targetBehaviors === null) {\n return;\n }\n const length = behaviors.length;\n const behaviorsToUnbind = [];\n for (let i = 0; i < length; ++i) {\n const behavior = behaviors[i];\n if (targetBehaviors.has(behavior)) {\n const count = targetBehaviors.get(behavior) - 1;\n count === 0 || force ? targetBehaviors.delete(behavior) && behaviorsToUnbind.push(behavior) : targetBehaviors.set(behavior, count);\n }\n }\n if (this._isConnected) {\n const element = this.element;\n for (let i = 0; i < behaviorsToUnbind.length; ++i) {\n behaviorsToUnbind[i].unbind(element);\n }\n }\n }\n /**\n * Runs connected lifecycle behavior on the associated element.\n */\n onConnectedCallback() {\n if (this._isConnected) {\n return;\n }\n const element = this.element;\n if (this.needsInitialization) {\n this.finishInitialization();\n } else if (this.view !== null) {\n this.view.bind(element, defaultExecutionContext);\n }\n const behaviors = this.behaviors;\n if (behaviors !== null) {\n for (const [behavior] of behaviors) {\n behavior.bind(element, defaultExecutionContext);\n }\n }\n this.setIsConnected(true);\n }\n /**\n * Runs disconnected lifecycle behavior on the associated element.\n */\n onDisconnectedCallback() {\n if (!this._isConnected) {\n return;\n }\n this.setIsConnected(false);\n const view = this.view;\n if (view !== null) {\n view.unbind();\n }\n const behaviors = this.behaviors;\n if (behaviors !== null) {\n const element = this.element;\n for (const [behavior] of behaviors) {\n behavior.unbind(element);\n }\n }\n }\n /**\n * Runs the attribute changed callback for the associated element.\n * @param name - The name of the attribute that changed.\n * @param oldValue - The previous value of the attribute.\n * @param newValue - The new value of the attribute.\n */\n onAttributeChangedCallback(name, oldValue, newValue) {\n const attrDef = this.definition.attributeLookup[name];\n if (attrDef !== void 0) {\n attrDef.onAttributeChangedCallback(this.element, newValue);\n }\n }\n /**\n * Emits a custom HTML event.\n * @param type - The type name of the event.\n * @param detail - The event detail object to send with the event.\n * @param options - The event options. By default bubbles and composed.\n * @remarks\n * Only emits events if connected.\n */\n emit(type, detail, options) {\n if (this._isConnected) {\n return this.element.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({\n detail\n }, defaultEventOptions), options)));\n }\n return false;\n }\n finishInitialization() {\n const element = this.element;\n const boundObservables = this.boundObservables;\n // If we have any observables that were bound, re-apply their values.\n if (boundObservables !== null) {\n const propertyNames = Object.keys(boundObservables);\n for (let i = 0, ii = propertyNames.length; i < ii; ++i) {\n const propertyName = propertyNames[i];\n element[propertyName] = boundObservables[propertyName];\n }\n this.boundObservables = null;\n }\n const definition = this.definition;\n // 1. Template overrides take top precedence.\n if (this._template === null) {\n if (this.element.resolveTemplate) {\n // 2. Allow for element instance overrides next.\n this._template = this.element.resolveTemplate();\n } else if (definition.template) {\n // 3. Default to the static definition.\n this._template = definition.template || null;\n }\n }\n // If we have a template after the above process, render it.\n // If there's no template, then the element author has opted into\n // custom rendering and they will managed the shadow root's content themselves.\n if (this._template !== null) {\n this.renderTemplate(this._template);\n }\n // 1. Styles overrides take top precedence.\n if (this._styles === null) {\n if (this.element.resolveStyles) {\n // 2. Allow for element instance overrides next.\n this._styles = this.element.resolveStyles();\n } else if (definition.styles) {\n // 3. Default to the static definition.\n this._styles = definition.styles || null;\n }\n }\n // If we have styles after the above process, add them.\n if (this._styles !== null) {\n this.addStyles(this._styles);\n }\n this.needsInitialization = false;\n }\n renderTemplate(template) {\n const element = this.element;\n // When getting the host to render to, we start by looking\n // up the shadow root. If there isn't one, then that means\n // we're doing a Light DOM render to the element's direct children.\n const host = getShadowRoot(element) || element;\n if (this.view !== null) {\n // If there's already a view, we need to unbind and remove through dispose.\n this.view.dispose();\n this.view = null;\n } else if (!this.needsInitialization) {\n // If there was previous custom rendering, we need to clear out the host.\n DOM.removeChildNodes(host);\n }\n if (template) {\n // If a new template was provided, render it.\n this.view = template.render(element, host, element);\n }\n }\n /**\n * Locates or creates a controller for the specified element.\n * @param element - The element to return the controller for.\n * @remarks\n * The specified element must have a {@link FASTElementDefinition}\n * registered either through the use of the {@link customElement}\n * decorator or a call to `FASTElement.define`.\n */\n static forCustomElement(element) {\n const controller = element.$fastController;\n if (controller !== void 0) {\n return controller;\n }\n const definition = FASTElementDefinition.forType(element.constructor);\n if (definition === void 0) {\n throw new Error(\"Missing FASTElement definition.\");\n }\n return element.$fastController = new Controller(element, definition);\n }\n}\n\n/* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */\nfunction createFASTElement(BaseType) {\n return class extends BaseType {\n constructor() {\n /* eslint-disable-next-line */\n super();\n Controller.forCustomElement(this);\n }\n $emit(type, detail, options) {\n return this.$fastController.emit(type, detail, options);\n }\n connectedCallback() {\n this.$fastController.onConnectedCallback();\n }\n disconnectedCallback() {\n this.$fastController.onDisconnectedCallback();\n }\n attributeChangedCallback(name, oldValue, newValue) {\n this.$fastController.onAttributeChangedCallback(name, oldValue, newValue);\n }\n };\n}\n/**\n * A minimal base class for FASTElements that also provides\n * static helpers for working with FASTElements.\n * @public\n */\nconst FASTElement = Object.assign(createFASTElement(HTMLElement), {\n /**\n * Creates a new FASTElement base class inherited from the\n * provided base type.\n * @param BaseType - The base element type to inherit from.\n */\n from(BaseType) {\n return createFASTElement(BaseType);\n },\n /**\n * Defines a platform custom element based on the provided type and definition.\n * @param type - The custom element type to define.\n * @param nameOrDef - The name of the element to define or a definition object\n * that describes the element to define.\n */\n define(type, nameOrDef) {\n return new FASTElementDefinition(type, nameOrDef).define().type;\n }\n});\n\n/**\n * Directive for use in {@link css}.\n *\n * @public\n */\nclass CSSDirective {\n /**\n * Creates a CSS fragment to interpolate into the CSS document.\n * @returns - the string to interpolate into CSS\n */\n createCSS() {\n return \"\";\n }\n /**\n * Creates a behavior to bind to the host element.\n * @returns - the behavior to bind to the host element, or undefined.\n */\n createBehavior() {\n return undefined;\n }\n}\n\nfunction collectStyles(strings, values) {\n const styles = [];\n let cssString = \"\";\n const behaviors = [];\n for (let i = 0, ii = strings.length - 1; i < ii; ++i) {\n cssString += strings[i];\n let value = values[i];\n if (value instanceof CSSDirective) {\n const behavior = value.createBehavior();\n value = value.createCSS();\n if (behavior) {\n behaviors.push(behavior);\n }\n }\n if (value instanceof ElementStyles || value instanceof CSSStyleSheet) {\n if (cssString.trim() !== \"\") {\n styles.push(cssString);\n cssString = \"\";\n }\n styles.push(value);\n } else {\n cssString += value;\n }\n }\n cssString += strings[strings.length - 1];\n if (cssString.trim() !== \"\") {\n styles.push(cssString);\n }\n return {\n styles,\n behaviors\n };\n}\n/**\n * Transforms a template literal string into styles.\n * @param strings - The string fragments that are interpolated with the values.\n * @param values - The values that are interpolated with the string fragments.\n * @remarks\n * The css helper supports interpolation of strings and ElementStyle instances.\n * @public\n */\nfunction css(strings, ...values) {\n const {\n styles,\n behaviors\n } = collectStyles(strings, values);\n const elementStyles = ElementStyles.create(styles);\n if (behaviors.length) {\n elementStyles.withBehaviors(...behaviors);\n }\n return elementStyles;\n}\nclass CSSPartial extends CSSDirective {\n constructor(styles, behaviors) {\n super();\n this.behaviors = behaviors;\n this.css = \"\";\n const stylesheets = styles.reduce((accumulated, current) => {\n if (typeof current === \"string\") {\n this.css += current;\n } else {\n accumulated.push(current);\n }\n return accumulated;\n }, []);\n if (stylesheets.length) {\n this.styles = ElementStyles.create(stylesheets);\n }\n }\n createBehavior() {\n return this;\n }\n createCSS() {\n return this.css;\n }\n bind(el) {\n if (this.styles) {\n el.$fastController.addStyles(this.styles);\n }\n if (this.behaviors.length) {\n el.$fastController.addBehaviors(this.behaviors);\n }\n }\n unbind(el) {\n if (this.styles) {\n el.$fastController.removeStyles(this.styles);\n }\n if (this.behaviors.length) {\n el.$fastController.removeBehaviors(this.behaviors);\n }\n }\n}\n/**\n * Transforms a template literal string into partial CSS.\n * @param strings - The string fragments that are interpolated with the values.\n * @param values - The values that are interpolated with the string fragments.\n * @public\n */\nfunction cssPartial(strings, ...values) {\n const {\n styles,\n behaviors\n } = collectStyles(strings, values);\n return new CSSPartial(styles, behaviors);\n}\n\n/** @internal */\nfunction newSplice(index, removed, addedCount) {\n return {\n index: index,\n removed: removed,\n addedCount: addedCount\n };\n}\nconst EDIT_LEAVE = 0;\nconst EDIT_UPDATE = 1;\nconst EDIT_ADD = 2;\nconst EDIT_DELETE = 3;\n// Note: This function is *based* on the computation of the Levenshtein\n// \"edit\" distance. The one change is that \"updates\" are treated as two\n// edits - not one. With Array splices, an update is really a delete\n// followed by an add. By retaining this, we optimize for \"keeping\" the\n// maximum array items in the original array. For example:\n//\n// 'xxxx123' -> '123yyyy'\n//\n// With 1-edit updates, the shortest path would be just to update all seven\n// characters. With 2-edit updates, we delete 4, leave 3, and add 4. This\n// leaves the substring '123' intact.\nfunction calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd) {\n // \"Deletion\" columns\n const rowCount = oldEnd - oldStart + 1;\n const columnCount = currentEnd - currentStart + 1;\n const distances = new Array(rowCount);\n let north;\n let west;\n // \"Addition\" rows. Initialize null column.\n for (let i = 0; i < rowCount; ++i) {\n distances[i] = new Array(columnCount);\n distances[i][0] = i;\n }\n // Initialize null row\n for (let j = 0; j < columnCount; ++j) {\n distances[0][j] = j;\n }\n for (let i = 1; i < rowCount; ++i) {\n for (let j = 1; j < columnCount; ++j) {\n if (current[currentStart + j - 1] === old[oldStart + i - 1]) {\n distances[i][j] = distances[i - 1][j - 1];\n } else {\n north = distances[i - 1][j] + 1;\n west = distances[i][j - 1] + 1;\n distances[i][j] = north < west ? north : west;\n }\n }\n }\n return distances;\n}\n// This starts at the final weight, and walks \"backward\" by finding\n// the minimum previous weight recursively until the origin of the weight\n// matrix.\nfunction spliceOperationsFromEditDistances(distances) {\n let i = distances.length - 1;\n let j = distances[0].length - 1;\n let current = distances[i][j];\n const edits = [];\n while (i > 0 || j > 0) {\n if (i === 0) {\n edits.push(EDIT_ADD);\n j--;\n continue;\n }\n if (j === 0) {\n edits.push(EDIT_DELETE);\n i--;\n continue;\n }\n const northWest = distances[i - 1][j - 1];\n const west = distances[i - 1][j];\n const north = distances[i][j - 1];\n let min;\n if (west < north) {\n min = west < northWest ? west : northWest;\n } else {\n min = north < northWest ? north : northWest;\n }\n if (min === northWest) {\n if (northWest === current) {\n edits.push(EDIT_LEAVE);\n } else {\n edits.push(EDIT_UPDATE);\n current = northWest;\n }\n i--;\n j--;\n } else if (min === west) {\n edits.push(EDIT_DELETE);\n i--;\n current = west;\n } else {\n edits.push(EDIT_ADD);\n j--;\n current = north;\n }\n }\n edits.reverse();\n return edits;\n}\nfunction sharedPrefix(current, old, searchLength) {\n for (let i = 0; i < searchLength; ++i) {\n if (current[i] !== old[i]) {\n return i;\n }\n }\n return searchLength;\n}\nfunction sharedSuffix(current, old, searchLength) {\n let index1 = current.length;\n let index2 = old.length;\n let count = 0;\n while (count < searchLength && current[--index1] === old[--index2]) {\n count++;\n }\n return count;\n}\nfunction intersect(start1, end1, start2, end2) {\n // Disjoint\n if (end1 < start2 || end2 < start1) {\n return -1;\n }\n // Adjacent\n if (end1 === start2 || end2 === start1) {\n return 0;\n }\n // Non-zero intersect, span1 first\n if (start1 < start2) {\n if (end1 < end2) {\n return end1 - start2; // Overlap\n }\n return end2 - start2; // Contained\n }\n // Non-zero intersect, span2 first\n if (end2 < end1) {\n return end2 - start1; // Overlap\n }\n return end1 - start1; // Contained\n}\n/**\n * Splice Projection functions:\n *\n * A splice map is a representation of how a previous array of items\n * was transformed into a new array of items. Conceptually it is a list of\n * tuples of\n *\n * \n *\n * which are kept in ascending index order of. The tuple represents that at\n * the |index|, |removed| sequence of items were removed, and counting forward\n * from |index|, |addedCount| items were added.\n */\n/**\n * @internal\n * @remarks\n * Lacking individual splice mutation information, the minimal set of\n * splices can be synthesized given the previous state and final state of an\n * array. The basic approach is to calculate the edit distance matrix and\n * choose the shortest path through it.\n *\n * Complexity: O(l * p)\n * l: The length of the current array\n * p: The length of the old array\n */\nfunction calcSplices(current, currentStart, currentEnd, old, oldStart, oldEnd) {\n let prefixCount = 0;\n let suffixCount = 0;\n const minLength = Math.min(currentEnd - currentStart, oldEnd - oldStart);\n if (currentStart === 0 && oldStart === 0) {\n prefixCount = sharedPrefix(current, old, minLength);\n }\n if (currentEnd === current.length && oldEnd === old.length) {\n suffixCount = sharedSuffix(current, old, minLength - prefixCount);\n }\n currentStart += prefixCount;\n oldStart += prefixCount;\n currentEnd -= suffixCount;\n oldEnd -= suffixCount;\n if (currentEnd - currentStart === 0 && oldEnd - oldStart === 0) {\n return emptyArray;\n }\n if (currentStart === currentEnd) {\n const splice = newSplice(currentStart, [], 0);\n while (oldStart < oldEnd) {\n splice.removed.push(old[oldStart++]);\n }\n return [splice];\n } else if (oldStart === oldEnd) {\n return [newSplice(currentStart, [], currentEnd - currentStart)];\n }\n const ops = spliceOperationsFromEditDistances(calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd));\n const splices = [];\n let splice = void 0;\n let index = currentStart;\n let oldIndex = oldStart;\n for (let i = 0; i < ops.length; ++i) {\n switch (ops[i]) {\n case EDIT_LEAVE:\n if (splice !== void 0) {\n splices.push(splice);\n splice = void 0;\n }\n index++;\n oldIndex++;\n break;\n case EDIT_UPDATE:\n if (splice === void 0) {\n splice = newSplice(index, [], 0);\n }\n splice.addedCount++;\n index++;\n splice.removed.push(old[oldIndex]);\n oldIndex++;\n break;\n case EDIT_ADD:\n if (splice === void 0) {\n splice = newSplice(index, [], 0);\n }\n splice.addedCount++;\n index++;\n break;\n case EDIT_DELETE:\n if (splice === void 0) {\n splice = newSplice(index, [], 0);\n }\n splice.removed.push(old[oldIndex]);\n oldIndex++;\n break;\n // no default\n }\n }\n if (splice !== void 0) {\n splices.push(splice);\n }\n return splices;\n}\nconst $push = Array.prototype.push;\nfunction mergeSplice(splices, index, removed, addedCount) {\n const splice = newSplice(index, removed, addedCount);\n let inserted = false;\n let insertionOffset = 0;\n for (let i = 0; i < splices.length; i++) {\n const current = splices[i];\n current.index += insertionOffset;\n if (inserted) {\n continue;\n }\n const intersectCount = intersect(splice.index, splice.index + splice.removed.length, current.index, current.index + current.addedCount);\n if (intersectCount >= 0) {\n // Merge the two splices\n splices.splice(i, 1);\n i--;\n insertionOffset -= current.addedCount - current.removed.length;\n splice.addedCount += current.addedCount - intersectCount;\n const deleteCount = splice.removed.length + current.removed.length - intersectCount;\n if (!splice.addedCount && !deleteCount) {\n // merged splice is a noop. discard.\n inserted = true;\n } else {\n let currentRemoved = current.removed;\n if (splice.index < current.index) {\n // some prefix of splice.removed is prepended to current.removed.\n const prepend = splice.removed.slice(0, current.index - splice.index);\n $push.apply(prepend, currentRemoved);\n currentRemoved = prepend;\n }\n if (splice.index + splice.removed.length > current.index + current.addedCount) {\n // some suffix of splice.removed is appended to current.removed.\n const append = splice.removed.slice(current.index + current.addedCount - splice.index);\n $push.apply(currentRemoved, append);\n }\n splice.removed = currentRemoved;\n if (current.index < splice.index) {\n splice.index = current.index;\n }\n }\n } else if (splice.index < current.index) {\n // Insert splice here.\n inserted = true;\n splices.splice(i, 0, splice);\n i++;\n const offset = splice.addedCount - splice.removed.length;\n current.index += offset;\n insertionOffset += offset;\n }\n }\n if (!inserted) {\n splices.push(splice);\n }\n}\nfunction createInitialSplices(changeRecords) {\n const splices = [];\n for (let i = 0, ii = changeRecords.length; i < ii; i++) {\n const record = changeRecords[i];\n mergeSplice(splices, record.index, record.removed, record.addedCount);\n }\n return splices;\n}\n/** @internal */\nfunction projectArraySplices(array, changeRecords) {\n let splices = [];\n const initialSplices = createInitialSplices(changeRecords);\n for (let i = 0, ii = initialSplices.length; i < ii; ++i) {\n const splice = initialSplices[i];\n if (splice.addedCount === 1 && splice.removed.length === 1) {\n if (splice.removed[0] !== array[splice.index]) {\n splices.push(splice);\n }\n continue;\n }\n splices = splices.concat(calcSplices(array, splice.index, splice.index + splice.addedCount, splice.removed, 0, splice.removed.length));\n }\n return splices;\n}\n\nlet arrayObservationEnabled = false;\nfunction adjustIndex(changeRecord, array) {\n let index = changeRecord.index;\n const arrayLength = array.length;\n if (index > arrayLength) {\n index = arrayLength - changeRecord.addedCount;\n } else if (index < 0) {\n index = arrayLength + changeRecord.removed.length + index - changeRecord.addedCount;\n }\n if (index < 0) {\n index = 0;\n }\n changeRecord.index = index;\n return changeRecord;\n}\nclass ArrayObserver extends SubscriberSet {\n constructor(source) {\n super(source);\n this.oldCollection = void 0;\n this.splices = void 0;\n this.needsQueue = true;\n this.call = this.flush;\n Reflect.defineProperty(source, \"$fastController\", {\n value: this,\n enumerable: false\n });\n }\n subscribe(subscriber) {\n this.flush();\n super.subscribe(subscriber);\n }\n addSplice(splice) {\n if (this.splices === void 0) {\n this.splices = [splice];\n } else {\n this.splices.push(splice);\n }\n if (this.needsQueue) {\n this.needsQueue = false;\n DOM.queueUpdate(this);\n }\n }\n reset(oldCollection) {\n this.oldCollection = oldCollection;\n if (this.needsQueue) {\n this.needsQueue = false;\n DOM.queueUpdate(this);\n }\n }\n flush() {\n const splices = this.splices;\n const oldCollection = this.oldCollection;\n if (splices === void 0 && oldCollection === void 0) {\n return;\n }\n this.needsQueue = true;\n this.splices = void 0;\n this.oldCollection = void 0;\n const finalSplices = oldCollection === void 0 ? projectArraySplices(this.source, splices) : calcSplices(this.source, 0, this.source.length, oldCollection, 0, oldCollection.length);\n this.notify(finalSplices);\n }\n}\n/* eslint-disable prefer-rest-params */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/**\n * Enables the array observation mechanism.\n * @remarks\n * Array observation is enabled automatically when using the\n * {@link RepeatDirective}, so calling this API manually is\n * not typically necessary.\n * @public\n */\nfunction enableArrayObservation() {\n if (arrayObservationEnabled) {\n return;\n }\n arrayObservationEnabled = true;\n Observable.setArrayObserverFactory(collection => {\n return new ArrayObserver(collection);\n });\n const proto = Array.prototype;\n // Don't patch Array if it has already been patched\n // by another copy of fast-element.\n if (proto.$fastPatch) {\n return;\n }\n Reflect.defineProperty(proto, \"$fastPatch\", {\n value: 1,\n enumerable: false\n });\n const pop = proto.pop;\n const push = proto.push;\n const reverse = proto.reverse;\n const shift = proto.shift;\n const sort = proto.sort;\n const splice = proto.splice;\n const unshift = proto.unshift;\n proto.pop = function () {\n const notEmpty = this.length > 0;\n const methodCallResult = pop.apply(this, arguments);\n const o = this.$fastController;\n if (o !== void 0 && notEmpty) {\n o.addSplice(newSplice(this.length, [methodCallResult], 0));\n }\n return methodCallResult;\n };\n proto.push = function () {\n const methodCallResult = push.apply(this, arguments);\n const o = this.$fastController;\n if (o !== void 0) {\n o.addSplice(adjustIndex(newSplice(this.length - arguments.length, [], arguments.length), this));\n }\n return methodCallResult;\n };\n proto.reverse = function () {\n let oldArray;\n const o = this.$fastController;\n if (o !== void 0) {\n o.flush();\n oldArray = this.slice();\n }\n const methodCallResult = reverse.apply(this, arguments);\n if (o !== void 0) {\n o.reset(oldArray);\n }\n return methodCallResult;\n };\n proto.shift = function () {\n const notEmpty = this.length > 0;\n const methodCallResult = shift.apply(this, arguments);\n const o = this.$fastController;\n if (o !== void 0 && notEmpty) {\n o.addSplice(newSplice(0, [methodCallResult], 0));\n }\n return methodCallResult;\n };\n proto.sort = function () {\n let oldArray;\n const o = this.$fastController;\n if (o !== void 0) {\n o.flush();\n oldArray = this.slice();\n }\n const methodCallResult = sort.apply(this, arguments);\n if (o !== void 0) {\n o.reset(oldArray);\n }\n return methodCallResult;\n };\n proto.splice = function () {\n const methodCallResult = splice.apply(this, arguments);\n const o = this.$fastController;\n if (o !== void 0) {\n o.addSplice(adjustIndex(newSplice(+arguments[0], methodCallResult, arguments.length > 2 ? arguments.length - 2 : 0), this));\n }\n return methodCallResult;\n };\n proto.unshift = function () {\n const methodCallResult = unshift.apply(this, arguments);\n const o = this.$fastController;\n if (o !== void 0) {\n o.addSplice(adjustIndex(newSplice(0, [], arguments.length), this));\n }\n return methodCallResult;\n };\n}\n/* eslint-enable prefer-rest-params */\n/* eslint-enable @typescript-eslint/explicit-function-return-type */\n\n/**\n * The runtime behavior for template references.\n * @public\n */\nclass RefBehavior {\n /**\n * Creates an instance of RefBehavior.\n * @param target - The element to reference.\n * @param propertyName - The name of the property to assign the reference to.\n */\n constructor(target, propertyName) {\n this.target = target;\n this.propertyName = propertyName;\n }\n /**\n * Bind this behavior to the source.\n * @param source - The source to bind to.\n * @param context - The execution context that the binding is operating within.\n */\n bind(source) {\n source[this.propertyName] = this.target;\n }\n /**\n * Unbinds this behavior from the source.\n * @param source - The source to unbind from.\n */\n /* eslint-disable-next-line @typescript-eslint/no-empty-function */\n unbind() {}\n}\n/**\n * A directive that observes the updates a property with a reference to the element.\n * @param propertyName - The name of the property to assign the reference to.\n * @public\n */\nfunction ref(propertyName) {\n return new AttachedBehaviorHTMLDirective(\"fast-ref\", RefBehavior, propertyName);\n}\n\n/**\n * Determines whether or not an object is a function.\n * @public\n */\nconst isFunction = object => typeof object === \"function\";\n\nconst noTemplate = () => null;\nfunction normalizeBinding(value) {\n return value === undefined ? noTemplate : isFunction(value) ? value : () => value;\n}\n/**\n * A directive that enables basic conditional rendering in a template.\n * @param binding - The condition to test for rendering.\n * @param templateOrTemplateBinding - The template or a binding that gets\n * the template to render when the condition is true.\n * @param elseTemplateOrTemplateBinding - Optional template or binding that that\n * gets the template to render when the conditional is false.\n * @public\n */\nfunction when(binding, templateOrTemplateBinding, elseTemplateOrTemplateBinding) {\n const dataBinding = isFunction(binding) ? binding : () => binding;\n const templateBinding = normalizeBinding(templateOrTemplateBinding);\n const elseBinding = normalizeBinding(elseTemplateOrTemplateBinding);\n return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : elseBinding(source, context);\n}\n\nconst defaultRepeatOptions = Object.freeze({\n positioning: false,\n recycle: true\n});\nfunction bindWithoutPositioning(view, items, index, context) {\n view.bind(items[index], context);\n}\nfunction bindWithPositioning(view, items, index, context) {\n const childContext = Object.create(context);\n childContext.index = index;\n childContext.length = items.length;\n view.bind(items[index], childContext);\n}\n/**\n * A behavior that renders a template for each item in an array.\n * @public\n */\nclass RepeatBehavior {\n /**\n * Creates an instance of RepeatBehavior.\n * @param location - The location in the DOM to render the repeat.\n * @param itemsBinding - The array to render.\n * @param isItemsBindingVolatile - Indicates whether the items binding has volatile dependencies.\n * @param templateBinding - The template to render for each item.\n * @param isTemplateBindingVolatile - Indicates whether the template binding has volatile dependencies.\n * @param options - Options used to turn on special repeat features.\n */\n constructor(location, itemsBinding, isItemsBindingVolatile, templateBinding, isTemplateBindingVolatile, options) {\n this.location = location;\n this.itemsBinding = itemsBinding;\n this.templateBinding = templateBinding;\n this.options = options;\n this.source = null;\n this.views = [];\n this.items = null;\n this.itemsObserver = null;\n this.originalContext = void 0;\n this.childContext = void 0;\n this.bindView = bindWithoutPositioning;\n this.itemsBindingObserver = Observable.binding(itemsBinding, this, isItemsBindingVolatile);\n this.templateBindingObserver = Observable.binding(templateBinding, this, isTemplateBindingVolatile);\n if (options.positioning) {\n this.bindView = bindWithPositioning;\n }\n }\n /**\n * Bind this behavior to the source.\n * @param source - The source to bind to.\n * @param context - The execution context that the binding is operating within.\n */\n bind(source, context) {\n this.source = source;\n this.originalContext = context;\n this.childContext = Object.create(context);\n this.childContext.parent = source;\n this.childContext.parentContext = this.originalContext;\n this.items = this.itemsBindingObserver.observe(source, this.originalContext);\n this.template = this.templateBindingObserver.observe(source, this.originalContext);\n this.observeItems(true);\n this.refreshAllViews();\n }\n /**\n * Unbinds this behavior from the source.\n * @param source - The source to unbind from.\n */\n unbind() {\n this.source = null;\n this.items = null;\n if (this.itemsObserver !== null) {\n this.itemsObserver.unsubscribe(this);\n }\n this.unbindAllViews();\n this.itemsBindingObserver.disconnect();\n this.templateBindingObserver.disconnect();\n }\n /** @internal */\n handleChange(source, args) {\n if (source === this.itemsBinding) {\n this.items = this.itemsBindingObserver.observe(this.source, this.originalContext);\n this.observeItems();\n this.refreshAllViews();\n } else if (source === this.templateBinding) {\n this.template = this.templateBindingObserver.observe(this.source, this.originalContext);\n this.refreshAllViews(true);\n } else {\n this.updateViews(args);\n }\n }\n observeItems(force = false) {\n if (!this.items) {\n this.items = emptyArray;\n return;\n }\n const oldObserver = this.itemsObserver;\n const newObserver = this.itemsObserver = Observable.getNotifier(this.items);\n const hasNewObserver = oldObserver !== newObserver;\n if (hasNewObserver && oldObserver !== null) {\n oldObserver.unsubscribe(this);\n }\n if (hasNewObserver || force) {\n newObserver.subscribe(this);\n }\n }\n updateViews(splices) {\n const childContext = this.childContext;\n const views = this.views;\n const bindView = this.bindView;\n const items = this.items;\n const template = this.template;\n const recycle = this.options.recycle;\n const leftoverViews = [];\n let leftoverIndex = 0;\n let availableViews = 0;\n for (let i = 0, ii = splices.length; i < ii; ++i) {\n const splice = splices[i];\n const removed = splice.removed;\n let removeIndex = 0;\n let addIndex = splice.index;\n const end = addIndex + splice.addedCount;\n const removedViews = views.splice(splice.index, removed.length);\n const totalAvailableViews = availableViews = leftoverViews.length + removedViews.length;\n for (; addIndex < end; ++addIndex) {\n const neighbor = views[addIndex];\n const location = neighbor ? neighbor.firstChild : this.location;\n let view;\n if (recycle && availableViews > 0) {\n if (removeIndex <= totalAvailableViews && removedViews.length > 0) {\n view = removedViews[removeIndex];\n removeIndex++;\n } else {\n view = leftoverViews[leftoverIndex];\n leftoverIndex++;\n }\n availableViews--;\n } else {\n view = template.create();\n }\n views.splice(addIndex, 0, view);\n bindView(view, items, addIndex, childContext);\n view.insertBefore(location);\n }\n if (removedViews[removeIndex]) {\n leftoverViews.push(...removedViews.slice(removeIndex));\n }\n }\n for (let i = leftoverIndex, ii = leftoverViews.length; i < ii; ++i) {\n leftoverViews[i].dispose();\n }\n if (this.options.positioning) {\n for (let i = 0, ii = views.length; i < ii; ++i) {\n const currentContext = views[i].context;\n currentContext.length = ii;\n currentContext.index = i;\n }\n }\n }\n refreshAllViews(templateChanged = false) {\n const items = this.items;\n const childContext = this.childContext;\n const template = this.template;\n const location = this.location;\n const bindView = this.bindView;\n let itemsLength = items.length;\n let views = this.views;\n let viewsLength = views.length;\n if (itemsLength === 0 || templateChanged || !this.options.recycle) {\n // all views need to be removed\n HTMLView.disposeContiguousBatch(views);\n viewsLength = 0;\n }\n if (viewsLength === 0) {\n // all views need to be created\n this.views = views = new Array(itemsLength);\n for (let i = 0; i < itemsLength; ++i) {\n const view = template.create();\n bindView(view, items, i, childContext);\n views[i] = view;\n view.insertBefore(location);\n }\n } else {\n // attempt to reuse existing views with new data\n let i = 0;\n for (; i < itemsLength; ++i) {\n if (i < viewsLength) {\n const view = views[i];\n bindView(view, items, i, childContext);\n } else {\n const view = template.create();\n bindView(view, items, i, childContext);\n views.push(view);\n view.insertBefore(location);\n }\n }\n const removed = views.splice(i, viewsLength - i);\n for (i = 0, itemsLength = removed.length; i < itemsLength; ++i) {\n removed[i].dispose();\n }\n }\n }\n unbindAllViews() {\n const views = this.views;\n for (let i = 0, ii = views.length; i < ii; ++i) {\n views[i].unbind();\n }\n }\n}\n/**\n * A directive that configures list rendering.\n * @public\n */\nclass RepeatDirective extends HTMLDirective {\n /**\n * Creates an instance of RepeatDirective.\n * @param itemsBinding - The binding that provides the array to render.\n * @param templateBinding - The template binding used to obtain a template to render for each item in the array.\n * @param options - Options used to turn on special repeat features.\n */\n constructor(itemsBinding, templateBinding, options) {\n super();\n this.itemsBinding = itemsBinding;\n this.templateBinding = templateBinding;\n this.options = options;\n /**\n * Creates a placeholder string based on the directive's index within the template.\n * @param index - The index of the directive within the template.\n */\n this.createPlaceholder = DOM.createBlockPlaceholder;\n enableArrayObservation();\n this.isItemsBindingVolatile = Observable.isVolatileBinding(itemsBinding);\n this.isTemplateBindingVolatile = Observable.isVolatileBinding(templateBinding);\n }\n /**\n * Creates a behavior for the provided target node.\n * @param target - The node instance to create the behavior for.\n */\n createBehavior(target) {\n return new RepeatBehavior(target, this.itemsBinding, this.isItemsBindingVolatile, this.templateBinding, this.isTemplateBindingVolatile, this.options);\n }\n}\n/**\n * A directive that enables list rendering.\n * @param itemsBinding - The array to render.\n * @param templateOrTemplateBinding - The template or a template binding used obtain a template\n * to render for each item in the array.\n * @param options - Options used to turn on special repeat features.\n * @public\n */\nfunction repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {\n const templateBinding = typeof templateOrTemplateBinding === \"function\" ? templateOrTemplateBinding : () => templateOrTemplateBinding;\n return new RepeatDirective(itemsBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));\n}\n\n/**\n * Creates a function that can be used to filter a Node array, selecting only elements.\n * @param selector - An optional selector to restrict the filter to.\n * @public\n */\nfunction elements(selector) {\n if (selector) {\n return function (value, index, array) {\n return value.nodeType === 1 && value.matches(selector);\n };\n }\n return function (value, index, array) {\n return value.nodeType === 1;\n };\n}\n/**\n * A base class for node observation.\n * @internal\n */\nclass NodeObservationBehavior {\n /**\n * Creates an instance of NodeObservationBehavior.\n * @param target - The target to assign the nodes property on.\n * @param options - The options to use in configuring node observation.\n */\n constructor(target, options) {\n this.target = target;\n this.options = options;\n this.source = null;\n }\n /**\n * Bind this behavior to the source.\n * @param source - The source to bind to.\n * @param context - The execution context that the binding is operating within.\n */\n bind(source) {\n const name = this.options.property;\n this.shouldUpdate = Observable.getAccessors(source).some(x => x.name === name);\n this.source = source;\n this.updateTarget(this.computeNodes());\n if (this.shouldUpdate) {\n this.observe();\n }\n }\n /**\n * Unbinds this behavior from the source.\n * @param source - The source to unbind from.\n */\n unbind() {\n this.updateTarget(emptyArray);\n this.source = null;\n if (this.shouldUpdate) {\n this.disconnect();\n }\n }\n /** @internal */\n handleEvent() {\n this.updateTarget(this.computeNodes());\n }\n computeNodes() {\n let nodes = this.getNodes();\n if (this.options.filter !== void 0) {\n nodes = nodes.filter(this.options.filter);\n }\n return nodes;\n }\n updateTarget(value) {\n this.source[this.options.property] = value;\n }\n}\n\n/**\n * The runtime behavior for slotted node observation.\n * @public\n */\nclass SlottedBehavior extends NodeObservationBehavior {\n /**\n * Creates an instance of SlottedBehavior.\n * @param target - The slot element target to observe.\n * @param options - The options to use when observing the slot.\n */\n constructor(target, options) {\n super(target, options);\n }\n /**\n * Begins observation of the nodes.\n */\n observe() {\n this.target.addEventListener(\"slotchange\", this);\n }\n /**\n * Disconnects observation of the nodes.\n */\n disconnect() {\n this.target.removeEventListener(\"slotchange\", this);\n }\n /**\n * Retrieves the nodes that should be assigned to the target.\n */\n getNodes() {\n return this.target.assignedNodes(this.options);\n }\n}\n/**\n * A directive that observes the `assignedNodes()` of a slot and updates a property\n * whenever they change.\n * @param propertyOrOptions - The options used to configure slotted node observation.\n * @public\n */\nfunction slotted(propertyOrOptions) {\n if (typeof propertyOrOptions === \"string\") {\n propertyOrOptions = {\n property: propertyOrOptions\n };\n }\n return new AttachedBehaviorHTMLDirective(\"fast-slotted\", SlottedBehavior, propertyOrOptions);\n}\n\n/**\n * The runtime behavior for child node observation.\n * @public\n */\nclass ChildrenBehavior extends NodeObservationBehavior {\n /**\n * Creates an instance of ChildrenBehavior.\n * @param target - The element target to observe children on.\n * @param options - The options to use when observing the element children.\n */\n constructor(target, options) {\n super(target, options);\n this.observer = null;\n options.childList = true;\n }\n /**\n * Begins observation of the nodes.\n */\n observe() {\n if (this.observer === null) {\n this.observer = new MutationObserver(this.handleEvent.bind(this));\n }\n this.observer.observe(this.target, this.options);\n }\n /**\n * Disconnects observation of the nodes.\n */\n disconnect() {\n this.observer.disconnect();\n }\n /**\n * Retrieves the nodes that should be assigned to the target.\n */\n getNodes() {\n if (\"subtree\" in this.options) {\n return Array.from(this.target.querySelectorAll(this.options.selector));\n }\n return Array.from(this.target.childNodes);\n }\n}\n/**\n * A directive that observes the `childNodes` of an element and updates a property\n * whenever they change.\n * @param propertyOrOptions - The options used to configure child node observation.\n * @public\n */\nfunction children(propertyOrOptions) {\n if (typeof propertyOrOptions === \"string\") {\n propertyOrOptions = {\n property: propertyOrOptions\n };\n }\n return new AttachedBehaviorHTMLDirective(\"fast-children\", ChildrenBehavior, propertyOrOptions);\n}\n\n/**\n * A mixin class implementing start and end elements.\n * These are generally used to decorate text elements with icons or other visual indicators.\n * @public\n */\nclass StartEnd {\n handleStartContentChange() {\n this.startContainer.classList.toggle(\"start\", this.start.assignedNodes().length > 0);\n }\n handleEndContentChange() {\n this.endContainer.classList.toggle(\"end\", this.end.assignedNodes().length > 0);\n }\n}\n/**\n * The template for the end element.\n * For use with {@link StartEnd}\n *\n * @public\n */\nconst endSlotTemplate = (context, definition) => html` definition.end ? \"end\" : void 0}> x.handleEndContentChange()}\">${definition.end || \"\"}`;\n/**\n * The template for the start element.\n * For use with {@link StartEnd}\n *\n * @public\n */\nconst startSlotTemplate = (context, definition) => html` definition.start ? \"start\" : void 0}\"> x.handleStartContentChange()}\">${definition.start || \"\"}`;\n/**\n * The template for the end element.\n * For use with {@link StartEnd}\n *\n * @public\n * @deprecated - use endSlotTemplate\n */\nconst endTemplate = html` x.handleEndContentChange()}\">`;\n/**\n * The template for the start element.\n * For use with {@link StartEnd}\n *\n * @public\n * @deprecated - use startSlotTemplate\n */\nconst startTemplate = html` x.handleStartContentChange()}\">`;\n\n/**\n * The template for the {@link @microsoft/fast-foundation#(AccordionItem:class)} component.\n * @public\n */\nconst accordionItemTemplate = (context, definition) => html``;\n\n/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\nfunction __decorate$1(decorators, target, key, desc) {\n var c = arguments.length,\n r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,\n d;\n 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;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\n/**\n * Big thanks to https://github.com/fkleuver and the https://github.com/aurelia/aurelia project\n * for the bulk of this code and many of the associated tests.\n */\n// Tiny polyfill for TypeScript's Reflect metadata API.\nconst metadataByTarget = new Map();\nif (!(\"metadata\" in Reflect)) {\n Reflect.metadata = function (key, value) {\n return function (target) {\n Reflect.defineMetadata(key, value, target);\n };\n };\n Reflect.defineMetadata = function (key, value, target) {\n let metadata = metadataByTarget.get(target);\n if (metadata === void 0) {\n metadataByTarget.set(target, metadata = new Map());\n }\n metadata.set(key, value);\n };\n Reflect.getOwnMetadata = function (key, target) {\n const metadata = metadataByTarget.get(target);\n if (metadata !== void 0) {\n return metadata.get(key);\n }\n return void 0;\n };\n}\n/**\n * A utility class used that constructs and registers resolvers for a dependency\n * injection container. Supports a standard set of object lifetimes.\n * @public\n */\nclass ResolverBuilder {\n /**\n *\n * @param container - The container to create resolvers for.\n * @param key - The key to register resolvers under.\n */\n constructor(container, key) {\n this.container = container;\n this.key = key;\n }\n /**\n * Creates a resolver for an existing object instance.\n * @param value - The instance to resolve.\n * @returns The resolver.\n */\n instance(value) {\n return this.registerResolver(0 /* instance */, value);\n }\n /**\n * Creates a resolver that enforces a singleton lifetime.\n * @param value - The type to create and cache the singleton for.\n * @returns The resolver.\n */\n singleton(value) {\n return this.registerResolver(1 /* singleton */, value);\n }\n /**\n * Creates a resolver that creates a new instance for every dependency request.\n * @param value - The type to create instances of.\n * @returns - The resolver.\n */\n transient(value) {\n return this.registerResolver(2 /* transient */, value);\n }\n /**\n * Creates a resolver that invokes a callback function for every dependency resolution\n * request, allowing custom logic to return the dependency.\n * @param value - The callback to call during resolution.\n * @returns The resolver.\n */\n callback(value) {\n return this.registerResolver(3 /* callback */, value);\n }\n /**\n * Creates a resolver that invokes a callback function the first time that a dependency\n * resolution is requested. The returned value is then cached and provided for all\n * subsequent requests.\n * @param value - The callback to call during the first resolution.\n * @returns The resolver.\n */\n cachedCallback(value) {\n return this.registerResolver(3 /* callback */, cacheCallbackResult(value));\n }\n /**\n * Aliases the current key to a different key.\n * @param destinationKey - The key to point the alias to.\n * @returns The resolver.\n */\n aliasTo(destinationKey) {\n return this.registerResolver(5 /* alias */, destinationKey);\n }\n registerResolver(strategy, state) {\n const {\n container,\n key\n } = this;\n /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */\n this.container = this.key = void 0;\n return container.registerResolver(key, new ResolverImpl(key, strategy, state));\n }\n}\nfunction cloneArrayWithPossibleProps(source) {\n const clone = source.slice();\n const keys = Object.keys(source);\n const len = keys.length;\n let key;\n for (let i = 0; i < len; ++i) {\n key = keys[i];\n if (!isArrayIndex(key)) {\n clone[key] = source[key];\n }\n }\n return clone;\n}\n/**\n * A set of default resolvers useful in configuring a container.\n * @public\n */\nconst DefaultResolver = Object.freeze({\n /**\n * Disables auto-registration and throws for all un-registered dependencies.\n * @param key - The key to create the resolver for.\n */\n none(key) {\n throw Error(`${key.toString()} not registered, did you forget to add @singleton()?`);\n },\n /**\n * Provides default singleton resolution behavior during auto-registration.\n * @param key - The key to create the resolver for.\n * @returns The resolver.\n */\n singleton(key) {\n return new ResolverImpl(key, 1 /* singleton */, key);\n },\n /**\n * Provides default transient resolution behavior during auto-registration.\n * @param key - The key to create the resolver for.\n * @returns The resolver.\n */\n transient(key) {\n return new ResolverImpl(key, 2 /* transient */, key);\n }\n});\n/**\n * Configuration for a dependency injection container.\n * @public\n */\nconst ContainerConfiguration = Object.freeze({\n /**\n * The default configuration used when creating a DOM-disconnected container.\n * @remarks\n * The default creates a root container, with no parent container. It does not handle\n * owner requests and it uses singleton resolution behavior for auto-registration.\n */\n default: Object.freeze({\n parentLocator: () => null,\n responsibleForOwnerRequests: false,\n defaultResolver: DefaultResolver.singleton\n })\n});\nconst dependencyLookup = new Map();\nfunction getParamTypes(key) {\n return Type => {\n return Reflect.getOwnMetadata(key, Type);\n };\n}\nlet rootDOMContainer = null;\n/**\n * The gateway to dependency injection APIs.\n * @public\n */\nconst DI = Object.freeze({\n /**\n * Creates a new dependency injection container.\n * @param config - The configuration for the container.\n * @returns A newly created dependency injection container.\n */\n createContainer(config) {\n return new ContainerImpl(null, Object.assign({}, ContainerConfiguration.default, config));\n },\n /**\n * Finds the dependency injection container responsible for providing dependencies\n * to the specified node.\n * @param node - The node to find the responsible container for.\n * @returns The container responsible for providing dependencies to the node.\n * @remarks\n * This will be the same as the parent container if the specified node\n * does not itself host a container configured with responsibleForOwnerRequests.\n */\n findResponsibleContainer(node) {\n const owned = node.$$container$$;\n if (owned && owned.responsibleForOwnerRequests) {\n return owned;\n }\n return DI.findParentContainer(node);\n },\n /**\n * Find the dependency injection container up the DOM tree from this node.\n * @param node - The node to find the parent container for.\n * @returns The parent container of this node.\n * @remarks\n * This will be the same as the responsible container if the specified node\n * does not itself host a container configured with responsibleForOwnerRequests.\n */\n findParentContainer(node) {\n const event = new CustomEvent(DILocateParentEventType, {\n bubbles: true,\n composed: true,\n cancelable: true,\n detail: {\n container: void 0\n }\n });\n node.dispatchEvent(event);\n return event.detail.container || DI.getOrCreateDOMContainer();\n },\n /**\n * Returns a dependency injection container if one is explicitly owned by the specified\n * node. If one is not owned, then a new container is created and assigned to the node.\n * @param node - The node to find or create the container for.\n * @param config - The configuration for the container if one needs to be created.\n * @returns The located or created container.\n * @remarks\n * This API does not search for a responsible or parent container. It looks only for a container\n * directly defined on the specified node and creates one at that location if one does not\n * already exist.\n */\n getOrCreateDOMContainer(node, config) {\n if (!node) {\n return rootDOMContainer || (rootDOMContainer = new ContainerImpl(null, Object.assign({}, ContainerConfiguration.default, config, {\n parentLocator: () => null\n })));\n }\n return node.$$container$$ || new ContainerImpl(node, Object.assign({}, ContainerConfiguration.default, config, {\n parentLocator: DI.findParentContainer\n }));\n },\n /**\n * Gets the \"design:paramtypes\" metadata for the specified type.\n * @param Type - The type to get the metadata for.\n * @returns The metadata array or undefined if no metadata is found.\n */\n getDesignParamtypes: getParamTypes(\"design:paramtypes\"),\n /**\n * Gets the \"di:paramtypes\" metadata for the specified type.\n * @param Type - The type to get the metadata for.\n * @returns The metadata array or undefined if no metadata is found.\n */\n getAnnotationParamtypes: getParamTypes(\"di:paramtypes\"),\n /**\n *\n * @param Type - Gets the \"di:paramtypes\" metadata for the specified type. If none is found,\n * an empty metadata array is created and added.\n * @returns The metadata array.\n */\n getOrCreateAnnotationParamTypes(Type) {\n let annotationParamtypes = this.getAnnotationParamtypes(Type);\n if (annotationParamtypes === void 0) {\n Reflect.defineMetadata(\"di:paramtypes\", annotationParamtypes = [], Type);\n }\n return annotationParamtypes;\n },\n /**\n * Gets the dependency keys representing what is needed to instantiate the specified type.\n * @param Type - The type to get the dependencies for.\n * @returns An array of dependency keys.\n */\n getDependencies(Type) {\n // Note: Every detail of this getDependencies method is pretty deliberate at the moment, and probably not yet 100% tested from every possible angle,\n // so be careful with making changes here as it can have a huge impact on complex end user apps.\n // Preferably, only make changes to the dependency resolution process via a RFC.\n let dependencies = dependencyLookup.get(Type);\n if (dependencies === void 0) {\n // Type.length is the number of constructor parameters. If this is 0, it could mean the class has an empty constructor\n // but it could also mean the class has no constructor at all (in which case it inherits the constructor from the prototype).\n // Non-zero constructor length + no paramtypes means emitDecoratorMetadata is off, or the class has no decorator.\n // We're not doing anything with the above right now, but it's good to keep in mind for any future issues.\n const inject = Type.inject;\n if (inject === void 0) {\n // design:paramtypes is set by tsc when emitDecoratorMetadata is enabled.\n const designParamtypes = DI.getDesignParamtypes(Type);\n // di:paramtypes is set by the parameter decorator from DI.createInterface or by @inject\n const annotationParamtypes = DI.getAnnotationParamtypes(Type);\n if (designParamtypes === void 0) {\n if (annotationParamtypes === void 0) {\n // Only go up the prototype if neither static inject nor any of the paramtypes is defined, as\n // there is no sound way to merge a type's deps with its prototype's deps\n const Proto = Object.getPrototypeOf(Type);\n if (typeof Proto === \"function\" && Proto !== Function.prototype) {\n dependencies = cloneArrayWithPossibleProps(DI.getDependencies(Proto));\n } else {\n dependencies = [];\n }\n } else {\n // No design:paramtypes so just use the di:paramtypes\n dependencies = cloneArrayWithPossibleProps(annotationParamtypes);\n }\n } else if (annotationParamtypes === void 0) {\n // No di:paramtypes so just use the design:paramtypes\n dependencies = cloneArrayWithPossibleProps(designParamtypes);\n } else {\n // We've got both, so merge them (in case of conflict on same index, di:paramtypes take precedence)\n dependencies = cloneArrayWithPossibleProps(designParamtypes);\n let len = annotationParamtypes.length;\n let auAnnotationParamtype;\n for (let i = 0; i < len; ++i) {\n auAnnotationParamtype = annotationParamtypes[i];\n if (auAnnotationParamtype !== void 0) {\n dependencies[i] = auAnnotationParamtype;\n }\n }\n const keys = Object.keys(annotationParamtypes);\n len = keys.length;\n let key;\n for (let i = 0; i < len; ++i) {\n key = keys[i];\n if (!isArrayIndex(key)) {\n dependencies[key] = annotationParamtypes[key];\n }\n }\n }\n } else {\n // Ignore paramtypes if we have static inject\n dependencies = cloneArrayWithPossibleProps(inject);\n }\n dependencyLookup.set(Type, dependencies);\n }\n return dependencies;\n },\n /**\n * Defines a property on a web component class. The value of this property will\n * be resolved from the dependency injection container responsible for the element\n * instance, based on where it is connected in the DOM.\n * @param target - The target to define the property on.\n * @param propertyName - The name of the property to define.\n * @param key - The dependency injection key.\n * @param respectConnection - Indicates whether or not to update the property value if the\n * hosting component is disconnected and then re-connected at a different location in the DOM.\n * @remarks\n * The respectConnection option is only applicable to elements that descend from FASTElement.\n */\n defineProperty(target, propertyName, key, respectConnection = false) {\n const diPropertyKey = `$di_${propertyName}`;\n Reflect.defineProperty(target, propertyName, {\n get: function () {\n let value = this[diPropertyKey];\n if (value === void 0) {\n const container = this instanceof HTMLElement ? DI.findResponsibleContainer(this) : DI.getOrCreateDOMContainer();\n value = container.get(key);\n this[diPropertyKey] = value;\n if (respectConnection && this instanceof FASTElement) {\n const notifier = this.$fastController;\n const handleChange = () => {\n const newContainer = DI.findResponsibleContainer(this);\n const newValue = newContainer.get(key);\n const oldValue = this[diPropertyKey];\n if (newValue !== oldValue) {\n this[diPropertyKey] = value;\n notifier.notify(propertyName);\n }\n };\n notifier.subscribe({\n handleChange\n }, \"isConnected\");\n }\n }\n return value;\n }\n });\n },\n /**\n * Creates a dependency injection key.\n * @param nameConfigOrCallback - A friendly name for the key or a lambda that configures a\n * default resolution for the dependency.\n * @param configuror - If a friendly name was provided for the first parameter, then an optional\n * lambda that configures a default resolution for the dependency can be provided second.\n * @returns The created key.\n * @remarks\n * The created key can be used as a property decorator or constructor parameter decorator,\n * in addition to its standard use in an inject array or through direct container APIs.\n */\n createInterface(nameConfigOrCallback, configuror) {\n const configure = typeof nameConfigOrCallback === \"function\" ? nameConfigOrCallback : configuror;\n const friendlyName = typeof nameConfigOrCallback === \"string\" ? nameConfigOrCallback : nameConfigOrCallback && \"friendlyName\" in nameConfigOrCallback ? nameConfigOrCallback.friendlyName || defaultFriendlyName : defaultFriendlyName;\n const respectConnection = typeof nameConfigOrCallback === \"string\" ? false : nameConfigOrCallback && \"respectConnection\" in nameConfigOrCallback ? nameConfigOrCallback.respectConnection || false : false;\n const Interface = function (target, property, index) {\n if (target == null || new.target !== undefined) {\n throw new Error(`No registration for interface: '${Interface.friendlyName}'`);\n }\n if (property) {\n DI.defineProperty(target, property, Interface, respectConnection);\n } else {\n const annotationParamtypes = DI.getOrCreateAnnotationParamTypes(target);\n annotationParamtypes[index] = Interface;\n }\n };\n Interface.$isInterface = true;\n Interface.friendlyName = friendlyName == null ? \"(anonymous)\" : friendlyName;\n if (configure != null) {\n Interface.register = function (container, key) {\n return configure(new ResolverBuilder(container, key !== null && key !== void 0 ? key : Interface));\n };\n }\n Interface.toString = function toString() {\n return `InterfaceSymbol<${Interface.friendlyName}>`;\n };\n return Interface;\n },\n /**\n * A decorator that specifies what to inject into its target.\n * @param dependencies - The dependencies to inject.\n * @returns The decorator to be applied to the target class.\n * @remarks\n * The decorator can be used to decorate a class, listing all of the classes dependencies.\n * Or it can be used to decorate a constructor paramter, indicating what to inject for that\n * parameter.\n * Or it can be used for a web component property, indicating what that property should resolve to.\n */\n inject(...dependencies) {\n return function (target, key, descriptor) {\n if (typeof descriptor === \"number\") {\n // It's a parameter decorator.\n const annotationParamtypes = DI.getOrCreateAnnotationParamTypes(target);\n const dep = dependencies[0];\n if (dep !== void 0) {\n annotationParamtypes[descriptor] = dep;\n }\n } else if (key) {\n DI.defineProperty(target, key, dependencies[0]);\n } else {\n const annotationParamtypes = descriptor ? DI.getOrCreateAnnotationParamTypes(descriptor.value) : DI.getOrCreateAnnotationParamTypes(target);\n let dep;\n for (let i = 0; i < dependencies.length; ++i) {\n dep = dependencies[i];\n if (dep !== void 0) {\n annotationParamtypes[i] = dep;\n }\n }\n }\n };\n },\n /**\n * Registers the `target` class as a transient dependency; each time the dependency is resolved\n * a new instance will be created.\n *\n * @param target - The class / constructor function to register as transient.\n * @returns The same class, with a static `register` method that takes a container and returns the appropriate resolver.\n *\n * @example\n * On an existing class\n * ```ts\n * class Foo { }\n * DI.transient(Foo);\n * ```\n *\n * @example\n * Inline declaration\n *\n * ```ts\n * const Foo = DI.transient(class { });\n * // Foo is now strongly typed with register\n * Foo.register(container);\n * ```\n *\n * @public\n */\n transient(target) {\n target.register = function register(container) {\n const registration = Registration.transient(target, target);\n return registration.register(container);\n };\n target.registerInRequestor = false;\n return target;\n },\n /**\n * Registers the `target` class as a singleton dependency; the class will only be created once. Each\n * consecutive time the dependency is resolved, the same instance will be returned.\n *\n * @param target - The class / constructor function to register as a singleton.\n * @returns The same class, with a static `register` method that takes a container and returns the appropriate resolver.\n * @example\n * On an existing class\n * ```ts\n * class Foo { }\n * DI.singleton(Foo);\n * ```\n *\n * @example\n * Inline declaration\n * ```ts\n * const Foo = DI.singleton(class { });\n * // Foo is now strongly typed with register\n * Foo.register(container);\n * ```\n *\n * @public\n */\n singleton(target, options = defaultSingletonOptions) {\n target.register = function register(container) {\n const registration = Registration.singleton(target, target);\n return registration.register(container);\n };\n target.registerInRequestor = options.scoped;\n return target;\n }\n});\n/**\n * The interface key that resolves the dependency injection container itself.\n * @public\n */\nconst Container = DI.createInterface(\"Container\");\n/**\n * A decorator that specifies what to inject into its target.\n * @param dependencies - The dependencies to inject.\n * @returns The decorator to be applied to the target class.\n * @remarks\n * The decorator can be used to decorate a class, listing all of the classes dependencies.\n * Or it can be used to decorate a constructor paramter, indicating what to inject for that\n * parameter.\n * Or it can be used for a web component property, indicating what that property should resolve to.\n *\n * @public\n */\nDI.inject;\nconst defaultSingletonOptions = {\n scoped: false\n};\n/** @internal */\nclass ResolverImpl {\n constructor(key, strategy, state) {\n this.key = key;\n this.strategy = strategy;\n this.state = state;\n this.resolving = false;\n }\n get $isResolver() {\n return true;\n }\n register(container) {\n return container.registerResolver(this.key, this);\n }\n resolve(handler, requestor) {\n switch (this.strategy) {\n case 0 /* instance */:\n return this.state;\n case 1 /* singleton */:\n {\n if (this.resolving) {\n throw new Error(`Cyclic dependency found: ${this.state.name}`);\n }\n this.resolving = true;\n this.state = handler.getFactory(this.state).construct(requestor);\n this.strategy = 0 /* instance */;\n this.resolving = false;\n return this.state;\n }\n case 2 /* transient */:\n {\n // Always create transients from the requesting container\n const factory = handler.getFactory(this.state);\n if (factory === null) {\n throw new Error(`Resolver for ${String(this.key)} returned a null factory`);\n }\n return factory.construct(requestor);\n }\n case 3 /* callback */:\n return this.state(handler, requestor, this);\n case 4 /* array */:\n return this.state[0].resolve(handler, requestor);\n case 5 /* alias */:\n return requestor.get(this.state);\n default:\n throw new Error(`Invalid resolver strategy specified: ${this.strategy}.`);\n }\n }\n getFactory(container) {\n var _a, _b, _c;\n switch (this.strategy) {\n case 1 /* singleton */:\n case 2 /* transient */:\n return container.getFactory(this.state);\n case 5 /* alias */:\n 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;\n default:\n return null;\n }\n }\n}\nfunction containerGetKey(d) {\n return this.get(d);\n}\nfunction transformInstance(inst, transform) {\n return transform(inst);\n}\n/** @internal */\nclass FactoryImpl {\n constructor(Type, dependencies) {\n this.Type = Type;\n this.dependencies = dependencies;\n this.transformers = null;\n }\n construct(container, dynamicDependencies) {\n let instance;\n if (dynamicDependencies === void 0) {\n instance = new this.Type(...this.dependencies.map(containerGetKey, container));\n } else {\n instance = new this.Type(...this.dependencies.map(containerGetKey, container), ...dynamicDependencies);\n }\n if (this.transformers == null) {\n return instance;\n }\n return this.transformers.reduce(transformInstance, instance);\n }\n registerTransformer(transformer) {\n (this.transformers || (this.transformers = [])).push(transformer);\n }\n}\nconst containerResolver = {\n $isResolver: true,\n resolve(handler, requestor) {\n return requestor;\n }\n};\nfunction isRegistry(obj) {\n return typeof obj.register === \"function\";\n}\nfunction isSelfRegistry(obj) {\n return isRegistry(obj) && typeof obj.registerInRequestor === \"boolean\";\n}\nfunction isRegisterInRequester(obj) {\n return isSelfRegistry(obj) && obj.registerInRequestor;\n}\nfunction isClass(obj) {\n return obj.prototype !== void 0;\n}\nconst 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\"]);\nconst DILocateParentEventType = \"__DI_LOCATE_PARENT__\";\nconst factories = new Map();\n/**\n * @internal\n */\nclass ContainerImpl {\n constructor(owner, config) {\n this.owner = owner;\n this.config = config;\n this._parent = void 0;\n this.registerDepth = 0;\n this.context = null;\n if (owner !== null) {\n owner.$$container$$ = this;\n }\n this.resolvers = new Map();\n this.resolvers.set(Container, containerResolver);\n if (owner instanceof Node) {\n owner.addEventListener(DILocateParentEventType, e => {\n if (e.composedPath()[0] !== this.owner) {\n e.detail.container = this;\n e.stopImmediatePropagation();\n }\n });\n }\n }\n get parent() {\n if (this._parent === void 0) {\n this._parent = this.config.parentLocator(this.owner);\n }\n return this._parent;\n }\n get depth() {\n return this.parent === null ? 0 : this.parent.depth + 1;\n }\n get responsibleForOwnerRequests() {\n return this.config.responsibleForOwnerRequests;\n }\n registerWithContext(context, ...params) {\n this.context = context;\n this.register(...params);\n this.context = null;\n return this;\n }\n register(...params) {\n if (++this.registerDepth === 100) {\n throw new Error(\"Unable to autoregister dependency\");\n // Most likely cause is trying to register a plain object that does not have a\n // register method and is not a class constructor\n }\n let current;\n let keys;\n let value;\n let j;\n let jj;\n const context = this.context;\n for (let i = 0, ii = params.length; i < ii; ++i) {\n current = params[i];\n if (!isObject(current)) {\n continue;\n }\n if (isRegistry(current)) {\n current.register(this, context);\n } else if (isClass(current)) {\n Registration.singleton(current, current).register(this);\n } else {\n keys = Object.keys(current);\n j = 0;\n jj = keys.length;\n for (; j < jj; ++j) {\n value = current[keys[j]];\n if (!isObject(value)) {\n continue;\n }\n // note: we could remove this if-branch and call this.register directly\n // - the extra check is just a perf tweak to create fewer unnecessary arrays by the spread operator\n if (isRegistry(value)) {\n value.register(this, context);\n } else {\n this.register(value);\n }\n }\n }\n }\n --this.registerDepth;\n return this;\n }\n registerResolver(key, resolver) {\n validateKey(key);\n const resolvers = this.resolvers;\n const result = resolvers.get(key);\n if (result == null) {\n resolvers.set(key, resolver);\n } else if (result instanceof ResolverImpl && result.strategy === 4 /* array */) {\n result.state.push(resolver);\n } else {\n resolvers.set(key, new ResolverImpl(key, 4 /* array */, [result, resolver]));\n }\n return resolver;\n }\n registerTransformer(key, transformer) {\n const resolver = this.getResolver(key);\n if (resolver == null) {\n return false;\n }\n if (resolver.getFactory) {\n const factory = resolver.getFactory(this);\n if (factory == null) {\n return false;\n }\n // This type cast is a bit of a hacky one, necessary due to the duplicity of IResolverLike.\n // Problem is that that interface's type arg can be of type Key, but the getFactory method only works on\n // type Constructable. So the return type of that optional method has this additional constraint, which\n // seems to confuse the type checker.\n factory.registerTransformer(transformer);\n return true;\n }\n return false;\n }\n getResolver(key, autoRegister = true) {\n validateKey(key);\n if (key.resolve !== void 0) {\n return key;\n }\n /* eslint-disable-next-line @typescript-eslint/no-this-alias */\n let current = this;\n let resolver;\n while (current != null) {\n resolver = current.resolvers.get(key);\n if (resolver == null) {\n if (current.parent == null) {\n const handler = isRegisterInRequester(key) ? this : current;\n return autoRegister ? this.jitRegister(key, handler) : null;\n }\n current = current.parent;\n } else {\n return resolver;\n }\n }\n return null;\n }\n has(key, searchAncestors = false) {\n return this.resolvers.has(key) ? true : searchAncestors && this.parent != null ? this.parent.has(key, true) : false;\n }\n get(key) {\n validateKey(key);\n if (key.$isResolver) {\n return key.resolve(this, this);\n }\n /* eslint-disable-next-line @typescript-eslint/no-this-alias */\n let current = this;\n let resolver;\n while (current != null) {\n resolver = current.resolvers.get(key);\n if (resolver == null) {\n if (current.parent == null) {\n const handler = isRegisterInRequester(key) ? this : current;\n resolver = this.jitRegister(key, handler);\n return resolver.resolve(current, this);\n }\n current = current.parent;\n } else {\n return resolver.resolve(current, this);\n }\n }\n throw new Error(`Unable to resolve key: ${String(key)}`);\n }\n getAll(key, searchAncestors = false) {\n validateKey(key);\n /* eslint-disable-next-line @typescript-eslint/no-this-alias */\n const requestor = this;\n let current = requestor;\n let resolver;\n if (searchAncestors) {\n let resolutions = emptyArray;\n while (current != null) {\n resolver = current.resolvers.get(key);\n if (resolver != null) {\n resolutions = resolutions.concat( /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */\n buildAllResponse(resolver, current, requestor));\n }\n current = current.parent;\n }\n return resolutions;\n } else {\n while (current != null) {\n resolver = current.resolvers.get(key);\n if (resolver == null) {\n current = current.parent;\n if (current == null) {\n return emptyArray;\n }\n } else {\n return buildAllResponse(resolver, current, requestor);\n }\n }\n }\n return emptyArray;\n }\n getFactory(Type) {\n let factory = factories.get(Type);\n if (factory === void 0) {\n if (isNativeFunction(Type)) {\n 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.`);\n }\n factories.set(Type, factory = new FactoryImpl(Type, DI.getDependencies(Type)));\n }\n return factory;\n }\n registerFactory(key, factory) {\n factories.set(key, factory);\n }\n createChild(config) {\n return new ContainerImpl(null, Object.assign({}, this.config, config, {\n parentLocator: () => this\n }));\n }\n jitRegister(keyAsValue, handler) {\n if (typeof keyAsValue !== \"function\") {\n throw new Error(`Attempted to jitRegister something that is not a constructor: '${keyAsValue}'. Did you forget to register this dependency?`);\n }\n if (InstrinsicTypeNames.has(keyAsValue.name)) {\n throw new Error(`Attempted to jitRegister an intrinsic type: ${keyAsValue.name}. Did you forget to add @inject(Key)`);\n }\n if (isRegistry(keyAsValue)) {\n const registrationResolver = keyAsValue.register(handler);\n if (!(registrationResolver instanceof Object) || registrationResolver.resolve == null) {\n const newResolver = handler.resolvers.get(keyAsValue);\n if (newResolver != void 0) {\n return newResolver;\n }\n throw new Error(\"A valid resolver was not returned from the static register method\");\n }\n return registrationResolver;\n } else if (keyAsValue.$isInterface) {\n throw new Error(`Attempted to jitRegister an interface: ${keyAsValue.friendlyName}`);\n } else {\n const resolver = this.config.defaultResolver(keyAsValue, handler);\n handler.resolvers.set(keyAsValue, resolver);\n return resolver;\n }\n }\n}\nconst cache = new WeakMap();\nfunction cacheCallbackResult(fun) {\n return function (handler, requestor, resolver) {\n if (cache.has(resolver)) {\n return cache.get(resolver);\n }\n const t = fun(handler, requestor, resolver);\n cache.set(resolver, t);\n return t;\n };\n}\n/**\n * You can use the resulting Registration of any of the factory methods\n * to register with the container.\n *\n * @example\n * ```\n * class Foo {}\n * const container = DI.createContainer();\n * container.register(Registration.instance(Foo, new Foo()));\n * container.get(Foo);\n * ```\n *\n * @public\n */\nconst Registration = Object.freeze({\n /**\n * Allows you to pass an instance.\n * Every time you request this {@link Key} you will get this instance back.\n *\n * @example\n * ```\n * Registration.instance(Foo, new Foo()));\n * ```\n *\n * @param key - The key to register the instance under.\n * @param value - The instance to return when the key is requested.\n */\n instance(key, value) {\n return new ResolverImpl(key, 0 /* instance */, value);\n },\n /**\n * Creates an instance from the class.\n * Every time you request this {@link Key} you will get the same one back.\n *\n * @example\n * ```\n * Registration.singleton(Foo, Foo);\n * ```\n *\n * @param key - The key to register the singleton under.\n * @param value - The class to instantiate as a singleton when first requested.\n */\n singleton(key, value) {\n return new ResolverImpl(key, 1 /* singleton */, value);\n },\n /**\n * Creates an instance from a class.\n * Every time you request this {@link Key} you will get a new instance.\n *\n * @example\n * ```\n * Registration.instance(Foo, Foo);\n * ```\n *\n * @param key - The key to register the instance type under.\n * @param value - The class to instantiate each time the key is requested.\n */\n transient(key, value) {\n return new ResolverImpl(key, 2 /* transient */, value);\n },\n /**\n * Delegates to a callback function to provide the dependency.\n * Every time you request this {@link Key} the callback will be invoked to provide\n * the dependency.\n *\n * @example\n * ```\n * Registration.callback(Foo, () => new Foo());\n * Registration.callback(Bar, (c: Container) => new Bar(c.get(Foo)));\n * ```\n *\n * @param key - The key to register the callback for.\n * @param callback - The function that is expected to return the dependency.\n */\n callback(key, callback) {\n return new ResolverImpl(key, 3 /* callback */, callback);\n },\n /**\n * Delegates to a callback function to provide the dependency and then caches the\n * dependency for future requests.\n *\n * @example\n * ```\n * Registration.cachedCallback(Foo, () => new Foo());\n * Registration.cachedCallback(Bar, (c: Container) => new Bar(c.get(Foo)));\n * ```\n *\n * @param key - The key to register the callback for.\n * @param callback - The function that is expected to return the dependency.\n * @remarks\n * If you pass the same Registration to another container, the same cached value will be used.\n * Should all references to the resolver returned be removed, the cache will expire.\n */\n cachedCallback(key, callback) {\n return new ResolverImpl(key, 3 /* callback */, cacheCallbackResult(callback));\n },\n /**\n * Creates an alternate {@link Key} to retrieve an instance by.\n *\n * @example\n * ```\n * Register.singleton(Foo, Foo)\n * Register.aliasTo(Foo, MyFoos);\n *\n * container.getAll(MyFoos) // contains an instance of Foo\n * ```\n *\n * @param originalKey - The original key that has been registered.\n * @param aliasKey - The alias to the original key.\n */\n aliasTo(originalKey, aliasKey) {\n return new ResolverImpl(aliasKey, 5 /* alias */, originalKey);\n }\n});\n/** @internal */\nfunction validateKey(key) {\n if (key === null || key === void 0) {\n throw new Error(\"key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?\");\n }\n}\nfunction buildAllResponse(resolver, handler, requestor) {\n if (resolver instanceof ResolverImpl && resolver.strategy === 4 /* array */) {\n const state = resolver.state;\n let i = state.length;\n const results = new Array(i);\n while (i--) {\n results[i] = state[i].resolve(handler, requestor);\n }\n return results;\n }\n return [resolver.resolve(handler, requestor)];\n}\nconst defaultFriendlyName = \"(anonymous)\";\nfunction isObject(value) {\n return typeof value === \"object\" && value !== null || typeof value === \"function\";\n}\n/**\n * Determine whether the value is a native function.\n *\n * @param fn - The function to check.\n * @returns `true` is the function is a native function, otherwise `false`\n */\nconst isNativeFunction = function () {\n const lookup = new WeakMap();\n let isNative = false;\n let sourceText = \"\";\n let i = 0;\n return function (fn) {\n isNative = lookup.get(fn);\n if (isNative === void 0) {\n sourceText = fn.toString();\n i = sourceText.length;\n // http://www.ecma-international.org/ecma-262/#prod-NativeFunction\n isNative =\n // 29 is the length of 'function () { [native code] }' which is the smallest length of a native function string\n i >= 29 &&\n // 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.\n i <= 100 &&\n // This whole heuristic *could* be tricked by a comment. Do we need to care about that?\n sourceText.charCodeAt(i - 1) === 0x7d &&\n // }\n // 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.\n sourceText.charCodeAt(i - 2) <= 0x20 &&\n // whitespace\n sourceText.charCodeAt(i - 3) === 0x5d &&\n // ]\n sourceText.charCodeAt(i - 4) === 0x65 &&\n // e\n sourceText.charCodeAt(i - 5) === 0x64 &&\n // d\n sourceText.charCodeAt(i - 6) === 0x6f &&\n // o\n sourceText.charCodeAt(i - 7) === 0x63 &&\n // c\n sourceText.charCodeAt(i - 8) === 0x20 &&\n //\n sourceText.charCodeAt(i - 9) === 0x65 &&\n // e\n sourceText.charCodeAt(i - 10) === 0x76 &&\n // v\n sourceText.charCodeAt(i - 11) === 0x69 &&\n // i\n sourceText.charCodeAt(i - 12) === 0x74 &&\n // t\n sourceText.charCodeAt(i - 13) === 0x61 &&\n // a\n sourceText.charCodeAt(i - 14) === 0x6e &&\n // n\n sourceText.charCodeAt(i - 15) === 0x58; // [\n lookup.set(fn, isNative);\n }\n return isNative;\n };\n}();\nconst isNumericLookup = {};\nfunction isArrayIndex(value) {\n switch (typeof value) {\n case \"number\":\n return value >= 0 && (value | 0) === value;\n case \"string\":\n {\n const result = isNumericLookup[value];\n if (result !== void 0) {\n return result;\n }\n const length = value.length;\n if (length === 0) {\n return isNumericLookup[value] = false;\n }\n let ch = 0;\n for (let i = 0; i < length; ++i) {\n ch = value.charCodeAt(i);\n if (i === 0 && ch === 0x30 && length > 1 /* must not start with 0 */ || ch < 0x30 /* 0 */ || ch > 0x39 /* 9 */) {\n return isNumericLookup[value] = false;\n }\n }\n return isNumericLookup[value] = true;\n }\n default:\n return false;\n }\n}\n\nfunction presentationKeyFromTag(tagName) {\n return `${tagName.toLowerCase()}:presentation`;\n}\nconst presentationRegistry = new Map();\n/**\n * An API gateway to component presentation features.\n * @public\n */\nconst ComponentPresentation = Object.freeze({\n /**\n * Defines a component presentation for an element.\n * @param tagName - The element name to define the presentation for.\n * @param presentation - The presentation that will be applied to matching elements.\n * @param container - The dependency injection container to register the configuration in.\n * @public\n */\n define(tagName, presentation, container) {\n const key = presentationKeyFromTag(tagName);\n const existing = presentationRegistry.get(key);\n if (existing === void 0) {\n presentationRegistry.set(key, presentation);\n } else {\n // false indicates that we have more than one presentation\n // registered for a tagName and we must resolve through DI\n presentationRegistry.set(key, false);\n }\n container.register(Registration.instance(key, presentation));\n },\n /**\n * Finds a component presentation for the specified element name,\n * searching the DOM hierarchy starting from the provided element.\n * @param tagName - The name of the element to locate the presentation for.\n * @param element - The element to begin the search from.\n * @returns The component presentation or null if none is found.\n * @public\n */\n forTag(tagName, element) {\n const key = presentationKeyFromTag(tagName);\n const existing = presentationRegistry.get(key);\n if (existing === false) {\n const container = DI.findResponsibleContainer(element);\n return container.get(key);\n }\n return existing || null;\n }\n});\n/**\n * The default implementation of ComponentPresentation, used by FoundationElement.\n * @public\n */\nclass DefaultComponentPresentation {\n /**\n * Creates an instance of DefaultComponentPresentation.\n * @param template - The template to apply to the element.\n * @param styles - The styles to apply to the element.\n * @public\n */\n constructor(template, styles) {\n this.template = template || null;\n this.styles = styles === void 0 ? null : Array.isArray(styles) ? ElementStyles.create(styles) : styles instanceof ElementStyles ? styles : ElementStyles.create([styles]);\n }\n /**\n * Applies the presentation details to the specified element.\n * @param element - The element to apply the presentation details to.\n * @public\n */\n applyTo(element) {\n const controller = element.$fastController;\n if (controller.template === null) {\n controller.template = this.template;\n }\n if (controller.styles === null) {\n controller.styles = this.styles;\n }\n }\n}\n\n/**\n * Defines a foundation element class that:\n * 1. Connects the element to its ComponentPresentation\n * 2. Allows resolving the element template from the instance or ComponentPresentation\n * 3. Allows resolving the element styles from the instance or ComponentPresentation\n *\n * @public\n */\nclass FoundationElement extends FASTElement {\n constructor() {\n super(...arguments);\n this._presentation = void 0;\n }\n /**\n * A property which resolves the ComponentPresentation instance\n * for the current component.\n * @public\n */\n get $presentation() {\n if (this._presentation === void 0) {\n this._presentation = ComponentPresentation.forTag(this.tagName, this);\n }\n return this._presentation;\n }\n templateChanged() {\n if (this.template !== undefined) {\n this.$fastController.template = this.template;\n }\n }\n stylesChanged() {\n if (this.styles !== undefined) {\n this.$fastController.styles = this.styles;\n }\n }\n /**\n * The connected callback for this FASTElement.\n * @remarks\n * This method is invoked by the platform whenever this FoundationElement\n * becomes connected to the document.\n * @public\n */\n connectedCallback() {\n if (this.$presentation !== null) {\n this.$presentation.applyTo(this);\n }\n super.connectedCallback();\n }\n /**\n * Defines an element registry function with a set of element definition defaults.\n * @param elementDefinition - The definition of the element to create the registry\n * function for.\n * @public\n */\n static compose(elementDefinition) {\n return (overrideDefinition = {}) => new FoundationElementRegistry(this === FoundationElement ? class extends FoundationElement {} : this, elementDefinition, overrideDefinition);\n }\n}\n__decorate$1([observable], FoundationElement.prototype, \"template\", void 0);\n__decorate$1([observable], FoundationElement.prototype, \"styles\", void 0);\nfunction resolveOption(option, context, definition) {\n if (typeof option === \"function\") {\n return option(context, definition);\n }\n return option;\n}\n/**\n * Registry capable of defining presentation properties for a DOM Container hierarchy.\n *\n * @internal\n */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nclass FoundationElementRegistry {\n constructor(type, elementDefinition, overrideDefinition) {\n this.type = type;\n this.elementDefinition = elementDefinition;\n this.overrideDefinition = overrideDefinition;\n this.definition = Object.assign(Object.assign({}, this.elementDefinition), this.overrideDefinition);\n }\n register(container, context) {\n const definition = this.definition;\n const overrideDefinition = this.overrideDefinition;\n const prefix = definition.prefix || context.elementPrefix;\n const name = `${prefix}-${definition.baseName}`;\n context.tryDefineElement({\n name,\n type: this.type,\n baseClass: this.elementDefinition.baseClass,\n callback: x => {\n const presentation = new DefaultComponentPresentation(resolveOption(definition.template, x, definition), resolveOption(definition.styles, x, definition));\n x.definePresentation(presentation);\n let shadowOptions = resolveOption(definition.shadowOptions, x, definition);\n if (x.shadowRootMode) {\n // If the design system has overridden the shadow root mode, we need special handling.\n if (shadowOptions) {\n // If there are shadow options present in the definition, then\n // either the component itself has specified an option or the\n // registry function has overridden it.\n if (!overrideDefinition.shadowOptions) {\n // There were shadow options provided by the component and not overridden by\n // the registry.\n shadowOptions.mode = x.shadowRootMode;\n }\n } else if (shadowOptions !== null) {\n // If the component author did not provide shadow options,\n // and did not null them out (light dom opt-in) then they\n // were relying on the FASTElement default. So, if the\n // design system provides a mode, we need to create the options\n // to override the default.\n shadowOptions = {\n mode: x.shadowRootMode\n };\n }\n }\n x.defineElement({\n elementOptions: resolveOption(definition.elementOptions, x, definition),\n shadowOptions,\n attributes: resolveOption(definition.attributes, x, definition)\n });\n }\n });\n }\n}\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\n/**\n * Apply mixins to a constructor.\n * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.\n * @public\n */\nfunction applyMixins(derivedCtor, ...baseCtors) {\n const derivedAttributes = AttributeConfiguration.locate(derivedCtor);\n baseCtors.forEach(baseCtor => {\n Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {\n if (name !== \"constructor\") {\n Object.defineProperty(derivedCtor.prototype, name, /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */\n Object.getOwnPropertyDescriptor(baseCtor.prototype, name));\n }\n });\n const baseAttributes = AttributeConfiguration.locate(baseCtor);\n baseAttributes.forEach(x => derivedAttributes.push(x));\n });\n}\n\n/**\n * An individual item in an {@link @microsoft/fast-foundation#(Accordion:class) }.\n *\n * @slot start - Content which can be provided between the heading and the icon\n * @slot end - Content which can be provided between the start slot and icon\n * @slot heading - Content which serves as the accordion item heading and text of the expand button\n * @slot - The default slot for accordion item content\n * @slot expanded-icon - The expanded icon\n * @slot collapsed-icon - The collapsed icon\n * @fires change - Fires a custom 'change' event when the button is invoked\n * @csspart heading - Wraps the button\n * @csspart button - The button which serves to invoke the item\n * @csspart heading-content - Wraps the slot for the heading content within the button\n * @csspart icon - The icon container\n * @csspart expanded-icon - The expanded icon slot\n * @csspart collapsed-icon - The collapsed icon\n * @csspart region - The wrapper for the accordion item content\n *\n * @public\n */\nclass AccordionItem extends FoundationElement {\n constructor() {\n super(...arguments);\n /**\n * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the\n * heading element.\n *\n * @defaultValue 2\n * @public\n * @remarks\n * HTML attribute: heading-level\n */\n this.headinglevel = 2;\n /**\n * Expands or collapses the item.\n *\n * @public\n * @remarks\n * HTML attribute: expanded\n */\n this.expanded = false;\n /**\n * @internal\n */\n this.clickHandler = e => {\n this.expanded = !this.expanded;\n this.change();\n };\n this.change = () => {\n this.$emit(\"change\");\n };\n }\n}\n__decorate$1([attr({\n attribute: \"heading-level\",\n mode: \"fromView\",\n converter: nullableNumberConverter\n})], AccordionItem.prototype, \"headinglevel\", void 0);\n__decorate$1([attr({\n mode: \"boolean\"\n})], AccordionItem.prototype, \"expanded\", void 0);\n__decorate$1([attr], AccordionItem.prototype, \"id\", void 0);\napplyMixins(AccordionItem, StartEnd);\n\n/**\n * The template for the {@link @microsoft/fast-foundation#Accordion} component.\n * @public\n */\nconst accordionTemplate = (context, definition) => /* TODO: deprecate slot name `item` to only support default slot https://github.com/microsoft/fast/issues/5515 */html``;\n\n/**\n * Standard orientation values\n */\nconst Orientation = {\n horizontal: \"horizontal\",\n vertical: \"vertical\"\n};\n\n/**\n * Returns the index of the last element in the array where predicate is true, and -1 otherwise.\n *\n * @param array - the array to test\n * @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.\n */\nfunction findLastIndex(array, predicate) {\n let k = array.length;\n while (k--) {\n if (predicate(array[k], k, array)) {\n return k;\n }\n }\n return -1;\n}\n\n/**\n * Checks if the DOM is available to access and use\n */\nfunction canUseDOM() {\n return !!(typeof window !== \"undefined\" && window.document && window.document.createElement);\n}\n\n/**\n * A test that ensures that all arguments are HTML Elements\n */\nfunction isHTMLElement(...args) {\n return args.every(arg => arg instanceof HTMLElement);\n}\n/**\n * Returns all displayed elements inside of a root node that match a provided selector\n */\nfunction getDisplayedNodes(rootNode, selector) {\n if (!rootNode || !selector || !isHTMLElement(rootNode)) {\n return;\n }\n const nodes = Array.from(rootNode.querySelectorAll(selector));\n // offsetParent will be null if the element isn't currently displayed,\n // so this will allow us to operate only on visible nodes\n return nodes.filter(node => node.offsetParent !== null);\n}\n/**\n * Returns the nonce used in the page, if any.\n *\n * Based on https://github.com/cssinjs/jss/blob/master/packages/jss/src/DomRenderer.js\n */\nfunction getNonce() {\n const node = document.querySelector('meta[property=\"csp-nonce\"]');\n if (node) {\n return node.getAttribute(\"content\");\n } else {\n return null;\n }\n}\n/**\n * Test if the document supports :focus-visible\n */\nlet _canUseFocusVisible;\nfunction canUseFocusVisible() {\n if (typeof _canUseFocusVisible === \"boolean\") {\n return _canUseFocusVisible;\n }\n if (!canUseDOM()) {\n _canUseFocusVisible = false;\n return _canUseFocusVisible;\n }\n // Check to see if the document supports the focus-visible element\n const styleElement = document.createElement(\"style\");\n // If nonces are present on the page, use it when creating the style element\n // to test focus-visible support.\n const styleNonce = getNonce();\n if (styleNonce !== null) {\n styleElement.setAttribute(\"nonce\", styleNonce);\n }\n document.head.appendChild(styleElement);\n try {\n styleElement.sheet.insertRule(\"foo:focus-visible {color:inherit}\", 0);\n _canUseFocusVisible = true;\n } catch (e) {\n _canUseFocusVisible = false;\n } finally {\n document.head.removeChild(styleElement);\n }\n return _canUseFocusVisible;\n}\n\n/**\n * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events\n * and should include all non-deprecated and non-experimental Standard events\n */\nconst eventFocus = \"focus\";\nconst eventFocusIn = \"focusin\";\nconst eventFocusOut = \"focusout\";\nconst eventKeyDown = \"keydown\";\nconst eventResize = \"resize\";\nconst eventScroll = \"scroll\";\n\n/**\n * Key Code values\n * @deprecated - KeyCodes are deprecated, use individual string key exports\n */\nvar KeyCodes;\n(function (KeyCodes) {\n KeyCodes[KeyCodes[\"alt\"] = 18] = \"alt\";\n KeyCodes[KeyCodes[\"arrowDown\"] = 40] = \"arrowDown\";\n KeyCodes[KeyCodes[\"arrowLeft\"] = 37] = \"arrowLeft\";\n KeyCodes[KeyCodes[\"arrowRight\"] = 39] = \"arrowRight\";\n KeyCodes[KeyCodes[\"arrowUp\"] = 38] = \"arrowUp\";\n KeyCodes[KeyCodes[\"back\"] = 8] = \"back\";\n KeyCodes[KeyCodes[\"backSlash\"] = 220] = \"backSlash\";\n KeyCodes[KeyCodes[\"break\"] = 19] = \"break\";\n KeyCodes[KeyCodes[\"capsLock\"] = 20] = \"capsLock\";\n KeyCodes[KeyCodes[\"closeBracket\"] = 221] = \"closeBracket\";\n KeyCodes[KeyCodes[\"colon\"] = 186] = \"colon\";\n KeyCodes[KeyCodes[\"colon2\"] = 59] = \"colon2\";\n KeyCodes[KeyCodes[\"comma\"] = 188] = \"comma\";\n KeyCodes[KeyCodes[\"ctrl\"] = 17] = \"ctrl\";\n KeyCodes[KeyCodes[\"delete\"] = 46] = \"delete\";\n KeyCodes[KeyCodes[\"end\"] = 35] = \"end\";\n KeyCodes[KeyCodes[\"enter\"] = 13] = \"enter\";\n KeyCodes[KeyCodes[\"equals\"] = 187] = \"equals\";\n KeyCodes[KeyCodes[\"equals2\"] = 61] = \"equals2\";\n KeyCodes[KeyCodes[\"equals3\"] = 107] = \"equals3\";\n KeyCodes[KeyCodes[\"escape\"] = 27] = \"escape\";\n KeyCodes[KeyCodes[\"forwardSlash\"] = 191] = \"forwardSlash\";\n KeyCodes[KeyCodes[\"function1\"] = 112] = \"function1\";\n KeyCodes[KeyCodes[\"function10\"] = 121] = \"function10\";\n KeyCodes[KeyCodes[\"function11\"] = 122] = \"function11\";\n KeyCodes[KeyCodes[\"function12\"] = 123] = \"function12\";\n KeyCodes[KeyCodes[\"function2\"] = 113] = \"function2\";\n KeyCodes[KeyCodes[\"function3\"] = 114] = \"function3\";\n KeyCodes[KeyCodes[\"function4\"] = 115] = \"function4\";\n KeyCodes[KeyCodes[\"function5\"] = 116] = \"function5\";\n KeyCodes[KeyCodes[\"function6\"] = 117] = \"function6\";\n KeyCodes[KeyCodes[\"function7\"] = 118] = \"function7\";\n KeyCodes[KeyCodes[\"function8\"] = 119] = \"function8\";\n KeyCodes[KeyCodes[\"function9\"] = 120] = \"function9\";\n KeyCodes[KeyCodes[\"home\"] = 36] = \"home\";\n KeyCodes[KeyCodes[\"insert\"] = 45] = \"insert\";\n KeyCodes[KeyCodes[\"menu\"] = 93] = \"menu\";\n KeyCodes[KeyCodes[\"minus\"] = 189] = \"minus\";\n KeyCodes[KeyCodes[\"minus2\"] = 109] = \"minus2\";\n KeyCodes[KeyCodes[\"numLock\"] = 144] = \"numLock\";\n KeyCodes[KeyCodes[\"numPad0\"] = 96] = \"numPad0\";\n KeyCodes[KeyCodes[\"numPad1\"] = 97] = \"numPad1\";\n KeyCodes[KeyCodes[\"numPad2\"] = 98] = \"numPad2\";\n KeyCodes[KeyCodes[\"numPad3\"] = 99] = \"numPad3\";\n KeyCodes[KeyCodes[\"numPad4\"] = 100] = \"numPad4\";\n KeyCodes[KeyCodes[\"numPad5\"] = 101] = \"numPad5\";\n KeyCodes[KeyCodes[\"numPad6\"] = 102] = \"numPad6\";\n KeyCodes[KeyCodes[\"numPad7\"] = 103] = \"numPad7\";\n KeyCodes[KeyCodes[\"numPad8\"] = 104] = \"numPad8\";\n KeyCodes[KeyCodes[\"numPad9\"] = 105] = \"numPad9\";\n KeyCodes[KeyCodes[\"numPadDivide\"] = 111] = \"numPadDivide\";\n KeyCodes[KeyCodes[\"numPadDot\"] = 110] = \"numPadDot\";\n KeyCodes[KeyCodes[\"numPadMinus\"] = 109] = \"numPadMinus\";\n KeyCodes[KeyCodes[\"numPadMultiply\"] = 106] = \"numPadMultiply\";\n KeyCodes[KeyCodes[\"numPadPlus\"] = 107] = \"numPadPlus\";\n KeyCodes[KeyCodes[\"openBracket\"] = 219] = \"openBracket\";\n KeyCodes[KeyCodes[\"pageDown\"] = 34] = \"pageDown\";\n KeyCodes[KeyCodes[\"pageUp\"] = 33] = \"pageUp\";\n KeyCodes[KeyCodes[\"period\"] = 190] = \"period\";\n KeyCodes[KeyCodes[\"print\"] = 44] = \"print\";\n KeyCodes[KeyCodes[\"quote\"] = 222] = \"quote\";\n KeyCodes[KeyCodes[\"scrollLock\"] = 145] = \"scrollLock\";\n KeyCodes[KeyCodes[\"shift\"] = 16] = \"shift\";\n KeyCodes[KeyCodes[\"space\"] = 32] = \"space\";\n KeyCodes[KeyCodes[\"tab\"] = 9] = \"tab\";\n KeyCodes[KeyCodes[\"tilde\"] = 192] = \"tilde\";\n KeyCodes[KeyCodes[\"windowsLeft\"] = 91] = \"windowsLeft\";\n KeyCodes[KeyCodes[\"windowsOpera\"] = 219] = \"windowsOpera\";\n KeyCodes[KeyCodes[\"windowsRight\"] = 92] = \"windowsRight\";\n})(KeyCodes || (KeyCodes = {}));\n/**\n * String values for use with KeyboardEvent.key\n */\nconst keyArrowDown = \"ArrowDown\";\nconst keyArrowLeft = \"ArrowLeft\";\nconst keyArrowRight = \"ArrowRight\";\nconst keyArrowUp = \"ArrowUp\";\nconst keyEnter = \"Enter\";\nconst keyEscape = \"Escape\";\nconst keyHome = \"Home\";\nconst keyEnd = \"End\";\nconst keyFunction2 = \"F2\";\nconst keyPageDown = \"PageDown\";\nconst keyPageUp = \"PageUp\";\nconst keySpace = \" \";\nconst keyTab = \"Tab\";\nconst ArrowKeys = {\n ArrowDown: keyArrowDown,\n ArrowLeft: keyArrowLeft,\n ArrowRight: keyArrowRight,\n ArrowUp: keyArrowUp\n};\n\n/**\n * Expose ltr and rtl strings\n */\nvar Direction;\n(function (Direction) {\n Direction[\"ltr\"] = \"ltr\";\n Direction[\"rtl\"] = \"rtl\";\n})(Direction || (Direction = {}));\n\n/**\n * This method keeps a given value within the bounds of a min and max value. If the value\n * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,\n * the maximum will be returned. Otherwise, the value is returned un-changed.\n */\nfunction wrapInBounds(min, max, value) {\n if (value < min) {\n return max;\n } else if (value > max) {\n return min;\n }\n return value;\n}\n/**\n * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.\n * If value is greater than max, max will be returned.\n */\nfunction limit(min, max, value) {\n return Math.min(Math.max(value, min), max);\n}\n/**\n * Determines if a number value is within a specified range.\n *\n * @param value - the value to check\n * @param min - the range start\n * @param max - the range end\n */\nfunction inRange(value, min, max = 0) {\n [min, max] = [min, max].sort((a, b) => a - b);\n return min <= value && value < max;\n}\n\nlet uniqueIdCounter = 0;\n/**\n * Generates a unique ID based on incrementing a counter.\n */\nfunction uniqueId(prefix = \"\") {\n return `${prefix}${uniqueIdCounter++}`;\n}\n\n/**\n * Define system colors for use in CSS stylesheets.\n *\n * https://drafts.csswg.org/css-color/#css-system-colors\n */\nvar SystemColors;\n(function (SystemColors) {\n SystemColors[\"Canvas\"] = \"Canvas\";\n SystemColors[\"CanvasText\"] = \"CanvasText\";\n SystemColors[\"LinkText\"] = \"LinkText\";\n SystemColors[\"VisitedText\"] = \"VisitedText\";\n SystemColors[\"ActiveText\"] = \"ActiveText\";\n SystemColors[\"ButtonFace\"] = \"ButtonFace\";\n SystemColors[\"ButtonText\"] = \"ButtonText\";\n SystemColors[\"Field\"] = \"Field\";\n SystemColors[\"FieldText\"] = \"FieldText\";\n SystemColors[\"Highlight\"] = \"Highlight\";\n SystemColors[\"HighlightText\"] = \"HighlightText\";\n SystemColors[\"GrayText\"] = \"GrayText\";\n})(SystemColors || (SystemColors = {}));\n\n/**\n * Expand mode for {@link Accordion}\n * @public\n */\nconst AccordionExpandMode = {\n /**\n * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.\n */\n single: \"single\",\n /**\n * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.\n */\n multi: \"multi\"\n};\n/**\n * An Accordion Custom HTML Element\n * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.\n *\n * @fires change - Fires a custom 'change' event when the active item changes\n * @csspart item - The slot for the accordion items\n * @public\n *\n * @remarks\n * Designed to be used with {@link @microsoft/fast-foundation#accordionTemplate} and {@link @microsoft/fast-foundation#(AccordionItem:class)}.\n */\nclass Accordion extends FoundationElement {\n constructor() {\n super(...arguments);\n /**\n * Controls the expand mode of the Accordion, either allowing\n * single or multiple item expansion.\n * @public\n *\n * @remarks\n * HTML attribute: expand-mode\n */\n this.expandmode = AccordionExpandMode.multi;\n this.activeItemIndex = 0;\n this.change = () => {\n this.$emit(\"change\", this.activeid);\n };\n this.setItems = () => {\n var _a;\n if (this.accordionItems.length === 0) {\n return;\n }\n this.accordionIds = this.getItemIds();\n this.accordionItems.forEach((item, index) => {\n if (item instanceof AccordionItem) {\n item.addEventListener(\"change\", this.activeItemChange);\n if (this.isSingleExpandMode()) {\n this.activeItemIndex !== index ? item.expanded = false : item.expanded = true;\n }\n }\n const itemId = this.accordionIds[index];\n item.setAttribute(\"id\", typeof itemId !== \"string\" ? `accordion-${index + 1}` : itemId);\n this.activeid = this.accordionIds[this.activeItemIndex];\n item.addEventListener(\"keydown\", this.handleItemKeyDown);\n item.addEventListener(\"focus\", this.handleItemFocus);\n });\n if (this.isSingleExpandMode()) {\n const expandedItem = (_a = this.findExpandedItem()) !== null && _a !== void 0 ? _a : this.accordionItems[0];\n expandedItem.setAttribute(\"aria-disabled\", \"true\");\n }\n };\n this.removeItemListeners = oldValue => {\n oldValue.forEach((item, index) => {\n item.removeEventListener(\"change\", this.activeItemChange);\n item.removeEventListener(\"keydown\", this.handleItemKeyDown);\n item.removeEventListener(\"focus\", this.handleItemFocus);\n });\n };\n this.activeItemChange = event => {\n if (event.defaultPrevented || event.target !== event.currentTarget) {\n return;\n }\n event.preventDefault();\n const selectedItem = event.target;\n this.activeid = selectedItem.getAttribute(\"id\");\n if (this.isSingleExpandMode()) {\n this.resetItems();\n selectedItem.expanded = true;\n selectedItem.setAttribute(\"aria-disabled\", \"true\");\n this.accordionItems.forEach(item => {\n if (!item.hasAttribute(\"disabled\") && item.id !== this.activeid) {\n item.removeAttribute(\"aria-disabled\");\n }\n });\n }\n this.activeItemIndex = Array.from(this.accordionItems).indexOf(selectedItem);\n this.change();\n };\n this.handleItemKeyDown = event => {\n // only handle the keydown if the event target is the accordion item\n // prevents arrow keys from moving focus to accordion headers when focus is on accordion item panel content\n if (event.target !== event.currentTarget) {\n return;\n }\n this.accordionIds = this.getItemIds();\n switch (event.key) {\n case keyArrowUp:\n event.preventDefault();\n this.adjust(-1);\n break;\n case keyArrowDown:\n event.preventDefault();\n this.adjust(1);\n break;\n case keyHome:\n this.activeItemIndex = 0;\n this.focusItem();\n break;\n case keyEnd:\n this.activeItemIndex = this.accordionItems.length - 1;\n this.focusItem();\n break;\n }\n };\n this.handleItemFocus = event => {\n // 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\n // only do so if the focus is actually on the accordion item and not on any of its children\n if (event.target === event.currentTarget) {\n const focusedItem = event.target;\n const focusedIndex = this.activeItemIndex = Array.from(this.accordionItems).indexOf(focusedItem);\n if (this.activeItemIndex !== focusedIndex && focusedIndex !== -1) {\n this.activeItemIndex = focusedIndex;\n this.activeid = this.accordionIds[this.activeItemIndex];\n }\n }\n };\n }\n /**\n * @internal\n */\n accordionItemsChanged(oldValue, newValue) {\n if (this.$fastController.isConnected) {\n this.removeItemListeners(oldValue);\n this.setItems();\n }\n }\n findExpandedItem() {\n for (let item = 0; item < this.accordionItems.length; item++) {\n if (this.accordionItems[item].getAttribute(\"expanded\") === \"true\") {\n return this.accordionItems[item];\n }\n }\n return null;\n }\n resetItems() {\n this.accordionItems.forEach((item, index) => {\n item.expanded = false;\n });\n }\n getItemIds() {\n return this.accordionItems.map(accordionItem => {\n return accordionItem.getAttribute(\"id\");\n });\n }\n isSingleExpandMode() {\n return this.expandmode === AccordionExpandMode.single;\n }\n adjust(adjustment) {\n this.activeItemIndex = wrapInBounds(0, this.accordionItems.length - 1, this.activeItemIndex + adjustment);\n this.focusItem();\n }\n focusItem() {\n const element = this.accordionItems[this.activeItemIndex];\n if (element instanceof AccordionItem) {\n element.expandbutton.focus();\n }\n }\n}\n__decorate$1([attr({\n attribute: \"expand-mode\"\n})], Accordion.prototype, \"expandmode\", void 0);\n__decorate$1([observable], Accordion.prototype, \"accordionItems\", void 0);\n\n/**\n * The template for the {@link @microsoft/fast-foundation#(Anchor:class)} component.\n * @public\n */\nconst anchorTemplate = (context, definition) => html` x.download}\" href=\"${x => x.href}\" hreflang=\"${x => x.hreflang}\" ping=\"${x => x.ping}\" referrerpolicy=\"${x => x.referrerpolicy}\" rel=\"${x => x.rel}\" target=\"${x => x.target}\" type=\"${x => x.type}\" aria-atomic=\"${x => x.ariaAtomic}\" aria-busy=\"${x => x.ariaBusy}\" aria-controls=\"${x => x.ariaControls}\" aria-current=\"${x => x.ariaCurrent}\" aria-describedby=\"${x => x.ariaDescribedby}\" aria-details=\"${x => x.ariaDetails}\" aria-disabled=\"${x => x.ariaDisabled}\" aria-errormessage=\"${x => x.ariaErrormessage}\" aria-expanded=\"${x => x.ariaExpanded}\" aria-flowto=\"${x => x.ariaFlowto}\" aria-haspopup=\"${x => x.ariaHaspopup}\" aria-hidden=\"${x => x.ariaHidden}\" aria-invalid=\"${x => x.ariaInvalid}\" aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\" aria-label=\"${x => x.ariaLabel}\" aria-labelledby=\"${x => x.ariaLabelledby}\" aria-live=\"${x => x.ariaLive}\" aria-owns=\"${x => x.ariaOwns}\" aria-relevant=\"${x => x.ariaRelevant}\" aria-roledescription=\"${x => x.ariaRoledescription}\" ${ref(\"control\")}>${startSlotTemplate(context, definition)}${endSlotTemplate(context, definition)}`;\n\n/**\n * Some states and properties are applicable to all host language elements regardless of whether a role is applied.\n * The following global states and properties are supported by all roles and by all base markup elements.\n * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}\n *\n * This is intended to be used as a mixin. Be sure you extend FASTElement.\n *\n * @public\n */\nclass ARIAGlobalStatesAndProperties {}\n__decorate$1([attr({\n attribute: \"aria-atomic\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaAtomic\", void 0);\n__decorate$1([attr({\n attribute: \"aria-busy\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaBusy\", void 0);\n__decorate$1([attr({\n attribute: \"aria-controls\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaControls\", void 0);\n__decorate$1([attr({\n attribute: \"aria-current\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaCurrent\", void 0);\n__decorate$1([attr({\n attribute: \"aria-describedby\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaDescribedby\", void 0);\n__decorate$1([attr({\n attribute: \"aria-details\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaDetails\", void 0);\n__decorate$1([attr({\n attribute: \"aria-disabled\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaDisabled\", void 0);\n__decorate$1([attr({\n attribute: \"aria-errormessage\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaErrormessage\", void 0);\n__decorate$1([attr({\n attribute: \"aria-flowto\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaFlowto\", void 0);\n__decorate$1([attr({\n attribute: \"aria-haspopup\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaHaspopup\", void 0);\n__decorate$1([attr({\n attribute: \"aria-hidden\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaHidden\", void 0);\n__decorate$1([attr({\n attribute: \"aria-invalid\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaInvalid\", void 0);\n__decorate$1([attr({\n attribute: \"aria-keyshortcuts\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaKeyshortcuts\", void 0);\n__decorate$1([attr({\n attribute: \"aria-label\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaLabel\", void 0);\n__decorate$1([attr({\n attribute: \"aria-labelledby\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaLabelledby\", void 0);\n__decorate$1([attr({\n attribute: \"aria-live\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaLive\", void 0);\n__decorate$1([attr({\n attribute: \"aria-owns\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaOwns\", void 0);\n__decorate$1([attr({\n attribute: \"aria-relevant\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaRelevant\", void 0);\n__decorate$1([attr({\n attribute: \"aria-roledescription\"\n})], ARIAGlobalStatesAndProperties.prototype, \"ariaRoledescription\", void 0);\n\n/**\n * An Anchor Custom HTML Element.\n * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | element }.\n *\n * @slot start - Content which can be provided before the anchor content\n * @slot end - Content which can be provided after the anchor content\n * @slot - The default slot for anchor content\n * @csspart control - The anchor element\n * @csspart content - The element wrapping anchor content\n *\n * @public\n */\nclass Anchor$1 extends FoundationElement {\n constructor() {\n super(...arguments);\n /**\n * Overrides the focus call for where delegatesFocus is unsupported.\n * This check works for Chrome, Edge Chromium, FireFox, and Safari\n * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858\n */\n this.handleUnsupportedDelegatesFocus = () => {\n var _a;\n // Check to see if delegatesFocus is supported\n if (window.ShadowRoot && !window.ShadowRoot.prototype.hasOwnProperty(\"delegatesFocus\") && ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {\n this.focus = () => {\n var _a;\n (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();\n };\n }\n };\n }\n /**\n * @internal\n */\n connectedCallback() {\n super.connectedCallback();\n this.handleUnsupportedDelegatesFocus();\n }\n}\n__decorate$1([attr], Anchor$1.prototype, \"download\", void 0);\n__decorate$1([attr], Anchor$1.prototype, \"href\", void 0);\n__decorate$1([attr], Anchor$1.prototype, \"hreflang\", void 0);\n__decorate$1([attr], Anchor$1.prototype, \"ping\", void 0);\n__decorate$1([attr], Anchor$1.prototype, \"referrerpolicy\", void 0);\n__decorate$1([attr], Anchor$1.prototype, \"rel\", void 0);\n__decorate$1([attr], Anchor$1.prototype, \"target\", void 0);\n__decorate$1([attr], Anchor$1.prototype, \"type\", void 0);\n__decorate$1([observable], Anchor$1.prototype, \"defaultSlottedContent\", void 0);\n/**\n * Includes ARIA states and properties relating to the ARIA link role\n *\n * @public\n */\nclass DelegatesARIALink {}\n__decorate$1([attr({\n attribute: \"aria-expanded\"\n})], DelegatesARIALink.prototype, \"ariaExpanded\", void 0);\napplyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);\napplyMixins(Anchor$1, StartEnd, DelegatesARIALink);\n\n/**\n * The template for the {@link @microsoft/fast-foundation#(AnchoredRegion:class)} component.\n * @public\n */\nconst anchoredRegionTemplate = (context, definition) => html``;\n\n/**\n * a method to determine the current localization direction of the view\n * @param rootNode - the HTMLElement to begin the query from, usually \"this\" when used in a component controller\n * @public\n */\nconst getDirection = rootNode => {\n const dirNode = rootNode.closest(\"[dir]\");\n return dirNode !== null && dirNode.dir === \"rtl\" ? Direction.rtl : Direction.ltr;\n};\n\n/**\n * A service to batch intersection event callbacks so multiple elements can share a single observer\n *\n * @public\n */\nclass IntersectionService {\n constructor() {\n this.intersectionDetector = null;\n this.observedElements = new Map();\n /**\n * Request the position of a target element\n *\n * @internal\n */\n this.requestPosition = (target, callback) => {\n var _a;\n if (this.intersectionDetector === null) {\n return;\n }\n if (this.observedElements.has(target)) {\n (_a = this.observedElements.get(target)) === null || _a === void 0 ? void 0 : _a.push(callback);\n return;\n }\n this.observedElements.set(target, [callback]);\n this.intersectionDetector.observe(target);\n };\n /**\n * Cancel a position request\n *\n * @internal\n */\n this.cancelRequestPosition = (target, callback) => {\n const callbacks = this.observedElements.get(target);\n if (callbacks !== undefined) {\n const callBackIndex = callbacks.indexOf(callback);\n if (callBackIndex !== -1) {\n callbacks.splice(callBackIndex, 1);\n }\n }\n };\n /**\n * initialize intersection detector\n */\n this.initializeIntersectionDetector = () => {\n if (!$global.IntersectionObserver) {\n //intersection observer not supported\n return;\n }\n this.intersectionDetector = new IntersectionObserver(this.handleIntersection, {\n root: null,\n rootMargin: \"0px\",\n threshold: [0, 1]\n });\n };\n /**\n * Handle intersections\n */\n this.handleIntersection = entries => {\n if (this.intersectionDetector === null) {\n return;\n }\n const pendingCallbacks = [];\n const pendingCallbackParams = [];\n // go through the entries to build a list of callbacks and params for each\n entries.forEach(entry => {\n var _a;\n // stop watching this element until we get new update requests for it\n (_a = this.intersectionDetector) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);\n const thisElementCallbacks = this.observedElements.get(entry.target);\n if (thisElementCallbacks !== undefined) {\n thisElementCallbacks.forEach(callback => {\n let targetCallbackIndex = pendingCallbacks.indexOf(callback);\n if (targetCallbackIndex === -1) {\n targetCallbackIndex = pendingCallbacks.length;\n pendingCallbacks.push(callback);\n pendingCallbackParams.push([]);\n }\n pendingCallbackParams[targetCallbackIndex].push(entry);\n });\n this.observedElements.delete(entry.target);\n }\n });\n // execute callbacks\n pendingCallbacks.forEach((callback, index) => {\n callback(pendingCallbackParams[index]);\n });\n };\n this.initializeIntersectionDetector();\n }\n}\n\n/**\n * An anchored region Custom HTML Element.\n *\n * @slot - The default slot for the content\n * @fires loaded - Fires a custom 'loaded' event when the region is loaded and visible\n * @fires positionchange - Fires a custom 'positionchange' event when the position has changed\n *\n * @public\n */\nclass AnchoredRegion extends FoundationElement {\n constructor() {\n super(...arguments);\n /**\n * The HTML ID of the anchor element this region is positioned relative to\n *\n * @public\n * @remarks\n * HTML Attribute: anchor\n */\n this.anchor = \"\";\n /**\n * The HTML ID of the viewport element this region is positioned relative to\n *\n * @public\n * @remarks\n * HTML Attribute: anchor\n */\n this.viewport = \"\";\n /**\n * Sets what logic the component uses to determine horizontal placement.\n * 'locktodefault' forces the default position\n * 'dynamic' decides placement based on available space\n * 'uncontrolled' does not control placement on the horizontal axis\n *\n * @public\n * @remarks\n * HTML Attribute: horizontal-positioning-mode\n */\n this.horizontalPositioningMode = \"uncontrolled\";\n /**\n * The default horizontal position of the region relative to the anchor element\n *\n * @public\n * @remarks\n * HTML Attribute: horizontal-default-position\n */\n this.horizontalDefaultPosition = \"unset\";\n /**\n * Whether the region remains in the viewport (ie. detaches from the anchor) on the horizontal axis\n *\n * @public\n * @remarks\n * HTML Attribute: horizontal-viewport-lock\n */\n this.horizontalViewportLock = false;\n /**\n * Whether the region overlaps the anchor on the horizontal axis\n *\n * @public\n * @remarks\n * HTML Attribute: horizontal-inset\n */\n this.horizontalInset = false;\n /**\n * Defines how the width of the region is calculated\n *\n * @public\n * @remarks\n * HTML Attribute: horizontal-scaling\n */\n this.horizontalScaling = \"content\";\n /**\n * Sets what logic the component uses to determine vertical placement.\n * 'locktodefault' forces the default position\n * 'dynamic' decides placement based on available space\n * 'uncontrolled' does not control placement on the vertical axis\n *\n * @public\n * @remarks\n * HTML Attribute: vertical-positioning-mode\n */\n this.verticalPositioningMode = \"uncontrolled\";\n /**\n * The default vertical position of the region relative to the anchor element\n *\n * @public\n * @remarks\n * HTML Attribute: vertical-default-position\n */\n this.verticalDefaultPosition = \"unset\";\n /**\n * Whether the region remains in the viewport (ie. detaches from the anchor) on the vertical axis\n *\n * @public\n * @remarks\n * HTML Attribute: vertical-viewport-lock\n */\n this.verticalViewportLock = false;\n /**\n * Whether the region overlaps the anchor on the vertical axis\n *\n * @public\n * @remarks\n * HTML Attribute: vertical-inset\n */\n this.verticalInset = false;\n /**\n * Defines how the height of the region is calculated\n *\n * @public\n * @remarks\n * HTML Attribute: vertical-scaling\n */\n this.verticalScaling = \"content\";\n /**\n * Whether the region is positioned using css \"position: fixed\".\n * Otherwise the region uses \"position: absolute\".\n * Fixed placement allows the region to break out of parent containers,\n *\n * @public\n * @remarks\n * HTML Attribute: fixed-placement\n */\n this.fixedPlacement = false;\n /**\n * Defines what triggers the anchored region to revaluate positioning\n *\n * @public\n * @remarks\n * HTML Attribute: auto-update-mode\n */\n this.autoUpdateMode = \"anchor\";\n /**\n * The HTML element being used as the anchor\n *\n * @public\n */\n this.anchorElement = null;\n /**\n * The HTML element being used as the viewport\n *\n * @public\n */\n this.viewportElement = null;\n /**\n * indicates that an initial positioning pass on layout has completed\n *\n * @internal\n */\n this.initialLayoutComplete = false;\n this.resizeDetector = null;\n /**\n * base offsets between the positioner's base position and the anchor's\n */\n this.baseHorizontalOffset = 0;\n this.baseVerticalOffset = 0;\n this.pendingPositioningUpdate = false;\n this.pendingReset = false;\n this.currentDirection = Direction.ltr;\n this.regionVisible = false;\n // indicates that a layout update should occur even if geometry has not changed\n // used to ensure some attribute changes are applied\n this.forceUpdate = false;\n // defines how big a difference in pixels there must be between states to\n // justify a layout update that affects the dom (prevents repeated sub-pixel corrections)\n this.updateThreshold = 0.5;\n /**\n * update position\n */\n this.update = () => {\n if (!this.pendingPositioningUpdate) {\n this.requestPositionUpdates();\n }\n };\n /**\n * starts observers\n */\n this.startObservers = () => {\n this.stopObservers();\n if (this.anchorElement === null) {\n return;\n }\n this.requestPositionUpdates();\n if (this.resizeDetector !== null) {\n this.resizeDetector.observe(this.anchorElement);\n this.resizeDetector.observe(this);\n }\n };\n /**\n * get position updates\n */\n this.requestPositionUpdates = () => {\n if (this.anchorElement === null || this.pendingPositioningUpdate) {\n return;\n }\n AnchoredRegion.intersectionService.requestPosition(this, this.handleIntersection);\n AnchoredRegion.intersectionService.requestPosition(this.anchorElement, this.handleIntersection);\n if (this.viewportElement !== null) {\n AnchoredRegion.intersectionService.requestPosition(this.viewportElement, this.handleIntersection);\n }\n this.pendingPositioningUpdate = true;\n };\n /**\n * stops observers\n */\n this.stopObservers = () => {\n if (this.pendingPositioningUpdate) {\n this.pendingPositioningUpdate = false;\n AnchoredRegion.intersectionService.cancelRequestPosition(this, this.handleIntersection);\n if (this.anchorElement !== null) {\n AnchoredRegion.intersectionService.cancelRequestPosition(this.anchorElement, this.handleIntersection);\n }\n if (this.viewportElement !== null) {\n AnchoredRegion.intersectionService.cancelRequestPosition(this.viewportElement, this.handleIntersection);\n }\n }\n if (this.resizeDetector !== null) {\n this.resizeDetector.disconnect();\n }\n };\n /**\n * Gets the viewport element by id, or defaults to document root\n */\n this.getViewport = () => {\n if (typeof this.viewport !== \"string\" || this.viewport === \"\") {\n return document.documentElement;\n }\n return document.getElementById(this.viewport);\n };\n /**\n * Gets the anchor element by id\n */\n this.getAnchor = () => {\n return document.getElementById(this.anchor);\n };\n /**\n * Handle intersections\n */\n this.handleIntersection = entries => {\n if (!this.pendingPositioningUpdate) {\n return;\n }\n this.pendingPositioningUpdate = false;\n if (!this.applyIntersectionEntries(entries)) {\n return;\n }\n this.updateLayout();\n };\n /**\n * iterate through intersection entries and apply data\n */\n this.applyIntersectionEntries = entries => {\n const regionEntry = entries.find(x => x.target === this);\n const anchorEntry = entries.find(x => x.target === this.anchorElement);\n const viewportEntry = entries.find(x => x.target === this.viewportElement);\n if (regionEntry === undefined || viewportEntry === undefined || anchorEntry === undefined) {\n return false;\n }\n // don't update the dom unless there is a significant difference in rect positions\n 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)) {\n this.regionRect = regionEntry.boundingClientRect;\n this.anchorRect = anchorEntry.boundingClientRect;\n if (this.viewportElement === document.documentElement) {\n this.viewportRect = new DOMRectReadOnly(viewportEntry.boundingClientRect.x + document.documentElement.scrollLeft, viewportEntry.boundingClientRect.y + document.documentElement.scrollTop, viewportEntry.boundingClientRect.width, viewportEntry.boundingClientRect.height);\n } else {\n this.viewportRect = viewportEntry.boundingClientRect;\n }\n this.updateRegionOffset();\n this.forceUpdate = false;\n return true;\n }\n return false;\n };\n /**\n * Update the offset values\n */\n this.updateRegionOffset = () => {\n if (this.anchorRect && this.regionRect) {\n this.baseHorizontalOffset = this.baseHorizontalOffset + (this.anchorRect.left - this.regionRect.left) + (this.translateX - this.baseHorizontalOffset);\n this.baseVerticalOffset = this.baseVerticalOffset + (this.anchorRect.top - this.regionRect.top) + (this.translateY - this.baseVerticalOffset);\n }\n };\n /**\n * compare rects to see if there is enough change to justify a DOM update\n */\n this.isRectDifferent = (rectA, rectB) => {\n 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) {\n return true;\n }\n return false;\n };\n /**\n * Handle resize events\n */\n this.handleResize = entries => {\n this.update();\n };\n /**\n * resets the component\n */\n this.reset = () => {\n if (!this.pendingReset) {\n return;\n }\n this.pendingReset = false;\n if (this.anchorElement === null) {\n this.anchorElement = this.getAnchor();\n }\n if (this.viewportElement === null) {\n this.viewportElement = this.getViewport();\n }\n this.currentDirection = getDirection(this);\n this.startObservers();\n };\n /**\n * Recalculate layout related state values\n */\n this.updateLayout = () => {\n let desiredVerticalPosition = undefined;\n let desiredHorizontalPosition = undefined;\n if (this.horizontalPositioningMode !== \"uncontrolled\") {\n const horizontalOptions = this.getPositioningOptions(this.horizontalInset);\n if (this.horizontalDefaultPosition === \"center\") {\n desiredHorizontalPosition = \"center\";\n } else if (this.horizontalDefaultPosition !== \"unset\") {\n let dirCorrectedHorizontalDefaultPosition = this.horizontalDefaultPosition;\n if (dirCorrectedHorizontalDefaultPosition === \"start\" || dirCorrectedHorizontalDefaultPosition === \"end\") {\n // if direction changes we reset the layout\n const newDirection = getDirection(this);\n if (newDirection !== this.currentDirection) {\n this.currentDirection = newDirection;\n this.initialize();\n return;\n }\n if (this.currentDirection === Direction.ltr) {\n dirCorrectedHorizontalDefaultPosition = dirCorrectedHorizontalDefaultPosition === \"start\" ? \"left\" : \"right\";\n } else {\n dirCorrectedHorizontalDefaultPosition = dirCorrectedHorizontalDefaultPosition === \"start\" ? \"right\" : \"left\";\n }\n }\n switch (dirCorrectedHorizontalDefaultPosition) {\n case \"left\":\n desiredHorizontalPosition = this.horizontalInset ? \"insetStart\" : \"start\";\n break;\n case \"right\":\n desiredHorizontalPosition = this.horizontalInset ? \"insetEnd\" : \"end\";\n break;\n }\n }\n const horizontalThreshold = this.horizontalThreshold !== undefined ? this.horizontalThreshold : this.regionRect !== undefined ? this.regionRect.width : 0;\n const anchorLeft = this.anchorRect !== undefined ? this.anchorRect.left : 0;\n const anchorRight = this.anchorRect !== undefined ? this.anchorRect.right : 0;\n const anchorWidth = this.anchorRect !== undefined ? this.anchorRect.width : 0;\n const viewportLeft = this.viewportRect !== undefined ? this.viewportRect.left : 0;\n const viewportRight = this.viewportRect !== undefined ? this.viewportRect.right : 0;\n if (desiredHorizontalPosition === undefined || !(this.horizontalPositioningMode === \"locktodefault\") && this.getAvailableSpace(desiredHorizontalPosition, anchorLeft, anchorRight, anchorWidth, viewportLeft, viewportRight) < horizontalThreshold) {\n desiredHorizontalPosition = this.getAvailableSpace(horizontalOptions[0], anchorLeft, anchorRight, anchorWidth, viewportLeft, viewportRight) > this.getAvailableSpace(horizontalOptions[1], anchorLeft, anchorRight, anchorWidth, viewportLeft, viewportRight) ? horizontalOptions[0] : horizontalOptions[1];\n }\n }\n if (this.verticalPositioningMode !== \"uncontrolled\") {\n const verticalOptions = this.getPositioningOptions(this.verticalInset);\n if (this.verticalDefaultPosition === \"center\") {\n desiredVerticalPosition = \"center\";\n } else if (this.verticalDefaultPosition !== \"unset\") {\n switch (this.verticalDefaultPosition) {\n case \"top\":\n desiredVerticalPosition = this.verticalInset ? \"insetStart\" : \"start\";\n break;\n case \"bottom\":\n desiredVerticalPosition = this.verticalInset ? \"insetEnd\" : \"end\";\n break;\n }\n }\n const verticalThreshold = this.verticalThreshold !== undefined ? this.verticalThreshold : this.regionRect !== undefined ? this.regionRect.height : 0;\n const anchorTop = this.anchorRect !== undefined ? this.anchorRect.top : 0;\n const anchorBottom = this.anchorRect !== undefined ? this.anchorRect.bottom : 0;\n const anchorHeight = this.anchorRect !== undefined ? this.anchorRect.height : 0;\n const viewportTop = this.viewportRect !== undefined ? this.viewportRect.top : 0;\n const viewportBottom = this.viewportRect !== undefined ? this.viewportRect.bottom : 0;\n if (desiredVerticalPosition === undefined || !(this.verticalPositioningMode === \"locktodefault\") && this.getAvailableSpace(desiredVerticalPosition, anchorTop, anchorBottom, anchorHeight, viewportTop, viewportBottom) < verticalThreshold) {\n desiredVerticalPosition = this.getAvailableSpace(verticalOptions[0], anchorTop, anchorBottom, anchorHeight, viewportTop, viewportBottom) > this.getAvailableSpace(verticalOptions[1], anchorTop, anchorBottom, anchorHeight, viewportTop, viewportBottom) ? verticalOptions[0] : verticalOptions[1];\n }\n }\n const nextPositionerDimension = this.getNextRegionDimension(desiredHorizontalPosition, desiredVerticalPosition);\n const positionChanged = this.horizontalPosition !== desiredHorizontalPosition || this.verticalPosition !== desiredVerticalPosition;\n this.setHorizontalPosition(desiredHorizontalPosition, nextPositionerDimension);\n this.setVerticalPosition(desiredVerticalPosition, nextPositionerDimension);\n this.updateRegionStyle();\n if (!this.initialLayoutComplete) {\n this.initialLayoutComplete = true;\n this.requestPositionUpdates();\n return;\n }\n if (!this.regionVisible) {\n this.regionVisible = true;\n this.style.removeProperty(\"pointer-events\");\n this.style.removeProperty(\"opacity\");\n this.classList.toggle(\"loaded\", true);\n this.$emit(\"loaded\", this, {\n bubbles: false\n });\n }\n this.updatePositionClasses();\n if (positionChanged) {\n // emit change event\n this.$emit(\"positionchange\", this, {\n bubbles: false\n });\n }\n };\n /**\n * Updates the style string applied to the region element as well as the css classes attached\n * to the root element\n */\n this.updateRegionStyle = () => {\n this.style.width = this.regionWidth;\n this.style.height = this.regionHeight;\n this.style.transform = `translate(${this.translateX}px, ${this.translateY}px)`;\n };\n /**\n * Updates the css classes that reflect the current position of the element\n */\n this.updatePositionClasses = () => {\n this.classList.toggle(\"top\", this.verticalPosition === \"start\");\n this.classList.toggle(\"bottom\", this.verticalPosition === \"end\");\n this.classList.toggle(\"inset-top\", this.verticalPosition === \"insetStart\");\n this.classList.toggle(\"inset-bottom\", this.verticalPosition === \"insetEnd\");\n this.classList.toggle(\"vertical-center\", this.verticalPosition === \"center\");\n this.classList.toggle(\"left\", this.horizontalPosition === \"start\");\n this.classList.toggle(\"right\", this.horizontalPosition === \"end\");\n this.classList.toggle(\"inset-left\", this.horizontalPosition === \"insetStart\");\n this.classList.toggle(\"inset-right\", this.horizontalPosition === \"insetEnd\");\n this.classList.toggle(\"horizontal-center\", this.horizontalPosition === \"center\");\n };\n /**\n * Get horizontal positioning state based on desired position\n */\n this.setHorizontalPosition = (desiredHorizontalPosition, nextPositionerDimension) => {\n if (desiredHorizontalPosition === undefined || this.regionRect === undefined || this.anchorRect === undefined || this.viewportRect === undefined) {\n return;\n }\n let nextRegionWidth = 0;\n switch (this.horizontalScaling) {\n case \"anchor\":\n case \"fill\":\n nextRegionWidth = this.horizontalViewportLock ? this.viewportRect.width : nextPositionerDimension.width;\n this.regionWidth = `${nextRegionWidth}px`;\n break;\n case \"content\":\n nextRegionWidth = this.regionRect.width;\n this.regionWidth = \"unset\";\n break;\n }\n let sizeDelta = 0;\n switch (desiredHorizontalPosition) {\n case \"start\":\n this.translateX = this.baseHorizontalOffset - nextRegionWidth;\n if (this.horizontalViewportLock && this.anchorRect.left > this.viewportRect.right) {\n this.translateX = this.translateX - (this.anchorRect.left - this.viewportRect.right);\n }\n break;\n case \"insetStart\":\n this.translateX = this.baseHorizontalOffset - nextRegionWidth + this.anchorRect.width;\n if (this.horizontalViewportLock && this.anchorRect.right > this.viewportRect.right) {\n this.translateX = this.translateX - (this.anchorRect.right - this.viewportRect.right);\n }\n break;\n case \"insetEnd\":\n this.translateX = this.baseHorizontalOffset;\n if (this.horizontalViewportLock && this.anchorRect.left < this.viewportRect.left) {\n this.translateX = this.translateX - (this.anchorRect.left - this.viewportRect.left);\n }\n break;\n case \"end\":\n this.translateX = this.baseHorizontalOffset + this.anchorRect.width;\n if (this.horizontalViewportLock && this.anchorRect.right < this.viewportRect.left) {\n this.translateX = this.translateX - (this.anchorRect.right - this.viewportRect.left);\n }\n break;\n case \"center\":\n sizeDelta = (this.anchorRect.width - nextRegionWidth) / 2;\n this.translateX = this.baseHorizontalOffset + sizeDelta;\n if (this.horizontalViewportLock) {\n const regionLeft = this.anchorRect.left + sizeDelta;\n const regionRight = this.anchorRect.right - sizeDelta;\n if (regionLeft < this.viewportRect.left && !(regionRight > this.viewportRect.right)) {\n this.translateX = this.translateX - (regionLeft - this.viewportRect.left);\n } else if (regionRight > this.viewportRect.right && !(regionLeft < this.viewportRect.left)) {\n this.translateX = this.translateX - (regionRight - this.viewportRect.right);\n }\n }\n break;\n }\n this.horizontalPosition = desiredHorizontalPosition;\n };\n /**\n * Set vertical positioning state based on desired position\n */\n this.setVerticalPosition = (desiredVerticalPosition, nextPositionerDimension) => {\n if (desiredVerticalPosition === undefined || this.regionRect === undefined || this.anchorRect === undefined || this.viewportRect === undefined) {\n return;\n }\n let nextRegionHeight = 0;\n switch (this.verticalScaling) {\n case \"anchor\":\n case \"fill\":\n nextRegionHeight = this.verticalViewportLock ? this.viewportRect.height : nextPositionerDimension.height;\n this.regionHeight = `${nextRegionHeight}px`;\n break;\n case \"content\":\n nextRegionHeight = this.regionRect.height;\n this.regionHeight = \"unset\";\n break;\n }\n let sizeDelta = 0;\n switch (desiredVerticalPosition) {\n case \"start\":\n this.translateY = this.baseVerticalOffset - nextRegionHeight;\n if (this.verticalViewportLock && this.anchorRect.top > this.viewportRect.bottom) {\n this.translateY = this.translateY - (this.anchorRect.top - this.viewportRect.bottom);\n }\n break;\n case \"insetStart\":\n this.translateY = this.baseVerticalOffset - nextRegionHeight + this.anchorRect.height;\n if (this.verticalViewportLock && this.anchorRect.bottom > this.viewportRect.bottom) {\n this.translateY = this.translateY - (this.anchorRect.bottom - this.viewportRect.bottom);\n }\n break;\n case \"insetEnd\":\n this.translateY = this.baseVerticalOffset;\n if (this.verticalViewportLock && this.anchorRect.top < this.viewportRect.top) {\n this.translateY = this.translateY - (this.anchorRect.top - this.viewportRect.top);\n }\n break;\n case \"end\":\n this.translateY = this.baseVerticalOffset + this.anchorRect.height;\n if (this.verticalViewportLock && this.anchorRect.bottom < this.viewportRect.top) {\n this.translateY = this.translateY - (this.anchorRect.bottom - this.viewportRect.top);\n }\n break;\n case \"center\":\n sizeDelta = (this.anchorRect.height - nextRegionHeight) / 2;\n this.translateY = this.baseVerticalOffset + sizeDelta;\n if (this.verticalViewportLock) {\n const regionTop = this.anchorRect.top + sizeDelta;\n const regionBottom = this.anchorRect.bottom - sizeDelta;\n if (regionTop < this.viewportRect.top && !(regionBottom > this.viewportRect.bottom)) {\n this.translateY = this.translateY - (regionTop - this.viewportRect.top);\n } else if (regionBottom > this.viewportRect.bottom && !(regionTop < this.viewportRect.top)) {\n this.translateY = this.translateY - (regionBottom - this.viewportRect.bottom);\n }\n }\n }\n this.verticalPosition = desiredVerticalPosition;\n };\n /**\n * Get available positions based on positioning mode\n */\n this.getPositioningOptions = inset => {\n if (inset) {\n return [\"insetStart\", \"insetEnd\"];\n }\n return [\"start\", \"end\"];\n };\n /**\n * Get the space available for a particular relative position\n */\n this.getAvailableSpace = (positionOption, anchorStart, anchorEnd, anchorSpan, viewportStart, viewportEnd) => {\n const spaceStart = anchorStart - viewportStart;\n const spaceEnd = viewportEnd - (anchorStart + anchorSpan);\n switch (positionOption) {\n case \"start\":\n return spaceStart;\n case \"insetStart\":\n return spaceStart + anchorSpan;\n case \"insetEnd\":\n return spaceEnd + anchorSpan;\n case \"end\":\n return spaceEnd;\n case \"center\":\n return Math.min(spaceStart, spaceEnd) * 2 + anchorSpan;\n }\n };\n /**\n * Get region dimensions\n */\n this.getNextRegionDimension = (desiredHorizontalPosition, desiredVerticalPosition) => {\n const newRegionDimension = {\n height: this.regionRect !== undefined ? this.regionRect.height : 0,\n width: this.regionRect !== undefined ? this.regionRect.width : 0\n };\n if (desiredHorizontalPosition !== undefined && this.horizontalScaling === \"fill\") {\n 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);\n } else if (this.horizontalScaling === \"anchor\") {\n newRegionDimension.width = this.anchorRect !== undefined ? this.anchorRect.width : 0;\n }\n if (desiredVerticalPosition !== undefined && this.verticalScaling === \"fill\") {\n 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);\n } else if (this.verticalScaling === \"anchor\") {\n newRegionDimension.height = this.anchorRect !== undefined ? this.anchorRect.height : 0;\n }\n return newRegionDimension;\n };\n /**\n * starts event listeners that can trigger auto updating\n */\n this.startAutoUpdateEventListeners = () => {\n window.addEventListener(eventResize, this.update, {\n passive: true\n });\n window.addEventListener(eventScroll, this.update, {\n passive: true,\n capture: true\n });\n if (this.resizeDetector !== null && this.viewportElement !== null) {\n this.resizeDetector.observe(this.viewportElement);\n }\n };\n /**\n * stops event listeners that can trigger auto updating\n */\n this.stopAutoUpdateEventListeners = () => {\n window.removeEventListener(eventResize, this.update);\n window.removeEventListener(eventScroll, this.update);\n if (this.resizeDetector !== null && this.viewportElement !== null) {\n this.resizeDetector.unobserve(this.viewportElement);\n }\n };\n }\n anchorChanged() {\n if (this.initialLayoutComplete) {\n this.anchorElement = this.getAnchor();\n }\n }\n viewportChanged() {\n if (this.initialLayoutComplete) {\n this.viewportElement = this.getViewport();\n }\n }\n horizontalPositioningModeChanged() {\n this.requestReset();\n }\n horizontalDefaultPositionChanged() {\n this.updateForAttributeChange();\n }\n horizontalViewportLockChanged() {\n this.updateForAttributeChange();\n }\n horizontalInsetChanged() {\n this.updateForAttributeChange();\n }\n horizontalThresholdChanged() {\n this.updateForAttributeChange();\n }\n horizontalScalingChanged() {\n this.updateForAttributeChange();\n }\n verticalPositioningModeChanged() {\n this.requestReset();\n }\n verticalDefaultPositionChanged() {\n this.updateForAttributeChange();\n }\n verticalViewportLockChanged() {\n this.updateForAttributeChange();\n }\n verticalInsetChanged() {\n this.updateForAttributeChange();\n }\n verticalThresholdChanged() {\n this.updateForAttributeChange();\n }\n verticalScalingChanged() {\n this.updateForAttributeChange();\n }\n fixedPlacementChanged() {\n if (this.$fastController.isConnected && this.initialLayoutComplete) {\n this.initialize();\n }\n }\n autoUpdateModeChanged(prevMode, newMode) {\n if (this.$fastController.isConnected && this.initialLayoutComplete) {\n if (prevMode === \"auto\") {\n this.stopAutoUpdateEventListeners();\n }\n if (newMode === \"auto\") {\n this.startAutoUpdateEventListeners();\n }\n }\n }\n anchorElementChanged() {\n this.requestReset();\n }\n viewportElementChanged() {\n if (this.$fastController.isConnected && this.initialLayoutComplete) {\n this.initialize();\n }\n }\n /**\n * @internal\n */\n connectedCallback() {\n super.connectedCallback();\n if (this.autoUpdateMode === \"auto\") {\n this.startAutoUpdateEventListeners();\n }\n this.initialize();\n }\n /**\n * @internal\n */\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this.autoUpdateMode === \"auto\") {\n this.stopAutoUpdateEventListeners();\n }\n this.stopObservers();\n this.disconnectResizeDetector();\n }\n /**\n * @internal\n */\n adoptedCallback() {\n this.initialize();\n }\n /**\n * destroys the instance's resize observer\n */\n disconnectResizeDetector() {\n if (this.resizeDetector !== null) {\n this.resizeDetector.disconnect();\n this.resizeDetector = null;\n }\n }\n /**\n * initializes the instance's resize observer\n */\n initializeResizeDetector() {\n this.disconnectResizeDetector();\n this.resizeDetector = new window.ResizeObserver(this.handleResize);\n }\n /**\n * react to attribute changes that don't require a reset\n */\n updateForAttributeChange() {\n if (this.$fastController.isConnected && this.initialLayoutComplete) {\n this.forceUpdate = true;\n this.update();\n }\n }\n /**\n * fully initializes the component\n */\n initialize() {\n this.initializeResizeDetector();\n if (this.anchorElement === null) {\n this.anchorElement = this.getAnchor();\n }\n this.requestReset();\n }\n /**\n * Request a reset if there are currently no open requests\n */\n requestReset() {\n if (this.$fastController.isConnected && this.pendingReset === false) {\n this.setInitialState();\n DOM.queueUpdate(() => this.reset());\n this.pendingReset = true;\n }\n }\n /**\n * sets the starting configuration for component internal values\n */\n setInitialState() {\n this.initialLayoutComplete = false;\n this.regionVisible = false;\n this.translateX = 0;\n this.translateY = 0;\n this.baseHorizontalOffset = 0;\n this.baseVerticalOffset = 0;\n this.viewportRect = undefined;\n this.regionRect = undefined;\n this.anchorRect = undefined;\n this.verticalPosition = undefined;\n this.horizontalPosition = undefined;\n this.style.opacity = \"0\";\n this.style.pointerEvents = \"none\";\n this.forceUpdate = false;\n this.style.position = this.fixedPlacement ? \"fixed\" : \"absolute\";\n this.updatePositionClasses();\n this.updateRegionStyle();\n }\n}\nAnchoredRegion.intersectionService = new IntersectionService();\n__decorate$1([attr], AnchoredRegion.prototype, \"anchor\", void 0);\n__decorate$1([attr], AnchoredRegion.prototype, \"viewport\", void 0);\n__decorate$1([attr({\n attribute: \"horizontal-positioning-mode\"\n})], AnchoredRegion.prototype, \"horizontalPositioningMode\", void 0);\n__decorate$1([attr({\n attribute: \"horizontal-default-position\"\n})], AnchoredRegion.prototype, \"horizontalDefaultPosition\", void 0);\n__decorate$1([attr({\n attribute: \"horizontal-viewport-lock\",\n mode: \"boolean\"\n})], AnchoredRegion.prototype, \"horizontalViewportLock\", void 0);\n__decorate$1([attr({\n attribute: \"horizontal-inset\",\n mode: \"boolean\"\n})], AnchoredRegion.prototype, \"horizontalInset\", void 0);\n__decorate$1([attr({\n attribute: \"horizontal-threshold\"\n})], AnchoredRegion.prototype, \"horizontalThreshold\", void 0);\n__decorate$1([attr({\n attribute: \"horizontal-scaling\"\n})], AnchoredRegion.prototype, \"horizontalScaling\", void 0);\n__decorate$1([attr({\n attribute: \"vertical-positioning-mode\"\n})], AnchoredRegion.prototype, \"verticalPositioningMode\", void 0);\n__decorate$1([attr({\n attribute: \"vertical-default-position\"\n})], AnchoredRegion.prototype, \"verticalDefaultPosition\", void 0);\n__decorate$1([attr({\n attribute: \"vertical-viewport-lock\",\n mode: \"boolean\"\n})], AnchoredRegion.prototype, \"verticalViewportLock\", void 0);\n__decorate$1([attr({\n attribute: \"vertical-inset\",\n mode: \"boolean\"\n})], AnchoredRegion.prototype, \"verticalInset\", void 0);\n__decorate$1([attr({\n attribute: \"vertical-threshold\"\n})], AnchoredRegion.prototype, \"verticalThreshold\", void 0);\n__decorate$1([attr({\n attribute: \"vertical-scaling\"\n})], AnchoredRegion.prototype, \"verticalScaling\", void 0);\n__decorate$1([attr({\n attribute: \"fixed-placement\",\n mode: \"boolean\"\n})], AnchoredRegion.prototype, \"fixedPlacement\", void 0);\n__decorate$1([attr({\n attribute: \"auto-update-mode\"\n})], AnchoredRegion.prototype, \"autoUpdateMode\", void 0);\n__decorate$1([observable], AnchoredRegion.prototype, \"anchorElement\", void 0);\n__decorate$1([observable], AnchoredRegion.prototype, \"viewportElement\", void 0);\n__decorate$1([observable], AnchoredRegion.prototype, \"initialLayoutComplete\", void 0);\n\n/**\n * The template for the {@link @microsoft/fast-foundation#Badge} component.\n * @public\n */\nconst badgeTemplate = (context, definition) => html``;\n\n/**\n * A Badge Custom HTML Element.\n * @slot - The default slot for the badge\n * @csspart control - The element representing the badge, which wraps the default slot\n *\n * @public\n */\nclass Badge$1 extends FoundationElement {\n constructor() {\n super(...arguments);\n this.generateBadgeStyle = () => {\n if (!this.fill && !this.color) {\n return;\n }\n const fill = `background-color: var(--badge-fill-${this.fill});`;\n const color = `color: var(--badge-color-${this.color});`;\n if (this.fill && !this.color) {\n return fill;\n } else if (this.color && !this.fill) {\n return color;\n } else {\n return `${color} ${fill}`;\n }\n };\n }\n}\n__decorate$1([attr({\n attribute: \"fill\"\n})], Badge$1.prototype, \"fill\", void 0);\n__decorate$1([attr({\n attribute: \"color\"\n})], Badge$1.prototype, \"color\", void 0);\n__decorate$1([attr({\n mode: \"boolean\"\n})], Badge$1.prototype, \"circular\", void 0);\n\n/**\n * The template for the {@link @microsoft/fast-foundation#(BreadcrumbItem:class)} component.\n * @public\n */\nconst breadcrumbItemTemplate = (context, definition) => html`
${when(x => x.href && x.href.length > 0, html` ${anchorTemplate(context, definition)} `)} ${when(x => !x.href, html` ${startSlotTemplate(context, definition)}${endSlotTemplate(context, definition)} `)} ${when(x => x.separator, html`${definition.separator || \"\"}`)}
`;\n\n/**\n * A Breadcrumb Item Custom HTML Element.\n *\n * @public\n */\nclass BreadcrumbItem extends Anchor$1 {\n constructor() {\n super(...arguments);\n /**\n * @internal\n */\n this.separator = true;\n }\n}\n__decorate$1([observable], BreadcrumbItem.prototype, \"separator\", void 0);\napplyMixins(BreadcrumbItem, StartEnd, DelegatesARIALink);\n\n/**\n * The template for the {@link @microsoft/fast-foundation#Breadcrumb} component.\n * @public\n */\nconst breadcrumbTemplate = (context, definition) => html``;\n\n/**\n * A Breadcrumb Custom HTML Element.\n * @slot - The default slot for the breadcrumb items\n * @csspart list - The element wrapping the slotted items\n *\n * @public\n */\nclass Breadcrumb extends FoundationElement {\n slottedBreadcrumbItemsChanged() {\n if (this.$fastController.isConnected) {\n if (this.slottedBreadcrumbItems === undefined || this.slottedBreadcrumbItems.length === 0) {\n return;\n }\n const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];\n this.slottedBreadcrumbItems.forEach(item => {\n const itemIsLastNode = item === lastNode;\n this.setItemSeparator(item, itemIsLastNode);\n this.setAriaCurrent(item, itemIsLastNode);\n });\n }\n }\n setItemSeparator(item, isLastNode) {\n if (item instanceof BreadcrumbItem) {\n item.separator = !isLastNode;\n }\n }\n /**\n * Finds href on childnodes in the light DOM or shadow DOM.\n * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.\n */\n findChildWithHref(node) {\n var _a, _b;\n if (node.childElementCount > 0) {\n return node.querySelector(\"a[href]\");\n } else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {\n return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(\"a[href]\");\n } else return null;\n }\n /**\n * Sets ARIA Current for the current node\n * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,\n * otherwise apply aria-current to the host element, with an href\n */\n setAriaCurrent(item, isLastNode) {\n const childNodeWithHref = this.findChildWithHref(item);\n if (childNodeWithHref === null && item.hasAttribute(\"href\") && item instanceof BreadcrumbItem) {\n isLastNode ? item.setAttribute(\"aria-current\", \"page\") : item.removeAttribute(\"aria-current\");\n } else if (childNodeWithHref !== null) {\n isLastNode ? childNodeWithHref.setAttribute(\"aria-current\", \"page\") : childNodeWithHref.removeAttribute(\"aria-current\");\n }\n }\n}\n__decorate$1([observable], Breadcrumb.prototype, \"slottedBreadcrumbItems\", void 0);\n\n/**\n * The template for the {@link @microsoft/fast-foundation#(Button:class)} component.\n * @public\n */\nconst buttonTemplate = (context, definition) => html``;\n\nconst proxySlotName = \"form-associated-proxy\";\nconst ElementInternalsKey = \"ElementInternals\";\n/**\n * @alpha\n */\nconst supportsElementInternals = ElementInternalsKey in window && \"setFormValue\" in window[ElementInternalsKey].prototype;\nconst InternalsMap = new WeakMap();\n/**\n * Base function for providing Custom Element Form Association.\n *\n * @alpha\n */\nfunction FormAssociated(BaseCtor) {\n const C = class extends BaseCtor {\n constructor(...args) {\n super(...args);\n /**\n * Track whether the value has been changed from the initial value\n */\n this.dirtyValue = false;\n /**\n * Sets the element's disabled state. A disabled element will not be included during form submission.\n *\n * @remarks\n * HTML Attribute: disabled\n */\n this.disabled = false;\n /**\n * These are events that are still fired by the proxy\n * element based on user / programmatic interaction.\n *\n * The proxy implementation should be transparent to\n * the app author, so block these events from emitting.\n */\n this.proxyEventsToBlock = [\"change\", \"click\"];\n this.proxyInitialized = false;\n this.required = false;\n this.initialValue = this.initialValue || \"\";\n if (!this.elementInternals) {\n // When elementInternals is not supported, formResetCallback is\n // bound to an event listener, so ensure the handler's `this`\n // context is correct.\n this.formResetCallback = this.formResetCallback.bind(this);\n }\n }\n /**\n * Must evaluate to true to enable elementInternals.\n * Feature detects API support and resolve respectively\n *\n * @internal\n */\n static get formAssociated() {\n return supportsElementInternals;\n }\n /**\n * Returns the validity state of the element\n *\n * @alpha\n */\n get validity() {\n return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;\n }\n /**\n * Retrieve a reference to the associated form.\n * Returns null if not associated to any form.\n *\n * @alpha\n */\n get form() {\n return this.elementInternals ? this.elementInternals.form : this.proxy.form;\n }\n /**\n * Retrieve the localized validation message,\n * or custom validation message if set.\n *\n * @alpha\n */\n get validationMessage() {\n return this.elementInternals ? this.elementInternals.validationMessage : this.proxy.validationMessage;\n }\n /**\n * Whether the element will be validated when the\n * form is submitted\n */\n get willValidate() {\n return this.elementInternals ? this.elementInternals.willValidate : this.proxy.willValidate;\n }\n /**\n * A reference to all associated label elements\n */\n get labels() {\n if (this.elementInternals) {\n return Object.freeze(Array.from(this.elementInternals.labels));\n } else if (this.proxy instanceof HTMLElement && this.proxy.ownerDocument && this.id) {\n // Labels associated by wrapping the element: \n const parentLabels = this.proxy.labels;\n // Labels associated using the `for` attribute\n const forLabels = Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));\n const labels = parentLabels ? forLabels.concat(Array.from(parentLabels)) : forLabels;\n return Object.freeze(labels);\n } else {\n return emptyArray;\n }\n }\n /**\n * Invoked when the `value` property changes\n * @param previous - the previous value\n * @param next - the new value\n *\n * @remarks\n * If elements extending `FormAssociated` implement a `valueChanged` method\n * They must be sure to invoke `super.valueChanged(previous, next)` to ensure\n * proper functioning of `FormAssociated`\n */\n valueChanged(previous, next) {\n this.dirtyValue = true;\n if (this.proxy instanceof HTMLElement) {\n this.proxy.value = this.value;\n }\n this.currentValue = this.value;\n this.setFormValue(this.value);\n this.validate();\n }\n currentValueChanged() {\n this.value = this.currentValue;\n }\n /**\n * Invoked when the `initialValue` property changes\n *\n * @param previous - the previous value\n * @param next - the new value\n *\n * @remarks\n * If elements extending `FormAssociated` implement a `initialValueChanged` method\n * They must be sure to invoke `super.initialValueChanged(previous, next)` to ensure\n * proper functioning of `FormAssociated`\n */\n initialValueChanged(previous, next) {\n // If the value is clean and the component is connected to the DOM\n // then set value equal to the attribute value.\n if (!this.dirtyValue) {\n this.value = this.initialValue;\n this.dirtyValue = false;\n }\n }\n /**\n * Invoked when the `disabled` property changes\n *\n * @param previous - the previous value\n * @param next - the new value\n *\n * @remarks\n * If elements extending `FormAssociated` implement a `disabledChanged` method\n * They must be sure to invoke `super.disabledChanged(previous, next)` to ensure\n * proper functioning of `FormAssociated`\n */\n disabledChanged(previous, next) {\n if (this.proxy instanceof HTMLElement) {\n this.proxy.disabled = this.disabled;\n }\n DOM.queueUpdate(() => this.classList.toggle(\"disabled\", this.disabled));\n }\n /**\n * Invoked when the `name` property changes\n *\n * @param previous - the previous value\n * @param next - the new value\n *\n * @remarks\n * If elements extending `FormAssociated` implement a `nameChanged` method\n * They must be sure to invoke `super.nameChanged(previous, next)` to ensure\n * proper functioning of `FormAssociated`\n */\n nameChanged(previous, next) {\n if (this.proxy instanceof HTMLElement) {\n this.proxy.name = this.name;\n }\n }\n /**\n * Invoked when the `required` property changes\n *\n * @param previous - the previous value\n * @param next - the new value\n *\n * @remarks\n * If elements extending `FormAssociated` implement a `requiredChanged` method\n * They must be sure to invoke `super.requiredChanged(previous, next)` to ensure\n * proper functioning of `FormAssociated`\n */\n requiredChanged(prev, next) {\n if (this.proxy instanceof HTMLElement) {\n this.proxy.required = this.required;\n }\n DOM.queueUpdate(() => this.classList.toggle(\"required\", this.required));\n this.validate();\n }\n /**\n * The element internals object. Will only exist\n * in browsers supporting the attachInternals API\n */\n get elementInternals() {\n if (!supportsElementInternals) {\n return null;\n }\n let internals = InternalsMap.get(this);\n if (!internals) {\n internals = this.attachInternals();\n InternalsMap.set(this, internals);\n }\n return internals;\n }\n /**\n * @internal\n */\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"keypress\", this._keypressHandler);\n if (!this.value) {\n this.value = this.initialValue;\n this.dirtyValue = false;\n }\n if (!this.elementInternals) {\n this.attachProxy();\n if (this.form) {\n this.form.addEventListener(\"reset\", this.formResetCallback);\n }\n }\n }\n /**\n * @internal\n */\n disconnectedCallback() {\n super.disconnectedCallback();\n this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));\n if (!this.elementInternals && this.form) {\n this.form.removeEventListener(\"reset\", this.formResetCallback);\n }\n }\n /**\n * Return the current validity of the element.\n */\n checkValidity() {\n return this.elementInternals ? this.elementInternals.checkValidity() : this.proxy.checkValidity();\n }\n /**\n * Return the current validity of the element.\n * If false, fires an invalid event at the element.\n */\n reportValidity() {\n return this.elementInternals ? this.elementInternals.reportValidity() : this.proxy.reportValidity();\n }\n /**\n * Set the validity of the control. In cases when the elementInternals object is not\n * available (and the proxy element is used to report validity), this function will\n * do nothing unless a message is provided, at which point the setCustomValidity method\n * of the proxy element will be invoked with the provided message.\n * @param flags - Validity flags\n * @param message - Optional message to supply\n * @param anchor - Optional element used by UA to display an interactive validation UI\n */\n setValidity(flags, message, anchor) {\n if (this.elementInternals) {\n this.elementInternals.setValidity(flags, message, anchor);\n } else if (typeof message === \"string\") {\n this.proxy.setCustomValidity(message);\n }\n }\n /**\n * Invoked when a connected component's form or fieldset has its disabled\n * state changed.\n * @param disabled - the disabled value of the form / fieldset\n */\n formDisabledCallback(disabled) {\n this.disabled = disabled;\n }\n formResetCallback() {\n this.value = this.initialValue;\n this.dirtyValue = false;\n }\n /**\n * Attach the proxy element to the DOM\n */\n attachProxy() {\n var _a;\n if (!this.proxyInitialized) {\n this.proxyInitialized = true;\n this.proxy.style.display = \"none\";\n this.proxyEventsToBlock.forEach(name => this.proxy.addEventListener(name, this.stopPropagation));\n // These are typically mapped to the proxy during\n // property change callbacks, but during initialization\n // on the initial call of the callback, the proxy is\n // still undefined. We should find a better way to address this.\n this.proxy.disabled = this.disabled;\n this.proxy.required = this.required;\n if (typeof this.name === \"string\") {\n this.proxy.name = this.name;\n }\n if (typeof this.value === \"string\") {\n this.proxy.value = this.value;\n }\n this.proxy.setAttribute(\"slot\", proxySlotName);\n this.proxySlot = document.createElement(\"slot\");\n this.proxySlot.setAttribute(\"name\", proxySlotName);\n }\n (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(this.proxySlot);\n this.appendChild(this.proxy);\n }\n /**\n * Detach the proxy element from the DOM\n */\n detachProxy() {\n var _a;\n this.removeChild(this.proxy);\n (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeChild(this.proxySlot);\n }\n /** {@inheritDoc (FormAssociated:interface).validate} */\n validate(anchor) {\n if (this.proxy instanceof HTMLElement) {\n this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);\n }\n }\n /**\n * Associates the provided value (and optional state) with the parent form.\n * @param value - The value to set\n * @param state - The state object provided to during session restores and when autofilling.\n */\n setFormValue(value, state) {\n if (this.elementInternals) {\n this.elementInternals.setFormValue(value, state || value);\n }\n }\n _keypressHandler(e) {\n switch (e.key) {\n case keyEnter:\n if (this.form instanceof HTMLFormElement) {\n // Implicit submission\n const defaultButton = this.form.querySelector(\"[type=submit]\");\n defaultButton === null || defaultButton === void 0 ? void 0 : defaultButton.click();\n }\n break;\n }\n }\n /**\n * Used to stop propagation of proxy element events\n * @param e - Event object\n */\n stopPropagation(e) {\n e.stopPropagation();\n }\n };\n attr({\n mode: \"boolean\"\n })(C.prototype, \"disabled\");\n attr({\n mode: \"fromView\",\n attribute: \"value\"\n })(C.prototype, \"initialValue\");\n attr({\n attribute: \"current-value\"\n })(C.prototype, \"currentValue\");\n attr(C.prototype, \"name\");\n attr({\n mode: \"boolean\"\n })(C.prototype, \"required\");\n observable(C.prototype, \"value\");\n return C;\n}\n/**\n * @alpha\n */\nfunction CheckableFormAssociated(BaseCtor) {\n class C extends FormAssociated(BaseCtor) {}\n class D extends C {\n constructor(...args) {\n super(args);\n /**\n * Tracks whether the \"checked\" property has been changed.\n * This is necessary to provide consistent behavior with\n * normal input checkboxes\n */\n this.dirtyChecked = false;\n /**\n * Provides the default checkedness of the input element\n * Passed down to proxy\n *\n * @public\n * @remarks\n * HTML Attribute: checked\n */\n this.checkedAttribute = false;\n /**\n * The checked state of the control.\n *\n * @public\n */\n this.checked = false;\n // Re-initialize dirtyChecked because initialization of other values\n // causes it to become true\n this.dirtyChecked = false;\n }\n checkedAttributeChanged() {\n this.defaultChecked = this.checkedAttribute;\n }\n /**\n * @internal\n */\n defaultCheckedChanged() {\n if (!this.dirtyChecked) {\n // Setting this.checked will cause us to enter a dirty state,\n // but if we are clean when defaultChecked is changed, we want to stay\n // in a clean state, so reset this.dirtyChecked\n this.checked = this.defaultChecked;\n this.dirtyChecked = false;\n }\n }\n checkedChanged(prev, next) {\n if (!this.dirtyChecked) {\n this.dirtyChecked = true;\n }\n this.currentChecked = this.checked;\n this.updateForm();\n if (this.proxy instanceof HTMLInputElement) {\n this.proxy.checked = this.checked;\n }\n if (prev !== undefined) {\n this.$emit(\"change\");\n }\n this.validate();\n }\n currentCheckedChanged(prev, next) {\n this.checked = this.currentChecked;\n }\n updateForm() {\n const value = this.checked ? this.value : null;\n this.setFormValue(value, value);\n }\n connectedCallback() {\n super.connectedCallback();\n this.updateForm();\n }\n formResetCallback() {\n super.formResetCallback();\n this.checked = !!this.checkedAttribute;\n this.dirtyChecked = false;\n }\n }\n attr({\n attribute: \"checked\",\n mode: \"boolean\"\n })(D.prototype, \"checkedAttribute\");\n attr({\n attribute: \"current-checked\",\n converter: booleanConverter\n })(D.prototype, \"currentChecked\");\n observable(D.prototype, \"defaultChecked\");\n observable(D.prototype, \"checked\");\n return D;\n}\n\nclass _Button extends FoundationElement {}\n/**\n * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.\n *\n * @internal\n */\nclass FormAssociatedButton extends FormAssociated(_Button) {\n constructor() {\n super(...arguments);\n this.proxy = document.createElement(\"input\");\n }\n}\n\n/**\n * A Button Custom HTML Element.\n * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button |