@ni/nimble-components 22.0.0 → 22.1.0

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 13 Mar 2024 22:51:24 GMT
+   * Generated on Mon, 18 Mar 2024 16:55:50 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -17124,6 +17124,10 @@
         color: ${linkProminentDisabledFontColor};
     }
 
+    .content {
+        pointer-events: none;
+    }
+
     [part='end'] {
         display: none;
     }
@@ -17618,6 +17622,18 @@
     .control {
         text-decoration: none;
     }
+
+    [part='start'] {
+        pointer-events: none;
+    }
+
+    .content {
+        pointer-events: none;
+    }
+
+    [part='end'] {
+        pointer-events: none;
+    }
 `;
 
   const template$D = (context, definition) => html `
@@ -17767,6 +17783,7 @@
 
     [part='start'] {
         display: contents;
+        pointer-events: none;
     }
 
     slot[name='start']::slotted(*) {
@@ -17779,6 +17796,10 @@
         grid-column: 1;
     }
 
+    .content {
+        pointer-events: none;
+    }
+
     :host(.indent-1) .content {
         grid-column: 2;
     }
@@ -17950,6 +17971,7 @@
     }
 
     slot:not([name]) {
+        pointer-events: none;
         display: block;
         padding: ${mediumPadding} ${standardPadding}
             calc(${mediumPadding} - ${borderWidth});
@@ -18415,6 +18437,7 @@
 /* this rule keeps children without an icon text aligned with parents */ ''}
     [part="start"] {
         width: ${iconSize};
+        pointer-events: none;
     }
 
     ${ /* the start class is applied when the corresponding slot is filled */''}
@@ -18430,6 +18453,10 @@
         height: ${iconSize};
     }
 
+    .content {
+        pointer-events: none;
+    }
+
     [part='end'] {
         display: none;
     }
@@ -20028,6 +20055,10 @@
         display: none;
     }
 
+    .content {
+        pointer-events: none;
+    }
+
     [part='end'] {
         display: none;
     }
@@ -24181,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({
@@ -24240,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,
@@ -24255,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)
@@ -24308,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'
   });
@@ -67113,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([
@@ -67147,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
               : '';
@@ -67307,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);
@@ -67836,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);
@@ -68148,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
               : '';
@@ -68234,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) ?? '';
       }
@@ -68906,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
@@ -68951,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';