@ni/nimble-components 20.3.0 → 20.3.2

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Fri, 15 Sep 2023 14:20:06 GMT
+   * Generated on Fri, 15 Sep 2023 20:59:38 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -44882,6 +44882,66 @@ img.ProseMirror-separator {
       group: 'inline',
   });
 
+  const HardBreak = Node$1.create({
+      name: 'hardBreak',
+      addOptions() {
+          return {
+              keepMarks: true,
+              HTMLAttributes: {},
+          };
+      },
+      inline: true,
+      group: 'inline',
+      selectable: false,
+      parseHTML() {
+          return [
+              { tag: 'br' },
+          ];
+      },
+      renderHTML({ HTMLAttributes }) {
+          return ['br', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+      },
+      renderText() {
+          return '\n';
+      },
+      addCommands() {
+          return {
+              setHardBreak: () => ({ commands, chain, state, editor, }) => {
+                  return commands.first([
+                      () => commands.exitCode(),
+                      () => commands.command(() => {
+                          const { selection, storedMarks } = state;
+                          if (selection.$from.parent.type.spec.isolating) {
+                              return false;
+                          }
+                          const { keepMarks } = this.options;
+                          const { splittableMarks } = editor.extensionManager;
+                          const marks = storedMarks
+                              || (selection.$to.parentOffset && selection.$from.marks());
+                          return chain()
+                              .insertContent({ type: this.name })
+                              .command(({ tr, dispatch }) => {
+                              if (dispatch && marks && keepMarks) {
+                                  const filteredMarks = marks
+                                      .filter(mark => splittableMarks.includes(mark.type.name));
+                                  tr.ensureMarks(filteredMarks);
+                              }
+                              return true;
+                          })
+                              .run();
+                      }),
+                  ]);
+              },
+          };
+      },
+      addKeyboardShortcuts() {
+          return {
+              'Mod-Enter': () => this.editor.commands.setHardBreak(),
+              'Shift-Enter': () => this.editor.commands.setHardBreak(),
+          };
+      },
+  });
+
   const styles$q = css `
     .positioning-region {
         display: flex;
@@ -58508,8 +58568,9 @@ img.ProseMirror-separator {
           const supportedTokenizerRules = zeroTokenizerConfiguration.enable([
               'emphasis',
               'list',
+              'escape',
               'autolink',
-              'escape'
+              'newline'
           ]);
           supportedTokenizerRules.validateLink = href => /^https?:\/\//i.test(href);
           /**
@@ -58595,7 +58656,8 @@ img.ProseMirror-separator {
               orderedList: orderedListNode,
               doc: defaultMarkdownSerializer.nodes.doc,
               paragraph: defaultMarkdownSerializer.nodes.paragraph,
-              text: defaultMarkdownSerializer.nodes.text
+              text: defaultMarkdownSerializer.nodes.text,
+              hardBreak: defaultMarkdownSerializer.nodes.hard_break
           };
           const marks = {
               italic: defaultMarkdownSerializer.marks.em,
@@ -58862,6 +58924,7 @@ img.ProseMirror-separator {
                       placeholder: '',
                       showOnlyWhenEditable: false
                   }),
+                  HardBreak,
                   customLink.configure({
                       // HTMLAttribute cannot be in camelCase as we want to match it with the name in Tiptap
                       // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -68038,6 +68101,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'