@ni/nimble-components 24.0.1 → 24.1.0

package/dist/esm/src/wafer-map/modules/wafer-map-validator.d.ts

@@ -0,0 +1,16 @@
+import type { WaferMap } from '..';
+import type { WaferMapValidity } from '../types';
+/**
+ * Helper class for the nimble-wafer-map to validate that the wafer maps's grid dimensions
+ * configuration is valid and report which aspects of the configuration are valid or invalid.
+ */
+export declare class WaferMapValidator {
+    private readonly wafermap;
+    private invalidGridDimensions;
+    private invalidDiesTableSchema;
+    constructor(wafermap: WaferMap);
+    getValidity(): WaferMapValidity;
+    isValid(): boolean;
+    validateGridDimensions(): boolean;
+    validateDiesTableSchema(): boolean;
+}

package/dist/esm/src/wafer-map/modules/zoom-handler.d.ts

@@ -0,0 +1,20 @@
+import type { WaferMap } from '..';
+/**
+ * ZoomHandler deals with user interactions and events like zooming
+ */
+export declare class ZoomHandler {
+    private readonly wafermap;
+    private readonly scaleExtent;
+    private readonly minExtentPoint;
+    constructor(wafermap: WaferMap);
+    /**
+     * @internal
+     */
+    connect(): void;
+    /**
+     * @internal
+     */
+    disconnect(): void;
+    private createZoomBehavior;
+    private readonly onWheelMove;
+}

package/dist/esm/src/wafer-map/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/wafer-map/template.d.ts

@@ -0,0 +1,2 @@
+import type { WaferMap } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<WaferMap<import("./types").WaferRequiredFields>, any>;

package/dist/esm/src/wafer-map/types.d.ts

@@ -0,0 +1,73 @@
+import type { Float64, Int32 } from 'apache-arrow';
+export declare const WaferMapOriginLocation: {
+    readonly bottomLeft: "bottom-left";
+    readonly bottomRight: "bottom-right";
+    readonly topLeft: "top-left";
+    readonly topRight: "top-right";
+};
+export type WaferMapOriginLocation = (typeof WaferMapOriginLocation)[keyof typeof WaferMapOriginLocation];
+export declare const WaferMapOrientation: {
+    readonly top: "top";
+    readonly bottom: "bottom";
+    readonly left: "left";
+    readonly right: "right";
+};
+export type WaferMapOrientation = (typeof WaferMapOrientation)[keyof typeof WaferMapOrientation];
+export declare const HoverDieOpacity: {
+    readonly show: "show";
+    readonly hide: "hide";
+};
+export type HoverDieOpacity = (typeof HoverDieOpacity)[keyof typeof HoverDieOpacity];
+export declare const WaferMapColorScaleMode: {
+    readonly linear: "linear";
+    readonly ordinal: "ordinal";
+};
+export type WaferMapColorScaleMode = (typeof WaferMapColorScaleMode)[keyof typeof WaferMapColorScaleMode];
+export interface WaferMapDie {
+    value: string;
+    x: number;
+    y: number;
+    metadata?: unknown;
+    tags?: string[];
+}
+export interface HoverDie {
+    index: number;
+    x: number;
+    y: number;
+}
+export interface WaferMapColorScale {
+    colors: string[];
+    values: string[];
+}
+export interface Dimensions {
+    readonly width: number;
+    readonly height: number;
+}
+export interface Margin {
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+}
+export interface DieRenderInfo {
+    readonly x: number;
+    readonly y: number;
+    readonly fillStyle: string;
+    readonly text: string;
+}
+export interface PointCoordinates {
+    readonly x: number;
+    readonly y: number;
+}
+export interface ValidityObject {
+    [key: string]: boolean;
+}
+export interface WaferMapValidity extends ValidityObject {
+    readonly invalidGridDimensions: boolean;
+    readonly invalidDiesTableSchema: boolean;
+}
+export type WaferRequiredFields = {
+    colIndex: Int32;
+    rowIndex: Int32;
+    value: Float64;
+};

package/dist/esm/src/wafer-map/workers/matrix-renderer.d.ts

@@ -0,0 +1 @@
+export declare const workerCode = "var MatrixRenderer = (function (exports) {\n    'use strict';\n\n    /**\n     * @license\n     * Copyright 2019 Google LLC\n     * SPDX-License-Identifier: Apache-2.0\n     */\n    const proxyMarker = Symbol(\"Comlink.proxy\");\n    const createEndpoint = Symbol(\"Comlink.endpoint\");\n    const releaseProxy = Symbol(\"Comlink.releaseProxy\");\n    const finalizer = Symbol(\"Comlink.finalizer\");\n    const throwMarker = Symbol(\"Comlink.thrown\");\n    const isObject = (val) => (typeof val === \"object\" && val !== null) || typeof val === \"function\";\n    /**\n     * Internal transfer handle to handle objects marked to proxy.\n     */\n    const proxyTransferHandler = {\n        canHandle: (val) => isObject(val) && val[proxyMarker],\n        serialize(obj) {\n            const { port1, port2 } = new MessageChannel();\n            expose(obj, port1);\n            return [port2, [port2]];\n        },\n        deserialize(port) {\n            port.start();\n            return wrap(port);\n        },\n    };\n    /**\n     * Internal transfer handler to handle thrown exceptions.\n     */\n    const throwTransferHandler = {\n        canHandle: (value) => isObject(value) && throwMarker in value,\n        serialize({ value }) {\n            let serialized;\n            if (value instanceof Error) {\n                serialized = {\n                    isError: true,\n                    value: {\n                        message: value.message,\n                        name: value.name,\n                        stack: value.stack,\n                    },\n                };\n            }\n            else {\n                serialized = { isError: false, value };\n            }\n            return [serialized, []];\n        },\n        deserialize(serialized) {\n            if (serialized.isError) {\n                throw Object.assign(new Error(serialized.value.message), serialized.value);\n            }\n            throw serialized.value;\n        },\n    };\n    /**\n     * Allows customizing the serialization of certain values.\n     */\n    const transferHandlers = new Map([\n        [\"proxy\", proxyTransferHandler],\n        [\"throw\", throwTransferHandler],\n    ]);\n    function isAllowedOrigin(allowedOrigins, origin) {\n        for (const allowedOrigin of allowedOrigins) {\n            if (origin === allowedOrigin || allowedOrigin === \"*\") {\n                return true;\n            }\n            if (allowedOrigin instanceof RegExp && allowedOrigin.test(origin)) {\n                return true;\n            }\n        }\n        return false;\n    }\n    function expose(obj, ep = globalThis, allowedOrigins = [\"*\"]) {\n        ep.addEventListener(\"message\", function callback(ev) {\n            if (!ev || !ev.data) {\n                return;\n            }\n            if (!isAllowedOrigin(allowedOrigins, ev.origin)) {\n                console.warn(`Invalid origin '${ev.origin}' for comlink proxy`);\n                return;\n            }\n            const { id, type, path } = Object.assign({ path: [] }, ev.data);\n            const argumentList = (ev.data.argumentList || []).map(fromWireValue);\n            let returnValue;\n            try {\n                const parent = path.slice(0, -1).reduce((obj, prop) => obj[prop], obj);\n                const rawValue = path.reduce((obj, prop) => obj[prop], obj);\n                switch (type) {\n                    case \"GET\" /* MessageType.GET */:\n                        {\n                            returnValue = rawValue;\n                        }\n                        break;\n                    case \"SET\" /* MessageType.SET */:\n                        {\n                            parent[path.slice(-1)[0]] = fromWireValue(ev.data.value);\n                            returnValue = true;\n                        }\n                        break;\n                    case \"APPLY\" /* MessageType.APPLY */:\n                        {\n                            returnValue = rawValue.apply(parent, argumentList);\n                        }\n                        break;\n                    case \"CONSTRUCT\" /* MessageType.CONSTRUCT */:\n                        {\n                            const value = new rawValue(...argumentList);\n                            returnValue = proxy(value);\n                        }\n                        break;\n                    case \"ENDPOINT\" /* MessageType.ENDPOINT */:\n                        {\n                            const { port1, port2 } = new MessageChannel();\n                            expose(obj, port2);\n                            returnValue = transfer(port1, [port1]);\n                        }\n                        break;\n                    case \"RELEASE\" /* MessageType.RELEASE */:\n                        {\n                            returnValue = undefined;\n                        }\n                        break;\n                    default:\n                        return;\n                }\n            }\n            catch (value) {\n                returnValue = { value, [throwMarker]: 0 };\n            }\n            Promise.resolve(returnValue)\n                .catch((value) => {\n                return { value, [throwMarker]: 0 };\n            })\n                .then((returnValue) => {\n                const [wireValue, transferables] = toWireValue(returnValue);\n                ep.postMessage(Object.assign(Object.assign({}, wireValue), { id }), transferables);\n                if (type === \"RELEASE\" /* MessageType.RELEASE */) {\n                    // detach and deactive after sending release response above.\n                    ep.removeEventListener(\"message\", callback);\n                    closeEndPoint(ep);\n                    if (finalizer in obj && typeof obj[finalizer] === \"function\") {\n                        obj[finalizer]();\n                    }\n                }\n            })\n                .catch((error) => {\n                // Send Serialization Error To Caller\n                const [wireValue, transferables] = toWireValue({\n                    value: new TypeError(\"Unserializable return value\"),\n                    [throwMarker]: 0,\n                });\n                ep.postMessage(Object.assign(Object.assign({}, wireValue), { id }), transferables);\n            });\n        });\n        if (ep.start) {\n            ep.start();\n        }\n    }\n    function isMessagePort(endpoint) {\n        return endpoint.constructor.name === \"MessagePort\";\n    }\n    function closeEndPoint(endpoint) {\n        if (isMessagePort(endpoint))\n            endpoint.close();\n    }\n    function wrap(ep, target) {\n        return createProxy(ep, [], target);\n    }\n    function throwIfProxyReleased(isReleased) {\n        if (isReleased) {\n            throw new Error(\"Proxy has been released and is not useable\");\n        }\n    }\n    function releaseEndpoint(ep) {\n        return requestResponseMessage(ep, {\n            type: \"RELEASE\" /* MessageType.RELEASE */,\n        }).then(() => {\n            closeEndPoint(ep);\n        });\n    }\n    const proxyCounter = new WeakMap();\n    const proxyFinalizers = \"FinalizationRegistry\" in globalThis &&\n        new FinalizationRegistry((ep) => {\n            const newCount = (proxyCounter.get(ep) || 0) - 1;\n            proxyCounter.set(ep, newCount);\n            if (newCount === 0) {\n                releaseEndpoint(ep);\n            }\n        });\n    function registerProxy(proxy, ep) {\n        const newCount = (proxyCounter.get(ep) || 0) + 1;\n        proxyCounter.set(ep, newCount);\n        if (proxyFinalizers) {\n            proxyFinalizers.register(proxy, ep, proxy);\n        }\n    }\n    function unregisterProxy(proxy) {\n        if (proxyFinalizers) {\n            proxyFinalizers.unregister(proxy);\n        }\n    }\n    function createProxy(ep, path = [], target = function () { }) {\n        let isProxyReleased = false;\n        const proxy = new Proxy(target, {\n            get(_target, prop) {\n                throwIfProxyReleased(isProxyReleased);\n                if (prop === releaseProxy) {\n                    return () => {\n                        unregisterProxy(proxy);\n                        releaseEndpoint(ep);\n                        isProxyReleased = true;\n                    };\n                }\n                if (prop === \"then\") {\n                    if (path.length === 0) {\n                        return { then: () => proxy };\n                    }\n                    const r = requestResponseMessage(ep, {\n                        type: \"GET\" /* MessageType.GET */,\n                        path: path.map((p) => p.toString()),\n                    }).then(fromWireValue);\n                    return r.then.bind(r);\n                }\n                return createProxy(ep, [...path, prop]);\n            },\n            set(_target, prop, rawValue) {\n                throwIfProxyReleased(isProxyReleased);\n                // FIXME: ES6 Proxy Handler `set` methods are supposed to return a\n                // boolean. To show good will, we return true asynchronously \u00AF\\_(\u30C4)_/\u00AF\n                const [value, transferables] = toWireValue(rawValue);\n                return requestResponseMessage(ep, {\n                    type: \"SET\" /* MessageType.SET */,\n                    path: [...path, prop].map((p) => p.toString()),\n                    value,\n                }, transferables).then(fromWireValue);\n            },\n            apply(_target, _thisArg, rawArgumentList) {\n                throwIfProxyReleased(isProxyReleased);\n                const last = path[path.length - 1];\n                if (last === createEndpoint) {\n                    return requestResponseMessage(ep, {\n                        type: \"ENDPOINT\" /* MessageType.ENDPOINT */,\n                    }).then(fromWireValue);\n                }\n                // We just pretend that `bind()` didn\u2019t happen.\n                if (last === \"bind\") {\n                    return createProxy(ep, path.slice(0, -1));\n                }\n                const [argumentList, transferables] = processArguments(rawArgumentList);\n                return requestResponseMessage(ep, {\n                    type: \"APPLY\" /* MessageType.APPLY */,\n                    path: path.map((p) => p.toString()),\n                    argumentList,\n                }, transferables).then(fromWireValue);\n            },\n            construct(_target, rawArgumentList) {\n                throwIfProxyReleased(isProxyReleased);\n                const [argumentList, transferables] = processArguments(rawArgumentList);\n                return requestResponseMessage(ep, {\n                    type: \"CONSTRUCT\" /* MessageType.CONSTRUCT */,\n                    path: path.map((p) => p.toString()),\n                    argumentList,\n                }, transferables).then(fromWireValue);\n            },\n        });\n        registerProxy(proxy, ep);\n        return proxy;\n    }\n    function myFlat(arr) {\n        return Array.prototype.concat.apply([], arr);\n    }\n    function processArguments(argumentList) {\n        const processed = argumentList.map(toWireValue);\n        return [processed.map((v) => v[0]), myFlat(processed.map((v) => v[1]))];\n    }\n    const transferCache = new WeakMap();\n    function transfer(obj, transfers) {\n        transferCache.set(obj, transfers);\n        return obj;\n    }\n    function proxy(obj) {\n        return Object.assign(obj, { [proxyMarker]: true });\n    }\n    function toWireValue(value) {\n        for (const [name, handler] of transferHandlers) {\n            if (handler.canHandle(value)) {\n                const [serializedValue, transferables] = handler.serialize(value);\n                return [\n                    {\n                        type: \"HANDLER\" /* WireValueType.HANDLER */,\n                        name,\n                        value: serializedValue,\n                    },\n                    transferables,\n                ];\n            }\n        }\n        return [\n            {\n                type: \"RAW\" /* WireValueType.RAW */,\n                value,\n            },\n            transferCache.get(value) || [],\n        ];\n    }\n    function fromWireValue(value) {\n        switch (value.type) {\n            case \"HANDLER\" /* WireValueType.HANDLER */:\n                return transferHandlers.get(value.name).deserialize(value.value);\n            case \"RAW\" /* WireValueType.RAW */:\n                return value.value;\n        }\n    }\n    function requestResponseMessage(ep, msg, transfers) {\n        return new Promise((resolve) => {\n            const id = generateUUID();\n            ep.addEventListener(\"message\", function l(ev) {\n                if (!ev.data || !ev.data.id || ev.data.id !== id) {\n                    return;\n                }\n                ep.removeEventListener(\"message\", l);\n                resolve(ev.data);\n            });\n            if (ep.start) {\n                ep.start();\n            }\n            ep.postMessage(Object.assign({ id }, msg), transfers);\n        });\n    }\n    function generateUUID() {\n        return new Array(4)\n            .fill(0)\n            .map(() => Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16))\n            .join(\"-\");\n    }\n\n    /**\n     * MatrixRenderer class is meant to be used within a Web Worker context,\n     * using Comlink to facilitate communication between the main thread and the worker.\n     * The MatrixRenderer class manages a matrix of dies, once an instance of MatrixRenderer is created,\n     * it is exposed to the main thread using Comlink's `expose` method.\n     * This setup is used in the wafer-map component to perform heavy computational duties\n     */\n    class MatrixRenderer {\n        constructor() {\n            this.dieMatrix = Uint8Array.from([]);\n        }\n        emptyMatrix() {\n            this.dieMatrix = Uint8Array.from([]);\n        }\n        updateMatrix(data) {\n            this.dieMatrix = Uint8Array.from(data);\n        }\n    }\n    expose(MatrixRenderer);\n\n    exports.MatrixRenderer = MatrixRenderer;\n\n    return exports;\n\n})({});\n";

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

@@ -13,6 +13,8 @@ export declare class TableColumnAnchorCellView extends TableCellView<TableColumn
     /** @internal */
     hasOverflow: boolean;
     /** @internal */
+    isPlaceholder: boolean;
+    /** @internal */
     anchor?: Anchor;
     get text(): string;
     focusedRecycleCallback(): void;

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

@@ -12,8 +12,17 @@ export class TableColumnAnchorCellView extends TableCellView {
         super(...arguments);
         /** @internal */
         this.hasOverflow = false;
+        /** @internal */
+        this.isPlaceholder = false;
     }
     get text() {
+        const displayedText = this.cellRecord?.label ?? this.cellRecord?.href;
+        if ((displayedText === undefined || displayedText === null)
+            && this.columnConfig?.placeholder) {
+            this.isPlaceholder = true;
+            return this.columnConfig.placeholder;
+        }
+        this.isPlaceholder = false;
         if (typeof this.cellRecord?.label === 'string') {
             return this.cellRecord.label;
         }
@@ -29,6 +38,9 @@ export class TableColumnAnchorCellView extends TableCellView {
 __decorate([
     observable
 ], TableColumnAnchorCellView.prototype, "hasOverflow", void 0);
+__decorate([
+    observable
+], TableColumnAnchorCellView.prototype, "isPlaceholder", void 0);
 __decorate([
     volatile
 ], TableColumnAnchorCellView.prototype, "text", null);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/anchor/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAM1D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,yBAA0B,SAAQ,aAG9C;IAHD;;QAII,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IAmB/B,CAAC;IAbG,IAAW,IAAI;QACX,IAAI,OAAO,IAAI,CAAC,UAAU,EAAE,KAAK,KAAK,QAAQ,EAAE;YAC5C,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;SAChC;QACD,IAAI,OAAO,IAAI,CAAC,UAAU,EAAE,IAAI,KAAK,QAAQ,EAAE;YAC3C,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;SAC/B;QACD,OAAO,EAAE,CAAC;IACd,CAAC;IAEe,sBAAsB;QAClC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC;IACxB,CAAC;CACJ;AAnBG;IADC,UAAU;8DACgB;AAM3B;IADC,QAAQ;qDASR;AAOL,MAAM,cAAc,GAAG,yBAAyB,CAAC,OAAO,CAAC;IACrD,QAAQ,EAAE,+BAA+B;IACzC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,4BAA4B,GAAG,sCAAsC,CAAC","sourcesContent":["import { observable, volatile } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport type {\n    TableColumnAnchorCellRecord,\n    TableColumnAnchorColumnConfig\n} from '..';\nimport type { Anchor } from '../../../anchor';\nimport { TableCellView } from '../../base/cell-view';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-anchor-cell-view': TableColumnAnchorCellView;\n    }\n}\n\n/**\n * A cell view for displaying links\n */\nexport class TableColumnAnchorCellView extends TableCellView<\nTableColumnAnchorCellRecord,\nTableColumnAnchorColumnConfig\n> {\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public anchor?: Anchor;\n\n    @volatile\n    public get text(): string {\n        if (typeof this.cellRecord?.label === 'string') {\n            return this.cellRecord.label;\n        }\n        if (typeof this.cellRecord?.href === 'string') {\n            return this.cellRecord.href;\n        }\n        return '';\n    }\n\n    public override focusedRecycleCallback(): void {\n        this.anchor?.blur();\n    }\n}\n\nconst anchorCellView = TableColumnAnchorCellView.compose({\n    baseName: 'table-column-anchor-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());\nexport const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/anchor/cell-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAM1D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,yBAA0B,SAAQ,aAG9C;IAHD;;QAII,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;QAE3B,gBAAgB;QAET,kBAAa,GAAG,KAAK,CAAC;IA6BjC,CAAC;IAvBG,IAAW,IAAI;QACX,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC;QACtE,IACI,CAAC,aAAa,KAAK,SAAS,IAAI,aAAa,KAAK,IAAI,CAAC;eACpD,IAAI,CAAC,YAAY,EAAE,WAAW,EACnC;YACE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,OAAO,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;SACxC;QAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,OAAO,IAAI,CAAC,UAAU,EAAE,KAAK,KAAK,QAAQ,EAAE;YAC5C,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;SAChC;QACD,IAAI,OAAO,IAAI,CAAC,UAAU,EAAE,IAAI,KAAK,QAAQ,EAAE;YAC3C,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;SAC/B;QACD,OAAO,EAAE,CAAC;IACd,CAAC;IAEe,sBAAsB;QAClC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC;IACxB,CAAC;CACJ;AAjCG;IADC,UAAU;8DACgB;AAI3B;IADC,UAAU;gEACkB;AAM7B;IADC,QAAQ;qDAmBR;AAOL,MAAM,cAAc,GAAG,yBAAyB,CAAC,OAAO,CAAC;IACrD,QAAQ,EAAE,+BAA+B;IACzC,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,4BAA4B,GAAG,sCAAsC,CAAC","sourcesContent":["import { observable, volatile } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport type {\n    TableColumnAnchorCellRecord,\n    TableColumnAnchorColumnConfig\n} from '..';\nimport type { Anchor } from '../../../anchor';\nimport { TableCellView } from '../../base/cell-view';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-anchor-cell-view': TableColumnAnchorCellView;\n    }\n}\n\n/**\n * A cell view for displaying links\n */\nexport class TableColumnAnchorCellView extends TableCellView<\nTableColumnAnchorCellRecord,\nTableColumnAnchorColumnConfig\n> {\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    @observable\n    public isPlaceholder = false;\n\n    /** @internal */\n    public anchor?: Anchor;\n\n    @volatile\n    public get text(): string {\n        const displayedText = this.cellRecord?.label ?? this.cellRecord?.href;\n        if (\n            (displayedText === undefined || displayedText === null)\n            && this.columnConfig?.placeholder\n        ) {\n            this.isPlaceholder = true;\n            return this.columnConfig.placeholder;\n        }\n\n        this.isPlaceholder = false;\n        if (typeof this.cellRecord?.label === 'string') {\n            return this.cellRecord.label;\n        }\n        if (typeof this.cellRecord?.href === 'string') {\n            return this.cellRecord.href;\n        }\n        return '';\n    }\n\n    public override focusedRecycleCallback(): void {\n        this.anchor?.blur();\n    }\n}\n\nconst anchorCellView = TableColumnAnchorCellView.compose({\n    baseName: 'table-column-anchor-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());\nexport const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';\n"]}

package/dist/esm/table-column/anchor/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 {
         width: fit-content;
@@ -21,5 +21,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/anchor/cell-view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/anchor/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;;;;;;;;;;;;;;;gBAeT,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 {\n        width: fit-content;\n        max-width: 100%;\n        height: fit-content;\n        align-self: center;\n    }\n\n    nimble-anchor {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\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/anchor/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;;;;;;;;;;;;;;;gBAeT,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 {\n        width: fit-content;\n        max-width: 100%;\n        height: fit-content;\n        align-self: center;\n    }\n\n    nimble-anchor {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\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/anchor/cell-view/template.js

@@ -11,6 +11,7 @@ export const template = html `
     }
     return true;
 }}"
+        class="${x => (x.isPlaceholder ? 'placeholder' : '')}"
     >
         ${when(x => typeof x.cellRecord?.href === 'string', html `
             <${anchorTag}

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/anchor/cell-view/template.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAEjE,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA2B;;kBAErC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACf,IAAI,OAAO,CAAC,CAAC,UAAU,EAAE,IAAI,KAAK,QAAQ,EAAE;QACxC,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;KAC7B;IACD,OAAO,IAAI,CAAC;AAChB,CAAC;;UAEC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,IAAI,KAAK,QAAQ,EAAE,IAAI,CAA2B;eAC5E,SAAS;kBACN,GAAG,CAAC,QAAQ,CAAC;kBACb,QAAQ,CAAC,aAAa,CAAC;wBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI;4BACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,QAAQ;wBACjC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,IAAI;kCACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,cAAc;uBAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,GAAG;0BACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,MAAM;wBAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,IAAI;4BACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,QAAQ;qCACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,eAAe;8BAC3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,UAAU;wBACrC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;;kBAE1C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;gBACb,SAAS,GAAG,CAAC;UACnB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,IAAI,KAAK,QAAQ,EAAE,IAAI,CAA2B;;kBAEzE,QAAQ,CAAC,aAAa,CAAC;wBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;;kBAE1C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;oBACT,CAAC;;CAEpB,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/indent */\nimport { html, ref, when } from '@microsoft/fast-element';\nimport type { TableColumnAnchorCellView } from '.';\nimport { anchorTag } from '../../../anchor';\nimport { overflow } from '../../../utilities/directive/overflow';\n\n// prettier-ignore\nexport const template = html<TableColumnAnchorCellView>`\n    <template\n        @click=\"${(x, c) => {\n            if (typeof x.cellRecord?.href === 'string') {\n                c.event.stopPropagation();\n            }\n            return true;\n        }}\"\n    >\n        ${when(x => typeof x.cellRecord?.href === 'string', html<TableColumnAnchorCellView>`\n            <${anchorTag}\n                ${ref('anchor')}\n                ${overflow('hasOverflow')}\n                href=\"${x => x.cellRecord?.href}\"\n                hreflang=\"${x => x.columnConfig?.hreflang}\"\n                ping=\"${x => x.columnConfig?.ping}\"\n                referrerpolicy=\"${x => x.columnConfig?.referrerpolicy}\"\n                rel=\"${x => x.columnConfig?.rel}\"\n                target=\"${x => x.columnConfig?.target}\"\n                type=\"${x => x.columnConfig?.type}\"\n                download=\"${x => x.columnConfig?.download}\"\n                ?underline-hidden=\"${x => x.columnConfig?.underlineHidden}\"\n                appearance=\"${x => x.columnConfig?.appearance}\"\n                title=${x => (x.hasOverflow ? x.text : null)}\n            >\n                ${x => x.text}\n            </${anchorTag}>`)}\n        ${when(x => typeof x.cellRecord?.href !== 'string', html<TableColumnAnchorCellView>`\n            <span\n                ${overflow('hasOverflow')}\n                title=${x => (x.hasOverflow ? x.text : null)}\n            >\n                ${x => x.text}\n            </span>`)}\n    </template>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/anchor/cell-view/template.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAEjE,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA2B;;kBAErC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACf,IAAI,OAAO,CAAC,CAAC,UAAU,EAAE,IAAI,KAAK,QAAQ,EAAE;QACxC,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;KAC7B;IACD,OAAO,IAAI,CAAC;AAChB,CAAC;iBACQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;;UAElD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,IAAI,KAAK,QAAQ,EAAE,IAAI,CAA2B;eAC5E,SAAS;kBACN,GAAG,CAAC,QAAQ,CAAC;kBACb,QAAQ,CAAC,aAAa,CAAC;wBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI;4BACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,QAAQ;wBACjC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,IAAI;kCACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,cAAc;uBAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,GAAG;0BACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,MAAM;wBAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,IAAI;4BACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,QAAQ;qCACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,eAAe;8BAC3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,UAAU;wBACrC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;;kBAE1C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;gBACb,SAAS,GAAG,CAAC;UACnB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,IAAI,KAAK,QAAQ,EAAE,IAAI,CAA2B;;kBAEzE,QAAQ,CAAC,aAAa,CAAC;wBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;;kBAE1C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;oBACT,CAAC;;CAEpB,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/indent */\nimport { html, ref, when } from '@microsoft/fast-element';\nimport type { TableColumnAnchorCellView } from '.';\nimport { anchorTag } from '../../../anchor';\nimport { overflow } from '../../../utilities/directive/overflow';\n\n// prettier-ignore\nexport const template = html<TableColumnAnchorCellView>`\n    <template\n        @click=\"${(x, c) => {\n            if (typeof x.cellRecord?.href === 'string') {\n                c.event.stopPropagation();\n            }\n            return true;\n        }}\"\n        class=\"${x => (x.isPlaceholder ? 'placeholder' : '')}\"\n    >\n        ${when(x => typeof x.cellRecord?.href === 'string', html<TableColumnAnchorCellView>`\n            <${anchorTag}\n                ${ref('anchor')}\n                ${overflow('hasOverflow')}\n                href=\"${x => x.cellRecord?.href}\"\n                hreflang=\"${x => x.columnConfig?.hreflang}\"\n                ping=\"${x => x.columnConfig?.ping}\"\n                referrerpolicy=\"${x => x.columnConfig?.referrerpolicy}\"\n                rel=\"${x => x.columnConfig?.rel}\"\n                target=\"${x => x.columnConfig?.target}\"\n                type=\"${x => x.columnConfig?.type}\"\n                download=\"${x => x.columnConfig?.download}\"\n                ?underline-hidden=\"${x => x.columnConfig?.underlineHidden}\"\n                appearance=\"${x => x.columnConfig?.appearance}\"\n                title=${x => (x.hasOverflow ? x.text : null)}\n            >\n                ${x => x.text}\n            </${anchorTag}>`)}\n        ${when(x => typeof x.cellRecord?.href !== 'string', html<TableColumnAnchorCellView>`\n            <span\n                ${overflow('hasOverflow')}\n                title=${x => (x.hasOverflow ? x.text : null)}\n            >\n                ${x => x.text}\n            </span>`)}\n    </template>\n`;\n"]}

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

@@ -13,6 +13,7 @@ export interface TableColumnAnchorColumnConfig {
     target?: string;
     type?: string;
     download?: string;
+    placeholder?: string;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -31,6 +32,9 @@ declare const TableColumnAnchor_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;
 }) & ((abstract new () => TableColumn<TableColumnAnchorColumnConfig>) & {
     compose<T extends import("@microsoft/fast-foundation").FoundationElementDefinition = import("@microsoft/fast-foundation").FoundationElementDefinition, K extends import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement> = import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>(this: K, elementDefinition: T): (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<T> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<T, K>;
     from<TBase extends {
@@ -54,6 +58,7 @@ export declare class TableColumnAnchor extends TableColumnAnchor_base {
     target?: string;
     type?: string;
     download?: string;
+    placeholderChanged(): void;
     protected getColumnInternalsOptions(): ColumnInternalsOptions;
     protected labelFieldNameChanged(): void;
     protected hrefFieldNameChanged(): void;

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

@@ -7,16 +7,20 @@ import { template } from '../base/template';
 import { TableColumnSortOperation } from '../base/types';
 import { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';
 import { mixinGroupableColumnAPI } from '../mixins/groupable-column';
+import { mixinColumnWithPlaceholderAPI } from '../mixins/placeholder';
 import { tableColumnAnchorCellViewTag } from './cell-view';
 import { tableColumnTextGroupHeaderViewTag } from '../text/group-header-view';
 /**
  * A table column for displaying links.
  */
-export class TableColumnAnchor extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumn))) {
+export class TableColumnAnchor extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI((TableColumn)))) {
     constructor() {
         super(...arguments);
         this.underlineHidden = false;
     }
+    placeholderChanged() {
+        this.updateColumnConfig();
+    }
     getColumnInternalsOptions() {
         return {
             cellRecordFieldNames: ['label', 'href'],
@@ -76,7 +80,8 @@ export class TableColumnAnchor extends mixinGroupableColumnAPI(mixinFractionalWi
             rel: this.rel,
             target: this.target,
             type: this.type,
-            download: this.download
+            download: this.download,
+            placeholder: this.placeholder
         };
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/anchor/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { attr } from '@microsoft/fast-element';\nimport { TableColumn } from '../base';\nimport { styles } from '../base/styles';\nimport { template } from '../base/template';\nimport { TableColumnSortOperation } from '../base/types';\nimport { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';\nimport { mixinGroupableColumnAPI } from '../mixins/groupable-column';\nimport type { TableStringField } from '../../table/types';\nimport { tableColumnAnchorCellViewTag } from './cell-view';\nimport { tableColumnTextGroupHeaderViewTag } from '../text/group-header-view';\nimport type { AnchorAppearance } from '../../anchor/types';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\n\nexport type TableColumnAnchorCellRecord = TableStringField<'label' | 'href'>;\nexport interface TableColumnAnchorColumnConfig {\n    appearance: AnchorAppearance;\n    underlineHidden?: boolean;\n    hreflang?: string;\n    ping?: string;\n    referrerpolicy?: string;\n    rel?: string;\n    target?: string;\n    type?: string;\n    download?: string;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-anchor': TableColumnAnchor;\n    }\n}\n\n/**\n * A table column for displaying links.\n */\nexport class TableColumnAnchor extends mixinGroupableColumnAPI(\n    mixinFractionalWidthColumnAPI(TableColumn<TableColumnAnchorColumnConfig>)\n) {\n    @attr({ attribute: 'label-field-name' })\n    public labelFieldName?: string;\n\n    @attr({ attribute: 'href-field-name' })\n    public hrefFieldName?: string;\n\n    @attr\n    public appearance?: AnchorAppearance;\n\n    @attr({ attribute: 'underline-hidden', mode: 'boolean' })\n    public underlineHidden = false;\n\n    @attr\n    public hreflang?: string;\n\n    @attr\n    public ping?: string;\n\n    @attr\n    public referrerpolicy?: string;\n\n    @attr\n    public rel?: string;\n\n    @attr\n    public target?: string;\n\n    @attr\n    public type?: string;\n\n    @attr\n    public download?: string;\n\n    protected override getColumnInternalsOptions(): ColumnInternalsOptions {\n        return {\n            cellRecordFieldNames: ['label', 'href'],\n            cellViewTag: tableColumnAnchorCellViewTag,\n            groupHeaderViewTag: tableColumnTextGroupHeaderViewTag,\n            delegatedEvents: ['click'],\n            sortOperation: TableColumnSortOperation.localeAwareCaseSensitive\n        };\n    }\n\n    protected labelFieldNameChanged(): void {\n        this.columnInternals.dataRecordFieldNames = [\n            this.labelFieldName,\n            this.hrefFieldName\n        ] as const;\n        this.columnInternals.operandDataRecordFieldName = this.labelFieldName;\n    }\n\n    protected hrefFieldNameChanged(): void {\n        this.columnInternals.dataRecordFieldNames = [\n            this.labelFieldName,\n            this.hrefFieldName\n        ] as const;\n    }\n\n    protected appearanceChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected underlineHiddenChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected hreflangChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected pingChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected referrerpolicyChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected relChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected targetChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected typeChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected downloadChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private updateColumnConfig(): void {\n        this.columnInternals.columnConfig = {\n            appearance: this.appearance,\n            underlineHidden: this.underlineHidden,\n            hreflang: this.hreflang,\n            ping: this.ping,\n            referrerpolicy: this.referrerpolicy,\n            rel: this.rel,\n            target: this.target,\n            type: this.type,\n            download: this.download\n        };\n    }\n}\n\nconst nimbleTableColumnAnchor = TableColumnAnchor.compose({\n    baseName: 'table-column-anchor',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleTableColumnAnchor());\nexport const tableColumnAnchorTag = 'nimble-table-column-anchor';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/anchor/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { attr } from '@microsoft/fast-element';\nimport { TableColumn } from '../base';\nimport { styles } from '../base/styles';\nimport { template } from '../base/template';\nimport { TableColumnSortOperation } from '../base/types';\nimport { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';\nimport { mixinGroupableColumnAPI } from '../mixins/groupable-column';\nimport { mixinColumnWithPlaceholderAPI } from '../mixins/placeholder';\nimport type { TableStringField } from '../../table/types';\nimport { tableColumnAnchorCellViewTag } from './cell-view';\nimport { tableColumnTextGroupHeaderViewTag } from '../text/group-header-view';\nimport type { AnchorAppearance } from '../../anchor/types';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\n\nexport type TableColumnAnchorCellRecord = TableStringField<'label' | 'href'>;\nexport interface TableColumnAnchorColumnConfig {\n    appearance: AnchorAppearance;\n    underlineHidden?: boolean;\n    hreflang?: string;\n    ping?: string;\n    referrerpolicy?: string;\n    rel?: string;\n    target?: string;\n    type?: string;\n    download?: string;\n    placeholder?: string;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-anchor': TableColumnAnchor;\n    }\n}\n\n/**\n * A table column for displaying links.\n */\nexport class TableColumnAnchor extends mixinGroupableColumnAPI(\n    mixinFractionalWidthColumnAPI(\n        mixinColumnWithPlaceholderAPI(\n            TableColumn<TableColumnAnchorColumnConfig>\n        )\n    )\n) {\n    @attr({ attribute: 'label-field-name' })\n    public labelFieldName?: string;\n\n    @attr({ attribute: 'href-field-name' })\n    public hrefFieldName?: string;\n\n    @attr\n    public appearance?: AnchorAppearance;\n\n    @attr({ attribute: 'underline-hidden', mode: 'boolean' })\n    public underlineHidden = false;\n\n    @attr\n    public hreflang?: string;\n\n    @attr\n    public ping?: string;\n\n    @attr\n    public referrerpolicy?: string;\n\n    @attr\n    public rel?: string;\n\n    @attr\n    public target?: string;\n\n    @attr\n    public type?: string;\n\n    @attr\n    public download?: string;\n\n    public placeholderChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected override getColumnInternalsOptions(): ColumnInternalsOptions {\n        return {\n            cellRecordFieldNames: ['label', 'href'],\n            cellViewTag: tableColumnAnchorCellViewTag,\n            groupHeaderViewTag: tableColumnTextGroupHeaderViewTag,\n            delegatedEvents: ['click'],\n            sortOperation: TableColumnSortOperation.localeAwareCaseSensitive\n        };\n    }\n\n    protected labelFieldNameChanged(): void {\n        this.columnInternals.dataRecordFieldNames = [\n            this.labelFieldName,\n            this.hrefFieldName\n        ] as const;\n        this.columnInternals.operandDataRecordFieldName = this.labelFieldName;\n    }\n\n    protected hrefFieldNameChanged(): void {\n        this.columnInternals.dataRecordFieldNames = [\n            this.labelFieldName,\n            this.hrefFieldName\n        ] as const;\n    }\n\n    protected appearanceChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected underlineHiddenChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected hreflangChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected pingChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected referrerpolicyChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected relChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected targetChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected typeChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected downloadChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private updateColumnConfig(): void {\n        this.columnInternals.columnConfig = {\n            appearance: this.appearance,\n            underlineHidden: this.underlineHidden,\n            hreflang: this.hreflang,\n            ping: this.ping,\n            referrerpolicy: this.referrerpolicy,\n            rel: this.rel,\n            target: this.target,\n            type: this.type,\n            download: this.download,\n            placeholder: this.placeholder\n        };\n    }\n}\n\nconst nimbleTableColumnAnchor = TableColumnAnchor.compose({\n    baseName: 'table-column-anchor',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleTableColumnAnchor());\nexport const tableColumnAnchorTag = 'nimble-table-column-anchor';\n"]}

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

@@ -9,8 +9,6 @@ declare global {
  * A cell view for displaying date/time fields as text
  */
 export declare class TableColumnDateTextCellView extends TableColumnTextCellViewBase<TableColumnDateTextCellRecord, TableColumnDateTextColumnConfig> {
-    private columnConfigChanged;
-    private cellRecordChanged;
-    private updateText;
+    protected updateText(): void;
 }
 export declare const tableColumnDateTextCellViewTag = "nimble-table-column-date-text-cell-view";

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

@@ -7,12 +7,6 @@ import { formatNumericDate } from '../models/format-helper';
  * A cell view for displaying date/time fields as text
  */
 export class TableColumnDateTextCellView extends TableColumnTextCellViewBase {
-    columnConfigChanged() {
-        this.updateText();
-    }
-    cellRecordChanged() {
-        this.updateText();
-    }
     updateText() {
         if (this.columnConfig) {
             this.text = formatNumericDate(this.columnConfig.formatter, this.cellRecord?.value);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/date-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,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAQ5D;;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,IAAI,IAAI,CAAC,YAAY,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,iBAAiB,CACzB,IAAI,CAAC,YAAY,CAAC,SAAS,EAC3B,IAAI,CAAC,UAAU,EAAE,KAAK,CACzB,CAAC;SACL;aAAM;YACH,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;SAClB;IACL,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 { template } from '../../text-base/cell-view/template';\nimport type {\n    TableColumnDateTextCellRecord,\n    TableColumnDateTextColumnConfig\n} from '..';\nimport { styles } from '../../text-base/cell-view/styles';\nimport { TableColumnTextCellViewBase } from '../../text-base/cell-view';\nimport { formatNumericDate } from '../models/format-helper';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-date-text-cell-view': TableColumnDateTextCellView;\n    }\n}\n\n/**\n * A cell view for displaying date/time fields as text\n */\nexport class TableColumnDateTextCellView extends TableColumnTextCellViewBase<\nTableColumnDateTextCellRecord,\nTableColumnDateTextColumnConfig\n> {\n    private columnConfigChanged(): void {\n        this.updateText();\n    }\n\n    private cellRecordChanged(): void {\n        this.updateText();\n    }\n\n    private updateText(): void {\n        if (this.columnConfig) {\n            this.text = formatNumericDate(\n                this.columnConfig.formatter,\n                this.cellRecord?.value\n            );\n        } else {\n            this.text = '';\n        }\n    }\n}\n\nconst dateTextCellView = TableColumnDateTextCellView.compose({\n    baseName: 'table-column-date-text-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());\nexport const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/date-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,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAQ5D;;GAEG;AACH,MAAM,OAAO,2BAA4B,SAAQ,2BAGhD;IACa,UAAU;QAChB,IAAI,IAAI,CAAC,YAAY,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,iBAAiB,CACzB,IAAI,CAAC,YAAY,CAAC,SAAS,EAC3B,IAAI,CAAC,UAAU,EAAE,KAAK,CACzB,CAAC;SACL;aAAM;YACH,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;SAClB;IACL,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 { template } from '../../text-base/cell-view/template';\nimport type {\n    TableColumnDateTextCellRecord,\n    TableColumnDateTextColumnConfig\n} from '..';\nimport { styles } from '../../text-base/cell-view/styles';\nimport { TableColumnTextCellViewBase } from '../../text-base/cell-view';\nimport { formatNumericDate } from '../models/format-helper';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-date-text-cell-view': TableColumnDateTextCellView;\n    }\n}\n\n/**\n * A cell view for displaying date/time fields as text\n */\nexport class TableColumnDateTextCellView extends TableColumnTextCellViewBase<\nTableColumnDateTextCellRecord,\nTableColumnDateTextColumnConfig\n> {\n    protected updateText(): void {\n        if (this.columnConfig) {\n            this.text = formatNumericDate(\n                this.columnConfig.formatter,\n                this.cellRecord?.value\n            );\n        } else {\n            this.text = '';\n        }\n    }\n}\n\nconst dateTextCellView = TableColumnDateTextCellView.compose({\n    baseName: 'table-column-date-text-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());\nexport const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';\n"]}

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

@@ -4,8 +4,9 @@ import { TableColumnValidity } from '../base/types';
 import type { ColumnInternalsOptions } from '../base/models/column-internals';
 import { DateTextFormat, LocaleMatcherAlgorithm, EraFormat, YearFormat, DayFormat, HourFormat, MinuteFormat, SecondFormat, TimeZoneNameFormat, FormatMatcherAlgorithm, DayPeriodFormat, DateStyle, TimeStyle, HourCycleFormat, MonthFormat, WeekdayFormat } from './types';
 import { TableColumnDateTextValidator } from './models/table-column-date-text-validator';
+import type { TableColumnTextBaseColumnConfig } from '../text-base/cell-view';
 export type TableColumnDateTextCellRecord = TableNumberField<'value'>;
-export interface TableColumnDateTextColumnConfig {
+export interface TableColumnDateTextColumnConfig extends TableColumnTextBaseColumnConfig {
     formatter: Intl.DateTimeFormat;
 }
 declare global {
@@ -43,6 +44,7 @@ export declare class TableColumnDateText extends TableColumnTextBase {
     connectedCallback(): void;
     disconnectedCallback(): void;
     get validity(): TableColumnValidity;
+    placeholderChanged(): void;
     protected getColumnInternalsOptions(): ColumnInternalsOptions;
     protected formatChanged(): void;
     protected customLocaleMatcherChanged(): void;

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

@@ -37,6 +37,9 @@ export class TableColumnDateText extends TableColumnTextBase {
     get validity() {
         return this.validator.getValidity();
     }
+    placeholderChanged() {
+        this.updateColumnConfig();
+    }
     getColumnInternalsOptions() {
         return {
             cellRecordFieldNames: ['value'],
@@ -110,7 +113,8 @@ export class TableColumnDateText extends TableColumnTextBase {
         const formatter = this.createFormatter();
         if (formatter) {
             const columnConfig = {
-                formatter
+                formatter,
+                placeholder: this.placeholder
             };
             this.columnInternals.columnConfig = columnConfig;
             this.validator.setCustomOptionsValidity(true);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/date-text/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    DesignSystem,\n    DesignTokenSubscriber\n} from '@microsoft/fast-foundation';\nimport { attr } from '@microsoft/fast-element';\nimport { styles } from '../base/styles';\nimport { template } from '../base/template';\nimport type { TableNumberField } from '../../table/types';\nimport { TableColumnTextBase } from '../text-base';\nimport { TableColumnSortOperation, TableColumnValidity } from '../base/types';\nimport { tableColumnDateTextGroupHeaderViewTag } from './group-header-view';\nimport { tableColumnDateTextCellViewTag } from './cell-view';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\nimport {\n    DateTextFormat,\n    LocaleMatcherAlgorithm,\n    EraFormat,\n    YearFormat,\n    DayFormat,\n    HourFormat,\n    MinuteFormat,\n    SecondFormat,\n    TimeZoneNameFormat,\n    FormatMatcherAlgorithm,\n    DayPeriodFormat,\n    DateStyle,\n    TimeStyle,\n    HourCycleFormat,\n    MonthFormat,\n    WeekdayFormat\n} from './types';\nimport { TableColumnDateTextValidator } from './models/table-column-date-text-validator';\nimport { lang } from '../../theme-provider';\nimport { optionalBooleanConverter } from '../../utilities/models/converter';\n\nexport type TableColumnDateTextCellRecord = TableNumberField<'value'>;\nexport interface TableColumnDateTextColumnConfig {\n    formatter: Intl.DateTimeFormat;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-date-text': TableColumnDateText;\n    }\n}\n\n/**\n * The table column for displaying dates/times as text.\n */\nexport class TableColumnDateText extends TableColumnTextBase {\n    /** @internal */\n    public validator = new TableColumnDateTextValidator(this.columnInternals);\n\n    @attr\n    public format: DateTextFormat;\n\n    @attr({ attribute: 'custom-locale-matcher' })\n    public customLocaleMatcher: LocaleMatcherAlgorithm;\n\n    @attr({ attribute: 'custom-weekday' })\n    public customWeekday: WeekdayFormat;\n\n    @attr({ attribute: 'custom-era' })\n    public customEra: EraFormat;\n\n    @attr({ attribute: 'custom-year' })\n    public customYear: YearFormat;\n\n    @attr({ attribute: 'custom-month' })\n    public customMonth: MonthFormat;\n\n    @attr({ attribute: 'custom-day' })\n    public customDay: DayFormat;\n\n    @attr({ attribute: 'custom-hour' })\n    public customHour: HourFormat;\n\n    @attr({ attribute: 'custom-minute' })\n    public customMinute: MinuteFormat;\n\n    @attr({ attribute: 'custom-second' })\n    public customSecond: SecondFormat;\n\n    @attr({ attribute: 'custom-time-zone-name' })\n    public customTimeZoneName: TimeZoneNameFormat;\n\n    @attr({ attribute: 'custom-format-matcher' })\n    public customFormatMatcher: FormatMatcherAlgorithm;\n\n    // Later versions of FAST (than the legacy branch we're on) have a nullableBooleanConverter.\n    // We should replace our converter with that one when it is available to us.\n    // See issue related to adopting FastElement 2.0: https://github.com/ni/nimble/issues/572\n    @attr({ attribute: 'custom-hour12', converter: optionalBooleanConverter })\n    public customHour12?: boolean;\n\n    @attr({ attribute: 'custom-time-zone' })\n    public customTimeZone?: string;\n\n    @attr({ attribute: 'custom-calendar' })\n    public customCalendar?: string;\n\n    @attr({ attribute: 'custom-day-period' })\n    public customDayPeriod: DayPeriodFormat;\n\n    @attr({ attribute: 'custom-numbering-system' })\n    public customNumberingSystem?: string;\n\n    @attr({ attribute: 'custom-date-style' })\n    public customDateStyle: DateStyle;\n\n    @attr({ attribute: 'custom-time-style' })\n    public customTimeStyle: TimeStyle;\n\n    @attr({ attribute: 'custom-hour-cycle' })\n    public customHourCycle: HourCycleFormat;\n\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 override get validity(): TableColumnValidity {\n        return this.validator.getValidity();\n    }\n\n    protected override getColumnInternalsOptions(): ColumnInternalsOptions {\n        return {\n            cellRecordFieldNames: ['value'],\n            cellViewTag: tableColumnDateTextCellViewTag,\n            groupHeaderViewTag: tableColumnDateTextGroupHeaderViewTag,\n            delegatedEvents: [],\n            sortOperation: TableColumnSortOperation.basic\n        };\n    }\n\n    protected formatChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customLocaleMatcherChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customWeekdayChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customEraChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customYearChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customMonthChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customDayChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customHourChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customMinuteChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customSecondChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customTimeZoneNameChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customFormatMatcherChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customHour12Changed(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customTimeZoneChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customCalendarChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customDayPeriodChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customNumberingSystemChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customDateStyleChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customTimeStyleChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customHourCycleChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private updateColumnConfig(): void {\n        const formatter = this.createFormatter();\n\n        if (formatter) {\n            const columnConfig: TableColumnDateTextColumnConfig = {\n                formatter\n            };\n            this.columnInternals.columnConfig = columnConfig;\n            this.validator.setCustomOptionsValidity(true);\n        } else {\n            this.columnInternals.columnConfig = undefined;\n            this.validator.setCustomOptionsValidity(false);\n        }\n    }\n\n    private createFormatter(): Intl.DateTimeFormat | undefined {\n        let options: Intl.DateTimeFormatOptions;\n        if (this.format === DateTextFormat.default) {\n            options = {\n                dateStyle: 'medium',\n                timeStyle: 'medium'\n            };\n        } else {\n            options = this.getCustomFormattingOptions();\n        }\n        try {\n            return new Intl.DateTimeFormat(lang.getValueFor(this), options);\n        } catch (e) {\n            return undefined;\n        }\n    }\n\n    private getCustomFormattingOptions(): Intl.DateTimeFormatOptions {\n        // There's a FAST bug (https://github.com/microsoft/fast/issues/6630) where removing\n        // attributes sets their values to null instead of undefined. To work around this,\n        // translate null values to undefined.\n        const options: Intl.DateTimeFormatOptions = {\n            localeMatcher: this.customLocaleMatcher ?? undefined,\n            weekday: this.customWeekday ?? undefined,\n            era: this.customEra ?? undefined,\n            year: this.customYear ?? undefined,\n            month: this.customMonth ?? undefined,\n            day: this.customDay ?? undefined,\n            hour: this.customHour ?? undefined,\n            minute: this.customMinute ?? undefined,\n            second: this.customSecond ?? undefined,\n            timeZoneName: this.customTimeZoneName ?? undefined,\n            formatMatcher: this.customFormatMatcher ?? undefined,\n            hour12: this.customHour12 ?? undefined,\n            timeZone: this.customTimeZone ?? undefined,\n            calendar: this.customCalendar ?? undefined,\n            dayPeriod: this.customDayPeriod ?? undefined,\n            numberingSystem: this.customNumberingSystem ?? undefined,\n            dateStyle: this.customDateStyle ?? undefined,\n            timeStyle: this.customTimeStyle ?? undefined,\n            hourCycle: this.customHourCycle ?? undefined\n        };\n        return options;\n    }\n}\n\nconst nimbleTableColumnDateText = TableColumnDateText.compose({\n    baseName: 'table-column-date-text',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleTableColumnDateText());\nexport const tableColumnDateTextTag = 'nimble-table-column-date-text';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/date-text/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    DesignSystem,\n    DesignTokenSubscriber\n} from '@microsoft/fast-foundation';\nimport { attr } from '@microsoft/fast-element';\nimport { styles } from '../base/styles';\nimport { template } from '../base/template';\nimport type { TableNumberField } from '../../table/types';\nimport { TableColumnTextBase } from '../text-base';\nimport { TableColumnSortOperation, TableColumnValidity } from '../base/types';\nimport { tableColumnDateTextGroupHeaderViewTag } from './group-header-view';\nimport { tableColumnDateTextCellViewTag } from './cell-view';\nimport type { ColumnInternalsOptions } from '../base/models/column-internals';\nimport {\n    DateTextFormat,\n    LocaleMatcherAlgorithm,\n    EraFormat,\n    YearFormat,\n    DayFormat,\n    HourFormat,\n    MinuteFormat,\n    SecondFormat,\n    TimeZoneNameFormat,\n    FormatMatcherAlgorithm,\n    DayPeriodFormat,\n    DateStyle,\n    TimeStyle,\n    HourCycleFormat,\n    MonthFormat,\n    WeekdayFormat\n} from './types';\nimport { TableColumnDateTextValidator } from './models/table-column-date-text-validator';\nimport { lang } from '../../theme-provider';\nimport { optionalBooleanConverter } from '../../utilities/models/converter';\nimport type { TableColumnTextBaseColumnConfig } from '../text-base/cell-view';\n\nexport type TableColumnDateTextCellRecord = TableNumberField<'value'>;\nexport interface TableColumnDateTextColumnConfig\n    extends TableColumnTextBaseColumnConfig {\n    formatter: Intl.DateTimeFormat;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-date-text': TableColumnDateText;\n    }\n}\n\n/**\n * The table column for displaying dates/times as text.\n */\nexport class TableColumnDateText extends TableColumnTextBase {\n    /** @internal */\n    public validator = new TableColumnDateTextValidator(this.columnInternals);\n\n    @attr\n    public format: DateTextFormat;\n\n    @attr({ attribute: 'custom-locale-matcher' })\n    public customLocaleMatcher: LocaleMatcherAlgorithm;\n\n    @attr({ attribute: 'custom-weekday' })\n    public customWeekday: WeekdayFormat;\n\n    @attr({ attribute: 'custom-era' })\n    public customEra: EraFormat;\n\n    @attr({ attribute: 'custom-year' })\n    public customYear: YearFormat;\n\n    @attr({ attribute: 'custom-month' })\n    public customMonth: MonthFormat;\n\n    @attr({ attribute: 'custom-day' })\n    public customDay: DayFormat;\n\n    @attr({ attribute: 'custom-hour' })\n    public customHour: HourFormat;\n\n    @attr({ attribute: 'custom-minute' })\n    public customMinute: MinuteFormat;\n\n    @attr({ attribute: 'custom-second' })\n    public customSecond: SecondFormat;\n\n    @attr({ attribute: 'custom-time-zone-name' })\n    public customTimeZoneName: TimeZoneNameFormat;\n\n    @attr({ attribute: 'custom-format-matcher' })\n    public customFormatMatcher: FormatMatcherAlgorithm;\n\n    // Later versions of FAST (than the legacy branch we're on) have a nullableBooleanConverter.\n    // We should replace our converter with that one when it is available to us.\n    // See issue related to adopting FastElement 2.0: https://github.com/ni/nimble/issues/572\n    @attr({ attribute: 'custom-hour12', converter: optionalBooleanConverter })\n    public customHour12?: boolean;\n\n    @attr({ attribute: 'custom-time-zone' })\n    public customTimeZone?: string;\n\n    @attr({ attribute: 'custom-calendar' })\n    public customCalendar?: string;\n\n    @attr({ attribute: 'custom-day-period' })\n    public customDayPeriod: DayPeriodFormat;\n\n    @attr({ attribute: 'custom-numbering-system' })\n    public customNumberingSystem?: string;\n\n    @attr({ attribute: 'custom-date-style' })\n    public customDateStyle: DateStyle;\n\n    @attr({ attribute: 'custom-time-style' })\n    public customTimeStyle: TimeStyle;\n\n    @attr({ attribute: 'custom-hour-cycle' })\n    public customHourCycle: HourCycleFormat;\n\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 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: tableColumnDateTextCellViewTag,\n            groupHeaderViewTag: tableColumnDateTextGroupHeaderViewTag,\n            delegatedEvents: [],\n            sortOperation: TableColumnSortOperation.basic\n        };\n    }\n\n    protected formatChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customLocaleMatcherChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customWeekdayChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customEraChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customYearChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customMonthChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customDayChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customHourChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customMinuteChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customSecondChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customTimeZoneNameChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customFormatMatcherChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customHour12Changed(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customTimeZoneChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customCalendarChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customDayPeriodChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customNumberingSystemChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customDateStyleChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customTimeStyleChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    protected customHourCycleChanged(): void {\n        this.updateColumnConfig();\n    }\n\n    private updateColumnConfig(): void {\n        const formatter = this.createFormatter();\n\n        if (formatter) {\n            const columnConfig: TableColumnDateTextColumnConfig = {\n                formatter,\n                placeholder: this.placeholder\n            };\n            this.columnInternals.columnConfig = columnConfig;\n            this.validator.setCustomOptionsValidity(true);\n        } else {\n            this.columnInternals.columnConfig = undefined;\n            this.validator.setCustomOptionsValidity(false);\n        }\n    }\n\n    private createFormatter(): Intl.DateTimeFormat | undefined {\n        let options: Intl.DateTimeFormatOptions;\n        if (this.format === DateTextFormat.default) {\n            options = {\n                dateStyle: 'medium',\n                timeStyle: 'medium'\n            };\n        } else {\n            options = this.getCustomFormattingOptions();\n        }\n        try {\n            return new Intl.DateTimeFormat(lang.getValueFor(this), options);\n        } catch (e) {\n            return undefined;\n        }\n    }\n\n    private getCustomFormattingOptions(): Intl.DateTimeFormatOptions {\n        // There's a FAST bug (https://github.com/microsoft/fast/issues/6630) where removing\n        // attributes sets their values to null instead of undefined. To work around this,\n        // translate null values to undefined.\n        const options: Intl.DateTimeFormatOptions = {\n            localeMatcher: this.customLocaleMatcher ?? undefined,\n            weekday: this.customWeekday ?? undefined,\n            era: this.customEra ?? undefined,\n            year: this.customYear ?? undefined,\n            month: this.customMonth ?? undefined,\n            day: this.customDay ?? undefined,\n            hour: this.customHour ?? undefined,\n            minute: this.customMinute ?? undefined,\n            second: this.customSecond ?? undefined,\n            timeZoneName: this.customTimeZoneName ?? undefined,\n            formatMatcher: this.customFormatMatcher ?? undefined,\n            hour12: this.customHour12 ?? undefined,\n            timeZone: this.customTimeZone ?? undefined,\n            calendar: this.customCalendar ?? undefined,\n            dayPeriod: this.customDayPeriod ?? undefined,\n            numberingSystem: this.customNumberingSystem ?? undefined,\n            dateStyle: this.customDateStyle ?? undefined,\n            timeStyle: this.customTimeStyle ?? undefined,\n            hourCycle: this.customHourCycle ?? undefined\n        };\n        return options;\n    }\n}\n\nconst nimbleTableColumnDateText = TableColumnDateText.compose({\n    baseName: 'table-column-date-text',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleTableColumnDateText());\nexport const tableColumnDateTextTag = 'nimble-table-column-date-text';\n"]}

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

@@ -9,8 +9,6 @@ declare global {
  * A cell view for displaying duration fields as text
  */
 export declare class TableColumnDurationTextCellView extends TableColumnTextCellViewBase<TableColumnDurationTextCellRecord, TableColumnDurationTextColumnConfig> {
-    private columnConfigChanged;
-    private cellRecordChanged;
-    private updateText;
+    protected updateText(): void;
 }
 export declare const tableColumnDurationTextCellViewTag = "nimble-table-column-duration-text-cell-view";

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

@@ -6,12 +6,6 @@ import { TableColumnTextCellViewBase } from '../../text-base/cell-view';
  * A cell view for displaying duration fields as text
  */
 export class TableColumnDurationTextCellView extends TableColumnTextCellViewBase {
-    columnConfigChanged() {
-        this.updateText();
-    }
-    cellRecordChanged() {
-        this.updateText();
-    }
     updateText() {
         this.text = this.columnConfig?.formatter.format(this.cellRecord?.value) ?? '';
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/duration-text/cell-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAK9D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAQxE;;GAEG;AACH,MAAM,OAAO,+BAAgC,SAAQ,2BAGpD;IACW,mBAAmB;QACvB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEO,iBAAiB;QACrB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEO,UAAU;QACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IAClF,CAAC;CACJ;AAED,MAAM,oBAAoB,GAAG,+BAA+B,CAAC,OAAO,CAAC;IACjE,QAAQ,EAAE,sCAAsC;IAChD,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,MAAM,kCAAkC,GAAG,6CAA6C,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../../text-base/cell-view/template';\nimport type {\n    TableColumnDurationTextCellRecord,\n    TableColumnDurationTextColumnConfig\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-duration-text-cell-view': TableColumnDurationTextCellView;\n    }\n}\n\n/**\n * A cell view for displaying duration fields as text\n */\nexport class TableColumnDurationTextCellView extends TableColumnTextCellViewBase<\nTableColumnDurationTextCellRecord,\nTableColumnDurationTextColumnConfig\n> {\n    private columnConfigChanged(): void {\n        this.updateText();\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 durationTextCellView = TableColumnDurationTextCellView.compose({\n    baseName: 'table-column-duration-text-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(durationTextCellView());\nexport const tableColumnDurationTextCellViewTag = 'nimble-table-column-duration-text-cell-view';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/duration-text/cell-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAK9D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAQxE;;GAEG;AACH,MAAM,OAAO,+BAAgC,SAAQ,2BAGpD;IACa,UAAU;QAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IAClF,CAAC;CACJ;AAED,MAAM,oBAAoB,GAAG,+BAA+B,CAAC,OAAO,CAAC;IACjE,QAAQ,EAAE,sCAAsC;IAChD,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,MAAM,kCAAkC,GAAG,6CAA6C,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../../text-base/cell-view/template';\nimport type {\n    TableColumnDurationTextCellRecord,\n    TableColumnDurationTextColumnConfig\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-duration-text-cell-view': TableColumnDurationTextCellView;\n    }\n}\n\n/**\n * A cell view for displaying duration fields as text\n */\nexport class TableColumnDurationTextCellView extends TableColumnTextCellViewBase<\nTableColumnDurationTextCellRecord,\nTableColumnDurationTextColumnConfig\n> {\n    protected updateText(): void {\n        this.text = this.columnConfig?.formatter.format(this.cellRecord?.value) ?? '';\n    }\n}\n\nconst durationTextCellView = TableColumnDurationTextCellView.compose({\n    baseName: 'table-column-duration-text-cell-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(durationTextCellView());\nexport const tableColumnDurationTextCellViewTag = 'nimble-table-column-duration-text-cell-view';\n"]}

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

@@ -2,8 +2,9 @@ import type { TableNumberField } from '../../table/types';
 import { TableColumnTextBase } from '../text-base';
 import type { ColumnInternalsOptions } from '../base/models/column-internals';
 import { DurationFormatter } from './models/duration-formatter';
+import type { TableColumnTextBaseColumnConfig } from '../text-base/cell-view';
 export type TableColumnDurationTextCellRecord = TableNumberField<'value'>;
-export interface TableColumnDurationTextColumnConfig {
+export interface TableColumnDurationTextColumnConfig extends TableColumnTextBaseColumnConfig {
     formatter: DurationFormatter;
 }
 declare global {
@@ -18,6 +19,7 @@ export declare class TableColumnDurationText extends TableColumnTextBase {
     private readonly langSubscriber;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    placeholderChanged(): void;
     protected getColumnInternalsOptions(): ColumnInternalsOptions;
     private updateColumnConfig;
 }

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

@@ -28,6 +28,9 @@ export class TableColumnDurationText extends TableColumnTextBase {
         super.disconnectedCallback();
         lang.unsubscribe(this.langSubscriber, this);
     }
+    placeholderChanged() {
+        this.updateColumnConfig();
+    }
     getColumnInternalsOptions() {
         return {
             cellRecordFieldNames: ['value'],
@@ -39,15 +42,11 @@ export class TableColumnDurationText extends TableColumnTextBase {
     }
     updateColumnConfig() {
         const formatter = new DurationFormatter(lang.getValueFor(this));
-        if (formatter) {
-            const columnConfig = {
-                formatter
-            };
-            this.columnInternals.columnConfig = columnConfig;
-        }
-        else {
-            this.columnInternals.columnConfig = undefined;
-        }
+        const columnConfig = {
+            formatter,
+            placeholder: this.placeholder
+        };
+        this.columnInternals.columnConfig = columnConfig;
     }
 }
 const nimbleTableColumnDurationText = TableColumnDurationText.compose({