@ni/nimble-components 18.13.2 → 18.13.4

package/dist/all-components-bundle.js

@@ -16366,7 +16366,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Fri, 05 May 2023 20:05:11 GMT
+     * Generated on Mon, 08 May 2023 13:48:08 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -16717,6 +16717,7 @@
     const keyEnter = "Enter";
     const keyEscape = "Escape";
     const keyHome = "Home";
+    const keyShift = "Shift";
     const keySpace = " ";
 
     /**
@@ -28062,6 +28063,12 @@
     __decorate$1([
         observable
     ], ColumnInternals.prototype, "currentPixelWidth", void 0);
+    __decorate$1([
+        observable
+    ], ColumnInternals.prototype, "currentSortIndex", void 0);
+    __decorate$1([
+        observable
+    ], ColumnInternals.prototype, "currentSortDirection", void 0);
 
     /**
      * The base class for table columns
@@ -28071,10 +28078,36 @@
             super();
             this.columnHidden = false;
             this.sortDirection = TableColumnSortDirection.none;
+            this.sortingDisabled = false;
             if (!options) {
                 throw new Error('ColumnInternalsOptions must be provided to constructor');
             }
             this.columnInternals = new ColumnInternals(options);
+            this.columnInternals.currentSortDirection = this.sortDirection;
+            this.columnInternals.currentSortIndex = this.sortIndex;
+        }
+        sortDirectionChanged() {
+            if (!this.sortingDisabled) {
+                this.columnInternals.currentSortDirection = this.sortDirection;
+            }
+        }
+        sortIndexChanged() {
+            if (!this.sortingDisabled) {
+                this.columnInternals.currentSortIndex = this.sortIndex;
+            }
+        }
+        sortingDisabledChanged() {
+            // Ignore the default value sortingDisabled initialization from undefined to false (which runs before columnInternals is initialized)
+            if (this.columnInternals) {
+                if (this.sortingDisabled) {
+                    this.columnInternals.currentSortDirection = TableColumnSortDirection.none;
+                    this.columnInternals.currentSortIndex = undefined;
+                }
+                else {
+                    this.columnInternals.currentSortDirection = this.sortDirection;
+                    this.columnInternals.currentSortIndex = this.sortIndex;
+                }
+            }
         }
     }
     __decorate$1([
@@ -28095,6 +28128,9 @@
     __decorate$1([
         attr({ attribute: 'sort-direction' })
     ], TableColumn.prototype, "sortDirection", void 0);
+    __decorate$1([
+        attr({ attribute: 'sorting-disabled', mode: 'boolean' })
+    ], TableColumn.prototype, "sortingDisabled", void 0);
 
     /**
      * Helper class for the nimble-table to validate that the table's configuration
@@ -28214,6 +28250,10 @@
         height: 480px;
     }
 
+    .disable-select {
+        ${userSelectNone}
+    }
+
     .table-container {
         overflow: hidden;
         display: flex;
@@ -28325,6 +28365,7 @@
         ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};
         text-transform: uppercase;
         gap: calc(${standardPadding} / 2);
+        cursor: default;
     }
 
     .sort-indicator,
@@ -28335,7 +28376,11 @@
 
     // prettier-ignore
     const template$d = html `
-    <template role="columnheader" aria-sort="${x => x.ariaSort}">
+    <template role="columnheader"
+        aria-sort="${x => x.ariaSort}"
+        ${'' /* Prevent header double clicks from selecting text */}
+        @mousedown="${(_x, c) => !(c.event.detail > 1)}"
+    >
         <slot></slot>
 
         ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html `
@@ -29016,7 +29061,8 @@
         aria-multiselectable="${x => x.ariaMultiSelectable}"
         ${children$1({ property: 'childItems', filter: elements() })}
     >
-        <div class="table-container" style="
+        <div class="table-container ${x => (x.documentShiftKeyDown ? 'disable-select' : '')}"
+            style="
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
             --ni-private-table-header-scrollbar-spacer-width: ${x => x.virtualizer.headerContainerMarginRight}px;
             --ni-private-table-scroll-height: ${x => x.virtualizer.allRowsHeight}px;
@@ -29050,8 +29096,9 @@
                             ${when(x => !x.columnHidden, html `
                                 <${tableHeaderTag}
                                     class="header"
-                                    sort-direction="${x => (typeof x.sortIndex === 'number' ? x.sortDirection : TableColumnSortDirection.none)}"
+                                    sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
                                     ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
+                                    @click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
                                     :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
                                 >
                                     <slot name="${x => x.slot}"></slot>
@@ -29971,7 +30018,8 @@
             else if (isColumnInternalsProperty(changedColumnProperty, 'operandDataRecordFieldName', 'sortOperation')) {
                 this.requiredUpdates.columnDefinition = true;
             }
-            else if (isColumnProperty(changedColumnProperty, 'sortIndex', 'sortDirection')) {
+            else if (isColumnProperty(changedColumnProperty, 'sortingDisabled')
+                || isColumnInternalsProperty(changedColumnProperty, 'currentSortDirection', 'currentSortIndex')) {
                 this.requiredUpdates.columnSort = true;
             }
             else if (isColumnProperty(changedColumnProperty, 'columnHidden')
@@ -30086,6 +30134,10 @@
              * @internal
              */
             this.showCollapseAll = false;
+            /**
+             * @internal
+             */
+            this.documentShiftKeyDown = false;
             this.tableValidator = new TableValidator();
             this.updateTracker = new UpdateTracker(this);
             this.columnNotifiers = [];
@@ -30099,6 +30151,16 @@
             this.onViewPortScroll = (event) => {
                 this.scrollX = event.target.scrollLeft;
             };
+            this.onKeyDown = (event) => {
+                if (event.key === keyShift) {
+                    this.documentShiftKeyDown = true;
+                }
+            };
+            this.onKeyUp = (event) => {
+                if (event.key === keyShift) {
+                    this.documentShiftKeyDown = false;
+                }
+            };
             this.getIsRowExpanded = (row) => {
                 if (!row.getIsGrouped()) {
                     return false;
@@ -30213,11 +30275,15 @@
             this.viewport.addEventListener('scroll', this.onViewPortScroll, {
                 passive: true
             });
+            document.addEventListener('keydown', this.onKeyDown);
+            document.addEventListener('keyup', this.onKeyUp);
         }
         disconnectedCallback() {
             super.disconnectedCallback();
             this.virtualizer.disconnectedCallback();
             this.viewport.removeEventListener('scroll', this.onViewPortScroll);
+            document.removeEventListener('keydown', this.onKeyDown);
+            document.removeEventListener('keyup', this.onKeyUp);
         }
         checkValidity() {
             return this.tableValidator.isValid();
@@ -30294,6 +30360,47 @@
             this.toggleGroupExpanded(rowIndex);
             event.stopPropagation();
         }
+        /**
+         * @internal
+         */
+        toggleColumnSort(column, allowMultiSort) {
+            if (column.sortingDisabled) {
+                return;
+            }
+            const allSortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.columnInternals.currentSortIndex
+                - y.columnInternals.currentSortIndex);
+            const columnIndex = allSortedColumns.indexOf(column);
+            const columnAlreadySorted = columnIndex > -1;
+            const oldSortDirection = column.columnInternals.currentSortDirection;
+            let newSortDirection = TableColumnSortDirection.ascending;
+            if (columnAlreadySorted) {
+                if (oldSortDirection === TableColumnSortDirection.descending) {
+                    allSortedColumns.splice(columnIndex, 1);
+                    newSortDirection = TableColumnSortDirection.none;
+                    column.columnInternals.currentSortIndex = undefined;
+                }
+                else {
+                    newSortDirection = TableColumnSortDirection.descending;
+                }
+            }
+            else {
+                allSortedColumns.push(column);
+            }
+            column.columnInternals.currentSortDirection = newSortDirection;
+            for (let i = 0; i < allSortedColumns.length; i++) {
+                const currentColumn = allSortedColumns[i];
+                if (allowMultiSort) {
+                    allSortedColumns[i].columnInternals.currentSortIndex = i;
+                }
+                else if (currentColumn === column) {
+                    currentColumn.columnInternals.currentSortIndex = 0;
+                }
+                else {
+                    currentColumn.columnInternals.currentSortIndex = undefined;
+                    currentColumn.columnInternals.currentSortDirection = TableColumnSortDirection.none;
+                }
+            }
+        }
         /**
          * @internal
          */
@@ -30408,8 +30515,10 @@
             }
         }
         getColumnsParticipatingInSorting() {
-            return this.columns.filter(x => x.sortDirection !== TableColumnSortDirection.none
-                && typeof x.sortIndex === 'number');
+            return this.columns.filter(x => !x.sortingDisabled
+                && x.columnInternals.currentSortDirection
+                    !== TableColumnSortDirection.none
+                && typeof x.columnInternals.currentSortIndex === 'number');
         }
         getColumnsParticipatingInGrouping() {
             return this.columns.filter(x => !x.columnInternals.groupingDisabled
@@ -30469,7 +30578,7 @@
         validate() {
             this.tableValidator.validateSelectionMode(this.selectionMode, this.idFieldName);
             this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
-            this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.sortIndex));
+            this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.columnInternals.currentSortIndex));
             this.tableValidator.validateColumnGroupIndices(this.getColumnsParticipatingInGrouping().map(x => x.columnInternals.groupIndex));
             this.validateWithData(this.table.options.data);
         }
@@ -30633,14 +30742,16 @@
             row.toggleExpanded();
         }
         calculateTanStackSortState() {
-            const sortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.sortIndex - y.sortIndex);
+            const sortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.columnInternals.currentSortIndex
+                - y.columnInternals.currentSortIndex);
             this.firstSortedColumn = sortedColumns.length
                 ? sortedColumns[0]
                 : undefined;
             return sortedColumns.map(column => {
                 return {
                     id: column.columnInternals.uniqueId,
-                    desc: column.sortDirection === TableColumnSortDirection.descending
+                    desc: column.columnInternals.currentSortDirection
+                        === TableColumnSortDirection.descending
                 };
             });
         }
@@ -30729,6 +30840,9 @@
     __decorate$1([
         observable
     ], Table.prototype, "firstSortedColumn", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "documentShiftKeyDown", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
         template: template$9,