@microsoft/fast-element 2.0.0-beta.1 → 2.0.0-beta.4

package/dist/esm/metadata.js

@@ -0,0 +1,60 @@
+import { emptyArray } from "./platform.js";
+// Tiny polyfill for TypeScript's Reflect metadata API.
+const metadataByTarget = new Map();
+if (!("metadata" in Reflect)) {
+    Reflect.metadata = function (key, value) {
+        return function (target) {
+            Reflect.defineMetadata(key, value, target);
+        };
+    };
+    Reflect.defineMetadata = function (key, value, target) {
+        let metadata = metadataByTarget.get(target);
+        if (metadata === void 0) {
+            metadataByTarget.set(target, (metadata = new Map()));
+        }
+        metadata.set(key, value);
+    };
+    Reflect.getOwnMetadata = function (key, target) {
+        const metadata = metadataByTarget.get(target);
+        if (metadata !== void 0) {
+            return metadata.get(key);
+        }
+        return void 0;
+    };
+}
+/**
+ * Provides basic metadata capabilities used by Context and Dependency Injection.
+ */
+export const Metadata = Object.freeze({
+    /**
+     * Gets the "design:paramtypes" metadata for the specified type.
+     * @param Type - The type to get the metadata for.
+     * @returns The metadata array or a frozen empty array if no metadata is found.
+     */
+    getDesignParamTypes: Type => {
+        var _a;
+        return (_a = Reflect.getOwnMetadata("design:paramtypes", Type)) !== null && _a !== void 0 ? _a : emptyArray;
+    },
+    /**
+     * Gets the "annotation:paramtypes" metadata for the specified type.
+     * @param Type - The type to get the metadata for.
+     * @returns The metadata array or a frozen empty array if no metadata is found.
+     */
+    getAnnotationParamTypes: Type => {
+        var _a;
+        return (_a = Reflect.getOwnMetadata("annotation:paramtypes", Type)) !== null && _a !== void 0 ? _a : emptyArray;
+    },
+    /**
+     *
+     * @param Type - Gets the "annotation:paramtypes" metadata for the specified type. If none is found,
+     * an empty, mutable metadata array is created and added.
+     * @returns The metadata array.
+     */
+    getOrCreateAnnotationParamTypes(Type) {
+        let types = this.getAnnotationParamTypes(Type);
+        if (types === emptyArray) {
+            Reflect.defineMetadata("annotation:paramtypes", (types = []), Type);
+        }
+        return types;
+    },
+});

package/dist/esm/observation/arrays.js

@@ -255,7 +255,7 @@ export const ArrayObserver = Object.freeze({
  * @returns The length of the array.
  * @public
  */
-export function length(array) {
+export function lengthOf(array) {
     if (!array) {
         return 0;
     }

package/dist/esm/observation/observable.js

@@ -63,7 +63,7 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
             }
         }
     }
-    class BindingObserverImplementation extends SubscriberSet {
+    class ExpressionNotifierImplementation extends SubscriberSet {
         constructor(binding, initialSubscriber, isVolatileBinding = false) {
             super(binding, initialSubscriber);
             this.binding = binding;
@@ -218,14 +218,14 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
          */
         getAccessors,
         /**
-         * Creates a {@link BindingObserver} that can watch the
-         * provided {@link Binding} for changes.
+         * Creates a {@link ExpressionNotifier} that can watch the
+         * provided {@link Expression} for changes.
          * @param binding - The binding to observe.
          * @param initialSubscriber - An initial subscriber to changes in the binding value.
          * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
          */
         binding(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {
-            return new BindingObserverImplementation(binding, initialSubscriber, isVolatileBinding);
+            return new ExpressionNotifierImplementation(binding, initialSubscriber, isVolatileBinding);
         },
         /**
          * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
@@ -272,72 +272,124 @@ const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
         },
     };
 });
-class DefaultExecutionContext {
+/**
+ * Provides additional contextual information available to behaviors and expressions.
+ * @public
+ */
+export class ExecutionContext {
     constructor(parentSource = null, parentContext = null) {
+        /**
+         * The index of the current item within a repeat context.
+         */
         this.index = 0;
+        /**
+         * The length of the current collection within a repeat context.
+         */
         this.length = 0;
         this.parent = parentSource;
         this.parentContext = parentContext;
     }
+    /**
+     * The current event within an event handler.
+     */
     get event() {
         return contextEvent.get();
     }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an even index.
+     */
     get isEven() {
         return this.index % 2 === 0;
     }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an odd index.
+     */
     get isOdd() {
         return this.index % 2 !== 0;
     }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the first item in the collection.
+     */
     get isFirst() {
         return this.index === 0;
     }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is somewhere in the middle of the collection.
+     */
     get isInMiddle() {
         return !this.isFirst && !this.isLast;
     }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the last item in the collection.
+     */
     get isLast() {
         return this.index === this.length - 1;
     }
+    /**
+     * Returns the typed event detail of a custom event.
+     */
     eventDetail() {
         return this.event.detail;
     }
+    /**
+     * Returns the typed event target of the event.
+     */
     eventTarget() {
         return this.event.target;
     }
+    /**
+     * Updates the position/size on a context associated with a list item.
+     * @param index - The new index of the item.
+     * @param length - The new length of the list.
+     */
     updatePosition(index, length) {
         this.index = index;
         this.length = length;
     }
+    /**
+     * Creates a new execution context descendent from the current context.
+     * @param source - The source for the context if different than the parent.
+     * @returns A child execution context.
+     */
     createChildContext(parentSource) {
-        return new DefaultExecutionContext(parentSource, this);
+        return new ExecutionContext(parentSource, this);
     }
+    /**
+     * Creates a new execution context descent suitable for use in list rendering.
+     * @param item - The list item to serve as the source.
+     * @param index - The index of the item in the list.
+     * @param length - The length of the list.
+     */
     createItemContext(index, length) {
         const childContext = Object.create(this);
         childContext.index = index;
         childContext.length = length;
         return childContext;
     }
-}
-Observable.defineProperty(DefaultExecutionContext.prototype, "index");
-Observable.defineProperty(DefaultExecutionContext.prototype, "length");
-/**
- * The common execution context APIs.
- * @public
- */
-export const ExecutionContext = Object.freeze({
-    default: new DefaultExecutionContext(),
     /**
      * Sets the event for the current execution context.
      * @param event - The event to set.
      * @internal
      */
-    setEvent(event) {
+    static setEvent(event) {
         contextEvent.set(event);
-    },
+    }
     /**
      * Creates a new root execution context.
      * @returns A new execution context.
      */
-    create() {
-        return new DefaultExecutionContext();
-    },
-});
+    static create() {
+        return new ExecutionContext();
+    }
+}
+/**
+ * The default execution context.
+ */
+ExecutionContext.default = new ExecutionContext();
+Observable.defineProperty(ExecutionContext.prototype, "index");
+Observable.defineProperty(ExecutionContext.prototype, "length");

package/dist/esm/platform.js

@@ -26,7 +26,7 @@ if (FAST.error === void 0) {
     Object.assign(FAST, {
         warn() { },
         error(code) {
-            return new Error(`Code ${code}`);
+            return new Error(`Error ${code}`);
         },
         addMessages() { },
     });

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

@@ -71,6 +71,20 @@ export class ElementStyles {
     static setDefaultStrategy(Strategy) {
         DefaultStyleStrategy = Strategy;
     }
+    /**
+     * Normalizes a set of composable style options.
+     * @param styles - The style options to normalize.
+     * @returns A singular ElementStyles instance or undefined.
+     */
+    static normalize(styles) {
+        return styles === void 0
+            ? void 0
+            : Array.isArray(styles)
+                ? new ElementStyles(styles)
+                : styles instanceof ElementStyles
+                    ? styles
+                    : new ElementStyles([styles]);
+    }
 }
 /**
  * Indicates whether the DOM supports the adoptedStyleSheets feature.

package/dist/esm/templating/binding-signal.js

@@ -0,0 +1,79 @@
+import { isString } from "../interfaces.js";
+import { Binding } from "./html-directive.js";
+const subscribers = Object.create(null);
+export const Signal = Object.freeze({
+    subscribe(signal, subscriber) {
+        const found = subscribers[signal];
+        if (found) {
+            found instanceof Set
+                ? found.add(subscriber)
+                : (subscribers[signal] = new Set([found, subscriber]));
+        }
+        else {
+            subscribers[signal] = subscriber;
+        }
+    },
+    unsubscribe(signal, subscriber) {
+        const found = subscribers[signal];
+        if (found && found instanceof Set) {
+            found.delete(subscriber);
+        }
+        else {
+            subscribers[signal] = void 0;
+        }
+    },
+    /**
+     * Sends the specified signal to signaled bindings.
+     * @param signal - The signal to send.
+     * @public
+     */
+    send(signal) {
+        const found = subscribers[signal];
+        if (found) {
+            found instanceof Set
+                ? found.forEach(x => x.handleChange(this, signal))
+                : found.handleChange(this, signal);
+        }
+    },
+});
+class SignalObserver {
+    constructor(dataBinding, subscriber) {
+        this.dataBinding = dataBinding;
+        this.subscriber = subscriber;
+    }
+    observe(source, context) {
+        const signal = (this.signal = this.getSignal(source, context));
+        Signal.subscribe(signal, this);
+        return this.dataBinding.evaluate(source, context);
+    }
+    dispose() {
+        Signal.unsubscribe(this.signal, this);
+    }
+    handleChange() {
+        this.subscriber.handleChange(this.dataBinding.evaluate, this);
+    }
+    getSignal(source, context) {
+        const options = this.dataBinding.options;
+        return isString(options) ? options : options(source, context);
+    }
+}
+class SignalBinding extends Binding {
+    constructor(evaluate, options) {
+        super();
+        this.evaluate = evaluate;
+        this.options = options;
+    }
+    createObserver(directive, subscriber) {
+        return new SignalObserver(this, subscriber);
+    }
+}
+/**
+ * Creates a signal binding configuration with the supplied options.
+ * @param binding - The binding to refresh when signaled.
+ * @param options - The signal name or a binding to use to retrieve the signal name.
+ * @returns A binding configuration.
+ * @public
+ */
+export function signal(binding, options) {
+    return new SignalBinding(binding, options);
+}

package/dist/esm/templating/binding-two-way.js

@@ -0,0 +1,98 @@
+import { isString } from "../interfaces.js";
+import { Observable, } from "../observation/observable.js";
+import { FAST } from "../platform.js";
+import { Binding } from "./html-directive.js";
+const defaultOptions = {
+    fromView: v => v,
+};
+let twoWaySettings = {
+    determineChangeEvent() {
+        return "change";
+    },
+};
+class TwoWayObserver {
+    constructor(directive, subscriber, dataBinding) {
+        this.directive = directive;
+        this.subscriber = subscriber;
+        this.dataBinding = dataBinding;
+        this.notifier = Observable.binding(dataBinding.evaluate, this, dataBinding.isVolatile);
+    }
+    observe(source, context) {
+        var _a;
+        if (!this.changeEvent) {
+            this.changeEvent =
+                (_a = this.dataBinding.options.changeEvent) !== null && _a !== void 0 ? _a : twoWaySettings.determineChangeEvent(this.directive, this.target);
+        }
+        this.target.addEventListener(this.changeEvent, this);
+        return this.notifier.observe(source, context);
+    }
+    dispose() {
+        this.notifier.dispose();
+        this.target.removeEventListener(this.changeEvent, this);
+    }
+    /** @internal */
+    handleChange(subject, args) {
+        this.subscriber.handleChange(this.dataBinding.evaluate, this);
+    }
+    /** @internal */
+    handleEvent(event) {
+        const directive = this.directive;
+        const target = event.currentTarget;
+        const notifier = this.notifier;
+        const last = notifier.last; // using internal API!!!
+        if (!last) {
+            FAST.warn(1203 /* Message.twoWayBindingRequiresObservables */);
+            return;
+        }
+        let value;
+        switch (directive.aspectType) {
+            case 1:
+                value = target.getAttribute(directive.targetAspect);
+                break;
+            case 2:
+                value = target.hasAttribute(directive.targetAspect);
+                break;
+            case 4:
+                value = target.innerText;
+                break;
+            default:
+                value = target[directive.targetAspect];
+                break;
+        }
+        last.propertySource[last.propertyName] = this.dataBinding.options.fromView(value);
+    }
+}
+class TwoWayBinding extends Binding {
+    constructor(evaluate, isVolatile, options = defaultOptions) {
+        super();
+        this.evaluate = evaluate;
+        this.isVolatile = isVolatile;
+        this.options = options;
+        if (!options.fromView) {
+            options.fromView = defaultOptions.fromView;
+        }
+    }
+    createObserver(directive, subscriber) {
+        return new TwoWayObserver(directive, subscriber, this);
+    }
+    /**
+     * Configures two-way binding.
+     * @param settings - The settings to use for the two-way binding system.
+     */
+    static configure(settings) {
+        twoWaySettings = settings;
+    }
+}
+/**
+ * Creates a default binding.
+ * @param binding - The binding to refresh when changed.
+ * @param isBindingVolatile - Indicates whether the binding is volatile or not.
+ * @returns A binding configuration.
+ * @public
+ */
+export function twoWay(binding, optionsOrChangeEvent, isBindingVolatile = Observable.isVolatileBinding(binding)) {
+    if (isString(optionsOrChangeEvent)) {
+        optionsOrChangeEvent = { changeEvent: optionsOrChangeEvent };
+    }
+    return new TwoWayBinding(binding, isBindingVolatile, optionsOrChangeEvent);
+}