@ni/nimble-components 18.3.3 → 18.3.5

package/dist/all-components-bundle.js

@@ -26577,6 +26577,9 @@
             this.setAttribute('slot', uniqueId('table-column-slot'));
         }
     }
+    __decorate$1([
+        attr({ attribute: 'column-id' })
+    ], TableColumn.prototype, "columnId", void 0);
 
     /**
      * Helper class for the nimble-table to validate that the table's configuration
@@ -26587,12 +26590,16 @@
             this.duplicateRecordId = false;
             this.missingRecordId = false;
             this.invalidRecordId = false;
+            this.duplicateColumnId = false;
+            this.missingColumnId = false;
         }
         getValidity() {
             return {
                 duplicateRecordId: this.duplicateRecordId,
                 missingRecordId: this.missingRecordId,
-                invalidRecordId: this.invalidRecordId
+                invalidRecordId: this.invalidRecordId,
+                duplicateColumnId: this.duplicateColumnId,
+                missingColumnId: this.missingColumnId
             };
         }
         isValid() {
@@ -26626,6 +26633,26 @@
                 && !this.invalidRecordId
                 && !this.duplicateRecordId);
         }
+        validateColumnIds(columnIds) {
+            this.missingColumnId = false;
+            this.duplicateColumnId = false;
+            const anyColumnsHaveIds = columnIds.some(id => id);
+            if (!anyColumnsHaveIds) {
+                return true;
+            }
+            const idSet = new Set();
+            for (const columnId of columnIds) {
+                if (!columnId) {
+                    this.missingColumnId = true;
+                    continue;
+                }
+                if (idSet.has(columnId)) {
+                    this.duplicateColumnId = true;
+                }
+                idSet.add(columnId);
+            }
+            return !this.missingColumnId && !this.duplicateColumnId;
+        }
     }
 
     const styles$d = css `
@@ -27680,6 +27707,7 @@
              */
             this.canRenderRows = true;
             this.tableValidator = new TableValidator();
+            this.columnNotifiers = [];
             this.update = (state) => {
                 this.table.setOptions(prev => ({
                     ...prev,
@@ -27712,24 +27740,66 @@
             this.generateTanStackColumns(newData);
             this.setTableData(newData);
         }
-        idFieldNameChanged(_prev, _next) {
-            // Force TanStack to detect a data update because a row's ID is only
-            // generated when creating a new row model.
-            this.setTableData(this.table.options.data);
-        }
         connectedCallback() {
             super.connectedCallback();
             this.virtualizer.connectedCallback();
+            this.validateAndObserveColumns();
         }
         disconnectedCallback() {
+            super.disconnectedCallback();
             this.virtualizer.disconnectedCallback();
+            this.removeColumnObservers();
         }
         checkValidity() {
             return this.tableValidator.isValid();
         }
+        /**
+         * @internal
+         *
+         * The event handler that is called when a notifier detects a change. Notifiers are added
+         * to each column, so `source` is expected to be an instance of `TableColumn`, and `args`
+         * is the string name of the property that changed on that column.
+         */
+        handleChange(source, args) {
+            if (source instanceof TableColumn) {
+                if (args === 'columnId') {
+                    this.validateColumnIds();
+                }
+            }
+        }
         childItemsChanged() {
             void this.updateColumnsFromChildItems();
         }
+        idFieldNameChanged(_prev, _next) {
+            // Force TanStack to detect a data update because a row's ID is only
+            // generated when creating a new row model.
+            this.setTableData(this.table.options.data);
+        }
+        columnsChanged(_prev, _next) {
+            if (!this.$fastController.isConnected) {
+                return;
+            }
+            this.validateAndObserveColumns();
+        }
+        removeColumnObservers() {
+            this.columnNotifiers.forEach(notifier => {
+                notifier.unsubscribe(this);
+            });
+            this.columnNotifiers = [];
+        }
+        validateAndObserveColumns() {
+            this.removeColumnObservers();
+            for (const column of this.columns) {
+                const notifier = Observable.getNotifier(column);
+                notifier.subscribe(this);
+                this.columnNotifiers.push(notifier);
+            }
+            this.validateColumnIds();
+        }
+        validateColumnIds() {
+            this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
+            this.canRenderRows = this.checkValidity();
+        }
         async updateColumnsFromChildItems() {
             const definedElements = this.childItems.map(async (item) => (item.matches(':not(:defined)')
                 ? customElements.whenDefined(item.localName)