@ni/nimble-components 20.7.0 → 20.8.0

package/dist/esm/table-column/date-text/testing/table-column-date-text.pageobject.d.ts

@@ -1,14 +1,8 @@
-import type { TablePageObject } from '../../../table/testing/table.pageobject';
 import type { TableRecord } from '../../../table/types';
+import { TableColumnFormattedTextPageObject } from '../../testing/table-column-formatted-text.pageobject';
 /**
  * Page object for date text table column.
  */
-export declare class TableColumnDateTextPageObject<T extends TableRecord> {
-    private readonly tablePageObject;
-    private readonly narrowNonBreakingSpace;
-    constructor(tablePageObject: TablePageObject<T>);
-    getRenderedCellContent(rowIndex: number, columnIndex: number): string;
-    getRenderedGroupHeaderContent(groupRowIndex: number): string;
-    getCellTitle(rowIndex: number, columnIndex: number): string;
-    private verifyCellType;
+export declare class TableColumnDateTextPageObject<T extends TableRecord> extends TableColumnFormattedTextPageObject<T> {
+    protected verifyCellType(rowIndex: number, columnIndex: number): void;
 }

package/dist/esm/table-column/date-text/testing/table-column-date-text.pageobject.js

@@ -1,31 +1,9 @@
+import { TableColumnFormattedTextPageObject } from '../../testing/table-column-formatted-text.pageobject';
 import { TableColumnDateTextCellView } from '../cell-view';
 /**
  * Page object for date text table column.
  */
-export class TableColumnDateTextPageObject {
-    constructor(tablePageObject) {
-        this.tablePageObject = tablePageObject;
-        // On Chrome, in a formatted date, the space before AM/PM is a narrow non-breaking space.
-        // For testing consistency across browsers, replace it with a regular space.
-        this.narrowNonBreakingSpace = '\u202f';
-    }
-    getRenderedCellContent(rowIndex, columnIndex) {
-        this.verifyCellType(rowIndex, columnIndex);
-        return this.tablePageObject
-            .getRenderedCellTextContent(rowIndex, columnIndex)
-            .replace(this.narrowNonBreakingSpace, ' ');
-    }
-    getRenderedGroupHeaderContent(groupRowIndex) {
-        return this.tablePageObject
-            .getRenderedGroupHeaderTextContent(groupRowIndex)
-            .replace(this.narrowNonBreakingSpace, ' ');
-    }
-    getCellTitle(rowIndex, columnIndex) {
-        this.verifyCellType(rowIndex, columnIndex);
-        return this.tablePageObject
-            .getCellTitle(rowIndex, columnIndex)
-            .replace(this.narrowNonBreakingSpace, ' ');
-    }
+export class TableColumnDateTextPageObject extends TableColumnFormattedTextPageObject {
     verifyCellType(rowIndex, columnIndex) {
         const cell = this.tablePageObject.getRenderedCellView(rowIndex, columnIndex);
         if (!(cell instanceof TableColumnDateTextCellView)) {

package/dist/esm/table-column/date-text/testing/table-column-date-text.pageobject.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-column-date-text.pageobject.js","sourceRoot":"","sources":["../../../../../src/table-column/date-text/testing/table-column-date-text.pageobject.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAC;AAE3D;;GAEG;AACH,MAAM,OAAO,6BAA6B;IAKtC,YAAoC,eAAmC;QAAnC,oBAAe,GAAf,eAAe,CAAoB;QAJvE,yFAAyF;QACzF,4EAA4E;QAC3D,2BAAsB,GAAG,QAAQ,CAAC;IAEuB,CAAC;IAEpE,sBAAsB,CACzB,QAAgB,EAChB,WAAmB;QAEnB,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAC,eAAe;aACtB,0BAA0B,CAAC,QAAQ,EAAE,WAAW,CAAC;aACjD,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC;IACnD,CAAC;IAEM,6BAA6B,CAAC,aAAqB;QACtD,OAAO,IAAI,CAAC,eAAe;aACtB,iCAAiC,CAAC,aAAa,CAAC;aAChD,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC;IACnD,CAAC;IAEM,YAAY,CAAC,QAAgB,EAAE,WAAmB;QACrD,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAC,eAAe;aACtB,YAAY,CAAC,QAAQ,EAAE,WAAW,CAAC;aACnC,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC;IACnD,CAAC;IAEO,cAAc,CAAC,QAAgB,EAAE,WAAmB;QACxD,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,mBAAmB,CACjD,QAAQ,EACR,WAAW,CACd,CAAC;QACF,IAAI,CAAC,CAAC,IAAI,YAAY,2BAA2B,CAAC,EAAE;YAChD,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;SACxD;IACL,CAAC;CACJ"}
+{"version":3,"file":"table-column-date-text.pageobject.js","sourceRoot":"","sources":["../../../../../src/table-column/date-text/testing/table-column-date-text.pageobject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kCAAkC,EAAE,MAAM,sDAAsD,CAAC;AAC1G,OAAO,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAC;AAE3D;;GAEG;AACH,MAAM,OAAO,6BAEX,SAAQ,kCAAqC;IACxB,cAAc,CAC7B,QAAgB,EAChB,WAAmB;QAEnB,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,mBAAmB,CACjD,QAAQ,EACR,WAAW,CACd,CAAC;QACF,IAAI,CAAC,CAAC,IAAI,YAAY,2BAA2B,CAAC,EAAE;YAChD,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;SACxD;IACL,CAAC;CACJ"}

package/dist/esm/table-column/duration-text/cell-view/index.d.ts

@@ -0,0 +1,16 @@
+import type { TableColumnDurationTextCellRecord, TableColumnDurationTextColumnConfig } from '..';
+import { TableColumnTextCellViewBase } from '../../text-base/cell-view';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-column-duration-text-cell-view': TableColumnDurationTextCellView;
+    }
+}
+/**
+ * A cell view for displaying duration fields as text
+ */
+export declare class TableColumnDurationTextCellView extends TableColumnTextCellViewBase<TableColumnDurationTextCellRecord, TableColumnDurationTextColumnConfig> {
+    private columnConfigChanged;
+    private cellRecordChanged;
+    private updateText;
+}
+export declare const tableColumnDurationTextCellViewTag: string;

package/dist/esm/table-column/duration-text/cell-view/index.js

@@ -0,0 +1,28 @@
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { template } from '../../text-base/cell-view/template';
+import { styles } from '../../text-base/cell-view/styles';
+import { TableColumnTextCellViewBase } from '../../text-base/cell-view';
+/**
+ * A cell view for displaying duration fields as text
+ */
+export 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,
+    styles
+});
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(durationTextCellView());
+export const tableColumnDurationTextCellViewTag = DesignSystem.tagFor(TableColumnDurationTextCellView);
+//# sourceMappingURL=index.js.map

package/dist/esm/table-column/duration-text/cell-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/duration-text/cell-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAK9D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAQxE;;GAEG;AACH,MAAM,OAAO,+BAAgC,SAAQ,2BAGpD;IACW,mBAAmB;QACvB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEO,iBAAiB;QACrB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEO,UAAU;QACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IAClF,CAAC;CACJ;AAED,MAAM,oBAAoB,GAAG,+BAA+B,CAAC,OAAO,CAAC;IACjE,QAAQ,EAAE,sCAAsC;IAChD,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,MAAM,kCAAkC,GAAG,YAAY,CAAC,MAAM,CACjE,+BAA+B,CAClC,CAAC"}

package/dist/esm/table-column/duration-text/group-header-view/index.d.ts

@@ -0,0 +1,17 @@
+import type { TableNumberFieldValue } from '../../../table/types';
+import { TableColumnTextGroupHeaderViewBase } from '../../text-base/group-header-view';
+import type { TableColumnDurationTextColumnConfig } from '..';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-duration-text-group-header': TableColumnDurationTextGroupHeaderView;
+    }
+}
+/**
+ * The group header view for displaying duration fields as text.
+ */
+export declare class TableColumnDurationTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase<TableNumberFieldValue, TableColumnDurationTextColumnConfig> {
+    private columnConfigChanged;
+    private groupHeaderValueChanged;
+    private updateText;
+}
+export declare const tableColumnDurationTextGroupHeaderViewTag: string;

package/dist/esm/table-column/duration-text/group-header-view/index.js

@@ -0,0 +1,33 @@
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { TableColumnTextGroupHeaderViewBase } from '../../text-base/group-header-view';
+import { template } from '../../text-base/group-header-view/template';
+import { styles } from '../../text-base/group-header-view/styles';
+/**
+ * The group header view for displaying duration fields as text.
+ */
+export 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,
+    styles
+});
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(tableColumnDurationTextGroupHeaderView());
+export const tableColumnDurationTextGroupHeaderViewTag = DesignSystem.tagFor(TableColumnDurationTextGroupHeaderView);
+//# sourceMappingURL=index.js.map

package/dist/esm/table-column/duration-text/group-header-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/duration-text/group-header-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,kCAAkC,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAQlE;;GAEG;AACH,MAAM,OAAO,sCAAuC,SAAQ,kCAG3D;IACW,mBAAmB;QACvB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEO,uBAAuB;QAC3B,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEO,UAAU;QACd,IAAI,IAAI,CAAC,YAAY,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAC1C,IAAI,CAAC,gBAAgB,CACxB,CAAC;SACL;aAAM;YACH,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;SAClB;IACL,CAAC;CACJ;AAED,MAAM,sCAAsC,GAAG,sCAAsC,CAAC,OAAO,CAAC;IAC1F,QAAQ,EAAE,8CAA8C;IACxD,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,sCAAsC,EAAE,CAAC,CAAC;AACxD,MAAM,CAAC,MAAM,yCAAyC,GAAG,YAAY,CAAC,MAAM,CACxE,sCAAsC,CACzC,CAAC"}

package/dist/esm/table-column/duration-text/index.d.ts

@@ -0,0 +1,24 @@
+import type { TableNumberField } from '../../table/types';
+import { TableColumnTextBase } from '../text-base';
+import type { ColumnInternalsOptions } from '../base/models/column-internals';
+import { DurationFormatter } from './models/duration-formatter';
+export declare type TableColumnDurationTextCellRecord = TableNumberField<'value'>;
+export interface TableColumnDurationTextColumnConfig {
+    formatter: DurationFormatter;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-column-duration-text': TableColumnDurationText;
+    }
+}
+/**
+ * The table column for displaying a duration value as text.
+ */
+export declare class TableColumnDurationText extends TableColumnTextBase {
+    private readonly langSubscriber;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected getColumnInternalsOptions(): ColumnInternalsOptions;
+    private updateColumnConfig;
+}
+export declare const tableColumnDurationTextTag: string;

package/dist/esm/table-column/duration-text/index.js

@@ -0,0 +1,62 @@
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { styles } from '../base/styles';
+import { template } from '../base/template';
+import { TableColumnTextBase } from '../text-base';
+import { TableColumnSortOperation } from '../base/types';
+import { tableColumnDurationTextCellViewTag } from './cell-view';
+import { lang } from '../../theme-provider';
+import { DurationFormatter } from './models/duration-formatter';
+import { tableColumnDurationTextGroupHeaderViewTag } from './group-header-view';
+/**
+ * The table column for displaying a duration value as text.
+ */
+export class TableColumnDurationText extends TableColumnTextBase {
+    constructor() {
+        super(...arguments);
+        this.langSubscriber = {
+            handleChange: () => {
+                this.updateColumnConfig();
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        lang.subscribe(this.langSubscriber, this);
+        this.updateColumnConfig();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        lang.unsubscribe(this.langSubscriber, this);
+    }
+    getColumnInternalsOptions() {
+        return {
+            cellRecordFieldNames: ['value'],
+            cellViewTag: tableColumnDurationTextCellViewTag,
+            groupHeaderViewTag: tableColumnDurationTextGroupHeaderViewTag,
+            delegatedEvents: [],
+            sortOperation: TableColumnSortOperation.basic
+        };
+    }
+    updateColumnConfig() {
+        const formatter = new DurationFormatter(lang.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,
+    styles
+});
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleTableColumnDurationText());
+export const tableColumnDurationTextTag = DesignSystem.tagFor(TableColumnDurationText);
+//# sourceMappingURL=index.js.map

package/dist/esm/table-column/duration-text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/duration-text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EAEf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,kCAAkC,EAAE,MAAM,aAAa,CAAC;AAEjE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,yCAAyC,EAAE,MAAM,qBAAqB,CAAC;AAahF;;GAEG;AACH,MAAM,OAAO,uBAAwB,SAAQ,mBAAmB;IAAhE;;QACqB,mBAAc,GAAuC;YAClE,YAAY,EAAE,GAAG,EAAE;gBACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC9B,CAAC;SACJ,CAAC;IAmCN,CAAC;IAjCmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC9B,CAAC;IAEe,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;IAChD,CAAC;IAEkB,yBAAyB;QACxC,OAAO;YACH,oBAAoB,EAAE,CAAC,OAAO,CAAC;YAC/B,WAAW,EAAE,kCAAkC;YAC/C,kBAAkB,EAAE,yCAAyC;YAC7D,eAAe,EAAE,EAAE;YACnB,aAAa,EAAE,wBAAwB,CAAC,KAAK;SAChD,CAAC;IACN,CAAC;IAEO,kBAAkB;QACtB,MAAM,SAAS,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;QAEhE,IAAI,SAAS,EAAE;YACX,MAAM,YAAY,GAAwC;gBACtD,SAAS;aACZ,CAAC;YACF,IAAI,CAAC,eAAe,CAAC,YAAY,GAAG,YAAY,CAAC;SACpD;aAAM;YACH,IAAI,CAAC,eAAe,CAAC,YAAY,GAAG,SAAS,CAAC;SACjD;IACL,CAAC;CACJ;AAED,MAAM,6BAA6B,GAAG,uBAAuB,CAAC,OAAO,CAAC;IAClE,QAAQ,EAAE,4BAA4B;IACtC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,6BAA6B,EAAE,CAAC,CAAC;AAC/C,MAAM,CAAC,MAAM,0BAA0B,GAAG,YAAY,CAAC,MAAM,CACzD,uBAAuB,CAC1B,CAAC"}

package/dist/esm/table-column/duration-text/models/duration-formatter.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A class for formatting a numeric value in the unit of milliseconds into a display value representing its
+ *  days, hours, minutes, and seconds.
+ */
+export declare class DurationFormatter {
+    private readonly lang;
+    private readonly daysFormatter;
+    private readonly hoursFormatter;
+    private readonly minutesFormatter;
+    private readonly secondsFormatter;
+    private readonly scientificSecondsFormatter;
+    constructor(lang: string);
+    format(milliseconds: number | null | undefined): string;
+}

package/dist/esm/table-column/duration-text/models/duration-formatter.js

@@ -0,0 +1,79 @@
+/**
+ * A class for formatting a numeric value in the unit of milliseconds into a display value representing its
+ *  days, hours, minutes, and seconds.
+ */
+export 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(', ');
+    }
+}
+//# sourceMappingURL=duration-formatter.js.map

package/dist/esm/table-column/duration-text/models/duration-formatter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"duration-formatter.js","sourceRoot":"","sources":["../../../../../src/table-column/duration-text/models/duration-formatter.ts"],"names":[],"mappings":"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"}

package/dist/esm/table-column/duration-text/testing/table-column-duration-text.pageobject.d.ts

@@ -0,0 +1,8 @@
+import type { TableRecord } from '../../../table/types';
+import { TableColumnFormattedTextPageObject } from '../../testing/table-column-formatted-text.pageobject';
+/**
+ * Page object for duration text table column.
+ */
+export declare class TableColumnDurationTextPageObject<T extends TableRecord> extends TableColumnFormattedTextPageObject<T> {
+    protected verifyCellType(rowIndex: number, columnIndex: number): void;
+}

package/dist/esm/table-column/duration-text/testing/table-column-duration-text.pageobject.js

@@ -0,0 +1,14 @@
+import { TableColumnFormattedTextPageObject } from '../../testing/table-column-formatted-text.pageobject';
+import { TableColumnDurationTextCellView } from '../cell-view';
+/**
+ * Page object for duration text table column.
+ */
+export class TableColumnDurationTextPageObject extends TableColumnFormattedTextPageObject {
+    verifyCellType(rowIndex, columnIndex) {
+        const cell = this.tablePageObject.getRenderedCellView(rowIndex, columnIndex);
+        if (!(cell instanceof TableColumnDurationTextCellView)) {
+            throw new Error('Cell is not in a duration text column');
+        }
+    }
+}
+//# sourceMappingURL=table-column-duration-text.pageobject.js.map

package/dist/esm/table-column/duration-text/testing/table-column-duration-text.pageobject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-column-duration-text.pageobject.js","sourceRoot":"","sources":["../../../../../src/table-column/duration-text/testing/table-column-duration-text.pageobject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kCAAkC,EAAE,MAAM,sDAAsD,CAAC;AAC1G,OAAO,EAAE,+BAA+B,EAAE,MAAM,cAAc,CAAC;AAE/D;;GAEG;AACH,MAAM,OAAO,iCAEX,SAAQ,kCAAqC;IACxB,cAAc,CAC7B,QAAgB,EAChB,WAAmB;QAEnB,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,mBAAmB,CACjD,QAAQ,EACR,WAAW,CACd,CAAC;QACF,IAAI,CAAC,CAAC,IAAI,YAAY,+BAA+B,CAAC,EAAE;YACpD,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;SAC5D;IACL,CAAC;CACJ"}

package/dist/esm/table-column/testing/table-column-formatted-text.pageobject.d.ts

@@ -0,0 +1,14 @@
+import type { TablePageObject } from '../../table/testing/table.pageobject';
+import type { TableRecord } from '../../table/types';
+/**
+ * Page object for table columns that format their text for display.
+ */
+export declare abstract class TableColumnFormattedTextPageObject<T extends TableRecord> {
+    protected readonly tablePageObject: TablePageObject<T>;
+    private readonly spaceUnicodeCharsRegEx;
+    constructor(tablePageObject: TablePageObject<T>);
+    getRenderedCellContent(rowIndex: number, columnIndex: number): string;
+    getRenderedGroupHeaderContent(groupRowIndex: number): string;
+    getCellTitle(rowIndex: number, columnIndex: number): string;
+    protected abstract verifyCellType(rowIndex: number, columnIndex: number): void;
+}

package/dist/esm/table-column/testing/table-column-formatted-text.pageobject.js

@@ -0,0 +1,30 @@
+/**
+ * Page object for table columns that format their text for display.
+ */
+export class TableColumnFormattedTextPageObject {
+    constructor(tablePageObject) {
+        this.tablePageObject = tablePageObject;
+        // When text is localized to different languages, the space character
+        // can get changed to a different unicode variant. This regular expression
+        // matches both known unicode variants so we can change them back to a
+        // regular space to perform consistent checks for testing purposes.
+        this.spaceUnicodeCharsRegEx = /\u202f|\u00a0/g;
+    }
+    getRenderedCellContent(rowIndex, columnIndex) {
+        return this.tablePageObject
+            .getRenderedCellTextContent(rowIndex, columnIndex)
+            .replace(this.spaceUnicodeCharsRegEx, ' ');
+    }
+    getRenderedGroupHeaderContent(groupRowIndex) {
+        return this.tablePageObject
+            .getRenderedGroupHeaderTextContent(groupRowIndex)
+            .replace(this.spaceUnicodeCharsRegEx, ' ');
+    }
+    getCellTitle(rowIndex, columnIndex) {
+        this.verifyCellType(rowIndex, columnIndex);
+        return this.tablePageObject
+            .getCellTitle(rowIndex, columnIndex)
+            .replace(this.spaceUnicodeCharsRegEx, ' ');
+    }
+}
+//# sourceMappingURL=table-column-formatted-text.pageobject.js.map

package/dist/esm/table-column/testing/table-column-formatted-text.pageobject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-column-formatted-text.pageobject.js","sourceRoot":"","sources":["../../../../src/table-column/testing/table-column-formatted-text.pageobject.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,OAAgB,kCAAkC;IASpD,YACuB,eAAmC;QAAnC,oBAAe,GAAf,eAAe,CAAoB;QAP1D,qEAAqE;QACrE,0EAA0E;QAC1E,sEAAsE;QACtE,mEAAmE;QAClD,2BAAsB,GAAG,gBAAgB,CAAC;IAIxD,CAAC;IAEG,sBAAsB,CACzB,QAAgB,EAChB,WAAmB;QAEnB,OAAO,IAAI,CAAC,eAAe;aACtB,0BAA0B,CAAC,QAAQ,EAAE,WAAW,CAAC;aACjD,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC;IACnD,CAAC;IAEM,6BAA6B,CAAC,aAAqB;QACtD,OAAO,IAAI,CAAC,eAAe;aACtB,iCAAiC,CAAC,aAAa,CAAC;aAChD,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC;IACnD,CAAC;IAEM,YAAY,CAAC,QAAgB,EAAE,WAAmB;QACrD,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAC,eAAe;aACtB,YAAY,CAAC,QAAQ,EAAE,WAAW,CAAC;aACnC,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC;IACnD,CAAC;CAMJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "20.7.0",
+  "version": "20.8.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",