@ni/nimble-components 24.0.1 → 24.1.1

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

@@ -6,7 +6,7 @@ import { TableColumnTextCellViewBase } from '../../text-base/cell-view';
  * A cell view for displaying string fields as text
  */
 export class TableColumnTextCellView extends TableColumnTextCellViewBase {
-    cellRecordChanged() {
+    updateText() {
         this.text = typeof this.cellRecord?.value === 'string'
             ? this.cellRecord.value
             : '';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/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,uBAAwB,SAAQ,2BAG5C;IACW,iBAAiB;QACrB,IAAI,CAAC,IAAI,GAAG,OAAO,IAAI,CAAC,UAAU,EAAE,KAAK,KAAK,QAAQ;YAClD,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;YACvB,CAAC,CAAC,EAAE,CAAC;IACb,CAAC;CACJ;AAED,MAAM,YAAY,GAAG,uBAAuB,CAAC,OAAO,CAAC;IACjD,QAAQ,EAAE,6BAA6B;IACvC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,0BAA0B,GAAG,oCAAoC,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../../text-base/cell-view/template';\nimport type {\n    TableColumnTextCellRecord,\n    TableColumnTextColumnConfig\n} from '..';\nimport { styles } from '../../text-base/cell-view/styles';\nimport { TableColumnTextCellViewBase } from '../../text-base/cell-view';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-text-cell-view': TableColumnTextCellView;\n    }\n}\n\n/**\n * A cell view for displaying string fields as text\n */\nexport class TableColumnTextCellView extends TableColumnTextCellViewBase<\nTableColumnTextCellRecord,\nTableColumnTextColumnConfig\n> {\n    private cellRecordChanged(): void {\n        this.text = typeof this.cellRecord?.value === 'string'\n            ? this.cellRecord.value\n            : '';\n    }\n}\n\nconst textCellView = TableColumnTextCellView.compose({\n    baseName: 'table-column-text-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());\nexport const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/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,uBAAwB,SAAQ,2BAG5C;IACa,UAAU;QAChB,IAAI,CAAC,IAAI,GAAG,OAAO,IAAI,CAAC,UAAU,EAAE,KAAK,KAAK,QAAQ;YAClD,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;YACvB,CAAC,CAAC,EAAE,CAAC;IACb,CAAC;CACJ;AAED,MAAM,YAAY,GAAG,uBAAuB,CAAC,OAAO,CAAC;IACjD,QAAQ,EAAE,6BAA6B;IACvC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,0BAA0B,GAAG,oCAAoC,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../../text-base/cell-view/template';\nimport type {\n    TableColumnTextCellRecord,\n    TableColumnTextColumnConfig\n} from '..';\nimport { styles } from '../../text-base/cell-view/styles';\nimport { TableColumnTextCellViewBase } from '../../text-base/cell-view';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-text-cell-view': TableColumnTextCellView;\n    }\n}\n\n/**\n * A cell view for displaying string fields as text\n */\nexport class TableColumnTextCellView extends TableColumnTextCellViewBase<\nTableColumnTextCellRecord,\nTableColumnTextColumnConfig\n> {\n    protected updateText(): void {\n        this.text = typeof this.cellRecord?.value === 'string'\n            ? this.cellRecord.value\n            : '';\n    }\n}\n\nconst textCellView = TableColumnTextCellView.compose({\n    baseName: 'table-column-text-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());\nexport const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';\n"]}

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

@@ -1,8 +1,9 @@
 import type { TableStringField } from '../../table/types';
 import { TableColumnTextBase } from '../text-base';
 import type { ColumnInternalsOptions } from '../base/models/column-internals';
+import type { TableColumnTextBaseColumnConfig } from '../text-base/cell-view';
 export type TableColumnTextCellRecord = TableStringField<'value'>;
-export interface TableColumnTextColumnConfig {
+export interface TableColumnTextColumnConfig extends TableColumnTextBaseColumnConfig {
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -13,6 +14,7 @@ declare global {
  * The table column for displaying string fields as text.
  */
 export declare class TableColumnText extends TableColumnTextBase {
+    placeholderChanged(): void;
     protected getColumnInternalsOptions(): ColumnInternalsOptions;
 }
 export declare const tableColumnTextTag = "nimble-table-column-text";

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

@@ -9,6 +9,11 @@ import { tableColumnTextCellViewTag } from './cell-view';
  * The table column for displaying string fields as text.
  */
 export class TableColumnText extends TableColumnTextBase {
+    placeholderChanged() {
+        this.columnInternals.columnConfig = {
+            placeholder: this.placeholder
+        };
+    }
     getColumnInternalsOptions() {
         return {
             cellRecordFieldNames: ['value'],

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,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,iCAAiC,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAazD;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,mBAAmB;IACjC,yBAAyB;QACxC,OAAO;YACH,oBAAoB,EAAE,CAAC,OAAO,CAAC;YAC/B,WAAW,EAAE,0BAA0B;YACvC,kBAAkB,EAAE,iCAAiC;YACrD,eAAe,EAAE,EAAE;YACnB,aAAa,EAAE,wBAAwB,CAAC,wBAAwB;SACnE,CAAC;IACN,CAAC;CACJ;AAED,MAAM,qBAAqB,GAAG,eAAe,CAAC,OAAO,CAAC;IAClD,QAAQ,EAAE,mBAAmB;IAC7B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,qBAAqB,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,0BAA0B,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { styles } from '../base/styles';\nimport { template } from '../base/template';\nimport type { TableStringField } from '../../table/types';\nimport { TableColumnTextBase } from '../text-base';\nimport { TableColumnSortOperation } from '../base/types';\nimport { tableColumnTextGroupHeaderViewTag } from './group-header-view';\nimport { tableColumnTextCellViewTag } from './cell-view';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\n\nexport type TableColumnTextCellRecord = TableStringField<'value'>;\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TableColumnTextColumnConfig {}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-text': TableColumnText;\n    }\n}\n\n/**\n * The table column for displaying string fields as text.\n */\nexport class TableColumnText extends TableColumnTextBase {\n    protected override getColumnInternalsOptions(): ColumnInternalsOptions {\n        return {\n            cellRecordFieldNames: ['value'],\n            cellViewTag: tableColumnTextCellViewTag,\n            groupHeaderViewTag: tableColumnTextGroupHeaderViewTag,\n            delegatedEvents: [],\n            sortOperation: TableColumnSortOperation.localeAwareCaseSensitive\n        };\n    }\n}\n\nconst nimbleTableColumnText = TableColumnText.compose({\n    baseName: 'table-column-text',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleTableColumnText());\nexport const tableColumnTextTag = 'nimble-table-column-text';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,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,iCAAiC,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAgBzD;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,mBAAmB;IAC7C,kBAAkB;QACrB,IAAI,CAAC,eAAe,CAAC,YAAY,GAAG;YAChC,WAAW,EAAE,IAAI,CAAC,WAAW;SAChC,CAAC;IACN,CAAC;IAEkB,yBAAyB;QACxC,OAAO;YACH,oBAAoB,EAAE,CAAC,OAAO,CAAC;YAC/B,WAAW,EAAE,0BAA0B;YACvC,kBAAkB,EAAE,iCAAiC;YACrD,eAAe,EAAE,EAAE;YACnB,aAAa,EAAE,wBAAwB,CAAC,wBAAwB;SACnE,CAAC;IACN,CAAC;CACJ;AAED,MAAM,qBAAqB,GAAG,eAAe,CAAC,OAAO,CAAC;IAClD,QAAQ,EAAE,mBAAmB;IAC7B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,qBAAqB,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,0BAA0B,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { styles } from '../base/styles';\nimport { template } from '../base/template';\nimport type { TableStringField } from '../../table/types';\nimport { TableColumnTextBase } from '../text-base';\nimport { TableColumnSortOperation } from '../base/types';\nimport { tableColumnTextGroupHeaderViewTag } from './group-header-view';\nimport { tableColumnTextCellViewTag } from './cell-view';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\nimport type { TableColumnTextBaseColumnConfig } from '../text-base/cell-view';\n\nexport type TableColumnTextCellRecord = TableStringField<'value'>;\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TableColumnTextColumnConfig\n    extends TableColumnTextBaseColumnConfig {}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-text': TableColumnText;\n    }\n}\n\n/**\n * The table column for displaying string fields as text.\n */\nexport class TableColumnText extends TableColumnTextBase {\n    public placeholderChanged(): void {\n        this.columnInternals.columnConfig = {\n            placeholder: this.placeholder\n        };\n    }\n\n    protected override getColumnInternalsOptions(): ColumnInternalsOptions {\n        return {\n            cellRecordFieldNames: ['value'],\n            cellViewTag: tableColumnTextCellViewTag,\n            groupHeaderViewTag: tableColumnTextGroupHeaderViewTag,\n            delegatedEvents: [],\n            sortOperation: TableColumnSortOperation.localeAwareCaseSensitive\n        };\n    }\n}\n\nconst nimbleTableColumnText = TableColumnText.compose({\n    baseName: 'table-column-text',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleTableColumnText());\nexport const tableColumnTextTag = 'nimble-table-column-text';\n"]}

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

@@ -1,10 +1,17 @@
 import { TableCellView } from '../../base/cell-view';
 import type { TableCellRecord } from '../../base/types';
 import { TextCellViewBaseAlignment } from './types';
+import type { TableFieldValue } from '../../../table/types';
+export interface TableColumnTextBaseCellRecord extends TableCellRecord {
+    value: TableFieldValue;
+}
+export interface TableColumnTextBaseColumnConfig {
+    placeholder?: string;
+}
 /**
  * The cell view base class for displaying fields of any type as text.
  */
-export declare abstract class TableColumnTextCellViewBase<TCellRecord extends TableCellRecord = TableCellRecord, TColumnConfig = unknown> extends TableCellView<TCellRecord, TColumnConfig> {
+export declare abstract class TableColumnTextCellViewBase<TCellRecord extends TableColumnTextBaseCellRecord = TableColumnTextBaseCellRecord, TColumnConfig extends TableColumnTextBaseColumnConfig = TableColumnTextBaseColumnConfig> extends TableCellView<TCellRecord, TColumnConfig> {
     /** @internal */
     hasOverflow: boolean;
     /**
@@ -15,4 +22,16 @@ export declare abstract class TableColumnTextCellViewBase<TCellRecord extends Ta
      * The alignment of the text within the cell.
      */
     alignment: TextCellViewBaseAlignment;
+    /**
+     * Whether or not the text being displayed in the cell view is a placeholder.
+     */
+    isPlaceholder: boolean;
+    protected abstract updateText(): void;
+    protected columnConfigChanged(): void;
+    private cellRecordChanged;
+    /**
+     * Sets `this.text` to the appropriate placeholder if `cellValue` warrants it.
+     * @returns `true` if `this.text` was set to a placeholder, `false` otherwise.
+     */
+    private applyPlaceholderTextIfNeeded;
 }

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

@@ -18,6 +18,37 @@ export class TableColumnTextCellViewBase extends TableCellView {
          * The alignment of the text within the cell.
          */
         this.alignment = TextCellViewBaseAlignment.left;
+        /**
+         * Whether or not the text being displayed in the cell view is a placeholder.
+         */
+        this.isPlaceholder = false;
+    }
+    columnConfigChanged() {
+        if (!this.applyPlaceholderTextIfNeeded()) {
+            this.updateText();
+        }
+    }
+    cellRecordChanged() {
+        if (!this.applyPlaceholderTextIfNeeded()) {
+            this.updateText();
+        }
+    }
+    /**
+     * Sets `this.text` to the appropriate placeholder if `cellValue` warrants it.
+     * @returns `true` if `this.text` was set to a placeholder, `false` otherwise.
+     */
+    applyPlaceholderTextIfNeeded() {
+        const cellValue = this.cellRecord?.value;
+        const placeholder = this.columnConfig?.placeholder;
+        if (typeof placeholder === 'string'
+            && (cellValue === null || cellValue === undefined)) {
+            this.text = placeholder;
+            this.isPlaceholder = true;
+        }
+        else {
+            this.isPlaceholder = false;
+        }
+        return this.isPlaceholder;
     }
 }
 __decorate([
@@ -29,4 +60,7 @@ __decorate([
 __decorate([
     observable
 ], TableColumnTextCellViewBase.prototype, "alignment", void 0);
+__decorate([
+    observable
+], TableColumnTextCellViewBase.prototype, "isPlaceholder", void 0);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEpD;;GAEG;AACH,MAAM,OAAgB,2BAGpB,SAAQ,aAAyC;IAHnD;;QAII,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;QAE3B;;WAEG;QAEI,SAAI,GAAG,EAAE,CAAC;QAEjB;;WAEG;QAEI,cAAS,GAA8B,yBAAyB,CAAC,IAAI,CAAC;IACjF,CAAC;CAAA;AAbG;IADC,UAAU;gEACgB;AAM3B;IADC,UAAU;yDACM;AAMjB;IADC,UAAU;8DACkE","sourcesContent":["import { observable } from '@microsoft/fast-element';\nimport { TableCellView } from '../../base/cell-view';\nimport type { TableCellRecord } from '../../base/types';\nimport { TextCellViewBaseAlignment } from './types';\n\n/**\n * The cell view base class for displaying fields of any type as text.\n */\nexport abstract class TableColumnTextCellViewBase<\n    TCellRecord extends TableCellRecord = TableCellRecord,\n    TColumnConfig = unknown\n> extends TableCellView<TCellRecord, TColumnConfig> {\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /**\n     * Text to render in the cell.\n     */\n    @observable\n    public text = '';\n\n    /**\n     * The alignment of the text within the cell.\n     */\n    @observable\n    public alignment: TextCellViewBaseAlignment = TextCellViewBaseAlignment.left;\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAWpD;;GAEG;AACH,MAAM,OAAgB,2BAKpB,SAAQ,aAAyC;IALnD;;QAMI,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;QAE3B;;WAEG;QAEI,SAAI,GAAG,EAAE,CAAC;QAEjB;;WAEG;QAEI,cAAS,GAA8B,yBAAyB,CAAC,IAAI,CAAC;QAE7E;;WAEG;QAEI,kBAAa,GAAG,KAAK,CAAC;IAmCjC,CAAC;IA/Ba,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,4BAA4B,EAAE,EAAE;YACtC,IAAI,CAAC,UAAU,EAAE,CAAC;SACrB;IACL,CAAC;IAEO,iBAAiB;QACrB,IAAI,CAAC,IAAI,CAAC,4BAA4B,EAAE,EAAE;YACtC,IAAI,CAAC,UAAU,EAAE,CAAC;SACrB;IACL,CAAC;IAED;;;OAGG;IACK,4BAA4B;QAChC,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC;QACzC,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;QACnD,IACI,OAAO,WAAW,KAAK,QAAQ;eAC5B,CAAC,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,SAAS,CAAC,EACpD;YACE,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC;YACxB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC7B;aAAM;YACH,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC9B;QAED,OAAO,IAAI,CAAC,aAAa,CAAC;IAC9B,CAAC;CACJ;AArDG;IADC,UAAU;gEACgB;AAM3B;IADC,UAAU;yDACM;AAMjB;IADC,UAAU;8DACkE;AAM7E;IADC,UAAU;kEACkB","sourcesContent":["import { observable } from '@microsoft/fast-element';\nimport { TableCellView } from '../../base/cell-view';\nimport type { TableCellRecord } from '../../base/types';\nimport { TextCellViewBaseAlignment } from './types';\nimport type { TableFieldValue } from '../../../table/types';\n\nexport interface TableColumnTextBaseCellRecord extends TableCellRecord {\n    value: TableFieldValue;\n}\n\nexport interface TableColumnTextBaseColumnConfig {\n    placeholder?: string;\n}\n\n/**\n * The cell view base class for displaying fields of any type as text.\n */\nexport abstract class TableColumnTextCellViewBase<\n    TCellRecord extends\n    TableColumnTextBaseCellRecord = TableColumnTextBaseCellRecord,\n    TColumnConfig extends\n    TableColumnTextBaseColumnConfig = TableColumnTextBaseColumnConfig\n> extends TableCellView<TCellRecord, TColumnConfig> {\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /**\n     * Text to render in the cell.\n     */\n    @observable\n    public text = '';\n\n    /**\n     * The alignment of the text within the cell.\n     */\n    @observable\n    public alignment: TextCellViewBaseAlignment = TextCellViewBaseAlignment.left;\n\n    /**\n     * Whether or not the text being displayed in the cell view is a placeholder.\n     */\n    @observable\n    public isPlaceholder = false;\n\n    protected abstract updateText(): void;\n\n    protected columnConfigChanged(): void {\n        if (!this.applyPlaceholderTextIfNeeded()) {\n            this.updateText();\n        }\n    }\n\n    private cellRecordChanged(): void {\n        if (!this.applyPlaceholderTextIfNeeded()) {\n            this.updateText();\n        }\n    }\n\n    /**\n     * Sets `this.text` to the appropriate placeholder if `cellValue` warrants it.\n     * @returns `true` if `this.text` was set to a placeholder, `false` otherwise.\n     */\n    private applyPlaceholderTextIfNeeded(): boolean {\n        const cellValue = this.cellRecord?.value;\n        const placeholder = this.columnConfig?.placeholder;\n        if (\n            typeof placeholder === 'string'\n            && (cellValue === null || cellValue === undefined)\n        ) {\n            this.text = placeholder;\n            this.isPlaceholder = true;\n        } else {\n            this.isPlaceholder = false;\n        }\n\n        return this.isPlaceholder;\n    }\n}\n"]}

package/dist/esm/table-column/text-base/cell-view/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { bodyFont, bodyFontColor } from '../../../theme-provider/design-tokens';
+import { bodyFont, bodyFontColor, placeholderFont, placeholderFontColor } from '../../../theme-provider/design-tokens';
 export const styles = css `
     :host(.right-align) {
         margin-left: auto;
@@ -12,5 +12,10 @@ export const styles = css `
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    :host(.placeholder) span {
+        font: ${placeholderFont};
+        color: ${placeholderFontColor};
+    }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/table-column/text-base/cell-view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAEhF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;gBAMT,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { bodyFont, bodyFontColor } from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    :host(.right-align) {\n        margin-left: auto;\n    }\n\n    span {\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;gBAMT,QAAQ;iBACP,aAAa;;;;;;;gBAOd,eAAe;iBACd,oBAAoB;;CAEpC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    placeholderFont,\n    placeholderFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    :host(.right-align) {\n        margin-left: auto;\n    }\n\n    span {\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    :host(.placeholder) span {\n        font: ${placeholderFont};\n        color: ${placeholderFontColor};\n    }\n`;\n"]}

package/dist/esm/table-column/text-base/cell-view/template.d.ts

@@ -1,2 +1,2 @@
 import type { TableColumnTextCellViewBase } from '.';
-export declare const template: import("@microsoft/fast-element").ViewTemplate<TableColumnTextCellViewBase<import("../../base/types").TableCellRecord, unknown>, any>;
+export declare const template: import("@microsoft/fast-element").ViewTemplate<TableColumnTextCellViewBase<import(".").TableColumnTextBaseCellRecord, import(".").TableColumnTextBaseColumnConfig>, any>;

package/dist/esm/table-column/text-base/cell-view/template.js

@@ -1,11 +1,13 @@
 import { html } from '@microsoft/fast-element';
 import { overflow } from '../../../utilities/directive/overflow';
 import { TextCellViewBaseAlignment } from './types';
+// prettier-ignore
 export const template = html `
     <template
-        class="${x => (x.alignment === TextCellViewBaseAlignment.right
-    ? 'right-align'
-    : '')}"
+        class="
+            ${x => (x.alignment === TextCellViewBaseAlignment.right ? 'right-align' : '')}
+            ${x => (x.isPlaceholder ? 'placeholder' : '')}
+        "
     >
         <span
             ${overflow('hasOverflow')}

package/dist/esm/table-column/text-base/cell-view/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA6B;;iBAExC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,yBAAyB,CAAC,KAAK;IAC9D,CAAC,CAAC,aAAa;IACf,CAAC,CAAC,EAAE,CAAC;;;cAGC,QAAQ,CAAC,aAAa,CAAC;oBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;;cAEpD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;;CAGxB,CAAC","sourcesContent":["import { html } from '@microsoft/fast-element';\n\nimport type { TableColumnTextCellViewBase } from '.';\nimport { overflow } from '../../../utilities/directive/overflow';\nimport { TextCellViewBaseAlignment } from './types';\n\nexport const template = html<TableColumnTextCellViewBase>`\n    <template\n        class=\"${x => (x.alignment === TextCellViewBaseAlignment.right\n        ? 'right-align'\n        : '')}\"\n    >\n        <span\n            ${overflow('hasOverflow')}\n            title=${x => (x.hasOverflow && x.text ? x.text : null)}\n        >\n            ${x => x.text}\n        </span>\n    </template>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA6B;;;cAG3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,yBAAyB,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;cAC3E,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;;;;cAI3C,QAAQ,CAAC,aAAa,CAAC;oBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;;cAEpD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;;CAGxB,CAAC","sourcesContent":["import { html } from '@microsoft/fast-element';\n\nimport type { TableColumnTextCellViewBase } from '.';\nimport { overflow } from '../../../utilities/directive/overflow';\nimport { TextCellViewBaseAlignment } from './types';\n\n// prettier-ignore\nexport const template = html<TableColumnTextCellViewBase>`\n    <template\n        class=\"\n            ${x => (x.alignment === TextCellViewBaseAlignment.right ? 'right-align' : '')}\n            ${x => (x.isPlaceholder ? 'placeholder' : '')}\n        \"\n    >\n        <span\n            ${overflow('hasOverflow')}\n            title=${x => (x.hasOverflow && x.text ? x.text : null)}\n        >\n            ${x => x.text}\n        </span>\n    </template>\n`;\n"]}

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

@@ -11,6 +11,9 @@ declare const TableColumnTextBase_base: (abstract new (...args: any[]) => {
     fractionalWidthChanged(): void;
     minPixelWidthChanged(): void;
     readonly columnInternals: import("../base/models/column-internals").ColumnInternals<unknown>;
+}) & (abstract new (...args: any[]) => {
+    placeholder?: string | undefined;
+    placeholderChanged(): void;
 }) & typeof TableColumn;
 /**
  * The base class for table columns that display fields of any type as text.

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

@@ -3,10 +3,11 @@ import { attr } from '@microsoft/fast-element';
 import { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';
 import { TableColumn } from '../base';
 import { mixinGroupableColumnAPI } from '../mixins/groupable-column';
+import { mixinColumnWithPlaceholderAPI } from '../mixins/placeholder';
 /**
  * The base class for table columns that display fields of any type as text.
  */
-export class TableColumnTextBase extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(TableColumn)) {
+export class TableColumnTextBase extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(TableColumn))) {
     fieldNameChanged() {
         this.columnInternals.dataRecordFieldNames = [this.fieldName];
         this.columnInternals.operandDataRecordFieldName = this.fieldName;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/text-base/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAErE;;GAEG;AACH,MAAM,OAAgB,mBAAoB,SAAQ,uBAAuB,CACrE,6BAA6B,CAAC,WAAW,CAAC,CAC7C;IAIa,gBAAgB;QACtB,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7D,IAAI,CAAC,eAAe,CAAC,0BAA0B,GAAG,IAAI,CAAC,SAAS,CAAC;IACrE,CAAC;CACJ;AANG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;sDACR","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';\nimport { TableColumn } from '../base';\nimport { mixinGroupableColumnAPI } from '../mixins/groupable-column';\n\n/**\n * The base class for table columns that display fields of any type as text.\n */\nexport abstract class TableColumnTextBase extends mixinGroupableColumnAPI(\n    mixinFractionalWidthColumnAPI(TableColumn)\n) {\n    @attr({ attribute: 'field-name' })\n    public fieldName?: string;\n\n    protected fieldNameChanged(): void {\n        this.columnInternals.dataRecordFieldNames = [this.fieldName];\n        this.columnInternals.operandDataRecordFieldName = this.fieldName;\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/text-base/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,6BAA6B,EAAE,MAAM,uBAAuB,CAAC;AAEtE;;GAEG;AACH,MAAM,OAAgB,mBAAoB,SAAQ,uBAAuB,CACrE,6BAA6B,CAAC,6BAA6B,CAAC,WAAW,CAAC,CAAC,CAC5E;IAIa,gBAAgB;QACtB,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7D,IAAI,CAAC,eAAe,CAAC,0BAA0B,GAAG,IAAI,CAAC,SAAS,CAAC;IACrE,CAAC;CACJ;AANG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;sDACR","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';\nimport { TableColumn } from '../base';\nimport { mixinGroupableColumnAPI } from '../mixins/groupable-column';\nimport { mixinColumnWithPlaceholderAPI } from '../mixins/placeholder';\n\n/**\n * The base class for table columns that display fields of any type as text.\n */\nexport abstract class TableColumnTextBase extends mixinGroupableColumnAPI(\n    mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(TableColumn))\n) {\n    @attr({ attribute: 'field-name' })\n    public fieldName?: string;\n\n    protected fieldNameChanged(): void {\n        this.columnInternals.dataRecordFieldNames = [this.fieldName];\n        this.columnInternals.operandDataRecordFieldName = this.fieldName;\n    }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "24.0.1",
+  "version": "24.1.1",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
@@ -108,6 +108,7 @@
   "devDependencies": {
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.20.12",
+    "@chromatic-com/storybook": "^1.2.25",
     "@microsoft/fast-react-wrapper": "0.3.22",
     "@ni/eslint-config-javascript": "^4.2.0",
     "@ni/eslint-config-typescript": "^4.2.0",
@@ -117,18 +118,19 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-terser": "^0.4.0",
-    "@storybook/addon-a11y": "^7.6.13",
-    "@storybook/addon-actions": "^7.6.13",
-    "@storybook/addon-docs": "^7.6.13",
-    "@storybook/addon-essentials": "^7.6.13",
-    "@storybook/addon-interactions": "^7.6.13",
-    "@storybook/addon-links": "^7.6.13",
-    "@storybook/addons": "^7.6.13",
-    "@storybook/cli": "^7.6.13",
+    "@storybook/addon-a11y": "^8.0.4",
+    "@storybook/addon-actions": "^8.0.4",
+    "@storybook/addon-docs": "^8.0.4",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/cli": "^8.0.4",
     "@storybook/csf": "^0.1.2",
-    "@storybook/html": "^7.6.13",
-    "@storybook/html-webpack5": "^7.6.13",
-    "@storybook/theming": "^7.6.13",
+    "@storybook/html": "^8.0.4",
+    "@storybook/html-webpack5": "^8.0.4",
+    "@storybook/manager-api": "^8.0.4",
+    "@storybook/theming": "^8.0.4",
     "@types/jasmine": "^5.1.4",
     "@types/webpack-env": "^1.15.2",
     "babel-loader": "^9.1.2",
@@ -154,12 +156,13 @@
     "playwright": "1.42.0",
     "prettier-eslint": "^16.3.0",
     "prettier-eslint-cli": "^8.0.1",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "rollup": "^4.12.0",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "source-map-loader": "^5.0.0",
-    "storybook": "^7.6.13",
+    "storybook": "^8.0.4",
+    "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^9.2.5",
     "typescript": "~4.9.5",
     "webpack": "^5.75.0",