@ni/nimble-components 24.0.1 → 24.1.0

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 27 Mar 2024 11:47:50 GMT
+   * Generated on Wed, 27 Mar 2024 18:37:38 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -67023,6 +67023,21 @@ img.ProseMirror-separator {
       return GroupableColumn;
   }
 
+  // As the returned class is internal to the function, we can't write a signature that uses it directly, so rely on inference
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+  function mixinColumnWithPlaceholderAPI(base) {
+      /**
+       * The Mixin that provides a concrete column with the API to allow grouping
+       * by the values in that column.
+       */
+      class ColumnWithPlaceholder extends base {
+      }
+      attr({ attribute: 'placeholder' })(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      ColumnWithPlaceholder.prototype, 'placeholder');
+      return ColumnWithPlaceholder;
+  }
+
   const styles$c = css `
     :host {
         width: fit-content;
@@ -67044,6 +67059,11 @@ img.ProseMirror-separator {
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    :host(.placeholder) span {
+        font: ${placeholderFont};
+        color: ${placeholderFontColor};
+    }
 `;
 
   /* eslint-disable @typescript-eslint/indent */
@@ -67056,6 +67076,7 @@ img.ProseMirror-separator {
     }
     return true;
 }}"
+        class="${x => (x.isPlaceholder ? 'placeholder' : '')}"
     >
         ${when(x => typeof x.cellRecord?.href === 'string', html `
             <${anchorTag}
@@ -67093,8 +67114,17 @@ img.ProseMirror-separator {
           super(...arguments);
           /** @internal */
           this.hasOverflow = false;
+          /** @internal */
+          this.isPlaceholder = false;
       }
       get text() {
+          const displayedText = this.cellRecord?.label ?? this.cellRecord?.href;
+          if ((displayedText === undefined || displayedText === null)
+              && this.columnConfig?.placeholder) {
+              this.isPlaceholder = true;
+              return this.columnConfig.placeholder;
+          }
+          this.isPlaceholder = false;
           if (typeof this.cellRecord?.label === 'string') {
               return this.cellRecord.label;
           }
@@ -67110,6 +67140,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], TableColumnAnchorCellView.prototype, "hasOverflow", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnAnchorCellView.prototype, "isPlaceholder", void 0);
   __decorate$1([
       volatile
   ], TableColumnAnchorCellView.prototype, "text", null);
@@ -67235,11 +67268,14 @@ img.ProseMirror-separator {
   /**
    * A table column for displaying links.
    */
-  class TableColumnAnchor extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumn))) {
+  class TableColumnAnchor extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI((TableColumn)))) {
       constructor() {
           super(...arguments);
           this.underlineHidden = false;
       }
+      placeholderChanged() {
+          this.updateColumnConfig();
+      }
       getColumnInternalsOptions() {
           return {
               cellRecordFieldNames: ['label', 'href'],
@@ -67299,7 +67335,8 @@ img.ProseMirror-separator {
               rel: this.rel,
               target: this.target,
               type: this.type,
-              download: this.download
+              download: this.download,
+              placeholder: this.placeholder
           };
       }
   }
@@ -67348,7 +67385,7 @@ img.ProseMirror-separator {
   /**
    * The base class for table columns that display fields of any type as text.
    */
-  class TableColumnTextBase extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(TableColumn)) {
+  class TableColumnTextBase extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(TableColumn))) {
       fieldNameChanged() {
           this.columnInternals.dataRecordFieldNames = [this.fieldName];
           this.columnInternals.operandDataRecordFieldName = this.fieldName;
@@ -67403,11 +67440,13 @@ img.ProseMirror-separator {
       right: 'right'
   };
 
+  // prettier-ignore
   const template$a = html `
     <template
-        class="${x => (x.alignment === TextCellViewBaseAlignment.right
-    ? 'right-align'
-    : '')}"
+        class="
+            ${x => (x.alignment === TextCellViewBaseAlignment.right ? 'right-align' : '')}
+            ${x => (x.isPlaceholder ? 'placeholder' : '')}
+        "
     >
         <span
             ${overflow('hasOverflow')}
@@ -67430,6 +67469,11 @@ img.ProseMirror-separator {
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    :host(.placeholder) span {
+        font: ${placeholderFont};
+        color: ${placeholderFontColor};
+    }
 `;
 
   /**
@@ -67448,6 +67492,37 @@ img.ProseMirror-separator {
            * The alignment of the text within the cell.
            */
           this.alignment = TextCellViewBaseAlignment.left;
+          /**
+           * Whether or not the text being displayed in the cell view is a placeholder.
+           */
+          this.isPlaceholder = false;
+      }
+      columnConfigChanged() {
+          if (!this.applyPlaceholderTextIfNeeded()) {
+              this.updateText();
+          }
+      }
+      cellRecordChanged() {
+          if (!this.applyPlaceholderTextIfNeeded()) {
+              this.updateText();
+          }
+      }
+      /**
+       * Sets `this.text` to the appropriate placeholder if `cellValue` warrants it.
+       * @returns `true` if `this.text` was set to a placeholder, `false` otherwise.
+       */
+      applyPlaceholderTextIfNeeded() {
+          const cellValue = this.cellRecord?.value;
+          const placeholder = this.columnConfig?.placeholder;
+          if (typeof placeholder === 'string'
+              && (cellValue === null || cellValue === undefined)) {
+              this.text = placeholder;
+              this.isPlaceholder = true;
+          }
+          else {
+              this.isPlaceholder = false;
+          }
+          return this.isPlaceholder;
       }
   }
   __decorate$1([
@@ -67459,17 +67534,14 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], TableColumnTextCellViewBase.prototype, "alignment", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnTextCellViewBase.prototype, "isPlaceholder", void 0);
 
   /**
    * A cell view for displaying date/time fields as text
    */
   class TableColumnDateTextCellView extends TableColumnTextCellViewBase {
-      columnConfigChanged() {
-          this.updateText();
-      }
-      cellRecordChanged() {
-          this.updateText();
-      }
       updateText() {
           if (this.columnConfig) {
               this.text = formatNumericDate(this.columnConfig.formatter, this.cellRecord?.value);
@@ -67594,6 +67666,9 @@ img.ProseMirror-separator {
       get validity() {
           return this.validator.getValidity();
       }
+      placeholderChanged() {
+          this.updateColumnConfig();
+      }
       getColumnInternalsOptions() {
           return {
               cellRecordFieldNames: ['value'],
@@ -67667,7 +67742,8 @@ img.ProseMirror-separator {
           const formatter = this.createFormatter();
           if (formatter) {
               const columnConfig = {
-                  formatter
+                  formatter,
+                  placeholder: this.placeholder
               };
               this.columnInternals.columnConfig = columnConfig;
               this.validator.setCustomOptionsValidity(true);
@@ -67796,12 +67872,6 @@ img.ProseMirror-separator {
    * A cell view for displaying duration fields as text
    */
   class TableColumnDurationTextCellView extends TableColumnTextCellViewBase {
-      columnConfigChanged() {
-          this.updateText();
-      }
-      cellRecordChanged() {
-          this.updateText();
-      }
       updateText() {
           this.text = this.columnConfig?.formatter.format(this.cellRecord?.value) ?? '';
       }
@@ -67939,6 +68009,9 @@ img.ProseMirror-separator {
           super.disconnectedCallback();
           lang.unsubscribe(this.langSubscriber, this);
       }
+      placeholderChanged() {
+          this.updateColumnConfig();
+      }
       getColumnInternalsOptions() {
           return {
               cellRecordFieldNames: ['value'],
@@ -67950,15 +68023,11 @@ img.ProseMirror-separator {
       }
       updateColumnConfig() {
           const formatter = new DurationFormatter(lang.getValueFor(this));
-          if (formatter) {
-              const columnConfig = {
-                  formatter
-              };
-              this.columnInternals.columnConfig = columnConfig;
-          }
-          else {
-              this.columnInternals.columnConfig = undefined;
-          }
+          const columnConfig = {
+              formatter,
+              placeholder: this.placeholder
+          };
+          this.columnInternals.columnConfig = columnConfig;
       }
   }
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
@@ -68175,12 +68244,6 @@ img.ProseMirror-separator {
    * A cell view for displaying mapped text
    */
   class TableColumnEnumTextCellView extends TableColumnTextCellViewBase {
-      columnConfigChanged() {
-          this.updateText();
-      }
-      cellRecordChanged() {
-          this.updateText();
-      }
       updateText() {
           const value = this.cellRecord?.value;
           if (value === undefined || value === null) {
@@ -68299,12 +68362,9 @@ img.ProseMirror-separator {
    */
   class TableColumnNumberTextCellView extends TableColumnTextCellViewBase {
       columnConfigChanged() {
-          this.updateText();
+          super.columnConfigChanged();
           this.alignment = this.columnConfig?.alignment ?? TextCellViewBaseAlignment.left;
       }
-      cellRecordChanged() {
-          this.updateText();
-      }
       updateText() {
           this.text = this.columnConfig?.formatter?.format(this.cellRecord?.value) ?? '';
       }
@@ -68739,6 +68799,9 @@ img.ProseMirror-separator {
       get validity() {
           return this.validator.getValidity();
       }
+      placeholderChanged() {
+          this.updateColumnConfig();
+      }
       getColumnInternalsOptions() {
           return {
               cellRecordFieldNames: ['value'],
@@ -68793,7 +68856,8 @@ img.ProseMirror-separator {
           if (this.validator.isValid()) {
               const columnConfig = {
                   formatter: this.createFormatter(),
-                  alignment: this.determineCellContentAlignment()
+                  alignment: this.determineCellContentAlignment(),
+                  placeholder: this.placeholder
               };
               this.columnInternals.columnConfig = columnConfig;
           }
@@ -69145,7 +69209,7 @@ img.ProseMirror-separator {
    * A cell view for displaying string fields as text
    */
   class TableColumnTextCellView extends TableColumnTextCellViewBase {
-      cellRecordChanged() {
+      updateText() {
           this.text = typeof this.cellRecord?.value === 'string'
               ? this.cellRecord.value
               : '';
@@ -69163,6 +69227,11 @@ img.ProseMirror-separator {
    * The table column for displaying string fields as text.
    */
   class TableColumnText extends TableColumnTextBase {
+      placeholderChanged() {
+          this.columnInternals.columnConfig = {
+              placeholder: this.placeholder
+          };
+      }
       getColumnInternalsOptions() {
           return {
               cellRecordFieldNames: ['value'],