Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@microsoft/fast-element

Package Overview
Dependencies
Maintainers
5
Versions
83
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@microsoft/fast-element - npm Package Compare versions

Comparing version 0.15.2 to 0.16.0

16

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log

# [0.16.0](https://github.com/Microsoft/fast/compare/@microsoft/fast-element@0.15.2...@microsoft/fast-element@0.16.0) (2020-08-13)
### Bug Fixes
* use higher bits for DOM marker ([#3649](https://github.com/Microsoft/fast/issues/3649)) ([2d1acd8](https://github.com/Microsoft/fast/commit/2d1acd8622aba481bfa3dad5340f8d045dfaef9a))
### Features
* **fast-element:** move template instance timing and enable dynamic templates and styles ([#3621](https://github.com/Microsoft/fast/issues/3621)) ([2e73088](https://github.com/Microsoft/fast/commit/2e730885a485febfbc2b993040f039ef4b85b4ec))
## [0.15.2](https://github.com/Microsoft/fast/compare/@microsoft/fast-element@0.15.1...@microsoft/fast-element@0.15.2) (2020-07-31)

@@ -8,0 +24,0 @@

25

dist/dts/controller.d.ts

@@ -5,3 +5,4 @@ import { FASTElementDefinition } from "./fast-definitions";

import { Behavior } from "./directives/behavior";
import { ElementStyles, StyleTarget } from "./styles";
import { ElementStyles } from "./styles";
import { ElementViewTemplate } from "./template";
/**

@@ -14,2 +15,5 @@ * Controls the lifecycle and rendering of a `FASTElement`.

private behaviors;
private needsInitialization;
private _template;
private _styles;
/**

@@ -36,2 +40,16 @@ * The element being controlled by this controller.

/**
* Gets/sets the template used to render the component.
* @remarks
* This value can only be accurately read after connect but can be set at any time.
*/
get template(): ElementViewTemplate | null;
set template(value: ElementViewTemplate | null);
/**
* Gets/sets the primary styles used for the component.
* @remarks
* This value can only be accurately read after connect but can be set at any time.
*/
get styles(): ElementStyles | null;
set styles(value: ElementStyles | null);
/**
* Creates a Controller to control the specified element.

@@ -48,4 +66,3 @@ * @param element - The element to be controlled by this controller.

*/
addStyles(styles: ElementStyles,
/** @internal */ target?: StyleTarget | null): void;
addStyles(styles: ElementStyles): void;
/**

@@ -90,2 +107,4 @@ * Removes styles from this element.

emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): void | boolean;
private finishInitialization;
private renderTemplate;
/**

@@ -92,0 +111,0 @@ * Locates or creates a controller for the specified element.

10

dist/dts/dom.d.ts

@@ -96,3 +96,13 @@ import { Callable } from "./interfaces";

setBooleanAttribute(element: HTMLElement, attributeName: string, value: boolean): void;
/**
* Removes all the child nodes of the provided parent node.
* @param parent - The node to remove the children from.
*/
removeChildNodes(parent: Node): void;
/**
* Creates a TreeWalker configured to walk a template fragment.
* @param fragment - The fragment to walk.
*/
createTemplateWalker(fragment: DocumentFragment): TreeWalker;
}>;
export {};

88

dist/dts/fast-definitions.d.ts

@@ -5,7 +5,46 @@ import { ElementViewTemplate } from "./template";

/**
* Represents metadata configuration for a custom element.
* @public
*/
export interface PartialFASTElementDefinition {
/**
* The name of the custom element.
*/
readonly name: string;
/**
* The template to render for the custom element.
*/
readonly template?: ElementViewTemplate;
/**
* The styles to associated with the custom element.
*/
readonly styles?: ComposableStyles;
/**
* The custom attributes of the custom element.
*/
readonly attributes?: (AttributeConfiguration | string)[];
/**
* Options controlling the creation of the custom element's shadow DOM.
*/
readonly shadowOptions?: Partial<ShadowRootInit> | null;
/**
* Options controlling how the custom element is defined with the platform.
*/
readonly elementOptions?: ElementDefinitionOptions;
}
/**
* Defines metadata for a FASTElement.
* @public
*/
export declare class FASTElementDefinition {
export declare class FASTElementDefinition<TType extends Function = Function> {
private observedAttributes;
/**
* The type this element definition describes.
*/
readonly type: TType;
/**
* Indicates if this element has been defined in at least one registry.
*/
readonly isDefined: boolean;
/**
* The name of the custom element.

@@ -44,44 +83,17 @@ */

* Creates an instance of FASTElementDefinition.
* @param name - The name of the custom element.
* @param attributes - The custom attributes of the custom element.
* @param propertyLookup - A map enabling lookup of attribute by associated property name.
* @param attributeLookup - A map enabling lookup of property by associated attribute name.
* @param template - The template to render for the custom element.
* @param styles - The styles to associated with the custom element.
* @param shadowOptions - Options controlling the creation of the custom element's shadow DOM.
* @param elementOptions - Options controlling how the custom element is defined with the platform.
* @param type - The type this definition is being created for.
* @param nameOrConfig - The name of the element to define or a config object
* that describes the element to define.
*/
constructor(name: string, attributes: ReadonlyArray<AttributeDefinition>, propertyLookup: Record<string, AttributeDefinition>, attributeLookup: Record<string, AttributeDefinition>, template?: ElementViewTemplate, styles?: ComposableStyles, shadowOptions?: ShadowRootInit, elementOptions?: ElementDefinitionOptions);
}
/**
* Represents metadata configuration for a custom element.
* @public
*/
export interface PartialFASTElementDefinition {
constructor(type: TType, nameOrConfig?: PartialFASTElementDefinition | string);
/**
* The name of the custom element.
* Defines a custom element based on this definition.
* @param registry - The element registry to define the element in.
*/
readonly name: string;
define(registry?: CustomElementRegistry): this;
/**
* The template to render for the custom element.
* Gets the element definition associated with the specified type.
* @param type - The custom element type to retrieve the definition for.
*/
readonly template?: ElementViewTemplate;
/**
* The styles to associated with the custom element.
*/
readonly styles?: ComposableStyles;
/**
* The custom attributes of the custom element.
*/
readonly attributes?: (AttributeConfiguration | string)[];
/**
* Options controlling the creation of the custom element's shadow DOM.
*/
readonly shadowOptions?: Partial<ShadowRootInit> | null;
/**
* Options controlling how the custom element is defined with the platform.
*/
readonly elementOptions?: ElementDefinitionOptions;
static forType<TType extends Function>(type: TType): FASTElementDefinition | undefined;
}
/** @internal */
export declare const fastDefinitions: Map<Function, FASTElementDefinition>;

11

dist/dts/fast-element.d.ts
import { Controller } from "./controller";
import { FASTElementDefinition, PartialFASTElementDefinition } from "./fast-definitions";
import { PartialFASTElementDefinition } from "./fast-definitions";
/**

@@ -64,12 +64,7 @@ * Represents a custom element based on the FASTElement infrastructure.

* Defines a platform custom element based on the provided type and definition.
* @param Type - The custom element type to define.
* @param type - The custom element type to define.
* @param nameOrDef - The name of the element to define or a definition object
* that describes the element to define.
*/
define<TType extends Function>(Type: TType, nameOrDef?: string | PartialFASTElementDefinition): TType;
/**
* Gets the element definition associated with the specified type.
* @param Type - The custom element type to retrieve the definition for.
*/
getDefinition<T_1 extends Function>(Type: T_1): FASTElementDefinition | undefined;
define<TType extends Function>(type: TType, nameOrDef?: string | PartialFASTElementDefinition | undefined): TType;
};

@@ -76,0 +71,0 @@ /**

22

dist/dts/template.d.ts

@@ -11,5 +11,13 @@ import { ElementView, HTMLView, SyntheticView } from "./view";

* Creates an ElementView instance based on this template definition.
* @param host - The custom element host that this template will be rendered to once created.
* @param hostBindingTarget - The element that host behaviors will be bound to.
*/
create(host: Element): ElementView;
create(hostBindingTarget: Element): ElementView;
/**
* Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
* @param source - The data source to bind the template to.
* @param host - The Element where the template will be rendered.
* @param hostBindingTarget - An HTML element to target the host bindings at if different from the
* host that the template is being attached to.
*/
render(source: any, host: Node, hostBindingTarget?: Element): HTMLView;
}

@@ -54,11 +62,13 @@ /**

* Creates an HTMLView instance based on this template definition.
* @param host - The host element that this template will be rendered to once created.
* @param hostBindingTarget - The element that host behaviors will be bound to.
*/
create(host?: Element): HTMLView;
create(hostBindingTarget?: Element): HTMLView;
/**
* Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
* @param source - The data source to bind the template to.
* @param host - The HTMLElement where the template will be rendered.
* @param host - The Element where the template will be rendered.
* @param hostBindingTarget - An HTML element to target the host bindings at if different from the
* host that the template is being attached to.
*/
render(source: TSource, host: HTMLElement | string): HTMLView;
render(source: TSource, host: Node | string, hostBindingTarget?: Element): HTMLView;
}

@@ -65,0 +75,0 @@ /**

5

dist/dts/view.d.ts

@@ -26,2 +26,7 @@ import { Behavior } from "./directives/behavior";

unbind(): void;
/**
* Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
* Once a view has been disposed, it cannot be inserted or bound again.
*/
dispose(): void;
}

@@ -28,0 +33,0 @@ /**

168

dist/esm/controller.js

@@ -1,4 +0,6 @@

import { fastDefinitions } from "./fast-definitions";
import { FASTElementDefinition } from "./fast-definitions";
import { PropertyChangeNotifier } from "./observation/notifier";
import { defaultExecutionContext, Observable } from "./observation/observable";
import { DOM } from "./dom";
const shadowRoots = new WeakMap();
const defaultEventOptions = {

@@ -8,2 +10,5 @@ bubbles: true,

};
function getShadowRoot(element) {
return element.shadowRoot || shadowRoots.get(element) || null;
}
/**

@@ -25,2 +30,5 @@ * Controls the lifecycle and rendering of a `FASTElement`.

this.behaviors = null;
this.needsInitialization = true;
this._template = null;
this._styles = null;
/**

@@ -39,19 +47,9 @@ * The view associated with the custom element.

this.definition = definition;
const template = definition.template;
const styles = definition.styles;
const shadowRoot = definition.shadowOptions === void 0
? void 0
: element.attachShadow(definition.shadowOptions);
if (template !== void 0) {
const view = (this.view = template.create(this.element));
if (shadowRoot === void 0) {
view.appendTo(element);
const shadowOptions = definition.shadowOptions;
if (shadowOptions !== void 0) {
const shadowRoot = element.attachShadow(shadowOptions);
if (shadowOptions.mode === "closed") {
shadowRoots.set(element, shadowRoot);
}
else {
view.appendTo(shadowRoot);
}
}
if (styles !== void 0) {
this.addStyles(styles, shadowRoot);
}
// Capture any observable values that were set by the binding engine before

@@ -75,11 +73,47 @@ // the browser upgraded the element. Then delete the property since it will

/**
* Gets/sets the template used to render the component.
* @remarks
* This value can only be accurately read after connect but can be set at any time.
*/
get template() {
return this._template;
}
set template(value) {
if (this._template === value) {
return;
}
this._template = value;
if (!this.needsInitialization) {
this.renderTemplate(value);
}
}
/**
* Gets/sets the primary styles used for the component.
* @remarks
* This value can only be accurately read after connect but can be set at any time.
*/
get styles() {
return this._styles;
}
set styles(value) {
if (this._styles === value) {
return;
}
if (this._styles !== null) {
this.removeStyles(this._styles);
}
this._styles = value;
if (!this.needsInitialization && value !== null) {
this.addStyles(value);
}
}
/**
* Adds styles to this element.
* @param styles - The styles to add.
*/
addStyles(styles,
/** @internal */ target = this.element.shadowRoot) {
if (target !== null) {
styles.addStylesTo(target);
}
addStyles(styles) {
const sourceBehaviors = styles.behaviors;
const target = getShadowRoot(this.element) ||
this.element.getRootNode();
styles.addStylesTo(target);
if (sourceBehaviors !== null) {

@@ -94,7 +128,6 @@ this.addBehaviors(sourceBehaviors);

removeStyles(styles) {
const target = this.element.shadowRoot;
if (target !== null) {
styles.removeStylesFrom(target);
}
const sourceBehaviors = styles.behaviors;
const target = getShadowRoot(this.element) ||
this.element.getRootNode();
styles.removeStylesFrom(target);
if (sourceBehaviors !== null) {

@@ -152,15 +185,7 @@ this.removeBehaviors(sourceBehaviors);

const element = this.element;
const boundObservables = this.boundObservables;
// If we have any observables that were bound, re-apply their values.
if (boundObservables !== null) {
const propertyNames = Object.keys(boundObservables);
for (let i = 0, ii = propertyNames.length; i < ii; ++i) {
const propertyName = propertyNames[i];
element[propertyName] = boundObservables[propertyName];
}
this.boundObservables = null;
if (this.needsInitialization) {
this.finishInitialization();
}
const view = this.view;
if (view !== null) {
view.bind(element, defaultExecutionContext);
else if (this.view !== null) {
this.view.bind(element, defaultExecutionContext);
}

@@ -221,2 +246,69 @@ const behaviors = this.behaviors;

}
finishInitialization() {
const element = this.element;
const boundObservables = this.boundObservables;
// If we have any observables that were bound, re-apply their values.
if (boundObservables !== null) {
const propertyNames = Object.keys(boundObservables);
for (let i = 0, ii = propertyNames.length; i < ii; ++i) {
const propertyName = propertyNames[i];
element[propertyName] = boundObservables[propertyName];
}
this.boundObservables = null;
}
const definition = this.definition;
// 1. Template overrides take top precedence.
if (this._template === null) {
if (this.element.resolveTemplate) {
// 2. Allow for element instance overrides next.
this._template = this.element.resolveTemplate();
}
else if (definition.template) {
// 3. Default to the static definition.
this._template = definition.template || null;
}
}
// If we have a template after the above process, render it.
// If there's no template, then the element author has opted into
// custom rendering and they will managed the shadow root's content themselves.
if (this._template !== null) {
this.renderTemplate(this._template);
}
// 1. Styles overrides take top precedence.
if (this._styles === null) {
if (this.element.resolveStyles) {
// 2. Allow for element instance overrides next.
this._styles = this.element.resolveStyles();
}
else if (definition.styles) {
// 3. Default to the static definition.
this._styles = definition.styles || null;
}
}
// If we have styles after the above process, add them.
if (this._styles !== null) {
this.addStyles(this._styles);
}
this.needsInitialization = false;
}
renderTemplate(template) {
const element = this.element;
// When getting the host to render to, we start by looking
// up the shadow root. If there isn't one, then that means
// we're doing a Light DOM render to the element's direct children.
const host = getShadowRoot(element) || element;
if (this.view !== null) {
// If there's already a view, we need to unbind and remove through dispose.
this.view.dispose();
this.view = null;
}
else if (!this.needsInitialization) {
// If there was previous custom rendering, we need to clear out the host.
DOM.removeChildNodes(host);
}
if (template) {
// If a new template was provided, render it.
this.view = template.render(element, host, element);
}
}
/**

@@ -235,3 +327,3 @@ * Locates or creates a controller for the specified element.

}
const definition = fastDefinitions.get(element.constructor);
const definition = FASTElementDefinition.forType(element.constructor);
if (definition === void 0) {

@@ -238,0 +330,0 @@ throw new Error("Missing FASTElement definition.");

19

dist/esm/dom.js

@@ -36,3 +36,3 @@ const updateQueue = [];

}
const marker = `fast-${Math.random().toString(36).substring(7)}`;
const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
/** @internal */

@@ -167,2 +167,19 @@ export const _interpolationStart = `${marker}{`;

},
/**
* Removes all the child nodes of the provided parent node.
* @param parent - The node to remove the children from.
*/
removeChildNodes(parent) {
for (let child = parent.firstChild; child !== null; child = parent.firstChild) {
parent.removeChild(child);
}
},
/**
* Creates a TreeWalker configured to walk a template fragment.
* @param fragment - The fragment to walk.
*/
createTemplateWalker(fragment) {
return document.createTreeWalker(fragment, 133, // element, text, comment
null, false);
},
});

89

dist/esm/fast-definitions.js
import { ElementStyles, css } from "./styles";
import { AttributeDefinition } from "./attributes";
import { Observable } from "./observation/observable";
const defaultShadowOptions = { mode: "open" };
const defaultElementOptions = {};
const fastDefinitions = new Map();
/**

@@ -9,28 +14,76 @@ * Defines metadata for a FASTElement.

* Creates an instance of FASTElementDefinition.
* @param name - The name of the custom element.
* @param attributes - The custom attributes of the custom element.
* @param propertyLookup - A map enabling lookup of attribute by associated property name.
* @param attributeLookup - A map enabling lookup of property by associated attribute name.
* @param template - The template to render for the custom element.
* @param styles - The styles to associated with the custom element.
* @param shadowOptions - Options controlling the creation of the custom element's shadow DOM.
* @param elementOptions - Options controlling how the custom element is defined with the platform.
* @param type - The type this definition is being created for.
* @param nameOrConfig - The name of the element to define or a config object
* that describes the element to define.
*/
constructor(name, attributes, propertyLookup, attributeLookup, template, styles, shadowOptions, elementOptions) {
this.name = name;
constructor(type, nameOrConfig = type.definition) {
if (typeof nameOrConfig === "string") {
nameOrConfig = { name: nameOrConfig };
}
this.type = type;
this.name = nameOrConfig.name;
this.template = nameOrConfig.template;
const attributes = AttributeDefinition.collect(type, nameOrConfig.attributes);
const observedAttributes = new Array(attributes.length);
const propertyLookup = {};
const attributeLookup = {};
for (let i = 0, ii = attributes.length; i < ii; ++i) {
const current = attributes[i];
observedAttributes[i] = current.attribute;
propertyLookup[current.name] = current;
attributeLookup[current.attribute] = current;
}
this.attributes = attributes;
this.observedAttributes = observedAttributes;
this.propertyLookup = propertyLookup;
this.attributeLookup = attributeLookup;
this.template = template;
this.shadowOptions = shadowOptions;
this.elementOptions = elementOptions;
this.shadowOptions =
nameOrConfig.shadowOptions === void 0
? defaultShadowOptions
: nameOrConfig.shadowOptions === null
? void 0
: Object.assign(Object.assign({}, defaultShadowOptions), nameOrConfig.shadowOptions);
this.elementOptions =
nameOrConfig.elementOptions === void 0
? defaultElementOptions
: Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);
this.styles =
styles !== void 0 && !(styles instanceof ElementStyles)
nameOrConfig.styles !== void 0 &&
!(nameOrConfig.styles instanceof ElementStyles)
? css `
${styles}
${nameOrConfig.styles}
`
: styles;
: nameOrConfig.styles;
}
/**
* Defines a custom element based on this definition.
* @param registry - The element registry to define the element in.
*/
define(registry = customElements) {
const type = this.type;
if (!this.isDefined) {
const attributes = this.attributes;
const proto = type.prototype;
for (let i = 0, ii = attributes.length; i < ii; ++i) {
Observable.defineProperty(proto, attributes[i]);
}
Reflect.defineProperty(type, "observedAttributes", {
value: this.observedAttributes,
enumerable: true,
});
fastDefinitions.set(type, this);
this.isDefined = true;
}
if (!registry.get(this.name)) {
registry.define(this.name, type, this.elementOptions);
}
return this;
}
/**
* Gets the element definition associated with the specified type.
* @param type - The custom element type to retrieve the definition for.
*/
static forType(type) {
return fastDefinitions.get(type);
}
}
/** @internal */
export const fastDefinitions = new Map();

52

dist/esm/fast-element.js

@@ -1,7 +0,3 @@

import { AttributeDefinition } from "./attributes";
import { Controller } from "./controller";
import { Observable } from "./observation/observable";
import { fastDefinitions, FASTElementDefinition, } from "./fast-definitions";
const defaultShadowOptions = { mode: "open" };
const defaultElementOptions = {};
import { FASTElementDefinition } from "./fast-definitions";
/* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */

@@ -45,47 +41,9 @@ function createFASTElement(BaseType) {

* Defines a platform custom element based on the provided type and definition.
* @param Type - The custom element type to define.
* @param type - The custom element type to define.
* @param nameOrDef - The name of the element to define or a definition object
* that describes the element to define.
*/
define(Type, nameOrDef = Type.definition) {
if (typeof nameOrDef === "string") {
nameOrDef = { name: nameOrDef };
}
const name = nameOrDef.name;
const attributes = AttributeDefinition.collect(Type, nameOrDef.attributes);
const shadowOptions = nameOrDef.shadowOptions === void 0
? defaultShadowOptions
: nameOrDef.shadowOptions === null
? void 0
: Object.assign(Object.assign({}, defaultShadowOptions), nameOrDef.shadowOptions);
const elementOptions = nameOrDef.elementOptions === void 0
? defaultElementOptions
: Object.assign(Object.assign({}, defaultElementOptions), nameOrDef.shadowOptions);
const observedAttributes = new Array(attributes.length);
const proto = Type.prototype;
const propertyLookup = {};
const attributeLookup = {};
for (let i = 0, ii = attributes.length; i < ii; ++i) {
const current = attributes[i];
observedAttributes[i] = current.attribute;
propertyLookup[current.name] = current;
attributeLookup[current.attribute] = current;
Observable.defineProperty(proto, current);
}
Reflect.defineProperty(Type, "observedAttributes", {
value: observedAttributes,
enumerable: true,
});
const definition = new FASTElementDefinition(name, attributes, propertyLookup, attributeLookup, nameOrDef.template, nameOrDef.styles, shadowOptions, elementOptions);
fastDefinitions.set(Type, definition);
customElements.define(name, Type, definition.elementOptions);
return Type;
define(type, nameOrDef) {
return new FASTElementDefinition(type, nameOrDef).define().type;
},
/**
* Gets the element definition associated with the specified type.
* @param Type - The custom element type to retrieve the definition for.
*/
getDefinition(Type) {
return fastDefinitions.get(Type);
},
});

@@ -101,4 +59,4 @@ /**

return function (type) {
FASTElement.define(type, nameOrDef);
new FASTElementDefinition(type, nameOrDef).define();
};
}

3

dist/esm/observation/observable.js

@@ -177,5 +177,4 @@ import { DOM } from "../dom";

get: function () {
var _a;
trackVolatile();
return (_a = descriptor.get) === null || _a === void 0 ? void 0 : _a.apply(this);
return descriptor.get.apply(this);
},

@@ -182,0 +181,0 @@ });

3

dist/esm/template-compiler.js

@@ -130,4 +130,3 @@ import { DOM, _interpolationEnd, _interpolationStart } from "./dom";

const directiveCount = directives.length;
const walker = document.createTreeWalker(fragment, 133, // element, text, comment
null, false);
const walker = DOM.createTemplateWalker(fragment);
compilationContext.targetIndex = -1;

@@ -134,0 +133,0 @@ while (compilationContext.locatedDirectives < directiveCount) {

20

dist/esm/template.js

@@ -29,5 +29,5 @@ import { compileTemplate } from "./template-compiler";

* Creates an HTMLView instance based on this template definition.
* @param host - The host element that this template will be rendered to once created.
* @param hostBindingTarget - The element that host behaviors will be bound to.
*/
create(host) {
create(hostBindingTarget) {
if (this.fragment === null) {

@@ -59,4 +59,3 @@ let template;

const behaviors = new Array(this.behaviorCount);
const walker = document.createTreeWalker(fragment, 133, // element, text, comment
null, false);
const walker = DOM.createTemplateWalker(fragment);
let behaviorIndex = 0;

@@ -82,3 +81,3 @@ let targetIndex = this.targetOffset;

for (let i = 0, ii = hostFactories.length; i < ii; ++i, ++behaviorIndex) {
behaviors[behaviorIndex] = hostFactories[i].createBehavior(host);
behaviors[behaviorIndex] = hostFactories[i].createBehavior(hostBindingTarget);
}

@@ -91,9 +90,14 @@ }

* @param source - The data source to bind the template to.
* @param host - The HTMLElement where the template will be rendered.
* @param host - The Element where the template will be rendered.
* @param hostBindingTarget - An HTML element to target the host bindings at if different from the
* host that the template is being attached to.
*/
render(source, host) {
render(source, host, hostBindingTarget) {
if (typeof host === "string") {
host = document.getElementById(host);
}
const view = this.create(host);
if (hostBindingTarget === void 0) {
hostBindingTarget = host;
}
const view = this.create(hostBindingTarget);
view.bind(source, defaultExecutionContext);

@@ -100,0 +104,0 @@ view.appendTo(host);

102

dist/fast-element.d.ts

@@ -440,2 +440,5 @@

private behaviors;
private needsInitialization;
private _template;
private _styles;
/**

@@ -462,2 +465,16 @@ * The element being controlled by this controller.

/**
* Gets/sets the template used to render the component.
* @remarks
* This value can only be accurately read after connect but can be set at any time.
*/
get template(): ElementViewTemplate | null;
set template(value: ElementViewTemplate | null);
/**
* Gets/sets the primary styles used for the component.
* @remarks
* This value can only be accurately read after connect but can be set at any time.
*/
get styles(): ElementStyles | null;
set styles(value: ElementStyles | null);
/**
* Creates a Controller to control the specified element.

@@ -474,4 +491,3 @@ * @param element - The element to be controlled by this controller.

*/
addStyles(styles: ElementStyles,
/** @internal */ target?: StyleTarget | null): void;
addStyles(styles: ElementStyles): void;
/**

@@ -516,2 +532,4 @@ * Removes styles from this element.

emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): void | boolean;
private finishInitialization;
private renderTemplate;
/**

@@ -666,2 +684,12 @@ * Locates or creates a controller for the specified element.

setBooleanAttribute(element: HTMLElement, attributeName: string, value: boolean): void;
/**
* Removes all the child nodes of the provided parent node.
* @param parent - The node to remove the children from.
*/
removeChildNodes(parent: Node): void;
/**
* Creates a TreeWalker configured to walk a template fragment.
* @param fragment - The fragment to walk.
*/
createTemplateWalker(fragment: DocumentFragment): TreeWalker;
}>;

@@ -725,5 +753,13 @@

* Creates an ElementView instance based on this template definition.
* @param host - The custom element host that this template will be rendered to once created.
* @param hostBindingTarget - The element that host behaviors will be bound to.
*/
create(host: Element): ElementView;
create(hostBindingTarget: Element): ElementView;
/**
* Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
* @param source - The data source to bind the template to.
* @param host - The Element where the template will be rendered.
* @param hostBindingTarget - An HTML element to target the host bindings at if different from the
* host that the template is being attached to.
*/
render(source: any, host: Node, hostBindingTarget?: Element): HTMLView;
}

@@ -850,12 +886,7 @@

* Defines a platform custom element based on the provided type and definition.
* @param Type - The custom element type to define.
* @param type - The custom element type to define.
* @param nameOrDef - The name of the element to define or a definition object
* that describes the element to define.
*/
define<TType extends Function>(Type: TType, nameOrDef?: string | PartialFASTElementDefinition): TType;
/**
* Gets the element definition associated with the specified type.
* @param Type - The custom element type to retrieve the definition for.
*/
getDefinition<T_1 extends Function>(Type: T_1): FASTElementDefinition | undefined;
define<TType extends Function>(type: TType, nameOrDef?: string | PartialFASTElementDefinition | undefined): TType;
};

@@ -867,4 +898,13 @@

*/
export declare class FASTElementDefinition {
export declare class FASTElementDefinition<TType extends Function = Function> {
private observedAttributes;
/**
* The type this element definition describes.
*/
readonly type: TType;
/**
* Indicates if this element has been defined in at least one registry.
*/
readonly isDefined: boolean;
/**
* The name of the custom element.

@@ -903,12 +943,17 @@ */

* Creates an instance of FASTElementDefinition.
* @param name - The name of the custom element.
* @param attributes - The custom attributes of the custom element.
* @param propertyLookup - A map enabling lookup of attribute by associated property name.
* @param attributeLookup - A map enabling lookup of property by associated attribute name.
* @param template - The template to render for the custom element.
* @param styles - The styles to associated with the custom element.
* @param shadowOptions - Options controlling the creation of the custom element's shadow DOM.
* @param elementOptions - Options controlling how the custom element is defined with the platform.
* @param type - The type this definition is being created for.
* @param nameOrConfig - The name of the element to define or a config object
* that describes the element to define.
*/
constructor(name: string, attributes: ReadonlyArray<AttributeDefinition>, propertyLookup: Record<string, AttributeDefinition>, attributeLookup: Record<string, AttributeDefinition>, template?: ElementViewTemplate, styles?: ComposableStyles, shadowOptions?: ShadowRootInit, elementOptions?: ElementDefinitionOptions);
constructor(type: TType, nameOrConfig?: PartialFASTElementDefinition | string);
/**
* Defines a custom element based on this definition.
* @param registry - The element registry to define the element in.
*/
define(registry?: CustomElementRegistry): this;
/**
* Gets the element definition associated with the specified type.
* @param type - The custom element type to retrieve the definition for.
*/
static forType<TType extends Function>(type: TType): FASTElementDefinition | undefined;
}

@@ -1623,2 +1668,7 @@

unbind(): void;
/**
* Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
* Once a view has been disposed, it cannot be inserted or bound again.
*/
dispose(): void;
}

@@ -1654,11 +1704,13 @@

* Creates an HTMLView instance based on this template definition.
* @param host - The host element that this template will be rendered to once created.
* @param hostBindingTarget - The element that host behaviors will be bound to.
*/
create(host?: Element): HTMLView;
create(hostBindingTarget?: Element): HTMLView;
/**
* Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
* @param source - The data source to bind the template to.
* @param host - The HTMLElement where the template will be rendered.
* @param host - The Element where the template will be rendered.
* @param hostBindingTarget - An HTML element to target the host bindings at if different from the
* host that the template is being attached to.
*/
render(source: TSource, host: HTMLElement | string): HTMLView;
render(source: TSource, host: Node | string, hostBindingTarget?: Element): HTMLView;
}

@@ -1665,0 +1717,0 @@

2

dist/fast-element.min.js

@@ -1,1 +0,1 @@

const t=[];void 0===globalThis.trustedTypes&&(globalThis.trustedTypes={createPolicy:(t,e)=>e});const e=globalThis.trustedTypes.createPolicy("fast-html",{createHTML:t=>t});let s=e;function i(){let e=0;for(;e<t.length;){if(t[e].call(),e++,e>1024){for(let s=0,i=t.length-e;s<i;s++)t[s]=t[s+e];t.length-=e,e=0}}t.length=0}const n="fast-"+Math.random().toString(36).substring(7),o=n+"{",r="}"+n,h=Object.freeze({supportsAdoptedStyleSheets:Array.isArray(document.adoptedStyleSheets)&&"replace"in CSSStyleSheet.prototype,setHTMLPolicy(t){if(s!==e)throw new Error("The HTML policy can only be set once.");s=t},createHTML:t=>s.createHTML(t),isMarker:t=>t&&8===t.nodeType&&t.data.startsWith(n),extractDirectiveIndexFromMarker:t=>parseInt(t.data.replace(n+":","")),createInterpolationPlaceholder:t=>`${o}${t}${r}`,createCustomAttributePlaceholder(t,e){return`${t}="${this.createInterpolationPlaceholder(e)}"`},createBlockPlaceholder:t=>`\x3c!--${n}:${t}--\x3e`,queueUpdate(e){t.length<1&&window.requestAnimationFrame(i),t.push(e)},nextUpdate:()=>new Promise(t=>{h.queueUpdate(t)}),setAttribute(t,e,s){null==s?t.removeAttribute(e):t.setAttribute(e,s)},setBooleanAttribute(t,e,s){s?t.setAttribute(e,""):t.removeAttribute(e)}});function l(t){const e=this.spillover;-1===e.indexOf(t)&&e.push(t)}function a(t){const e=this.spillover,s=e.indexOf(t);-1!==s&&e.splice(s,1)}function c(t){const e=this.spillover,s=this.source;for(let i=0,n=e.length;i<n;++i)e[i].handleChange(s,t)}function d(t){return-1!==this.spillover.indexOf(t)}class u{constructor(t,e){this.sub1=void 0,this.sub2=void 0,this.spillover=void 0,this.source=t,this.sub1=e}has(t){return this.sub1===t||this.sub2===t}subscribe(t){this.has(t)||(void 0!==this.sub1?void 0!==this.sub2?(this.spillover=[this.sub1,this.sub2,t],this.subscribe=l,this.unsubscribe=a,this.notify=c,this.has=d,this.sub1=void 0,this.sub2=void 0):this.sub2=t:this.sub1=t)}unsubscribe(t){this.sub1===t?this.sub1=void 0:this.sub2===t&&(this.sub2=void 0)}notify(t){const e=this.sub1,s=this.sub2,i=this.source;void 0!==e&&e.handleChange(i,t),void 0!==s&&s.handleChange(i,t)}}class f{constructor(t){this.subscribers={},this.source=t}notify(t){const e=this.subscribers[t];void 0!==e&&e.notify(t)}subscribe(t,e){let s=this.subscribers[e];void 0===s&&(this.subscribers[e]=s=new u(this.source)),s.subscribe(t)}unsubscribe(t,e){const s=this.subscribers[e];void 0!==s&&s.unsubscribe(t)}}const g=/(\:|\&\&|\|\||if)/,p=new WeakMap,b=new WeakMap;let v=void 0,m=t=>{throw new Error("Must call enableArrayObservation before observing arrays.")};class C{constructor(t,e){this.name=t,this.field="_"+t,this.callback=t+"Changed",this.hasCallback=this.callback in e}getValue(t){return void 0!==v&&v.watch(t,this.name),t[this.field]}setValue(t,e){const s=this.field,i=t[s];i!==e&&(t[s]=e,this.hasCallback&&t[this.callback](i,e),x(t).notify(this.name))}}const y=Object.freeze({setArrayObserverFactory(t){m=t},getNotifier(t){let e=t.$fastController||p.get(t);return void 0===e&&(Array.isArray(t)?e=m(t):p.set(t,e=new f(t))),e},track(t,e){void 0!==v&&v.watch(t,e)},trackVolatile(){void 0!==v&&(v.needsRefresh=!0)},notify(t,e){x(t).notify(e)},defineProperty(t,e){"string"==typeof e&&(e=new C(e,t)),this.getAccessors(t).push(e),Reflect.defineProperty(t,e.name,{enumerable:!0,get:function(){return e.getValue(this)},set:function(t){e.setValue(this,t)}})},getAccessors(t){let e=b.get(t);if(void 0===e){let s=Reflect.getPrototypeOf(t);for(;void 0===e&&null!==s;)e=b.get(s),s=Reflect.getPrototypeOf(s);e=void 0===e?[]:e.slice(0),b.set(t,e)}return e},binding(t,e,s=this.isVolatileBinding(t)){return new V(t,e,s)},isVolatileBinding:t=>g.test(t.toString())}),x=y.getNotifier,w=y.trackVolatile,B=h.queueUpdate;function O(t,e){y.defineProperty(t,e)}function S(t,e,s){return Object.assign({},s,{get:function(){var t;return w(),null===(t=s.get)||void 0===t?void 0:t.apply(this)}})}let N=null;function T(t){N=t}class A{constructor(){this.index=0,this.length=0,this.parent=null}get event(){return N}get isEven(){return this.index%2==0}get isOdd(){return this.index%2!=0}get isFirst(){return 0===this.index}get isInMiddle(){return!this.isFirst&&!this.isLast}get isLast(){return this.index===this.length-1}}y.defineProperty(A.prototype,"index"),y.defineProperty(A.prototype,"length");const k=Object.seal(new A);class V extends u{constructor(t,e,s=!1){super(t,e),this.binding=t,this.isVolatileBinding=s,this.needsRefresh=!0,this.needsQueue=!0,this.first=this,this.last=null,this.propertySource=void 0,this.propertyName=void 0,this.notifier=void 0,this.next=void 0}observe(t,e){this.needsRefresh&&null!==this.last&&this.disconnect();const s=v;v=this.needsRefresh?this:void 0,this.needsRefresh=this.isVolatileBinding;const i=this.binding(t,e);return v=s,i}disconnect(){if(null!==this.last){let t=this.first;for(;void 0!==t;)t.notifier.unsubscribe(this,t.propertyName),t=t.next;this.last=null,this.needsRefresh=!0}}watch(t,e){const s=this.last,i=x(t),n=null===s?this.first:{};if(n.propertySource=t,n.propertyName=e,n.notifier=i,i.subscribe(this,e),null!==s){if(!this.needsRefresh){v=void 0;const e=s.propertySource[s.propertyName];v=this,t===e&&(this.needsRefresh=!0)}s.next=n}this.last=n}handleChange(){this.needsQueue&&(this.needsQueue=!1,B(this))}call(){null!==this.last&&(this.needsQueue=!0,this.notify(this))}}class ${constructor(){this.targetIndex=0}}class I extends ${constructor(t,e,s){super(),this.name=t,this.behavior=e,this.options=s}createPlaceholder(t){return h.createCustomAttributePlaceholder(this.name,t)}createBehavior(t){return new this.behavior(t,this.options)}}function M(t,e){this.source=t,this.context=e,null===this.bindingObserver&&(this.bindingObserver=y.binding(this.binding,this,this.isBindingVolatile)),this.updateTarget(this.bindingObserver.observe(t,e))}function F(t,e){this.source=t,this.context=e,this.target.addEventListener(this.targetName,this)}function L(){this.bindingObserver.disconnect(),this.source=null,this.context=null}function E(){this.bindingObserver.disconnect(),this.source=null,this.context=null;const t=this.target.$fastView;void 0!==t&&t.isComposed&&(t.unbind(),t.needsBindOnly=!0)}function P(){this.target.removeEventListener(this.targetName,this),this.source=null,this.context=null}function j(t){h.setAttribute(this.target,this.targetName,t)}function R(t){h.setBooleanAttribute(this.target,this.targetName,t)}function H(t){if(null==t&&(t=""),t.create){this.target.textContent="";let e=this.target.$fastView;void 0===e?e=t.create():this.target.$fastTemplate!==t&&(e.isComposed&&(e.remove(),e.unbind()),e=t.create()),e.isComposed?e.needsBindOnly&&(e.needsBindOnly=!1,e.bind(this.source,this.context)):(e.isComposed=!0,e.bind(this.source,this.context),e.insertBefore(this.target),this.target.$fastView=e,this.target.$fastTemplate=t)}else{const e=this.target.$fastView;void 0!==e&&e.isComposed&&(e.isComposed=!1,e.remove(),e.needsBindOnly?e.needsBindOnly=!1:e.unbind()),this.target.textContent=t}}function D(t){this.target[this.targetName]=t}function Q(t){const e=this.classVersions||Object.create(null),s=this.target;let i=this.version||0;if(null!=t&&t.length){const n=t.split(/\s+/);for(let t=0,o=n.length;t<o;++t){const o=n[t];""!==o&&(e[o]=i,s.classList.add(o))}}if(this.classVersions=e,this.version=i+1,0!==i){i-=1;for(const t in e)e[t]===i&&s.classList.remove(t)}}class U extends ${constructor(t){super(),this.binding=t,this.bind=M,this.unbind=L,this.updateTarget=j,this.createPlaceholder=h.createInterpolationPlaceholder,this.isBindingVolatile=y.isVolatileBinding(this.bind)}get targetName(){return this.originalTargetName}set targetName(t){if(this.originalTargetName=t,void 0!==t)switch(t[0]){case":":if(this.cleanedTargetName=t.substr(1),this.updateTarget=D,"innerHTML"===this.cleanedTargetName){const t=this.binding;this.binding=(e,s)=>h.createHTML(t(e,s))}break;case"?":this.cleanedTargetName=t.substr(1),this.updateTarget=R;break;case"@":this.cleanedTargetName=t.substr(1),this.bind=F,this.unbind=P;break;default:this.cleanedTargetName=t,"class"===t&&(this.updateTarget=Q)}}targetAtContent(){this.updateTarget=H,this.unbind=E}createBehavior(t){return new q(t,this.binding,this.isBindingVolatile,this.bind,this.unbind,this.updateTarget,this.cleanedTargetName)}}class q{constructor(t,e,s,i,n,o,r){this.source=null,this.context=null,this.bindingObserver=null,this.target=t,this.binding=e,this.isBindingVolatile=s,this.bind=i,this.unbind=n,this.updateTarget=o,this.targetName=r}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleEvent(t){T(t);const e=this.binding(this.source,this.context);T(null),!0!==e&&t.preventDefault()}}const W={locatedDirectives:0,targetIndex:-1};function z(t){if(1===t.length)return W.locatedDirectives++,t[0];let e;const s=t.length,i=t.map(t=>"string"==typeof t?()=>t:(e=t.targetName||e,W.locatedDirectives++,t.binding)),n=new U((t,e)=>{let n="";for(let o=0;o<s;++o)n+=i[o](t,e);return n});return n.targetName=e,n}const _=r.length;function K(t,e){const s=t.split(o);if(1===s.length)return null;const i=[];for(let t=0,n=s.length;t<n;++t){const n=s[t],o=n.indexOf(r);let h;if(-1===o)h=n;else{const t=parseInt(n.substring(0,o));i.push(e[t]),h=n.substring(o+_)}""!==h&&i.push(h)}return i}function G(t,e,s,i=!1){const n=t.attributes;for(let o=0,r=n.length;o<r;++o){const h=n[o],l=h.value,a=K(l,e);let c=null;null===a?i&&(c=new U(()=>l),c.targetName=h.name):c=z(a),null!==c&&(t.removeAttributeNode(h),o--,r--,c.targetIndex=W.targetIndex,s.push(c))}}function J(t,e,s,i){const n=K(t.textContent,e);if(null!==n){let e=t;for(let h=0,l=n.length;h<l;++h){const l=n[h],a=0===h?t:e.parentNode.insertBefore(document.createTextNode(""),e.nextSibling);"string"==typeof l?a.textContent=l:(a.textContent=" ",r=s,(o=l).targetAtContent(),o.targetIndex=W.targetIndex,r.push(o),W.locatedDirectives++),e=a,W.targetIndex++,a!==t&&i.nextNode()}W.targetIndex--}var o,r}function X(t,e){const s=[];W.locatedDirectives=0,G(t,e,s,!0);const i=t.content,n=[],o=e.length,r=document.createTreeWalker(i,133,null,!1);for(W.targetIndex=-1;W.locatedDirectives<o;){const t=r.nextNode();if(null===t)break;switch(W.targetIndex++,t.nodeType){case 1:G(t,e,n);break;case 3:J(t,e,n,r);break;case 8:if(h.isMarker(t)){const s=e[h.extractDirectiveIndexFromMarker(t)];s.targetIndex=W.targetIndex,W.locatedDirectives++,n.push(s)}else t.parentNode.removeChild(t),W.targetIndex--}}let l=0;return h.isMarker(i.firstChild)&&(i.insertBefore(document.createComment(""),i.firstChild),l=-1),{fragment:i,viewBehaviorFactories:n,hostBehaviorFactories:s,targetOffset:l}}const Y=document.createRange();class Z{constructor(t,e){this.fragment=t,this.behaviors=e,this.source=null,this.context=null,this.firstChild=t.firstChild,this.lastChild=t.lastChild}appendTo(t){t.appendChild(this.fragment)}insertBefore(t){if(this.fragment.hasChildNodes())t.parentNode.insertBefore(this.fragment,t);else{const e=t.parentNode,s=this.lastChild;let i,n=this.firstChild;for(;n!==s;)i=n.nextSibling,e.insertBefore(n,t),n=i;e.insertBefore(s,t)}}remove(){const t=this.fragment,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.appendChild(i),i=s;t.appendChild(e)}dispose(){const t=this.firstChild.parentNode,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.removeChild(i),i=s;t.removeChild(e);const n=this.behaviors,o=this.source;for(let t=0,e=n.length;t<e;++t)n[t].unbind(o)}bind(t,e){const s=this.behaviors;if(this.source!==t)if(null!==this.source){const i=this.source;this.source=t,this.context=e;for(let n=0,o=s.length;n<o;++n){const o=s[n];o.unbind(i),o.bind(t,e)}}else{this.source=t,this.context=e;for(let i=0,n=s.length;i<n;++i)s[i].bind(t,e)}}unbind(){if(null===this.source)return;const t=this.behaviors,e=this.source;for(let s=0,i=t.length;s<i;++s)t[s].unbind(e);this.source=null}static disposeContiguousBatch(t){if(0!==t.length){Y.setStart(t[0].firstChild,0),Y.setEnd(t[t.length-1].lastChild.nextSibling,0),Y.deleteContents();for(let e=0,s=t.length;e<s;++e){const s=t[e],i=s.behaviors,n=s.source;for(let t=0,e=i.length;t<e;++t)i[t].unbind(n)}}}}class tt{constructor(t,e){this.behaviorCount=0,this.hasHostBehaviors=!1,this.fragment=null,this.targetOffset=0,this.viewBehaviorFactories=null,this.hostBehaviorFactories=null,this.html=t,this.directives=e}create(t){if(null===this.fragment){let t;const e=this.html;if("string"==typeof e){t=document.createElement("template"),t.innerHTML=h.createHTML(e);const s=t.content.firstElementChild;null!==s&&"TEMPLATE"===s.tagName&&(t=s)}else t=e;const s=X(t,this.directives);this.fragment=s.fragment,this.viewBehaviorFactories=s.viewBehaviorFactories,this.hostBehaviorFactories=s.hostBehaviorFactories,this.targetOffset=s.targetOffset,this.behaviorCount=this.viewBehaviorFactories.length+this.hostBehaviorFactories.length,this.hasHostBehaviors=this.hostBehaviorFactories.length>0}const e=this.fragment.cloneNode(!0),s=this.viewBehaviorFactories,i=new Array(this.behaviorCount),n=document.createTreeWalker(e,133,null,!1);let o=0,r=this.targetOffset,l=n.nextNode();for(let t=s.length;o<t;++o){const t=s[o],e=t.targetIndex;for(;null!==l;){if(r===e){i[o]=t.createBehavior(l);break}l=n.nextNode(),r++}}if(this.hasHostBehaviors){const e=this.hostBehaviorFactories;for(let s=0,n=e.length;s<n;++s,++o)i[o]=e[s].createBehavior(t)}return new Z(e,i)}render(t,e){"string"==typeof e&&(e=document.getElementById(e));const s=this.create(e);return s.bind(t,k),s.appendTo(e),s}}const et=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function st(t,...e){const s=[];let i="";for(let n=0,o=t.length-1;n<o;++n){const o=t[n];let r=e[n];if(i+=o,r instanceof tt){const t=r;r=()=>t}if("function"==typeof r){r=new U(r);const t=et.exec(o);null!==t&&(r.targetName=t[2])}r instanceof $?(i+=r.createPlaceholder(s.length),s.push(r)):i+=r}return i+=t[t.length-1],new tt(i,s)}const it={toView:t=>t?"true":"false",fromView:t=>null!=t&&"false"!==t&&!1!==t&&0!==t},nt={toView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e.toString()},fromView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e}};class ot{constructor(t,e,s=e.toLowerCase(),i="reflect",n){this.guards=new Set,this.Owner=t,this.name=e,this.attribute=s,this.mode=i,this.converter=n,this.fieldName="_"+e,this.callbackName=e+"Changed",this.hasCallback=this.callbackName in t.prototype,"boolean"===i&&void 0===n&&(this.converter=it)}setValue(t,e){const s=t[this.fieldName],i=this.converter;void 0!==i&&(e=i.fromView(e)),s!==e&&(t[this.fieldName]=e,this.tryReflectToAttribute(t),this.hasCallback&&t[this.callbackName](s,e),t.$fastController.notify(this.name))}getValue(t){return y.track(t,this.name),t[this.fieldName]}onAttributeChangedCallback(t,e){this.guards.has(t)||(this.guards.add(t),this.setValue(t,e),this.guards.delete(t))}tryReflectToAttribute(t){const e=this.mode,s=this.guards;s.has(t)||"fromView"===e||h.queueUpdate(()=>{s.add(t);const i=t[this.fieldName];switch(e){case"reflect":const e=this.converter;h.setAttribute(t,this.attribute,void 0!==e?e.toView(i):i);break;case"boolean":h.setBooleanAttribute(t,this.attribute,i)}s.delete(t)})}static collect(t,...e){const s=[];e.push(t.attributes);for(let i=0,n=e.length;i<n;++i){const n=e[i];if(void 0!==n)for(let e=0,i=n.length;e<i;++e){const i=n[e];"string"==typeof i?s.push(new ot(t,i)):s.push(new ot(t,i.property,i.attribute,i.mode,i.converter))}}return s}}function rt(t,e){let s;function i(t,e){arguments.length>1&&(s.property=e);const i=t.constructor.attributes||(t.constructor.attributes=[]);i.push(s)}return arguments.length>1?(s={},void i(t,e)):(s=void 0===t?{}:t,i)}const ht=new Map;class lt{constructor(){this.behaviors=null}withBehaviors(...t){return this.behaviors=null===this.behaviors?t:this.behaviors.concat(t),this}withKey(t){return ht.set(t,this),this}static find(t){return ht.get(t)||null}}function at(t){return t.map(t=>t instanceof lt?at(t.styles):[t]).reduce((t,e)=>t.concat(e),[])}function ct(t){return t.map(t=>t instanceof lt?t.behaviors:null).reduce((t,e)=>null===e?t:(null===t&&(t=[]),t.concat(e)),null)}class dt extends lt{constructor(t,e){super(),this.styles=t,this.behaviors=null,this.behaviors=ct(t),this.styleSheets=at(t).map(t=>{if(t instanceof CSSStyleSheet)return t;let s=e.get(t);return void 0===s&&(s=new CSSStyleSheet,s.replaceSync(t),e.set(t,s)),s})}addStylesTo(t){t.adoptedStyleSheets=[...t.adoptedStyleSheets,...this.styleSheets]}removeStylesFrom(t){const e=this.styleSheets;t.adoptedStyleSheets=t.adoptedStyleSheets.filter(t=>-1===e.indexOf(t))}}let ut=0;class ft extends lt{constructor(t){super(),this.styles=t,this.behaviors=null,this.behaviors=ct(t),this.styleSheets=at(t),this.styleClass="fast-style-class-"+ ++ut}addStylesTo(t){const e=this.styleSheets,s=this.styleClass;t===document&&(t=document.body);for(let i=e.length-1;i>-1;--i){const n=document.createElement("style");n.innerHTML=e[i],n.className=s,t.prepend(n)}}removeStylesFrom(t){t===document&&(t=document.body);const e=t.querySelectorAll("."+this.styleClass);for(let s=0,i=e.length;s<i;++s)t.removeChild(e[s])}}const gt=(()=>{if(h.supportsAdoptedStyleSheets){const t=new Map;return e=>new dt(e,t)}return t=>new ft(t)})();function pt(t,...e){const s=[];let i="";for(let n=0,o=t.length-1;n<o;++n){i+=t[n];const o=e[n];o instanceof lt||o instanceof CSSStyleSheet?(""!==i.trim()&&(s.push(i),i=""),s.push(o)):i+=o}return i+=t[t.length-1],""!==i.trim()&&s.push(i),gt(s)}class bt{constructor(t,e,s,i,n,o,r,h){this.name=t,this.attributes=e,this.propertyLookup=s,this.attributeLookup=i,this.template=n,this.shadowOptions=r,this.elementOptions=h,this.styles=void 0===o||o instanceof lt?o:pt` ${o} `}}const vt=new Map,mt={bubbles:!0,composed:!0};class Ct extends f{constructor(t,e){super(t),this.boundObservables=null,this.behaviors=null,this.view=null,this.isConnected=!1,this.element=t,this.definition=e;const s=e.template,i=e.styles,n=void 0===e.shadowOptions?void 0:t.attachShadow(e.shadowOptions);if(void 0!==s){const e=this.view=s.create(this.element);void 0===n?e.appendTo(t):e.appendTo(n)}void 0!==i&&this.addStyles(i,n);const o=y.getAccessors(t);if(o.length>0){const e=this.boundObservables=Object.create(null);for(let s=0,i=o.length;s<i;++s){const i=o[s].name,n=t[i];void 0!==n&&(delete t[i],e[i]=n)}}}addStyles(t,e=this.element.shadowRoot){null!==e&&t.addStylesTo(e);const s=t.behaviors;null!==s&&this.addBehaviors(s)}removeStyles(t){const e=this.element.shadowRoot;null!==e&&t.removeStylesFrom(e);const s=t.behaviors;null!==s&&this.removeBehaviors(s)}addBehaviors(t){const e=this.behaviors||(this.behaviors=[]),s=t.length;for(let i=0;i<s;++i)e.push(t[i]);if(this.isConnected){const e=this.element;for(let i=0;i<s;++i)t[i].bind(e,k)}}removeBehaviors(t){const e=this.behaviors;if(null===e)return;const s=t.length;for(let i=0;i<s;++i){const s=e.indexOf(t[i]);-1!==s&&e.splice(s,1)}if(this.isConnected){const e=this.element;for(let i=0;i<s;++i)t[i].unbind(e)}}onConnectedCallback(){if(this.isConnected)return;const t=this.element,e=this.boundObservables;if(null!==e){const s=Object.keys(e);for(let i=0,n=s.length;i<n;++i){const n=s[i];t[n]=e[n]}this.boundObservables=null}const s=this.view;null!==s&&s.bind(t,k);const i=this.behaviors;if(null!==i)for(let e=0,s=i.length;e<s;++e)i[e].bind(t,k);this.isConnected=!0}onDisconnectedCallback(){if(!1===this.isConnected)return;this.isConnected=!1;const t=this.view;null!==t&&t.unbind();const e=this.behaviors;if(null!==e){const t=this.element;for(let s=0,i=e.length;s<i;++s)e[s].unbind(t)}}onAttributeChangedCallback(t,e,s){const i=this.definition.attributeLookup[t];void 0!==i&&i.onAttributeChangedCallback(this.element,s)}emit(t,e,s){return!!this.isConnected&&this.element.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign({detail:e},mt),s)))}static forCustomElement(t){const e=t.$fastController;if(void 0!==e)return e;const s=vt.get(t.constructor);if(void 0===s)throw new Error("Missing FASTElement definition.");return t.$fastController=new Ct(t,s)}}const yt={mode:"open"},xt={};function wt(t){return class extends t{constructor(){super(),Ct.forCustomElement(this)}$emit(t,e,s){return this.$fastController.emit(t,e,s)}connectedCallback(){this.$fastController.onConnectedCallback()}disconnectedCallback(){this.$fastController.onDisconnectedCallback()}attributeChangedCallback(t,e,s){this.$fastController.onAttributeChangedCallback(t,e,s)}}}const Bt=Object.assign(wt(HTMLElement),{from:t=>wt(t),define(t,e=t.definition){"string"==typeof e&&(e={name:e});const s=e.name,i=ot.collect(t,e.attributes),n=void 0===e.shadowOptions?yt:null===e.shadowOptions?void 0:Object.assign(Object.assign({},yt),e.shadowOptions),o=void 0===e.elementOptions?xt:Object.assign(Object.assign({},xt),e.shadowOptions),r=new Array(i.length),h=t.prototype,l={},a={};for(let t=0,e=i.length;t<e;++t){const e=i[t];r[t]=e.attribute,l[e.name]=e,a[e.attribute]=e,y.defineProperty(h,e)}Reflect.defineProperty(t,"observedAttributes",{value:r,enumerable:!0});const c=new bt(s,i,l,a,e.template,e.styles,n,o);return vt.set(t,c),customElements.define(s,t,c.elementOptions),t},getDefinition:t=>vt.get(t)});function Ot(t){return function(e){Bt.define(e,t)}}const St=Object.freeze([]);class Nt{constructor(t,e){this.target=t,this.propertyName=e}bind(t){t[this.propertyName]=this.target}unbind(){}}function Tt(t){return new I("fast-ref",Nt,t)}function At(t,e){const s="function"==typeof e?e:()=>e;return(e,i)=>t(e,i)?s(e,i):null}function kt(t,e,s){return{index:t,removed:e,addedCount:s}}function Vt(t,e,s,i,n,o){let r=0,h=0;const l=Math.min(s-e,o-n);if(0===e&&0===n&&(r=function(t,e,s){for(let i=0;i<s;++i)if(t[i]!==e[i])return i;return s}(t,i,l)),s===t.length&&o===i.length&&(h=function(t,e,s){let i=t.length,n=e.length,o=0;for(;o<s&&t[--i]===e[--n];)o++;return o}(t,i,l-r)),n+=r,o-=h,(s-=h)-(e+=r)==0&&o-n==0)return St;if(e===s){const t=kt(e,[],0);for(;n<o;)t.removed.push(i[n++]);return[t]}if(n===o)return[kt(e,[],s-e)];const a=function(t){let e=t.length-1,s=t[0].length-1,i=t[e][s];const n=[];for(;e>0||s>0;){if(0===e){n.push(2),s--;continue}if(0===s){n.push(3),e--;continue}const o=t[e-1][s-1],r=t[e-1][s],h=t[e][s-1];let l;l=r<h?r<o?r:o:h<o?h:o,l===o?(o===i?n.push(0):(n.push(1),i=o),e--,s--):l===r?(n.push(3),e--,i=r):(n.push(2),s--,i=h)}return n.reverse(),n}(function(t,e,s,i,n,o){const r=o-n+1,h=s-e+1,l=new Array(r);let a,c;for(let t=0;t<r;++t)l[t]=new Array(h),l[t][0]=t;for(let t=0;t<h;++t)l[0][t]=t;for(let s=1;s<r;++s)for(let o=1;o<h;++o)t[e+o-1]===i[n+s-1]?l[s][o]=l[s-1][o-1]:(a=l[s-1][o]+1,c=l[s][o-1]+1,l[s][o]=a<c?a:c);return l}(t,e,s,i,n,o)),c=[];let d=void 0,u=e,f=n;for(let t=0;t<a.length;++t)switch(a[t]){case 0:void 0!==d&&(c.push(d),d=void 0),u++,f++;break;case 1:void 0===d&&(d=kt(u,[],0)),d.addedCount++,u++,d.removed.push(i[f]),f++;break;case 2:void 0===d&&(d=kt(u,[],0)),d.addedCount++,u++;break;case 3:void 0===d&&(d=kt(u,[],0)),d.removed.push(i[f]),f++}return void 0!==d&&c.push(d),c}const $t=Array.prototype.push;function It(t,e,s,i){const n=kt(e,s,i);let o=!1,r=0;for(let e=0,s=t.length;e<s;e++){const s=t[e];if(s.index+=r,o)continue;const i=(h=n.index,l=n.index+n.removed.length,a=s.index,c=s.index+s.addedCount,l<a||c<h?-1:l===a||c===h?0:h<a?l<c?l-a:c-a:c<l?c-h:l-h);if(i>=0){t.splice(e,1),e--,r-=s.addedCount-s.removed.length,n.addedCount+=s.addedCount-i;const h=n.removed.length+s.removed.length-i;if(n.addedCount||h){let t=s.removed;if(n.index<s.index){const e=n.removed.slice(0,s.index-n.index);$t.apply(e,t),t=e}if(n.index+n.removed.length>s.index+s.addedCount){const e=n.removed.slice(s.index+s.addedCount-n.index);$t.apply(t,e)}n.removed=t,s.index<n.index&&(n.index=s.index)}else o=!0}else if(n.index<s.index){o=!0,t.splice(e,0,n),e++;const i=n.addedCount-n.removed.length;s.index+=i,r+=i}}var h,l,a,c;o||t.push(n)}function Mt(t,e){let s=[];const i=function(t){const e=[];for(let s=0,i=t.length;s<i;s++){const i=t[s];It(e,i.index,i.removed,i.addedCount)}return e}(e);for(let e=0,n=i.length;e<n;++e){const n=i[e];1!==n.addedCount||1!==n.removed.length?s=s.concat(Vt(t,n.index,n.index+n.addedCount,n.removed,0,n.removed.length)):n.removed[0]!==t[n.index]&&s.push(n)}return s}let Ft=!1;function Lt(t,e){let s=t.index;const i=e.length;return s>i?s=i-t.addedCount:s<0&&(s=i+t.removed.length+s-t.addedCount),s<0&&(s=0),t.index=s,t}class Et extends u{constructor(t){super(t),this.oldCollection=void 0,this.splices=void 0,this.needsQueue=!0,this.call=this.flush,t.$fastController=this}addSplice(t){void 0===this.splices?this.splices=[t]:this.splices.push(t),this.needsQueue&&(this.needsQueue=!1,h.queueUpdate(this))}reset(t){this.oldCollection=t,this.needsQueue&&(this.needsQueue=!1,h.queueUpdate(this))}flush(){const t=this.splices,e=this.oldCollection;if(void 0===t&&void 0===e)return;this.needsQueue=!0,this.splices=void 0,this.oldCollection=void 0;const s=void 0===e?Mt(this.source,t):Vt(this.source,0,this.source.length,e,0,e.length);this.notify(s)}}const Pt=Object.freeze({positioning:!1});function jt(t,e,s,i){t.bind(e[s],i)}function Rt(t,e,s,i){const n=Object.create(i);n.index=s,n.length=e.length,t.bind(e[s],n)}class Ht{constructor(t,e,s,i,n,o){this.location=t,this.itemsBinding=e,this.templateBinding=i,this.options=o,this.source=null,this.views=[],this.items=null,this.itemsObserver=null,this.originalContext=void 0,this.childContext=void 0,this.bindView=jt,this.itemsBindingObserver=y.binding(e,this,s),this.templateBindingObserver=y.binding(i,this,n),o.positioning&&(this.bindView=Rt)}bind(t,e){this.source=t,this.originalContext=e,this.childContext=Object.create(e),this.childContext.parent=t,this.items=this.itemsBindingObserver.observe(t,this.originalContext),this.template=this.templateBindingObserver.observe(t,this.originalContext),this.observeItems(),this.refreshAllViews()}unbind(){this.source=null,this.items=null,null!==this.itemsObserver&&this.itemsObserver.unsubscribe(this),this.unbindAllViews(),this.itemsBindingObserver.disconnect(),this.templateBindingObserver.disconnect()}handleChange(t,e){t===this.itemsBinding?(this.items=this.itemsBindingObserver.observe(this.source,this.originalContext),this.observeItems(),this.refreshAllViews()):t===this.templateBinding?(this.template=this.templateBindingObserver.observe(this.source,this.originalContext),this.refreshAllViews(!0)):this.updateViews(e)}observeItems(){this.items||(this.items=[]);const t=this.itemsObserver,e=this.itemsObserver=y.getNotifier(this.items);t!==e&&(null!==t&&t.unsubscribe(this),e.subscribe(this))}updateViews(t){const e=this.childContext,s=this.views,i=[],n=this.bindView;let o=0;for(let e=0,n=t.length;e<n;++e){const n=t[e],r=n.removed;i.push(...s.splice(n.index+o,r.length)),o-=n.addedCount}const r=this.items,h=this.template;for(let o=0,l=t.length;o<l;++o){const l=t[o];let a=l.index;const c=a+l.addedCount;for(;a<c;++a){const t=s[a],o=t?t.firstChild:this.location,l=i.length>0?i.shift():h.create();s.splice(a,0,l),n(l,r,a,e),l.insertBefore(o)}}for(let t=0,e=i.length;t<e;++t)i[t].dispose();if(this.options.positioning)for(let t=0,e=s.length;t<e;++t){const i=s[t].context;i.length=e,i.index=t}}refreshAllViews(t=!1){const e=this.items,s=this.childContext,i=this.template,n=this.location,o=this.bindView;let r=e.length,h=this.views,l=h.length;if((0===r||t)&&(Z.disposeContiguousBatch(h),l=0),0===l){this.views=h=new Array(r);for(let t=0;t<r;++t){const r=i.create();o(r,e,t,s),h[t]=r,r.insertBefore(n)}}else{let t=0;for(;t<r;++t)if(t<l){o(h[t],e,t,s)}else{const r=i.create();o(r,e,t,s),h.push(r),r.insertBefore(n)}const a=h.splice(t,l-t);for(t=0,r=a.length;t<r;++t)a[t].dispose()}}unbindAllViews(){const t=this.views;for(let e=0,s=t.length;e<s;++e)t[e].unbind()}}class Dt extends ${constructor(t,e,s){super(),this.itemsBinding=t,this.templateBinding=e,this.options=s,this.createPlaceholder=h.createBlockPlaceholder,function(){if(Ft)return;Ft=!0,y.setArrayObserverFactory(t=>new Et(t));const t=Array.prototype,e=t.pop,s=t.push,i=t.reverse,n=t.shift,o=t.sort,r=t.splice,h=t.unshift;t.pop=function(){const t=this.length>0,s=e.apply(this,arguments),i=this.$fastController;return void 0!==i&&t&&i.addSplice(kt(this.length,[s],0)),s},t.push=function(){const t=s.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Lt(kt(this.length-arguments.length,[],arguments.length),this)),t},t.reverse=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=i.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.shift=function(){const t=this.length>0,e=n.apply(this,arguments),s=this.$fastController;return void 0!==s&&t&&s.addSplice(kt(0,[e],0)),e},t.sort=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=o.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.splice=function(){const t=r.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Lt(kt(+arguments[0],t,arguments.length>2?arguments.length-2:0),this)),t},t.unshift=function(){const t=h.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Lt(kt(0,[],arguments.length),this)),t}}(),this.isItemsBindingVolatile=y.isVolatileBinding(t),this.isTemplateBindingVolatile=y.isVolatileBinding(e)}createBehavior(t){return new Ht(t,this.itemsBinding,this.isItemsBindingVolatile,this.templateBinding,this.isTemplateBindingVolatile,this.options)}}function Qt(t,e,s=Pt){return new Dt(t,"function"==typeof e?e:()=>e,s)}function Ut(t){return t?function(e,s,i){return 1===e.nodeType&&e.matches(t)}:function(t,e,s){return 1===t.nodeType}}class qt{constructor(t,e){this.target=t,this.options=e,this.source=null}bind(t){const e=this.options.property;this.shouldUpdate=y.getAccessors(t).some(t=>t.name===e),this.source=t,this.updateTarget(this.computeNodes()),this.shouldUpdate&&this.observe()}unbind(){this.updateTarget(St),this.source=null,this.shouldUpdate&&this.disconnect()}handleEvent(){this.updateTarget(this.computeNodes())}computeNodes(){let t=this.getNodes();return void 0!==this.options.filter&&(t=t.filter(this.options.filter)),t}updateTarget(t){this.source[this.options.property]=t}}class Wt extends qt{constructor(t,e){super(t,e)}observe(){this.target.addEventListener("slotchange",this)}disconnect(){this.target.removeEventListener("slotchange",this)}getNodes(){return this.target.assignedNodes(this.options)}}function zt(t){return"string"==typeof t&&(t={property:t}),new I("fast-slotted",Wt,t)}class _t extends qt{constructor(t,e){super(t,e),this.observer=null}observe(){null===this.observer&&(this.observer=new MutationObserver(this.handleEvent.bind(this))),this.observer.observe(this.target,this.options)}disconnect(){this.observer.disconnect()}getNodes(){return Array.from(this.target.childNodes)}}function Kt(t){return"string"==typeof t?t={property:t,childList:!0}:t.childList=!0,new I("fast-children",_t,t)}export{I as AttachedBehaviorDirective,ot as AttributeDefinition,q as BindingBehavior,U as BindingDirective,_t as ChildrenBehavior,Ct as Controller,h as DOM,$ as Directive,lt as ElementStyles,A as ExecutionContext,Bt as FASTElement,bt as FASTElementDefinition,Z as HTMLView,y as Observable,f as PropertyChangeNotifier,Nt as RefBehavior,Ht as RepeatBehavior,Dt as RepeatDirective,Wt as SlottedBehavior,u as SubscriberSet,tt as ViewTemplate,rt as attr,it as booleanConverter,Kt as children,X as compileTemplate,pt as css,Ot as customElement,k as defaultExecutionContext,Ut as elements,St as emptyArray,st as html,nt as nullableNumberConverter,O as observable,Tt as ref,Qt as repeat,T as setCurrentEvent,zt as slotted,S as volatile,At as when};
const t=[];void 0===globalThis.trustedTypes&&(globalThis.trustedTypes={createPolicy:(t,e)=>e});const e=globalThis.trustedTypes.createPolicy("fast-html",{createHTML:t=>t});let s=e;function i(){let e=0;for(;e<t.length;){if(t[e].call(),e++,e>1024){for(let s=0,i=t.length-e;s<i;s++)t[s]=t[s+e];t.length-=e,e=0}}t.length=0}const n="fast-"+Math.random().toString(36).substring(2,8),o=n+"{",r="}"+n,l=Object.freeze({supportsAdoptedStyleSheets:Array.isArray(document.adoptedStyleSheets)&&"replace"in CSSStyleSheet.prototype,setHTMLPolicy(t){if(s!==e)throw new Error("The HTML policy can only be set once.");s=t},createHTML:t=>s.createHTML(t),isMarker:t=>t&&8===t.nodeType&&t.data.startsWith(n),extractDirectiveIndexFromMarker:t=>parseInt(t.data.replace(n+":","")),createInterpolationPlaceholder:t=>`${o}${t}${r}`,createCustomAttributePlaceholder(t,e){return`${t}="${this.createInterpolationPlaceholder(e)}"`},createBlockPlaceholder:t=>`\x3c!--${n}:${t}--\x3e`,queueUpdate(e){t.length<1&&window.requestAnimationFrame(i),t.push(e)},nextUpdate:()=>new Promise(t=>{l.queueUpdate(t)}),setAttribute(t,e,s){null==s?t.removeAttribute(e):t.setAttribute(e,s)},setBooleanAttribute(t,e,s){s?t.setAttribute(e,""):t.removeAttribute(e)},removeChildNodes(t){for(let e=t.firstChild;null!==e;e=t.firstChild)t.removeChild(e)},createTemplateWalker:t=>document.createTreeWalker(t,133,null,!1)});function h(t){const e=this.spillover;-1===e.indexOf(t)&&e.push(t)}function a(t){const e=this.spillover,s=e.indexOf(t);-1!==s&&e.splice(s,1)}function c(t){const e=this.spillover,s=this.source;for(let i=0,n=e.length;i<n;++i)e[i].handleChange(s,t)}function d(t){return-1!==this.spillover.indexOf(t)}class u{constructor(t,e){this.sub1=void 0,this.sub2=void 0,this.spillover=void 0,this.source=t,this.sub1=e}has(t){return this.sub1===t||this.sub2===t}subscribe(t){this.has(t)||(void 0!==this.sub1?void 0!==this.sub2?(this.spillover=[this.sub1,this.sub2,t],this.subscribe=h,this.unsubscribe=a,this.notify=c,this.has=d,this.sub1=void 0,this.sub2=void 0):this.sub2=t:this.sub1=t)}unsubscribe(t){this.sub1===t?this.sub1=void 0:this.sub2===t&&(this.sub2=void 0)}notify(t){const e=this.sub1,s=this.sub2,i=this.source;void 0!==e&&e.handleChange(i,t),void 0!==s&&s.handleChange(i,t)}}class f{constructor(t){this.subscribers={},this.source=t}notify(t){const e=this.subscribers[t];void 0!==e&&e.notify(t)}subscribe(t,e){let s=this.subscribers[e];void 0===s&&(this.subscribers[e]=s=new u(this.source)),s.subscribe(t)}unsubscribe(t,e){const s=this.subscribers[e];void 0!==s&&s.unsubscribe(t)}}const g=/(\:|\&\&|\|\||if)/,p=new WeakMap,b=new WeakMap;let v=void 0,m=t=>{throw new Error("Must call enableArrayObservation before observing arrays.")};class y{constructor(t,e){this.name=t,this.field="_"+t,this.callback=t+"Changed",this.hasCallback=this.callback in e}getValue(t){return void 0!==v&&v.watch(t,this.name),t[this.field]}setValue(t,e){const s=this.field,i=t[s];i!==e&&(t[s]=e,this.hasCallback&&t[this.callback](i,e),x(t).notify(this.name))}}const C=Object.freeze({setArrayObserverFactory(t){m=t},getNotifier(t){let e=t.$fastController||p.get(t);return void 0===e&&(Array.isArray(t)?e=m(t):p.set(t,e=new f(t))),e},track(t,e){void 0!==v&&v.watch(t,e)},trackVolatile(){void 0!==v&&(v.needsRefresh=!0)},notify(t,e){x(t).notify(e)},defineProperty(t,e){"string"==typeof e&&(e=new y(e,t)),this.getAccessors(t).push(e),Reflect.defineProperty(t,e.name,{enumerable:!0,get:function(){return e.getValue(this)},set:function(t){e.setValue(this,t)}})},getAccessors(t){let e=b.get(t);if(void 0===e){let s=Reflect.getPrototypeOf(t);for(;void 0===e&&null!==s;)e=b.get(s),s=Reflect.getPrototypeOf(s);e=void 0===e?[]:e.slice(0),b.set(t,e)}return e},binding(t,e,s=this.isVolatileBinding(t)){return new V(t,e,s)},isVolatileBinding:t=>g.test(t.toString())}),x=C.getNotifier,w=C.trackVolatile,B=l.queueUpdate;function O(t,e){C.defineProperty(t,e)}function S(t,e,s){return Object.assign({},s,{get:function(){return w(),s.get.apply(this)}})}let T=null;function N(t){T=t}class A{constructor(){this.index=0,this.length=0,this.parent=null}get event(){return T}get isEven(){return this.index%2==0}get isOdd(){return this.index%2!=0}get isFirst(){return 0===this.index}get isInMiddle(){return!this.isFirst&&!this.isLast}get isLast(){return this.index===this.length-1}}C.defineProperty(A.prototype,"index"),C.defineProperty(A.prototype,"length");const k=Object.seal(new A);class V extends u{constructor(t,e,s=!1){super(t,e),this.binding=t,this.isVolatileBinding=s,this.needsRefresh=!0,this.needsQueue=!0,this.first=this,this.last=null,this.propertySource=void 0,this.propertyName=void 0,this.notifier=void 0,this.next=void 0}observe(t,e){this.needsRefresh&&null!==this.last&&this.disconnect();const s=v;v=this.needsRefresh?this:void 0,this.needsRefresh=this.isVolatileBinding;const i=this.binding(t,e);return v=s,i}disconnect(){if(null!==this.last){let t=this.first;for(;void 0!==t;)t.notifier.unsubscribe(this,t.propertyName),t=t.next;this.last=null,this.needsRefresh=!0}}watch(t,e){const s=this.last,i=x(t),n=null===s?this.first:{};if(n.propertySource=t,n.propertyName=e,n.notifier=i,i.subscribe(this,e),null!==s){if(!this.needsRefresh){v=void 0;const e=s.propertySource[s.propertyName];v=this,t===e&&(this.needsRefresh=!0)}s.next=n}this.last=n}handleChange(){this.needsQueue&&(this.needsQueue=!1,B(this))}call(){null!==this.last&&(this.needsQueue=!0,this.notify(this))}}class I{constructor(){this.targetIndex=0}}class $ extends I{constructor(t,e,s){super(),this.name=t,this.behavior=e,this.options=s}createPlaceholder(t){return l.createCustomAttributePlaceholder(this.name,t)}createBehavior(t){return new this.behavior(t,this.options)}}function M(t,e){this.source=t,this.context=e,null===this.bindingObserver&&(this.bindingObserver=C.binding(this.binding,this,this.isBindingVolatile)),this.updateTarget(this.bindingObserver.observe(t,e))}function F(t,e){this.source=t,this.context=e,this.target.addEventListener(this.targetName,this)}function L(){this.bindingObserver.disconnect(),this.source=null,this.context=null}function E(){this.bindingObserver.disconnect(),this.source=null,this.context=null;const t=this.target.$fastView;void 0!==t&&t.isComposed&&(t.unbind(),t.needsBindOnly=!0)}function P(){this.target.removeEventListener(this.targetName,this),this.source=null,this.context=null}function _(t){l.setAttribute(this.target,this.targetName,t)}function j(t){l.setBooleanAttribute(this.target,this.targetName,t)}function R(t){if(null==t&&(t=""),t.create){this.target.textContent="";let e=this.target.$fastView;void 0===e?e=t.create():this.target.$fastTemplate!==t&&(e.isComposed&&(e.remove(),e.unbind()),e=t.create()),e.isComposed?e.needsBindOnly&&(e.needsBindOnly=!1,e.bind(this.source,this.context)):(e.isComposed=!0,e.bind(this.source,this.context),e.insertBefore(this.target),this.target.$fastView=e,this.target.$fastTemplate=t)}else{const e=this.target.$fastView;void 0!==e&&e.isComposed&&(e.isComposed=!1,e.remove(),e.needsBindOnly?e.needsBindOnly=!1:e.unbind()),this.target.textContent=t}}function D(t){this.target[this.targetName]=t}function H(t){const e=this.classVersions||Object.create(null),s=this.target;let i=this.version||0;if(null!=t&&t.length){const n=t.split(/\s+/);for(let t=0,o=n.length;t<o;++t){const o=n[t];""!==o&&(e[o]=i,s.classList.add(o))}}if(this.classVersions=e,this.version=i+1,0!==i){i-=1;for(const t in e)e[t]===i&&s.classList.remove(t)}}class z extends I{constructor(t){super(),this.binding=t,this.bind=M,this.unbind=L,this.updateTarget=_,this.createPlaceholder=l.createInterpolationPlaceholder,this.isBindingVolatile=C.isVolatileBinding(this.bind)}get targetName(){return this.originalTargetName}set targetName(t){if(this.originalTargetName=t,void 0!==t)switch(t[0]){case":":if(this.cleanedTargetName=t.substr(1),this.updateTarget=D,"innerHTML"===this.cleanedTargetName){const t=this.binding;this.binding=(e,s)=>l.createHTML(t(e,s))}break;case"?":this.cleanedTargetName=t.substr(1),this.updateTarget=j;break;case"@":this.cleanedTargetName=t.substr(1),this.bind=F,this.unbind=P;break;default:this.cleanedTargetName=t,"class"===t&&(this.updateTarget=H)}}targetAtContent(){this.updateTarget=R,this.unbind=E}createBehavior(t){return new Q(t,this.binding,this.isBindingVolatile,this.bind,this.unbind,this.updateTarget,this.cleanedTargetName)}}class Q{constructor(t,e,s,i,n,o,r){this.source=null,this.context=null,this.bindingObserver=null,this.target=t,this.binding=e,this.isBindingVolatile=s,this.bind=i,this.unbind=n,this.updateTarget=o,this.targetName=r}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleEvent(t){N(t);const e=this.binding(this.source,this.context);N(null),!0!==e&&t.preventDefault()}}const U={locatedDirectives:0,targetIndex:-1};function q(t){if(1===t.length)return U.locatedDirectives++,t[0];let e;const s=t.length,i=t.map(t=>"string"==typeof t?()=>t:(e=t.targetName||e,U.locatedDirectives++,t.binding)),n=new z((t,e)=>{let n="";for(let o=0;o<s;++o)n+=i[o](t,e);return n});return n.targetName=e,n}const W=r.length;function K(t,e){const s=t.split(o);if(1===s.length)return null;const i=[];for(let t=0,n=s.length;t<n;++t){const n=s[t],o=n.indexOf(r);let l;if(-1===o)l=n;else{const t=parseInt(n.substring(0,o));i.push(e[t]),l=n.substring(o+W)}""!==l&&i.push(l)}return i}function G(t,e,s,i=!1){const n=t.attributes;for(let o=0,r=n.length;o<r;++o){const l=n[o],h=l.value,a=K(h,e);let c=null;null===a?i&&(c=new z(()=>h),c.targetName=l.name):c=q(a),null!==c&&(t.removeAttributeNode(l),o--,r--,c.targetIndex=U.targetIndex,s.push(c))}}function J(t,e,s,i){const n=K(t.textContent,e);if(null!==n){let e=t;for(let l=0,h=n.length;l<h;++l){const h=n[l],a=0===l?t:e.parentNode.insertBefore(document.createTextNode(""),e.nextSibling);"string"==typeof h?a.textContent=h:(a.textContent=" ",r=s,(o=h).targetAtContent(),o.targetIndex=U.targetIndex,r.push(o),U.locatedDirectives++),e=a,U.targetIndex++,a!==t&&i.nextNode()}U.targetIndex--}var o,r}function X(t,e){const s=[];U.locatedDirectives=0,G(t,e,s,!0);const i=t.content,n=[],o=e.length,r=l.createTemplateWalker(i);for(U.targetIndex=-1;U.locatedDirectives<o;){const t=r.nextNode();if(null===t)break;switch(U.targetIndex++,t.nodeType){case 1:G(t,e,n);break;case 3:J(t,e,n,r);break;case 8:if(l.isMarker(t)){const s=e[l.extractDirectiveIndexFromMarker(t)];s.targetIndex=U.targetIndex,U.locatedDirectives++,n.push(s)}else t.parentNode.removeChild(t),U.targetIndex--}}let h=0;return l.isMarker(i.firstChild)&&(i.insertBefore(document.createComment(""),i.firstChild),h=-1),{fragment:i,viewBehaviorFactories:n,hostBehaviorFactories:s,targetOffset:h}}const Y=document.createRange();class Z{constructor(t,e){this.fragment=t,this.behaviors=e,this.source=null,this.context=null,this.firstChild=t.firstChild,this.lastChild=t.lastChild}appendTo(t){t.appendChild(this.fragment)}insertBefore(t){if(this.fragment.hasChildNodes())t.parentNode.insertBefore(this.fragment,t);else{const e=t.parentNode,s=this.lastChild;let i,n=this.firstChild;for(;n!==s;)i=n.nextSibling,e.insertBefore(n,t),n=i;e.insertBefore(s,t)}}remove(){const t=this.fragment,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.appendChild(i),i=s;t.appendChild(e)}dispose(){const t=this.firstChild.parentNode,e=this.lastChild;let s,i=this.firstChild;for(;i!==e;)s=i.nextSibling,t.removeChild(i),i=s;t.removeChild(e);const n=this.behaviors,o=this.source;for(let t=0,e=n.length;t<e;++t)n[t].unbind(o)}bind(t,e){const s=this.behaviors;if(this.source!==t)if(null!==this.source){const i=this.source;this.source=t,this.context=e;for(let n=0,o=s.length;n<o;++n){const o=s[n];o.unbind(i),o.bind(t,e)}}else{this.source=t,this.context=e;for(let i=0,n=s.length;i<n;++i)s[i].bind(t,e)}}unbind(){if(null===this.source)return;const t=this.behaviors,e=this.source;for(let s=0,i=t.length;s<i;++s)t[s].unbind(e);this.source=null}static disposeContiguousBatch(t){if(0!==t.length){Y.setStart(t[0].firstChild,0),Y.setEnd(t[t.length-1].lastChild.nextSibling,0),Y.deleteContents();for(let e=0,s=t.length;e<s;++e){const s=t[e],i=s.behaviors,n=s.source;for(let t=0,e=i.length;t<e;++t)i[t].unbind(n)}}}}class tt{constructor(t,e){this.behaviorCount=0,this.hasHostBehaviors=!1,this.fragment=null,this.targetOffset=0,this.viewBehaviorFactories=null,this.hostBehaviorFactories=null,this.html=t,this.directives=e}create(t){if(null===this.fragment){let t;const e=this.html;if("string"==typeof e){t=document.createElement("template"),t.innerHTML=l.createHTML(e);const s=t.content.firstElementChild;null!==s&&"TEMPLATE"===s.tagName&&(t=s)}else t=e;const s=X(t,this.directives);this.fragment=s.fragment,this.viewBehaviorFactories=s.viewBehaviorFactories,this.hostBehaviorFactories=s.hostBehaviorFactories,this.targetOffset=s.targetOffset,this.behaviorCount=this.viewBehaviorFactories.length+this.hostBehaviorFactories.length,this.hasHostBehaviors=this.hostBehaviorFactories.length>0}const e=this.fragment.cloneNode(!0),s=this.viewBehaviorFactories,i=new Array(this.behaviorCount),n=l.createTemplateWalker(e);let o=0,r=this.targetOffset,h=n.nextNode();for(let t=s.length;o<t;++o){const t=s[o],e=t.targetIndex;for(;null!==h;){if(r===e){i[o]=t.createBehavior(h);break}h=n.nextNode(),r++}}if(this.hasHostBehaviors){const e=this.hostBehaviorFactories;for(let s=0,n=e.length;s<n;++s,++o)i[o]=e[s].createBehavior(t)}return new Z(e,i)}render(t,e,s){"string"==typeof e&&(e=document.getElementById(e)),void 0===s&&(s=e);const i=this.create(s);return i.bind(t,k),i.appendTo(e),i}}const et=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function st(t,...e){const s=[];let i="";for(let n=0,o=t.length-1;n<o;++n){const o=t[n];let r=e[n];if(i+=o,r instanceof tt){const t=r;r=()=>t}if("function"==typeof r){r=new z(r);const t=et.exec(o);null!==t&&(r.targetName=t[2])}r instanceof I?(i+=r.createPlaceholder(s.length),s.push(r)):i+=r}return i+=t[t.length-1],new tt(i,s)}const it=new Map;class nt{constructor(){this.behaviors=null}withBehaviors(...t){return this.behaviors=null===this.behaviors?t:this.behaviors.concat(t),this}withKey(t){return it.set(t,this),this}static find(t){return it.get(t)||null}}function ot(t){return t.map(t=>t instanceof nt?ot(t.styles):[t]).reduce((t,e)=>t.concat(e),[])}function rt(t){return t.map(t=>t instanceof nt?t.behaviors:null).reduce((t,e)=>null===e?t:(null===t&&(t=[]),t.concat(e)),null)}class lt extends nt{constructor(t,e){super(),this.styles=t,this.behaviors=null,this.behaviors=rt(t),this.styleSheets=ot(t).map(t=>{if(t instanceof CSSStyleSheet)return t;let s=e.get(t);return void 0===s&&(s=new CSSStyleSheet,s.replaceSync(t),e.set(t,s)),s})}addStylesTo(t){t.adoptedStyleSheets=[...t.adoptedStyleSheets,...this.styleSheets]}removeStylesFrom(t){const e=this.styleSheets;t.adoptedStyleSheets=t.adoptedStyleSheets.filter(t=>-1===e.indexOf(t))}}let ht=0;class at extends nt{constructor(t){super(),this.styles=t,this.behaviors=null,this.behaviors=rt(t),this.styleSheets=ot(t),this.styleClass="fast-style-class-"+ ++ht}addStylesTo(t){const e=this.styleSheets,s=this.styleClass;t===document&&(t=document.body);for(let i=e.length-1;i>-1;--i){const n=document.createElement("style");n.innerHTML=e[i],n.className=s,t.prepend(n)}}removeStylesFrom(t){t===document&&(t=document.body);const e=t.querySelectorAll("."+this.styleClass);for(let s=0,i=e.length;s<i;++s)t.removeChild(e[s])}}const ct=(()=>{if(l.supportsAdoptedStyleSheets){const t=new Map;return e=>new lt(e,t)}return t=>new at(t)})();function dt(t,...e){const s=[];let i="";for(let n=0,o=t.length-1;n<o;++n){i+=t[n];const o=e[n];o instanceof nt||o instanceof CSSStyleSheet?(""!==i.trim()&&(s.push(i),i=""),s.push(o)):i+=o}return i+=t[t.length-1],""!==i.trim()&&s.push(i),ct(s)}const ut={toView:t=>t?"true":"false",fromView:t=>null!=t&&"false"!==t&&!1!==t&&0!==t},ft={toView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e.toString()},fromView(t){if(null==t)return null;const e=1*t;return isNaN(e)?null:e}};class gt{constructor(t,e,s=e.toLowerCase(),i="reflect",n){this.guards=new Set,this.Owner=t,this.name=e,this.attribute=s,this.mode=i,this.converter=n,this.fieldName="_"+e,this.callbackName=e+"Changed",this.hasCallback=this.callbackName in t.prototype,"boolean"===i&&void 0===n&&(this.converter=ut)}setValue(t,e){const s=t[this.fieldName],i=this.converter;void 0!==i&&(e=i.fromView(e)),s!==e&&(t[this.fieldName]=e,this.tryReflectToAttribute(t),this.hasCallback&&t[this.callbackName](s,e),t.$fastController.notify(this.name))}getValue(t){return C.track(t,this.name),t[this.fieldName]}onAttributeChangedCallback(t,e){this.guards.has(t)||(this.guards.add(t),this.setValue(t,e),this.guards.delete(t))}tryReflectToAttribute(t){const e=this.mode,s=this.guards;s.has(t)||"fromView"===e||l.queueUpdate(()=>{s.add(t);const i=t[this.fieldName];switch(e){case"reflect":const e=this.converter;l.setAttribute(t,this.attribute,void 0!==e?e.toView(i):i);break;case"boolean":l.setBooleanAttribute(t,this.attribute,i)}s.delete(t)})}static collect(t,...e){const s=[];e.push(t.attributes);for(let i=0,n=e.length;i<n;++i){const n=e[i];if(void 0!==n)for(let e=0,i=n.length;e<i;++e){const i=n[e];"string"==typeof i?s.push(new gt(t,i)):s.push(new gt(t,i.property,i.attribute,i.mode,i.converter))}}return s}}function pt(t,e){let s;function i(t,e){arguments.length>1&&(s.property=e);const i=t.constructor.attributes||(t.constructor.attributes=[]);i.push(s)}return arguments.length>1?(s={},void i(t,e)):(s=void 0===t?{}:t,i)}const bt={mode:"open"},vt={},mt=new Map;class yt{constructor(t,e=t.definition){"string"==typeof e&&(e={name:e}),this.type=t,this.name=e.name,this.template=e.template;const s=gt.collect(t,e.attributes),i=new Array(s.length),n={},o={};for(let t=0,e=s.length;t<e;++t){const e=s[t];i[t]=e.attribute,n[e.name]=e,o[e.attribute]=e}this.attributes=s,this.observedAttributes=i,this.propertyLookup=n,this.attributeLookup=o,this.shadowOptions=void 0===e.shadowOptions?bt:null===e.shadowOptions?void 0:Object.assign(Object.assign({},bt),e.shadowOptions),this.elementOptions=void 0===e.elementOptions?vt:Object.assign(Object.assign({},vt),e.elementOptions),this.styles=void 0===e.styles||e.styles instanceof nt?e.styles:dt` ${e.styles} `}define(t=customElements){const e=this.type;if(!this.isDefined){const t=this.attributes,s=e.prototype;for(let e=0,i=t.length;e<i;++e)C.defineProperty(s,t[e]);Reflect.defineProperty(e,"observedAttributes",{value:this.observedAttributes,enumerable:!0}),mt.set(e,this),this.isDefined=!0}return t.get(this.name)||t.define(this.name,e,this.elementOptions),this}static forType(t){return mt.get(t)}}const Ct=new WeakMap,xt={bubbles:!0,composed:!0};function wt(t){return t.shadowRoot||Ct.get(t)||null}class Bt extends f{constructor(t,e){super(t),this.boundObservables=null,this.behaviors=null,this.needsInitialization=!0,this._template=null,this._styles=null,this.view=null,this.isConnected=!1,this.element=t,this.definition=e;const s=e.shadowOptions;if(void 0!==s){const e=t.attachShadow(s);"closed"===s.mode&&Ct.set(t,e)}const i=C.getAccessors(t);if(i.length>0){const e=this.boundObservables=Object.create(null);for(let s=0,n=i.length;s<n;++s){const n=i[s].name,o=t[n];void 0!==o&&(delete t[n],e[n]=o)}}}get template(){return this._template}set template(t){this._template!==t&&(this._template=t,this.needsInitialization||this.renderTemplate(t))}get styles(){return this._styles}set styles(t){this._styles!==t&&(null!==this._styles&&this.removeStyles(this._styles),this._styles=t,this.needsInitialization||null===t||this.addStyles(t))}addStyles(t){const e=t.behaviors,s=wt(this.element)||this.element.getRootNode();t.addStylesTo(s),null!==e&&this.addBehaviors(e)}removeStyles(t){const e=t.behaviors,s=wt(this.element)||this.element.getRootNode();t.removeStylesFrom(s),null!==e&&this.removeBehaviors(e)}addBehaviors(t){const e=this.behaviors||(this.behaviors=[]),s=t.length;for(let i=0;i<s;++i)e.push(t[i]);if(this.isConnected){const e=this.element;for(let i=0;i<s;++i)t[i].bind(e,k)}}removeBehaviors(t){const e=this.behaviors;if(null===e)return;const s=t.length;for(let i=0;i<s;++i){const s=e.indexOf(t[i]);-1!==s&&e.splice(s,1)}if(this.isConnected){const e=this.element;for(let i=0;i<s;++i)t[i].unbind(e)}}onConnectedCallback(){if(this.isConnected)return;const t=this.element;this.needsInitialization?this.finishInitialization():null!==this.view&&this.view.bind(t,k);const e=this.behaviors;if(null!==e)for(let s=0,i=e.length;s<i;++s)e[s].bind(t,k);this.isConnected=!0}onDisconnectedCallback(){if(!1===this.isConnected)return;this.isConnected=!1;const t=this.view;null!==t&&t.unbind();const e=this.behaviors;if(null!==e){const t=this.element;for(let s=0,i=e.length;s<i;++s)e[s].unbind(t)}}onAttributeChangedCallback(t,e,s){const i=this.definition.attributeLookup[t];void 0!==i&&i.onAttributeChangedCallback(this.element,s)}emit(t,e,s){return!!this.isConnected&&this.element.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign({detail:e},xt),s)))}finishInitialization(){const t=this.element,e=this.boundObservables;if(null!==e){const s=Object.keys(e);for(let i=0,n=s.length;i<n;++i){const n=s[i];t[n]=e[n]}this.boundObservables=null}const s=this.definition;null===this._template&&(this.element.resolveTemplate?this._template=this.element.resolveTemplate():s.template&&(this._template=s.template||null)),null!==this._template&&this.renderTemplate(this._template),null===this._styles&&(this.element.resolveStyles?this._styles=this.element.resolveStyles():s.styles&&(this._styles=s.styles||null)),null!==this._styles&&this.addStyles(this._styles),this.needsInitialization=!1}renderTemplate(t){const e=this.element,s=wt(e)||e;null!==this.view?(this.view.dispose(),this.view=null):this.needsInitialization||l.removeChildNodes(s),t&&(this.view=t.render(e,s,e))}static forCustomElement(t){const e=t.$fastController;if(void 0!==e)return e;const s=yt.forType(t.constructor);if(void 0===s)throw new Error("Missing FASTElement definition.");return t.$fastController=new Bt(t,s)}}function Ot(t){return class extends t{constructor(){super(),Bt.forCustomElement(this)}$emit(t,e,s){return this.$fastController.emit(t,e,s)}connectedCallback(){this.$fastController.onConnectedCallback()}disconnectedCallback(){this.$fastController.onDisconnectedCallback()}attributeChangedCallback(t,e,s){this.$fastController.onAttributeChangedCallback(t,e,s)}}}const St=Object.assign(Ot(HTMLElement),{from:t=>Ot(t),define:(t,e)=>new yt(t,e).define().type});function Tt(t){return function(e){new yt(e,t).define()}}const Nt=Object.freeze([]);class At{constructor(t,e){this.target=t,this.propertyName=e}bind(t){t[this.propertyName]=this.target}unbind(){}}function kt(t){return new $("fast-ref",At,t)}function Vt(t,e){const s="function"==typeof e?e:()=>e;return(e,i)=>t(e,i)?s(e,i):null}function It(t,e,s){return{index:t,removed:e,addedCount:s}}function $t(t,e,s,i,n,o){let r=0,l=0;const h=Math.min(s-e,o-n);if(0===e&&0===n&&(r=function(t,e,s){for(let i=0;i<s;++i)if(t[i]!==e[i])return i;return s}(t,i,h)),s===t.length&&o===i.length&&(l=function(t,e,s){let i=t.length,n=e.length,o=0;for(;o<s&&t[--i]===e[--n];)o++;return o}(t,i,h-r)),n+=r,o-=l,(s-=l)-(e+=r)==0&&o-n==0)return Nt;if(e===s){const t=It(e,[],0);for(;n<o;)t.removed.push(i[n++]);return[t]}if(n===o)return[It(e,[],s-e)];const a=function(t){let e=t.length-1,s=t[0].length-1,i=t[e][s];const n=[];for(;e>0||s>0;){if(0===e){n.push(2),s--;continue}if(0===s){n.push(3),e--;continue}const o=t[e-1][s-1],r=t[e-1][s],l=t[e][s-1];let h;h=r<l?r<o?r:o:l<o?l:o,h===o?(o===i?n.push(0):(n.push(1),i=o),e--,s--):h===r?(n.push(3),e--,i=r):(n.push(2),s--,i=l)}return n.reverse(),n}(function(t,e,s,i,n,o){const r=o-n+1,l=s-e+1,h=new Array(r);let a,c;for(let t=0;t<r;++t)h[t]=new Array(l),h[t][0]=t;for(let t=0;t<l;++t)h[0][t]=t;for(let s=1;s<r;++s)for(let o=1;o<l;++o)t[e+o-1]===i[n+s-1]?h[s][o]=h[s-1][o-1]:(a=h[s-1][o]+1,c=h[s][o-1]+1,h[s][o]=a<c?a:c);return h}(t,e,s,i,n,o)),c=[];let d=void 0,u=e,f=n;for(let t=0;t<a.length;++t)switch(a[t]){case 0:void 0!==d&&(c.push(d),d=void 0),u++,f++;break;case 1:void 0===d&&(d=It(u,[],0)),d.addedCount++,u++,d.removed.push(i[f]),f++;break;case 2:void 0===d&&(d=It(u,[],0)),d.addedCount++,u++;break;case 3:void 0===d&&(d=It(u,[],0)),d.removed.push(i[f]),f++}return void 0!==d&&c.push(d),c}const Mt=Array.prototype.push;function Ft(t,e,s,i){const n=It(e,s,i);let o=!1,r=0;for(let e=0,s=t.length;e<s;e++){const s=t[e];if(s.index+=r,o)continue;const i=(l=n.index,h=n.index+n.removed.length,a=s.index,c=s.index+s.addedCount,h<a||c<l?-1:h===a||c===l?0:l<a?h<c?h-a:c-a:c<h?c-l:h-l);if(i>=0){t.splice(e,1),e--,r-=s.addedCount-s.removed.length,n.addedCount+=s.addedCount-i;const l=n.removed.length+s.removed.length-i;if(n.addedCount||l){let t=s.removed;if(n.index<s.index){const e=n.removed.slice(0,s.index-n.index);Mt.apply(e,t),t=e}if(n.index+n.removed.length>s.index+s.addedCount){const e=n.removed.slice(s.index+s.addedCount-n.index);Mt.apply(t,e)}n.removed=t,s.index<n.index&&(n.index=s.index)}else o=!0}else if(n.index<s.index){o=!0,t.splice(e,0,n),e++;const i=n.addedCount-n.removed.length;s.index+=i,r+=i}}var l,h,a,c;o||t.push(n)}function Lt(t,e){let s=[];const i=function(t){const e=[];for(let s=0,i=t.length;s<i;s++){const i=t[s];Ft(e,i.index,i.removed,i.addedCount)}return e}(e);for(let e=0,n=i.length;e<n;++e){const n=i[e];1!==n.addedCount||1!==n.removed.length?s=s.concat($t(t,n.index,n.index+n.addedCount,n.removed,0,n.removed.length)):n.removed[0]!==t[n.index]&&s.push(n)}return s}let Et=!1;function Pt(t,e){let s=t.index;const i=e.length;return s>i?s=i-t.addedCount:s<0&&(s=i+t.removed.length+s-t.addedCount),s<0&&(s=0),t.index=s,t}class _t extends u{constructor(t){super(t),this.oldCollection=void 0,this.splices=void 0,this.needsQueue=!0,this.call=this.flush,t.$fastController=this}addSplice(t){void 0===this.splices?this.splices=[t]:this.splices.push(t),this.needsQueue&&(this.needsQueue=!1,l.queueUpdate(this))}reset(t){this.oldCollection=t,this.needsQueue&&(this.needsQueue=!1,l.queueUpdate(this))}flush(){const t=this.splices,e=this.oldCollection;if(void 0===t&&void 0===e)return;this.needsQueue=!0,this.splices=void 0,this.oldCollection=void 0;const s=void 0===e?Lt(this.source,t):$t(this.source,0,this.source.length,e,0,e.length);this.notify(s)}}const jt=Object.freeze({positioning:!1});function Rt(t,e,s,i){t.bind(e[s],i)}function Dt(t,e,s,i){const n=Object.create(i);n.index=s,n.length=e.length,t.bind(e[s],n)}class Ht{constructor(t,e,s,i,n,o){this.location=t,this.itemsBinding=e,this.templateBinding=i,this.options=o,this.source=null,this.views=[],this.items=null,this.itemsObserver=null,this.originalContext=void 0,this.childContext=void 0,this.bindView=Rt,this.itemsBindingObserver=C.binding(e,this,s),this.templateBindingObserver=C.binding(i,this,n),o.positioning&&(this.bindView=Dt)}bind(t,e){this.source=t,this.originalContext=e,this.childContext=Object.create(e),this.childContext.parent=t,this.items=this.itemsBindingObserver.observe(t,this.originalContext),this.template=this.templateBindingObserver.observe(t,this.originalContext),this.observeItems(),this.refreshAllViews()}unbind(){this.source=null,this.items=null,null!==this.itemsObserver&&this.itemsObserver.unsubscribe(this),this.unbindAllViews(),this.itemsBindingObserver.disconnect(),this.templateBindingObserver.disconnect()}handleChange(t,e){t===this.itemsBinding?(this.items=this.itemsBindingObserver.observe(this.source,this.originalContext),this.observeItems(),this.refreshAllViews()):t===this.templateBinding?(this.template=this.templateBindingObserver.observe(this.source,this.originalContext),this.refreshAllViews(!0)):this.updateViews(e)}observeItems(){this.items||(this.items=[]);const t=this.itemsObserver,e=this.itemsObserver=C.getNotifier(this.items);t!==e&&(null!==t&&t.unsubscribe(this),e.subscribe(this))}updateViews(t){const e=this.childContext,s=this.views,i=[],n=this.bindView;let o=0;for(let e=0,n=t.length;e<n;++e){const n=t[e],r=n.removed;i.push(...s.splice(n.index+o,r.length)),o-=n.addedCount}const r=this.items,l=this.template;for(let o=0,h=t.length;o<h;++o){const h=t[o];let a=h.index;const c=a+h.addedCount;for(;a<c;++a){const t=s[a],o=t?t.firstChild:this.location,h=i.length>0?i.shift():l.create();s.splice(a,0,h),n(h,r,a,e),h.insertBefore(o)}}for(let t=0,e=i.length;t<e;++t)i[t].dispose();if(this.options.positioning)for(let t=0,e=s.length;t<e;++t){const i=s[t].context;i.length=e,i.index=t}}refreshAllViews(t=!1){const e=this.items,s=this.childContext,i=this.template,n=this.location,o=this.bindView;let r=e.length,l=this.views,h=l.length;if((0===r||t)&&(Z.disposeContiguousBatch(l),h=0),0===h){this.views=l=new Array(r);for(let t=0;t<r;++t){const r=i.create();o(r,e,t,s),l[t]=r,r.insertBefore(n)}}else{let t=0;for(;t<r;++t)if(t<h){o(l[t],e,t,s)}else{const r=i.create();o(r,e,t,s),l.push(r),r.insertBefore(n)}const a=l.splice(t,h-t);for(t=0,r=a.length;t<r;++t)a[t].dispose()}}unbindAllViews(){const t=this.views;for(let e=0,s=t.length;e<s;++e)t[e].unbind()}}class zt extends I{constructor(t,e,s){super(),this.itemsBinding=t,this.templateBinding=e,this.options=s,this.createPlaceholder=l.createBlockPlaceholder,function(){if(Et)return;Et=!0,C.setArrayObserverFactory(t=>new _t(t));const t=Array.prototype,e=t.pop,s=t.push,i=t.reverse,n=t.shift,o=t.sort,r=t.splice,l=t.unshift;t.pop=function(){const t=this.length>0,s=e.apply(this,arguments),i=this.$fastController;return void 0!==i&&t&&i.addSplice(It(this.length,[s],0)),s},t.push=function(){const t=s.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Pt(It(this.length-arguments.length,[],arguments.length),this)),t},t.reverse=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=i.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.shift=function(){const t=this.length>0,e=n.apply(this,arguments),s=this.$fastController;return void 0!==s&&t&&s.addSplice(It(0,[e],0)),e},t.sort=function(){let t;const e=this.$fastController;void 0!==e&&(e.flush(),t=this.slice());const s=o.apply(this,arguments);return void 0!==e&&e.reset(t),s},t.splice=function(){const t=r.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Pt(It(+arguments[0],t,arguments.length>2?arguments.length-2:0),this)),t},t.unshift=function(){const t=l.apply(this,arguments),e=this.$fastController;return void 0!==e&&e.addSplice(Pt(It(0,[],arguments.length),this)),t}}(),this.isItemsBindingVolatile=C.isVolatileBinding(t),this.isTemplateBindingVolatile=C.isVolatileBinding(e)}createBehavior(t){return new Ht(t,this.itemsBinding,this.isItemsBindingVolatile,this.templateBinding,this.isTemplateBindingVolatile,this.options)}}function Qt(t,e,s=jt){return new zt(t,"function"==typeof e?e:()=>e,s)}function Ut(t){return t?function(e,s,i){return 1===e.nodeType&&e.matches(t)}:function(t,e,s){return 1===t.nodeType}}class qt{constructor(t,e){this.target=t,this.options=e,this.source=null}bind(t){const e=this.options.property;this.shouldUpdate=C.getAccessors(t).some(t=>t.name===e),this.source=t,this.updateTarget(this.computeNodes()),this.shouldUpdate&&this.observe()}unbind(){this.updateTarget(Nt),this.source=null,this.shouldUpdate&&this.disconnect()}handleEvent(){this.updateTarget(this.computeNodes())}computeNodes(){let t=this.getNodes();return void 0!==this.options.filter&&(t=t.filter(this.options.filter)),t}updateTarget(t){this.source[this.options.property]=t}}class Wt extends qt{constructor(t,e){super(t,e)}observe(){this.target.addEventListener("slotchange",this)}disconnect(){this.target.removeEventListener("slotchange",this)}getNodes(){return this.target.assignedNodes(this.options)}}function Kt(t){return"string"==typeof t&&(t={property:t}),new $("fast-slotted",Wt,t)}class Gt extends qt{constructor(t,e){super(t,e),this.observer=null}observe(){null===this.observer&&(this.observer=new MutationObserver(this.handleEvent.bind(this))),this.observer.observe(this.target,this.options)}disconnect(){this.observer.disconnect()}getNodes(){return Array.from(this.target.childNodes)}}function Jt(t){return"string"==typeof t?t={property:t,childList:!0}:t.childList=!0,new $("fast-children",Gt,t)}export{$ as AttachedBehaviorDirective,gt as AttributeDefinition,Q as BindingBehavior,z as BindingDirective,Gt as ChildrenBehavior,Bt as Controller,l as DOM,I as Directive,nt as ElementStyles,A as ExecutionContext,St as FASTElement,yt as FASTElementDefinition,Z as HTMLView,C as Observable,f as PropertyChangeNotifier,At as RefBehavior,Ht as RepeatBehavior,zt as RepeatDirective,Wt as SlottedBehavior,u as SubscriberSet,tt as ViewTemplate,pt as attr,ut as booleanConverter,Jt as children,X as compileTemplate,dt as css,Tt as customElement,k as defaultExecutionContext,Ut as elements,Nt as emptyArray,st as html,ft as nullableNumberConverter,O as observable,kt as ref,Qt as repeat,N as setCurrentEvent,Kt as slotted,S as volatile,Vt as when};

28

docs/api-report.md

@@ -174,4 +174,3 @@ ## API Report File for "@microsoft/fast-element"

addBehaviors(behaviors: ReadonlyArray<Behavior>): void;
addStyles(styles: ElementStyles,
target?: StyleTarget | null): void;
addStyles(styles: ElementStyles): void;
readonly definition: FASTElementDefinition;

@@ -187,2 +186,6 @@ readonly element: HTMLElement;

removeStyles(styles: ElementStyles): void;
get styles(): ElementStyles | null;
set styles(value: ElementStyles | null);
get template(): ElementViewTemplate | null;
set template(value: ElementViewTemplate | null);
readonly view: ElementView | null;

@@ -226,2 +229,4 @@ }

setBooleanAttribute(element: HTMLElement, attributeName: string, value: boolean): void;
removeChildNodes(parent: Node): void;
createTemplateWalker(fragment: DocumentFragment): TreeWalker;
}>;

@@ -254,3 +259,4 @@

export interface ElementViewTemplate {
create(host: Element): ElementView;
create(hostBindingTarget: Element): ElementView;
render(source: any, host: Node, hostBindingTarget?: Element): HTMLView;
}

@@ -291,12 +297,14 @@

}>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
define<TType extends Function>(Type: TType, nameOrDef?: string | PartialFASTElementDefinition): TType;
getDefinition<T_1 extends Function>(Type: T_1): FASTElementDefinition | undefined;
define<TType extends Function>(type: TType, nameOrDef?: string | PartialFASTElementDefinition | undefined): TType;
};
// @public
export class FASTElementDefinition {
constructor(name: string, attributes: ReadonlyArray<AttributeDefinition>, propertyLookup: Record<string, AttributeDefinition>, attributeLookup: Record<string, AttributeDefinition>, template?: ElementViewTemplate, styles?: ComposableStyles, shadowOptions?: ShadowRootInit, elementOptions?: ElementDefinitionOptions);
export class FASTElementDefinition<TType extends Function = Function> {
constructor(type: TType, nameOrConfig?: PartialFASTElementDefinition | string);
readonly attributeLookup: Record<string, AttributeDefinition>;
readonly attributes: ReadonlyArray<AttributeDefinition>;
define(registry?: CustomElementRegistry): this;
readonly elementOptions?: ElementDefinitionOptions;
static forType<TType extends Function>(type: TType): FASTElementDefinition | undefined;
readonly isDefined: boolean;
readonly name: string;

@@ -307,2 +315,3 @@ readonly propertyLookup: Record<string, AttributeDefinition>;

readonly template?: ElementViewTemplate;
readonly type: TType;
}

@@ -488,2 +497,3 @@

readonly context: ExecutionContext | null;
dispose(): void;
readonly source: any | null;

@@ -496,6 +506,6 @@ unbind(): void;

constructor(html: string | HTMLTemplateElement, directives: ReadonlyArray<Directive>);
create(host?: Element): HTMLView;
create(hostBindingTarget?: Element): HTMLView;
readonly directives: ReadonlyArray<Directive>;
readonly html: string | HTMLTemplateElement;
render(source: TSource, host: HTMLElement | string): HTMLView;
render(source: TSource, host: Node | string, hostBindingTarget?: Element): HTMLView;
}

@@ -502,0 +512,0 @@

14

docs/guide/declaring-templates.md

@@ -193,2 +193,14 @@ ---

The second example demonstrates an important characteristic of the templating engine: it only supports *unidirectional data flow* (model => view). It does not support *two-way data binding* (model <=> view). As shown above, pushing data from the view back to the model should be handled with explicit events that call into your model's API.
The second example demonstrates an important characteristic of the templating engine: it only supports *unidirectional data flow* (model => view). It does not support *two-way data binding* (model <=> view). As shown above, pushing data from the view back to the model should be handled with explicit events that call into your model's API.
## Templating and the element lifecycle
It is during the `connectedCallback` phase of the Custom Element lifecycle that `FASTElement` creates templates and binds the resulting view. The creation of the template only occurs the first time the element is connected, while binding happens every time the element is connected (with unbinding happening during the `disconnectedCallback` for symmetry).
:::note
In the future we're planning new optimizations that will enable us to safely determine when we do not need to unbind/rebind certain views.
:::
In most cases, the template that `FASTElement` renders is determined by the `template` property of the Custom Element's configuration. However, you can also implement a method on your Custom Element class named `resolveTemplate()` that returns a template instance. If this method is present, it will be called during `connectedCallback` to obtain the template to use. This allows the element author to dynamically select completely different templates based on the state of the element at the time of connection.
In addition to dynamic template selection during the `connectedCallback`, the `$fastController` property of `FASTElement` enables dynamically changing the template at any time though setting the controller's `template` property to any valid template.

8

docs/guide/defining-elements.md

@@ -35,2 +35,6 @@ ---

:::note
HTML has a few special tags known as "self-closing tags". Common examples include `<input>` and `<img>`. However, most HTML elements and **all** web components must have an explicit closing tag.
:::
We've got a basic Web Component in place, but it doesn't do much. So, let's add an attribute and make it render something.

@@ -166,4 +170,4 @@

| ------------- |-------------|
| constructor | Runs when the element is created or upgraded. `FASTElement` will attach the shadow DOM at this time and hydrate it with the HTML template, if one was provided. |
| connectedCallback | Runs when the element is inserted into the DOM. `FASTElement` will connect template bindings in order to finalize the initial render at this time. |
| constructor | Runs when the element is created or upgraded. `FASTElement` will attach the shadow DOM at this time. |
| connectedCallback | Runs when the element is inserted into the DOM. On first connect, `FASTElement` hydrates the HTML template, connects template bindings, and adds the styles. |
| disconnectedCallback | Runs when the element is removed from the DOM. `FASTElement` will remove template bindings and clean up resources at this time. |

@@ -170,0 +174,0 @@ | attributeChangedCallback(attrName, oldVal, newVal) | Runs any time one of the element's custom attributes changes. `FASTElement` uses this to sync the attribute with its property. When the property updates, a render update is also queued, if there was a template dependency. |

10

docs/guide/leveraging-css.md

@@ -167,4 +167,12 @@ ---

## Hiding undefined elements
## Styles and the element lifecycle
It is during the `connectedCallback` phase of the Custom Element lifecycle that `FASTElement` adds the element's styles. The styles are only added the first time the element is connected.
In most cases, the styles that `FASTElement` renders are determined by the `styles` property of the Custom Element's configuration. However, you can also implement a method on your Custom Element class named `resolveStyles()` that returns an `ElementStyles` instance. If this method is present, it will be called during `connectedCallback` to obtain the styles to use. This allows the element author to dynamically select completely different styles based on the state of the element at the time of connection.
In addition to dynamic style selection during the `connectedCallback`, the `$fastController` property of `FASTElement` enables dynamically changing the styles at any time through setting the controller's `styles` property to any valid styles.
### Hiding undefined elements
Custom Elements that have not been [upgraded](https://developers.google.com/web/fundamentals/web-components/customelements#upgrades) and don't have styles attached can still be rendered by the browser but they likely do not look how they are supposed to. To avoid a *flash of un-styled content* (FOUC), visually hide Custom Elements if they have not been *defined*:

@@ -171,0 +179,0 @@

6

docs/guide/working-with-shadow-dom.md

@@ -291,2 +291,6 @@ ---

In addition to the Shadow DOM mode, `shadowOptions` exposes all the options that can be set through the standard `attachShadow` API. This means that you can also use it to specify new options such as `delegatesFocus: true`. You only need to specify options that are different from the defaults mentioned above.
In addition to the Shadow DOM mode, `shadowOptions` exposes all the options that can be set through the standard `attachShadow` API. This means that you can also use it to specify new options such as `delegatesFocus: true`. You only need to specify options that are different from the defaults mentioned above.
## Shadow DOM and the element lifecycle
It is during the constructor that `FASTElement` attaches the Shadow DOM for an element. The `shadowRoot` is then available directly as a property on your Custom Element, assuming that the element uses `open` mode.

4

package.json

@@ -5,3 +5,3 @@ {

"sideEffects": false,
"version": "0.15.2",
"version": "0.16.0",
"author": {

@@ -85,3 +85,3 @@ "name": "Microsoft",

},
"gitHead": "cfaeab3cf9527765baf02122962dbb54c0e07c1b"
"gitHead": "a95b49dbd07fa004826db4cb26b598582303457b"
}

2

README.md

@@ -6,3 +6,3 @@ # FAST Element

The `fast-element` library is a lightweight means to easily building performant, memory-efficient, standards-compliant Web Components. FAST Elements work in every major browser and can be used in combination with any front-end framework or even without a framework.
The `fast-element` library is a lightweight means to easily build performant, memory-efficient, standards-compliant Web Components. FAST Elements work in every major browser and can be used in combination with any front-end framework or even without a framework.

@@ -9,0 +9,0 @@ ## Installation

dist/fast-element.api.json

Sorry, the diff of this file is too big to display

dist/fast-element.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc