@ni/nimble-components 22.0.1 → 22.1.0

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 14 Mar 2024 14:32:10 GMT
+   * Generated on Mon, 18 Mar 2024 16:55:50 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -24212,7 +24212,9 @@
       tableGroupSelectAllLabel: 'Select all rows in group',
       tableRowSelectLabel: 'Select row',
       tableRowOperationColumnLabel: 'Row operations',
-      tableRowLoadingLabel: 'Loading'
+      tableRowLoadingLabel: 'Loading',
+      tableGroupRowPlaceholderNoValueLabel: 'No value',
+      tableGroupRowPlaceholderEmptyLabel: 'Empty'
   };
 
   const tableGroupCollapseLabel = DesignToken.create({
@@ -24271,6 +24273,14 @@
       name: 'table-row-loading-label',
       cssCustomPropertyName: null
   }).withDefault(tableLabelDefaults.tableRowLoadingLabel);
+  const tableGroupRowPlaceholderNoValueLabel = DesignToken.create({
+      name: 'table-group-row-placeholder-no-value-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableGroupRowPlaceholderNoValueLabel);
+  const tableGroupRowPlaceholderEmptyLabel = DesignToken.create({
+      name: 'table-group-row-placeholder-empty-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableGroupRowPlaceholderEmptyLabel);
 
   const supportedLabels = {
       groupCollapse: tableGroupCollapseLabel,
@@ -24286,7 +24296,9 @@
       groupSelectAll: tableGroupSelectAllLabel,
       rowSelect: tableRowSelectLabel,
       rowOperationColumn: tableRowOperationColumnLabel,
-      rowLoading: tableRowLoadingLabel
+      rowLoading: tableRowLoadingLabel,
+      groupRowPlaceholderNoValue: tableGroupRowPlaceholderNoValueLabel,
+      groupRowPlaceholderEmpty: tableGroupRowPlaceholderEmptyLabel
   };
   /**
    * Label provider for the Nimble table (and its sub-components and columns)
@@ -24339,6 +24351,12 @@
   __decorate$1([
       attr({ attribute: 'row-loading' })
   ], LabelProviderTable.prototype, "rowLoading", void 0);
+  __decorate$1([
+      attr({ attribute: 'group-row-placeholder-no-value' })
+  ], LabelProviderTable.prototype, "groupRowPlaceholderNoValue", void 0);
+  __decorate$1([
+      attr({ attribute: 'group-row-placeholder-empty' })
+  ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table'
   });
@@ -67144,8 +67162,59 @@ img.ProseMirror-separator {
           this.hasOverflow = false;
           /**
            * Text to render in the cell.
+           *
+           * The value is initialized to `tableGroupRowPlaceholderNoValue` because if the group
+           * row never has a value defined on it, the change handlers may never get called but
+           * the text needs to be correct.
            */
-          this.text = '';
+          this.text = tableGroupRowPlaceholderNoValueLabel.getValueFor(this);
+          this.noValuePlaceholderLabelSubscriber = {
+              handleChange: () => {
+                  this.applyPlaceholderTextIfNeeded();
+              }
+          };
+          this.emptyPlaceholderLabelSubscriber = {
+              handleChange: () => {
+                  this.applyPlaceholderTextIfNeeded();
+              }
+          };
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          tableGroupRowPlaceholderNoValueLabel.subscribe(this.noValuePlaceholderLabelSubscriber, this);
+          tableGroupRowPlaceholderEmptyLabel.subscribe(this.emptyPlaceholderLabelSubscriber, this);
+          this.applyPlaceholderTextIfNeeded();
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          tableGroupRowPlaceholderNoValueLabel.unsubscribe(this.noValuePlaceholderLabelSubscriber);
+          tableGroupRowPlaceholderEmptyLabel.unsubscribe(this.emptyPlaceholderLabelSubscriber);
+      }
+      columnConfigChanged() {
+          if (!this.applyPlaceholderTextIfNeeded()) {
+              this.updateText();
+          }
+      }
+      groupHeaderValueChanged() {
+          if (!this.applyPlaceholderTextIfNeeded()) {
+              this.updateText();
+          }
+      }
+      /**
+       * Sets `this.text` to the appropriate placeholder if `groupHeaderValue` warrants it.
+       * @returns `true` if `this.text` was set to a placeholder, `false` otherwise.
+       */
+      applyPlaceholderTextIfNeeded() {
+          if (this.groupHeaderValue === null
+              || this.groupHeaderValue === undefined) {
+              this.text = tableGroupRowPlaceholderNoValueLabel.getValueFor(this);
+              return true;
+          }
+          if (this.groupHeaderValue === '') {
+              this.text = tableGroupRowPlaceholderEmptyLabel.getValueFor(this);
+              return true;
+          }
+          return false;
       }
   }
   __decorate$1([
@@ -67178,7 +67247,7 @@ img.ProseMirror-separator {
    * The group header view for displaying string fields as text.
    */
   class TableColumnTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-      groupHeaderValueChanged() {
+      updateText() {
           this.text = typeof this.groupHeaderValue === 'string'
               ? this.groupHeaderValue
               : '';
@@ -67338,12 +67407,6 @@ img.ProseMirror-separator {
    * The group header view for displaying date/time fields as text.
    */
   class TableColumnDateTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-      columnConfigChanged() {
-          this.updateText();
-      }
-      groupHeaderValueChanged() {
-          this.updateText();
-      }
       updateText() {
           if (this.columnConfig) {
               this.text = formatNumericDate(this.columnConfig.formatter, this.groupHeaderValue);
@@ -67867,12 +67930,6 @@ img.ProseMirror-separator {
    * The group header view for displaying duration fields as text.
    */
   class TableColumnDurationTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-      columnConfigChanged() {
-          this.updateText();
-      }
-      groupHeaderValueChanged() {
-          this.updateText();
-      }
       updateText() {
           if (this.columnConfig) {
               this.text = this.columnConfig.formatter.format(this.groupHeaderValue);
@@ -68179,19 +68236,8 @@ img.ProseMirror-separator {
    * A group header view for enum columns
    */
   class TableColumnEnumTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-      columnConfigChanged() {
-          this.updateText();
-      }
-      groupHeaderValueChanged() {
-          this.updateText();
-      }
       updateText() {
-          const value = this.groupHeaderValue;
-          if (value === undefined || value === null) {
-              this.text = '';
-              return;
-          }
-          const config = this.columnConfig?.mappingConfigs.get(value);
+          const config = this.columnConfig?.mappingConfigs.get(this.groupHeaderValue);
           this.text = config instanceof MappingTextConfig && config.text
               ? config.text
               : '';
@@ -68265,12 +68311,6 @@ img.ProseMirror-separator {
    * The group header view for displaying number fields as text.
    */
   class TableColumnNumberTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-      columnConfigChanged() {
-          this.updateText();
-      }
-      groupHeaderValueChanged() {
-          this.updateText();
-      }
       updateText() {
           this.text = this.columnConfig?.formatter?.format(this.groupHeaderValue) ?? '';
       }
@@ -68937,6 +68977,12 @@ img.ProseMirror-separator {
             title="${x => (x.hasOverflow && x.text ? x.text : null)}"
         >${x => x.text}</span>
     `)}
+    ${when(x => x.visual === undefined, html `
+        <span    
+            ${overflow('hasOverflow')}
+            title="${x => (x.hasOverflow && x.text ? x.text : null)}"
+        >${x => x.text}</span>
+    `)}
 `;
 
   // Create an empty template containing only a space because creating a ViewTemplate
@@ -68982,21 +69028,13 @@ img.ProseMirror-separator {
    * The group header view for the icon column
    */
   class TableColumnIconGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-      columnConfigChanged() {
-          this.updateState();
-      }
-      groupHeaderValueChanged() {
-          this.updateState();
-      }
-      updateState() {
+      updateText() {
           this.visual = undefined;
           if (!this.columnConfig) {
+              this.text = '';
               return;
           }
           const value = this.groupHeaderValue;
-          if (value === undefined || value === null) {
-              return;
-          }
           const mappingConfig = this.columnConfig.mappingConfigs.get(value);
           if (mappingConfig instanceof MappingIconConfig) {
               this.visual = 'icon';