@ni/nimble-components 19.0.0 → 19.0.2

package/dist/all-components-bundle.js

@@ -16366,7 +16366,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Fri, 12 May 2023 17:46:09 GMT
+     * Generated on Wed, 17 May 2023 21:20:25 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -30690,6 +30690,7 @@
                     currentColumn.columnInternals.currentSortDirection = TableColumnSortDirection.none;
                 }
             }
+            this.emitColumnConfigurationChangeEvent();
         }
         /**
          * @internal
@@ -30872,6 +30873,20 @@
             this.tableValidator.validateRecordIds(data, this.idFieldName);
             this.canRenderRows = this.checkValidity();
         }
+        emitColumnConfigurationChangeEvent() {
+            const detail = {
+                columns: this.columns.map(column => ({
+                    columnId: column.columnId,
+                    sortIndex: column.columnInternals.currentSortIndex ?? undefined,
+                    sortDirection: column.columnInternals.currentSortDirection,
+                    groupIndex: column.columnInternals.groupIndex,
+                    hidden: column.columnHidden,
+                    fractionalWidth: column.columnInternals.currentFractionalWidth,
+                    pixelWidth: column.columnInternals.currentPixelWidth
+                }))
+            };
+            this.$emit('column-configuration-change', detail);
+        }
         async emitSelectionChangeEvent() {
             const detail = {
                 selectedRecordIds: await this.getSelectedRecordIds()
@@ -31306,15 +31321,41 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
     const tableColumnAnchorCellViewTag = DesignSystem.tagFor(TableColumnAnchorCellView);
 
+    /**
+     * The group header view base class for displaying fields of any type as text.
+     */
+    class TableColumnTextGroupHeaderViewBase extends TableGroupHeaderView {
+        constructor() {
+            super(...arguments);
+            /** @internal */
+            this.hasOverflow = false;
+        }
+        get content() {
+            return this.shouldUsePlaceholder ? this.placeholder : this.text;
+        }
+        /** @internal */
+        updateTitleOverflow() {
+            this.hasOverflow = this.textSpan.offsetWidth < this.textSpan.scrollWidth;
+        }
+        /** @internal */
+        clearTitleOverflow() {
+            this.hasOverflow = false;
+        }
+    }
+    __decorate$1([
+        observable
+    ], TableColumnTextGroupHeaderViewBase.prototype, "hasOverflow", void 0);
+    __decorate$1([
+        volatile
+    ], TableColumnTextGroupHeaderViewBase.prototype, "content", null);
+
     const template$6 = html `
     <span
         ${ref('textSpan')}
-        class="${x => (typeof x.groupHeaderValue === 'string' ? '' : 'placeholder')}"
+        class="${x => (x.shouldUsePlaceholder ? 'placeholder' : '')}"
         @mouseover="${x => x.updateTitleOverflow()}"
         @mouseout="${x => x.clearTitleOverflow()}"
-        title="${x => (x.isValidContentAndHasOverflow && x.content
-    ? x.content
-    : undefined)}"
+        title="${x => (x.hasOverflow && x.content ? x.content : undefined)}"
     >
         ${x => x.content}
     </span>
@@ -31335,33 +31376,19 @@
 `;
 
     /**
-     * The custom element used to render a group row header for a group representing rows
-     * grouped by a TableColumnText column.
+     * The group header view for displaying string fields as text.
      */
-    class TableColumnTextGroupHeaderView extends TableGroupHeaderView {
-        constructor() {
-            super(...arguments);
-            /** @internal */
-            this.isValidContentAndHasOverflow = false;
+    class TableColumnTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
+        get text() {
+            return this.groupHeaderValue;
         }
-        get content() {
-            return typeof this.groupHeaderValue === 'string'
-                ? this.groupHeaderValue
-                : this.columnConfig?.placeholder ?? '';
+        get placeholder() {
+            return this.columnConfig?.placeholder ?? '';
         }
-        updateTitleOverflow() {
-            this.isValidContentAndHasOverflow = this.textSpan.offsetWidth < this.textSpan.scrollWidth;
-        }
-        clearTitleOverflow() {
-            this.isValidContentAndHasOverflow = false;
+        get shouldUsePlaceholder() {
+            return typeof this.groupHeaderValue !== 'string';
         }
     }
-    __decorate$1([
-        observable
-    ], TableColumnTextGroupHeaderView.prototype, "isValidContentAndHasOverflow", void 0);
-    __decorate$1([
-        volatile
-    ], TableColumnTextGroupHeaderView.prototype, "content", null);
     const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
         baseName: 'table-column-text-group-header',
         template: template$6,
@@ -31490,24 +31517,31 @@
         .register(nimbleTableColumnAnchor());
     DesignSystem.tagFor(TableColumnAnchor);
 
-    const styles$9 = css `
-    span {
-        font: ${bodyFont};
-        color: ${bodyFontColor};
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .placeholder {
-        color: ${controlLabelFontColor};
+    /**
+     * The base class for table columns that display fields of any type as text.
+     */
+    class TableColumnTextBase extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumn))) {
+        fieldNameChanged() {
+            this.columnInternals.dataRecordFieldNames = [this.fieldName];
+            this.columnInternals.operandDataRecordFieldName = this.fieldName;
+        }
+        placeholderChanged() {
+            this.columnInternals.columnConfig = {
+                placeholder: this.placeholder ?? ''
+            };
+        }
     }
-`;
+    __decorate$1([
+        attr({ attribute: 'field-name' })
+    ], TableColumnTextBase.prototype, "fieldName", void 0);
+    __decorate$1([
+        attr
+    ], TableColumnTextBase.prototype, "placeholder", void 0);
 
     const template$5 = html `
     <span
         ${ref('textSpan')}
-        class="${x => (typeof x.cellRecord.value === 'string' ? '' : 'placeholder')}"
+        class="${x => (x.shouldUsePlaceholder ? 'placeholder' : '')}"
         @mouseover="${x => {
     x.isValidContentAndHasOverflow = !!x.content && x.textSpan.offsetWidth < x.textSpan.scrollWidth;
 }}"
@@ -31520,27 +31554,54 @@
     </span>
 `;
 
+    const styles$9 = css `
+    span {
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .placeholder {
+        color: ${controlLabelFontColor};
+    }
+`;
+
     /**
-     * A cell view for displaying strings
+     * The cell view base class for displaying fields of any type as text.
      */
-    class TableColumnTextCellView extends TableCellView {
+    class TableColumnTextCellViewBase extends TableCellView {
         constructor() {
             super(...arguments);
             /** @internal */
             this.isValidContentAndHasOverflow = false;
         }
         get content() {
-            return typeof this.cellRecord.value === 'string'
-                ? this.cellRecord.value
-                : this.columnConfig.placeholder;
+            return this.shouldUsePlaceholder ? this.placeholder : this.text;
         }
     }
     __decorate$1([
         observable
-    ], TableColumnTextCellView.prototype, "isValidContentAndHasOverflow", void 0);
+    ], TableColumnTextCellViewBase.prototype, "isValidContentAndHasOverflow", void 0);
     __decorate$1([
         volatile
-    ], TableColumnTextCellView.prototype, "content", null);
+    ], TableColumnTextCellViewBase.prototype, "content", null);
+
+    /**
+     * A cell view for displaying string fields as text
+     */
+    class TableColumnTextCellView extends TableColumnTextCellViewBase {
+        get text() {
+            return this.cellRecord.value;
+        }
+        get placeholder() {
+            return this.columnConfig.placeholder;
+        }
+        get shouldUsePlaceholder() {
+            return typeof this.cellRecord.value !== 'string';
+        }
+    }
     const textCellView = TableColumnTextCellView.compose({
         baseName: 'table-column-text-cell-view',
         template: template$5,
@@ -31550,9 +31611,9 @@
     const tableColumnTextCellViewTag = DesignSystem.tagFor(TableColumnTextCellView);
 
     /**
-     * The table column for displaying strings.
+     * The table column for displaying string fields as text.
      */
-    class TableColumnText extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumn))) {
+    class TableColumnText extends TableColumnTextBase {
         constructor() {
             super({
                 cellRecordFieldNames: ['value'],
@@ -31562,22 +31623,7 @@
             });
             this.columnInternals.sortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
         }
-        fieldNameChanged() {
-            this.columnInternals.dataRecordFieldNames = [this.fieldName];
-            this.columnInternals.operandDataRecordFieldName = this.fieldName;
-        }
-        placeholderChanged() {
-            this.columnInternals.columnConfig = {
-                placeholder: this.placeholder ?? ''
-            };
-        }
     }
-    __decorate$1([
-        attr({ attribute: 'field-name' })
-    ], TableColumnText.prototype, "fieldName", void 0);
-    __decorate$1([
-        attr
-    ], TableColumnText.prototype, "placeholder", void 0);
     const nimbleTableColumnText = TableColumnText.compose({
         baseName: 'table-column-text',
         template: template$8,