@ni/nimble-components 29.8.0 → 29.8.2

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 10 Jul 2024 16:10:17 GMT
+   * Generated on Thu, 11 Jul 2024 21:51:38 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16755,7 +16755,6 @@
   const keyFunction2 = "F2";
   const keyPageDown = "PageDown";
   const keyPageUp = "PageUp";
-  const keyShift = "Shift";
   const keySpace = " ";
   const keyTab = "Tab";
 
@@ -64560,6 +64559,15 @@ img.ProseMirror-separator {
       selected: 'selected',
       partiallySelected: 'partially-selected'
   };
+  /**
+   * @internal
+   *
+   * Alignment of column content
+   */
+  const TableColumnAlignment = {
+      left: 'left',
+      right: 'right'
+  };
   /**
    * Table keyboard focus types
    */
@@ -64786,6 +64794,10 @@ img.ProseMirror-separator {
            * when the column is grouped or sorted.
            */
           this.hideHeaderIndicators = false;
+          /**
+           * How to align the header content.
+           */
+          this.headerAlignment = TableColumnAlignment.left;
           /**
            * @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.
@@ -64850,6 +64862,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], ColumnInternals.prototype, "hideHeaderIndicators", void 0);
+  __decorate$1([
+      observable
+  ], ColumnInternals.prototype, "headerAlignment", void 0);
   __decorate$1([
       observable
   ], ColumnInternals.prototype, "currentFractionalWidth", void 0);
@@ -65262,15 +65277,22 @@ focus outline in that case.
     :host {
         height: ${controlHeight};
         align-items: center;
-        padding: 0px ${mediumPadding};
+        padding-left: ${mediumPadding};
+        padding-right: ${smallPadding};
         font: ${tableHeaderFont};
         color: ${tableHeaderFontColor};
         ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};
         text-transform: uppercase;
-        gap: ${mediumPadding};
+        gap: ${smallPadding};
         cursor: default;
     }
 
+    :host(.right-align) {
+        flex-direction: row-reverse;
+        padding-left: ${smallPadding};
+        padding-right: ${mediumPadding};
+    }
+
     :host(${focusVisible}) {
         outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};
         outline-offset: calc(-2 * ${borderWidth});
@@ -65285,6 +65307,7 @@ focus outline in that case.
   // prettier-ignore
   const template$k = html `
     <template role="columnheader"
+        class="${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}"
         aria-sort="${x => x.ariaSort}"
         ${'' /* Prevent header double clicks from selecting text */}
         @mousedown="${(_x, c) => !(c.event.detail > 1)}"
@@ -65329,6 +65352,7 @@ focus outline in that case.
           this.sortDirection = TableColumnSortDirection.none;
           this.firstSortedColumn = false;
           this.indicatorsHidden = false;
+          this.alignment = TableColumnAlignment.left;
           this.isGrouped = false;
       }
       sortDirectionChanged(_prev, _next) {
@@ -65359,6 +65383,9 @@ focus outline in that case.
   __decorate$1([
       attr({ attribute: 'indicators-hidden', mode: 'boolean' })
   ], TableHeader.prototype, "indicatorsHidden", void 0);
+  __decorate$1([
+      observable
+  ], TableHeader.prototype, "alignment", void 0);
   __decorate$1([
       observable
   ], TableHeader.prototype, "isGrouped", void 0);
@@ -66361,7 +66388,7 @@ focus outline in that case.
         aria-multiselectable="${x => x.ariaMultiSelectable}"
         ${children$1({ property: 'childItems', filter: elements() })}
     >
-        <div class="table-container ${x => (x.documentShiftKeyDown ? 'disable-select' : '')}"
+        <div class="table-container ${x => (x.windowShiftKeyDown ? 'disable-select' : '')}"
             style="
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
             --ni-private-table-header-container-margin-right: ${x => x.virtualizer.headerContainerMarginRight}px;
@@ -66432,6 +66459,7 @@ focus outline in that case.
                                             ?indicators-hidden="${x => x.columnInternals.hideHeaderIndicators}"
                                             @keydown="${(x, c) => c.parent.onHeaderKeyDown(x, c.event)}"
                                             @click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
+                                            :alignment="${x => x.columnInternals.headerAlignment}"
                                             :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
                                         >
                                             <slot name="${x => x.slot}"></slot>
@@ -69498,7 +69526,7 @@ focus outline in that case.
            * space through a column resize operation.
            */
           this.tableScrollableMinWidth = 0;
-          this.documentShiftKeyDown = false;
+          this.windowShiftKeyDown = false;
           this.tableValidator = new TableValidator();
           this.tableUpdateTracker = new TableUpdateTracker(this);
           this.columnNotifiers = [];
@@ -69515,14 +69543,13 @@ focus outline in that case.
               this.scrollX = event.target.scrollLeft;
           };
           this.onKeyDown = (event) => {
-              if (event.key === keyShift) {
-                  this.documentShiftKeyDown = true;
-              }
+              this.windowShiftKeyDown = event.shiftKey;
           };
           this.onKeyUp = (event) => {
-              if (event.key === keyShift) {
-                  this.documentShiftKeyDown = false;
-              }
+              this.windowShiftKeyDown = event.shiftKey;
+          };
+          this.onBlur = () => {
+              this.windowShiftKeyDown = false;
           };
           this.getRowCanExpand = (row) => {
               return this.expansionManager.isRowExpandable(row);
@@ -69620,16 +69647,18 @@ focus outline in that case.
               passive: true
           });
           this.keyboardNavigationManager.connect();
-          document.addEventListener('keydown', this.onKeyDown);
-          document.addEventListener('keyup', this.onKeyUp);
+          window.addEventListener('keydown', this.onKeyDown);
+          window.addEventListener('keyup', this.onKeyUp);
+          window.addEventListener('blur', this.onBlur);
       }
       disconnectedCallback() {
           super.disconnectedCallback();
           this.virtualizer.disconnect();
           this.keyboardNavigationManager.disconnect();
           this.viewport.removeEventListener('scroll', this.onViewPortScroll);
-          document.removeEventListener('keydown', this.onKeyDown);
-          document.removeEventListener('keyup', this.onKeyUp);
+          window.removeEventListener('keydown', this.onKeyDown);
+          window.removeEventListener('keyup', this.onKeyUp);
+          window.removeEventListener('blur', this.onBlur);
       }
       checkValidity() {
           return this.tableValidator.isValid();
@@ -69662,7 +69691,7 @@ focus outline in that case.
       /** @internal */
       onRowSelectionToggle(rowIndex, event) {
           event.stopImmediatePropagation();
-          const selectionChanged = this.selectionManager.handleRowSelectionToggle(this.tableData[rowIndex], event.detail.newState, this.documentShiftKeyDown);
+          const selectionChanged = this.selectionManager.handleRowSelectionToggle(this.tableData[rowIndex], event.detail.newState, this.windowShiftKeyDown);
           if (selectionChanged) {
               void this.emitSelectionChangeEvent();
           }
@@ -70338,7 +70367,7 @@ focus outline in that case.
   ], Table$1.prototype, "tableScrollableMinWidth", void 0);
   __decorate$1([
       observable
-  ], Table$1.prototype, "documentShiftKeyDown", void 0);
+  ], Table$1.prototype, "windowShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
       baseName: 'table',
       template: template$g,
@@ -70903,19 +70932,11 @@ focus outline in that case.
       .register(tableColumnDateTextGroupHeaderView());
   const tableColumnDateTextGroupHeaderViewTag = 'nimble-table-column-date-text-group-header-view';
 
-  /**
-   * The aligment of the value in a TableColumnTextCellViewBase instance.
-   */
-  const TextCellViewBaseAlignment = {
-      left: 'left',
-      right: 'right'
-  };
-
   // prettier-ignore
   const template$c = html `
     <template
         class="
-            ${x => (x.alignment === TextCellViewBaseAlignment.right ? 'right-align' : '')}
+            ${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}
             ${x => (x.isPlaceholder ? 'placeholder' : '')}
         "
     >
@@ -70968,7 +70989,7 @@ focus outline in that case.
           /**
            * The alignment of the text within the cell.
            */
-          this.alignment = TextCellViewBaseAlignment.left;
+          this.alignment = TableColumnAlignment.left;
           /**
            * Whether or not the text being displayed in the cell view is a placeholder.
            */
@@ -72256,7 +72277,7 @@ focus outline in that case.
   class TableColumnNumberTextCellView extends TableColumnTextCellViewBase {
       columnConfigChanged() {
           super.columnConfigChanged();
-          this.alignment = this.columnConfig?.alignment ?? TextCellViewBaseAlignment.left;
+          this.alignment = this.columnConfig?.alignment ?? TableColumnAlignment.left;
       }
       updateText() {
           this.text = this.columnConfig?.formatter?.format(this.cellRecord?.value) ?? '';
@@ -72749,6 +72770,7 @@ focus outline in that case.
                   alignment: this.determineCellContentAlignment(),
                   placeholder: this.placeholder
               };
+              this.columnInternals.headerAlignment = columnConfig.alignment;
               this.columnInternals.columnConfig = columnConfig;
           }
           else {
@@ -72768,18 +72790,18 @@ focus outline in that case.
       }
       determineCellContentAlignment() {
           if (this.alignment === NumberTextAlignment.left) {
-              return TextCellViewBaseAlignment.left;
+              return TableColumnAlignment.left;
           }
           if (this.alignment === NumberTextAlignment.right) {
-              return TextCellViewBaseAlignment.right;
+              return TableColumnAlignment.right;
           }
           // Look at format and decimal max digits and unit to determine the default alignment
           if (this.format === NumberTextFormat.decimal
               && typeof this.decimalMaximumDigits !== 'number'
               && !this.unit) {
-              return TextCellViewBaseAlignment.right;
+              return TableColumnAlignment.right;
           }
-          return TextCellViewBaseAlignment.left;
+          return TableColumnAlignment.left;
       }
   }
   __decorate$1([