@ni/nimble-components 20.1.11 → 20.1.12

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Fri, 18 Aug 2023 11:17:54 GMT
+   * Generated on Mon, 21 Aug 2023 22:22:53 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -63904,6 +63904,416 @@ img.ProseMirror-separator {
       .register(nimbleTableColumnAnchor());
   DesignSystem.tagFor(TableColumnAnchor);
 
+  /**
+   * The base class for table columns that display fields of any type as text.
+   */
+  class TableColumnTextBase extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(TableColumn)) {
+      fieldNameChanged() {
+          this.columnInternals.dataRecordFieldNames = [this.fieldName];
+          this.columnInternals.operandDataRecordFieldName = this.fieldName;
+      }
+  }
+  __decorate$1([
+      attr({ attribute: 'field-name' })
+  ], TableColumnTextBase.prototype, "fieldName", void 0);
+
+  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 {
+      columnConfigChanged() {
+          this.updateText();
+      }
+      groupHeaderValueChanged() {
+          this.updateText();
+      }
+      updateText() {
+          if (this.columnConfig?.formatter) {
+              this.text = formatNumericDate(this.columnConfig.formatter, this.groupHeaderValue);
+          }
+          else {
+              this.text = '';
+          }
+      }
+  }
+  const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
+      baseName: 'table-column-date-text-group-header-view',
+      template: template$7,
+      styles: styles$a
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(tableColumnDateTextGroupHeaderView());
+  const tableColumnDateTextGroupHeaderViewTag = DesignSystem.tagFor(TableColumnDateTextGroupHeaderView);
+
+  const template$6 = html `
+    <span
+        ${overflow('hasOverflow')}
+        title=${x => (x.hasOverflow && x.text ? x.text : null)}
+    >
+        ${x => x.text}
+    </span>
+`;
+
+  const styles$9 = css `
+    span {
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;
+
+  /**
+   * The cell view base class for displaying fields of any type as text.
+   */
+  class TableColumnTextCellViewBase extends TableCellView {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.hasOverflow = false;
+          /**
+           * Text to render in the cell.
+           */
+          this.text = '';
+      }
+  }
+  __decorate$1([
+      observable
+  ], TableColumnTextCellViewBase.prototype, "hasOverflow", void 0);
+  __decorate$1([
+      observable
+  ], TableColumnTextCellViewBase.prototype, "text", void 0);
+
+  /**
+   * A cell view for displaying date/time fields as text
+   */
+  class TableColumnDateTextCellView extends TableColumnTextCellViewBase {
+      columnConfigChanged() {
+          this.updateText();
+      }
+      cellRecordChanged() {
+          this.updateText();
+      }
+      updateText() {
+          if (this.columnConfig?.formatter) {
+              this.text = formatNumericDate(this.columnConfig.formatter, this.cellRecord?.value);
+          }
+          else {
+              this.text = '';
+          }
+      }
+  }
+  const dateTextCellView = TableColumnDateTextCellView.compose({
+      baseName: 'table-column-date-text-cell-view',
+      template: template$6,
+      styles: styles$9
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
+  const tableColumnDateTextCellViewTag = DesignSystem.tagFor(TableColumnDateTextCellView);
+
+  /**
+   * Generic Validator Utility extends Tracker Utility for validation purposes
+   */
+  class Validator extends Tracker {
+      isValid() {
+          return this.noneTracked();
+      }
+      getValidationFlags() {
+          return this.getTrackedItems();
+      }
+  }
+
+  /**
+   * Base column validator
+   */
+  class ColumnValidator extends Validator {
+      constructor(columnInternals, configValidityKeys) {
+          super(configValidityKeys);
+          this.columnInternals = columnInternals;
+      }
+      /**
+       * @returns whether the entire column configuration is valid
+       */
+      isValidColumn() {
+          return this.isValid();
+      }
+      /**
+       * @returns an object containing flags for various ways the configuation can be invalid
+       */
+      getValidity() {
+          return this.getValidationFlags();
+      }
+      /**
+       * Sets a particular validity condition flag's value, e.g. "hasInvalidFooValue" = true
+       */
+      setConditionValue(name, isInvalid) {
+          if (isInvalid) {
+              this.track(name);
+          }
+          else {
+              this.untrack(name);
+          }
+          this.updateColumnInternalsFlag();
+      }
+      updateColumnInternalsFlag() {
+          this.columnInternals.validConfiguration = this.isValid();
+      }
+  }
+
+  const dateTextValidityFlagNames = ['invalidCustomOptionsCombination'];
+  /**
+   * Validator for TableColumnDateText.
+   */
+  class TableColumnDateTextValidator extends ColumnValidator {
+      constructor(columnInternals) {
+          super(columnInternals, dateTextValidityFlagNames);
+      }
+      setCustomOptionsValidity(valid) {
+          this.setConditionValue('invalidCustomOptionsCombination', !valid);
+      }
+  }
+
+  // Should be used for attributes that are optional booleans, where true, false, and undefined all
+  // have separate meanings and must have distinct representations.
+  const optionalBooleanConverter = {
+      toView(value) {
+          return typeof value === 'boolean' ? value.toString() : null;
+      },
+      fromView(value) {
+          if (value === 'true' || value === true) {
+              return true;
+          }
+          if (value === 'false' || value === false) {
+              return false;
+          }
+          return undefined;
+      }
+  };
+
+  /**
+   * The table column for displaying dates/times as text.
+   */
+  class TableColumnDateText extends TableColumnTextBase {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.validator = new TableColumnDateTextValidator(this.columnInternals);
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          this.updateColumnConfig();
+      }
+      get validity() {
+          return this.validator.getValidity();
+      }
+      getColumnInternalsOptions() {
+          return {
+              cellRecordFieldNames: ['value'],
+              cellViewTag: tableColumnDateTextCellViewTag,
+              groupHeaderViewTag: tableColumnDateTextGroupHeaderViewTag,
+              delegatedEvents: [],
+              sortOperation: TableColumnSortOperation.basic
+          };
+      }
+      formatChanged() {
+          this.updateColumnConfig();
+      }
+      customLocaleMatcherChanged() {
+          this.updateColumnConfig();
+      }
+      customWeekdayChanged() {
+          this.updateColumnConfig();
+      }
+      customEraChanged() {
+          this.updateColumnConfig();
+      }
+      customYearChanged() {
+          this.updateColumnConfig();
+      }
+      customMonthChanged() {
+          this.updateColumnConfig();
+      }
+      customDayChanged() {
+          this.updateColumnConfig();
+      }
+      customHourChanged() {
+          this.updateColumnConfig();
+      }
+      customMinuteChanged() {
+          this.updateColumnConfig();
+      }
+      customSecondChanged() {
+          this.updateColumnConfig();
+      }
+      customTimeZoneNameChanged() {
+          this.updateColumnConfig();
+      }
+      customFormatMatcherChanged() {
+          this.updateColumnConfig();
+      }
+      customHour12Changed() {
+          this.updateColumnConfig();
+      }
+      customTimeZoneChanged() {
+          this.updateColumnConfig();
+      }
+      customCalendarChanged() {
+          this.updateColumnConfig();
+      }
+      customDayPeriodChanged() {
+          this.updateColumnConfig();
+      }
+      customNumberingSystemChanged() {
+          this.updateColumnConfig();
+      }
+      customDateStyleChanged() {
+          this.updateColumnConfig();
+      }
+      customTimeStyleChanged() {
+          this.updateColumnConfig();
+      }
+      customHourCycleChanged() {
+          this.updateColumnConfig();
+      }
+      updateColumnConfig() {
+          const columnConfig = {
+              formatter: this.createFormatter()
+          };
+          this.columnInternals.columnConfig = columnConfig;
+          this.validator.setCustomOptionsValidity(columnConfig.formatter !== undefined);
+      }
+      createFormatter() {
+          let options;
+          if (!this.format) {
+              options = {
+                  dateStyle: 'medium',
+                  timeStyle: 'medium'
+              };
+          }
+          else {
+              options = this.getCustomFormattingOptions();
+          }
+          try {
+              return new Intl.DateTimeFormat(undefined, options);
+          }
+          catch (e) {
+              return undefined;
+          }
+      }
+      getCustomFormattingOptions() {
+          // There's a FAST bug (https://github.com/microsoft/fast/issues/6630) where removing
+          // attributes sets their values to null instead of undefined. To work around this,
+          // translate null values to undefined.
+          const options = {
+              localeMatcher: this.customLocaleMatcher ?? undefined,
+              weekday: this.customWeekday ?? undefined,
+              era: this.customEra ?? undefined,
+              year: this.customYear ?? undefined,
+              month: this.customMonth ?? undefined,
+              day: this.customDay ?? undefined,
+              hour: this.customHour ?? undefined,
+              minute: this.customMinute ?? undefined,
+              second: this.customSecond ?? undefined,
+              timeZoneName: this.customTimeZoneName ?? undefined,
+              formatMatcher: this.customFormatMatcher ?? undefined,
+              hour12: this.customHour12 ?? undefined,
+              timeZone: this.customTimeZone ?? undefined,
+              calendar: this.customCalendar ?? undefined,
+              dayPeriod: this.customDayPeriod ?? undefined,
+              numberingSystem: this.customNumberingSystem ?? undefined,
+              dateStyle: this.customDateStyle ?? undefined,
+              timeStyle: this.customTimeStyle ?? undefined,
+              hourCycle: this.customHourCycle ?? undefined
+          };
+          return options;
+      }
+  }
+  __decorate$1([
+      attr
+  ], TableColumnDateText.prototype, "format", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-locale-matcher' })
+  ], TableColumnDateText.prototype, "customLocaleMatcher", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-weekday' })
+  ], TableColumnDateText.prototype, "customWeekday", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-era' })
+  ], TableColumnDateText.prototype, "customEra", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-year' })
+  ], TableColumnDateText.prototype, "customYear", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-month' })
+  ], TableColumnDateText.prototype, "customMonth", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-day' })
+  ], TableColumnDateText.prototype, "customDay", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-hour' })
+  ], TableColumnDateText.prototype, "customHour", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-minute' })
+  ], TableColumnDateText.prototype, "customMinute", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-second' })
+  ], TableColumnDateText.prototype, "customSecond", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-time-zone-name' })
+  ], TableColumnDateText.prototype, "customTimeZoneName", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-format-matcher' })
+  ], TableColumnDateText.prototype, "customFormatMatcher", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-hour12', converter: optionalBooleanConverter })
+  ], TableColumnDateText.prototype, "customHour12", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-time-zone' })
+  ], TableColumnDateText.prototype, "customTimeZone", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-calendar' })
+  ], TableColumnDateText.prototype, "customCalendar", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-day-period' })
+  ], TableColumnDateText.prototype, "customDayPeriod", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-numbering-system' })
+  ], TableColumnDateText.prototype, "customNumberingSystem", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-date-style' })
+  ], TableColumnDateText.prototype, "customDateStyle", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-time-style' })
+  ], TableColumnDateText.prototype, "customTimeStyle", void 0);
+  __decorate$1([
+      attr({ attribute: 'custom-hour-cycle' })
+  ], TableColumnDateText.prototype, "customHourCycle", void 0);
+  const nimbleTableColumnDateText = TableColumnDateText.compose({
+      baseName: 'table-column-date-text',
+      template: template$9,
+      styles: styles$c
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleTableColumnDateText());
+  DesignSystem.tagFor(TableColumnDateText);
+
   /**
    * 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
@@ -64011,7 +64421,7 @@ img.ProseMirror-separator {
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$9 = css `
+  const styles$8 = css `
     ${styles$c}
 
     slot[name='mapping'] {
@@ -64019,56 +64429,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const template$6 = html `${template$9}<slot ${slotted('mappings')} name="mapping"></slot>`;
-
-  /**
-   * Generic Validator Utility extends Tracker Utility for validation purposes
-   */
-  class Validator extends Tracker {
-      isValid() {
-          return this.noneTracked();
-      }
-      getValidationFlags() {
-          return this.getTrackedItems();
-      }
-  }
-
-  /**
-   * Base column validator
-   */
-  class ColumnValidator extends Validator {
-      constructor(columnInternals, configValidityKeys) {
-          super(configValidityKeys);
-          this.columnInternals = columnInternals;
-      }
-      /**
-       * @returns whether the entire column configuration is valid
-       */
-      isValidColumn() {
-          return this.isValid();
-      }
-      /**
-       * @returns an object containing flags for various ways the configuation can be invalid
-       */
-      getValidity() {
-          return this.getValidationFlags();
-      }
-      /**
-       * Sets a particular validity condition flag's value, e.g. "hasInvalidFooValue" = true
-       */
-      setConditionValue(name, isInvalid) {
-          if (isInvalid) {
-              this.track(name);
-          }
-          else {
-              this.untrack(name);
-          }
-          this.updateColumnInternalsFlag();
-      }
-      updateColumnInternalsFlag() {
-          this.columnInternals.validConfiguration = this.isValid();
-      }
-  }
+  const template$5 = html `${template$9}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
   const enumBaseValidityFlagNames = [
       'invalidMappingKeyValueForType',
@@ -64131,46 +64492,6 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$8 = css `
-    span {
-        font: ${bodyFont};
-        color: ${bodyFontColor};
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-`;
-
-  const template$5 = html `
-    <span
-        ${overflow('hasOverflow')}
-        title=${x => (x.hasOverflow && x.text ? x.text : null)}
-    >
-        ${x => x.text}
-    </span>
-`;
-
-  /**
-   * The cell view base class for displaying fields of any type as text.
-   */
-  class TableColumnTextCellViewBase extends TableCellView {
-      constructor() {
-          super(...arguments);
-          /** @internal */
-          this.hasOverflow = false;
-          /**
-           * Text to render in the cell.
-           */
-          this.text = '';
-      }
-  }
-  __decorate$1([
-      observable
-  ], TableColumnTextCellViewBase.prototype, "hasOverflow", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnTextCellViewBase.prototype, "text", void 0);
-
   /**
    * Common state shared across Mapping Config
    */
@@ -64208,8 +64529,8 @@ img.ProseMirror-separator {
   }
   const enumTextCellView = TableColumnEnumTextCellView.compose({
       baseName: 'table-column-enum-text-cell-view',
-      template: template$5,
-      styles: styles$8
+      template: template$6,
+      styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(enumTextCellView());
   const tableColumnEnumTextCellViewTag = DesignSystem.tagFor(TableColumnEnumTextCellView);
@@ -64281,27 +64602,14 @@ img.ProseMirror-separator {
   }
   const nimbleTableColumnEnumText = TableColumnEnumText.compose({
       baseName: 'table-column-enum-text',
-      template: template$6,
-      styles: styles$9
+      template: template$5,
+      styles: styles$8
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnEnumText());
   DesignSystem.tagFor(TableColumnEnumText);
 
-  /**
-   * The base class for table columns that display fields of any type as text.
-   */
-  class TableColumnTextBase extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(TableColumn)) {
-      fieldNameChanged() {
-          this.columnInternals.dataRecordFieldNames = [this.fieldName];
-          this.columnInternals.operandDataRecordFieldName = this.fieldName;
-      }
-  }
-  __decorate$1([
-      attr({ attribute: 'field-name' })
-  ], TableColumnTextBase.prototype, "fieldName", void 0);
-
   /**
    * A cell view for displaying string fields as text
    */
@@ -64314,8 +64622,8 @@ img.ProseMirror-separator {
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$5,
-      styles: styles$8
+      template: template$6,
+      styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = DesignSystem.tagFor(TableColumnTextCellView);