@ni/nimble-components 18.12.4 → 18.12.5

package/dist/all-components-bundle.js

@@ -16356,7 +16356,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Tue, 25 Apr 2023 17:52:52 GMT
+     * Generated on Tue, 25 Apr 2023 20:25:48 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -22934,7 +22934,7 @@
         }
     }
     registerIcon('icon-triangle-two-lines-horizontal', IconTriangleTwoLinesHorizontal);
-    DesignSystem.tagFor(IconTriangleTwoLinesHorizontal);
+    const iconTriangleTwoLinesHorizontalTag = DesignSystem.tagFor(IconTriangleTwoLinesHorizontal);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -22958,7 +22958,7 @@
         }
     }
     registerIcon('icon-two-squares-in-brackets', IconTwoSquaresInBrackets);
-    DesignSystem.tagFor(IconTwoSquaresInBrackets);
+    const iconTwoSquaresInBracketsTag = DesignSystem.tagFor(IconTwoSquaresInBrackets);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -27834,7 +27834,20 @@
          */
         localeAwareCaseSensitive: 'localeAwareCaseSensitive'
     };
-    const defaultMinPixelWidth = 88;
+    const groupIconSize = 16;
+    const sortIconSize = 16;
+    const spacing = 8;
+    const menuDropdownSize = 24;
+    const oneCharPlusEllipsisSize = 21;
+    const defaultMinPixelWidth = spacing
+        + oneCharPlusEllipsisSize
+        + spacing
+        + sortIconSize
+        + spacing
+        + groupIconSize
+        + spacing
+        + menuDropdownSize
+        + spacing;
     const defaultFractionalWidth = 1;
 
     /**
@@ -28194,6 +28207,7 @@
         width: fit-content;
         min-width: 100%;
         left: var(--ni-private-table-scroll-x);
+        align-items: center;
     }
 
     .column-header-container {
@@ -28202,6 +28216,17 @@
         grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
     }
 
+    .collapse-all-button {
+        width: ${controlSlimHeight};
+        height: ${controlSlimHeight};
+        margin-left: calc(${smallPadding} * 2);
+        visibility: hidden;
+    }
+
+    .collapse-all-button.visible {
+        visibility: visible;
+    }
+
     .header-scrollbar-spacer {
         width: var(--ni-private-table-header-scrollbar-spacer-width);
     }
@@ -28250,10 +28275,12 @@
         color: ${tableHeaderFontColor};
         ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};
         text-transform: uppercase;
+        gap: calc(${standardPadding} / 2);
     }
 
-    .sort-indicator {
-        padding: 0px calc(${standardPadding} / 2);
+    .sort-indicator,
+    .grouped-indicator {
+        flex: 0 0 auto;
     }
 `;
 
@@ -28268,6 +28295,9 @@
         ${when(x => x.sortDirection === TableColumnSortDirection.descending, html `
             <${iconArrowDownTag} class="sort-indicator" aria-hidden="true"></${iconArrowDownTag}>
         `)}
+        ${when(x => x.isGrouped, html `
+            <${iconTwoSquaresInBracketsTag} class="grouped-indicator"></${iconTwoSquaresInBracketsTag}>
+        `)}
     </template>
 `;
 
@@ -28280,6 +28310,7 @@
             super(...arguments);
             this.sortDirection = TableColumnSortDirection.none;
             this.firstSortedColumn = false;
+            this.isGrouped = false;
         }
         sortDirectionChanged(_prev, _next) {
             this.updateAriaSort();
@@ -28306,6 +28337,9 @@
     __decorate$1([
         attr({ attribute: 'first-sorted-column', mode: 'boolean' })
     ], TableHeader.prototype, "firstSortedColumn", void 0);
+    __decorate$1([
+        observable
+    ], TableHeader.prototype, "isGrouped", void 0);
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
         template: template$c,
@@ -28361,6 +28395,11 @@
         padding-left: 0px;
     }
 
+    .row-front-spacer {
+        width: ${controlHeight};
+        flex: 0 0 auto;
+    }
+
     .cell-container {
         display: grid;
         width: 100%;
@@ -28405,11 +28444,8 @@
         --ni-private-table-cell-nesting-level: 0;
         padding: 0px calc(${standardPadding} / 2);
         padding-left: calc(
-            ${standardPadding} / 2 +
-                (
-                    var(--ni-private-table-cell-nesting-level) *
-                        ${standardPadding} * 2
-                )
+            ${smallPadding} * 2 + ${standardPadding} * 2 *
+                var(--ni-private-table-cell-nesting-level)
         );
         align-self: center;
         height: 100%;
@@ -28510,6 +28546,9 @@
                 </${checkboxTag}>
             </span>
         `)}
+        ${'' /* This is needed to help align the cell widths exactly with the column headers, due to the space reserved for
+        the collapse-all button in the header. */}
+        <span class="row-front-spacer"></span>
 
         <span ${ref('cellContainer')} class="cell-container">
             ${repeat(x => x.columnStates, html `
@@ -28579,7 +28618,7 @@
                         columnConfig: {}
                     };
                 }
-                const cellIndentLevel = i === 0 ? this.nestingLevel : 0;
+                const cellIndentLevel = i === 0 && this.nestingLevel > 0 ? this.nestingLevel - 1 : 0;
                 return { column, cellState, cellIndentLevel };
             });
         }
@@ -28926,7 +28965,7 @@
             --ni-private-table-header-scrollbar-spacer-width: ${x => x.virtualizer.headerContainerMarginRight}px;
             --ni-private-table-scroll-height: ${x => x.virtualizer.allRowsHeight}px;
             --ni-private-table-row-container-top: ${x => x.virtualizer.rowContainerYOffset}px; 
-            --ni-private-table-row-grid-columns: ${x => x.rowGridColumns ?? ''}
+            --ni-private-table-row-grid-columns: ${x => x.rowGridColumns ?? ''};
             ">
             <div role="rowgroup" class="header-container">
                 <div class="header-row" role="row">
@@ -28940,7 +28979,16 @@
                             </${checkboxTag}>
                         </span>
                     `)}
-
+                    <span role="gridcell">
+                        <${buttonTag}
+                            class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
+                            content-hidden
+                            appearance="${ButtonAppearance.ghost}"
+                            @click="${x => x.handleCollapseAllGroupRows()}"
+                        >
+                            <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
+                        </${buttonTag}>
+                    </span>
                     <span class="column-header-container">
                         ${repeat(x => x.columns, html `
                             ${when(x => !x.columnHidden, html `
@@ -28948,6 +28996,7 @@
                                     class="header"
                                     sort-direction="${x => (typeof x.sortIndex === 'number' ? x.sortDirection : TableColumnSortDirection.none)}"
                                     ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
+                                    :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
                                 >
                                     <slot name="${x => x.slot}"></slot>
                                 </${tableHeaderTag}>
@@ -29977,6 +30026,10 @@
              * @internal
              */
             this.selectionState = TableRowSelectionState.notSelected;
+            /**
+             * @internal
+             */
+            this.showCollapseAll = false;
             this.tableValidator = new TableValidator();
             this.updateTracker = new UpdateTracker(this);
             this.columnNotifiers = [];
@@ -30196,6 +30249,15 @@
             }
         }
         /** @internal */
+        handleCollapseAllGroupRows() {
+            this.collapsedRows.clear();
+            this.table
+                .getRowModel()
+                .flatRows.filter(row => row.getIsGrouped())
+                .forEach(row => this.collapsedRows.add(row.id));
+            this.table.toggleAllRowsExpanded(false);
+        }
+        /** @internal */
         handleGroupRowExpanded(rowIndex, event) {
             this.toggleGroupExpanded(rowIndex);
             event.stopPropagation();
@@ -30214,6 +30276,9 @@
             if (this.updateTracker.updateColumnWidths) {
                 this.updateRowGridColumns();
             }
+            if (this.updateTracker.updateGroupRows) {
+                this.showCollapseAll = this.getColumnsParticipatingInGrouping().length > 0;
+            }
         }
         get ariaMultiSelectable() {
             switch (this.selectionMode) {
@@ -30595,6 +30660,9 @@
     __decorate$1([
         observable
     ], Table.prototype, "selectionCheckbox", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "showCollapseAll", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "firstSortedColumn", void 0);