@ni/nimble-components 18.11.0 → 18.11.1

package/dist/all-components-bundle.js

@@ -27795,40 +27795,6 @@
       };
     }
 
-    const createGroupHeaderViewTemplate = (groupHeaderViewTag) => html `
-        <${groupHeaderViewTag}
-            :groupHeaderValue="${x => x.groupRowValue}"
-            :columnConfig="${x => x.groupColumn?.columnConfig}"
-            class="group-header-value"
-            >
-        </${groupHeaderViewTag}>
-    `;
-
-    // prettier-ignore
-    const template$b = html `
-    <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}">
-        ${x => x.cellViewTemplate}
-        ${when(x => x.hasActionMenu, html `
-            <${menuButtonTag} ${ref('actionMenuButton')}
-                content-hidden
-                appearance="${ButtonAppearance.ghost}"
-                @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
-                @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
-                class="action-menu"
-            >
-                <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
-                ${x => x.actionMenuLabel}
-                <slot name="cellActionMenu" slot="menu"></slot>
-            </${menuButtonTag}>
-        `)}
-    </template>
-`;
-    const createCellViewTemplate = (cellViewTag) => html `<${cellViewTag} class="cell-view"
-        :cellRecord="${y => y.cellState?.cellRecord}"
-        :columnConfig="${y => y.cellState?.columnConfig}"
-    >
-    </${cellViewTag}>`;
-
     /**
      * The possible directions a table column can be sorted in.
      */
@@ -27872,137 +27838,200 @@
     const defaultFractionalWidth = 1;
 
     /**
-     * The base class for table columns
+     * The base class for group header views, which are displayed in a TableGroupRow.
+     * A TableColumn that uses the GroupableColumn mixin must provide a TableGroupHeaderView
+     * type (linked via TableColumn.groupHeaderViewTag).
      */
-    class TableColumn extends FoundationElement {
-        constructor() {
-            super();
-            this.columnHidden = false;
-            this.sortDirection = TableColumnSortDirection.none;
+    class TableGroupHeaderView extends FoundationElement {
+    }
+    __decorate$1([
+        observable
+    ], TableGroupHeaderView.prototype, "groupHeaderValue", void 0);
+    __decorate$1([
+        observable
+    ], TableGroupHeaderView.prototype, "columnConfig", void 0);
+
+    const validateGroupHeaderViewTemplate = (groupHeaderViewTag) => {
+        let instance;
+        try {
+            instance = document.createElement(groupHeaderViewTag);
+        }
+        catch (ex) {
+            // Swallow construction error to report a better one
+        }
+        if (!(instance instanceof TableGroupHeaderView)) {
+            throw new Error(`Group header view tag name (${groupHeaderViewTag}) must evaluate to an element extending TableGroupHeaderView`);
+        }
+    };
+    const createGroupHeaderViewTemplate = (groupHeaderViewTag) => {
+        validateGroupHeaderViewTemplate(groupHeaderViewTag);
+        return html `
+        <${groupHeaderViewTag}
+            :groupHeaderValue="${x => x.groupRowValue}"
+            :columnConfig="${x => x.groupColumn?.columnInternals.columnConfig}"
+            class="group-header-view"
+        >
+        </${groupHeaderViewTag}>
+    `;
+    };
+
+    /**
+     * Base class for table cell views, which are used within the nimble-table-cell.
+     * Each TableColumn type has a corresponding TableCellView type (linked via TableColumn.cellViewTag).
+     */
+    class TableCellView extends FoundationElement {
+        /**
+         * Called if an element inside this cell view has focus, and this row/cell is being recycled.
+         * Expected implementation is to commit changes as needed, and blur the focusable element (or close
+         * the menu/popup/etc).
+         */
+        focusedRecycleCallback() { }
+    }
+    __decorate$1([
+        observable
+    ], TableCellView.prototype, "cellRecord", void 0);
+    __decorate$1([
+        observable
+    ], TableCellView.prototype, "columnConfig", void 0);
+
+    const validateCellViewTemplate = (cellViewTag) => {
+        let instance;
+        try {
+            instance = document.createElement(cellViewTag);
+        }
+        catch (ex) {
+            // Swallow construction error to report a better one
+        }
+        if (!(instance instanceof TableCellView)) {
+            throw new Error(`Cell view tag name (${cellViewTag}) must evaluate to an element extending TableCellView`);
+        }
+    };
+    const createCellViewTemplate = (cellViewTag) => {
+        validateCellViewTemplate(cellViewTag);
+        return html `
+        <${cellViewTag}
+            :cellRecord="${y => y.cellState?.cellRecord}"
+            :columnConfig="${y => y.cellState?.columnConfig}"
+            class="cell-view"
+        >
+        </${cellViewTag}>
+    `;
+    };
+
+    /**
+     * Internal column state configured by plugin authors
+     * @internal
+     */
+    class ColumnInternals {
+        constructor(options) {
             /**
-             * @internal
-             * Used by the Table in order to size a column proportionally to the available
-             * width of a row.
+             * A unique id used internally in the table to identify specific column instances
              */
-            this.currentFractionalWidth = defaultFractionalWidth;
+            this.uniqueId = uniqueId('table-column-slot');
             /**
-             * @internal
-             * Used by column plugins to size a column proportionally to the available
-             * width of a row. Sets currentFractionalWidth when changed.
+             * The operation to use when sorting the table by this column.
              */
-            this.internalFractionalWidth = defaultFractionalWidth;
+            this.sortOperation = TableColumnSortOperation.basic;
             /**
-             * @internal
-             * The minimum size in pixels according to the design doc
+             * The names of the fields from the row's record that correlate to the data that will be in TCellRecord.
+             * This array is parallel with the field names specified by `cellRecordFieldNames`.
              */
-            this.internalMinPixelWidth = defaultMinPixelWidth;
+            this.dataRecordFieldNames = [];
             /**
-             * @internal
              * Whether or not this column can be used to group rows by
              */
-            this.internalGroupingDisabled = false;
+            this.groupingDisabled = false;
             /**
-             * @internal
-             *
-             * The names of the fields from the row's record that correlate to the data that will be in TCellRecord.
-             * This array is parallel with the field names specified by `cellRecordFieldNames`.
+             * Used by column plugins to size a column proportionally to the available
+             * width of a row. Sets currentFractionalWidth when changed.
              */
-            this.dataRecordFieldNames = [];
+            this.fractionalWidth = defaultFractionalWidth;
             /**
-             * @internal
-             *
-             * The operation to use when sorting the table by this column.
+             * The minimum size in pixels according to the design doc
              */
-            this.sortOperation = TableColumnSortOperation.basic;
-            this.internalUniqueId = uniqueId('table-column-slot');
-        }
-        /**
-         * @internal
-         */
-        connectedCallback() {
-            super.connectedCallback();
-            this.setAttribute('slot', this.internalUniqueId);
-        }
-        cellViewTagChanged() {
-            this.currentCellViewTemplate = this.cellViewTag
-                ? createCellViewTemplate(this.cellViewTag)
-                : undefined;
-        }
-        internalFractionalWidthChanged() {
-            this.currentFractionalWidth = this.internalFractionalWidth;
+            this.minPixelWidth = defaultMinPixelWidth;
+            /**
+             * @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.
+             */
+            this.currentFractionalWidth = defaultFractionalWidth;
+            this.cellRecordFieldNames = options.cellRecordFieldNames;
+            this.cellViewTemplate = createCellViewTemplate(options.cellViewTag);
+            this.groupHeaderViewTemplate = createGroupHeaderViewTemplate(options.groupHeaderViewTag);
         }
-        internalPixelWidthChanged() {
-            this.currentPixelWidth = this.internalPixelWidth;
+        fractionalWidthChanged() {
+            this.currentFractionalWidth = this.fractionalWidth;
         }
-        groupHeaderViewTagChanged() {
-            this.internalGroupHeaderViewTemplate = this.groupHeaderViewTag
-                ? createGroupHeaderViewTemplate(this.groupHeaderViewTag)
-                : undefined;
+        pixelWidthChanged() {
+            this.currentPixelWidth = this.pixelWidth;
         }
     }
-    __decorate$1([
-        attr({ attribute: 'column-id' })
-    ], TableColumn.prototype, "columnId", void 0);
-    __decorate$1([
-        attr({ attribute: 'action-menu-slot' })
-    ], TableColumn.prototype, "actionMenuSlot", void 0);
-    __decorate$1([
-        attr({ attribute: 'action-menu-label' })
-    ], TableColumn.prototype, "actionMenuLabel", void 0);
-    __decorate$1([
-        attr({ attribute: 'column-hidden', mode: 'boolean' })
-    ], TableColumn.prototype, "columnHidden", void 0);
-    __decorate$1([
-        attr({ attribute: 'sort-index', converter: nullableNumberConverter })
-    ], TableColumn.prototype, "sortIndex", void 0);
-    __decorate$1([
-        attr({ attribute: 'sort-direction' })
-    ], TableColumn.prototype, "sortDirection", void 0);
     __decorate$1([
         observable
-    ], TableColumn.prototype, "currentPixelWidth", void 0);
+    ], ColumnInternals.prototype, "columnConfig", void 0);
     __decorate$1([
         observable
-    ], TableColumn.prototype, "currentFractionalWidth", void 0);
+    ], ColumnInternals.prototype, "operandDataRecordFieldName", void 0);
     __decorate$1([
         observable
-    ], TableColumn.prototype, "internalPixelWidth", void 0);
+    ], ColumnInternals.prototype, "sortOperation", void 0);
     __decorate$1([
         observable
-    ], TableColumn.prototype, "internalFractionalWidth", void 0);
+    ], ColumnInternals.prototype, "dataRecordFieldNames", void 0);
     __decorate$1([
         observable
-    ], TableColumn.prototype, "internalMinPixelWidth", void 0);
+    ], ColumnInternals.prototype, "groupingDisabled", void 0);
     __decorate$1([
         observable
-    ], TableColumn.prototype, "internalGroupingDisabled", void 0);
+    ], ColumnInternals.prototype, "groupIndex", void 0);
     __decorate$1([
         observable
-    ], TableColumn.prototype, "internalGroupIndex", void 0);
+    ], ColumnInternals.prototype, "pixelWidth", void 0);
     __decorate$1([
         observable
-    ], TableColumn.prototype, "groupHeaderViewTag", void 0);
+    ], ColumnInternals.prototype, "fractionalWidth", void 0);
     __decorate$1([
         observable
-    ], TableColumn.prototype, "internalGroupHeaderViewTemplate", void 0);
+    ], ColumnInternals.prototype, "minPixelWidth", void 0);
     __decorate$1([
         observable
-    ], TableColumn.prototype, "cellViewTag", void 0);
+    ], ColumnInternals.prototype, "currentFractionalWidth", void 0);
     __decorate$1([
         observable
-    ], TableColumn.prototype, "currentCellViewTemplate", void 0);
+    ], ColumnInternals.prototype, "currentPixelWidth", void 0);
+
+    /**
+     * The base class for table columns
+     */
+    class TableColumn extends FoundationElement {
+        constructor(options) {
+            super();
+            this.columnHidden = false;
+            this.sortDirection = TableColumnSortDirection.none;
+            if (!options) {
+                throw new Error('ColumnInternalsOptions must be provided to constructor');
+            }
+            this.columnInternals = new ColumnInternals(options);
+        }
+    }
     __decorate$1([
-        observable
-    ], TableColumn.prototype, "dataRecordFieldNames", void 0);
+        attr({ attribute: 'column-id' })
+    ], TableColumn.prototype, "columnId", void 0);
     __decorate$1([
-        observable
-    ], TableColumn.prototype, "columnConfig", void 0);
+        attr({ attribute: 'action-menu-slot' })
+    ], TableColumn.prototype, "actionMenuSlot", void 0);
     __decorate$1([
-        observable
-    ], TableColumn.prototype, "operandDataRecordFieldName", void 0);
+        attr({ attribute: 'action-menu-label' })
+    ], TableColumn.prototype, "actionMenuLabel", void 0);
     __decorate$1([
-        observable
-    ], TableColumn.prototype, "sortOperation", void 0);
+        attr({ attribute: 'column-hidden', mode: 'boolean' })
+    ], TableColumn.prototype, "columnHidden", void 0);
+    __decorate$1([
+        attr({ attribute: 'sort-index', converter: nullableNumberConverter })
+    ], TableColumn.prototype, "sortIndex", void 0);
+    __decorate$1([
+        attr({ attribute: 'sort-direction' })
+    ], TableColumn.prototype, "sortDirection", void 0);
 
     /**
      * Helper class for the nimble-table to validate that the table's configuration
@@ -28246,7 +28275,7 @@
 `;
 
     // prettier-ignore
-    const template$a = html `
+    const template$b = html `
     <template role="columnheader" aria-sort="${x => x.ariaSort}">
         <slot></slot>
 
@@ -28296,7 +28325,7 @@
     ], TableHeader.prototype, "firstSortedColumn", void 0);
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
-        template: template$a,
+        template: template$b,
         styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
@@ -28363,6 +28392,26 @@
     }
 `;
 
+    // prettier-ignore
+    const template$a = html `
+    <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}">
+        ${x => x.cellViewTemplate}
+        ${when(x => x.hasActionMenu, html `
+            <${menuButtonTag} ${ref('actionMenuButton')}
+                content-hidden
+                appearance="${ButtonAppearance.ghost}"
+                @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
+                @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
+                class="action-menu"
+            >
+                <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
+                ${x => x.actionMenuLabel}
+                <slot name="cellActionMenu" slot="menu"></slot>
+            </${menuButtonTag}>
+        `)}
+    </template>
+`;
+
     /**
      * A styled cell that is used within the nimble-table-row.
      * @internal
@@ -28402,7 +28451,7 @@
     ], TableCell.prototype, "nestingLevel", void 0);
     const nimbleTableCell = TableCell.compose({
         baseName: 'table-cell',
-        template: template$b,
+        template: template$a,
         styles: styles$d
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
@@ -28416,7 +28465,7 @@
                 <${tableCellTag}
                     class="cell"
                     :cellState="${x => x.cellState}"
-                    :cellViewTemplate="${x => x.column.currentCellViewTemplate}"
+                    :cellViewTemplate="${x => x.column.columnInternals.cellViewTemplate}"
                     ?has-action-menu="${x => !!x.column.actionMenuSlot}"
                     action-menu-label="${x => x.column.actionMenuLabel}"
                     @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x.column)}"
@@ -28451,15 +28500,15 @@
         }
         get columnStates() {
             return this.columns.map((column, i) => {
-                const fieldNames = column.dataRecordFieldNames;
+                const fieldNames = column.columnInternals.dataRecordFieldNames;
                 let cellState;
                 if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {
                     const cellDataValues = fieldNames.map(field => this.dataRecord[field]);
-                    const cellRecord = Object.fromEntries(column.cellRecordFieldNames.map((k, j) => [
+                    const cellRecord = Object.fromEntries(column.columnInternals.cellRecordFieldNames.map((k, j) => [
                         k,
                         cellDataValues[j]
                     ]));
-                    const columnConfig = column.columnConfig ?? {};
+                    const columnConfig = column.columnInternals.columnConfig ?? {};
                     cellState = {
                         cellRecord,
                         columnConfig
@@ -28588,7 +28637,7 @@
         overflow: hidden;
     }
 
-    .group-header-value {
+    .group-header-view {
         padding-left: calc(${standardPadding} / 2);
         user-select: none;
         overflow: hidden;
@@ -28622,7 +28671,7 @@
             <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}"></${iconArrowExpanderRightTag}>
         </${buttonTag}>
         <div class="group-row-header-content">
-            ${x => x.groupColumn?.internalGroupHeaderViewTemplate}
+            ${x => x.groupColumn?.columnInternals.groupHeaderViewTemplate}
             <div class="group-row-child-count">(${x => x.leafItemCount})</span>
         </div>
     </template>
@@ -29384,25 +29433,6 @@
       };
     }
 
-    /**
-     * Base class for table cell views, which are used within the nimble-table-cell.
-     * Each TableColumn type has a corresponding TableCellView type (linked via TableColumn.cellViewTag).
-     */
-    class TableCellView extends FoundationElement {
-        /**
-         * Called if an element inside this cell view has focus, and this row/cell is being recycled.
-         * Expected implementation is to commit changes as needed, and blur the focusable element (or close
-         * the menu/popup/etc).
-         */
-        focusedRecycleCallback() { }
-    }
-    __decorate$1([
-        observable
-    ], TableCellView.prototype, "cellRecord", void 0);
-    __decorate$1([
-        observable
-    ], TableCellView.prototype, "columnConfig", void 0);
-
     /**
      * Helper class for the nimble-table for row virtualization.
      *
@@ -29558,6 +29588,14 @@
         }
         return false;
     };
+    const isColumnInternalsProperty = (changedProperty, ...args) => {
+        for (const arg of args) {
+            if (changedProperty === arg) {
+                return true;
+            }
+        }
+        return false;
+    };
     /**
      * Helper class to track what updates are needed to the table based on configuration
      * changes.
@@ -29622,19 +29660,20 @@
             if (isColumnProperty(changedColumnProperty, 'columnId')) {
                 this.requiredUpdates.columnIds = true;
             }
-            else if (isColumnProperty(changedColumnProperty, 'operandDataRecordFieldName', 'sortOperation')) {
+            else if (isColumnInternalsProperty(changedColumnProperty, 'operandDataRecordFieldName', 'sortOperation')) {
                 this.requiredUpdates.columnDefinition = true;
             }
             else if (isColumnProperty(changedColumnProperty, 'sortIndex', 'sortDirection')) {
                 this.requiredUpdates.columnSort = true;
             }
-            else if (isColumnProperty(changedColumnProperty, 'currentFractionalWidth', 'currentPixelWidth', 'internalMinPixelWidth', 'columnHidden')) {
+            else if (isColumnProperty(changedColumnProperty, 'columnHidden')
+                || isColumnInternalsProperty(changedColumnProperty, 'currentFractionalWidth', 'currentPixelWidth', 'minPixelWidth')) {
                 this.requiredUpdates.columnWidths = true;
             }
             else if (isColumnProperty(changedColumnProperty, 'actionMenuSlot')) {
                 this.requiredUpdates.actionMenuSlots = true;
             }
-            else if (isColumnProperty(changedColumnProperty, 'internalGroupIndex', 'internalGroupingDisabled')) {
+            else if (isColumnInternalsProperty(changedColumnProperty, 'groupIndex', 'groupingDisabled')) {
                 this.requiredUpdates.groupRows = true;
             }
             this.queueUpdate();
@@ -29682,21 +29721,17 @@
      */
     class TableLayoutHelper {
         static getGridTemplateColumns(columns) {
-            return (columns
+            return columns
                 ?.filter(column => !column.columnHidden)
-                .reduce((accumulator, currentValue) => {
-                const gap = accumulator === '' ? '' : ' ';
-                const minPixelWidth = currentValue.internalMinPixelWidth;
-                if (currentValue.currentPixelWidth) {
-                    const pixelWidth = currentValue.currentPixelWidth;
-                    const gridPixelWidth = pixelWidth > minPixelWidth
-                        ? pixelWidth
-                        : minPixelWidth;
-                    return `${accumulator}${gap}${gridPixelWidth}px`;
+                .map(column => {
+                const { minPixelWidth, currentPixelWidth, currentFractionalWidth } = column.columnInternals;
+                if (currentPixelWidth) {
+                    const coercedPixelWidth = Math.max(minPixelWidth, currentPixelWidth);
+                    return `${coercedPixelWidth}px`;
                 }
-                const fractionalWidth = currentValue.currentFractionalWidth;
-                return `${accumulator}${gap}minmax(${minPixelWidth}px, ${fractionalWidth}fr)`;
-            }, '') ?? '');
+                return `minmax(${minPixelWidth}px, ${currentFractionalWidth}fr)`;
+            })
+                .join(' ');
         }
     }
 
@@ -29872,7 +29907,9 @@
          * is the string name of the property that changed on that column.
          */
         handleChange(source, args) {
-            if (source instanceof TableColumn && typeof args === 'string') {
+            if ((source instanceof TableColumn
+                || source instanceof ColumnInternals)
+                && typeof args === 'string') {
                 this.updateTracker.trackColumnPropertyChanged(args);
             }
         }
@@ -29976,6 +30013,9 @@
                 const notifier = Observable.getNotifier(column);
                 notifier.subscribe(this);
                 this.columnNotifiers.push(notifier);
+                const notifierInternals = Observable.getNotifier(column.columnInternals);
+                notifierInternals.subscribe(this);
+                this.columnNotifiers.push(notifier);
             }
         }
         getColumnsParticipatingInSorting() {
@@ -29983,8 +30023,8 @@
                 && typeof x.sortIndex === 'number');
         }
         getColumnsParticipatingInGrouping() {
-            return this.columns.filter(x => !x.internalGroupingDisabled
-                && typeof x.internalGroupIndex === 'number');
+            return this.columns.filter(x => !x.columnInternals.groupingDisabled
+                && typeof x.columnInternals.groupIndex === 'number');
         }
         childItemsChanged() {
             void this.updateColumnsFromChildItems();
@@ -30040,7 +30080,7 @@
             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.validateColumnGroupIndices(this.getColumnsParticipatingInGrouping().map(x => x.internalGroupIndex));
+            this.tableValidator.validateColumnGroupIndices(this.getColumnsParticipatingInGrouping().map(x => x.columnInternals.groupIndex));
             this.validateWithData(this.table.options.data);
         }
         validateWithData(data) {
@@ -30081,7 +30121,7 @@
         getGroupRowColumn(row) {
             const groupedId = row.groupingColumnId;
             if (groupedId !== undefined) {
-                return this.columns.find(c => c.internalUniqueId === groupedId);
+                return this.columns.find(c => c.columnInternals.uniqueId === groupedId);
             }
             return undefined;
         }
@@ -30113,14 +30153,14 @@
                 : undefined;
             return sortedColumns.map(column => {
                 return {
-                    id: column.internalUniqueId,
+                    id: column.columnInternals.uniqueId,
                     desc: column.sortDirection === TableColumnSortDirection.descending
                 };
             });
         }
         calculateTanStackGroupingState() {
-            const groupedColumns = this.getColumnsParticipatingInGrouping().sort((x, y) => x.internalGroupIndex - y.internalGroupIndex);
-            return groupedColumns.map(column => column.internalUniqueId);
+            const groupedColumns = this.getColumnsParticipatingInGrouping().sort((x, y) => x.columnInternals.groupIndex - y.columnInternals.groupIndex);
+            return groupedColumns.map(column => column.columnInternals.uniqueId);
         }
         calculateTanStackRowIdFunction() {
             return this.idFieldName === null || this.idFieldName === undefined
@@ -30130,15 +30170,15 @@
         calculateTanStackColumns() {
             return this.columns.map(column => {
                 return {
-                    id: column.internalUniqueId,
+                    id: column.columnInternals.uniqueId,
                     accessorFn: (data) => {
-                        const fieldName = column.operandDataRecordFieldName;
+                        const fieldName = column.columnInternals.operandDataRecordFieldName;
                         if (typeof fieldName !== 'string') {
                             return undefined;
                         }
                         return data[fieldName];
                     },
-                    sortingFn: getTanStackSortingFunction(column.sortOperation)
+                    sortingFn: getTanStackSortingFunction(column.columnInternals.sortOperation)
                 };
             });
         }
@@ -30213,7 +30253,7 @@
 `;
 
     const template$6 = html `
-    <template>
+    <template slot="${x => x.columnInternals.uniqueId}">
         <span class="header-content">
             <slot></slot>
         </span>
@@ -30228,25 +30268,20 @@
          * proportionally within a Table.
          */
         class FractionalWidthColumn extends base {
-            constructor() {
-                super(...arguments);
-                this.fractionalWidth = defaultFractionalWidth;
-                this.minPixelWidth = defaultMinPixelWidth;
-            }
             fractionalWidthChanged() {
                 if (typeof this.fractionalWidth === 'number') {
-                    this.internalFractionalWidth = this.fractionalWidth;
+                    this.columnInternals.fractionalWidth = this.fractionalWidth;
                 }
                 else {
-                    this.internalFractionalWidth = defaultFractionalWidth;
+                    this.columnInternals.fractionalWidth = defaultFractionalWidth;
                 }
             }
             minPixelWidthChanged() {
                 if (typeof this.minPixelWidth === 'number') {
-                    this.internalMinPixelWidth = this.minPixelWidth;
+                    this.columnInternals.minPixelWidth = this.minPixelWidth;
                 }
                 else {
-                    this.internalMinPixelWidth = defaultMinPixelWidth;
+                    this.columnInternals.minPixelWidth = defaultMinPixelWidth;
                 }
             }
         }
@@ -30273,14 +30308,14 @@
                 this.groupIndex = null;
             }
             groupingDisabledChanged() {
-                this.internalGroupingDisabled = this.groupingDisabled;
+                this.columnInternals.groupingDisabled = this.groupingDisabled;
             }
             groupIndexChanged() {
                 if (typeof this.groupIndex === 'number') {
-                    this.internalGroupIndex = this.groupIndex;
+                    this.columnInternals.groupIndex = this.groupIndex;
                 }
                 else {
-                    this.internalGroupIndex = undefined;
+                    this.columnInternals.groupIndex = undefined;
                 }
             }
         }
@@ -30293,20 +30328,6 @@
         return GroupableColumn;
     }
 
-    /**
-     * The base class for group header views, which are displayed in a TableGroupRow.
-     * A TableColumn that uses the GroupableColumn mixin must provide a TableGroupHeaderView
-     * type (linked via TableColumn.groupHeaderViewTag).
-     */
-    class TableGroupHeaderView extends FoundationElement {
-    }
-    __decorate$1([
-        observable
-    ], TableGroupHeaderView.prototype, "groupHeaderValue", void 0);
-    __decorate$1([
-        observable
-    ], TableGroupHeaderView.prototype, "columnConfig", void 0);
-
     const template$5 = html `
     <span
         ${ref('textSpan')}
@@ -30357,9 +30378,6 @@
             this.isValidContentAndHasOverflow = false;
         }
     }
-    __decorate$1([
-        observable
-    ], TableColumnTextGroupHeaderView.prototype, "columnConfig", void 0);
     __decorate$1([
         observable
     ], TableColumnTextGroupHeaderView.prototype, "isValidContentAndHasOverflow", void 0);
@@ -30436,38 +30454,33 @@
     const tableColumnTextCellViewTag = DesignSystem.tagFor(TableColumnTextCellView);
 
     /**
-     * The base class for a table column for displaying strings.
+     * The table column for displaying strings.
      */
-    class TableColumnTextBase extends TableColumn {
+    class TableColumnText extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumn))) {
         constructor() {
-            super();
-            this.cellRecordFieldNames = ['value'];
-            this.cellViewTag = tableColumnTextCellViewTag;
-            this.sortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
+            super({
+                cellRecordFieldNames: ['value'],
+                cellViewTag: tableColumnTextCellViewTag,
+                groupHeaderViewTag: tableColumnTextGroupHeaderTag
+            });
+            this.columnInternals.sortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
         }
         fieldNameChanged() {
-            this.dataRecordFieldNames = [this.fieldName];
-            this.operandDataRecordFieldName = this.fieldName;
+            this.columnInternals.dataRecordFieldNames = [this.fieldName];
+            this.columnInternals.operandDataRecordFieldName = this.fieldName;
         }
         placeholderChanged() {
-            this.columnConfig = { placeholder: this.placeholder ?? '' };
+            this.columnInternals.columnConfig = {
+                placeholder: this.placeholder ?? ''
+            };
         }
     }
     __decorate$1([
         attr({ attribute: 'field-name' })
-    ], TableColumnTextBase.prototype, "fieldName", void 0);
+    ], TableColumnText.prototype, "fieldName", void 0);
     __decorate$1([
         attr
-    ], TableColumnTextBase.prototype, "placeholder", void 0);
-    /**
-     * The table column for displaying strings.
-     */
-    class TableColumnText extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(TableColumnTextBase)) {
-        constructor() {
-            super(...arguments);
-            this.groupHeaderViewTag = tableColumnTextGroupHeaderTag;
-        }
-    }
+    ], TableColumnText.prototype, "placeholder", void 0);
     const nimbleTableColumnText = TableColumnText.compose({
         baseName: 'table-column-text',
         template: template$6,