@ni/nimble-components 20.9.0 → 20.10.1

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 19 Oct 2023 23:31:18 GMT
+   * Generated on Thu, 26 Oct 2023 00:07:00 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -19145,6 +19145,10 @@
       name: 'floppy_disk_checkmark_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M12.455 5h-1.041l-1.005 1H12v3H4V6h3.782L6.79 5H3.583A.585.585 0 0 0 3 5.598V12.5l1.5 1.497 7.858.003a.602.602 0 0 0 .6-.6L13 5.545A.513.513 0 0 0 12.455 5ZM11 13H8v-2H6v2H5v-3h6Zm2-10.99L9.091 5.9 7 3.79l.919-.89 1.164 1.208L12.128 1.1l.872.91"/></svg>`
   };
+  const floppyDiskPen16X16 = {
+      name: 'floppy_disk_pen_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-2" d="M7.17 11.108 7.299 11H7V9H5v2H4V8h6v.696l1.626-1.386c.107-.09.228-.155.355-.206L12 3.546c0-.33-.215-.546-.545-.546H2.583A.585.585 0 0 0 2 3.598V10.5l1.5 1.497 3.136.001.535-.89ZM3 7V4h8v3H3Z"/><path class="cls-1" d="M12.275 8.07c.218-.185.693-.008 1.205.552.512.56.635 1.038.418 1.223l-.92.784-1.621-1.775.918-.783Zm-4.92 6.113 1.98-.899-.985.164.043-.94-.32.161.104-.652-1.17 1.786.348.38Zm2.212-.645L6 15l1.945-3.236 2.1-1.791 1.622 1.774-2.1 1.79Zm2.862-2.49-1.622-1.774c-.118-.13.148-.349.262-.224l1.623 1.775c.117.128-.15.348-.263.224Zm-.522.452-1.622-1.775c-.118-.129.148-.349.262-.223l1.623 1.774c.117.128-.15.348-.263.224Z"/></svg>`
+  };
   const floppyDiskStarArrowRight16X16 = {
       name: 'floppy_disk_star_arrow_right_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M5.5 2.5a1 1 0 1 0-1 1 1 1 0 0 0 1-1Zm7.5.002L9.638.819l.496 1.293H7v.828h3.134L9.638 4.18ZM12.455 5H3.583A.585.585 0 0 0 3 5.598V12.5l1.5 1.497 7.858.003a.602.602 0 0 0 .6-.6L13 5.545A.513.513 0 0 0 12.455 5ZM11 13H8v-2H6v2H5v-3h6Zm1-4H4V6h8Z"/></svg>`
@@ -22571,6 +22575,19 @@
   registerIcon('icon-floppy-disk-checkmark', IconFloppyDiskCheckmark);
   DesignSystem.tagFor(IconFloppyDiskCheckmark);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'floppyDiskPen' icon
+   */
+  class IconFloppyDiskPen extends Icon {
+      constructor() {
+          super(floppyDiskPen16X16);
+      }
+  }
+  registerIcon('icon-floppy-disk-pen', IconFloppyDiskPen);
+  DesignSystem.tagFor(IconFloppyDiskPen);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -68188,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