@ni/nimble-components 35.13.2 → 35.14.0

package/dist/all-components-bundle.js

@@ -19359,7 +19359,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   };
   const systemlink16X16 = {
       name: 'systemlink_16_x_16',
-      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7.357 9.143H4.786V6.79c0-.927.442-1.714 1.262-2.211C6.674 4.2 7.505 4 8.451 4h5.335v2.571H8.69c-.911.124-1.262.548-1.333 1.267z" class="cls-1"/><path d="M8.643 7.857h2.571v2.352c0 .927-.442 1.714-1.262 2.211-.626.38-1.457.58-2.403.58H2.214v-2.571H7.31c.911-.124 1.262-.548 1.333-1.267z" class="cls-1"/></svg>`,
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7.249 2.55a1.06 1.06 0 0 1 1.498 0 1.06 1.06 0 0 1-.295 1.703v1.86a2.42 2.42 0 0 1 1.672 1.215l1.768-.573q.023-.176.106-.344a1.059 1.059 0 1 1 .176 1.208l-1.768.574a2.42 2.42 0 0 1-.638 1.964l1.093 1.504q.175-.033.36-.005a1.058 1.058 0 1 1-1.095.54l-1.093-1.503a2.43 2.43 0 0 1-2.066 0l-1.093 1.503q.085.155.117.34a1.058 1.058 0 1 1-.852-.875l1.093-1.504a2.42 2.42 0 0 1-.638-1.964l-1.768-.574a1.054 1.054 0 0 1-1.71-.247 1.059 1.059 0 1 1 1.992-.617l1.768.573q.161-.295.41-.547c.358-.358.8-.58 1.262-.668v-1.86a1.06 1.06 0 0 1-.294-1.704Zm2.072 9.704c-.42.148-.865.224-1.323.224s-.904-.076-1.324-.224l.566-.779q.37.094.758.094c.388 0 .512-.033.757-.094zM11.98 8.4l.002.097c0 .886-.288 1.727-.82 2.419l-.566-.778c.274-.43.434-.923.467-1.44l.914-.298Zm-7.046.298c.033.502.189.998.466 1.438l-.566.779A3.97 3.97 0 0 1 4.018 8.4zM6.86 5.644c-.377.15-.731.377-1.035.681q-.1.1-.19.209l-.915-.298q.202-.292.46-.554A3.96 3.96 0 0 1 6.86 4.68v.965Zm2.275-.964a3.96 3.96 0 0 1 2.14 1.556l-.915.298a3.075 3.075 0 0 0-1.224-.89z" class="cls-1"/></svg>`,
   };
   const t16X16 = {
       name: 't_16_x_16',
@@ -81798,27 +81798,13 @@ focus outline in that case.
       return mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(mixinSortableColumnAPI(base))));
   }
 
-  function formatNumericDate(formatter, date) {
-      if (typeof date === 'number') {
-          try {
-              return formatter.format(date);
-          }
-          catch (_e) {
-              return '';
-          }
-      }
-      else {
-          return '';
-      }
-  }
-
   /**
    * The group header view for displaying date/time fields as text.
    */
   class TableColumnDateTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
       updateText() {
           if (this.columnConfig) {
-              this.text = formatNumericDate(this.columnConfig.formatter, this.groupHeaderValue);
+              this.text = this.columnConfig.formatter.format(this.groupHeaderValue);
           }
           else {
               this.text = '';
@@ -81944,7 +81930,7 @@ focus outline in that case.
   class TableColumnDateTextCellView extends TableColumnTextCellViewBase {
       updateText() {
           if (this.columnConfig) {
-              this.text = formatNumericDate(this.columnConfig.formatter, this.cellRecord?.value);
+              this.text = this.columnConfig.formatter.format(this.cellRecord?.value);
           }
           else {
               this.text = '';
@@ -81964,6 +81950,30 @@ focus outline in that case.
    */
   const DateTextFormat = {
       default: undefined};
+  /**
+   * The `Intl.DateTimeFormatOptions` properties supported by the date-text column and `DateTextFormatter`.
+   */
+  const supportedIntlDateTimeFormatOptionNames = [
+      'localeMatcher',
+      'weekday',
+      'era',
+      'year',
+      'month',
+      'day',
+      'hour',
+      'minute',
+      'second',
+      'dayPeriod',
+      'timeZoneName',
+      'formatMatcher',
+      'hour12',
+      'timeZone',
+      'calendar',
+      'numberingSystem',
+      'dateStyle',
+      'timeStyle',
+      'hourCycle'
+  ];
 
   const dateTextValidityFlagNames = ['invalidCustomOptionsCombination'];
   /**
@@ -81995,6 +82005,65 @@ focus outline in that case.
       }
   };
 
+  /**
+   * A class for formatting date values using the provided locale and options.
+   */
+  class DateTextFormatter {
+      constructor(lang, options) {
+          this.options = this.resolveOptions(options);
+          this.formatter = new Intl.DateTimeFormat(lang, this.options);
+      }
+      format(value) {
+          const milliseconds = this.parseValue(value);
+          if (milliseconds === undefined || !Number.isFinite(milliseconds)) {
+              return '';
+          }
+          try {
+              return this.formatter.format(milliseconds);
+          }
+          catch (_e) {
+              return '';
+          }
+      }
+      optionsMatch(targetOptions) {
+          const resolvedTargetOptions = targetOptions ?? DateTextFormatter.defaultOptions;
+          for (const name of supportedIntlDateTimeFormatOptionNames) {
+              if (this.options[name] !== resolvedTargetOptions[name]) {
+                  return false;
+              }
+          }
+          return true;
+      }
+      parseValue(value) {
+          if (value instanceof Date) {
+              return value.getTime();
+          }
+          if (typeof value === 'number') {
+              return value;
+          }
+          return undefined;
+      }
+      resolveOptions(options) {
+          if (options === undefined) {
+              return DateTextFormatter.defaultOptions;
+          }
+          const supportedOptions = {};
+          for (const name of supportedIntlDateTimeFormatOptionNames) {
+              this.resolveOption(supportedOptions, options, name);
+          }
+          return supportedOptions;
+      }
+      resolveOption(target, source, name) {
+          if (source[name] !== undefined) {
+              target[name] = source[name];
+          }
+      }
+  }
+  DateTextFormatter.defaultOptions = {
+      dateStyle: 'medium',
+      timeStyle: 'medium'
+  };
+
   /**
    * The table column for displaying dates/times as text.
    */
@@ -82105,18 +82174,11 @@ focus outline in that case.
           }
       }
       createFormatter() {
-          let options;
-          if (this.format === DateTextFormat.default) {
-              options = {
-                  dateStyle: 'medium',
-                  timeStyle: 'medium'
-              };
-          }
-          else {
-              options = this.getCustomFormattingOptions();
-          }
+          const options = this.format === DateTextFormat.default
+              ? undefined
+              : this.getCustomFormattingOptions();
           try {
-              return new Intl.DateTimeFormat(lang.getValueFor(this), options);
+              return new DateTextFormatter(lang.getValueFor(this), options);
           }
           catch (_e) {
               return undefined;