@ni/nimble-components 20.10.0 → 20.10.1

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 23 Oct 2023 13:57:47 GMT
+   * Generated on Thu, 26 Oct 2023 00:07:00 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -68205,6 +68205,191 @@ img.ProseMirror-separator {
       .register(nimbleTableColumnDateText());
   DesignSystem.tagFor(TableColumnDateText);
 
+  /**
+   * A cell view for displaying duration fields as text
+   */
+  class TableColumnDurationTextCellView extends TableColumnTextCellViewBase {
+      columnConfigChanged() {
+          this.updateText();
+      }
+      cellRecordChanged() {
+          this.updateText();
+      }
+      updateText() {
+          this.text = this.columnConfig?.formatter.format(this.cellRecord?.value) ?? '';
+      }
+  }
+  const durationTextCellView = TableColumnDurationTextCellView.compose({
+      baseName: 'table-column-duration-text-cell-view',
+      template: template$8,
+      styles: styles$a
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(durationTextCellView());
+  const tableColumnDurationTextCellViewTag = DesignSystem.tagFor(TableColumnDurationTextCellView);
+
+  /**
+   * A class for formatting a numeric value in the unit of milliseconds into a display value representing its
+   *  days, hours, minutes, and seconds.
+   */
+  class DurationFormatter {
+      constructor(lang) {
+          this.lang = lang;
+          this.daysFormatter = new Intl.NumberFormat(this.lang, {
+              style: 'unit',
+              unit: 'day'
+          });
+          this.hoursFormatter = new Intl.NumberFormat(this.lang, {
+              style: 'unit',
+              unit: 'hour'
+          });
+          this.minutesFormatter = new Intl.NumberFormat(this.lang, {
+              style: 'unit',
+              unit: 'minute'
+          });
+          this.secondsFormatter = new Intl.NumberFormat(this.lang, {
+              style: 'unit',
+              unit: 'second'
+          });
+          this.scientificSecondsFormatter = new Intl.NumberFormat(this.lang, {
+              style: 'unit',
+              unit: 'second',
+              notation: 'scientific',
+              maximumFractionDigits: 3
+          });
+      }
+      format(milliseconds) {
+          if (typeof milliseconds !== 'number'
+              || milliseconds < 0
+              || !Number.isFinite(milliseconds)) {
+              return '';
+          }
+          const result = [];
+          const millisecondsPerSecond = 1000;
+          const millisecondsPerMinute = millisecondsPerSecond * 60;
+          const millisecondsPerHour = millisecondsPerMinute * 60;
+          const millisecondsPerDay = millisecondsPerHour * 24;
+          const fractionalDays = milliseconds / millisecondsPerDay;
+          const maximumDays = 999;
+          let remainingTime = milliseconds;
+          const days = Math.floor(fractionalDays);
+          if (days <= maximumDays && days > 0) {
+              const formattedDays = this.daysFormatter.format(days);
+              result.push(formattedDays);
+              remainingTime -= days * millisecondsPerDay;
+          }
+          else if (days > maximumDays) {
+              return this.scientificSecondsFormatter.format(milliseconds / millisecondsPerSecond);
+          }
+          const hours = Math.floor((milliseconds / millisecondsPerHour) % 24);
+          remainingTime -= hours * millisecondsPerHour;
+          if (hours) {
+              const formattedHours = this.hoursFormatter.format(hours);
+              result.push(formattedHours);
+          }
+          const minutes = Math.floor((milliseconds / millisecondsPerMinute) % 60);
+          remainingTime -= minutes * millisecondsPerMinute;
+          if (minutes) {
+              const formattedMinutes = this.minutesFormatter.format(minutes);
+              result.push(formattedMinutes);
+          }
+          const valueInSeconds = remainingTime / millisecondsPerSecond;
+          // if -0, coerce to 0
+          const seconds = valueInSeconds === 0 ? 0 : valueInSeconds % 60;
+          if (milliseconds < 1 && valueInSeconds !== 0) {
+              return this.scientificSecondsFormatter.format(valueInSeconds);
+          }
+          if (seconds >= 0.0005 || (seconds === 0 && result.length === 0)) {
+              const formattedSeconds = this.secondsFormatter.format(seconds);
+              result.push(formattedSeconds);
+          }
+          return result.join(', ');
+      }
+  }
+
+  /**
+   * The group header view for displaying duration fields as text.
+   */
+  class TableColumnDurationTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
+      columnConfigChanged() {
+          this.updateText();
+      }
+      groupHeaderValueChanged() {
+          this.updateText();
+      }
+      updateText() {
+          if (this.columnConfig) {
+              this.text = this.columnConfig.formatter.format(this.groupHeaderValue);
+          }
+          else {
+              this.text = '';
+          }
+      }
+  }
+  const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
+      baseName: 'table-column-duration-text-group-header-view',
+      template: template$9,
+      styles: styles$b
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(tableColumnDurationTextGroupHeaderView());
+  const tableColumnDurationTextGroupHeaderViewTag = DesignSystem.tagFor(TableColumnDurationTextGroupHeaderView);
+
+  /**
+   * The table column for displaying a duration value as text.
+   */
+  class TableColumnDurationText extends TableColumnTextBase {
+      constructor() {
+          super(...arguments);
+          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);
+      }
+      getColumnInternalsOptions() {
+          return {
+              cellRecordFieldNames: ['value'],
+              cellViewTag: tableColumnDurationTextCellViewTag,
+              groupHeaderViewTag: tableColumnDurationTextGroupHeaderViewTag,
+              delegatedEvents: [],
+              sortOperation: TableColumnSortOperation.basic
+          };
+      }
+      updateColumnConfig() {
+          const formatter = new DurationFormatter(lang$1.getValueFor(this));
+          if (formatter) {
+              const columnConfig = {
+                  formatter
+              };
+              this.columnInternals.columnConfig = columnConfig;
+          }
+          else {
+              this.columnInternals.columnConfig = undefined;
+          }
+      }
+  }
+  const nimbleTableColumnDurationText = TableColumnDurationText.compose({
+      baseName: 'table-column-duration-text',
+      template: template$b,
+      styles: styles$d
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleTableColumnDurationText());
+  DesignSystem.tagFor(TableColumnDurationText);
+
   /**
    * 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