@ni/nimble-components 29.8.0 → 29.8.1

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 17:27:02 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -64560,6 +64560,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 +64795,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 +64863,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 +65278,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 +65308,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 +65353,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 +65384,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);
@@ -66432,6 +66460,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>
@@ -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([