@ni/nimble-components 25.1.0 → 26.0.0

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 18 Apr 2024 21:31:08 GMT
+   * Generated on Mon, 22 Apr 2024 14:57:19 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -24956,7 +24956,7 @@
 
   /**
    * Defines a mapping from one data value ('key' property) to display text ('text' property).
-   * One or more may be added as children of a nimble-table-column-enum-text element to define
+   * One or more may be added as children of a nimble-table-column-icon element to define
    * how a specific data value should be displayed as text in that column's cells.
    */
   class MappingText extends Mapping$1 {
@@ -43861,7 +43861,7 @@ img.ProseMirror-separator {
             ${ref('mentionListbox')}
             @mention-selected=${(x, c) => x.onMentionSelect(c.event)}
         >
-            ${repeat(x => Array.from(x.activeMappingConfigs?.values() ?? []), html `
+            ${repeat(x => Array.from(x.activeMappingConfigs ? x.activeMappingConfigs.values() : []), html `
                 <${listOptionTag} value="${x => x.mentionHref}">${x => x.displayName}</${listOptionTag}>
             `, { recycle: false })}
         </${richTextMentionListboxTag}>
@@ -64368,10 +64368,10 @@ img.ProseMirror-separator {
                 @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
                 @click="${(_, c) => c.event.stopPropagation()}"
                 class="action-menu"
-                title="${x => x.actionMenuLabel ?? tableCellActionMenuLabel.getValueFor(x)}"
+                title="${x => (x.actionMenuLabel ? x.actionMenuLabel : tableCellActionMenuLabel.getValueFor(x))}"
             >
                 <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
-                ${x => x.actionMenuLabel ?? tableCellActionMenuLabel.getValueFor(x)}
+                ${x => (x.actionMenuLabel ? x.actionMenuLabel : tableCellActionMenuLabel.getValueFor(x))}
                 <slot name="cellActionMenu" slot="menu"></slot>
             </${menuButtonTag}>
         `)}
@@ -65020,7 +65020,7 @@ img.ProseMirror-separator {
             --ni-private-table-header-container-margin-right: ${x => x.virtualizer.headerContainerMarginRight}px;
             --ni-private-table-scroll-height: ${x => x.virtualizer.scrollHeight}px;
             --ni-private-table-row-container-top: ${x => x.virtualizer.rowContainerYOffset}px;
-            --ni-private-table-row-grid-columns: ${x => x.rowGridColumns ?? ''};
+            --ni-private-table-row-grid-columns: ${x => (x.rowGridColumns ? x.rowGridColumns : '')};
             --ni-private-table-cursor-override: ${x => (x.layoutManager.isColumnBeingSized ? 'col-resize' : 'default')};
             --ni-private-table-scrollable-min-width: ${x => x.tableScrollableMinWidth}px;
             --ni-private-glass-overlay-pointer-events: ${x => (x.layoutManager.isColumnBeingSized ? 'none' : 'default')};
@@ -65038,7 +65038,7 @@ img.ProseMirror-separator {
                                 <span class="checkbox-container">
                                     <${checkboxTag}
                                         ${ref('selectionCheckbox')}
-                                        class="${x => `selection-checkbox ${x.selectionMode ?? ''}`}"
+                                        class="${x => `selection-checkbox ${x.selectionMode ? x.selectionMode : ''}`}"
                                         @change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
                                         title="${x => tableSelectAllLabel.getValueFor(x)}"
                                         aria-label="${x => tableSelectAllLabel.getValueFor(x)}"
@@ -68790,289 +68790,10 @@ img.ProseMirror-separator {
       .withPrefix('nimble')
       .register(nimbleTableColumnDurationText());
 
-  /**
-   * Converts a Mapping key (which is a string when configured in HTML) to the
-   * given keyType. The converted value can then be used to compare against
-   * values in the table data.
-   */
-  const resolveKeyWithType = (key, keyType) => {
-      if (keyType === 'number') {
-          const converted = nullableNumberConverter.fromView(key);
-          return converted === null ? undefined : converted;
-      }
-      if (keyType === 'boolean') {
-          if (key === false || key === 'false') {
-              return false;
-          }
-          if (key === true || key === 'true') {
-              return true;
-          }
-          return undefined;
-      }
-      return key?.toString() ?? undefined;
-  };
-
-  /**
-   * Base class for table columns that map values to content (e.g. nimble-table-column-enum-text and nimble-table-column-icon)
-   */
-  class TableColumnEnumBase extends TableColumn {
-      constructor() {
-          super(...arguments);
-          /** @internal */
-          this.mappingNotifiers = [];
-          /** @internal */
-          this.mappings = [];
-          this.keyType = 'string';
-      }
-      /**
-       * @internal
-       *
-       * Triggers a request to update the columnConfig when any observable property on
-       * a mapping is updated.
-       */
-      handleChange(source, args) {
-          if (source instanceof Mapping$1 && typeof args === 'string') {
-              this.updateColumnConfig();
-          }
-      }
-      /**
-       * Called when any Mapping related state has changed.
-       */
-      updateColumnConfig() {
-          this.columnInternals.validator.validate(this.mappings, this.keyType);
-          this.columnInternals.columnConfig = this.checkValidity()
-              ? this.createColumnConfig(this.getMappingConfigs())
-              : undefined;
-      }
-      getMappingConfigs() {
-          const mappingConfigs = new Map();
-          this.mappings.forEach(mapping => {
-              const key = resolveKeyWithType(mapping.key, this.keyType);
-              if (key === undefined) {
-                  throw Error('Key was invalid for type. Validation should have prevented this.');
-              }
-              const mappingConfig = this.createMappingConfig(mapping);
-              mappingConfigs.set(key, mappingConfig);
-          });
-          return mappingConfigs;
-      }
-      fieldNameChanged() {
-          this.columnInternals.dataRecordFieldNames = [this.fieldName];
-          this.columnInternals.operandDataRecordFieldName = this.fieldName;
-      }
-      mappingsChanged() {
-          this.updateColumnConfig();
-          this.observeMappings();
-      }
-      keyTypeChanged() {
-          this.updateColumnConfig();
-      }
-      removeMappingObservers() {
-          this.mappingNotifiers.forEach(notifier => {
-              notifier.unsubscribe(this);
-          });
-          this.mappingNotifiers = [];
-      }
-      observeMappings() {
-          this.removeMappingObservers();
-          for (const mapping of this.mappings) {
-              const notifier = Observable.getNotifier(mapping);
-              notifier.subscribe(this);
-              this.mappingNotifiers.push(notifier);
-          }
-      }
-  }
-  __decorate$1([
-      observable
-  ], TableColumnEnumBase.prototype, "mappings", void 0);
-  __decorate$1([
-      attr({ attribute: 'field-name' })
-  ], TableColumnEnumBase.prototype, "fieldName", void 0);
-  __decorate$1([
-      attr({ attribute: 'key-type' })
-  ], TableColumnEnumBase.prototype, "keyType", void 0);
-
-  const styles$a = css `
-    ${styles$e}
-
-    slot[name='mapping'] {
-        display: none;
-    }
-`;
-
-  const template$9 = html `${template$d}<slot ${slotted('mappings')} name="mapping"></slot>`;
-
-  const enumBaseValidityFlagNames = [
-      'invalidMappingKeyValueForType',
-      'duplicateMappingKey',
-      'missingKeyValue'
-  ];
-  /**
-   * Validator for TableColumnEnumText. Implementations MUST include enumBaseValidityFlagNames in validity flag names set.
-   */
-  class TableColumnEnumBaseValidator extends ColumnValidator {
-      constructor(configValidityKeys) {
-          super(configValidityKeys);
-      }
-      validate(mappings, keyType) {
-          this.untrackAll();
-          const keys = mappings.map(mapping => mapping.key);
-          this.validateKeyValuesForType(keys, keyType);
-          this.validateUniqueKeys(keys, keyType);
-          this.validateNoMissingKeys(mappings);
-      }
-      validateKeyValuesForType(keys, keyType) {
-          // Ignore undefined keys, because validateNoMissingKeys covers that case.
-          // We should only set 'invalidMappingKeyValueForType' when there is a key,
-          // but it isn't appropriate for the type.
-          const invalid = keys.some(key => key !== undefined
-              && resolveKeyWithType(key, keyType) === undefined);
-          this.setConditionValue('invalidMappingKeyValueForType', invalid);
-      }
-      validateUniqueKeys(keys, keyType) {
-          const typedKeys = keys.map(x => resolveKeyWithType(x, keyType));
-          const invalid = new Set(typedKeys).size !== typedKeys.length;
-          this.setConditionValue('duplicateMappingKey', invalid);
-      }
-      validateNoMissingKeys(mappings) {
-          const invalid = mappings.some(mapping => mapping.key === undefined);
-          this.setConditionValue('missingKeyValue', invalid);
-      }
-  }
-
-  const enumTextValidityFlagNames = [
-      ...enumBaseValidityFlagNames,
-      'unsupportedMappingType',
-      'missingTextValue'
-  ];
-  /**
-   * Validator for TableColumnEnumText
-   */
-  class TableColumnEnumTextValidator extends TableColumnEnumBaseValidator {
-      constructor() {
-          super(enumTextValidityFlagNames);
-      }
-      static isSupportedMappingElement(mapping) {
-          return mapping instanceof MappingText;
-      }
-      validate(mappings, keyType) {
-          super.validate(mappings, keyType);
-          this.validateMappingTypes(mappings);
-          this.validateNoMissingText(mappings);
-      }
-      validateNoMissingText(mappings) {
-          const invalid = mappings
-              .filter(TableColumnEnumTextValidator.isSupportedMappingElement)
-              .some(mapping => mapping.text === undefined);
-          this.setConditionValue('missingTextValue', invalid);
-      }
-      validateMappingTypes(mappings) {
-          const valid = mappings.every(TableColumnEnumTextValidator.isSupportedMappingElement);
-          this.setConditionValue('unsupportedMappingType', !valid);
-      }
-  }
-
-  /**
-   * Common state shared across Mapping Config
-   */
-  class MappingConfig {
-      constructor(text) {
-          this.text = text;
-      }
-  }
-
-  /**
-   * Mapping configuration corresponding to a text mapping
-   */
-  class MappingTextConfig extends MappingConfig {
-  }
-
-  /**
-   * A cell view for displaying mapped text
-   */
-  class TableColumnEnumTextCellView extends TableColumnTextCellViewBase {
-      updateText() {
-          const value = this.cellRecord?.value;
-          if (value === undefined || value === null) {
-              this.text = '';
-              return;
-          }
-          const config = this.columnConfig?.mappingConfigs.get(value);
-          this.text = config instanceof MappingTextConfig && config.text
-              ? config.text
-              : '';
-      }
-  }
-  const enumTextCellView = TableColumnEnumTextCellView.compose({
-      baseName: 'table-column-enum-text-cell-view',
-      template: template$a,
-      styles: styles$b
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(enumTextCellView());
-  const tableColumnEnumTextCellViewTag = 'nimble-table-column-enum-text-cell-view';
-
-  /**
-   * A group header view for enum columns
-   */
-  class TableColumnEnumTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-      updateText() {
-          const config = this.columnConfig?.mappingConfigs.get(this.groupHeaderValue);
-          this.text = config instanceof MappingTextConfig && config.text
-              ? config.text
-              : '';
-      }
-  }
-  const enumTextGroupHeaderView = TableColumnEnumTextGroupHeaderView.compose({
-      baseName: 'table-column-enum-text-group-header-view',
-      template: template$b,
-      styles: styles$c
-  });
-  DesignSystem.getOrCreate()
-      .withPrefix('nimble')
-      .register(enumTextGroupHeaderView());
-  const tableColumnEnumTextGroupHeaderViewTag = 'nimble-table-column-enum-text-group-header-view';
-
-  /**
-   * Table column that maps values to strings
-   */
-  class TableColumnEnumText extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumnEnumBase))) {
-      getColumnInternalsOptions() {
-          return {
-              cellRecordFieldNames: ['value'],
-              cellViewTag: tableColumnEnumTextCellViewTag,
-              groupHeaderViewTag: tableColumnEnumTextGroupHeaderViewTag,
-              delegatedEvents: [],
-              sortOperation: TableColumnSortOperation.basic,
-              validator: new TableColumnEnumTextValidator()
-          };
-      }
-      createColumnConfig(mappingConfigs) {
-          return {
-              mappingConfigs
-          };
-      }
-      createMappingConfig(mapping) {
-          if (mapping instanceof MappingText) {
-              return new MappingTextConfig(mapping.text);
-          }
-          // Getting here would indicate a programming error, b/c validation will prevent
-          // this function from running when there is an unsupported mapping.
-          throw new Error('Unsupported mapping');
-      }
-  }
-  const nimbleTableColumnEnumText = TableColumnEnumText.compose({
-      baseName: 'table-column-enum-text',
-      template: template$9,
-      styles: styles$a
-  });
-  DesignSystem.getOrCreate()
-      .withPrefix('nimble')
-      .register(nimbleTableColumnEnumText());
-
   // Avoiding a wrapping <template> and be careful about starting and ending whitespace
   // so the template can be composed into other column header templates
   // prettier-ignore
-  const template$8 = html `<span
+  const template$9 = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -69654,13 +69375,163 @@ img.ProseMirror-separator {
   ], TableColumnNumberText.prototype, "unit", void 0);
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
-      template: template$8,
+      template: template$9,
       styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnNumberText());
 
+  /**
+   * Converts a Mapping key (which is a string when configured in HTML) to the
+   * given keyType. The converted value can then be used to compare against
+   * values in the table data.
+   */
+  const resolveKeyWithType = (key, keyType) => {
+      if (keyType === 'number') {
+          const converted = nullableNumberConverter.fromView(key);
+          return converted === null ? undefined : converted;
+      }
+      if (keyType === 'boolean') {
+          if (key === false || key === 'false') {
+              return false;
+          }
+          if (key === true || key === 'true') {
+              return true;
+          }
+          return undefined;
+      }
+      return key?.toString() ?? undefined;
+  };
+
+  /**
+   * Base class for table columns that map values to content
+   */
+  class TableColumnEnumBase extends TableColumn {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.mappingNotifiers = [];
+          /** @internal */
+          this.mappings = [];
+          this.keyType = 'string';
+      }
+      /**
+       * @internal
+       *
+       * Triggers a request to update the columnConfig when any observable property on
+       * a mapping is updated.
+       */
+      handleChange(source, args) {
+          if (source instanceof Mapping$1 && typeof args === 'string') {
+              this.updateColumnConfig();
+          }
+      }
+      /**
+       * Called when any Mapping related state has changed.
+       */
+      updateColumnConfig() {
+          this.columnInternals.validator.validate(this.mappings, this.keyType);
+          this.columnInternals.columnConfig = this.checkValidity()
+              ? this.createColumnConfig(this.getMappingConfigs())
+              : undefined;
+      }
+      getMappingConfigs() {
+          const mappingConfigs = new Map();
+          this.mappings.forEach(mapping => {
+              const key = resolveKeyWithType(mapping.key, this.keyType);
+              if (key === undefined) {
+                  throw Error('Key was invalid for type. Validation should have prevented this.');
+              }
+              const mappingConfig = this.createMappingConfig(mapping);
+              mappingConfigs.set(key, mappingConfig);
+          });
+          return mappingConfigs;
+      }
+      fieldNameChanged() {
+          this.columnInternals.dataRecordFieldNames = [this.fieldName];
+          this.columnInternals.operandDataRecordFieldName = this.fieldName;
+      }
+      mappingsChanged() {
+          this.updateColumnConfig();
+          this.observeMappings();
+      }
+      keyTypeChanged() {
+          this.updateColumnConfig();
+      }
+      removeMappingObservers() {
+          this.mappingNotifiers.forEach(notifier => {
+              notifier.unsubscribe(this);
+          });
+          this.mappingNotifiers = [];
+      }
+      observeMappings() {
+          this.removeMappingObservers();
+          for (const mapping of this.mappings) {
+              const notifier = Observable.getNotifier(mapping);
+              notifier.subscribe(this);
+              this.mappingNotifiers.push(notifier);
+          }
+      }
+  }
+  __decorate$1([
+      observable
+  ], TableColumnEnumBase.prototype, "mappings", void 0);
+  __decorate$1([
+      attr({ attribute: 'field-name' })
+  ], TableColumnEnumBase.prototype, "fieldName", void 0);
+  __decorate$1([
+      attr({ attribute: 'key-type' })
+  ], TableColumnEnumBase.prototype, "keyType", void 0);
+
+  const styles$a = css `
+    ${styles$e}
+
+    slot[name='mapping'] {
+        display: none;
+    }
+`;
+
+  const template$8 = html `${template$d}<slot ${slotted('mappings')} name="mapping"></slot>`;
+
+  const enumBaseValidityFlagNames = [
+      'invalidMappingKeyValueForType',
+      'duplicateMappingKey',
+      'missingKeyValue'
+  ];
+  /**
+   * Validator base class for table columns containing mappings. Implementations MUST include enumBaseValidityFlagNames in validity flag names set.
+   */
+  class TableColumnEnumBaseValidator extends ColumnValidator {
+      constructor(configValidityKeys) {
+          super(configValidityKeys);
+      }
+      validate(mappings, keyType) {
+          this.untrackAll();
+          const keys = mappings.map(mapping => mapping.key);
+          this.validateKeyValuesForType(keys, keyType);
+          this.validateUniqueKeys(keys, keyType);
+          this.validateNoMissingKeys(mappings);
+      }
+      validateKeyValuesForType(keys, keyType) {
+          // Ignore undefined keys, because validateNoMissingKeys covers that case.
+          // We should only set 'invalidMappingKeyValueForType' when there is a key,
+          // but it isn't appropriate for the type.
+          const invalid = keys.some(key => key !== undefined
+              && resolveKeyWithType(key, keyType) === undefined);
+          this.setConditionValue('invalidMappingKeyValueForType', invalid);
+      }
+      validateUniqueKeys(keys, keyType) {
+          const typedKeys = keys.map(x => resolveKeyWithType(x, keyType));
+          const invalid = new Set(typedKeys).size !== typedKeys.length;
+          this.setConditionValue('duplicateMappingKey', invalid);
+      }
+      validateNoMissingKeys(mappings) {
+          const invalid = mappings.some(mapping => mapping.key === undefined);
+          this.setConditionValue('missingKeyValue', invalid);
+      }
+  }
+
   const iconValidityFlagNames = [
       ...enumBaseValidityFlagNames,
       'unsupportedMappingType',
@@ -69760,6 +69631,15 @@ img.ProseMirror-separator {
       information: 'information'
   };
 
+  /**
+   * Common state shared across Mapping Config
+   */
+  class MappingConfig {
+      constructor(text) {
+          this.text = text;
+      }
+  }
+
   // Create an empty template containing only a space because creating a ViewTemplate
   // with an empty string throws an exception at runtime.
   // prettier-ignore
@@ -69810,6 +69690,12 @@ img.ProseMirror-separator {
       }
   }
 
+  /**
+   * Mapping configuration corresponding to a text mapping
+   */
+  class MappingTextConfig extends MappingConfig {
+  }
+
   /**
    * The group header view for the icon column
    */
@@ -70008,7 +69894,7 @@ img.ProseMirror-separator {
   }
   const nimbleTableColumnIcon = TableColumnIcon.compose({
       baseName: 'table-column-icon',
-      template: template$9,
+      template: template$8,
       styles: styles$a
   });
   DesignSystem.getOrCreate()