@ni/nimble-components 27.0.4 → 27.1.0

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Fri, 26 Apr 2024 20:14:37 GMT
+   * Generated on Tue, 30 Apr 2024 21:12:32 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -63397,20 +63397,22 @@ img.ProseMirror-separator {
        */
       localeAwareCaseSensitive: 'localeAwareCaseSensitive'
   };
-  const groupIconSize = 16;
-  const sortIconSize = 16;
-  const spacing = 8;
-  const menuDropdownSize = 24;
+  const columnIconSize = 16; // `iconSize` token
+  const columnSpacing = 8; // `mediumPadding` token
+  const menuDropdownSize = 24; // `controlSlimHeight` token
   const oneCharPlusEllipsisSize = 21;
-  const defaultMinPixelWidth = spacing
+  const defaultMinPixelWidth = columnSpacing // left cell padding
       + oneCharPlusEllipsisSize
-      + spacing
-      + sortIconSize
-      + spacing
-      + groupIconSize
-      + spacing
+      + columnSpacing
+      + columnIconSize // sort icon
+      + columnSpacing
+      + columnIconSize // group icon
+      + columnSpacing
       + menuDropdownSize
-      + spacing;
+      + columnSpacing; // right cell padding
+  const singleIconColumnWidth = columnSpacing // left cell padding
+      + columnIconSize
+      + columnSpacing; // right cell padding
   const defaultFractionalWidth = 1;
 
   /**
@@ -63563,6 +63565,15 @@ img.ProseMirror-separator {
            * The minimum size in pixels according to the design doc
            */
           this.minPixelWidth = defaultMinPixelWidth;
+          /**
+           * Whether or not resizing the column has been disabled.
+           */
+          this.resizingDisabled = false;
+          /**
+           * Whether or not the grouping and sorting indicators should be hidden in the column header
+           * when the column is grouped or sorted.
+           */
+          this.hideHeaderIndicators = false;
           /**
            * @internal Do not write to this value directly. It is used by the Table in order to store
            * the resolved value of the fractionalWidth after updates programmatic or interactive updates.
@@ -63614,6 +63625,12 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], ColumnInternals.prototype, "minPixelWidth", void 0);
+  __decorate$1([
+      observable
+  ], ColumnInternals.prototype, "resizingDisabled", void 0);
+  __decorate$1([
+      observable
+  ], ColumnInternals.prototype, "hideHeaderIndicators", void 0);
   __decorate$1([
       observable
   ], ColumnInternals.prototype, "currentFractionalWidth", void 0);
@@ -63949,8 +63966,8 @@ img.ProseMirror-separator {
         border-color: ${borderHoverColor};
     }
 
-    .column-divider.column-active,
-    .header-container:hover .column-divider {
+    .column-divider.column-active.draggable,
+    .header-container:hover .column-divider.draggable {
         display: block;
     }
 
@@ -64057,28 +64074,31 @@ img.ProseMirror-separator {
         @mousedown="${(_x, c) => !(c.event.detail > 1)}"
     >
         <slot></slot>
-        ${'' /* Set aria-hidden="true" on sort indicators because aria-sort is set on the 1st sorted column */}
-        ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html `
-            <${iconArrowUpTag}
-                class="sort-indicator"
-                title="${x => tableColumnHeaderSortedAscendingLabel.getValueFor(x)}"
-                aria-hidden="true"
-            ></${iconArrowUpTag}>
-        `)}
-        ${when(x => x.sortDirection === TableColumnSortDirection.descending, html `
-            <${iconArrowDownTag}
-                class="sort-indicator"
-                title="${x => tableColumnHeaderSortedDescendingLabel.getValueFor(x)}"
-                aria-hidden="true"
-            ></${iconArrowDownTag}>
-        `)}
-        ${when(x => x.isGrouped, html `
-            <${iconTwoSquaresInBracketsTag}
-                class="grouped-indicator"
-                title="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
-                role="img"
-                aria-label="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
-            ></${iconTwoSquaresInBracketsTag}>
+
+        ${when(x => !x.indicatorsHidden, html `
+            ${'' /* Set aria-hidden="true" on sort indicators because aria-sort is set on the 1st sorted column */}
+            ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html `
+                <${iconArrowUpTag}
+                    class="sort-indicator"
+                    title="${x => tableColumnHeaderSortedAscendingLabel.getValueFor(x)}"
+                    aria-hidden="true"
+                ></${iconArrowUpTag}>
+            `)}
+            ${when(x => x.sortDirection === TableColumnSortDirection.descending, html `
+                <${iconArrowDownTag}
+                    class="sort-indicator"
+                    title="${x => tableColumnHeaderSortedDescendingLabel.getValueFor(x)}"
+                    aria-hidden="true"
+                ></${iconArrowDownTag}>
+            `)}
+            ${when(x => x.isGrouped, html `
+                <${iconTwoSquaresInBracketsTag}
+                    class="grouped-indicator"
+                    title="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
+                    role="img"
+                    aria-label="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
+                ></${iconTwoSquaresInBracketsTag}>
+            `)}
         `)}
     </template>
 `;
@@ -64092,6 +64112,7 @@ img.ProseMirror-separator {
           super(...arguments);
           this.sortDirection = TableColumnSortDirection.none;
           this.firstSortedColumn = false;
+          this.indicatorsHidden = false;
           this.isGrouped = false;
       }
       sortDirectionChanged(_prev, _next) {
@@ -64119,6 +64140,9 @@ img.ProseMirror-separator {
   __decorate$1([
       attr({ attribute: 'first-sorted-column', mode: 'boolean' })
   ], TableHeader.prototype, "firstSortedColumn", void 0);
+  __decorate$1([
+      attr({ attribute: 'indicators-hidden', mode: 'boolean' })
+  ], TableHeader.prototype, "indicatorsHidden", void 0);
   __decorate$1([
       observable
   ], TableHeader.prototype, "isGrouped", void 0);
@@ -65021,6 +65045,7 @@ img.ProseMirror-separator {
                                                 left
                                                 ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
                                                 ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getLeftDividerIndex(c.index) ? 'divider-active' : ''}`}
+                                                ${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index - 1) ? 'draggable' : ''}`}
                                             "
                                             @mousedown="${(_, c) => c.parent.onLeftDividerMouseDown(c.event, c.index)}">
                                         </div>
@@ -65029,6 +65054,7 @@ img.ProseMirror-separator {
                                             class="header"
                                             sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
                                             ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
+                                            ?indicators-hidden="${x => x.columnInternals.hideHeaderIndicators}"
                                             @click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
                                             :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
                                         >
@@ -65041,6 +65067,7 @@ img.ProseMirror-separator {
                                                 right
                                                 ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
                                                 ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getRightDividerIndex(c.index) ? 'divider-active' : ''}`}
+                                                ${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index) ? 'draggable' : ''}`}
                                             "
                                              @mousedown="${(_, c) => c.parent.onRightDividerMouseDown(c.event, c.index)}">
                                         </div>
@@ -65974,6 +66001,7 @@ img.ProseMirror-separator {
               this.isColumnBeingSized = false;
               this.activeColumnIndex = undefined;
               this.activeColumnDivider = undefined;
+              this.visibleColumns = [];
           };
       }
       getGridTemplateColumns() {
@@ -66009,6 +66037,18 @@ img.ProseMirror-separator {
           document.addEventListener('mousemove', this.onDividerMouseMove);
           document.addEventListener('mouseup', this.onDividerMouseUp);
       }
+      /**
+       * Determines if the specified column or any columns to the left are resizable.
+       */
+      hasResizableColumnToLeft(columnIndex) {
+          return this.getFirstLeftResizableColumnIndex(columnIndex) !== -1;
+      }
+      /**
+       * Determines if the specified column or any columns to the right are resizable.
+       */
+      hasResizableColumnToRight(columnIndex) {
+          return this.getFirstRightResizableColumnIndex(columnIndex) !== -1;
+      }
       getTotalColumnFixedWidth() {
           let totalColumnFixedWidth = 0;
           for (const column of this.visibleColumns) {
@@ -66029,49 +66069,112 @@ img.ProseMirror-separator {
           let availableSpace = 0;
           if (requestedResizeAmount > 0) {
               // size right
-              return requestedResizeAmount;
+              return this.hasResizableColumnToLeft(this.leftColumnIndex)
+                  ? requestedResizeAmount
+                  : 0;
           }
           // size left
-          let currentIndex = this.leftColumnIndex;
-          while (currentIndex >= 0) {
-              const columnInitialWidths = this.initialColumnWidths[currentIndex];
-              availableSpace
-                  += columnInitialWidths.initialPixelWidth
-                      - columnInitialWidths.minPixelWidth;
-              currentIndex -= 1;
+          if (!this.hasResizableColumnToRight(this.rightColumnIndex)) {
+              return 0;
+          }
+          for (let i = this.leftColumnIndex; i >= 0; i--) {
+              const columnInitialWidths = this.initialColumnWidths[i];
+              const column = this.visibleColumns[i];
+              if (!column.columnInternals.resizingDisabled) {
+                  availableSpace
+                      += columnInitialWidths.initialPixelWidth
+                          - column.columnInternals.minPixelWidth;
+              }
           }
           return Math.max(requestedResizeAmount, -availableSpace);
       }
+      /**
+       * Gets the index of the first resizable column starting with
+       * `columnIndex` and moving to the left. If no resizable column
+       * is found, returns -1.
+       */
+      getFirstLeftResizableColumnIndex(columnIndex) {
+          const visibleColumns = this.visibleColumns.length === 0
+              ? this.getVisibleColumns()
+              : this.visibleColumns;
+          for (let i = columnIndex; i >= 0; i--) {
+              const column = visibleColumns[i];
+              if (!column) {
+                  return -1;
+              }
+              if (!column.columnInternals.resizingDisabled) {
+                  return i;
+              }
+          }
+          return -1;
+      }
+      /**
+       * Gets the index of the first resizable column starting with
+       * `columnIndex` and moving to the right. If no resizable column
+       * is found, returns -1.
+       */
+      getFirstRightResizableColumnIndex(columnIndex) {
+          const visibleColumns = this.visibleColumns.length === 0
+              ? this.getVisibleColumns()
+              : this.visibleColumns;
+          for (let i = columnIndex; i < visibleColumns.length; i++) {
+              const column = visibleColumns[i];
+              if (!column) {
+                  return -1;
+              }
+              if (!column.columnInternals.resizingDisabled) {
+                  return i;
+              }
+          }
+          return -1;
+      }
       performCascadeSizeLeft(leftColumnIndex, delta) {
+          const firstLeftResizableColumn = this.getFirstLeftResizableColumnIndex(leftColumnIndex);
+          if (firstLeftResizableColumn === -1) {
+              return;
+          }
           let currentDelta = delta;
-          const leftColumnInitialWidths = this.initialColumnWidths[leftColumnIndex];
+          const leftColumn = this.visibleColumns[firstLeftResizableColumn];
+          const leftColumnInitialWidths = this.initialColumnWidths[firstLeftResizableColumn];
           const allowedDelta = delta < 0
-              ? Math.max(leftColumnInitialWidths.minPixelWidth
+              ? Math.max(leftColumn.columnInternals.minPixelWidth
                   - leftColumnInitialWidths.initialPixelWidth, currentDelta)
               : delta;
           const actualDelta = allowedDelta;
-          const leftColumn = this.visibleColumns[leftColumnIndex];
           leftColumn.columnInternals.currentPixelWidth += actualDelta;
-          if (actualDelta > currentDelta && leftColumnIndex > 0 && delta < 0) {
+          if (actualDelta > currentDelta
+              && firstLeftResizableColumn > 0
+              && delta < 0) {
               currentDelta -= allowedDelta;
-              this.performCascadeSizeLeft(leftColumnIndex - 1, currentDelta);
+              this.performCascadeSizeLeft(firstLeftResizableColumn - 1, currentDelta);
           }
       }
       performCascadeSizeRight(rightColumnIndex, delta) {
+          const firstRightResizableColumn = this.getFirstRightResizableColumnIndex(rightColumnIndex);
+          if (firstRightResizableColumn === -1) {
+              return;
+          }
           let currentDelta = delta;
-          const rightColumnInitialWidths = this.initialColumnWidths[rightColumnIndex];
-          const allowedDelta = delta > 0
-              ? Math.min(rightColumnInitialWidths.initialPixelWidth
-                  - rightColumnInitialWidths.minPixelWidth, currentDelta)
-              : delta;
+          const rightColumn = this.visibleColumns[firstRightResizableColumn];
+          const rightColumnInitialWidths = this.initialColumnWidths[firstRightResizableColumn];
+          let allowedDelta;
+          if (rightColumn.columnInternals.resizingDisabled) {
+              allowedDelta = 0;
+          }
+          else if (delta > 0) {
+              allowedDelta = Math.min(rightColumnInitialWidths.initialPixelWidth
+                  - rightColumn.columnInternals.minPixelWidth, currentDelta);
+          }
+          else {
+              allowedDelta = delta;
+          }
           const actualDelta = allowedDelta;
-          const rightColumn = this.visibleColumns[rightColumnIndex];
           rightColumn.columnInternals.currentPixelWidth -= actualDelta;
           if (actualDelta < currentDelta
-              && rightColumnIndex < this.visibleColumns.length - 1
+              && firstRightResizableColumn < this.visibleColumns.length - 1
               && delta > 0) {
               currentDelta -= allowedDelta;
-              this.performCascadeSizeRight(rightColumnIndex + 1, currentDelta);
+              this.performCascadeSizeRight(firstRightResizableColumn + 1, currentDelta);
           }
       }
       cacheGridSizedColumns() {
@@ -66087,8 +66190,7 @@ img.ProseMirror-separator {
           for (const column of this.visibleColumns) {
               this.initialColumnWidths.push({
                   initalColumnFractionalWidth: column.columnInternals.currentFractionalWidth,
-                  initialPixelWidth: column.columnInternals.currentPixelWidth,
-                  minPixelWidth: column.columnInternals.minPixelWidth
+                  initialPixelWidth: column.columnInternals.currentPixelWidth
               });
           }
       }
@@ -66215,7 +66317,7 @@ img.ProseMirror-separator {
               this.track('columnSort');
           }
           else if (isColumnProperty(changedColumnProperty, 'columnHidden')
-              || isColumnInternalsProperty(changedColumnProperty, 'currentFractionalWidth', 'currentPixelWidth', 'minPixelWidth')) {
+              || isColumnInternalsProperty(changedColumnProperty, 'currentFractionalWidth', 'currentPixelWidth', 'minPixelWidth', 'resizingDisabled')) {
               this.track('columnWidths');
           }
           else if (isColumnProperty(changedColumnProperty, 'actionMenuSlot')) {
@@ -69812,10 +69914,23 @@ img.ProseMirror-separator {
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconCellView());
   const tableColumnIconCellViewTag = 'nimble-table-column-icon-cell-view';
 
+  /**
+   * Width mode for the icon column
+   */
+  const TableColumnMappingWidthMode = {
+      default: undefined,
+      iconSize: 'icon-size'
+  };
+
   /**
    * Table column that maps values to icons / spinners
    */
   class TableColumnIcon extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumnEnumBase))) {
+      minPixelWidthChanged() {
+          if (this.widthMode !== TableColumnMappingWidthMode.iconSize) {
+              this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
+          }
+      }
       getColumnInternalsOptions() {
           return {
               cellRecordFieldNames: ['value'],
@@ -69845,7 +69960,30 @@ img.ProseMirror-separator {
           // this function from running when there is an unsupported mapping.
           throw new Error('Unsupported mapping');
       }
+      widthModeChanged() {
+          if (this.widthMode === TableColumnMappingWidthMode.iconSize) {
+              this.columnInternals.resizingDisabled = true;
+              this.columnInternals.hideHeaderIndicators = true;
+              this.columnInternals.pixelWidth = singleIconColumnWidth;
+              this.columnInternals.minPixelWidth = singleIconColumnWidth;
+          }
+          else {
+              this.columnInternals.resizingDisabled = false;
+              this.columnInternals.hideHeaderIndicators = false;
+              this.columnInternals.pixelWidth = undefined;
+              this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
+          }
+      }
+      getConfiguredMinPixelWidth() {
+          if (typeof this.minPixelWidth === 'number') {
+              return this.minPixelWidth;
+          }
+          return defaultMinPixelWidth;
+      }
   }
+  __decorate$1([
+      attr({ attribute: 'width-mode' })
+  ], TableColumnIcon.prototype, "widthMode", void 0);
   const nimbleTableColumnIcon = TableColumnIcon.compose({
       baseName: 'table-column-icon',
       template: template$8,