@ni/nimble-components 15.5.0 → 15.5.1

package/dist/all-components-bundle.js

@@ -2597,6 +2597,506 @@
         }
     }
 
+    /** @internal */
+    function newSplice(index, removed, addedCount) {
+        return {
+            index: index,
+            removed: removed,
+            addedCount: addedCount,
+        };
+    }
+    const EDIT_LEAVE = 0;
+    const EDIT_UPDATE = 1;
+    const EDIT_ADD = 2;
+    const EDIT_DELETE = 3;
+    // Note: This function is *based* on the computation of the Levenshtein
+    // "edit" distance. The one change is that "updates" are treated as two
+    // edits - not one. With Array splices, an update is really a delete
+    // followed by an add. By retaining this, we optimize for "keeping" the
+    // maximum array items in the original array. For example:
+    //
+    //   'xxxx123' -> '123yyyy'
+    //
+    // With 1-edit updates, the shortest path would be just to update all seven
+    // characters. With 2-edit updates, we delete 4, leave 3, and add 4. This
+    // leaves the substring '123' intact.
+    function calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+        // "Deletion" columns
+        const rowCount = oldEnd - oldStart + 1;
+        const columnCount = currentEnd - currentStart + 1;
+        const distances = new Array(rowCount);
+        let north;
+        let west;
+        // "Addition" rows. Initialize null column.
+        for (let i = 0; i < rowCount; ++i) {
+            distances[i] = new Array(columnCount);
+            distances[i][0] = i;
+        }
+        // Initialize null row
+        for (let j = 0; j < columnCount; ++j) {
+            distances[0][j] = j;
+        }
+        for (let i = 1; i < rowCount; ++i) {
+            for (let j = 1; j < columnCount; ++j) {
+                if (current[currentStart + j - 1] === old[oldStart + i - 1]) {
+                    distances[i][j] = distances[i - 1][j - 1];
+                }
+                else {
+                    north = distances[i - 1][j] + 1;
+                    west = distances[i][j - 1] + 1;
+                    distances[i][j] = north < west ? north : west;
+                }
+            }
+        }
+        return distances;
+    }
+    // This starts at the final weight, and walks "backward" by finding
+    // the minimum previous weight recursively until the origin of the weight
+    // matrix.
+    function spliceOperationsFromEditDistances(distances) {
+        let i = distances.length - 1;
+        let j = distances[0].length - 1;
+        let current = distances[i][j];
+        const edits = [];
+        while (i > 0 || j > 0) {
+            if (i === 0) {
+                edits.push(EDIT_ADD);
+                j--;
+                continue;
+            }
+            if (j === 0) {
+                edits.push(EDIT_DELETE);
+                i--;
+                continue;
+            }
+            const northWest = distances[i - 1][j - 1];
+            const west = distances[i - 1][j];
+            const north = distances[i][j - 1];
+            let min;
+            if (west < north) {
+                min = west < northWest ? west : northWest;
+            }
+            else {
+                min = north < northWest ? north : northWest;
+            }
+            if (min === northWest) {
+                if (northWest === current) {
+                    edits.push(EDIT_LEAVE);
+                }
+                else {
+                    edits.push(EDIT_UPDATE);
+                    current = northWest;
+                }
+                i--;
+                j--;
+            }
+            else if (min === west) {
+                edits.push(EDIT_DELETE);
+                i--;
+                current = west;
+            }
+            else {
+                edits.push(EDIT_ADD);
+                j--;
+                current = north;
+            }
+        }
+        edits.reverse();
+        return edits;
+    }
+    function sharedPrefix(current, old, searchLength) {
+        for (let i = 0; i < searchLength; ++i) {
+            if (current[i] !== old[i]) {
+                return i;
+            }
+        }
+        return searchLength;
+    }
+    function sharedSuffix(current, old, searchLength) {
+        let index1 = current.length;
+        let index2 = old.length;
+        let count = 0;
+        while (count < searchLength && current[--index1] === old[--index2]) {
+            count++;
+        }
+        return count;
+    }
+    function intersect(start1, end1, start2, end2) {
+        // Disjoint
+        if (end1 < start2 || end2 < start1) {
+            return -1;
+        }
+        // Adjacent
+        if (end1 === start2 || end2 === start1) {
+            return 0;
+        }
+        // Non-zero intersect, span1 first
+        if (start1 < start2) {
+            if (end1 < end2) {
+                return end1 - start2; // Overlap
+            }
+            return end2 - start2; // Contained
+        }
+        // Non-zero intersect, span2 first
+        if (end2 < end1) {
+            return end2 - start1; // Overlap
+        }
+        return end1 - start1; // Contained
+    }
+    /**
+     * Splice Projection functions:
+     *
+     * A splice map is a representation of how a previous array of items
+     * was transformed into a new array of items. Conceptually it is a list of
+     * tuples of
+     *
+     *   <index, removed, addedCount>
+     *
+     * which are kept in ascending index order of. The tuple represents that at
+     * the |index|, |removed| sequence of items were removed, and counting forward
+     * from |index|, |addedCount| items were added.
+     */
+    /**
+     * @internal
+     * @remarks
+     * Lacking individual splice mutation information, the minimal set of
+     * splices can be synthesized given the previous state and final state of an
+     * array. The basic approach is to calculate the edit distance matrix and
+     * choose the shortest path through it.
+     *
+     * Complexity: O(l * p)
+     *   l: The length of the current array
+     *   p: The length of the old array
+     */
+    function calcSplices(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+        let prefixCount = 0;
+        let suffixCount = 0;
+        const minLength = Math.min(currentEnd - currentStart, oldEnd - oldStart);
+        if (currentStart === 0 && oldStart === 0) {
+            prefixCount = sharedPrefix(current, old, minLength);
+        }
+        if (currentEnd === current.length && oldEnd === old.length) {
+            suffixCount = sharedSuffix(current, old, minLength - prefixCount);
+        }
+        currentStart += prefixCount;
+        oldStart += prefixCount;
+        currentEnd -= suffixCount;
+        oldEnd -= suffixCount;
+        if (currentEnd - currentStart === 0 && oldEnd - oldStart === 0) {
+            return emptyArray;
+        }
+        if (currentStart === currentEnd) {
+            const splice = newSplice(currentStart, [], 0);
+            while (oldStart < oldEnd) {
+                splice.removed.push(old[oldStart++]);
+            }
+            return [splice];
+        }
+        else if (oldStart === oldEnd) {
+            return [newSplice(currentStart, [], currentEnd - currentStart)];
+        }
+        const ops = spliceOperationsFromEditDistances(calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd));
+        const splices = [];
+        let splice = void 0;
+        let index = currentStart;
+        let oldIndex = oldStart;
+        for (let i = 0; i < ops.length; ++i) {
+            switch (ops[i]) {
+                case EDIT_LEAVE:
+                    if (splice !== void 0) {
+                        splices.push(splice);
+                        splice = void 0;
+                    }
+                    index++;
+                    oldIndex++;
+                    break;
+                case EDIT_UPDATE:
+                    if (splice === void 0) {
+                        splice = newSplice(index, [], 0);
+                    }
+                    splice.addedCount++;
+                    index++;
+                    splice.removed.push(old[oldIndex]);
+                    oldIndex++;
+                    break;
+                case EDIT_ADD:
+                    if (splice === void 0) {
+                        splice = newSplice(index, [], 0);
+                    }
+                    splice.addedCount++;
+                    index++;
+                    break;
+                case EDIT_DELETE:
+                    if (splice === void 0) {
+                        splice = newSplice(index, [], 0);
+                    }
+                    splice.removed.push(old[oldIndex]);
+                    oldIndex++;
+                    break;
+                // no default
+            }
+        }
+        if (splice !== void 0) {
+            splices.push(splice);
+        }
+        return splices;
+    }
+    const $push = Array.prototype.push;
+    function mergeSplice(splices, index, removed, addedCount) {
+        const splice = newSplice(index, removed, addedCount);
+        let inserted = false;
+        let insertionOffset = 0;
+        for (let i = 0; i < splices.length; i++) {
+            const current = splices[i];
+            current.index += insertionOffset;
+            if (inserted) {
+                continue;
+            }
+            const intersectCount = intersect(splice.index, splice.index + splice.removed.length, current.index, current.index + current.addedCount);
+            if (intersectCount >= 0) {
+                // Merge the two splices
+                splices.splice(i, 1);
+                i--;
+                insertionOffset -= current.addedCount - current.removed.length;
+                splice.addedCount += current.addedCount - intersectCount;
+                const deleteCount = splice.removed.length + current.removed.length - intersectCount;
+                if (!splice.addedCount && !deleteCount) {
+                    // merged splice is a noop. discard.
+                    inserted = true;
+                }
+                else {
+                    let currentRemoved = current.removed;
+                    if (splice.index < current.index) {
+                        // some prefix of splice.removed is prepended to current.removed.
+                        const prepend = splice.removed.slice(0, current.index - splice.index);
+                        $push.apply(prepend, currentRemoved);
+                        currentRemoved = prepend;
+                    }
+                    if (splice.index + splice.removed.length >
+                        current.index + current.addedCount) {
+                        // some suffix of splice.removed is appended to current.removed.
+                        const append = splice.removed.slice(current.index + current.addedCount - splice.index);
+                        $push.apply(currentRemoved, append);
+                    }
+                    splice.removed = currentRemoved;
+                    if (current.index < splice.index) {
+                        splice.index = current.index;
+                    }
+                }
+            }
+            else if (splice.index < current.index) {
+                // Insert splice here.
+                inserted = true;
+                splices.splice(i, 0, splice);
+                i++;
+                const offset = splice.addedCount - splice.removed.length;
+                current.index += offset;
+                insertionOffset += offset;
+            }
+        }
+        if (!inserted) {
+            splices.push(splice);
+        }
+    }
+    function createInitialSplices(changeRecords) {
+        const splices = [];
+        for (let i = 0, ii = changeRecords.length; i < ii; i++) {
+            const record = changeRecords[i];
+            mergeSplice(splices, record.index, record.removed, record.addedCount);
+        }
+        return splices;
+    }
+    /** @internal */
+    function projectArraySplices(array, changeRecords) {
+        let splices = [];
+        const initialSplices = createInitialSplices(changeRecords);
+        for (let i = 0, ii = initialSplices.length; i < ii; ++i) {
+            const splice = initialSplices[i];
+            if (splice.addedCount === 1 && splice.removed.length === 1) {
+                if (splice.removed[0] !== array[splice.index]) {
+                    splices.push(splice);
+                }
+                continue;
+            }
+            splices = splices.concat(calcSplices(array, splice.index, splice.index + splice.addedCount, splice.removed, 0, splice.removed.length));
+        }
+        return splices;
+    }
+
+    let arrayObservationEnabled = false;
+    function adjustIndex(changeRecord, array) {
+        let index = changeRecord.index;
+        const arrayLength = array.length;
+        if (index > arrayLength) {
+            index = arrayLength - changeRecord.addedCount;
+        }
+        else if (index < 0) {
+            index =
+                arrayLength + changeRecord.removed.length + index - changeRecord.addedCount;
+        }
+        if (index < 0) {
+            index = 0;
+        }
+        changeRecord.index = index;
+        return changeRecord;
+    }
+    class ArrayObserver extends SubscriberSet {
+        constructor(source) {
+            super(source);
+            this.oldCollection = void 0;
+            this.splices = void 0;
+            this.needsQueue = true;
+            this.call = this.flush;
+            Reflect.defineProperty(source, "$fastController", {
+                value: this,
+                enumerable: false,
+            });
+        }
+        subscribe(subscriber) {
+            this.flush();
+            super.subscribe(subscriber);
+        }
+        addSplice(splice) {
+            if (this.splices === void 0) {
+                this.splices = [splice];
+            }
+            else {
+                this.splices.push(splice);
+            }
+            if (this.needsQueue) {
+                this.needsQueue = false;
+                DOM.queueUpdate(this);
+            }
+        }
+        reset(oldCollection) {
+            this.oldCollection = oldCollection;
+            if (this.needsQueue) {
+                this.needsQueue = false;
+                DOM.queueUpdate(this);
+            }
+        }
+        flush() {
+            const splices = this.splices;
+            const oldCollection = this.oldCollection;
+            if (splices === void 0 && oldCollection === void 0) {
+                return;
+            }
+            this.needsQueue = true;
+            this.splices = void 0;
+            this.oldCollection = void 0;
+            const finalSplices = oldCollection === void 0
+                ? projectArraySplices(this.source, splices)
+                : calcSplices(this.source, 0, this.source.length, oldCollection, 0, oldCollection.length);
+            this.notify(finalSplices);
+        }
+    }
+    /* eslint-disable prefer-rest-params */
+    /* eslint-disable @typescript-eslint/explicit-function-return-type */
+    /**
+     * Enables the array observation mechanism.
+     * @remarks
+     * Array observation is enabled automatically when using the
+     * {@link RepeatDirective}, so calling this API manually is
+     * not typically necessary.
+     * @public
+     */
+    function enableArrayObservation() {
+        if (arrayObservationEnabled) {
+            return;
+        }
+        arrayObservationEnabled = true;
+        Observable.setArrayObserverFactory((collection) => {
+            return new ArrayObserver(collection);
+        });
+        const proto = Array.prototype;
+        // Don't patch Array if it has already been patched
+        // by another copy of fast-element.
+        if (proto.$fastPatch) {
+            return;
+        }
+        Reflect.defineProperty(proto, "$fastPatch", {
+            value: 1,
+            enumerable: false,
+        });
+        const pop = proto.pop;
+        const push = proto.push;
+        const reverse = proto.reverse;
+        const shift = proto.shift;
+        const sort = proto.sort;
+        const splice = proto.splice;
+        const unshift = proto.unshift;
+        proto.pop = function () {
+            const notEmpty = this.length > 0;
+            const methodCallResult = pop.apply(this, arguments);
+            const o = this.$fastController;
+            if (o !== void 0 && notEmpty) {
+                o.addSplice(newSplice(this.length, [methodCallResult], 0));
+            }
+            return methodCallResult;
+        };
+        proto.push = function () {
+            const methodCallResult = push.apply(this, arguments);
+            const o = this.$fastController;
+            if (o !== void 0) {
+                o.addSplice(adjustIndex(newSplice(this.length - arguments.length, [], arguments.length), this));
+            }
+            return methodCallResult;
+        };
+        proto.reverse = function () {
+            let oldArray;
+            const o = this.$fastController;
+            if (o !== void 0) {
+                o.flush();
+                oldArray = this.slice();
+            }
+            const methodCallResult = reverse.apply(this, arguments);
+            if (o !== void 0) {
+                o.reset(oldArray);
+            }
+            return methodCallResult;
+        };
+        proto.shift = function () {
+            const notEmpty = this.length > 0;
+            const methodCallResult = shift.apply(this, arguments);
+            const o = this.$fastController;
+            if (o !== void 0 && notEmpty) {
+                o.addSplice(newSplice(0, [methodCallResult], 0));
+            }
+            return methodCallResult;
+        };
+        proto.sort = function () {
+            let oldArray;
+            const o = this.$fastController;
+            if (o !== void 0) {
+                o.flush();
+                oldArray = this.slice();
+            }
+            const methodCallResult = sort.apply(this, arguments);
+            if (o !== void 0) {
+                o.reset(oldArray);
+            }
+            return methodCallResult;
+        };
+        proto.splice = function () {
+            const methodCallResult = splice.apply(this, arguments);
+            const o = this.$fastController;
+            if (o !== void 0) {
+                o.addSplice(adjustIndex(newSplice(+arguments[0], methodCallResult, arguments.length > 2 ? arguments.length - 2 : 0), this));
+            }
+            return methodCallResult;
+        };
+        proto.unshift = function () {
+            const methodCallResult = unshift.apply(this, arguments);
+            const o = this.$fastController;
+            if (o !== void 0) {
+                o.addSplice(adjustIndex(newSplice(0, [], arguments.length), this));
+            }
+            return methodCallResult;
+        };
+    }
+    /* eslint-enable prefer-rest-params */
+    /* eslint-enable @typescript-eslint/explicit-function-return-type */
+
     /**
      * The runtime behavior for template references.
      * @public
@@ -2649,6 +3149,267 @@
         return (source, context) => binding(source, context) ? getTemplate(source, context) : null;
     }
 
+    const defaultRepeatOptions = Object.freeze({
+        positioning: false,
+        recycle: true,
+    });
+    function bindWithoutPositioning(view, items, index, context) {
+        view.bind(items[index], context);
+    }
+    function bindWithPositioning(view, items, index, context) {
+        const childContext = Object.create(context);
+        childContext.index = index;
+        childContext.length = items.length;
+        view.bind(items[index], childContext);
+    }
+    /**
+     * A behavior that renders a template for each item in an array.
+     * @public
+     */
+    class RepeatBehavior {
+        /**
+         * Creates an instance of RepeatBehavior.
+         * @param location - The location in the DOM to render the repeat.
+         * @param itemsBinding - The array to render.
+         * @param isItemsBindingVolatile - Indicates whether the items binding has volatile dependencies.
+         * @param templateBinding - The template to render for each item.
+         * @param isTemplateBindingVolatile - Indicates whether the template binding has volatile dependencies.
+         * @param options - Options used to turn on special repeat features.
+         */
+        constructor(location, itemsBinding, isItemsBindingVolatile, templateBinding, isTemplateBindingVolatile, options) {
+            this.location = location;
+            this.itemsBinding = itemsBinding;
+            this.templateBinding = templateBinding;
+            this.options = options;
+            this.source = null;
+            this.views = [];
+            this.items = null;
+            this.itemsObserver = null;
+            this.originalContext = void 0;
+            this.childContext = void 0;
+            this.bindView = bindWithoutPositioning;
+            this.itemsBindingObserver = Observable.binding(itemsBinding, this, isItemsBindingVolatile);
+            this.templateBindingObserver = Observable.binding(templateBinding, this, isTemplateBindingVolatile);
+            if (options.positioning) {
+                this.bindView = bindWithPositioning;
+            }
+        }
+        /**
+         * Bind this behavior to the source.
+         * @param source - The source to bind to.
+         * @param context - The execution context that the binding is operating within.
+         */
+        bind(source, context) {
+            this.source = source;
+            this.originalContext = context;
+            this.childContext = Object.create(context);
+            this.childContext.parent = source;
+            this.childContext.parentContext = this.originalContext;
+            this.items = this.itemsBindingObserver.observe(source, this.originalContext);
+            this.template = this.templateBindingObserver.observe(source, this.originalContext);
+            this.observeItems(true);
+            this.refreshAllViews();
+        }
+        /**
+         * Unbinds this behavior from the source.
+         * @param source - The source to unbind from.
+         */
+        unbind() {
+            this.source = null;
+            this.items = null;
+            if (this.itemsObserver !== null) {
+                this.itemsObserver.unsubscribe(this);
+            }
+            this.unbindAllViews();
+            this.itemsBindingObserver.disconnect();
+            this.templateBindingObserver.disconnect();
+        }
+        /** @internal */
+        handleChange(source, args) {
+            if (source === this.itemsBinding) {
+                this.items = this.itemsBindingObserver.observe(this.source, this.originalContext);
+                this.observeItems();
+                this.refreshAllViews();
+            }
+            else if (source === this.templateBinding) {
+                this.template = this.templateBindingObserver.observe(this.source, this.originalContext);
+                this.refreshAllViews(true);
+            }
+            else {
+                this.updateViews(args);
+            }
+        }
+        observeItems(force = false) {
+            if (!this.items) {
+                this.items = emptyArray;
+                return;
+            }
+            const oldObserver = this.itemsObserver;
+            const newObserver = (this.itemsObserver = Observable.getNotifier(this.items));
+            const hasNewObserver = oldObserver !== newObserver;
+            if (hasNewObserver && oldObserver !== null) {
+                oldObserver.unsubscribe(this);
+            }
+            if (hasNewObserver || force) {
+                newObserver.subscribe(this);
+            }
+        }
+        updateViews(splices) {
+            const childContext = this.childContext;
+            const views = this.views;
+            const bindView = this.bindView;
+            const items = this.items;
+            const template = this.template;
+            const recycle = this.options.recycle;
+            const leftoverViews = [];
+            let leftoverIndex = 0;
+            let availableViews = 0;
+            for (let i = 0, ii = splices.length; i < ii; ++i) {
+                const splice = splices[i];
+                const removed = splice.removed;
+                let removeIndex = 0;
+                let addIndex = splice.index;
+                const end = addIndex + splice.addedCount;
+                const removedViews = views.splice(splice.index, removed.length);
+                const totalAvailableViews = (availableViews =
+                    leftoverViews.length + removedViews.length);
+                for (; addIndex < end; ++addIndex) {
+                    const neighbor = views[addIndex];
+                    const location = neighbor ? neighbor.firstChild : this.location;
+                    let view;
+                    if (recycle && availableViews > 0) {
+                        if (removeIndex <= totalAvailableViews && removedViews.length > 0) {
+                            view = removedViews[removeIndex];
+                            removeIndex++;
+                        }
+                        else {
+                            view = leftoverViews[leftoverIndex];
+                            leftoverIndex++;
+                        }
+                        availableViews--;
+                    }
+                    else {
+                        view = template.create();
+                    }
+                    views.splice(addIndex, 0, view);
+                    bindView(view, items, addIndex, childContext);
+                    view.insertBefore(location);
+                }
+                if (removedViews[removeIndex]) {
+                    leftoverViews.push(...removedViews.slice(removeIndex));
+                }
+            }
+            for (let i = leftoverIndex, ii = leftoverViews.length; i < ii; ++i) {
+                leftoverViews[i].dispose();
+            }
+            if (this.options.positioning) {
+                for (let i = 0, ii = views.length; i < ii; ++i) {
+                    const currentContext = views[i].context;
+                    currentContext.length = ii;
+                    currentContext.index = i;
+                }
+            }
+        }
+        refreshAllViews(templateChanged = false) {
+            const items = this.items;
+            const childContext = this.childContext;
+            const template = this.template;
+            const location = this.location;
+            const bindView = this.bindView;
+            let itemsLength = items.length;
+            let views = this.views;
+            let viewsLength = views.length;
+            if (itemsLength === 0 || templateChanged || !this.options.recycle) {
+                // all views need to be removed
+                HTMLView.disposeContiguousBatch(views);
+                viewsLength = 0;
+            }
+            if (viewsLength === 0) {
+                // all views need to be created
+                this.views = views = new Array(itemsLength);
+                for (let i = 0; i < itemsLength; ++i) {
+                    const view = template.create();
+                    bindView(view, items, i, childContext);
+                    views[i] = view;
+                    view.insertBefore(location);
+                }
+            }
+            else {
+                // attempt to reuse existing views with new data
+                let i = 0;
+                for (; i < itemsLength; ++i) {
+                    if (i < viewsLength) {
+                        const view = views[i];
+                        bindView(view, items, i, childContext);
+                    }
+                    else {
+                        const view = template.create();
+                        bindView(view, items, i, childContext);
+                        views.push(view);
+                        view.insertBefore(location);
+                    }
+                }
+                const removed = views.splice(i, viewsLength - i);
+                for (i = 0, itemsLength = removed.length; i < itemsLength; ++i) {
+                    removed[i].dispose();
+                }
+            }
+        }
+        unbindAllViews() {
+            const views = this.views;
+            for (let i = 0, ii = views.length; i < ii; ++i) {
+                views[i].unbind();
+            }
+        }
+    }
+    /**
+     * A directive that configures list rendering.
+     * @public
+     */
+    class RepeatDirective extends HTMLDirective {
+        /**
+         * Creates an instance of RepeatDirective.
+         * @param itemsBinding - The binding that provides the array to render.
+         * @param templateBinding - The template binding used to obtain a template to render for each item in the array.
+         * @param options - Options used to turn on special repeat features.
+         */
+        constructor(itemsBinding, templateBinding, options) {
+            super();
+            this.itemsBinding = itemsBinding;
+            this.templateBinding = templateBinding;
+            this.options = options;
+            /**
+             * Creates a placeholder string based on the directive's index within the template.
+             * @param index - The index of the directive within the template.
+             */
+            this.createPlaceholder = DOM.createBlockPlaceholder;
+            enableArrayObservation();
+            this.isItemsBindingVolatile = Observable.isVolatileBinding(itemsBinding);
+            this.isTemplateBindingVolatile = Observable.isVolatileBinding(templateBinding);
+        }
+        /**
+         * Creates a behavior for the provided target node.
+         * @param target - The node instance to create the behavior for.
+         */
+        createBehavior(target) {
+            return new RepeatBehavior(target, this.itemsBinding, this.isItemsBindingVolatile, this.templateBinding, this.isTemplateBindingVolatile, this.options);
+        }
+    }
+    /**
+     * A directive that enables list rendering.
+     * @param itemsBinding - The array to render.
+     * @param templateOrTemplateBinding - The template or a template binding used obtain a template
+     * to render for each item in the array.
+     * @param options - Options used to turn on special repeat features.
+     * @public
+     */
+    function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {
+        const templateBinding = typeof templateOrTemplateBinding === "function"
+            ? templateOrTemplateBinding
+            : () => templateOrTemplateBinding;
+        return new RepeatDirective(itemsBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
+    }
+
     /**
      * 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.
@@ -22047,7 +22808,17 @@ Instead styling against the role which is more general and likely a better appro
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
-    const template = html ``;
+    // prettier-ignore
+    const template = html `
+    <div>
+        <ul>
+            ${repeat(x => x.dies, html ` <li>
+                    ${x => html `dieX: ${x.x}, dieY: ${x.y}, value:
+                        ${x.value}%`}
+                </li>`)}
+        </ul>
+    </div>
+`;
 
     const styles = css ``;