@ni/nimble-components 22.0.0 → 22.1.0

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

@@ -6,12 +6,6 @@ import { styles } from '../../text-base/group-header-view/styles';
  * The group header view for displaying number fields as text.
  */
 export class TableColumnNumberTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-    columnConfigChanged() {
-        this.updateText();
-    }
-    groupHeaderValueChanged() {
-        this.updateText();
-    }
     updateText() {
         this.text = this.columnConfig?.formatter?.format(this.groupHeaderValue) ?? '';
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/number-text/group-header-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,kCAAkC,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAQlE;;GAEG;AACH,MAAM,OAAO,oCAAqC,SAAQ,kCAGzD;IACW,mBAAmB;QACvB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEO,uBAAuB;QAC3B,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEO,UAAU;QACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;IAClF,CAAC;CACJ;AAED,MAAM,oCAAoC,GAAG,oCAAoC,CAAC,OAAO,CAAC;IACtF,QAAQ,EAAE,4CAA4C;IACtD,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oCAAoC,EAAE,CAAC,CAAC;AACtD,MAAM,CAAC,MAAM,mCAAmC,GAAG,mDAAmD,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport type { TableNumberFieldValue } from '../../../table/types';\nimport { TableColumnTextGroupHeaderViewBase } from '../../text-base/group-header-view';\nimport { template } from '../../text-base/group-header-view/template';\nimport { styles } from '../../text-base/group-header-view/styles';\nimport type { TableColumnNumberTextColumnConfig } from '..';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-number-text-group-header': TableColumnNumberTextGroupHeaderView;\n    }\n}\n/**\n * The group header view for displaying number fields as text.\n */\nexport class TableColumnNumberTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase<\nTableNumberFieldValue,\nTableColumnNumberTextColumnConfig\n> {\n    private columnConfigChanged(): void {\n        this.updateText();\n    }\n\n    private groupHeaderValueChanged(): void {\n        this.updateText();\n    }\n\n    private updateText(): void {\n        this.text = this.columnConfig?.formatter?.format(this.groupHeaderValue) ?? '';\n    }\n}\n\nconst tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({\n    baseName: 'table-column-number-text-group-header-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(tableColumnNumberTextGroupHeaderView());\nexport const tableColumnNumberTextGroupHeaderTag = 'nimble-table-column-number-text-group-header-view';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/number-text/group-header-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,kCAAkC,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAQlE;;GAEG;AACH,MAAM,OAAO,oCAAqC,SAAQ,kCAGzD;IACa,UAAU;QAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;IAClF,CAAC;CACJ;AAED,MAAM,oCAAoC,GAAG,oCAAoC,CAAC,OAAO,CAAC;IACtF,QAAQ,EAAE,4CAA4C;IACtD,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oCAAoC,EAAE,CAAC,CAAC;AACtD,MAAM,CAAC,MAAM,mCAAmC,GAAG,mDAAmD,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport type { TableNumberFieldValue } from '../../../table/types';\nimport { TableColumnTextGroupHeaderViewBase } from '../../text-base/group-header-view';\nimport { template } from '../../text-base/group-header-view/template';\nimport { styles } from '../../text-base/group-header-view/styles';\nimport type { TableColumnNumberTextColumnConfig } from '..';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-number-text-group-header': TableColumnNumberTextGroupHeaderView;\n    }\n}\n/**\n * The group header view for displaying number fields as text.\n */\nexport class TableColumnNumberTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase<\nTableNumberFieldValue,\nTableColumnNumberTextColumnConfig\n> {\n    protected updateText(): void {\n        this.text = this.columnConfig?.formatter?.format(this.groupHeaderValue) ?? '';\n    }\n}\n\nconst tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({\n    baseName: 'table-column-number-text-group-header-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(tableColumnNumberTextGroupHeaderView());\nexport const tableColumnNumberTextGroupHeaderTag = 'nimble-table-column-number-text-group-header-view';\n"]}

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

@@ -10,6 +10,6 @@ declare global {
  * The group header view for displaying string fields as text.
  */
 export declare class TableColumnTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase<TableStringFieldValue, TableColumnTextColumnConfig> {
-    private groupHeaderValueChanged;
+    protected updateText(): void;
 }
 export declare const tableColumnTextGroupHeaderViewTag = "nimble-table-column-text-group-header-view";

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

@@ -6,7 +6,7 @@ import { styles } from '../../text-base/group-header-view/styles';
  * The group header view for displaying string fields as text.
  */
 export class TableColumnTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-    groupHeaderValueChanged() {
+    updateText() {
         this.text = typeof this.groupHeaderValue === 'string'
             ? this.groupHeaderValue
             : '';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text/group-header-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,kCAAkC,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAQlE;;GAEG;AACH,MAAM,OAAO,8BAA+B,SAAQ,kCAGnD;IACW,uBAAuB;QAC3B,IAAI,CAAC,IAAI,GAAG,OAAO,IAAI,CAAC,gBAAgB,KAAK,QAAQ;YACjD,CAAC,CAAC,IAAI,CAAC,gBAAgB;YACvB,CAAC,CAAC,EAAE,CAAC;IACb,CAAC;CACJ;AAED,MAAM,8BAA8B,GAAG,8BAA8B,CAAC,OAAO,CAAC;IAC1E,QAAQ,EAAE,qCAAqC;IAC/C,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,8BAA8B,EAAE,CAAC,CAAC;AAChD,MAAM,CAAC,MAAM,iCAAiC,GAAG,4CAA4C,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport type { TableStringFieldValue } from '../../../table/types';\nimport { TableColumnTextGroupHeaderViewBase } from '../../text-base/group-header-view';\nimport { template } from '../../text-base/group-header-view/template';\nimport { styles } from '../../text-base/group-header-view/styles';\nimport type { TableColumnTextColumnConfig } from '..';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-text-group-header': TableColumnTextGroupHeaderView;\n    }\n}\n/**\n * The group header view for displaying string fields as text.\n */\nexport class TableColumnTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase<\nTableStringFieldValue,\nTableColumnTextColumnConfig\n> {\n    private groupHeaderValueChanged(): void {\n        this.text = typeof this.groupHeaderValue === 'string'\n            ? this.groupHeaderValue\n            : '';\n    }\n}\n\nconst tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({\n    baseName: 'table-column-text-group-header-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(tableColumnTextGroupHeaderView());\nexport const tableColumnTextGroupHeaderViewTag = 'nimble-table-column-text-group-header-view';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text/group-header-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,kCAAkC,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAQlE;;GAEG;AACH,MAAM,OAAO,8BAA+B,SAAQ,kCAGnD;IACa,UAAU;QAChB,IAAI,CAAC,IAAI,GAAG,OAAO,IAAI,CAAC,gBAAgB,KAAK,QAAQ;YACjD,CAAC,CAAC,IAAI,CAAC,gBAAgB;YACvB,CAAC,CAAC,EAAE,CAAC;IACb,CAAC;CACJ;AAED,MAAM,8BAA8B,GAAG,8BAA8B,CAAC,OAAO,CAAC;IAC1E,QAAQ,EAAE,qCAAqC;IAC/C,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,8BAA8B,EAAE,CAAC,CAAC;AAChD,MAAM,CAAC,MAAM,iCAAiC,GAAG,4CAA4C,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport type { TableStringFieldValue } from '../../../table/types';\nimport { TableColumnTextGroupHeaderViewBase } from '../../text-base/group-header-view';\nimport { template } from '../../text-base/group-header-view/template';\nimport { styles } from '../../text-base/group-header-view/styles';\nimport type { TableColumnTextColumnConfig } from '..';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-column-text-group-header': TableColumnTextGroupHeaderView;\n    }\n}\n/**\n * The group header view for displaying string fields as text.\n */\nexport class TableColumnTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase<\nTableStringFieldValue,\nTableColumnTextColumnConfig\n> {\n    protected updateText(): void {\n        this.text = typeof this.groupHeaderValue === 'string'\n            ? this.groupHeaderValue\n            : '';\n    }\n}\n\nconst tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({\n    baseName: 'table-column-text-group-header-view',\n    template,\n    styles\n});\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(tableColumnTextGroupHeaderView());\nexport const tableColumnTextGroupHeaderViewTag = 'nimble-table-column-text-group-header-view';\n"]}

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

@@ -8,6 +8,22 @@ export declare abstract class TableColumnTextGroupHeaderViewBase<TGroupValue = T
     hasOverflow: boolean;
     /**
      * Text to render in the cell.
+     *
+     * The value is initialized to `tableGroupRowPlaceholderNoValue` because if the group
+     * row never has a value defined on it, the change handlers may never get called but
+     * the text needs to be correct.
      */
     text: string;
+    private readonly noValuePlaceholderLabelSubscriber;
+    private readonly emptyPlaceholderLabelSubscriber;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected abstract updateText(): void;
+    private columnConfigChanged;
+    private groupHeaderValueChanged;
+    /**
+     * Sets `this.text` to the appropriate placeholder if `groupHeaderValue` warrants it.
+     * @returns `true` if `this.text` was set to a placeholder, `false` otherwise.
+     */
+    private applyPlaceholderTextIfNeeded;
 }

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

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { observable } from '@microsoft/fast-element';
 import { TableGroupHeaderView } from '../../base/group-header-view';
+import { tableGroupRowPlaceholderEmptyLabel, tableGroupRowPlaceholderNoValueLabel } from '../../../label-provider/table/label-tokens';
 /**
  * The group header view base class for displaying fields of any type as text.
  */
@@ -11,8 +12,59 @@ export class TableColumnTextGroupHeaderViewBase extends TableGroupHeaderView {
         this.hasOverflow = false;
         /**
          * Text to render in the cell.
+         *
+         * The value is initialized to `tableGroupRowPlaceholderNoValue` because if the group
+         * row never has a value defined on it, the change handlers may never get called but
+         * the text needs to be correct.
          */
-        this.text = '';
+        this.text = tableGroupRowPlaceholderNoValueLabel.getValueFor(this);
+        this.noValuePlaceholderLabelSubscriber = {
+            handleChange: () => {
+                this.applyPlaceholderTextIfNeeded();
+            }
+        };
+        this.emptyPlaceholderLabelSubscriber = {
+            handleChange: () => {
+                this.applyPlaceholderTextIfNeeded();
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        tableGroupRowPlaceholderNoValueLabel.subscribe(this.noValuePlaceholderLabelSubscriber, this);
+        tableGroupRowPlaceholderEmptyLabel.subscribe(this.emptyPlaceholderLabelSubscriber, this);
+        this.applyPlaceholderTextIfNeeded();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        tableGroupRowPlaceholderNoValueLabel.unsubscribe(this.noValuePlaceholderLabelSubscriber);
+        tableGroupRowPlaceholderEmptyLabel.unsubscribe(this.emptyPlaceholderLabelSubscriber);
+    }
+    columnConfigChanged() {
+        if (!this.applyPlaceholderTextIfNeeded()) {
+            this.updateText();
+        }
+    }
+    groupHeaderValueChanged() {
+        if (!this.applyPlaceholderTextIfNeeded()) {
+            this.updateText();
+        }
+    }
+    /**
+     * Sets `this.text` to the appropriate placeholder if `groupHeaderValue` warrants it.
+     * @returns `true` if `this.text` was set to a placeholder, `false` otherwise.
+     */
+    applyPlaceholderTextIfNeeded() {
+        if (this.groupHeaderValue === null
+            || this.groupHeaderValue === undefined) {
+            this.text = tableGroupRowPlaceholderNoValueLabel.getValueFor(this);
+            return true;
+        }
+        if (this.groupHeaderValue === '') {
+            this.text = tableGroupRowPlaceholderEmptyLabel.getValueFor(this);
+            return true;
+        }
+        return false;
     }
 }
 __decorate([

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/group-header-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAGpE;;GAEG;AACH,MAAM,OAAgB,kCAGpB,SAAQ,oBAAgD;IAH1D;;QAII,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;QAE3B;;WAEG;QAEI,SAAI,GAAG,EAAE,CAAC;IACrB,CAAC;CAAA;AAPG;IADC,UAAU;uEACgB;AAM3B;IADC,UAAU;gEACM","sourcesContent":["import { observable } from '@microsoft/fast-element';\nimport { TableGroupHeaderView } from '../../base/group-header-view';\nimport type { TableFieldValue } from '../../../table/types';\n\n/**\n * The group header view base class for displaying fields of any type as text.\n */\nexport abstract class TableColumnTextGroupHeaderViewBase<\n    TGroupValue = TableFieldValue,\n    TColumnConfig = unknown\n> extends TableGroupHeaderView<TGroupValue, 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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/group-header-view/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEpE,OAAO,EACH,kCAAkC,EAClC,oCAAoC,EACvC,MAAM,4CAA4C,CAAC;AAEpD;;GAEG;AACH,MAAM,OAAgB,kCAGpB,SAAQ,oBAAgD;IAH1D;;QAII,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;QAE3B;;;;;;WAMG;QAEI,SAAI,GAAG,oCAAoC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAEpD,sCAAiC,GAE9C;YACI,YAAY,EAAE,GAAG,EAAE;gBACf,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACxC,CAAC;SACJ,CAAC;QAEW,oCAA+B,GAE5C;YACI,YAAY,EAAE,GAAG,EAAE;gBACf,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACxC,CAAC;SACJ,CAAC;IAyDV,CAAC;IAvDmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,oCAAoC,CAAC,SAAS,CAC1C,IAAI,CAAC,iCAAiC,EACtC,IAAI,CACP,CAAC;QACF,kCAAkC,CAAC,SAAS,CACxC,IAAI,CAAC,+BAA+B,EACpC,IAAI,CACP,CAAC;QACF,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACxC,CAAC;IAEe,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,oCAAoC,CAAC,WAAW,CAC5C,IAAI,CAAC,iCAAiC,CACzC,CAAC;QACF,kCAAkC,CAAC,WAAW,CAC1C,IAAI,CAAC,+BAA+B,CACvC,CAAC;IACN,CAAC;IAIO,mBAAmB;QACvB,IAAI,CAAC,IAAI,CAAC,4BAA4B,EAAE,EAAE;YACtC,IAAI,CAAC,UAAU,EAAE,CAAC;SACrB;IACL,CAAC;IAEO,uBAAuB;QAC3B,IAAI,CAAC,IAAI,CAAC,4BAA4B,EAAE,EAAE;YACtC,IAAI,CAAC,UAAU,EAAE,CAAC;SACrB;IACL,CAAC;IAED;;;OAGG;IACK,4BAA4B;QAChC,IACI,IAAI,CAAC,gBAAgB,KAAK,IAAI;eAC3B,IAAI,CAAC,gBAAgB,KAAK,SAAS,EACxC;YACE,IAAI,CAAC,IAAI,GAAG,oCAAoC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YACnE,OAAO,IAAI,CAAC;SACf;QACD,IAAI,IAAI,CAAC,gBAAgB,KAAK,EAAE,EAAE;YAC9B,IAAI,CAAC,IAAI,GAAG,kCAAkC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YACjE,OAAO,IAAI,CAAC;SACf;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;CACJ;AAnFG;IADC,UAAU;uEACgB;AAU3B;IADC,UAAU;gEAC0D","sourcesContent":["import type { DesignTokenSubscriber } from '@microsoft/fast-foundation';\nimport { observable } from '@microsoft/fast-element';\nimport { TableGroupHeaderView } from '../../base/group-header-view';\nimport type { TableFieldValue } from '../../../table/types';\nimport {\n    tableGroupRowPlaceholderEmptyLabel,\n    tableGroupRowPlaceholderNoValueLabel\n} from '../../../label-provider/table/label-tokens';\n\n/**\n * The group header view base class for displaying fields of any type as text.\n */\nexport abstract class TableColumnTextGroupHeaderViewBase<\n    TGroupValue = TableFieldValue,\n    TColumnConfig = unknown\n> extends TableGroupHeaderView<TGroupValue, TColumnConfig> {\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /**\n     * Text to render in the cell.\n     *\n     * The value is initialized to `tableGroupRowPlaceholderNoValue` because if the group\n     * row never has a value defined on it, the change handlers may never get called but\n     * the text needs to be correct.\n     */\n    @observable\n    public text = tableGroupRowPlaceholderNoValueLabel.getValueFor(this);\n\n    private readonly noValuePlaceholderLabelSubscriber: DesignTokenSubscriber<\n        typeof tableGroupRowPlaceholderNoValueLabel\n    > = {\n            handleChange: () => {\n                this.applyPlaceholderTextIfNeeded();\n            }\n        };\n\n    private readonly emptyPlaceholderLabelSubscriber: DesignTokenSubscriber<\n        typeof tableGroupRowPlaceholderEmptyLabel\n    > = {\n            handleChange: () => {\n                this.applyPlaceholderTextIfNeeded();\n            }\n        };\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        tableGroupRowPlaceholderNoValueLabel.subscribe(\n            this.noValuePlaceholderLabelSubscriber,\n            this\n        );\n        tableGroupRowPlaceholderEmptyLabel.subscribe(\n            this.emptyPlaceholderLabelSubscriber,\n            this\n        );\n        this.applyPlaceholderTextIfNeeded();\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        tableGroupRowPlaceholderNoValueLabel.unsubscribe(\n            this.noValuePlaceholderLabelSubscriber\n        );\n        tableGroupRowPlaceholderEmptyLabel.unsubscribe(\n            this.emptyPlaceholderLabelSubscriber\n        );\n    }\n\n    protected abstract updateText(): void;\n\n    private columnConfigChanged(): void {\n        if (!this.applyPlaceholderTextIfNeeded()) {\n            this.updateText();\n        }\n    }\n\n    private groupHeaderValueChanged(): void {\n        if (!this.applyPlaceholderTextIfNeeded()) {\n            this.updateText();\n        }\n    }\n\n    /**\n     * Sets `this.text` to the appropriate placeholder if `groupHeaderValue` warrants it.\n     * @returns `true` if `this.text` was set to a placeholder, `false` otherwise.\n     */\n    private applyPlaceholderTextIfNeeded(): boolean {\n        if (\n            this.groupHeaderValue === null\n            || this.groupHeaderValue === undefined\n        ) {\n            this.text = tableGroupRowPlaceholderNoValueLabel.getValueFor(this);\n            return true;\n        }\n        if (this.groupHeaderValue === '') {\n            this.text = tableGroupRowPlaceholderEmptyLabel.getValueFor(this);\n            return true;\n        }\n        return false;\n    }\n}\n"]}

package/package.json

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