@ni/nimble-components 27.2.2 → 28.0.0

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 01 May 2024 21:32:12 GMT
+   * Generated on Mon, 06 May 2024 18:46:24 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -17732,11 +17732,6 @@
         font: ${bodyFont};
     }
 
-    :host(:focus-within:not(:active)) {
-        outline: 2px solid ${borderHoverColor};
-        outline-offset: -2px;
-    }
-
     :host(:hover) {
         background: ${fillHoverColor};
     }
@@ -17767,6 +17762,13 @@
         cursor: pointer;
         text-decoration: none;
         outline: none;
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+
+    a${focusVisible} {
+        outline: 2px solid ${borderHoverColor};
+        outline-offset: -2px;
     }
 
     :host([disabled]) a {
@@ -17917,6 +17919,7 @@
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleAnchorMenuItem());
+  const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
   const styles$T = css `
     ${display('inline-flex')}
@@ -24912,7 +24915,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-icon element to define
+   * One or more may be added as children of a nimble-table-column-mapping element to define
    * how a specific data value should be displayed as text in that column's cells.
    */
   class MappingText extends Mapping$1 {
@@ -24931,7 +24934,7 @@
   }
   /**
    * Maps a data value to an icon.
-   * One or more may be added as children of a nimble-table-column-icon element to define
+   * One or more may be added as children of a nimble-table-column-mapping element to define
    * how specific data values should be displayed as icons in that column's cells.
    */
   class MappingIcon extends Mapping$1 {
@@ -24998,7 +25001,7 @@
 
   /**
    * Maps data values to a spinner.
-   * One or more may be added as children of a nimble-table-column-icon element to define
+   * One or more may be added as children of a nimble-table-column-mapping element to define
    * which specific data values should be displayed as spinners in that column's cells.
    */
   class MappingSpinner extends Mapping$1 {
@@ -25038,6 +25041,7 @@
 
     :host([slot='submenu']) {
         margin: 0 ${mediumPadding};
+        cursor: default;
     }
 
     ::slotted(*) {
@@ -25062,6 +25066,10 @@
         padding-top: ${smallPadding};
         padding-bottom: ${smallPadding};
     }
+
+    ::slotted(${anchorMenuItemTag}) {
+        padding: 0px;
+    }
 `.withBehaviors(themeBehavior(Theme.color, css `
             slot {
                 background: ${hexToRgbaCssColor(White, 0.15)};
@@ -68839,211 +68847,769 @@ img.ProseMirror-separator {
       .withPrefix('nimble')
       .register(nimbleTableColumnDurationText());
 
-  // 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$9 = html `<span
-    ${overflow('hasOverflow')}
-    class="header-content"
-    title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
->
-    <slot ${ref('contentSlot')}></slot>
-    <slot ${slotted({ property: 'unitElements', filter: elements() })} name="unit"></slot>
-</span>`;
+  /**
+   * 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;
+  };
 
   /**
-   * The group header view for displaying number fields as text.
+   * Base class for table columns that map values to content
    */
-  class TableColumnNumberTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-      updateText() {
-          this.text = this.columnConfig?.formatter?.format(this.groupHeaderValue) ?? '';
+  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);
+          }
       }
   }
-  const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
-      baseName: 'table-column-number-text-group-header-view',
-      template: template$b,
-      styles: styles$c
-  });
-  DesignSystem.getOrCreate()
-      .withPrefix('nimble')
-      .register(tableColumnNumberTextGroupHeaderView());
-  const tableColumnNumberTextGroupHeaderTag = 'nimble-table-column-number-text-group-header-view';
+  __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'
+  ];
   /**
-   * A cell view for displaying number fields as text
+   * Validator base class for table columns containing mappings. Implementations MUST include enumBaseValidityFlagNames in validity flag names set.
    */
-  class TableColumnNumberTextCellView extends TableColumnTextCellViewBase {
-      columnConfigChanged() {
-          super.columnConfigChanged();
-          this.alignment = this.columnConfig?.alignment ?? TextCellViewBaseAlignment.left;
+  class TableColumnEnumBaseValidator extends ColumnValidator {
+      constructor(configValidityKeys) {
+          super(configValidityKeys);
       }
-      updateText() {
-          this.text = this.columnConfig?.formatter?.format(this.cellRecord?.value) ?? '';
+      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 numberTextCellView = TableColumnNumberTextCellView.compose({
-      baseName: 'table-column-number-text-cell-view',
-      template: template$a,
-      styles: styles$b
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
-  const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
 
+  const mappingColumnValidityFlagNames = [
+      ...enumBaseValidityFlagNames,
+      'unsupportedMappingType',
+      'invalidIconName',
+      'missingTextValue'
+  ];
   /**
-   * Formatting scheme for the number-text table column
+   * Validator for TableColumnMapping
    */
-  const NumberTextFormat = {
-      default: undefined,
-      decimal: 'decimal'
-  };
+  class TableColumnMappingValidator extends TableColumnEnumBaseValidator {
+      constructor() {
+          super(mappingColumnValidityFlagNames);
+      }
+      static isIconMappingElement(mapping) {
+          return mapping instanceof MappingIcon;
+      }
+      static isSupportedMappingElement(mapping) {
+          return (mapping instanceof MappingIcon
+              || mapping instanceof MappingSpinner
+              || mapping instanceof MappingText);
+      }
+      static hasUnresolvedIcon(mappingIcon) {
+          return (typeof mappingIcon.icon === 'string'
+              && mappingIcon.resolvedIcon === undefined);
+      }
+      validate(mappings, keyType) {
+          super.validate(mappings, keyType);
+          this.validateMappingTypes(mappings);
+          this.validateIconNames(mappings);
+          this.validateNoMissingText(mappings);
+      }
+      validateIconNames(mappings) {
+          const invalid = mappings
+              .filter(TableColumnMappingValidator.isIconMappingElement)
+              .some(TableColumnMappingValidator.hasUnresolvedIcon);
+          this.setConditionValue('invalidIconName', invalid);
+      }
+      validateNoMissingText(mappings) {
+          const invalid = mappings
+              .filter(TableColumnMappingValidator.isSupportedMappingElement)
+              .some(mapping => mapping.text === undefined);
+          this.setConditionValue('missingTextValue', invalid);
+      }
+      validateMappingTypes(mappings) {
+          const valid = mappings.every(TableColumnMappingValidator.isSupportedMappingElement);
+          this.setConditionValue('unsupportedMappingType', !valid);
+      }
+  }
+
+  const styles$9 = css `
+    ${display('inline-flex')}
+
+    :host {
+        gap: ${smallPadding};
+        align-items: center;
+    }
+
+    .reserve-icon-size {
+        flex-shrink: 0;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    .text {
+        flex-shrink: 1;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
+
+  // prettier-ignore
+  const template$8 = html `
+    ${when(x => x.visualizationTemplate, html `
+            <span class="reserve-icon-size">
+                ${x => x.visualizationTemplate}
+            </span>
+        `)}
+    <span
+        ${overflow('hasOverflow')}
+        title="${x => (x.hasOverflow && x.text ? x.text : null)}"
+        class="text"
+    >${x => x.text}</span>
+`;
+
   /**
-   * The aligment of the value in the number-text table column.
-   * The `default` alignment is determined by the column's `NumberTextFormat`.
+   * Predefined icon appearance states
+   * @public
    */
-  const NumberTextAlignment = {
+  const IconSeverity = {
       default: undefined,
-      left: 'left',
-      right: 'right'
+      error: 'error',
+      warning: 'warning',
+      success: 'success',
+      information: 'information'
   };
 
   /**
-   * The base class for unit formats.
+   * Common state shared across Mapping Config
    */
-  class UnitFormat {
-      /**
-       * Formats a number value to a string.
-       * For nullish values or values that result in an exception being thrown, empty string is returned
-       */
-      format(value) {
-          if (typeof value !== 'number') {
-              return '';
-          }
-          try {
-              return this.tryFormat(value);
-          }
-          catch {
-              return '';
-          }
+  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
+  const emptyTemplate = html ` `;
+  const createIconTemplate = (icon) => {
+      if (icon === undefined) {
+          return emptyTemplate;
+      }
+      return html `
+        <${icon}
+            title="${x => (x.textHidden ? x.text : '')}"
+            role="img"
+            aria-label="${x => x.text}"
+            aria-hidden="${x => (x.textHidden ? 'false' : 'true')}"
+            severity="${x => x.severity}"
+        >
+        </${icon}>
+    `;
+  };
   /**
-   * A class that knows how to format a numeric value as a string that includes units.
+   * Mapping configuration corresponding to a icon mapping
    */
-  class ScaledUnitFormat {
-      constructor(scaledUnitFormatFactoryOptions) {
-          this.locale = scaledUnitFormatFactoryOptions.locale;
-          this.intlNumberFormatOptions = scaledUnitFormatFactoryOptions.intlNumberFormatOptions;
+  class MappingIconConfig extends MappingConfig {
+      constructor(resolvedIcon, severity, text, textHidden) {
+          super(text);
+          this.severity = severity;
+          this.textHidden = textHidden;
+          this.iconTemplate = createIconTemplate(resolvedIcon);
       }
   }
 
+  const spinnerTemplate = html `
+    <${spinnerTag}
+        title="${x => (x.textHidden ? x.text : '')}"
+        aria-label="${x => x.text}"
+        aria-hidden="${x => (x.textHidden ? 'false' : 'true')}"
+    >
+    </${spinnerTag}>
+`;
   /**
-   * A formatter for units that can be formatted/translated by Intl.NumberFormat
+   * Mapping configuration corresponding to a spinner mapping
    */
-  class IntlNumberFormatScaledUnitFormat extends ScaledUnitFormat {
-      constructor(scaledUnitFormatFactoryOptions, unitSpecificIntlNumberFormatOptions) {
-          super(scaledUnitFormatFactoryOptions);
-          this.formatter = new Intl.NumberFormat(this.locale, {
-              ...unitSpecificIntlNumberFormatOptions,
-              // Application configured options override unit specific options
-              ...this.intlNumberFormatOptions
-          });
-      }
-      static createFactory(unitSpecificIntlNumberFormatOptions) {
-          return (scaledUnitFormatFactoryOptions) => new IntlNumberFormatScaledUnitFormat(scaledUnitFormatFactoryOptions, unitSpecificIntlNumberFormatOptions);
-      }
-      format(value) {
-          return this.formatter.format(value);
+  class MappingSpinnerConfig extends MappingConfig {
+      constructor(text, textHidden) {
+          super(text);
+          this.textHidden = textHidden;
+          this.spinnerTemplate = spinnerTemplate;
       }
   }
 
   /**
-   * A unit that represents a scaled version of a base unit.
+   * Mapping configuration corresponding to a text mapping
    */
-  class ScaledUnit {
-      constructor(scaleFactor, scaledUnitFormatFactory) {
-          this.scaleFactor = scaleFactor;
-          this.scaledUnitFormatFactory = scaledUnitFormatFactory;
-      }
-      isBase() {
-          return this.scaleFactor === 1;
-      }
+  class MappingTextConfig extends MappingConfig {
   }
 
   /**
-   * A unit scale consisting of a set of scaled units.
+   * The group header view for the mapping column
    */
-  class UnitScale {
-      constructor(supportedScaledUnits) {
-          this.supportedScaledUnits = supportedScaledUnits;
-          const unitsSorted = supportedScaledUnits.every((curr, i, arr) => i === 0 || arr[i - 1].scaleFactor < curr.scaleFactor);
-          if (!unitsSorted) {
-              throw new Error('Supported scaled units must have unique and ordered scale factors');
+  class TableColumnMappingGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
+      constructor() {
+          super(...arguments);
+          this.textHidden = false;
+      }
+      updateText() {
+          this.resetState();
+          if (!this.columnConfig) {
+              return;
           }
-          const baseScaledUnit = supportedScaledUnits.find(x => x.isBase());
-          if (!baseScaledUnit) {
-              throw new Error('Supported scaled units must include a base scaled unit (scale factor=1)');
+          const value = this.groupHeaderValue;
+          const mappingConfig = this.columnConfig.mappingConfigs.get(value);
+          if (mappingConfig instanceof MappingIconConfig) {
+              this.severity = mappingConfig.severity;
+              this.text = mappingConfig.text ?? '';
+              this.visualizationTemplate = mappingConfig.iconTemplate;
           }
-          this.supportedScaledUnits = supportedScaledUnits;
-          this.baseScaledUnit = baseScaledUnit;
-      }
-      // Note that for the sake of reducing complexity in the implementation,
-      // we do NOT consider the effects of rounding when picking the unit to
-      // use for a given value. If formatting results in rounding, a value
-      // may be shown with an unexpected unit. Examples:
-      // - 999 bytes with two significant digits => "1000 bytes" (instead of "1 kB")
-      // - 0.00000000000000001 volts (= 0.01 fV) with one fractional digit => "0 fV" (instead of "0 volts")
-      scaleNumber(number) {
-          const magnitude = Math.abs(number);
-          const onlyBaseScaledUnit = this.supportedScaledUnits.length === 1;
-          if (onlyBaseScaledUnit
-              || magnitude === 0
-              || magnitude === Infinity
-              || Number.isNaN(magnitude)) {
-              return { scaledValue: number, scaledUnit: this.baseScaledUnit };
+          else if (mappingConfig instanceof MappingSpinnerConfig) {
+              this.text = mappingConfig.text ?? '';
+              this.visualizationTemplate = mappingConfig.spinnerTemplate;
           }
-          for (let i = this.supportedScaledUnits.length - 1; i >= 0; i -= 1) {
-              const scaledUnit = this.supportedScaledUnits[i];
-              if (magnitude / scaledUnit.scaleFactor >= 1) {
-                  return {
-                      scaledValue: number / scaledUnit.scaleFactor,
-                      scaledUnit
-                  };
-              }
+          else if (mappingConfig instanceof MappingTextConfig) {
+              this.text = mappingConfig.text ?? '';
           }
-          const smallestUnit = this.supportedScaledUnits[0];
-          return {
-              scaledValue: number / smallestUnit.scaleFactor,
-              scaledUnit: smallestUnit
-          };
+      }
+      resetState() {
+          this.text = '';
+          this.visualizationTemplate = undefined;
+          this.severity = IconSeverity.default;
       }
   }
+  __decorate$1([
+      observable
+  ], TableColumnMappingGroupHeaderView.prototype, "severity", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
+  const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
+      baseName: 'table-column-mapping-group-header-view',
+      template: template$8,
+      styles: styles$9
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(mappingGroupHeaderView());
+  const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
+
+  const styles$8 = css `
+    ${display('inline-flex')}
+
+    :host {
+        gap: ${smallPadding};
+        align-items: center;
+    }
+
+    .reserve-icon-size {
+        flex-shrink: 0;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    .text {
+        flex-shrink: 1;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
+
+  // prettier-ignore
+  const template$7 = html `
+    ${when(x => x.visualizationTemplate, html `
+            <span class="reserve-icon-size">
+                ${x => x.visualizationTemplate}
+            </span>
+        `)}
+    ${when(x => !x.textHidden, html `
+        <span
+            ${overflow('hasOverflow')}
+            title=${x => (x.hasOverflow && x.text ? x.text : null)}
+            class="text"
+        >
+            ${x => x.text}
+        </span>
+    `)}
+`;
 
   /**
-   * Unit scale that is used to passthrough a number without applying scaling or units
+   * The cell view for the mapping column
    */
-  class PassthroughUnitScale extends UnitScale {
+  class TableColumnMappingCellView extends TableCellView {
       constructor() {
-          super([
-              new ScaledUnit(10 ** 0, IntlNumberFormatScaledUnitFormat.createFactory({}))
-          ]);
+          super(...arguments);
+          this.textHidden = false;
+          /** @internal */
+          this.hasOverflow = false;
       }
-  }
-  const passthroughUnitScale = new PassthroughUnitScale();
-
-  // Workaround to avoid ts errors about signDisplay not accepting the value 'negative'.
-  // It has been supported by browsers since 8/23, but TypeScript still hasn't
-  // added it to the type definitions. See https://github.com/microsoft/TypeScript/issues/56269
-  const signDisplay = 'negative';
-  /**
-   * Format for numbers with units to show in a tabular form.
-   * Large and tiny numbers are shown exponentially and the rest as decimal.
-   */
-  class DefaultUnitFormat extends UnitFormat {
-      constructor(locale, { unitScale = passthroughUnitScale } = {
-          unitScale: passthroughUnitScale
-      }) {
-          super();
+      columnConfigChanged() {
+          this.updateState();
+      }
+      cellRecordChanged() {
+          this.updateState();
+      }
+      updateState() {
+          this.resetState();
+          if (!this.columnConfig || !this.cellRecord) {
+              return;
+          }
+          const value = this.cellRecord.value;
+          if (value === undefined || value === null) {
+              return;
+          }
+          const mappingConfig = this.columnConfig.mappingConfigs.get(value);
+          if (mappingConfig instanceof MappingIconConfig) {
+              this.severity = mappingConfig.severity;
+              this.text = mappingConfig.text;
+              this.visualizationTemplate = mappingConfig.iconTemplate;
+              this.textHidden = mappingConfig.textHidden;
+          }
+          else if (mappingConfig instanceof MappingSpinnerConfig) {
+              this.text = mappingConfig.text;
+              this.visualizationTemplate = mappingConfig.spinnerTemplate;
+              this.textHidden = mappingConfig.textHidden;
+          }
+          else if (mappingConfig instanceof MappingTextConfig) {
+              this.text = mappingConfig.text;
+              this.textHidden = false;
+          }
+      }
+      resetState() {
+          this.text = undefined;
+          this.textHidden = false;
+          this.visualizationTemplate = undefined;
+          this.severity = IconSeverity.default;
+      }
+  }
+  __decorate$1([
+      observable
+  ], TableColumnMappingCellView.prototype, "severity", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnMappingCellView.prototype, "text", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnMappingCellView.prototype, "visualizationTemplate", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnMappingCellView.prototype, "textHidden", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
+  const mappingCellView = TableColumnMappingCellView.compose({
+      baseName: 'table-column-mapping-cell-view',
+      template: template$7,
+      styles: styles$8
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
+  const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
+
+  /**
+   * Width mode for the mapping column
+   */
+  const TableColumnMappingWidthMode = {
+      default: undefined,
+      iconSize: 'icon-size'
+  };
+
+  /**
+   * Table column that maps number, boolean, or string values to an icon, a spinner,
+   * text, or an icon/spinner with text.
+   */
+  class TableColumnMapping extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumnEnumBase))) {
+      minPixelWidthChanged() {
+          if (this.widthMode !== TableColumnMappingWidthMode.iconSize) {
+              this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
+          }
+      }
+      getColumnInternalsOptions() {
+          return {
+              cellRecordFieldNames: ['value'],
+              cellViewTag: tableColumnMappingCellViewTag,
+              groupHeaderViewTag: tableColumnMappingGroupHeaderViewTag,
+              delegatedEvents: [],
+              sortOperation: TableColumnSortOperation.basic,
+              validator: new TableColumnMappingValidator()
+          };
+      }
+      createColumnConfig(mappingConfigs) {
+          return {
+              mappingConfigs
+          };
+      }
+      createMappingConfig(mapping) {
+          if (mapping instanceof MappingIcon) {
+              return new MappingIconConfig(mapping.resolvedIcon, mapping.severity, mapping.text, mapping.textHidden);
+          }
+          if (mapping instanceof MappingSpinner) {
+              return new MappingSpinnerConfig(mapping.text, mapping.textHidden);
+          }
+          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');
+      }
+      widthModeChanged() {
+          if (this.widthMode === TableColumnMappingWidthMode.iconSize) {
+              this.columnInternals.resizingDisabled = true;
+              this.columnInternals.hideHeaderIndicators = true;
+              this.columnInternals.pixelWidth = singleIconColumnWidth;
+              this.columnInternals.minPixelWidth = singleIconColumnWidth;
+          }
+          else {
+              this.columnInternals.resizingDisabled = false;
+              this.columnInternals.hideHeaderIndicators = false;
+              this.columnInternals.pixelWidth = undefined;
+              this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
+          }
+      }
+      getConfiguredMinPixelWidth() {
+          if (typeof this.minPixelWidth === 'number') {
+              return this.minPixelWidth;
+          }
+          return defaultMinPixelWidth;
+      }
+  }
+  __decorate$1([
+      attr({ attribute: 'width-mode' })
+  ], TableColumnMapping.prototype, "widthMode", void 0);
+  const nimbleTableColumnMapping = TableColumnMapping.compose({
+      baseName: 'table-column-mapping',
+      template: template$9,
+      styles: styles$a
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleTableColumnMapping());
+
+  // 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$6 = html `<span
+    ${overflow('hasOverflow')}
+    class="header-content"
+    title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
+>
+    <slot ${ref('contentSlot')}></slot>
+    <slot ${slotted({ property: 'unitElements', filter: elements() })} name="unit"></slot>
+</span>`;
+
+  /**
+   * The group header view for displaying number fields as text.
+   */
+  class TableColumnNumberTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
+      updateText() {
+          this.text = this.columnConfig?.formatter?.format(this.groupHeaderValue) ?? '';
+      }
+  }
+  const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
+      baseName: 'table-column-number-text-group-header-view',
+      template: template$b,
+      styles: styles$c
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(tableColumnNumberTextGroupHeaderView());
+  const tableColumnNumberTextGroupHeaderTag = 'nimble-table-column-number-text-group-header-view';
+
+  /**
+   * A cell view for displaying number fields as text
+   */
+  class TableColumnNumberTextCellView extends TableColumnTextCellViewBase {
+      columnConfigChanged() {
+          super.columnConfigChanged();
+          this.alignment = this.columnConfig?.alignment ?? TextCellViewBaseAlignment.left;
+      }
+      updateText() {
+          this.text = this.columnConfig?.formatter?.format(this.cellRecord?.value) ?? '';
+      }
+  }
+  const numberTextCellView = TableColumnNumberTextCellView.compose({
+      baseName: 'table-column-number-text-cell-view',
+      template: template$a,
+      styles: styles$b
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
+  const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
+
+  /**
+   * Formatting scheme for the number-text table column
+   */
+  const NumberTextFormat = {
+      default: undefined,
+      decimal: 'decimal'
+  };
+  /**
+   * The aligment of the value in the number-text table column.
+   * The `default` alignment is determined by the column's `NumberTextFormat`.
+   */
+  const NumberTextAlignment = {
+      default: undefined,
+      left: 'left',
+      right: 'right'
+  };
+
+  /**
+   * The base class for unit formats.
+   */
+  class UnitFormat {
+      /**
+       * Formats a number value to a string.
+       * For nullish values or values that result in an exception being thrown, empty string is returned
+       */
+      format(value) {
+          if (typeof value !== 'number') {
+              return '';
+          }
+          try {
+              return this.tryFormat(value);
+          }
+          catch {
+              return '';
+          }
+      }
+  }
+
+  /**
+   * A class that knows how to format a numeric value as a string that includes units.
+   */
+  class ScaledUnitFormat {
+      constructor(scaledUnitFormatFactoryOptions) {
+          this.locale = scaledUnitFormatFactoryOptions.locale;
+          this.intlNumberFormatOptions = scaledUnitFormatFactoryOptions.intlNumberFormatOptions;
+      }
+  }
+
+  /**
+   * A formatter for units that can be formatted/translated by Intl.NumberFormat
+   */
+  class IntlNumberFormatScaledUnitFormat extends ScaledUnitFormat {
+      constructor(scaledUnitFormatFactoryOptions, unitSpecificIntlNumberFormatOptions) {
+          super(scaledUnitFormatFactoryOptions);
+          this.formatter = new Intl.NumberFormat(this.locale, {
+              ...unitSpecificIntlNumberFormatOptions,
+              // Application configured options override unit specific options
+              ...this.intlNumberFormatOptions
+          });
+      }
+      static createFactory(unitSpecificIntlNumberFormatOptions) {
+          return (scaledUnitFormatFactoryOptions) => new IntlNumberFormatScaledUnitFormat(scaledUnitFormatFactoryOptions, unitSpecificIntlNumberFormatOptions);
+      }
+      format(value) {
+          return this.formatter.format(value);
+      }
+  }
+
+  /**
+   * A unit that represents a scaled version of a base unit.
+   */
+  class ScaledUnit {
+      constructor(scaleFactor, scaledUnitFormatFactory) {
+          this.scaleFactor = scaleFactor;
+          this.scaledUnitFormatFactory = scaledUnitFormatFactory;
+      }
+      isBase() {
+          return this.scaleFactor === 1;
+      }
+  }
+
+  /**
+   * A unit scale consisting of a set of scaled units.
+   */
+  class UnitScale {
+      constructor(supportedScaledUnits) {
+          this.supportedScaledUnits = supportedScaledUnits;
+          const unitsSorted = supportedScaledUnits.every((curr, i, arr) => i === 0 || arr[i - 1].scaleFactor < curr.scaleFactor);
+          if (!unitsSorted) {
+              throw new Error('Supported scaled units must have unique and ordered scale factors');
+          }
+          const baseScaledUnit = supportedScaledUnits.find(x => x.isBase());
+          if (!baseScaledUnit) {
+              throw new Error('Supported scaled units must include a base scaled unit (scale factor=1)');
+          }
+          this.supportedScaledUnits = supportedScaledUnits;
+          this.baseScaledUnit = baseScaledUnit;
+      }
+      // Note that for the sake of reducing complexity in the implementation,
+      // we do NOT consider the effects of rounding when picking the unit to
+      // use for a given value. If formatting results in rounding, a value
+      // may be shown with an unexpected unit. Examples:
+      // - 999 bytes with two significant digits => "1000 bytes" (instead of "1 kB")
+      // - 0.00000000000000001 volts (= 0.01 fV) with one fractional digit => "0 fV" (instead of "0 volts")
+      scaleNumber(number) {
+          const magnitude = Math.abs(number);
+          const onlyBaseScaledUnit = this.supportedScaledUnits.length === 1;
+          if (onlyBaseScaledUnit
+              || magnitude === 0
+              || magnitude === Infinity
+              || Number.isNaN(magnitude)) {
+              return { scaledValue: number, scaledUnit: this.baseScaledUnit };
+          }
+          for (let i = this.supportedScaledUnits.length - 1; i >= 0; i -= 1) {
+              const scaledUnit = this.supportedScaledUnits[i];
+              if (magnitude / scaledUnit.scaleFactor >= 1) {
+                  return {
+                      scaledValue: number / scaledUnit.scaleFactor,
+                      scaledUnit
+                  };
+              }
+          }
+          const smallestUnit = this.supportedScaledUnits[0];
+          return {
+              scaledValue: number / smallestUnit.scaleFactor,
+              scaledUnit: smallestUnit
+          };
+      }
+  }
+
+  /**
+   * Unit scale that is used to passthrough a number without applying scaling or units
+   */
+  class PassthroughUnitScale extends UnitScale {
+      constructor() {
+          super([
+              new ScaledUnit(10 ** 0, IntlNumberFormatScaledUnitFormat.createFactory({}))
+          ]);
+      }
+  }
+  const passthroughUnitScale = new PassthroughUnitScale();
+
+  // Workaround to avoid ts errors about signDisplay not accepting the value 'negative'.
+  // It has been supported by browsers since 8/23, but TypeScript still hasn't
+  // added it to the type definitions. See https://github.com/microsoft/TypeScript/issues/56269
+  const signDisplay = 'negative';
+  /**
+   * Format for numbers with units to show in a tabular form.
+   * Large and tiny numbers are shown exponentially and the rest as decimal.
+   */
+  class DefaultUnitFormat extends UnitFormat {
+      constructor(locale, { unitScale = passthroughUnitScale } = {
+          unitScale: passthroughUnitScale
+      }) {
+          super();
           // Format options to use by default. It renders the number with a maximum of 6 signficant digits (including zero before decimal point).
           this.defaultIntlNumberFormatOptions = {
               maximumSignificantDigits: DefaultUnitFormat.maximumDigits,
@@ -69424,568 +69990,13 @@ img.ProseMirror-separator {
   ], TableColumnNumberText.prototype, "unit", void 0);
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
-      template: template$9,
+      template: template$6,
       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',
-      'invalidIconName',
-      'missingTextValue'
-  ];
-  /**
-   * Validator for TableColumnIcon
-   */
-  class TableColumnIconValidator extends TableColumnEnumBaseValidator {
-      constructor() {
-          super(iconValidityFlagNames);
-      }
-      static isIconMappingElement(mapping) {
-          return mapping instanceof MappingIcon;
-      }
-      static isSupportedMappingElement(mapping) {
-          return (mapping instanceof MappingIcon
-              || mapping instanceof MappingSpinner
-              || mapping instanceof MappingText);
-      }
-      static hasUnresolvedIcon(mappingIcon) {
-          return (typeof mappingIcon.icon === 'string'
-              && mappingIcon.resolvedIcon === undefined);
-      }
-      validate(mappings, keyType) {
-          super.validate(mappings, keyType);
-          this.validateMappingTypes(mappings);
-          this.validateIconNames(mappings);
-          this.validateNoMissingText(mappings);
-      }
-      validateIconNames(mappings) {
-          const invalid = mappings
-              .filter(TableColumnIconValidator.isIconMappingElement)
-              .some(TableColumnIconValidator.hasUnresolvedIcon);
-          this.setConditionValue('invalidIconName', invalid);
-      }
-      validateNoMissingText(mappings) {
-          const invalid = mappings
-              .filter(TableColumnIconValidator.isSupportedMappingElement)
-              .some(mapping => mapping.text === undefined);
-          this.setConditionValue('missingTextValue', invalid);
-      }
-      validateMappingTypes(mappings) {
-          const valid = mappings.every(TableColumnIconValidator.isSupportedMappingElement);
-          this.setConditionValue('unsupportedMappingType', !valid);
-      }
-  }
-
-  const styles$9 = css `
-    ${display('inline-flex')}
-
-    :host {
-        gap: ${smallPadding};
-        align-items: center;
-    }
-
-    .reserve-icon-size {
-        flex-shrink: 0;
-        width: ${iconSize};
-        height: ${iconSize};
-    }
-
-    .text {
-        flex-shrink: 1;
-        font: ${bodyFont};
-        color: ${bodyFontColor};
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-`;
-
-  // prettier-ignore
-  const template$7 = html `
-    ${when(x => x.visualizationTemplate, html `
-            <span class="reserve-icon-size">
-                ${x => x.visualizationTemplate}
-            </span>
-        `)}
-    <span
-        ${overflow('hasOverflow')}
-        title="${x => (x.hasOverflow && x.text ? x.text : null)}"
-        class="text"
-    >${x => x.text}</span>
-`;
-
-  /**
-   * Predefined icon appearance states
-   * @public
-   */
-  const IconSeverity = {
-      default: undefined,
-      error: 'error',
-      warning: 'warning',
-      success: 'success',
-      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
-  const emptyTemplate = html ` `;
-  const createIconTemplate = (icon) => {
-      if (icon === undefined) {
-          return emptyTemplate;
-      }
-      return html `
-        <${icon}
-            title="${x => (x.textHidden ? x.text : '')}"
-            role="img"
-            aria-label="${x => x.text}"
-            aria-hidden="${x => (x.textHidden ? 'false' : 'true')}"
-            severity="${x => x.severity}"
-        >
-        </${icon}>
-    `;
-  };
-  /**
-   * Mapping configuration corresponding to a icon mapping
-   */
-  class MappingIconConfig extends MappingConfig {
-      constructor(resolvedIcon, severity, text, textHidden) {
-          super(text);
-          this.severity = severity;
-          this.textHidden = textHidden;
-          this.iconTemplate = createIconTemplate(resolvedIcon);
-      }
-  }
-
-  const spinnerTemplate = html `
-    <${spinnerTag}
-        title="${x => (x.textHidden ? x.text : '')}"
-        aria-label="${x => x.text}"
-        aria-hidden="${x => (x.textHidden ? 'false' : 'true')}"
-    >
-    </${spinnerTag}>
-`;
-  /**
-   * Mapping configuration corresponding to a spinner mapping
-   */
-  class MappingSpinnerConfig extends MappingConfig {
-      constructor(text, textHidden) {
-          super(text);
-          this.textHidden = textHidden;
-          this.spinnerTemplate = spinnerTemplate;
-      }
-  }
-
-  /**
-   * Mapping configuration corresponding to a text mapping
-   */
-  class MappingTextConfig extends MappingConfig {
-  }
-
-  /**
-   * The group header view for the icon column
-   */
-  class TableColumnIconGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-      constructor() {
-          super(...arguments);
-          this.textHidden = false;
-      }
-      updateText() {
-          this.resetState();
-          if (!this.columnConfig) {
-              return;
-          }
-          const value = this.groupHeaderValue;
-          const mappingConfig = this.columnConfig.mappingConfigs.get(value);
-          if (mappingConfig instanceof MappingIconConfig) {
-              this.severity = mappingConfig.severity;
-              this.text = mappingConfig.text ?? '';
-              this.visualizationTemplate = mappingConfig.iconTemplate;
-          }
-          else if (mappingConfig instanceof MappingSpinnerConfig) {
-              this.text = mappingConfig.text ?? '';
-              this.visualizationTemplate = mappingConfig.spinnerTemplate;
-          }
-          else if (mappingConfig instanceof MappingTextConfig) {
-              this.text = mappingConfig.text ?? '';
-          }
-      }
-      resetState() {
-          this.text = '';
-          this.visualizationTemplate = undefined;
-          this.severity = IconSeverity.default;
-      }
-  }
-  __decorate$1([
-      observable
-  ], TableColumnIconGroupHeaderView.prototype, "severity", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnIconGroupHeaderView.prototype, "visualizationTemplate", void 0);
-  const iconGroupHeaderView = TableColumnIconGroupHeaderView.compose({
-      baseName: 'table-column-icon-group-header-view',
-      template: template$7,
-      styles: styles$9
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(iconGroupHeaderView());
-  const tableColumnIconGroupHeaderViewTag = 'nimble-table-column-icon-group-header-view';
-
-  const styles$8 = css `
-    ${display('inline-flex')}
-
-    :host {
-        gap: ${smallPadding};
-        align-items: center;
-    }
-
-    .reserve-icon-size {
-        flex-shrink: 0;
-        width: ${iconSize};
-        height: ${iconSize};
-    }
-
-    .text {
-        flex-shrink: 1;
-        font: ${bodyFont};
-        color: ${bodyFontColor};
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-`;
-
-  // prettier-ignore
-  const template$6 = html `
-    ${when(x => x.visualizationTemplate, html `
-            <span class="reserve-icon-size">
-                ${x => x.visualizationTemplate}
-            </span>
-        `)}
-    ${when(x => !x.textHidden, html `
-        <span
-            ${overflow('hasOverflow')}
-            title=${x => (x.hasOverflow && x.text ? x.text : null)}
-            class="text"
-        >
-            ${x => x.text}
-        </span>
-    `)}
-`;
-
-  /**
-   * The cell view for the icon column
-   */
-  class TableColumnIconCellView extends TableCellView {
-      constructor() {
-          super(...arguments);
-          this.textHidden = false;
-          /** @internal */
-          this.hasOverflow = false;
-      }
-      columnConfigChanged() {
-          this.updateState();
-      }
-      cellRecordChanged() {
-          this.updateState();
-      }
-      updateState() {
-          this.resetState();
-          if (!this.columnConfig || !this.cellRecord) {
-              return;
-          }
-          const value = this.cellRecord.value;
-          if (value === undefined || value === null) {
-              return;
-          }
-          const mappingConfig = this.columnConfig.mappingConfigs.get(value);
-          if (mappingConfig instanceof MappingIconConfig) {
-              this.severity = mappingConfig.severity;
-              this.text = mappingConfig.text;
-              this.visualizationTemplate = mappingConfig.iconTemplate;
-              this.textHidden = mappingConfig.textHidden;
-          }
-          else if (mappingConfig instanceof MappingSpinnerConfig) {
-              this.text = mappingConfig.text;
-              this.visualizationTemplate = mappingConfig.spinnerTemplate;
-              this.textHidden = mappingConfig.textHidden;
-          }
-          else if (mappingConfig instanceof MappingTextConfig) {
-              this.text = mappingConfig.text;
-              this.textHidden = false;
-          }
-      }
-      resetState() {
-          this.text = undefined;
-          this.textHidden = false;
-          this.visualizationTemplate = undefined;
-          this.severity = IconSeverity.default;
-      }
-  }
-  __decorate$1([
-      observable
-  ], TableColumnIconCellView.prototype, "severity", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnIconCellView.prototype, "text", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnIconCellView.prototype, "visualizationTemplate", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnIconCellView.prototype, "textHidden", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnIconCellView.prototype, "hasOverflow", void 0);
-  const iconCellView = TableColumnIconCellView.compose({
-      baseName: 'table-column-icon-cell-view',
-      template: template$6,
-      styles: styles$8
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(iconCellView());
-  const tableColumnIconCellViewTag = 'nimble-table-column-icon-cell-view';
-
-  /**
-   * Width mode for the icon column
-   */
-  const TableColumnMappingWidthMode = {
-      default: undefined,
-      iconSize: 'icon-size'
-  };
-
-  /**
-   * Table column that maps values to icons / spinners
-   */
-  class TableColumnIcon extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumnEnumBase))) {
-      minPixelWidthChanged() {
-          if (this.widthMode !== TableColumnMappingWidthMode.iconSize) {
-              this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
-          }
-      }
-      getColumnInternalsOptions() {
-          return {
-              cellRecordFieldNames: ['value'],
-              cellViewTag: tableColumnIconCellViewTag,
-              groupHeaderViewTag: tableColumnIconGroupHeaderViewTag,
-              delegatedEvents: [],
-              sortOperation: TableColumnSortOperation.basic,
-              validator: new TableColumnIconValidator()
-          };
-      }
-      createColumnConfig(mappingConfigs) {
-          return {
-              mappingConfigs
-          };
-      }
-      createMappingConfig(mapping) {
-          if (mapping instanceof MappingIcon) {
-              return new MappingIconConfig(mapping.resolvedIcon, mapping.severity, mapping.text, mapping.textHidden);
-          }
-          if (mapping instanceof MappingSpinner) {
-              return new MappingSpinnerConfig(mapping.text, mapping.textHidden);
-          }
-          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');
-      }
-      widthModeChanged() {
-          if (this.widthMode === TableColumnMappingWidthMode.iconSize) {
-              this.columnInternals.resizingDisabled = true;
-              this.columnInternals.hideHeaderIndicators = true;
-              this.columnInternals.pixelWidth = singleIconColumnWidth;
-              this.columnInternals.minPixelWidth = singleIconColumnWidth;
-          }
-          else {
-              this.columnInternals.resizingDisabled = false;
-              this.columnInternals.hideHeaderIndicators = false;
-              this.columnInternals.pixelWidth = undefined;
-              this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
-          }
-      }
-      getConfiguredMinPixelWidth() {
-          if (typeof this.minPixelWidth === 'number') {
-              return this.minPixelWidth;
-          }
-          return defaultMinPixelWidth;
-      }
-  }
-  __decorate$1([
-      attr({ attribute: 'width-mode' })
-  ], TableColumnIcon.prototype, "widthMode", void 0);
-  const nimbleTableColumnIcon = TableColumnIcon.compose({
-      baseName: 'table-column-icon',
-      template: template$8,
-      styles: styles$a
-  });
-  DesignSystem.getOrCreate()
-      .withPrefix('nimble')
-      .register(nimbleTableColumnIcon());
-
   /**
    * A cell view for displaying string fields as text
    */