@microsoft/fast-element 2.0.1 → 2.2.0

package/dist/fast-element.debug.js

@@ -8,7 +8,7 @@ if (globalThis.FAST === void 0) {
 }
 const FAST$1 = globalThis.FAST;
 const debugMessages = {
-    [1101 /* needsArrayObservation */]: "Must call enableArrayObservation before observing arrays.",
+    [1101 /* needsArrayObservation */]: "Must call ArrayObserver.enable() before observing arrays.",
     [1201 /* onlySetDOMPolicyOnce */]: "The DOM Policy can only be set once.",
     [1202 /* bindingInnerHTMLRequiresTrustedTypes */]: "To bind innerHTML, you must use a TrustedTypesPolicy.",
     [1203 /* twoWayBindingRequiresObservables */]: "View=>Model update skipped. To use twoWay binding, the target property must be observable.",
@@ -1299,6 +1299,19 @@ class Splice {
         return this;
     }
 }
+/**
+ * A sort array indicates new index positions of array items.
+ * @public
+ */
+class Sort {
+    /**
+     * Creates a sort update.
+     * @param sorted - The updated index of sorted items.
+     */
+    constructor(sorted) {
+        this.sorted = sorted;
+    }
+}
 /**
  * Indicates what level of feature support the splice
  * strategy provides.
@@ -1617,7 +1630,7 @@ function project(array, changes) {
  * splices needed to represent the change from the old array to the new array.
  * @public
  */
-let defaultSpliceStrategy = Object.freeze({
+let defaultMutationStrategy = Object.freeze({
     support: SpliceStrategySupport.optimized,
     normalize(previous, current, changes) {
         if (previous === void 0) {
@@ -1643,7 +1656,12 @@ let defaultSpliceStrategy = Object.freeze({
     },
     reverse(array, observer, reverse, args) {
         const result = reverse.apply(array, args);
-        observer.reset(array);
+        array.sorted++;
+        const sortedItems = [];
+        for (let i = array.length - 1; i >= 0; i--) {
+            sortedItems.push(i);
+        }
+        observer.addSort(new Sort(sortedItems));
         return result;
     },
     shift(array, observer, shift, args) {
@@ -1655,8 +1673,20 @@ let defaultSpliceStrategy = Object.freeze({
         return result;
     },
     sort(array, observer, sort, args) {
+        const map = new Map();
+        for (let i = 0, ii = array.length; i < ii; ++i) {
+            const mapValue = map.get(array[i]) || [];
+            map.set(array[i], [...mapValue, i]);
+        }
         const result = sort.apply(array, args);
-        observer.reset(array);
+        array.sorted++;
+        const sortedItems = [];
+        for (let i = 0, ii = array.length; i < ii; ++i) {
+            const indexs = map.get(array[i]);
+            sortedItems.push(indexs[0]);
+            map.set(array[i], indexs.splice(1));
+        }
+        observer.addSort(new Sort(sortedItems));
         return result;
     },
     splice(array, observer, splice, args) {
@@ -1684,13 +1714,14 @@ const SpliceStrategy = Object.freeze({
      * @param strategy - The splice strategy to use.
      */
     setDefaultStrategy(strategy) {
-        defaultSpliceStrategy = strategy;
+        defaultMutationStrategy = strategy;
     },
 });
-function setNonEnumerable(target, property, value) {
+function setNonEnumerable(target, property, value, writable = true) {
     Reflect.defineProperty(target, property, {
         value,
         enumerable: false,
+        writable,
     });
 }
 class DefaultArrayObserver extends SubscriberSet {
@@ -1698,9 +1729,11 @@ class DefaultArrayObserver extends SubscriberSet {
         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);
     }
@@ -1727,6 +1760,23 @@ class DefaultArrayObserver extends SubscriberSet {
         }
         return observer;
     }
+    get sortObserver() {
+        let observer = this._sortObserver;
+        if (observer === void 0) {
+            const array = this.subject;
+            this._sortObserver = observer = {
+                sorted: array.sorted,
+                handleChange() {
+                    if (this.sorted !== array.sorted) {
+                        this.sorted = array.sorted;
+                        Observable.notify(observer, "sorted");
+                    }
+                },
+            };
+            this.subscribe(observer);
+        }
+        return observer;
+    }
     subscribe(subscriber) {
         this.flush();
         super.subscribe(subscriber);
@@ -1740,6 +1790,15 @@ class DefaultArrayObserver extends SubscriberSet {
         }
         this.enqueue();
     }
+    addSort(sort) {
+        if (this.sorts === void 0) {
+            this.sorts = [sort];
+        }
+        else {
+            this.sorts.push(sort);
+        }
+        this.enqueue();
+    }
     reset(oldCollection) {
         this.oldCollection = oldCollection;
         this.enqueue();
@@ -1747,14 +1806,18 @@ class DefaultArrayObserver extends SubscriberSet {
     flush() {
         var _a;
         const splices = this.splices;
+        const sorts = this.sorts;
         const oldCollection = this.oldCollection;
-        if (splices === void 0 && oldCollection === void 0) {
+        if (splices === void 0 && oldCollection === void 0 && sorts === void 0) {
             return;
         }
         this.needsQueue = true;
         this.splices = void 0;
+        this.sorts = void 0;
         this.oldCollection = void 0;
-        this.notify(((_a = this._strategy) !== null && _a !== void 0 ? _a : defaultSpliceStrategy).normalize(oldCollection, this.subject, splices));
+        sorts !== void 0
+            ? this.notify(sorts)
+            : this.notify(((_a = this._strategy) !== null && _a !== void 0 ? _a : defaultMutationStrategy).normalize(oldCollection, this.subject, splices));
     }
     enqueue() {
         if (this.needsQueue) {
@@ -1769,6 +1832,7 @@ let enabled = false;
  * @public
  */
 const ArrayObserver = Object.freeze({
+    sorted: 0,
     /**
      * Enables the array observation mechanism.
      * @remarks
@@ -1785,6 +1849,7 @@ const ArrayObserver = Object.freeze({
         const proto = Array.prototype;
         if (!proto.$fastPatch) {
             setNonEnumerable(proto, "$fastPatch", 1);
+            setNonEnumerable(proto, "sorted", 0);
             [
                 proto.pop,
                 proto.push,
@@ -1799,7 +1864,7 @@ const ArrayObserver = Object.freeze({
                     const o = this.$fastController;
                     return o === void 0
                         ? method.apply(this, args)
-                        : ((_a = o.strategy) !== null && _a !== void 0 ? _a : defaultSpliceStrategy)[method.name](this, o, method, args);
+                        : ((_a = o.strategy) !== null && _a !== void 0 ? _a : defaultMutationStrategy)[method.name](this, o, method, args);
                 };
             });
         }
@@ -1823,6 +1888,24 @@ function lengthOf(array) {
     Observable.track(arrayObserver.lengthObserver, "length");
     return array.length;
 }
+/**
+ * Enables observing the sorted property of an array.
+ * @param array - The array to observe the sorted property of.
+ * @returns The sorted property.
+ * @public
+ */
+function sortedCount(array) {
+    if (!array) {
+        return 0;
+    }
+    let arrayObserver = array.$fastController;
+    if (arrayObserver === void 0) {
+        ArrayObserver.enable();
+        arrayObserver = Observable.getNotifier(array);
+    }
+    Observable.track(arrayObserver.sortObserver, "sorted");
+    return array.sorted;
+}
 
 /**
  * Captures a binding expression along with related information and capabilities.
@@ -3927,8 +4010,11 @@ class RepeatBehavior {
         else if (args[0].reset) {
             this.refreshAllViews();
         }
+        else if (args[0].sorted) {
+            this.updateSortedViews(args);
+        }
         else {
-            this.updateViews(args);
+            this.updateSplicedViews(args);
         }
     }
     observeItems(force = false) {
@@ -3946,7 +4032,27 @@ class RepeatBehavior {
             newObserver.subscribe(this);
         }
     }
-    updateViews(splices) {
+    updateSortedViews(sorts) {
+        const views = this.views;
+        for (let i = 0, ii = sorts.length; i < ii; ++i) {
+            const sortedItems = sorts[i].sorted.slice();
+            const unsortedItems = sortedItems.slice().sort();
+            for (let j = 0, jj = sortedItems.length; j < jj; ++j) {
+                const sortedIndex = sortedItems.find(value => sortedItems[j] === unsortedItems[value]);
+                if (sortedIndex !== j) {
+                    const removedItems = unsortedItems.splice(sortedIndex, 1);
+                    unsortedItems.splice(j, 0, ...removedItems);
+                    const neighbor = views[j];
+                    const location = neighbor ? neighbor.firstChild : this.location;
+                    views[sortedIndex].remove();
+                    views[sortedIndex].insertBefore(location);
+                    const removedViews = views.splice(sortedIndex, 1);
+                    views.splice(j, 0, ...removedViews);
+                }
+            }
+        }
+    }
+    updateSplicedViews(splices) {
         const views = this.views;
         const bindView = this.bindView;
         const items = this.items;
@@ -4380,6 +4486,37 @@ function children(propertyOrOptions) {
     return new ChildrenDirective(propertyOrOptions);
 }
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 const booleanMode = "boolean";
 const reflectMode = "reflect";
 /**
@@ -4591,6 +4728,10 @@ function attr(configOrTarget, prop) {
 const defaultShadowOptions = { mode: "open" };
 const defaultElementOptions = {};
 const fastElementBaseTypes = new Set();
+/**
+ * The FAST custom element registry
+ * @internal
+ */
 const fastElementRegistry = FAST.getById(KernelServiceId.elementRegistry, () => createTypeRegistry());
 /**
  * Defines metadata for a FASTElement.
@@ -4691,6 +4832,10 @@ FASTElementDefinition.getByType = fastElementRegistry.getByType;
  * @param instance - The custom element instance to retrieve the definition for.
  */
 FASTElementDefinition.getForInstance = fastElementRegistry.getForInstance;
+__decorate([
+    observable,
+    __metadata("design:type", Object)
+], FASTElementDefinition.prototype, "template", void 0);
 
 /**
  * A Behavior that enables advanced rendering.
@@ -5609,20 +5754,27 @@ class ElementController extends PropertyChangeNotifier {
     /**
      * Locates or creates a controller for the specified element.
      * @param element - The element to return the controller for.
+     * @param override - Reset the controller even if one has been defined.
      * @remarks
      * The specified element must have a {@link FASTElementDefinition}
      * registered either through the use of the {@link customElement}
      * decorator or a call to `FASTElement.define`.
      */
-    static forCustomElement(element) {
+    static forCustomElement(element, override = false) {
         const controller = element.$fastController;
-        if (controller !== void 0) {
+        if (controller !== void 0 && !override) {
             return controller;
         }
         const definition = FASTElementDefinition.getForInstance(element);
         if (definition === void 0) {
             throw FAST.error(1401 /* Message.missingElementDefinition */);
         }
+        Observable.getNotifier(definition).subscribe({
+            handleChange: () => {
+                ElementController.forCustomElement(element, true);
+                element.$fastController.connect();
+            },
+        }, "template");
         return (element.$fastController = new elementControllerStrategy(element, definition));
     }
     /**
@@ -5917,4 +6069,4 @@ function customElement(nameOrDef) {
 
 DOM.setPolicy(DOMPolicy.create());
 
-export { ArrayObserver, AttributeConfiguration, AttributeDefinition, Binding, CSSBindingDirective, CSSDirective, ChildrenDirective, Compiler, DOM, DOMAspect, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, HydratableElementController, HydrationBindingError, InlineTemplateDirective, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RenderBehavior, RenderDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewTemplate, attr, booleanConverter, children, css, cssDirective, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding$1 as normalizeBinding, nullableBooleanConverter, nullableNumberConverter, observable, oneTime, oneWay, ref, render, repeat, slotted, volatile, when };
+export { ArrayObserver, AttributeConfiguration, AttributeDefinition, Binding, CSSBindingDirective, CSSDirective, ChildrenDirective, Compiler, DOM, DOMAspect, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, HydratableElementController, HydrationBindingError, InlineTemplateDirective, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RenderBehavior, RenderDirective, RepeatBehavior, RepeatDirective, SlottedDirective, Sort, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewTemplate, attr, booleanConverter, children, css, cssDirective, customElement, elements, emptyArray, fastElementRegistry, html, htmlDirective, lengthOf, listener, normalizeBinding$1 as normalizeBinding, nullableBooleanConverter, nullableNumberConverter, observable, oneTime, oneWay, ref, render, repeat, slotted, sortedCount, volatile, when };