@microsoft/fast-element 2.9.1 → 2.9.2

package/dist/dts/styles/css.d.ts

@@ -6,7 +6,7 @@ import { ComposableStyles, ElementStyles } from "./element-styles.js";
  * Represents the types of values that can be interpolated into a template.
  * @public
  */
-export declare type CSSValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | ComposableStyles | CSSDirective;
+export type CSSValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | ComposableStyles | CSSDirective;
 /**
  * Transforms a template literal string into styles.
  * @param strings - The string fragments that are interpolated with the values.
@@ -16,7 +16,7 @@ export declare type CSSValue<TSource, TParent = any> = Expression<TSource, any,
  * Use the .partial method to create partial CSS fragments.
  * @public
  */
-export declare type CSSTemplateTag = (<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: CSSValue<TSource, TParent>[]) => ElementStyles) & {
+export type CSSTemplateTag = (<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: CSSValue<TSource, TParent>[]) => ElementStyles) & {
     /**
      * Transforms a template literal string into partial CSS.
      * @param strings - The string fragments that are interpolated with the values.

package/dist/dts/styles/element-styles.d.ts

@@ -4,12 +4,12 @@ import type { HostBehavior } from "./host.js";
  * Represents styles that can be composed into the ShadowDOM of a custom element.
  * @public
  */
-export declare type ComposableStyles = string | ElementStyles | CSSStyleSheet;
+export type ComposableStyles = string | ElementStyles | CSSStyleSheet;
 /**
  * A type that instantiates a StyleStrategy.
  * @public
  */
-export declare type ConstructibleStyleStrategy = {
+export type ConstructibleStyleStrategy = {
     /**
      * Creates an instance of the strategy.
      * @param styles - The styles to initialize the strategy with.

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

@@ -25,7 +25,7 @@ export interface SubtreeDirectiveOptions<T = any> extends NodeBehaviorOptions<T>
  * The options used to configure child/subtree node observation.
  * @public
  */
-export declare type ChildrenDirectiveOptions<T = any> = ChildListDirectiveOptions<T> | SubtreeDirectiveOptions<T>;
+export type ChildrenDirectiveOptions<T = any> = ChildListDirectiveOptions<T> | SubtreeDirectiveOptions<T>;
 /**
  * The runtime behavior for child node observation.
  * @public

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

@@ -6,7 +6,7 @@ import type { HTMLTemplateCompilationResult as TemplateCompilationResult } from
  * by the html template function into a result that can instantiate views.
  * @public
  */
-export declare type CompilationStrategy = (
+export type CompilationStrategy = (
 /**
  * The preprocessed HTML string or template to compile.
  */

package/dist/dts/templating/html-directive.d.ts

@@ -6,7 +6,7 @@ import type { ExpressionController } from "../observation/observable.js";
  * The target nodes available to a behavior.
  * @public
  */
-export declare type ViewBehaviorTargets = {
+export type ViewBehaviorTargets = {
     [id: string]: Node;
 };
 /**
@@ -61,12 +61,12 @@ export interface ViewBehaviorFactory {
  * Represents a ViewBehaviorFactory after the compilation process has completed.
  * @public
  */
-export declare type CompiledViewBehaviorFactory = Required<ViewBehaviorFactory>;
+export type CompiledViewBehaviorFactory = Required<ViewBehaviorFactory>;
 /**
  * Used to add behavior factories when constructing templates.
  * @public
  */
-export declare type AddViewBehaviorFactory = (factory: ViewBehaviorFactory) => string;
+export type AddViewBehaviorFactory = (factory: ViewBehaviorFactory) => string;
 /**
  * Instructs the template engine to apply behavior to a node.
  * @public

package/dist/dts/templating/node-observation.d.ts

@@ -22,7 +22,7 @@ export interface NodeBehaviorOptions<T = any> {
  *
  * @public
  */
-export declare type ElementsFilter = (value: Node, index?: number, array?: Node[]) => boolean;
+export type ElementsFilter = (value: Node, index?: number, array?: Node[]) => boolean;
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
  * @param selector - An optional selector to restrict the filter to.

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

@@ -95,7 +95,7 @@ export interface RenderInstruction {
  * Render options that are common to all configurations.
  * @public
  */
-export declare type CommonRenderOptions = {
+export type CommonRenderOptions = {
     /**
      * The type this instruction is associated with.
      */
@@ -109,7 +109,7 @@ export declare type CommonRenderOptions = {
  * Render options used to specify a template.
  * @public
  */
-export declare type TemplateRenderOptions = CommonRenderOptions & {
+export type TemplateRenderOptions = CommonRenderOptions & {
     /**
      * The template to use when rendering.
      */
@@ -119,7 +119,7 @@ export declare type TemplateRenderOptions = CommonRenderOptions & {
  * Render options that are common to all element render instructions.
  * @public
  */
-export declare type BaseElementRenderOptions<TSource = any, TParent = any> = CommonRenderOptions & {
+export type BaseElementRenderOptions<TSource = any, TParent = any> = CommonRenderOptions & {
     /**
      * Attributes to use when creating the element template.
      * @remarks
@@ -149,7 +149,7 @@ export declare type BaseElementRenderOptions<TSource = any, TParent = any> = Com
  * Render options for directly creating an element with {@link RenderInstruction.createElementTemplate}
  * @public
  */
-export declare type ElementCreateOptions<TSource = any, TParent = any> = Omit<BaseElementRenderOptions, "type" | "name"> & {
+export type ElementCreateOptions<TSource = any, TParent = any> = Omit<BaseElementRenderOptions, "type" | "name"> & {
     /**
      * Directives to use when creating the element template. These directives are applied directly to the specified tag.
      *
@@ -162,7 +162,7 @@ export declare type ElementCreateOptions<TSource = any, TParent = any> = Omit<Ba
  * Render options used to specify an element.
  * @public
  */
-export declare type ElementConstructorRenderOptions<TSource = any, TParent = any> = BaseElementRenderOptions<TSource, TParent> & {
+export type ElementConstructorRenderOptions<TSource = any, TParent = any> = BaseElementRenderOptions<TSource, TParent> & {
     /**
      * The element to use when rendering.
      */
@@ -172,7 +172,7 @@ export declare type ElementConstructorRenderOptions<TSource = any, TParent = any
  * Render options use to specify an element by tag name.
  * @public
  */
-export declare type TagNameRenderOptions<TSource = any, TParent = any> = BaseElementRenderOptions<TSource, TParent> & {
+export type TagNameRenderOptions<TSource = any, TParent = any> = BaseElementRenderOptions<TSource, TParent> & {
     /**
      * The tag name to use when rendering.
      */

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

@@ -65,7 +65,7 @@ export interface HTMLTemplateCompilationResult<TSource = any, TParent = any> {
  * Represents the types of values that can be interpolated into a template.
  * @public
  */
-export declare type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource, TParent>;
+export type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource, TParent>;
 /**
  * Inlines a template into another template.
  * @public
@@ -165,7 +165,7 @@ export declare class ViewTemplate<TSource = any, TParent = any> implements Eleme
  * other template instances, and Directive instances.
  * @public
  */
-export declare type HTMLTemplateTag = (<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]) => ViewTemplate<TSource, TParent>) & {
+export type HTMLTemplateTag = (<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]) => ViewTemplate<TSource, TParent>) & {
     /**
      * Transforms a template literal string into partial HTML.
      * @param html - The HTML string fragment to interpolate.

package/dist/esm/components/element-controller.js

@@ -27,90 +27,6 @@ let elementControllerStrategy;
  * @public
  */
 export class ElementController extends PropertyChangeNotifier {
-    /**
-     * Creates a Controller to control the specified element.
-     * @param element - The element to be controlled by this controller.
-     * @param definition - The element definition metadata that instructs this
-     * controller in how to handle rendering and other platform integrations.
-     * @internal
-     */
-    constructor(element, definition) {
-        super(element);
-        /**
-         * A map of observable properties that were set on the element before upgrade.
-         */
-        this.boundObservables = null;
-        /**
-         * Indicates whether the controller needs to perform initial rendering.
-         */
-        this.needsInitialization = true;
-        /**
-         * Indicates whether the element has an existing shadow root (e.g. from declarative shadow DOM).
-         */
-        this.hasExistingShadowRoot = false;
-        /**
-         * The template used to render the component.
-         */
-        this._template = null;
-        /**
-         * The current lifecycle stage of the controller.
-         */
-        this.stage = 3 /* Stages.disconnected */;
-        /**
-         * A guard against connecting behaviors multiple times
-         * during connect in scenarios where a behavior adds
-         * another behavior during it's connectedCallback
-         */
-        this.guardBehaviorConnection = false;
-        /**
-         * The behaviors associated with the component.
-         */
-        this.behaviors = null;
-        /**
-         * Tracks whether behaviors are connected so that
-         * behaviors cant be connected multiple times
-         */
-        this.behaviorsConnected = false;
-        /**
-         * The main set of styles used for the component, independent of any
-         * dynamically added styles.
-         */
-        this._mainStyles = null;
-        /**
-         * This allows Observable.getNotifier(...) to return the Controller
-         * when the notifier for the Controller itself is being requested. The
-         * result is that the Observable system does not need to create a separate
-         * instance of Notifier for observables on the Controller. The component and
-         * the controller will now share the same notifier, removing one-object construct
-         * per web component instance.
-         */
-        this.$fastController = this;
-        /**
-         * The view associated with the custom element.
-         * @remarks
-         * If `null` then the element is managing its own rendering.
-         */
-        this.view = null;
-        this.source = element;
-        this.definition = definition;
-        this.shadowOptions = definition.shadowOptions;
-        // Capture any observable values that were set by the binding engine before
-        // the browser upgraded the element. Then delete the property since it will
-        // shadow the getter/setter that is required to make the observable operate.
-        // Later, in the connect callback, we'll re-apply the values.
-        const accessors = Observable.getAccessors(element);
-        if (accessors.length > 0) {
-            const boundObservables = (this.boundObservables = Object.create(null));
-            for (let i = 0, ii = accessors.length; i < ii; ++i) {
-                const propertyName = accessors[i].name;
-                const value = element[propertyName];
-                if (value !== void 0) {
-                    delete element[propertyName];
-                    boundObservables[propertyName] = value;
-                }
-            }
-        }
-    }
     /**
      * Indicates whether or not the custom element has been
      * connected to the document.
@@ -224,6 +140,90 @@ export class ElementController extends PropertyChangeNotifier {
             this.addStyles(value);
         }
     }
+    /**
+     * Creates a Controller to control the specified element.
+     * @param element - The element to be controlled by this controller.
+     * @param definition - The element definition metadata that instructs this
+     * controller in how to handle rendering and other platform integrations.
+     * @internal
+     */
+    constructor(element, definition) {
+        super(element);
+        /**
+         * A map of observable properties that were set on the element before upgrade.
+         */
+        this.boundObservables = null;
+        /**
+         * Indicates whether the controller needs to perform initial rendering.
+         */
+        this.needsInitialization = true;
+        /**
+         * Indicates whether the element has an existing shadow root (e.g. from declarative shadow DOM).
+         */
+        this.hasExistingShadowRoot = false;
+        /**
+         * The template used to render the component.
+         */
+        this._template = null;
+        /**
+         * The current lifecycle stage of the controller.
+         */
+        this.stage = 3 /* Stages.disconnected */;
+        /**
+         * A guard against connecting behaviors multiple times
+         * during connect in scenarios where a behavior adds
+         * another behavior during it's connectedCallback
+         */
+        this.guardBehaviorConnection = false;
+        /**
+         * The behaviors associated with the component.
+         */
+        this.behaviors = null;
+        /**
+         * Tracks whether behaviors are connected so that
+         * behaviors cant be connected multiple times
+         */
+        this.behaviorsConnected = false;
+        /**
+         * The main set of styles used for the component, independent of any
+         * dynamically added styles.
+         */
+        this._mainStyles = null;
+        /**
+         * This allows Observable.getNotifier(...) to return the Controller
+         * when the notifier for the Controller itself is being requested. The
+         * result is that the Observable system does not need to create a separate
+         * instance of Notifier for observables on the Controller. The component and
+         * the controller will now share the same notifier, removing one-object construct
+         * per web component instance.
+         */
+        this.$fastController = this;
+        /**
+         * The view associated with the custom element.
+         * @remarks
+         * If `null` then the element is managing its own rendering.
+         */
+        this.view = null;
+        this.source = element;
+        this.definition = definition;
+        this.shadowOptions = definition.shadowOptions;
+        // Capture any observable values that were set by the binding engine before
+        // the browser upgraded the element. Then delete the property since it will
+        // shadow the getter/setter that is required to make the observable operate.
+        // Later, in the connect callback, we'll re-apply the values.
+        const accessors = Observable.getAccessors(element);
+        if (accessors.length > 0) {
+            const boundObservables = (this.boundObservables = Object.create(null));
+            for (let i = 0, ii = accessors.length; i < ii; ++i) {
+                const propertyName = accessors[i].name;
+                const value = element[propertyName];
+                if (value !== void 0) {
+                    delete element[propertyName];
+                    boundObservables[propertyName] = value;
+                }
+            }
+        }
+    }
     /**
      * Registers an unbind handler with the controller.
      * @param behavior - An object to call when the controller unbinds.

package/dist/esm/components/fast-definitions.js

@@ -33,6 +33,12 @@ export const TemplateOptions = {
  * @public
  */
 export class FASTElementDefinition {
+    /**
+     * Indicates if this element has been defined in at least one registry.
+     */
+    get isDefined() {
+        return this.platformDefined;
+    }
     constructor(type, nameOrConfig = type.definition) {
         var _b;
         this.platformDefined = false;
@@ -75,14 +81,8 @@ export class FASTElementDefinition {
                 : Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);
         this.styles = ElementStyles.normalize(nameOrConfig.styles);
         fastElementRegistry.register(this);
-        Observable.defineProperty(FASTElementDefinition.isRegistered, this.name);
-        FASTElementDefinition.isRegistered[this.name] = this.type;
-    }
-    /**
-     * Indicates if this element has been defined in at least one registry.
-     */
-    get isDefined() {
-        return this.platformDefined;
+        Observable.defineProperty(_a.isRegistered, this.name);
+        _a.isRegistered[this.name] = this.type;
     }
     /**
      * Defines a custom element based on this definition.
@@ -108,10 +108,10 @@ export class FASTElementDefinition {
      */
     static compose(type, nameOrDef) {
         if (fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)) {
-            return new FASTElementDefinition(class extends type {
+            return new _a(class extends type {
             }, nameOrDef);
         }
-        return new FASTElementDefinition(type, nameOrDef);
+        return new _a(type, nameOrDef);
     }
     /**
      * Registers a FASTElement base type.
@@ -133,10 +133,10 @@ export class FASTElementDefinition {
     static composeAsync(type, nameOrDef) {
         return new Promise(resolve => {
             if (fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)) {
-                resolve(new FASTElementDefinition(class extends type {
+                resolve(new _a(class extends type {
                 }, nameOrDef));
             }
-            const definition = new FASTElementDefinition(type, nameOrDef);
+            const definition = new _a(type, nameOrDef);
             Observable.getNotifier(definition).subscribe({
                 handleChange: () => {
                     var _b, _c;
@@ -169,10 +169,10 @@ FASTElementDefinition.getForInstance = fastElementRegistry.getForInstance;
  */
 FASTElementDefinition.registerAsync = (name) => __awaiter(void 0, void 0, void 0, function* () {
     return new Promise(resolve => {
-        if (FASTElementDefinition.isRegistered[name]) {
-            resolve(FASTElementDefinition.isRegistered[name]);
+        if (_a.isRegistered[name]) {
+            resolve(_a.isRegistered[name]);
         }
-        Observable.getNotifier(FASTElementDefinition.isRegistered).subscribe({ handleChange: () => resolve(FASTElementDefinition.isRegistered[name]) }, name);
+        Observable.getNotifier(_a.isRegistered).subscribe({ handleChange: () => resolve(_a.isRegistered[name]) }, name);
     });
 });
 Observable.defineProperty(FASTElementDefinition.prototype, "template");

package/dist/esm/di/di.js

@@ -902,6 +902,18 @@ const factories = new Map();
  * @internal
  */
 export class ContainerImpl {
+    get parent() {
+        if (this._parent === void 0) {
+            this._parent = this.config.parentLocator(this.owner);
+        }
+        return this._parent;
+    }
+    get depth() {
+        return this.parent === null ? 0 : this.parent.depth + 1;
+    }
+    get responsibleForOwnerRequests() {
+        return this.config.responsibleForOwnerRequests;
+    }
     constructor(owner, config) {
         this.owner = owner;
         this.config = config;
@@ -935,18 +947,6 @@ export class ContainerImpl {
             }
         }
     }
-    get parent() {
-        if (this._parent === void 0) {
-            this._parent = this.config.parentLocator(this.owner);
-        }
-        return this._parent;
-    }
-    get depth() {
-        return this.parent === null ? 0 : this.parent.depth + 1;
-    }
-    get responsibleForOwnerRequests() {
-        return this.config.responsibleForOwnerRequests;
-    }
     handleContextRequests(enable) {
         this.isHandlingContextRequests = enable;
     }

package/dist/esm/observation/arrays.js

@@ -470,18 +470,6 @@ function setNonEnumerable(target, property, value, writable = true) {
     });
 }
 class DefaultArrayObserver extends SubscriberSet {
-    constructor(subject) {
-        super(subject);
-        this.oldCollection = void 0;
-        this.splices = void 0;
-        this.sorts = void 0;
-        this.needsQueue = true;
-        this._strategy = null;
-        this._lengthObserver = void 0;
-        this._sortObserver = void 0;
-        this.call = this.flush;
-        setNonEnumerable(subject, "$fastController", this);
-    }
     get strategy() {
         return this._strategy;
     }
@@ -522,6 +510,18 @@ class DefaultArrayObserver extends SubscriberSet {
         }
         return observer;
     }
+    constructor(subject) {
+        super(subject);
+        this.oldCollection = void 0;
+        this.splices = void 0;
+        this.sorts = void 0;
+        this.needsQueue = true;
+        this._strategy = null;
+        this._lengthObserver = void 0;
+        this._sortObserver = void 0;
+        this.call = this.flush;
+        setNonEnumerable(subject, "$fastController", this);
+    }
     subscribe(subscriber) {
         this.flush();
         super.subscribe(subscriber);

package/dist/esm/styles/element-styles.js

@@ -9,6 +9,15 @@ function reduceStyles(styles) {
  * @public
  */
 export class ElementStyles {
+    /**
+     * Gets the StyleStrategy associated with these element styles.
+     */
+    get strategy() {
+        if (this._strategy === null) {
+            this.withStrategy(DefaultStyleStrategy);
+        }
+        return this._strategy;
+    }
     /**
      * Creates an instance of ElementStyles.
      * @param styles - The styles that will be associated with elements.
@@ -21,15 +30,6 @@ export class ElementStyles {
             .map((x) => x instanceof ElementStyles ? x.behaviors : null)
             .reduce((prev, curr) => (curr === null ? prev : prev === null ? curr : prev.concat(curr)), null);
     }
-    /**
-     * Gets the StyleStrategy associated with these element styles.
-     */
-    get strategy() {
-        if (this._strategy === null) {
-            this.withStrategy(DefaultStyleStrategy);
-        }
-        return this._strategy;
-    }
     /** @internal */
     addStylesTo(target) {
         this.strategy.addStylesTo(target);

package/dist/esm/templating/repeat.js

@@ -348,6 +348,13 @@ export class RepeatBehavior {
  * @public
  */
 export class RepeatDirective {
+    /**
+     * Creates a placeholder string based on the directive's index within the template.
+     * @param index - The index of the directive within the template.
+     */
+    createHTML(add) {
+        return Markup.comment(add(this));
+    }
     /**
      * Creates an instance of RepeatDirective.
      * @param dataBinding - The binding that provides the array to render.
@@ -360,13 +367,6 @@ export class RepeatDirective {
         this.options = options;
         ArrayObserver.enable();
     }
-    /**
-     * Creates a placeholder string based on the directive's index within the template.
-     * @param index - The index of the directive within the template.
-     */
-    createHTML(add) {
-        return Markup.comment(add(this));
-    }
     /**
      * Creates a behavior for the provided target node.
      * @param target - The node instance to create the behavior for.

package/dist/esm/templating/view.js

@@ -278,6 +278,15 @@ export class HydrationBindingError extends Error {
     }
 }
 export class HydrationView extends DefaultExecutionContext {
+    get hydrationStage() {
+        return this._hydrationStage;
+    }
+    get targets() {
+        return this._targets;
+    }
+    get bindingViewBoundaries() {
+        return this._bindingViewBoundaries;
+    }
     constructor(firstChild, lastChild, sourceTemplate, hostBindingTarget) {
         super();
         this.firstChild = firstChild;
@@ -297,15 +306,6 @@ export class HydrationView extends DefaultExecutionContext {
         this._targets = {};
         this.factories = sourceTemplate.compile().factories;
     }
-    get hydrationStage() {
-        return this._hydrationStage;
-    }
-    get targets() {
-        return this._targets;
-    }
-    get bindingViewBoundaries() {
-        return this._bindingViewBoundaries;
-    }
     /**
      * no-op. Hydrated views are don't need to be moved from a documentFragment
      * to the target node.