@ni/nimble-components 24.0.1 → 24.1.0

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

@@ -1 +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,mCAAmC,CAAC","sourcesContent":["import {\n    DesignSystem,\n    DesignTokenSubscriber\n} from '@microsoft/fast-foundation';\nimport { styles } from '../base/styles';\nimport { template } from '../base/template';\nimport type { TableNumberField } from '../../table/types';\nimport { TableColumnTextBase } from '../text-base';\nimport { TableColumnSortOperation } from '../base/types';\nimport { tableColumnDurationTextCellViewTag } from './cell-view';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\nimport { lang } from '../../theme-provider';\nimport { DurationFormatter } from './models/duration-formatter';\nimport { tableColumnDurationTextGroupHeaderViewTag } from './group-header-view';\n\nexport type TableColumnDurationTextCellRecord = TableNumberField<'value'>;\nexport interface TableColumnDurationTextColumnConfig {\n    formatter: DurationFormatter;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-duration-text': TableColumnDurationText;\n    }\n}\n\n/**\n * The table column for displaying a duration value as text.\n */\nexport class TableColumnDurationText extends TableColumnTextBase {\n    private readonly langSubscriber: DesignTokenSubscriber<typeof lang> = {\n        handleChange: () => {\n            this.updateColumnConfig();\n        }\n    };\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        lang.subscribe(this.langSubscriber, this);\n        this.updateColumnConfig();\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        lang.unsubscribe(this.langSubscriber, this);\n    }\n\n    protected override getColumnInternalsOptions(): ColumnInternalsOptions {\n        return {\n            cellRecordFieldNames: ['value'],\n            cellViewTag: tableColumnDurationTextCellViewTag,\n            groupHeaderViewTag: tableColumnDurationTextGroupHeaderViewTag,\n            delegatedEvents: [],\n            sortOperation: TableColumnSortOperation.basic\n        };\n    }\n\n    private updateColumnConfig(): void {\n        const formatter = new DurationFormatter(lang.getValueFor(this));\n\n        if (formatter) {\n            const columnConfig: TableColumnDurationTextColumnConfig = {\n                formatter\n            };\n            this.columnInternals.columnConfig = columnConfig;\n        } else {\n            this.columnInternals.columnConfig = undefined;\n        }\n    }\n}\n\nconst nimbleTableColumnDurationText = TableColumnDurationText.compose({\n    baseName: 'table-column-duration-text',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleTableColumnDurationText());\nexport const tableColumnDurationTextTag = 'nimble-table-column-duration-text';\n"]}
+{"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;AAehF;;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;IAoCN,CAAC;IAlCmB,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;IAEM,kBAAkB;QACrB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC9B,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,MAAM,YAAY,GAAwC;YACtD,SAAS;YACT,WAAW,EAAE,IAAI,CAAC,WAAW;SAChC,CAAC;QACF,IAAI,CAAC,eAAe,CAAC,YAAY,GAAG,YAAY,CAAC;IACrD,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,mCAAmC,CAAC","sourcesContent":["import {\n    DesignSystem,\n    DesignTokenSubscriber\n} from '@microsoft/fast-foundation';\nimport { styles } from '../base/styles';\nimport { template } from '../base/template';\nimport type { TableNumberField } from '../../table/types';\nimport { TableColumnTextBase } from '../text-base';\nimport { TableColumnSortOperation } from '../base/types';\nimport { tableColumnDurationTextCellViewTag } from './cell-view';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\nimport { lang } from '../../theme-provider';\nimport { DurationFormatter } from './models/duration-formatter';\nimport { tableColumnDurationTextGroupHeaderViewTag } from './group-header-view';\nimport type { TableColumnTextBaseColumnConfig } from '../text-base/cell-view';\n\nexport type TableColumnDurationTextCellRecord = TableNumberField<'value'>;\nexport interface TableColumnDurationTextColumnConfig\n    extends TableColumnTextBaseColumnConfig {\n    formatter: DurationFormatter;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-duration-text': TableColumnDurationText;\n    }\n}\n\n/**\n * The table column for displaying a duration value as text.\n */\nexport class TableColumnDurationText extends TableColumnTextBase {\n    private readonly langSubscriber: DesignTokenSubscriber<typeof lang> = {\n        handleChange: () => {\n            this.updateColumnConfig();\n        }\n    };\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        lang.subscribe(this.langSubscriber, this);\n        this.updateColumnConfig();\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        lang.unsubscribe(this.langSubscriber, this);\n    }\n\n    public placeholderChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected override getColumnInternalsOptions(): ColumnInternalsOptions {\n        return {\n            cellRecordFieldNames: ['value'],\n            cellViewTag: tableColumnDurationTextCellViewTag,\n            groupHeaderViewTag: tableColumnDurationTextGroupHeaderViewTag,\n            delegatedEvents: [],\n            sortOperation: TableColumnSortOperation.basic\n        };\n    }\n\n    private updateColumnConfig(): void {\n        const formatter = new DurationFormatter(lang.getValueFor(this));\n\n        const columnConfig: TableColumnDurationTextColumnConfig = {\n            formatter,\n            placeholder: this.placeholder\n        };\n        this.columnInternals.columnConfig = columnConfig;\n    }\n}\n\nconst nimbleTableColumnDurationText = TableColumnDurationText.compose({\n    baseName: 'table-column-duration-text',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleTableColumnDurationText());\nexport const tableColumnDurationTextTag = 'nimble-table-column-duration-text';\n"]}

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

@@ -6,9 +6,10 @@ import type { MappingKeyType } from './types';
 import type { MappingConfig } from './models/mapping-config';
 import type { MappingKey } from '../../mapping/base/types';
 import type { TableColumnEnumBaseValidator } from './models/table-column-enum-base-validator';
+import type { TableColumnTextBaseColumnConfig } from '../text-base/cell-view';
 export type TableColumnEnumCellRecord = TableStringField<'value'> | TableBooleanField<'value'> | TableNumberField<'value'>;
 export type MappingConfigs = Map<MappingKey, MappingConfig>;
-export interface TableColumnEnumColumnConfig {
+export interface TableColumnEnumColumnConfig extends TableColumnTextBaseColumnConfig {
     mappingConfigs: MappingConfigs;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/enum-base/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    attr,\n    Notifier,\n    Observable,\n    observable,\n    Subscriber\n} from '@microsoft/fast-element';\nimport type {\n    TableStringField,\n    TableBooleanField,\n    TableNumberField\n} from '../../table/types';\nimport { TableColumn } from '../base';\nimport { Mapping } from '../../mapping/base';\nimport type { MappingKeyType } from './types';\nimport type { MappingConfig } from './models/mapping-config';\nimport type { MappingKey } from '../../mapping/base/types';\nimport { resolveKeyWithType } from './models/mapping-key-resolver';\nimport type { TableColumnEnumBaseValidator } from './models/table-column-enum-base-validator';\n\nexport type TableColumnEnumCellRecord =\n    | TableStringField<'value'>\n    | TableBooleanField<'value'>\n    | TableNumberField<'value'>;\nexport type MappingConfigs = Map<MappingKey, MappingConfig>;\nexport interface TableColumnEnumColumnConfig {\n    mappingConfigs: MappingConfigs;\n}\n\n/**\n * Base class for table columns that map values to content (e.g. nimble-table-column-enum-text and nimble-table-column-icon)\n */\nexport abstract class TableColumnEnumBase<\n    TColumnConfig extends TableColumnEnumColumnConfig,\n    TEnumValidator extends TableColumnEnumBaseValidator<[]>\n>\n    extends TableColumn<TColumnConfig>\n    implements Subscriber {\n    // To ensure the validator is available when other properties get initialized\n    // (which can trigger validation), declare the validator first.\n    /** @internal */\n    public validator = this.createValidator();\n\n    /** @internal */\n    public mappingNotifiers: Notifier[] = [];\n\n    /** @internal */\n    @observable\n    public mappings: Mapping<unknown>[] = [];\n\n    @attr({ attribute: 'field-name' })\n    public fieldName?: string;\n\n    @attr({ attribute: 'key-type' })\n    public keyType: MappingKeyType = 'string';\n\n    /**\n     * @internal\n     *\n     * Triggers a request to update the columnConfig when any observable property on\n     * a mapping is updated.\n     */\n    public handleChange(source: unknown, args: unknown): void {\n        if (source instanceof Mapping && typeof args === 'string') {\n            this.updateColumnConfig();\n        }\n    }\n\n    public abstract createValidator(): TEnumValidator;\n\n    /**\n     * Implementations should throw an error if an invalid Mapping is passed.\n     */\n    protected abstract createMappingConfig(\n        mapping: Mapping<unknown>\n    ): MappingConfig;\n\n    protected abstract createColumnConfig(\n        mappingConfigs: MappingConfigs\n    ): TColumnConfig;\n\n    /**\n     * Called when any Mapping related state has changed.\n     */\n    private updateColumnConfig(): void {\n        this.validator.validate(this.mappings, this.keyType);\n        this.columnInternals.columnConfig = this.validator.isValid()\n            ? this.createColumnConfig(this.getMappingConfigs())\n            : undefined;\n    }\n\n    private getMappingConfigs(): MappingConfigs {\n        const mappingConfigs = new Map<MappingKey, MappingConfig>();\n        this.mappings.forEach(mapping => {\n            const key = resolveKeyWithType(mapping.key, this.keyType);\n            if (key === undefined) {\n                throw Error(\n                    'Key was invalid for type. Validation should have prevented this.'\n                );\n            }\n            const mappingConfig = this.createMappingConfig(mapping);\n            mappingConfigs.set(key, mappingConfig);\n        });\n        return mappingConfigs;\n    }\n\n    private fieldNameChanged(): void {\n        this.columnInternals.dataRecordFieldNames = [this.fieldName];\n        this.columnInternals.operandDataRecordFieldName = this.fieldName;\n    }\n\n    private mappingsChanged(): void {\n        this.updateColumnConfig();\n        this.observeMappings();\n    }\n\n    private keyTypeChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private removeMappingObservers(): void {\n        this.mappingNotifiers.forEach(notifier => {\n            notifier.unsubscribe(this);\n        });\n        this.mappingNotifiers = [];\n    }\n\n    private observeMappings(): void {\n        this.removeMappingObservers();\n\n        for (const mapping of this.mappings) {\n            const notifier = Observable.getNotifier(mapping);\n            notifier.subscribe(this);\n            this.mappingNotifiers.push(notifier);\n        }\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/enum-base/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    attr,\n    Notifier,\n    Observable,\n    observable,\n    Subscriber\n} from '@microsoft/fast-element';\nimport type {\n    TableStringField,\n    TableBooleanField,\n    TableNumberField\n} from '../../table/types';\nimport { TableColumn } from '../base';\nimport { Mapping } from '../../mapping/base';\nimport type { MappingKeyType } from './types';\nimport type { MappingConfig } from './models/mapping-config';\nimport type { MappingKey } from '../../mapping/base/types';\nimport { resolveKeyWithType } from './models/mapping-key-resolver';\nimport type { TableColumnEnumBaseValidator } from './models/table-column-enum-base-validator';\nimport type { TableColumnTextBaseColumnConfig } from '../text-base/cell-view';\n\nexport type TableColumnEnumCellRecord =\n    | TableStringField<'value'>\n    | TableBooleanField<'value'>\n    | TableNumberField<'value'>;\nexport type MappingConfigs = Map<MappingKey, MappingConfig>;\nexport interface TableColumnEnumColumnConfig\n    extends TableColumnTextBaseColumnConfig {\n    mappingConfigs: MappingConfigs;\n}\n\n/**\n * Base class for table columns that map values to content (e.g. nimble-table-column-enum-text and nimble-table-column-icon)\n */\nexport abstract class TableColumnEnumBase<\n    TColumnConfig extends TableColumnEnumColumnConfig,\n    TEnumValidator extends TableColumnEnumBaseValidator<[]>\n>\n    extends TableColumn<TColumnConfig>\n    implements Subscriber {\n    // To ensure the validator is available when other properties get initialized\n    // (which can trigger validation), declare the validator first.\n    /** @internal */\n    public validator = this.createValidator();\n\n    /** @internal */\n    public mappingNotifiers: Notifier[] = [];\n\n    /** @internal */\n    @observable\n    public mappings: Mapping<unknown>[] = [];\n\n    @attr({ attribute: 'field-name' })\n    public fieldName?: string;\n\n    @attr({ attribute: 'key-type' })\n    public keyType: MappingKeyType = 'string';\n\n    /**\n     * @internal\n     *\n     * Triggers a request to update the columnConfig when any observable property on\n     * a mapping is updated.\n     */\n    public handleChange(source: unknown, args: unknown): void {\n        if (source instanceof Mapping && typeof args === 'string') {\n            this.updateColumnConfig();\n        }\n    }\n\n    public abstract createValidator(): TEnumValidator;\n\n    /**\n     * Implementations should throw an error if an invalid Mapping is passed.\n     */\n    protected abstract createMappingConfig(\n        mapping: Mapping<unknown>\n    ): MappingConfig;\n\n    protected abstract createColumnConfig(\n        mappingConfigs: MappingConfigs\n    ): TColumnConfig;\n\n    /**\n     * Called when any Mapping related state has changed.\n     */\n    private updateColumnConfig(): void {\n        this.validator.validate(this.mappings, this.keyType);\n        this.columnInternals.columnConfig = this.validator.isValid()\n            ? this.createColumnConfig(this.getMappingConfigs())\n            : undefined;\n    }\n\n    private getMappingConfigs(): MappingConfigs {\n        const mappingConfigs = new Map<MappingKey, MappingConfig>();\n        this.mappings.forEach(mapping => {\n            const key = resolveKeyWithType(mapping.key, this.keyType);\n            if (key === undefined) {\n                throw Error(\n                    'Key was invalid for type. Validation should have prevented this.'\n                );\n            }\n            const mappingConfig = this.createMappingConfig(mapping);\n            mappingConfigs.set(key, mappingConfig);\n        });\n        return mappingConfigs;\n    }\n\n    private fieldNameChanged(): void {\n        this.columnInternals.dataRecordFieldNames = [this.fieldName];\n        this.columnInternals.operandDataRecordFieldName = this.fieldName;\n    }\n\n    private mappingsChanged(): void {\n        this.updateColumnConfig();\n        this.observeMappings();\n    }\n\n    private keyTypeChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private removeMappingObservers(): void {\n        this.mappingNotifiers.forEach(notifier => {\n            notifier.unsubscribe(this);\n        });\n        this.mappingNotifiers = [];\n    }\n\n    private observeMappings(): void {\n        this.removeMappingObservers();\n\n        for (const mapping of this.mappings) {\n            const notifier = Observable.getNotifier(mapping);\n            notifier.subscribe(this);\n            this.mappingNotifiers.push(notifier);\n        }\n    }\n}\n"]}

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

@@ -9,8 +9,6 @@ declare global {
  * A cell view for displaying mapped text
  */
 export declare class TableColumnEnumTextCellView extends TableColumnTextCellViewBase<TableColumnEnumCellRecord, TableColumnEnumColumnConfig> {
-    private columnConfigChanged;
-    private cellRecordChanged;
-    private updateText;
+    protected updateText(): void;
 }
 export declare const tableColumnEnumTextCellViewTag = "nimble-table-column-enum-text-cell-view";

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

@@ -7,12 +7,6 @@ import { MappingTextConfig } from '../../enum-base/models/mapping-text-config';
  * A cell view for displaying mapped text
  */
 export class TableColumnEnumTextCellView extends TableColumnTextCellViewBase {
-    columnConfigChanged() {
-        this.updateText();
-    }
-    cellRecordChanged() {
-        this.updateText();
-    }
     updateText() {
         const value = this.cellRecord?.value;
         if (value === undefined || value === null) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/enum-text/cell-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAK9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAQ/E;;GAEG;AACH,MAAM,OAAO,2BAA4B,SAAQ,2BAGhD;IACW,mBAAmB;QACvB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEO,iBAAiB;QACrB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEO,UAAU;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC;QACrC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;YACvC,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;YACf,OAAO;SACV;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC5D,IAAI,CAAC,IAAI,GAAG,MAAM,YAAY,iBAAiB,IAAI,MAAM,CAAC,IAAI;YAC1D,CAAC,CAAC,MAAM,CAAC,IAAI;YACb,CAAC,CAAC,EAAE,CAAC;IACb,CAAC;CACJ;AAED,MAAM,gBAAgB,GAAG,2BAA2B,CAAC,OAAO,CAAC;IACzD,QAAQ,EAAE,kCAAkC;IAC5C,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,8BAA8B,GAAG,yCAAyC,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { styles } from '../../text-base/cell-view/styles';\nimport { template } from '../../text-base/cell-view/template';\nimport type {\n    TableColumnEnumCellRecord,\n    TableColumnEnumColumnConfig\n} from '../../enum-base';\nimport { TableColumnTextCellViewBase } from '../../text-base/cell-view';\nimport { MappingTextConfig } from '../../enum-base/models/mapping-text-config';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-enum-text-cell-view': TableColumnEnumTextCellView;\n    }\n}\n\n/**\n * A cell view for displaying mapped text\n */\nexport class TableColumnEnumTextCellView extends TableColumnTextCellViewBase<\nTableColumnEnumCellRecord,\nTableColumnEnumColumnConfig\n> {\n    private columnConfigChanged(): void {\n        this.updateText();\n    }\n\n    private cellRecordChanged(): void {\n        this.updateText();\n    }\n\n    private updateText(): void {\n        const value = this.cellRecord?.value;\n        if (value === undefined || value === null) {\n            this.text = '';\n            return;\n        }\n\n        const config = this.columnConfig?.mappingConfigs.get(value);\n        this.text = config instanceof MappingTextConfig && config.text\n            ? config.text\n            : '';\n    }\n}\n\nconst enumTextCellView = TableColumnEnumTextCellView.compose({\n    baseName: 'table-column-enum-text-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(enumTextCellView());\nexport const tableColumnEnumTextCellViewTag = 'nimble-table-column-enum-text-cell-view';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/enum-text/cell-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAK9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAQ/E;;GAEG;AACH,MAAM,OAAO,2BAA4B,SAAQ,2BAGhD;IACa,UAAU;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC;QACrC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;YACvC,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;YACf,OAAO;SACV;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC5D,IAAI,CAAC,IAAI,GAAG,MAAM,YAAY,iBAAiB,IAAI,MAAM,CAAC,IAAI;YAC1D,CAAC,CAAC,MAAM,CAAC,IAAI;YACb,CAAC,CAAC,EAAE,CAAC;IACb,CAAC;CACJ;AAED,MAAM,gBAAgB,GAAG,2BAA2B,CAAC,OAAO,CAAC;IACzD,QAAQ,EAAE,kCAAkC;IAC5C,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,8BAA8B,GAAG,yCAAyC,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { styles } from '../../text-base/cell-view/styles';\nimport { template } from '../../text-base/cell-view/template';\nimport type {\n    TableColumnEnumCellRecord,\n    TableColumnEnumColumnConfig\n} from '../../enum-base';\nimport { TableColumnTextCellViewBase } from '../../text-base/cell-view';\nimport { MappingTextConfig } from '../../enum-base/models/mapping-text-config';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-enum-text-cell-view': TableColumnEnumTextCellView;\n    }\n}\n\n/**\n * A cell view for displaying mapped text\n */\nexport class TableColumnEnumTextCellView extends TableColumnTextCellViewBase<\nTableColumnEnumCellRecord,\nTableColumnEnumColumnConfig\n> {\n    protected updateText(): void {\n        const value = this.cellRecord?.value;\n        if (value === undefined || value === null) {\n            this.text = '';\n            return;\n        }\n\n        const config = this.columnConfig?.mappingConfigs.get(value);\n        this.text = config instanceof MappingTextConfig && config.text\n            ? config.text\n            : '';\n    }\n}\n\nconst enumTextCellView = TableColumnEnumTextCellView.compose({\n    baseName: 'table-column-enum-text-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(enumTextCellView());\nexport const tableColumnEnumTextCellViewTag = 'nimble-table-column-enum-text-cell-view';\n"]}

package/dist/esm/table-column/mixins/placeholder.d.ts

@@ -0,0 +1,9 @@
+import type { TableColumn } from '../base';
+type TableColumnWithPlaceholder = Pick<TableColumn, never>;
+type TableColumnWithPlaceholderConstructor = abstract new (...args: any[]) => TableColumnWithPlaceholder;
+export declare function mixinColumnWithPlaceholderAPI<TBase extends TableColumnWithPlaceholderConstructor>(base: TBase): (abstract new (...args: any[]) => {
+    placeholder?: string | undefined;
+    /** @internal */
+    placeholderChanged(): void;
+}) & TBase;
+export {};

package/dist/esm/table-column/mixins/placeholder.js

@@ -0,0 +1,16 @@
+import { attr } from '@microsoft/fast-element';
+// As the returned class is internal to the function, we can't write a signature that uses it directly, so rely on inference
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+export function mixinColumnWithPlaceholderAPI(base) {
+    /**
+     * The Mixin that provides a concrete column with the API to allow grouping
+     * by the values in that column.
+     */
+    class ColumnWithPlaceholder extends base {
+    }
+    attr({ attribute: 'placeholder' })(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    ColumnWithPlaceholder.prototype, 'placeholder');
+    return ColumnWithPlaceholder;
+}
+//# sourceMappingURL=placeholder.js.map

package/dist/esm/table-column/mixins/placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeholder.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/placeholder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAU/C,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,6BAA6B,CAE3C,IAAW;IACT;;;OAGG;IACH,MAAe,qBAAsB,SAAQ,IAAI;KAKhD;IACD,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;IAC9B,iEAAiE;IACjE,qBAAqB,CAAC,SAAS,EAC/B,aAAa,CAChB,CAAC;IAEF,OAAO,qBAAqB,CAAC;AACjC,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport type { TableColumn } from '../base';\n\n// Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)\n// Because the 'placeholder' mixin doesn't depend on any properties of the TableColumn, there are no properties to pick.\ntype TableColumnWithPlaceholder = Pick<TableColumn, never>;\n// prettier-ignore\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype TableColumnWithPlaceholderConstructor = abstract new (...args: any[]) => TableColumnWithPlaceholder;\n\n// As the returned class is internal to the function, we can't write a signature that uses it directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinColumnWithPlaceholderAPI<\n    TBase extends TableColumnWithPlaceholderConstructor\n>(base: TBase) {\n    /**\n     * The Mixin that provides a concrete column with the API to allow grouping\n     * by the values in that column.\n     */\n    abstract class ColumnWithPlaceholder extends base {\n        public placeholder?: string;\n\n        /** @internal */\n        public abstract placeholderChanged(): void;\n    }\n    attr({ attribute: 'placeholder' })(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n        ColumnWithPlaceholder.prototype,\n        'placeholder'\n    );\n\n    return ColumnWithPlaceholder;\n}\n"]}

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

@@ -9,8 +9,7 @@ declare global {
  * A cell view for displaying number fields as text
  */
 export declare class TableColumnNumberTextCellView extends TableColumnTextCellViewBase<TableColumnNumberTextCellRecord, TableColumnNumberTextColumnConfig> {
-    private columnConfigChanged;
-    private cellRecordChanged;
-    private updateText;
+    protected columnConfigChanged(): void;
+    protected updateText(): void;
 }
 export declare const tableColumnNumberTextCellViewTag = "nimble-table-column-number-text-cell-view";

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

@@ -8,12 +8,9 @@ import { TextCellViewBaseAlignment } from '../../text-base/cell-view/types';
  */
 export class TableColumnNumberTextCellView extends TableColumnTextCellViewBase {
     columnConfigChanged() {
-        this.updateText();
+        super.columnConfigChanged();
         this.alignment = this.columnConfig?.alignment ?? TextCellViewBaseAlignment.left;
     }
-    cellRecordChanged() {
-        this.updateText();
-    }
     updateText() {
         this.text = this.columnConfig?.formatter?.format(this.cellRecord?.value) ?? '';
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/number-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;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAQ5E;;GAEG;AACH,MAAM,OAAO,6BAA8B,SAAQ,2BAGlD;IACW,mBAAmB;QACvB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,IAAI,yBAAyB,CAAC,IAAI,CAAC;IACpF,CAAC;IAEO,iBAAiB;QACrB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEO,UAAU;QACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IACnF,CAAC;CACJ;AAED,MAAM,kBAAkB,GAAG,6BAA6B,CAAC,OAAO,CAAC;IAC7D,QAAQ,EAAE,oCAAoC;IAC9C,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/E,MAAM,CAAC,MAAM,gCAAgC,GAAG,2CAA2C,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../../text-base/cell-view/template';\nimport type {\n    TableColumnNumberTextCellRecord,\n    TableColumnNumberTextColumnConfig\n} from '..';\nimport { styles } from '../../text-base/cell-view/styles';\nimport { TableColumnTextCellViewBase } from '../../text-base/cell-view';\nimport { TextCellViewBaseAlignment } from '../../text-base/cell-view/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-number-text-cell-view': TableColumnNumberTextCellView;\n    }\n}\n\n/**\n * A cell view for displaying number fields as text\n */\nexport class TableColumnNumberTextCellView extends TableColumnTextCellViewBase<\nTableColumnNumberTextCellRecord,\nTableColumnNumberTextColumnConfig\n> {\n    private columnConfigChanged(): void {\n        this.updateText();\n        this.alignment = this.columnConfig?.alignment ?? TextCellViewBaseAlignment.left;\n    }\n\n    private cellRecordChanged(): void {\n        this.updateText();\n    }\n\n    private updateText(): void {\n        this.text = this.columnConfig?.formatter?.format(this.cellRecord?.value) ?? '';\n    }\n}\n\nconst numberTextCellView = TableColumnNumberTextCellView.compose({\n    baseName: 'table-column-number-text-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());\nexport const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/number-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;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAQ5E;;GAEG;AACH,MAAM,OAAO,6BAA8B,SAAQ,2BAGlD;IACsB,mBAAmB;QAClC,KAAK,CAAC,mBAAmB,EAAE,CAAC;QAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,IAAI,yBAAyB,CAAC,IAAI,CAAC;IACpF,CAAC;IAES,UAAU;QAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IACnF,CAAC;CACJ;AAED,MAAM,kBAAkB,GAAG,6BAA6B,CAAC,OAAO,CAAC;IAC7D,QAAQ,EAAE,oCAAoC;IAC9C,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/E,MAAM,CAAC,MAAM,gCAAgC,GAAG,2CAA2C,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../../text-base/cell-view/template';\nimport type {\n    TableColumnNumberTextCellRecord,\n    TableColumnNumberTextColumnConfig\n} from '..';\nimport { styles } from '../../text-base/cell-view/styles';\nimport { TableColumnTextCellViewBase } from '../../text-base/cell-view';\nimport { TextCellViewBaseAlignment } from '../../text-base/cell-view/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-number-text-cell-view': TableColumnNumberTextCellView;\n    }\n}\n\n/**\n * A cell view for displaying number fields as text\n */\nexport class TableColumnNumberTextCellView extends TableColumnTextCellViewBase<\nTableColumnNumberTextCellRecord,\nTableColumnNumberTextColumnConfig\n> {\n    protected override columnConfigChanged(): void {\n        super.columnConfigChanged();\n        this.alignment = this.columnConfig?.alignment ?? TextCellViewBaseAlignment.left;\n    }\n\n    protected updateText(): void {\n        this.text = this.columnConfig?.formatter?.format(this.cellRecord?.value) ?? '';\n    }\n}\n\nconst numberTextCellView = TableColumnNumberTextCellView.compose({\n    baseName: 'table-column-number-text-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());\nexport const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';\n"]}

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

@@ -6,8 +6,9 @@ import { NumberTextAlignment, NumberTextFormat } from './types';
 import type { UnitFormat } from '../../utilities/unit-format/unit-format';
 import { TableColumnNumberTextValidator } from './models/table-column-number-text-validator';
 import { TextCellViewBaseAlignment } from '../text-base/cell-view/types';
+import type { TableColumnTextBaseColumnConfig } from '../text-base/cell-view';
 export type TableColumnNumberTextCellRecord = TableNumberField<'value'>;
-export interface TableColumnNumberTextColumnConfig {
+export interface TableColumnNumberTextColumnConfig extends TableColumnTextBaseColumnConfig {
     formatter: UnitFormat;
     alignment: TextCellViewBaseAlignment;
 }
@@ -35,6 +36,7 @@ export declare class TableColumnNumberText extends TableColumnTextBase {
     connectedCallback(): void;
     disconnectedCallback(): void;
     get validity(): TableColumnValidity;
+    placeholderChanged(): void;
     protected getColumnInternalsOptions(): ColumnInternalsOptions;
     private updateUnitNotifier;
     private formatChanged;

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

@@ -45,6 +45,9 @@ export class TableColumnNumberText extends TableColumnTextBase {
     get validity() {
         return this.validator.getValidity();
     }
+    placeholderChanged() {
+        this.updateColumnConfig();
+    }
     getColumnInternalsOptions() {
         return {
             cellRecordFieldNames: ['value'],
@@ -99,7 +102,8 @@ export class TableColumnNumberText extends TableColumnTextBase {
         if (this.validator.isValid()) {
             const columnConfig = {
                 formatter: this.createFormatter(),
-                alignment: this.determineCellContentAlignment()
+                alignment: this.determineCellContentAlignment(),
+                placeholder: this.placeholder
             };
             this.columnInternals.columnConfig = columnConfig;
         }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/number-text/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    DesignSystem,\n    DesignTokenSubscriber\n} from '@microsoft/fast-foundation';\nimport {\n    attr,\n    Notifier,\n    nullableNumberConverter,\n    Observable,\n    observable,\n    Subscriber\n} from '@microsoft/fast-element';\nimport { styles } from '../base/styles';\nimport { template } from './template';\nimport type { TableNumberField } from '../../table/types';\nimport { TableColumnTextBase } from '../text-base';\nimport { TableColumnSortOperation, TableColumnValidity } from '../base/types';\nimport { tableColumnNumberTextGroupHeaderTag } from './group-header-view';\nimport { tableColumnNumberTextCellViewTag } from './cell-view';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\nimport { NumberTextAlignment, NumberTextFormat } from './types';\nimport type { UnitFormat } from '../../utilities/unit-format/unit-format';\nimport { NumberTextUnitFormat } from './models/number-text-unit-format';\nimport { TableColumnNumberTextValidator } from './models/table-column-number-text-validator';\nimport { TextCellViewBaseAlignment } from '../text-base/cell-view/types';\nimport { lang } from '../../theme-provider';\nimport { Unit } from '../../unit/base/unit';\nimport { waitUntilCustomElementsDefinedAsync } from '../../utilities/wait-until-custom-elements-defined-async';\n\nexport type TableColumnNumberTextCellRecord = TableNumberField<'value'>;\nexport interface TableColumnNumberTextColumnConfig {\n    formatter: UnitFormat;\n    alignment: TextCellViewBaseAlignment;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-number-text': TableColumnNumberText;\n    }\n}\n\n/**\n * The table column for displaying numbers as text.\n */\nexport class TableColumnNumberText extends TableColumnTextBase {\n    /** @internal */\n    public validator = new TableColumnNumberTextValidator(this.columnInternals);\n\n    @attr\n    public format: NumberTextFormat;\n\n    @attr\n    public alignment: NumberTextAlignment;\n\n    @attr({ attribute: 'decimal-digits', converter: nullableNumberConverter })\n    public decimalDigits?: number;\n\n    @attr({\n        attribute: 'decimal-maximum-digits',\n        converter: nullableNumberConverter\n    })\n    public decimalMaximumDigits?: number;\n\n    /** @internal */\n    @observable\n    public unitElements?: Element[];\n\n    @observable\n    private unit?: Unit;\n\n    private unitNotifier?: Notifier;\n\n    private readonly langSubscriber: DesignTokenSubscriber<typeof lang> = {\n        handleChange: () => {\n            this.updateColumnConfig();\n        }\n    };\n\n    private readonly unitSubscriber: Subscriber = {\n        handleChange: () => {\n            this.updateColumnConfig();\n        }\n    };\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        lang.subscribe(this.langSubscriber, this);\n        this.updateColumnConfig();\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        lang.unsubscribe(this.langSubscriber, this);\n    }\n\n    public override get validity(): TableColumnValidity {\n        return this.validator.getValidity();\n    }\n\n    protected override getColumnInternalsOptions(): ColumnInternalsOptions {\n        return {\n            cellRecordFieldNames: ['value'],\n            cellViewTag: tableColumnNumberTextCellViewTag,\n            groupHeaderViewTag: tableColumnNumberTextGroupHeaderTag,\n            delegatedEvents: [],\n            sortOperation: TableColumnSortOperation.basic\n        };\n    }\n\n    private updateUnitNotifier(): void {\n        if (this.unitNotifier) {\n            this.unitNotifier.unsubscribe(this.unitSubscriber);\n            this.unitNotifier = undefined;\n        }\n\n        if (this.unit) {\n            const notifier = Observable.getNotifier(this.unit);\n            notifier.subscribe(this.unitSubscriber, 'resolvedUnitScale');\n            this.unitNotifier = notifier;\n        }\n    }\n\n    private formatChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private alignmentChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private decimalDigitsChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private decimalMaximumDigitsChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private unitElementsChanged(): void {\n        void this.updateUnit();\n    }\n\n    private async updateUnit(): Promise<void> {\n        this.unit = undefined;\n        if (this.unitElements) {\n            await waitUntilCustomElementsDefinedAsync(this.unitElements);\n            this.unit = this.unitElements.find(\n                (x): x is Unit => x instanceof Unit\n            );\n        }\n        this.updateUnitNotifier();\n    }\n\n    private unitChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private updateColumnConfig(): void {\n        this.validator.validateDecimalDigits(this.format, this.decimalDigits);\n        this.validator.validateDecimalMaximumDigits(\n            this.format,\n            this.decimalMaximumDigits\n        );\n        this.validator.validateNoMutuallyExclusiveProperties(\n            this.format,\n            this.decimalDigits,\n            this.decimalMaximumDigits\n        );\n        this.validator.validateAtMostOneUnit(this.unitElements ?? []);\n\n        if (this.validator.isValid()) {\n            const columnConfig: TableColumnNumberTextColumnConfig = {\n                formatter: this.createFormatter(),\n                alignment: this.determineCellContentAlignment()\n            };\n            this.columnInternals.columnConfig = columnConfig;\n        } else {\n            this.columnInternals.columnConfig = undefined;\n        }\n    }\n\n    private createFormatter(): UnitFormat {\n        const unitScale = this.unit?.resolvedUnitScale;\n        return new NumberTextUnitFormat(lang.getValueFor(this), {\n            // Attribute values sometimes resolve to either null or undefined\n            // See https://github.com/microsoft/fast/issues/6630\n            numberTextFormat: this.format ?? undefined,\n            decimalDigits: this.decimalDigits ?? undefined,\n            decimalMaximumDigits: this.decimalMaximumDigits ?? undefined,\n            unitScale\n        });\n    }\n\n    private determineCellContentAlignment(): TextCellViewBaseAlignment {\n        if (this.alignment === NumberTextAlignment.left) {\n            return TextCellViewBaseAlignment.left;\n        }\n\n        if (this.alignment === NumberTextAlignment.right) {\n            return TextCellViewBaseAlignment.right;\n        }\n\n        // Look at format and decimal max digits and unit to determine the default alignment\n        if (\n            this.format === NumberTextFormat.decimal\n            && typeof this.decimalMaximumDigits !== 'number'\n            && !this.unit\n        ) {\n            return TextCellViewBaseAlignment.right;\n        }\n        return TextCellViewBaseAlignment.left;\n    }\n}\n\nconst nimbleTableColumnNumberText = TableColumnNumberText.compose({\n    baseName: 'table-column-number-text',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleTableColumnNumberText());\nexport const tableColumnNumberTextTag = 'nimble-table-column-number-text';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/number-text/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    DesignSystem,\n    DesignTokenSubscriber\n} from '@microsoft/fast-foundation';\nimport {\n    attr,\n    Notifier,\n    nullableNumberConverter,\n    Observable,\n    observable,\n    Subscriber\n} from '@microsoft/fast-element';\nimport { styles } from '../base/styles';\nimport { template } from './template';\nimport type { TableNumberField } from '../../table/types';\nimport { TableColumnTextBase } from '../text-base';\nimport { TableColumnSortOperation, TableColumnValidity } from '../base/types';\nimport { tableColumnNumberTextGroupHeaderTag } from './group-header-view';\nimport { tableColumnNumberTextCellViewTag } from './cell-view';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\nimport { NumberTextAlignment, NumberTextFormat } from './types';\nimport type { UnitFormat } from '../../utilities/unit-format/unit-format';\nimport { NumberTextUnitFormat } from './models/number-text-unit-format';\nimport { TableColumnNumberTextValidator } from './models/table-column-number-text-validator';\nimport { TextCellViewBaseAlignment } from '../text-base/cell-view/types';\nimport { lang } from '../../theme-provider';\nimport { Unit } from '../../unit/base/unit';\nimport { waitUntilCustomElementsDefinedAsync } from '../../utilities/wait-until-custom-elements-defined-async';\nimport type { TableColumnTextBaseColumnConfig } from '../text-base/cell-view';\n\nexport type TableColumnNumberTextCellRecord = TableNumberField<'value'>;\nexport interface TableColumnNumberTextColumnConfig\n    extends TableColumnTextBaseColumnConfig {\n    formatter: UnitFormat;\n    alignment: TextCellViewBaseAlignment;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-number-text': TableColumnNumberText;\n    }\n}\n\n/**\n * The table column for displaying numbers as text.\n */\nexport class TableColumnNumberText extends TableColumnTextBase {\n    /** @internal */\n    public validator = new TableColumnNumberTextValidator(this.columnInternals);\n\n    @attr\n    public format: NumberTextFormat;\n\n    @attr\n    public alignment: NumberTextAlignment;\n\n    @attr({ attribute: 'decimal-digits', converter: nullableNumberConverter })\n    public decimalDigits?: number;\n\n    @attr({\n        attribute: 'decimal-maximum-digits',\n        converter: nullableNumberConverter\n    })\n    public decimalMaximumDigits?: number;\n\n    /** @internal */\n    @observable\n    public unitElements?: Element[];\n\n    @observable\n    private unit?: Unit;\n\n    private unitNotifier?: Notifier;\n\n    private readonly langSubscriber: DesignTokenSubscriber<typeof lang> = {\n        handleChange: () => {\n            this.updateColumnConfig();\n        }\n    };\n\n    private readonly unitSubscriber: Subscriber = {\n        handleChange: () => {\n            this.updateColumnConfig();\n        }\n    };\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        lang.subscribe(this.langSubscriber, this);\n        this.updateColumnConfig();\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        lang.unsubscribe(this.langSubscriber, this);\n    }\n\n    public override get validity(): TableColumnValidity {\n        return this.validator.getValidity();\n    }\n\n    public placeholderChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected override getColumnInternalsOptions(): ColumnInternalsOptions {\n        return {\n            cellRecordFieldNames: ['value'],\n            cellViewTag: tableColumnNumberTextCellViewTag,\n            groupHeaderViewTag: tableColumnNumberTextGroupHeaderTag,\n            delegatedEvents: [],\n            sortOperation: TableColumnSortOperation.basic\n        };\n    }\n\n    private updateUnitNotifier(): void {\n        if (this.unitNotifier) {\n            this.unitNotifier.unsubscribe(this.unitSubscriber);\n            this.unitNotifier = undefined;\n        }\n\n        if (this.unit) {\n            const notifier = Observable.getNotifier(this.unit);\n            notifier.subscribe(this.unitSubscriber, 'resolvedUnitScale');\n            this.unitNotifier = notifier;\n        }\n    }\n\n    private formatChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private alignmentChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private decimalDigitsChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private decimalMaximumDigitsChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private unitElementsChanged(): void {\n        void this.updateUnit();\n    }\n\n    private async updateUnit(): Promise<void> {\n        this.unit = undefined;\n        if (this.unitElements) {\n            await waitUntilCustomElementsDefinedAsync(this.unitElements);\n            this.unit = this.unitElements.find(\n                (x): x is Unit => x instanceof Unit\n            );\n        }\n        this.updateUnitNotifier();\n    }\n\n    private unitChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private updateColumnConfig(): void {\n        this.validator.validateDecimalDigits(this.format, this.decimalDigits);\n        this.validator.validateDecimalMaximumDigits(\n            this.format,\n            this.decimalMaximumDigits\n        );\n        this.validator.validateNoMutuallyExclusiveProperties(\n            this.format,\n            this.decimalDigits,\n            this.decimalMaximumDigits\n        );\n        this.validator.validateAtMostOneUnit(this.unitElements ?? []);\n\n        if (this.validator.isValid()) {\n            const columnConfig: TableColumnNumberTextColumnConfig = {\n                formatter: this.createFormatter(),\n                alignment: this.determineCellContentAlignment(),\n                placeholder: this.placeholder\n            };\n            this.columnInternals.columnConfig = columnConfig;\n        } else {\n            this.columnInternals.columnConfig = undefined;\n        }\n    }\n\n    private createFormatter(): UnitFormat {\n        const unitScale = this.unit?.resolvedUnitScale;\n        return new NumberTextUnitFormat(lang.getValueFor(this), {\n            // Attribute values sometimes resolve to either null or undefined\n            // See https://github.com/microsoft/fast/issues/6630\n            numberTextFormat: this.format ?? undefined,\n            decimalDigits: this.decimalDigits ?? undefined,\n            decimalMaximumDigits: this.decimalMaximumDigits ?? undefined,\n            unitScale\n        });\n    }\n\n    private determineCellContentAlignment(): TextCellViewBaseAlignment {\n        if (this.alignment === NumberTextAlignment.left) {\n            return TextCellViewBaseAlignment.left;\n        }\n\n        if (this.alignment === NumberTextAlignment.right) {\n            return TextCellViewBaseAlignment.right;\n        }\n\n        // Look at format and decimal max digits and unit to determine the default alignment\n        if (\n            this.format === NumberTextFormat.decimal\n            && typeof this.decimalMaximumDigits !== 'number'\n            && !this.unit\n        ) {\n            return TextCellViewBaseAlignment.right;\n        }\n        return TextCellViewBaseAlignment.left;\n    }\n}\n\nconst nimbleTableColumnNumberText = TableColumnNumberText.compose({\n    baseName: 'table-column-number-text',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleTableColumnNumberText());\nexport const tableColumnNumberTextTag = 'nimble-table-column-number-text';\n"]}

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

@@ -9,6 +9,6 @@ declare global {
  * A cell view for displaying string fields as text
  */
 export declare class TableColumnTextCellView extends TableColumnTextCellViewBase<TableColumnTextCellRecord, TableColumnTextColumnConfig> {
-    private cellRecordChanged;
+    protected updateText(): void;
 }
 export declare const tableColumnTextCellViewTag = "nimble-table-column-text-cell-view";

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"]}