@ni/nimble-components 18.12.1 → 18.12.3

package/dist/all-components-bundle.js

@@ -14949,24 +14949,6 @@
     ], TreeItem$1.prototype, "renderCollapsedChildren", void 0);
     applyMixins(TreeItem$1, StartEnd);
 
-    /**
-     * The template for the {@link @microsoft/fast-foundation#TreeView} component.
-     * @public
-     */
-    const treeViewTemplate = (context, definition) => html `
-    <template
-        role="tree"
-        ${ref("treeView")}
-        @keydown="${(x, c) => x.handleKeyDown(c.event)}"
-        @focusin="${(x, c) => x.handleFocus(c.event)}"
-        @focusout="${(x, c) => x.handleBlur(c.event)}"
-        @click="${(x, c) => x.handleClick(c.event)}"
-        @selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
-    >
-        <slot ${slotted("slottedTreeItems")}></slot>
-    </template>
-`;
-
     /**
      * A Tree view Custom HTML Element.
      * Implements the {@link https://w3c.github.io/aria-practices/#TreeView | ARIA TreeView }.
@@ -16374,7 +16356,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Thu, 20 Oct 2022 19:57:29 GMT
+     * Generated on Fri, 21 Apr 2023 15:58:04 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -16744,7 +16726,7 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$q = html `<slot></slot>`;
+    const template$r = html `<slot></slot>`;
 
     const styles$O = css `
     :host {
@@ -16803,7 +16785,7 @@
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
         styles: styles$O,
-        template: template$q
+        template: template$r
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -17070,7 +17052,7 @@
 `;
 
     // prettier-ignore
-    const template$p = (context, definition) => html `
+    const template$q = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17144,7 +17126,7 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$p,
+        template: template$q,
         styles: styles$N,
         shadowOptions: {
             delegatesFocus: true
@@ -17521,7 +17503,7 @@
     }
 `;
 
-    const template$o = (context, definition) => html `
+    const template$p = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17603,7 +17585,7 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$o,
+        template: template$p,
         styles: styles$L,
         shadowOptions: {
             delegatesFocus: true
@@ -17689,7 +17671,7 @@
     }
 `;
 
-    const template$n = (context, definition) => html `
+    const template$o = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17795,7 +17777,7 @@
     // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchorMenuItem = AnchorMenuItem.compose({
         baseName: 'anchor-menu-item',
-        template: template$n,
+        template: template$o,
         styles: styles$K,
         shadowOptions: {
             delegatesFocus: true
@@ -17945,7 +17927,7 @@
     }
 `;
 
-    const template$m = (context, definition) => html `
+    const template$n = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17998,7 +17980,7 @@
     // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchorTab = AnchorTab.compose({
         baseName: 'anchor-tab',
-        template: template$m,
+        template: template$n,
         styles: styles$I
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
@@ -18022,7 +18004,7 @@
     }
 `;
 
-    const template$l = (context, definition) => html `
+    const template$m = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18219,7 +18201,7 @@
     applyMixins(AnchorTabs, StartEnd);
     const nimbleAnchorTabs = AnchorTabs.compose({
         baseName: 'anchor-tabs',
-        template: template$l,
+        template: template$m,
         styles: styles$H,
         shadowOptions: {
             delegatesFocus: false
@@ -18332,7 +18314,7 @@
     }
 `;
 
-    const template$k = (context, definition) => html `
+    const template$l = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18469,7 +18451,7 @@
     // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
     const nimbleAnchorTreeItem = AnchorTreeItem.compose({
         baseName: 'anchor-tree-item',
-        template: template$k,
+        template: template$l,
         styles: styles$G,
         shadowOptions: {
             delegatesFocus: true
@@ -19427,7 +19409,7 @@
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026 4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363Zm1.155-10.68-1.321-1.32-2.312 2.311-2.311-2.311-1.321 1.32 2.311 2.312L1.923 7.97l1.32 1.32 2.312-2.31 2.312 2.31 1.32-1.32-2.31-2.312Z"/></svg>`
     };
 
-    const template$j = html `
+    const template$k = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
@@ -19486,7 +19468,7 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$j,
+            template: template$k,
             styles: styles$C,
             baseClass: iconClass
         });
@@ -19553,7 +19535,7 @@
     };
 
     // prettier-ignore
-    const template$i = html `
+    const template$j = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19672,7 +19654,7 @@
     applyMixins(Banner, ARIAGlobalStatesAndProperties);
     const nimbleBanner = Banner.compose({
         baseName: 'banner',
-        template: template$i,
+        template: template$j,
         styles: styles$E
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
@@ -20127,7 +20109,7 @@
     }
 `;
 
-    const template$h = (context, definition) => html `
+    const template$i = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20202,7 +20184,7 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$h,
+        template: template$i,
         styles: styles$x,
         shadowOptions: {
             delegatesFocus: true
@@ -20904,7 +20886,7 @@
             }
         `));
 
-    const template$g = html `
+    const template$h = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21030,7 +21012,7 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$g,
+        template: template$h,
         styles: styles$t,
         baseClass: Dialog
     });
@@ -21190,7 +21172,7 @@
             }
         `));
 
-    const template$f = html `
+    const template$g = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21304,7 +21286,7 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$f,
+        template: template$g,
         styles: styles$s
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -23310,7 +23292,7 @@
 `;
 
     // prettier-ignore
-    const template$e = html `
+    const template$f = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -23565,7 +23547,7 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$e,
+        template: template$f,
         styles: styles$p,
         shadowOptions: {
             delegatesFocus: true
@@ -24330,7 +24312,7 @@
             }
         `));
 
-    const template$d = html `
+    const template$e = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -24347,7 +24329,7 @@
     }
     const nimbleSpinner = Spinner.compose({
         baseName: 'spinner',
-        template: template$d,
+        template: template$e,
         styles: styles$j
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
@@ -24516,7 +24498,7 @@
         `));
 
     // prettier-ignore
-    const template$c = html `
+    const template$d = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -24560,7 +24542,7 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$c,
+        template: template$d,
         styles: styles$i
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
@@ -28316,7 +28298,7 @@
 `;
 
     // prettier-ignore
-    const template$b = html `
+    const template$c = html `
     <template role="columnheader" aria-sort="${x => x.ariaSort}">
         <slot></slot>
 
@@ -28366,7 +28348,7 @@
     ], TableHeader.prototype, "firstSortedColumn", void 0);
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
-        template: template$b,
+        template: template$c,
         styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
@@ -28451,7 +28433,7 @@
 `;
 
     // prettier-ignore
-    const template$a = html `
+    const template$b = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}">
         ${x => x.cellViewTemplate}
         ${when(x => x.hasActionMenu, html `
@@ -28510,14 +28492,14 @@
     ], TableCell.prototype, "nestingLevel", void 0);
     const nimbleTableCell = TableCell.compose({
         baseName: 'table-cell',
-        template: template$a,
+        template: template$b,
         styles: styles$d
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
     const tableCellTag = DesignSystem.tagFor(TableCell);
 
     // prettier-ignore
-    const template$9 = html `
+    const template$a = html `
     <template role="row" aria-selected=${x => x.ariaSelected}>
         ${when(x => x.selectable && !x.hideSelection, html `
             <span role="gridcell" class="checkbox-container">
@@ -28701,7 +28683,7 @@
     ], TableRow.prototype, "ariaSelected", null);
     const nimbleTableRow = TableRow.compose({
         baseName: 'table-row',
-        template: template$9,
+        template: template$a,
         styles: styles$e
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
@@ -28782,7 +28764,7 @@
 
     /* eslint-disable @typescript-eslint/indent */
     // prettier-ignore
-    const template$8 = html `
+    const template$9 = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -28911,14 +28893,14 @@
     ], TableGroupRow.prototype, "animationClass", void 0);
     const nimbleTableGroupRow = TableGroupRow.compose({
         baseName: 'table-group-row',
-        template: template$8,
+        template: template$9,
         styles: styles$c
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
     const tableGroupRowTag = DesignSystem.tagFor(TableGroupRow);
 
     // prettier-ignore
-    const template$7 = html `
+    const template$8 = html `
     <template
         role="grid"
         aria-multiselectable="${x => x.ariaMultiSelectable}"
@@ -30603,7 +30585,7 @@
     ], Table.prototype, "firstSortedColumn", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
-        template: template$7,
+        template: template$8,
         styles: styles$g
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
@@ -30621,7 +30603,7 @@
     }
 `;
 
-    const template$6 = html `
+    const template$7 = html `
     <template slot="${x => x.columnInternals.uniqueId}">
         <span class="header-content">
             <slot></slot>
@@ -30697,7 +30679,7 @@
         return GroupableColumn;
     }
 
-    const template$5 = html `
+    const template$6 = html `
     <span
         ${ref('textSpan')}
         class="${x => (typeof x.groupHeaderValue === 'string' ? '' : 'placeholder')}"
@@ -30755,7 +30737,7 @@
     ], TableColumnTextGroupHeaderView.prototype, "content", null);
     const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
         baseName: 'table-column-text-group-header',
-        template: template$5,
+        template: template$6,
         styles: styles$a
     });
     DesignSystem.getOrCreate()
@@ -30777,7 +30759,7 @@
     }
 `;
 
-    const template$4 = html `
+    const template$5 = html `
     <span
         ${ref('textSpan')}
         class="${x => (typeof x.cellRecord.value === 'string' ? '' : 'placeholder')}"
@@ -30816,7 +30798,7 @@
     ], TableColumnTextCellView.prototype, "content", null);
     const textCellView = TableColumnTextCellView.compose({
         baseName: 'table-column-text-cell-view',
-        template: template$4,
+        template: template$5,
         styles: styles$9
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
@@ -30852,7 +30834,7 @@
     ], TableColumnText.prototype, "placeholder", void 0);
     const nimbleTableColumnText = TableColumnText.compose({
         baseName: 'table-column-text',
-        template: template$6,
+        template: template$7,
         styles: styles$b
     });
     DesignSystem.getOrCreate()
@@ -30924,7 +30906,7 @@
     }
 `;
 
-    const template$3 = html `
+    const template$4 = html `
     <template slot="end">
         <div class="separator"></div>
         <slot></slot>
@@ -30938,7 +30920,7 @@
     }
     const nimbleTabsToolbar = TabsToolbar.compose({
         baseName: 'tabs-toolbar',
-        template: template$3,
+        template: template$4,
         styles: styles$7
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
@@ -31114,7 +31096,7 @@
             }
         `));
 
-    const template$2 = () => html `
+    const template$3 = () => html `
     <label
         part="label"
         for="control"
@@ -31276,7 +31258,7 @@
     const nimbleTextArea = TextArea.compose({
         baseName: 'text-area',
         baseClass: TextArea$1,
-        template: template$2,
+        template: template$3,
         styles: styles$6,
         shadowOptions: {
             delegatesFocus: true
@@ -31710,7 +31692,7 @@
         `));
 
     // prettier-ignore
-    const template$1 = html `
+    const template$2 = html `
             ${when(x => x.tooltipVisible, html `
             <${anchoredRegionTag}
                 class="anchored-region"
@@ -31762,7 +31744,7 @@
     const nimbleTooltip = Tooltip.compose({
         baseName: 'tooltip',
         baseClass: Tooltip$1,
-        template: template$1,
+        template: template$2,
         styles: styles$3
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
@@ -32055,52 +32037,15 @@
     class TreeItem extends TreeItem$1 {
         constructor() {
             super(...arguments);
-            this.treeView = null;
-            // This prevents the toggling of selected state when a TreeItem is clicked multiple times,
-            // which is what the FAST TreeItem allows
-            this.handleSelectedChange = (event) => {
-                // only process selection
-                if (event.target === this && this.selected) {
-                    this.setGroupSelectionOnRootParentTreeItem(this);
-                }
-            };
-        }
-        connectedCallback() {
-            super.connectedCallback();
-            this.addEventListener('selected-change', this.handleSelectedChange);
-            this.treeView = this.getParentTreeView();
-            if (this.treeView && this.selected) {
-                this.setGroupSelectionOnRootParentTreeItem(this);
-            }
-        }
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            this.removeEventListener('selected-change', this.handleSelectedChange);
-            this.treeView = null;
-        }
-        clearTreeGroupSelection() {
-            const currentGroupSelection = this.treeView?.querySelectorAll(`[${groupSelectedAttribute}]`);
-            currentGroupSelection?.forEach(treeItem => treeItem.removeAttribute(groupSelectedAttribute));
-        }
-        setGroupSelectionOnRootParentTreeItem(treeItem) {
-            this.clearTreeGroupSelection();
-            let currentItem = treeItem;
-            while (currentItem?.parentElement !== this.treeView) {
-                currentItem = currentItem?.parentElement;
-            }
-            if (currentItem) {
-                currentItem.setAttribute(groupSelectedAttribute, 'true');
-            }
-        }
-        /**
-         * This was copied directly from the FAST TreeItem implementation
-         * @returns the root tree view
-         */
-        getParentTreeView() {
-            const parentNode = this.parentElement.closest("[role='tree']");
-            return parentNode;
+            /**
+             * @internal
+             */
+            this.groupSelected = false;
         }
     }
+    __decorate$1([
+        attr({ attribute: 'group-selected', mode: 'boolean' })
+    ], TreeItem.prototype, "groupSelected", void 0);
     const nimbleTreeItem = TreeItem.compose({
         baseName: 'tree-item',
         baseClass: TreeItem$1,
@@ -32125,6 +32070,22 @@
     }
 `;
 
+    // prettier-ignore
+    const template$1 = html `
+    <template
+        role="tree"
+        ${ref('treeView')}
+        ${children$1({ property: 'selectedItems', subtree: true, selector: '[role="treeitem"][selected]', attributeFilter: ['role', 'selected'] })}
+        @keydown="${(x, c) => x.handleKeyDown(c.event)}"
+        @focusin="${(x, c) => x.handleFocus(c.event)}"
+        @focusout="${(x, c) => x.handleBlur(c.event)}"
+        @click="${(x, c) => x.handleClick(c.event)}"
+        @selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
+    >
+        <slot ${slotted('slottedTreeItems')}></slot>
+    </template>
+`;
+
     /**
      * A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
      * Implements {@link @microsoft/fast-foundation#treeViewTemplate}
@@ -32139,6 +32100,10 @@
         constructor() {
             super(...arguments);
             this.selectionMode = TreeViewSelectionMode.all;
+            /**
+             * @internal
+             */
+            this.selectedItems = [];
         }
         handleClick(e) {
             if (e.defaultPrevented) {
@@ -32177,14 +32142,32 @@
             const treeItemChild = item.querySelector('[role="treeitem"]');
             return treeItemChild !== null;
         }
+        selectedItemsChanged() {
+            for (const item of Array.from(this.children)) {
+                if (item instanceof TreeItem) {
+                    item.groupSelected = false;
+                }
+            }
+            for (let item of this.selectedItems) {
+                while (item.parentElement !== null && item.parentElement !== this) {
+                    item = item.parentElement;
+                }
+                if (item instanceof TreeItem) {
+                    item.groupSelected = true;
+                }
+            }
+        }
     }
     __decorate$1([
         attr({ attribute: 'selection-mode' })
     ], TreeView.prototype, "selectionMode", void 0);
+    __decorate$1([
+        observable
+    ], TreeView.prototype, "selectedItems", void 0);
     const nimbleTreeView = TreeView.compose({
         baseName: 'tree-view',
         baseClass: TreeView$1,
-        template: treeViewTemplate,
+        template: template$1,
         styles: styles$1
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());