@ni/nimble-components 20.2.16 → 20.3.1

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 14 Sep 2023 19:33:47 GMT
+   * Generated on Fri, 15 Sep 2023 20:18:18 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16436,6 +16436,7 @@
       fillSelectedRgbPartialColor: 'fill-selected-rgb-partial-color',
       fillHoverSelectedColor: 'fill-hover-selected-color',
       fillHoverColor: 'fill-hover-color',
+      fillHoverRgbPartialColor: 'fill-hover-rgb-partial-color',
       fillDownColor: 'fill-down-color',
       borderColor: 'border-color',
       borderRgbPartialColor: 'border-rgb-partial-color',
@@ -16827,6 +16828,7 @@
   const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
   const fillHoverSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.15));
   const fillHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverColor)).withDefault((element) => hexToRgbaCssColor(getFillHoverColorForTheme(element), 0.1));
+  DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillHoverColorForTheme(element)));
   DesignToken.create(styleNameFromTokenName(tokenNames.fillDownColor)).withDefault((element) => hexToRgbaCssColor(getFillDownColorForTheme(element), 0.15));
   const borderColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderColor)).withDefault((element) => getDefaultLineColorForTheme(element));
   const borderRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderRgbPartialColor)).withDefault((element) => hexToRgbPartial(getDefaultLineColorForTheme(element)));
@@ -68036,6 +68038,298 @@ img.ProseMirror-separator {
       .register(nimbleTableColumnEnumText());
   DesignSystem.tagFor(TableColumnEnumText);
 
+  /**
+   * 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?.formatValue(this.groupHeaderValue)
+              ?? '';
+      }
+  }
+  const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
+      baseName: 'table-column-number-text-group-header-view',
+      template: template$9,
+      styles: styles$b
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(tableColumnNumberTextGroupHeaderView());
+  const tableColumnNumberTextGroupHeaderTag = DesignSystem.tagFor(TableColumnNumberTextGroupHeaderView);
+
+  /**
+   * A cell view for displaying number fields as text
+   */
+  class TableColumnNumberTextCellView extends TableColumnTextCellViewBase {
+      columnConfigChanged() {
+          this.updateText();
+          this.alignment = this.columnConfig?.alignment ?? TextCellViewBaseAlignment.left;
+      }
+      cellRecordChanged() {
+          this.updateText();
+      }
+      updateText() {
+          this.text = this.columnConfig?.formatter?.formatValue(this.cellRecord?.value)
+              ?? '';
+      }
+  }
+  const numberTextCellView = TableColumnNumberTextCellView.compose({
+      baseName: 'table-column-number-text-cell-view',
+      template: template$8,
+      styles: styles$a
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
+  const tableColumnNumberTextCellViewTag = DesignSystem.tagFor(TableColumnNumberTextCellView);
+
+  /**
+   * 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 number formatters used by the number-text column.
+   */
+  class NumberFormatter {
+      /**
+       * Tries to format the passed value using the `format()` function implemented by a concrete implementation of the class.
+       * Returns an empty string if the value is not a number or if `format()` throws an error.
+       */
+      formatValue(value) {
+          if (typeof value !== 'number') {
+              return '';
+          }
+          try {
+              return this.format(value);
+          }
+          catch {
+              return '';
+          }
+      }
+  }
+
+  /**
+   * The formatter for a number-text column whose format is configured to be 'default'.
+   */
+  class DefaultFormatter extends NumberFormatter {
+      constructor(locale) {
+          super();
+          this.defaultFormatter = new Intl.NumberFormat(locale, {
+              maximumSignificantDigits: DefaultFormatter.maximumDigits,
+              useGrouping: true
+          });
+          this.leadingZeroFormatter = new Intl.NumberFormat(locale, {
+              maximumFractionDigits: DefaultFormatter.maximumDigits - 1,
+              useGrouping: true
+          });
+          this.exponentialFormatter = new Intl.NumberFormat(locale, {
+              maximumSignificantDigits: DefaultFormatter.maximumDigits,
+              notation: 'scientific'
+          });
+      }
+      format(number) {
+          // The NumberFormat option of `signDisplay: "negative"` is not supported in all browsers nimble supports.
+          // Because that option cannot be used to avoid rendering "-0", coerce the value -0 to 0 prior to formatting.
+          const valueToFormat = number === 0 ? 0 : number;
+          const formatter = this.getFormatterForNumber(valueToFormat);
+          return formatter.format(valueToFormat);
+      }
+      getFormatterForNumber(number) {
+          if (number === 0) {
+              return this.defaultFormatter;
+          }
+          const absoluteValue = Math.abs(number);
+          if (absoluteValue >= DefaultFormatter.exponentialUpperBound
+              || absoluteValue < DefaultFormatter.exponentialLowerBound) {
+              return this.exponentialFormatter;
+          }
+          // Ideally, we could set 'roundingPriority: "lessPrecision"' with a formatter that has both 'maximumSignificantDigits' and
+          // 'maximumFractionDigits' configured instead of having two different formatters that we conditionally choose between. However,
+          // 'roundingPrioirty' is not supported yet in all browsers nimble supports.
+          if (absoluteValue < 1) {
+              return this.leadingZeroFormatter;
+          }
+          return this.defaultFormatter;
+      }
+  }
+  // The maximum number of digits that should be rendered for any given value.
+  DefaultFormatter.maximumDigits = 6;
+  // Use exponential notation for numbers that will be rendered with 3 leading 0s or more.
+  // Because a maximum of 6 digits are rendered, showing more than 3 leading 0s is not ideal
+  // because then at least half of the displayed digits will be leading 0s.
+  DefaultFormatter.exponentialLowerBound = 0.000995;
+  // Use exponential formatting for numbers whose magnitude cannot otherwise be displayed
+  // with 6 digits or less.
+  DefaultFormatter.exponentialUpperBound = 999999.5;
+
+  /**
+   * The formatter for a number-text column whose format is configured to be 'decimal'.
+   */
+  class DecimalFormatter extends NumberFormatter {
+      constructor(locale, decimalsToDisplay) {
+          super();
+          this.formatter = new Intl.NumberFormat(locale, {
+              maximumFractionDigits: decimalsToDisplay,
+              minimumFractionDigits: decimalsToDisplay,
+              useGrouping: true
+          });
+          this.tenPowDecimalDigits = 10 ** decimalsToDisplay;
+      }
+      format(number) {
+          // The NumberFormat option of `signDisplay: "negative"` is not supported in all browsers nimble supports.
+          // Because that option cannot be used to avoid rendering "-0", coerce the value -0 to 0 prior to formatting.
+          const valueToFormat = this.willRoundToZero(number) ? 0 : number;
+          return this.formatter.format(valueToFormat);
+      }
+      willRoundToZero(number) {
+          // Multiply the value by 10 raised to decimal-digits so that Math.round can be used to emulate rounding to
+          // decimal-digits decimal places. If that rounded value is 0, then the value will be rendered with only 0s.
+          return Math.round(number * this.tenPowDecimalDigits) === 0;
+      }
+  }
+
+  const numberTextValidityFlagNames = ['invalidDecimalDigits'];
+  // The maximum and minimum allowed configuration for 'maximumFractionDigits'
+  // and 'minimumFractionDigits' on the NumberFormat.
+  const minimumValidDecimalDigits = 0;
+  const maximumValidDecimalDigits = 20;
+  /**
+   * Validator for TableColumnNumberText.
+   */
+  class TableColumnNumberTextValidator extends ColumnValidator {
+      constructor(columnInternals) {
+          super(columnInternals, numberTextValidityFlagNames);
+      }
+      validateDecimalDigits(format, decimalDigits) {
+          const shouldValidateDecimalDigitsValue = format === NumberTextFormat.decimal
+              && typeof decimalDigits === 'number';
+          const invalid = shouldValidateDecimalDigitsValue
+              ? this.isInvalidDecimalDigitsValue(decimalDigits)
+              : false;
+          this.setConditionValue('invalidDecimalDigits', invalid);
+      }
+      isInvalidDecimalDigitsValue(decimalDigits) {
+          return (decimalDigits < minimumValidDecimalDigits
+              || decimalDigits > maximumValidDecimalDigits);
+      }
+  }
+
+  const defaultDecimalDigits = 2;
+  /**
+   * The table column for displaying numbers as text.
+   */
+  class TableColumnNumberText extends TableColumnTextBase {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.validator = new TableColumnNumberTextValidator(this.columnInternals);
+          this.langSubscriber = {
+              handleChange: () => {
+                  this.updateColumnConfig();
+              }
+          };
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          lang$1.subscribe(this.langSubscriber, this);
+          this.updateColumnConfig();
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          lang$1.unsubscribe(this.langSubscriber, this);
+      }
+      get validity() {
+          return this.validator.getValidity();
+      }
+      getColumnInternalsOptions() {
+          return {
+              cellRecordFieldNames: ['value'],
+              cellViewTag: tableColumnNumberTextCellViewTag,
+              groupHeaderViewTag: tableColumnNumberTextGroupHeaderTag,
+              delegatedEvents: [],
+              sortOperation: TableColumnSortOperation.basic
+          };
+      }
+      formatChanged() {
+          this.updateColumnConfig();
+      }
+      alignmentChanged() {
+          this.updateColumnConfig();
+      }
+      decimalDigitsChanged() {
+          this.updateColumnConfig();
+      }
+      updateColumnConfig() {
+          this.validator.validateDecimalDigits(this.format, this.decimalDigits);
+          if (this.validator.isValid()) {
+              const columnConfig = {
+                  formatter: this.createFormatter(),
+                  alignment: this.determineCellContentAlignment()
+              };
+              this.columnInternals.columnConfig = columnConfig;
+          }
+          else {
+              this.columnInternals.columnConfig = undefined;
+          }
+      }
+      createFormatter() {
+          switch (this.format) {
+              case NumberTextFormat.decimal:
+                  return new DecimalFormatter(lang$1.getValueFor(this), this.decimalDigits ?? defaultDecimalDigits);
+              default:
+                  return new DefaultFormatter(lang$1.getValueFor(this));
+          }
+      }
+      determineCellContentAlignment() {
+          if (this.alignment === NumberTextAlignment.left) {
+              return TextCellViewBaseAlignment.left;
+          }
+          if (this.alignment === NumberTextAlignment.right) {
+              return TextCellViewBaseAlignment.right;
+          }
+          // Look at format to determine the default alignment
+          if (this.format === NumberTextFormat.decimal) {
+              return TextCellViewBaseAlignment.right;
+          }
+          return TextCellViewBaseAlignment.left;
+      }
+  }
+  __decorate$1([
+      attr
+  ], TableColumnNumberText.prototype, "format", void 0);
+  __decorate$1([
+      attr
+  ], TableColumnNumberText.prototype, "alignment", void 0);
+  __decorate$1([
+      attr({ attribute: 'decimal-digits', converter: nullableNumberConverter })
+  ], TableColumnNumberText.prototype, "decimalDigits", void 0);
+  const nimbleTableColumnNumberText = TableColumnNumberText.compose({
+      baseName: 'table-column-number-text',
+      template: template$b,
+      styles: styles$d
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleTableColumnNumberText());
+  DesignSystem.tagFor(TableColumnNumberText);
+
   const iconValidityFlagNames = [
       ...enumBaseValidityFlagNames,
       'invalidIconName'