@ni/nimble-components 19.1.3 → 19.2.1

package/dist/all-components-bundle.js

@@ -16232,7 +16232,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Thu, 01 Jun 2023 14:26:24 GMT
+     * Generated on Mon, 12 Jun 2023 13:02:11 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -16560,7 +16560,8 @@
         tableRowBorderColor: 'table-row-border-color',
         elevation1BoxShadow: 'elevation-1-box-shadow',
         elevation2BoxShadow: 'elevation-2-box-shadow',
-        elevation3BoxShadow: 'elevation-3-box-shadow'
+        elevation3BoxShadow: 'elevation-3-box-shadow',
+        graphGridlineColor: 'graph-gridline-color'
     };
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
@@ -16710,6 +16711,7 @@
     const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
     DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
     const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
+    DesignToken.create(styleNameFromTokenName(tokenNames.graphGridlineColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.2));
     DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
     const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
     // Component Sizing Tokens
@@ -30058,6 +30060,62 @@
         return 1;
     }
 
+    /**
+     * Generic Tracker which sets or resets provided flags
+     */
+    class Tracker {
+        constructor(trackedItemsList) {
+            this.trackedItems = {};
+            this.trackedItems = trackedItemsList.reduce((r, key) => {
+                return {
+                    ...r,
+                    [key]: false
+                };
+            }, this.trackedItems);
+        }
+        getTrackedItems() {
+            return { ...this.trackedItems };
+        }
+        isTracked(key) {
+            return this.trackedItems[key];
+        }
+        track(key) {
+            this.trackedItems[key] = true;
+        }
+        untrack(key) {
+            this.trackedItems[key] = false;
+        }
+        trackAll() {
+            this.setAllKeys(true);
+        }
+        untrackAll() {
+            this.setAllKeys(false);
+        }
+        allTracked() {
+            return Object.values(this.trackedItems).every(x => x);
+        }
+        anyTracked() {
+            return Object.values(this.trackedItems).some(x => x);
+        }
+        noneTracked() {
+            return Object.values(this.trackedItems).every(x => !x);
+        }
+        setAllKeys(value) {
+            this.trackedItems = Object.keys(this.trackedItems).reduce((r, key) => {
+                return {
+                    ...r,
+                    [key]: value
+                };
+            }, this.trackedItems);
+        }
+    }
+
+    /**
+     * Generic Update Tracker Utility which extends Tracker Utility with update logic
+     */
+    class UpdateTracker extends Tracker {
+    }
+
     const isColumnProperty = (changedProperty, ...args) => {
         for (const arg of args) {
             if (changedProperty === arg) {
@@ -30074,61 +30132,62 @@
         }
         return false;
     };
+    const trackedItems = [
+        'rowIds',
+        'groupRows',
+        'columnIds',
+        'columnSort',
+        'columnWidths',
+        'columnDefinition',
+        'actionMenuSlots',
+        'selectionMode'
+    ];
     /**
      * Helper class to track what updates are needed to the table based on configuration
      * changes.
      */
-    class UpdateTracker {
+    class TableUpdateTracker extends UpdateTracker {
         constructor(table) {
-            this.requiredUpdates = {
-                rowIds: false,
-                groupRows: false,
-                columnIds: false,
-                columnSort: false,
-                columnWidths: false,
-                columnDefinition: false,
-                actionMenuSlots: false,
-                selectionMode: false
-            };
-            this.updateQueued = false;
+            super(trackedItems);
             this.table = table;
+            this.updateQueued = false;
         }
         get updateRowIds() {
-            return this.requiredUpdates.rowIds;
+            return this.isTracked('rowIds');
         }
         get updateGroupRows() {
-            return this.requiredUpdates.groupRows;
+            return this.isTracked('groupRows');
         }
         get updateColumnIds() {
-            return this.requiredUpdates.columnIds;
+            return this.isTracked('columnIds');
         }
         get updateColumnSort() {
-            return this.requiredUpdates.columnSort;
+            return this.isTracked('columnSort');
         }
         get updateColumnWidths() {
-            return this.requiredUpdates.columnWidths;
+            return this.isTracked('columnWidths');
         }
         get updateColumnDefinition() {
-            return this.requiredUpdates.columnDefinition;
+            return this.isTracked('columnDefinition');
         }
         get updateActionMenuSlots() {
-            return this.requiredUpdates.actionMenuSlots;
+            return this.isTracked('actionMenuSlots');
         }
         get updateSelectionMode() {
-            return this.requiredUpdates.selectionMode;
+            return this.isTracked('selectionMode');
         }
         get requiresTanStackUpdate() {
-            return (this.requiredUpdates.rowIds
-                || this.requiredUpdates.columnSort
-                || this.requiredUpdates.columnDefinition
-                || this.requiredUpdates.groupRows
-                || this.requiredUpdates.selectionMode);
+            return (this.isTracked('rowIds')
+                || this.isTracked('columnSort')
+                || this.isTracked('columnDefinition')
+                || this.isTracked('groupRows')
+                || this.isTracked('selectionMode'));
         }
         get requiresTanStackDataReset() {
-            return (this.requiredUpdates.rowIds || this.requiredUpdates.columnDefinition);
+            return this.isTracked('rowIds') || this.isTracked('columnDefinition');
         }
         trackAllStateChanged() {
-            this.setAllKeys(true);
+            this.trackAll();
             this.queueUpdate();
         }
         get hasPendingUpdates() {
@@ -30136,49 +30195,44 @@
         }
         trackColumnPropertyChanged(changedColumnProperty) {
             if (isColumnProperty(changedColumnProperty, 'columnId')) {
-                this.requiredUpdates.columnIds = true;
+                this.track('columnIds');
             }
             else if (isColumnInternalsProperty(changedColumnProperty, 'operandDataRecordFieldName', 'sortOperation')) {
-                this.requiredUpdates.columnDefinition = true;
+                this.track('columnDefinition');
             }
             else if (isColumnProperty(changedColumnProperty, 'sortingDisabled')
                 || isColumnInternalsProperty(changedColumnProperty, 'currentSortDirection', 'currentSortIndex')) {
-                this.requiredUpdates.columnSort = true;
+                this.track('columnSort');
             }
             else if (isColumnProperty(changedColumnProperty, 'columnHidden')
                 || isColumnInternalsProperty(changedColumnProperty, 'currentFractionalWidth', 'currentPixelWidth', 'minPixelWidth')) {
-                this.requiredUpdates.columnWidths = true;
+                this.track('columnWidths');
             }
             else if (isColumnProperty(changedColumnProperty, 'actionMenuSlot')) {
-                this.requiredUpdates.actionMenuSlots = true;
+                this.track('actionMenuSlots');
             }
             else if (isColumnInternalsProperty(changedColumnProperty, 'groupIndex', 'groupingDisabled')) {
-                this.requiredUpdates.groupRows = true;
+                this.track('groupRows');
             }
             this.queueUpdate();
         }
         trackColumnInstancesChanged() {
-            this.requiredUpdates.columnIds = true;
-            this.requiredUpdates.columnDefinition = true;
-            this.requiredUpdates.columnSort = true;
-            this.requiredUpdates.columnWidths = true;
-            this.requiredUpdates.actionMenuSlots = true;
-            this.requiredUpdates.groupRows = true;
+            this.track('columnIds');
+            this.track('columnDefinition');
+            this.track('columnSort');
+            this.track('columnWidths');
+            this.track('actionMenuSlots');
+            this.track('groupRows');
             this.queueUpdate();
         }
         trackIdFieldNameChanged() {
-            this.requiredUpdates.rowIds = true;
+            this.track('rowIds');
             this.queueUpdate();
         }
         trackSelectionModeChanged() {
-            this.requiredUpdates.selectionMode = true;
+            this.track('selectionMode');
             this.queueUpdate();
         }
-        setAllKeys(value) {
-            Object.keys(this.requiredUpdates).forEach(key => {
-                this.requiredUpdates[key] = value;
-            });
-        }
         queueUpdate() {
             if (!this.table.$fastController.isConnected) {
                 return;
@@ -30187,7 +30241,7 @@
                 this.updateQueued = true;
                 DOM.queueUpdate(() => {
                     this.table.update();
-                    this.setAllKeys(false);
+                    this.untrackAll();
                     this.updateQueued = false;
                 });
             }
@@ -30521,7 +30575,7 @@
              */
             this.documentShiftKeyDown = false;
             this.tableValidator = new TableValidator();
-            this.updateTracker = new UpdateTracker(this);
+            this.tableUpdateTracker = new TableUpdateTracker(this);
             this.columnNotifiers = [];
             this.isInitialized = false;
             this.collapsedRows = new Set();
@@ -30686,7 +30740,7 @@
                     this.tableValidator.validateColumnConfigurations(this.columns);
                 }
                 else {
-                    this.updateTracker.trackColumnPropertyChanged(args);
+                    this.tableUpdateTracker.trackColumnPropertyChanged(args);
                 }
             }
         }
@@ -30786,16 +30840,16 @@
          */
         update() {
             this.validate();
-            if (this.updateTracker.requiresTanStackUpdate) {
+            if (this.tableUpdateTracker.requiresTanStackUpdate) {
                 this.updateTanStack();
             }
-            if (this.updateTracker.updateActionMenuSlots) {
+            if (this.tableUpdateTracker.updateActionMenuSlots) {
                 this.updateActionMenuSlots();
             }
-            if (this.updateTracker.updateColumnWidths) {
+            if (this.tableUpdateTracker.updateColumnWidths) {
                 this.updateRowGridColumns();
             }
-            if (this.updateTracker.updateGroupRows) {
+            if (this.tableUpdateTracker.updateGroupRows) {
                 this.showCollapseAll = this.getColumnsParticipatingInGrouping().length > 0;
             }
         }
@@ -30813,20 +30867,20 @@
             if (!this.$fastController.isConnected) {
                 return;
             }
-            this.updateTracker.trackSelectionModeChanged();
+            this.tableUpdateTracker.trackSelectionModeChanged();
         }
         idFieldNameChanged(_prev, _next) {
             if (!this.$fastController.isConnected) {
                 return;
             }
-            this.updateTracker.trackIdFieldNameChanged();
+            this.tableUpdateTracker.trackIdFieldNameChanged();
         }
         columnsChanged(_prev, _next) {
             if (!this.$fastController.isConnected) {
                 return;
             }
             this.observeColumns();
-            this.updateTracker.trackColumnInstancesChanged();
+            this.tableUpdateTracker.trackColumnInstancesChanged();
         }
         async handleActionMenuBeforeToggleEvent(rowIndex, event) {
             const selectionChanged = this.selectionManager.handleActionMenuOpening(this.tableData[rowIndex]);
@@ -30867,13 +30921,13 @@
             this.isInitialized = true;
             // Initialize the controller to ensure that FAST functionality such as Observables work as expected.
             this.$fastController.onConnectedCallback();
-            this.updateTracker.trackAllStateChanged();
+            this.tableUpdateTracker.trackAllStateChanged();
             this.observeColumns();
         }
         async processPendingUpdates() {
             this.initialize();
             await DOM.nextUpdate();
-            if (this.updateTracker.hasPendingUpdates) {
+            if (this.tableUpdateTracker.hasPendingUpdates) {
                 throw new Error('Expected pending updates to be resolved');
             }
         }
@@ -30911,28 +30965,28 @@
         updateTanStack() {
             const updatedOptions = {};
             updatedOptions.state = {};
-            if (this.updateTracker.updateColumnSort) {
+            if (this.tableUpdateTracker.updateColumnSort) {
                 updatedOptions.state.sorting = this.calculateTanStackSortState();
             }
-            if (this.updateTracker.updateColumnDefinition) {
+            if (this.tableUpdateTracker.updateColumnDefinition) {
                 updatedOptions.columns = this.calculateTanStackColumns();
             }
-            if (this.updateTracker.updateRowIds) {
+            if (this.tableUpdateTracker.updateRowIds) {
                 updatedOptions.getRowId = this.calculateTanStackRowIdFunction();
                 updatedOptions.state.rowSelection = {};
                 this.selectionManager.handleSelectionReset();
             }
-            if (this.updateTracker.updateSelectionMode) {
+            if (this.tableUpdateTracker.updateSelectionMode) {
                 updatedOptions.enableMultiRowSelection = this.selectionMode === TableRowSelectionMode.multiple;
                 updatedOptions.enableSubRowSelection = this.selectionMode === TableRowSelectionMode.multiple;
                 updatedOptions.state.rowSelection = {};
                 this.selectionManager.handleSelectionModeChanged(this.selectionMode);
             }
-            if (this.updateTracker.requiresTanStackDataReset) {
+            if (this.tableUpdateTracker.requiresTanStackDataReset) {
                 // Perform a shallow copy of the data to trigger tanstack to regenerate the row models and columns.
                 updatedOptions.data = [...this.table.options.data];
             }
-            if (this.updateTracker.updateGroupRows) {
+            if (this.tableUpdateTracker.updateGroupRows) {
                 updatedOptions.state.grouping = this.calculateTanStackGroupingState();
                 updatedOptions.state.expanded = true;
                 this.collapsedRows.clear();