@ni/nimble-components 18.3.1 → 18.3.3

package/dist/all-components-bundle.js

@@ -26568,6 +26568,16 @@
       });
     }
 
+    /**
+     * The base class for table columns
+     */
+    class TableColumn extends FoundationElement {
+        connectedCallback() {
+            super.connectedCallback();
+            this.setAttribute('slot', uniqueId('table-column-slot'));
+        }
+    }
+
     /**
      * Helper class for the nimble-table to validate that the table's configuration
      * is valid and report which aspects of the configuration are valid or invalid.
@@ -26712,6 +26722,7 @@
         padding: 0px calc(${standardPadding} / 2);
         font: ${tableHeaderFont};
         color: ${tableHeaderFontColor};
+        ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};
         text-transform: uppercase;
     }
 `;
@@ -26892,29 +26903,18 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
 
-    /**
-     * The base class for table columns
-     */
-    class TableColumn extends FoundationElement {
-    }
-
-    const isTableColumn = () => {
-        const filter = (value, _, __) => {
-            return value instanceof TableColumn;
-        };
-        return filter;
-    };
     // prettier-ignore
     const template$4 = html `
-    <template role="table">
+    <template role="table" ${children$1({ property: 'childItems', filter: elements() })}>
         <div class="table-container">
-            <div role="rowgroup" class="header-container" style="margin-right: ${x => x.virtualizer.headerContainerMarginRight}px;">
+            <div role="rowgroup" class="header-container">
                 <div class="header-row" role="row">
                     ${repeat(x => x.columns, html `
                         <${DesignSystem.tagFor(TableHeader)} class="header">
-                            ${x => x.textContent}
+                            <slot name="${x => x.slot}"></slot>
                         </${DesignSystem.tagFor(TableHeader)}>
                     `)}
+                    <div class="header-scrollbar-spacer" style="width: ${x => x.virtualizer.headerContainerMarginRight}px;"></div>
                 </div>
             </div>
             <div class="table-viewport" ${ref('viewport')}>
@@ -26935,7 +26935,6 @@
                 </div>
             </div>
         </div>
-        <slot ${slotted({ property: 'columns', filter: isTableColumn() })}></slot>
     </template>
 `;
 
@@ -27668,7 +27667,14 @@
              * @internal
              */
             this.tableData = [];
+            /**
+             * @internal
+             */
             this.columns = [];
+            /**
+             * @internal
+             */
+            this.childItems = [];
             /**
              * @internal
              */
@@ -27721,6 +27727,16 @@
         checkValidity() {
             return this.tableValidator.isValid();
         }
+        childItemsChanged() {
+            void this.updateColumnsFromChildItems();
+        }
+        async updateColumnsFromChildItems() {
+            const definedElements = this.childItems.map(async (item) => (item.matches(':not(:defined)')
+                ? customElements.whenDefined(item.localName)
+                : Promise.resolve()));
+            await Promise.all(definedElements);
+            this.columns = this.childItems.filter((x) => x instanceof TableColumn);
+        }
         setTableData(newData) {
             const data = newData.map(record => {
                 return { ...record };
@@ -27779,6 +27795,9 @@
     __decorate$1([
         observable
     ], Table.prototype, "columns", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "childItems", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "canRenderRows", void 0);
@@ -27791,7 +27810,7 @@
 
     const styles$9 = css `
     :host {
-        display: none;
+        display: contents;
     }
 `;