@ni/ok-components 1.9.3 → 1.9.4

package/dist/all-components-bundle.js

@@ -81808,27 +81808,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 = '';
@@ -81954,7 +81940,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 = '';
@@ -81974,6 +81960,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'];
   /**
@@ -82005,6 +82015,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.
    */
@@ -82115,18 +82184,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;