@ni/nimble-components 27.0.4 → 27.1.0

package/dist/esm/src/table/components/header/index.d.ts

@@ -12,6 +12,7 @@ declare global {
 export declare class TableHeader extends FoundationElement {
     sortDirection: TableColumnSortDirection;
     firstSortedColumn: boolean;
+    indicatorsHidden: boolean;
     isGrouped: boolean;
     protected sortDirectionChanged(_prev: TableColumnSortDirection | undefined, _next: TableColumnSortDirection): void;
     protected firstSortedColumnChanged(_prev: boolean | undefined, _next: boolean): void;

package/dist/esm/src/table/models/table-layout-manager.d.ts

@@ -27,11 +27,31 @@ export declare class TableLayoutManager<TData extends TableRecord> {
      * @param activeColumnDivider The divider that was clicked on
      */
     beginColumnInteractiveSize(dragStart: number, activeColumnDivider: number): void;
+    /**
+     * Determines if the specified column or any columns to the left are resizable.
+     */
+    hasResizableColumnToLeft(columnIndex: number): boolean;
+    /**
+     * Determines if the specified column or any columns to the right are resizable.
+     */
+    private hasResizableColumnToRight;
     private readonly onDividerMouseMove;
     private readonly onDividerMouseUp;
     private getTotalColumnFixedWidth;
     private setColumnsToFixedSize;
     private getAllowedSizeDelta;
+    /**
+     * Gets the index of the first resizable column starting with
+     * `columnIndex` and moving to the left. If no resizable column
+     * is found, returns -1.
+     */
+    private getFirstLeftResizableColumnIndex;
+    /**
+     * Gets the index of the first resizable column starting with
+     * `columnIndex` and moving to the right. If no resizable column
+     * is found, returns -1.
+     */
+    private getFirstRightResizableColumnIndex;
     private performCascadeSizeLeft;
     private performCascadeSizeRight;
     private cacheGridSizedColumns;

package/dist/esm/src/table-column/base/models/column-internals.d.ts

@@ -98,6 +98,15 @@ export declare class ColumnInternals<TColumnConfig, TColumnValidator extends Col
      * The minimum size in pixels according to the design doc
      */
     minPixelWidth: number;
+    /**
+     * Whether or not resizing the column has been disabled.
+     */
+    resizingDisabled: boolean;
+    /**
+     * Whether or not the grouping and sorting indicators should be hidden in the column header
+     * when the column is grouped or sorted.
+     */
+    hideHeaderIndicators: boolean;
     /**
      * @internal Do not write to this value directly. It is used by the Table in order to store
      * the resolved value of the fractionalWidth after updates programmatic or interactive updates.

package/dist/esm/src/table-column/base/types.d.ts

@@ -35,4 +35,5 @@ export type TableColumnSortOperation = (typeof TableColumnSortOperation)[keyof t
 export interface TableColumnValidity extends ValidityObject {
 }
 export declare const defaultMinPixelWidth: number;
+export declare const singleIconColumnWidth: number;
 export declare const defaultFractionalWidth = 1;

package/dist/esm/src/table-column/icon/index.d.ts

@@ -3,6 +3,7 @@ import { TableColumnIconValidator } from './models/table-column-icon-validator';
 import type { ColumnInternalsOptions } from '../base/models/column-internals';
 import type { Mapping } from '../../mapping/base';
 import type { MappingConfig } from '../enum-base/models/mapping-config';
+import { TableColumnMappingWidthMode } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-table-column-icon': TableColumnIcon;
@@ -32,9 +33,13 @@ declare const TableColumnIcon_base: (abstract new (...args: any[]) => {
  * Table column that maps values to icons / spinners
  */
 export declare class TableColumnIcon extends TableColumnIcon_base {
+    widthMode: TableColumnMappingWidthMode;
+    minPixelWidthChanged(): void;
     protected getColumnInternalsOptions(): ColumnInternalsOptions<TableColumnIconValidator>;
     protected createColumnConfig(mappingConfigs: MappingConfigs): TableColumnEnumColumnConfig;
     protected createMappingConfig(mapping: Mapping<unknown>): MappingConfig;
+    private widthModeChanged;
+    private getConfiguredMinPixelWidth;
 }
 export declare const tableColumnIconTag = "nimble-table-column-icon";
 export {};

package/dist/esm/src/table-column/icon/types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Width mode for the icon column
+ */
+export declare const TableColumnMappingWidthMode: {
+    readonly default: undefined;
+    readonly iconSize: "icon-size";
+};
+export type TableColumnMappingWidthMode = (typeof TableColumnMappingWidthMode)[keyof typeof TableColumnMappingWidthMode];

package/dist/esm/table/components/header/index.d.ts

@@ -12,6 +12,7 @@ declare global {
 export declare class TableHeader extends FoundationElement {
     sortDirection: TableColumnSortDirection;
     firstSortedColumn: boolean;
+    indicatorsHidden: boolean;
     isGrouped: boolean;
     protected sortDirectionChanged(_prev: TableColumnSortDirection | undefined, _next: TableColumnSortDirection): void;
     protected firstSortedColumnChanged(_prev: boolean | undefined, _next: boolean): void;

package/dist/esm/table/components/header/index.js

@@ -13,6 +13,7 @@ export class TableHeader extends FoundationElement {
         super(...arguments);
         this.sortDirection = TableColumnSortDirection.none;
         this.firstSortedColumn = false;
+        this.indicatorsHidden = false;
         this.isGrouped = false;
     }
     sortDirectionChanged(_prev, _next) {
@@ -40,6 +41,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'first-sorted-column', mode: 'boolean' })
 ], TableHeader.prototype, "firstSortedColumn", void 0);
+__decorate([
+    attr({ attribute: 'indicators-hidden', mode: 'boolean' })
+], TableHeader.prototype, "indicatorsHidden", void 0);
 __decorate([
     observable
 ], TableHeader.prototype, "isGrouped", void 0);

package/dist/esm/table/components/header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/header/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QAEW,kBAAa,GAA6B,wBAAwB,CAAC,IAAI,CAAC;QAGxE,sBAAiB,GAAG,KAAK,CAAC;QAG1B,cAAS,GAAG,KAAK,CAAC;IA4B7B,CAAC;IA1Ba,oBAAoB,CAC1B,KAA2C,EAC3C,KAA+B;QAE/B,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAES,wBAAwB,CAC9B,KAA0B,EAC1B,KAAc;QAEd,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAEO,cAAc;QAClB,IACI,CAAC,IAAI,CAAC,iBAAiB;eACpB,IAAI,CAAC,aAAa,KAAK,wBAAwB,CAAC,IAAI,EACzD;YACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACxB;aAAM,IAAI,IAAI,CAAC,aAAa,KAAK,wBAAwB,CAAC,SAAS,EAAE;YAClE,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;SAC/B;aAAM;YACH,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;SAChC;IACL,CAAC;CACJ;AAlCU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDACyC;AAGxE;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sDAC3B;AAG1B;IADN,UAAU;8CACc;AA8B7B,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr, observable } from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport { TableColumnSortDirection } from '../../types';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-header': TableHeader;\n    }\n}\n\n/**\n * A styled header that is used within the nimble-table.\n * @internal\n */\nexport class TableHeader extends FoundationElement {\n    @attr({ attribute: 'sort-direction' })\n    public sortDirection: TableColumnSortDirection = TableColumnSortDirection.none;\n\n    @attr({ attribute: 'first-sorted-column', mode: 'boolean' })\n    public firstSortedColumn = false;\n\n    @observable\n    public isGrouped = false;\n\n    protected sortDirectionChanged(\n        _prev: TableColumnSortDirection | undefined,\n        _next: TableColumnSortDirection\n    ): void {\n        this.updateAriaSort();\n    }\n\n    protected firstSortedColumnChanged(\n        _prev: boolean | undefined,\n        _next: boolean\n    ): void {\n        this.updateAriaSort();\n    }\n\n    private updateAriaSort(): void {\n        if (\n            !this.firstSortedColumn\n            || this.sortDirection === TableColumnSortDirection.none\n        ) {\n            this.ariaSort = null;\n        } else if (this.sortDirection === TableColumnSortDirection.ascending) {\n            this.ariaSort = 'ascending';\n        } else {\n            this.ariaSort = 'descending';\n        }\n    }\n}\n\nconst nimbleTableHeader = TableHeader.compose({\n    baseName: 'table-header',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());\nexport const tableHeaderTag = 'nimble-table-header';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/header/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;IAAlD;;QAEW,kBAAa,GAA6B,wBAAwB,CAAC,IAAI,CAAC;QAGxE,sBAAiB,GAAG,KAAK,CAAC;QAG1B,qBAAgB,GAAG,KAAK,CAAC;QAGzB,cAAS,GAAG,KAAK,CAAC;IA4B7B,CAAC;IA1Ba,oBAAoB,CAC1B,KAA2C,EAC3C,KAA+B;QAE/B,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAES,wBAAwB,CAC9B,KAA0B,EAC1B,KAAc;QAEd,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAEO,cAAc;QAClB,IACI,CAAC,IAAI,CAAC,iBAAiB;eACpB,IAAI,CAAC,aAAa,KAAK,wBAAwB,CAAC,IAAI,EACzD;YACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACxB;aAAM,IAAI,IAAI,CAAC,aAAa,KAAK,wBAAwB,CAAC,SAAS,EAAE;YAClE,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;SAC/B;aAAM;YACH,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;SAChC;IACL,CAAC;CACJ;AArCU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDACyC;AAGxE;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sDAC3B;AAG1B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qDAC1B;AAGzB;IADN,UAAU;8CACc;AA8B7B,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr, observable } from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport { TableColumnSortDirection } from '../../types';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-header': TableHeader;\n    }\n}\n\n/**\n * A styled header that is used within the nimble-table.\n * @internal\n */\nexport class TableHeader extends FoundationElement {\n    @attr({ attribute: 'sort-direction' })\n    public sortDirection: TableColumnSortDirection = TableColumnSortDirection.none;\n\n    @attr({ attribute: 'first-sorted-column', mode: 'boolean' })\n    public firstSortedColumn = false;\n\n    @attr({ attribute: 'indicators-hidden', mode: 'boolean' })\n    public indicatorsHidden = false;\n\n    @observable\n    public isGrouped = false;\n\n    protected sortDirectionChanged(\n        _prev: TableColumnSortDirection | undefined,\n        _next: TableColumnSortDirection\n    ): void {\n        this.updateAriaSort();\n    }\n\n    protected firstSortedColumnChanged(\n        _prev: boolean | undefined,\n        _next: boolean\n    ): void {\n        this.updateAriaSort();\n    }\n\n    private updateAriaSort(): void {\n        if (\n            !this.firstSortedColumn\n            || this.sortDirection === TableColumnSortDirection.none\n        ) {\n            this.ariaSort = null;\n        } else if (this.sortDirection === TableColumnSortDirection.ascending) {\n            this.ariaSort = 'ascending';\n        } else {\n            this.ariaSort = 'descending';\n        }\n    }\n}\n\nconst nimbleTableHeader = TableHeader.compose({\n    baseName: 'table-header',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());\nexport const tableHeaderTag = 'nimble-table-header';\n"]}

package/dist/esm/table/components/header/template.js

@@ -12,28 +12,31 @@ export const template = html `
         @mousedown="${(_x, c) => !(c.event.detail > 1)}"
     >
         <slot></slot>
-        ${'' /* Set aria-hidden="true" on sort indicators because aria-sort is set on the 1st sorted column */}
-        ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html `
-            <${iconArrowUpTag}
-                class="sort-indicator"
-                title="${x => tableColumnHeaderSortedAscendingLabel.getValueFor(x)}"
-                aria-hidden="true"
-            ></${iconArrowUpTag}>
-        `)}
-        ${when(x => x.sortDirection === TableColumnSortDirection.descending, html `
-            <${iconArrowDownTag}
-                class="sort-indicator"
-                title="${x => tableColumnHeaderSortedDescendingLabel.getValueFor(x)}"
-                aria-hidden="true"
-            ></${iconArrowDownTag}>
-        `)}
-        ${when(x => x.isGrouped, html `
-            <${iconTwoSquaresInBracketsTag}
-                class="grouped-indicator"
-                title="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
-                role="img"
-                aria-label="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
-            ></${iconTwoSquaresInBracketsTag}>
+
+        ${when(x => !x.indicatorsHidden, html `
+            ${'' /* Set aria-hidden="true" on sort indicators because aria-sort is set on the 1st sorted column */}
+            ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html `
+                <${iconArrowUpTag}
+                    class="sort-indicator"
+                    title="${x => tableColumnHeaderSortedAscendingLabel.getValueFor(x)}"
+                    aria-hidden="true"
+                ></${iconArrowUpTag}>
+            `)}
+            ${when(x => x.sortDirection === TableColumnSortDirection.descending, html `
+                <${iconArrowDownTag}
+                    class="sort-indicator"
+                    title="${x => tableColumnHeaderSortedDescendingLabel.getValueFor(x)}"
+                    aria-hidden="true"
+                ></${iconArrowDownTag}>
+            `)}
+            ${when(x => x.isGrouped, html `
+                <${iconTwoSquaresInBracketsTag}
+                    class="grouped-indicator"
+                    title="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
+                    role="img"
+                    aria-label="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
+                ></${iconTwoSquaresInBracketsTag}>
+            `)}
         `)}
     </template>
 `;

package/dist/esm/table/components/header/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/header/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,2BAA2B,EAAE,MAAM,wCAAwC,CAAC;AACrF,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EACH,6BAA6B,EAC7B,qCAAqC,EACrC,sCAAsC,EACzC,MAAM,4CAA4C,CAAC;AAEpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAa;;qBAEpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;UAC1B,EAAE,CAAC,sDAAsD;sBAC7C,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAE,CAAC,CAAC,KAAoB,CAAC,MAAM,GAAG,CAAC,CAAC;;;UAG5D,EAAE,CAAC,iGAAiG;UACpG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,KAAK,wBAAwB,CAAC,SAAS,EAAE,IAAI,CAAa;eAC9E,cAAc;;yBAEJ,CAAC,CAAC,EAAE,CAAC,qCAAqC,CAAC,WAAW,CAAC,CAAC,CAAC;;iBAEjE,cAAc;SACtB,CAAC;UACA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,KAAK,wBAAwB,CAAC,UAAU,EAAE,IAAI,CAAa;eAC/E,gBAAgB;;yBAEN,CAAC,CAAC,EAAE,CAAC,sCAAsC,CAAC,WAAW,CAAC,CAAC,CAAC;;iBAElE,gBAAgB;SACxB,CAAC;UACA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAa;eACnC,2BAA2B;;yBAEjB,CAAC,CAAC,EAAE,CAAC,6BAA6B,CAAC,WAAW,CAAC,CAAC,CAAC;;8BAE5C,CAAC,CAAC,EAAE,CAAC,6BAA6B,CAAC,WAAW,CAAC,CAAC,CAAC;iBAC9D,2BAA2B;SACnC,CAAC;;CAET,CAAC","sourcesContent":["import { html, when } from '@microsoft/fast-element';\nimport type { TableHeader } from '.';\nimport { iconArrowDownTag } from '../../../icons/arrow-down';\nimport { iconArrowUpTag } from '../../../icons/arrow-up';\nimport { iconTwoSquaresInBracketsTag } from '../../../icons/two-squares-in-brackets';\nimport { TableColumnSortDirection } from '../../types';\nimport {\n    tableColumnHeaderGroupedLabel,\n    tableColumnHeaderSortedAscendingLabel,\n    tableColumnHeaderSortedDescendingLabel\n} from '../../../label-provider/table/label-tokens';\n\n// prettier-ignore\nexport const template = html<TableHeader>`\n    <template role=\"columnheader\"\n        aria-sort=\"${x => x.ariaSort}\"\n        ${'' /* Prevent header double clicks from selecting text */}\n        @mousedown=\"${(_x, c) => !((c.event as MouseEvent).detail > 1)}\"\n    >\n        <slot></slot>\n        ${'' /* Set aria-hidden=\"true\" on sort indicators because aria-sort is set on the 1st sorted column */}\n        ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html<TableHeader>`\n            <${iconArrowUpTag}\n                class=\"sort-indicator\"\n                title=\"${x => tableColumnHeaderSortedAscendingLabel.getValueFor(x)}\"\n                aria-hidden=\"true\"\n            ></${iconArrowUpTag}>\n        `)}\n        ${when(x => x.sortDirection === TableColumnSortDirection.descending, html<TableHeader>`\n            <${iconArrowDownTag}\n                class=\"sort-indicator\"\n                title=\"${x => tableColumnHeaderSortedDescendingLabel.getValueFor(x)}\"\n                aria-hidden=\"true\"\n            ></${iconArrowDownTag}>\n        `)}\n        ${when(x => x.isGrouped, html<TableHeader>`\n            <${iconTwoSquaresInBracketsTag}\n                class=\"grouped-indicator\"\n                title=\"${x => tableColumnHeaderGroupedLabel.getValueFor(x)}\"\n                role=\"img\"\n                aria-label=\"${x => tableColumnHeaderGroupedLabel.getValueFor(x)}\"\n            ></${iconTwoSquaresInBracketsTag}>\n        `)}\n    </template>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/header/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,2BAA2B,EAAE,MAAM,wCAAwC,CAAC;AACrF,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EACH,6BAA6B,EAC7B,qCAAqC,EACrC,sCAAsC,EACzC,MAAM,4CAA4C,CAAC;AAEpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAa;;qBAEpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;UAC1B,EAAE,CAAC,sDAAsD;sBAC7C,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAE,CAAC,CAAC,KAAoB,CAAC,MAAM,GAAG,CAAC,CAAC;;;;UAI5D,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,IAAI,CAAa;cAC5C,EAAE,CAAC,iGAAiG;cACpG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,KAAK,wBAAwB,CAAC,SAAS,EAAE,IAAI,CAAa;mBAC9E,cAAc;;6BAEJ,CAAC,CAAC,EAAE,CAAC,qCAAqC,CAAC,WAAW,CAAC,CAAC,CAAC;;qBAEjE,cAAc;aACtB,CAAC;cACA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,KAAK,wBAAwB,CAAC,UAAU,EAAE,IAAI,CAAa;mBAC/E,gBAAgB;;6BAEN,CAAC,CAAC,EAAE,CAAC,sCAAsC,CAAC,WAAW,CAAC,CAAC,CAAC;;qBAElE,gBAAgB;aACxB,CAAC;cACA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAa;mBACnC,2BAA2B;;6BAEjB,CAAC,CAAC,EAAE,CAAC,6BAA6B,CAAC,WAAW,CAAC,CAAC,CAAC;;kCAE5C,CAAC,CAAC,EAAE,CAAC,6BAA6B,CAAC,WAAW,CAAC,CAAC,CAAC;qBAC9D,2BAA2B;aACnC,CAAC;SACL,CAAC;;CAET,CAAC","sourcesContent":["import { html, when } from '@microsoft/fast-element';\nimport type { TableHeader } from '.';\nimport { iconArrowDownTag } from '../../../icons/arrow-down';\nimport { iconArrowUpTag } from '../../../icons/arrow-up';\nimport { iconTwoSquaresInBracketsTag } from '../../../icons/two-squares-in-brackets';\nimport { TableColumnSortDirection } from '../../types';\nimport {\n    tableColumnHeaderGroupedLabel,\n    tableColumnHeaderSortedAscendingLabel,\n    tableColumnHeaderSortedDescendingLabel\n} from '../../../label-provider/table/label-tokens';\n\n// prettier-ignore\nexport const template = html<TableHeader>`\n    <template role=\"columnheader\"\n        aria-sort=\"${x => x.ariaSort}\"\n        ${'' /* Prevent header double clicks from selecting text */}\n        @mousedown=\"${(_x, c) => !((c.event as MouseEvent).detail > 1)}\"\n    >\n        <slot></slot>\n\n        ${when(x => !x.indicatorsHidden, html<TableHeader>`\n            ${'' /* Set aria-hidden=\"true\" on sort indicators because aria-sort is set on the 1st sorted column */}\n            ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html<TableHeader>`\n                <${iconArrowUpTag}\n                    class=\"sort-indicator\"\n                    title=\"${x => tableColumnHeaderSortedAscendingLabel.getValueFor(x)}\"\n                    aria-hidden=\"true\"\n                ></${iconArrowUpTag}>\n            `)}\n            ${when(x => x.sortDirection === TableColumnSortDirection.descending, html<TableHeader>`\n                <${iconArrowDownTag}\n                    class=\"sort-indicator\"\n                    title=\"${x => tableColumnHeaderSortedDescendingLabel.getValueFor(x)}\"\n                    aria-hidden=\"true\"\n                ></${iconArrowDownTag}>\n            `)}\n            ${when(x => x.isGrouped, html<TableHeader>`\n                <${iconTwoSquaresInBracketsTag}\n                    class=\"grouped-indicator\"\n                    title=\"${x => tableColumnHeaderGroupedLabel.getValueFor(x)}\"\n                    role=\"img\"\n                    aria-label=\"${x => tableColumnHeaderGroupedLabel.getValueFor(x)}\"\n                ></${iconTwoSquaresInBracketsTag}>\n            `)}\n        `)}\n    </template>\n`;\n"]}

package/dist/esm/table/models/table-layout-manager.d.ts

@@ -27,11 +27,31 @@ export declare class TableLayoutManager<TData extends TableRecord> {
      * @param activeColumnDivider The divider that was clicked on
      */
     beginColumnInteractiveSize(dragStart: number, activeColumnDivider: number): void;
+    /**
+     * Determines if the specified column or any columns to the left are resizable.
+     */
+    hasResizableColumnToLeft(columnIndex: number): boolean;
+    /**
+     * Determines if the specified column or any columns to the right are resizable.
+     */
+    private hasResizableColumnToRight;
     private readonly onDividerMouseMove;
     private readonly onDividerMouseUp;
     private getTotalColumnFixedWidth;
     private setColumnsToFixedSize;
     private getAllowedSizeDelta;
+    /**
+     * Gets the index of the first resizable column starting with
+     * `columnIndex` and moving to the left. If no resizable column
+     * is found, returns -1.
+     */
+    private getFirstLeftResizableColumnIndex;
+    /**
+     * Gets the index of the first resizable column starting with
+     * `columnIndex` and moving to the right. If no resizable column
+     * is found, returns -1.
+     */
+    private getFirstRightResizableColumnIndex;
     private performCascadeSizeLeft;
     private performCascadeSizeRight;
     private cacheGridSizedColumns;

package/dist/esm/table/models/table-layout-manager.js

@@ -35,6 +35,7 @@ export class TableLayoutManager {
             this.isColumnBeingSized = false;
             this.activeColumnIndex = undefined;
             this.activeColumnDivider = undefined;
+            this.visibleColumns = [];
         };
     }
     getGridTemplateColumns() {
@@ -70,6 +71,18 @@ export class TableLayoutManager {
         document.addEventListener('mousemove', this.onDividerMouseMove);
         document.addEventListener('mouseup', this.onDividerMouseUp);
     }
+    /**
+     * Determines if the specified column or any columns to the left are resizable.
+     */
+    hasResizableColumnToLeft(columnIndex) {
+        return this.getFirstLeftResizableColumnIndex(columnIndex) !== -1;
+    }
+    /**
+     * Determines if the specified column or any columns to the right are resizable.
+     */
+    hasResizableColumnToRight(columnIndex) {
+        return this.getFirstRightResizableColumnIndex(columnIndex) !== -1;
+    }
     getTotalColumnFixedWidth() {
         let totalColumnFixedWidth = 0;
         for (const column of this.visibleColumns) {
@@ -90,49 +103,112 @@ export class TableLayoutManager {
         let availableSpace = 0;
         if (requestedResizeAmount > 0) {
             // size right
-            return requestedResizeAmount;
+            return this.hasResizableColumnToLeft(this.leftColumnIndex)
+                ? requestedResizeAmount
+                : 0;
         }
         // size left
-        let currentIndex = this.leftColumnIndex;
-        while (currentIndex >= 0) {
-            const columnInitialWidths = this.initialColumnWidths[currentIndex];
-            availableSpace
-                += columnInitialWidths.initialPixelWidth
-                    - columnInitialWidths.minPixelWidth;
-            currentIndex -= 1;
+        if (!this.hasResizableColumnToRight(this.rightColumnIndex)) {
+            return 0;
+        }
+        for (let i = this.leftColumnIndex; i >= 0; i--) {
+            const columnInitialWidths = this.initialColumnWidths[i];
+            const column = this.visibleColumns[i];
+            if (!column.columnInternals.resizingDisabled) {
+                availableSpace
+                    += columnInitialWidths.initialPixelWidth
+                        - column.columnInternals.minPixelWidth;
+            }
         }
         return Math.max(requestedResizeAmount, -availableSpace);
     }
+    /**
+     * Gets the index of the first resizable column starting with
+     * `columnIndex` and moving to the left. If no resizable column
+     * is found, returns -1.
+     */
+    getFirstLeftResizableColumnIndex(columnIndex) {
+        const visibleColumns = this.visibleColumns.length === 0
+            ? this.getVisibleColumns()
+            : this.visibleColumns;
+        for (let i = columnIndex; i >= 0; i--) {
+            const column = visibleColumns[i];
+            if (!column) {
+                return -1;
+            }
+            if (!column.columnInternals.resizingDisabled) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    /**
+     * Gets the index of the first resizable column starting with
+     * `columnIndex` and moving to the right. If no resizable column
+     * is found, returns -1.
+     */
+    getFirstRightResizableColumnIndex(columnIndex) {
+        const visibleColumns = this.visibleColumns.length === 0
+            ? this.getVisibleColumns()
+            : this.visibleColumns;
+        for (let i = columnIndex; i < visibleColumns.length; i++) {
+            const column = visibleColumns[i];
+            if (!column) {
+                return -1;
+            }
+            if (!column.columnInternals.resizingDisabled) {
+                return i;
+            }
+        }
+        return -1;
+    }
     performCascadeSizeLeft(leftColumnIndex, delta) {
+        const firstLeftResizableColumn = this.getFirstLeftResizableColumnIndex(leftColumnIndex);
+        if (firstLeftResizableColumn === -1) {
+            return;
+        }
         let currentDelta = delta;
-        const leftColumnInitialWidths = this.initialColumnWidths[leftColumnIndex];
+        const leftColumn = this.visibleColumns[firstLeftResizableColumn];
+        const leftColumnInitialWidths = this.initialColumnWidths[firstLeftResizableColumn];
         const allowedDelta = delta < 0
-            ? Math.max(leftColumnInitialWidths.minPixelWidth
+            ? Math.max(leftColumn.columnInternals.minPixelWidth
                 - leftColumnInitialWidths.initialPixelWidth, currentDelta)
             : delta;
         const actualDelta = allowedDelta;
-        const leftColumn = this.visibleColumns[leftColumnIndex];
         leftColumn.columnInternals.currentPixelWidth += actualDelta;
-        if (actualDelta > currentDelta && leftColumnIndex > 0 && delta < 0) {
+        if (actualDelta > currentDelta
+            && firstLeftResizableColumn > 0
+            && delta < 0) {
             currentDelta -= allowedDelta;
-            this.performCascadeSizeLeft(leftColumnIndex - 1, currentDelta);
+            this.performCascadeSizeLeft(firstLeftResizableColumn - 1, currentDelta);
         }
     }
     performCascadeSizeRight(rightColumnIndex, delta) {
+        const firstRightResizableColumn = this.getFirstRightResizableColumnIndex(rightColumnIndex);
+        if (firstRightResizableColumn === -1) {
+            return;
+        }
         let currentDelta = delta;
-        const rightColumnInitialWidths = this.initialColumnWidths[rightColumnIndex];
-        const allowedDelta = delta > 0
-            ? Math.min(rightColumnInitialWidths.initialPixelWidth
-                - rightColumnInitialWidths.minPixelWidth, currentDelta)
-            : delta;
+        const rightColumn = this.visibleColumns[firstRightResizableColumn];
+        const rightColumnInitialWidths = this.initialColumnWidths[firstRightResizableColumn];
+        let allowedDelta;
+        if (rightColumn.columnInternals.resizingDisabled) {
+            allowedDelta = 0;
+        }
+        else if (delta > 0) {
+            allowedDelta = Math.min(rightColumnInitialWidths.initialPixelWidth
+                - rightColumn.columnInternals.minPixelWidth, currentDelta);
+        }
+        else {
+            allowedDelta = delta;
+        }
         const actualDelta = allowedDelta;
-        const rightColumn = this.visibleColumns[rightColumnIndex];
         rightColumn.columnInternals.currentPixelWidth -= actualDelta;
         if (actualDelta < currentDelta
-            && rightColumnIndex < this.visibleColumns.length - 1
+            && firstRightResizableColumn < this.visibleColumns.length - 1
             && delta > 0) {
             currentDelta -= allowedDelta;
-            this.performCascadeSizeRight(rightColumnIndex + 1, currentDelta);
+            this.performCascadeSizeRight(firstRightResizableColumn + 1, currentDelta);
         }
     }
     cacheGridSizedColumns() {
@@ -148,8 +224,7 @@ export class TableLayoutManager {
         for (const column of this.visibleColumns) {
             this.initialColumnWidths.push({
                 initalColumnFractionalWidth: column.columnInternals.currentFractionalWidth,
-                initialPixelWidth: column.columnInternals.currentPixelWidth,
-                minPixelWidth: column.columnInternals.minPixelWidth
+                initialPixelWidth: column.columnInternals.currentPixelWidth
             });
         }
     }

package/dist/esm/table/models/table-layout-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-layout-manager.js","sourceRoot":"","sources":["../../../../src/table/models/table-layout-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { observable } from '@microsoft/fast-element';\nimport type { Table } from '..';\nimport type { TableColumn } from '../../table-column/base';\nimport type { TableRecord } from '../types';\n\n/**\n * This class manages the layout of columns within a Table.\n * @interal\n */\nexport class TableLayoutManager<TData extends TableRecord> {\n    @observable\n    public isColumnBeingSized = false;\n\n    @observable\n    public activeColumnIndex?: number;\n\n    @observable\n    public activeColumnDivider?: number;\n\n    private gridSizedColumns?: TableColumn[];\n    private visibleColumns: TableColumn[] = [];\n    private initialTableScrollableWidth?: number;\n    private initialTableScrollableMinWidth?: number;\n    private initialColumnTotalWidth?: number;\n    private currentTotalDelta = 0;\n    private dragStart = 0;\n    private leftColumnIndex?: number;\n    private rightColumnIndex?: number;\n    private initialColumnWidths: {\n        initalColumnFractionalWidth: number,\n        initialPixelWidth: number,\n        minPixelWidth: number\n    }[] = [];\n\n    public constructor(private readonly table: Table<TData>) {}\n\n    public getGridTemplateColumns(): string {\n        return this.getVisibleColumns()\n            .map(column => {\n                const {\n                    minPixelWidth,\n                    currentPixelWidth,\n                    currentFractionalWidth\n                } = column.columnInternals;\n                if (currentPixelWidth) {\n                    const coercedPixelWidth = Math.max(\n                        minPixelWidth,\n                        currentPixelWidth\n                    );\n                    return `${coercedPixelWidth}px`;\n                }\n\n                return `minmax(${minPixelWidth}px, ${currentFractionalWidth}fr)`;\n            })\n            .join(' ');\n    }\n\n    /**\n     * Sets up state related to interactively sizing a column.\n     * @param dragStart The x-position from which a column size was started\n     * @param activeColumnDivider The divider that was clicked on\n     */\n    public beginColumnInteractiveSize(\n        dragStart: number,\n        activeColumnDivider: number\n    ): void {\n        this.activeColumnDivider = activeColumnDivider;\n        this.leftColumnIndex = this.getLeftColumnIndexFromDivider(\n            this.activeColumnDivider\n        );\n        this.rightColumnIndex = this.leftColumnIndex + 1;\n        this.activeColumnIndex = this.leftColumnIndex + (this.activeColumnDivider % 2);\n        this.dragStart = dragStart;\n        this.currentTotalDelta = 0;\n        this.visibleColumns = this.getVisibleColumns();\n        this.setColumnsToFixedSize();\n        this.initialTableScrollableWidth = this.table.viewport.scrollWidth;\n        this.initialTableScrollableMinWidth = this.table.tableScrollableMinWidth;\n        this.initialColumnTotalWidth = this.getTotalColumnFixedWidth();\n        this.isColumnBeingSized = true;\n        document.addEventListener('mousemove', this.onDividerMouseMove);\n        document.addEventListener('mouseup', this.onDividerMouseUp);\n    }\n\n    private readonly onDividerMouseMove = (event: Event): void => {\n        const mouseEvent = event as MouseEvent;\n        for (let i = 0; i < this.visibleColumns.length; i++) {\n            this.visibleColumns[i]!.columnInternals.currentPixelWidth = this.initialColumnWidths[i]?.initialPixelWidth;\n        }\n        this.currentTotalDelta = this.getAllowedSizeDelta(\n            mouseEvent.clientX - this.dragStart\n        );\n        this.performCascadeSizeLeft(\n            this.leftColumnIndex!,\n            this.currentTotalDelta\n        );\n        this.performCascadeSizeRight(\n            this.rightColumnIndex!,\n            this.currentTotalDelta\n        );\n\n        const totalColumnWidthDelta = this.getTotalColumnFixedWidth() - this.initialColumnTotalWidth!;\n        if (totalColumnWidthDelta > 0) {\n            this.table.tableScrollableMinWidth = this.initialTableScrollableWidth! + totalColumnWidthDelta;\n        } else {\n            this.table.tableScrollableMinWidth = this.initialTableScrollableMinWidth!;\n        }\n    };\n\n    private readonly onDividerMouseUp = (): void => {\n        document.removeEventListener('mousemove', this.onDividerMouseMove);\n        document.removeEventListener('mouseup', this.onDividerMouseUp);\n        this.resetGridSizedColumns();\n        this.isColumnBeingSized = false;\n        this.activeColumnIndex = undefined;\n        this.activeColumnDivider = undefined;\n    };\n\n    private getTotalColumnFixedWidth(): number {\n        let totalColumnFixedWidth = 0;\n        for (const column of this.visibleColumns) {\n            totalColumnFixedWidth\n                += column.columnInternals.currentPixelWidth ?? 0;\n        }\n        return totalColumnFixedWidth;\n    }\n\n    private setColumnsToFixedSize(): void {\n        this.cacheGridSizedColumns();\n        const headers = this.table.getHeaderContainerElements();\n        for (let i = 0; i < headers.length; i++) {\n            this.visibleColumns[i]!.columnInternals.currentPixelWidth = headers[i]!.getBoundingClientRect().width;\n        }\n        this.cacheColumnInitialPixelWidths();\n    }\n\n    private getAllowedSizeDelta(requestedResizeAmount: number): number {\n        let availableSpace = 0;\n        if (requestedResizeAmount > 0) {\n            // size right\n            return requestedResizeAmount;\n        }\n\n        // size left\n        let currentIndex = this.leftColumnIndex!;\n        while (currentIndex >= 0) {\n            const columnInitialWidths = this.initialColumnWidths[currentIndex]!;\n            availableSpace\n                += columnInitialWidths.initialPixelWidth\n                - columnInitialWidths.minPixelWidth;\n            currentIndex -= 1;\n        }\n        return Math.max(requestedResizeAmount, -availableSpace);\n    }\n\n    private performCascadeSizeLeft(\n        leftColumnIndex: number,\n        delta: number\n    ): void {\n        let currentDelta = delta;\n        const leftColumnInitialWidths = this.initialColumnWidths[leftColumnIndex]!;\n        const allowedDelta = delta < 0\n            ? Math.max(\n                leftColumnInitialWidths.minPixelWidth\n                          - leftColumnInitialWidths.initialPixelWidth,\n                currentDelta\n            )\n            : delta;\n        const actualDelta = allowedDelta;\n        const leftColumn = this.visibleColumns[leftColumnIndex]!;\n        leftColumn.columnInternals.currentPixelWidth! += actualDelta;\n\n        if (actualDelta > currentDelta && leftColumnIndex > 0 && delta < 0) {\n            currentDelta -= allowedDelta;\n            this.performCascadeSizeLeft(leftColumnIndex - 1, currentDelta);\n        }\n    }\n\n    private performCascadeSizeRight(\n        rightColumnIndex: number,\n        delta: number\n    ): void {\n        let currentDelta = delta;\n        const rightColumnInitialWidths = this.initialColumnWidths[rightColumnIndex]!;\n        const allowedDelta = delta > 0\n            ? Math.min(\n                rightColumnInitialWidths.initialPixelWidth\n                          - rightColumnInitialWidths.minPixelWidth,\n                currentDelta\n            )\n            : delta;\n        const actualDelta = allowedDelta;\n        const rightColumn = this.visibleColumns[rightColumnIndex]!;\n        rightColumn.columnInternals.currentPixelWidth! -= actualDelta;\n\n        if (\n            actualDelta < currentDelta\n            && rightColumnIndex < this.visibleColumns.length - 1\n            && delta > 0\n        ) {\n            currentDelta -= allowedDelta;\n            this.performCascadeSizeRight(rightColumnIndex + 1, currentDelta);\n        }\n    }\n\n    private cacheGridSizedColumns(): void {\n        this.gridSizedColumns = [];\n        for (const column of this.visibleColumns) {\n            if (column.columnInternals.currentPixelWidth === undefined) {\n                this.gridSizedColumns.push(column);\n            }\n        }\n    }\n\n    private cacheColumnInitialPixelWidths(): void {\n        this.initialColumnWidths = [];\n        for (const column of this.visibleColumns) {\n            this.initialColumnWidths.push({\n                initalColumnFractionalWidth:\n                    column.columnInternals.currentFractionalWidth,\n                initialPixelWidth: column.columnInternals.currentPixelWidth!,\n                minPixelWidth: column.columnInternals.minPixelWidth\n            });\n        }\n    }\n\n    private resetGridSizedColumns(): void {\n        if (!this.gridSizedColumns || this.gridSizedColumns.length === 0) {\n            return;\n        }\n\n        const gridSizeColumnTotal = this.gridSizedColumns.reduce(\n            (sum, col) => sum + col.columnInternals.currentPixelWidth!,\n            0\n        );\n        const gridSizeColumnAverage = gridSizeColumnTotal / this.gridSizedColumns.length;\n\n        let gridColumnIndex = 0;\n        for (\n            let i = 0;\n            i < this.visibleColumns.length\n            && gridColumnIndex < this.gridSizedColumns.length;\n            i++\n        ) {\n            const column = this.visibleColumns[i]!;\n            if (column === this.gridSizedColumns[gridColumnIndex]) {\n                gridColumnIndex += 1;\n                column.columnInternals.currentFractionalWidth = column.columnInternals.currentPixelWidth!\n                    / gridSizeColumnAverage;\n                column.columnInternals.currentPixelWidth = undefined;\n            }\n        }\n    }\n\n    private getVisibleColumns(): TableColumn[] {\n        return this.table.columns.filter(column => !column.columnHidden);\n    }\n\n    private getLeftColumnIndexFromDivider(dividerIndex: number): number {\n        return Math.floor(dividerIndex / 2);\n    }\n}\n"]}
+{"version":3,"file":"table-layout-manager.js","sourceRoot":"","sources":["../../../../src/table/models/table-layout-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { observable } from '@microsoft/fast-element';\nimport type { Table } from '..';\nimport type { TableColumn } from '../../table-column/base';\nimport type { TableRecord } from '../types';\n\n/**\n * This class manages the layout of columns within a Table.\n * @interal\n */\nexport class TableLayoutManager<TData extends TableRecord> {\n    @observable\n    public isColumnBeingSized = false;\n\n    @observable\n    public activeColumnIndex?: number;\n\n    @observable\n    public activeColumnDivider?: number;\n\n    private gridSizedColumns?: TableColumn[];\n    private visibleColumns: TableColumn[] = [];\n    private initialTableScrollableWidth?: number;\n    private initialTableScrollableMinWidth?: number;\n    private initialColumnTotalWidth?: number;\n    private currentTotalDelta = 0;\n    private dragStart = 0;\n    private leftColumnIndex?: number;\n    private rightColumnIndex?: number;\n    private initialColumnWidths: {\n        initalColumnFractionalWidth: number,\n        initialPixelWidth: number\n    }[] = [];\n\n    public constructor(private readonly table: Table<TData>) {}\n\n    public getGridTemplateColumns(): string {\n        return this.getVisibleColumns()\n            .map(column => {\n                const {\n                    minPixelWidth,\n                    currentPixelWidth,\n                    currentFractionalWidth\n                } = column.columnInternals;\n                if (currentPixelWidth) {\n                    const coercedPixelWidth = Math.max(\n                        minPixelWidth,\n                        currentPixelWidth\n                    );\n                    return `${coercedPixelWidth}px`;\n                }\n\n                return `minmax(${minPixelWidth}px, ${currentFractionalWidth}fr)`;\n            })\n            .join(' ');\n    }\n\n    /**\n     * Sets up state related to interactively sizing a column.\n     * @param dragStart The x-position from which a column size was started\n     * @param activeColumnDivider The divider that was clicked on\n     */\n    public beginColumnInteractiveSize(\n        dragStart: number,\n        activeColumnDivider: number\n    ): void {\n        this.activeColumnDivider = activeColumnDivider;\n        this.leftColumnIndex = this.getLeftColumnIndexFromDivider(\n            this.activeColumnDivider\n        );\n        this.rightColumnIndex = this.leftColumnIndex + 1;\n        this.activeColumnIndex = this.leftColumnIndex + (this.activeColumnDivider % 2);\n        this.dragStart = dragStart;\n        this.currentTotalDelta = 0;\n        this.visibleColumns = this.getVisibleColumns();\n        this.setColumnsToFixedSize();\n        this.initialTableScrollableWidth = this.table.viewport.scrollWidth;\n        this.initialTableScrollableMinWidth = this.table.tableScrollableMinWidth;\n        this.initialColumnTotalWidth = this.getTotalColumnFixedWidth();\n        this.isColumnBeingSized = true;\n        document.addEventListener('mousemove', this.onDividerMouseMove);\n        document.addEventListener('mouseup', this.onDividerMouseUp);\n    }\n\n    /**\n     * Determines if the specified column or any columns to the left are resizable.\n     */\n    public hasResizableColumnToLeft(columnIndex: number): boolean {\n        return this.getFirstLeftResizableColumnIndex(columnIndex) !== -1;\n    }\n\n    /**\n     * Determines if the specified column or any columns to the right are resizable.\n     */\n    private hasResizableColumnToRight(columnIndex: number): boolean {\n        return this.getFirstRightResizableColumnIndex(columnIndex) !== -1;\n    }\n\n    private readonly onDividerMouseMove = (event: Event): void => {\n        const mouseEvent = event as MouseEvent;\n        for (let i = 0; i < this.visibleColumns.length; i++) {\n            this.visibleColumns[i]!.columnInternals.currentPixelWidth = this.initialColumnWidths[i]?.initialPixelWidth;\n        }\n        this.currentTotalDelta = this.getAllowedSizeDelta(\n            mouseEvent.clientX - this.dragStart\n        );\n        this.performCascadeSizeLeft(\n            this.leftColumnIndex!,\n            this.currentTotalDelta\n        );\n        this.performCascadeSizeRight(\n            this.rightColumnIndex!,\n            this.currentTotalDelta\n        );\n\n        const totalColumnWidthDelta = this.getTotalColumnFixedWidth() - this.initialColumnTotalWidth!;\n        if (totalColumnWidthDelta > 0) {\n            this.table.tableScrollableMinWidth = this.initialTableScrollableWidth! + totalColumnWidthDelta;\n        } else {\n            this.table.tableScrollableMinWidth = this.initialTableScrollableMinWidth!;\n        }\n    };\n\n    private readonly onDividerMouseUp = (): void => {\n        document.removeEventListener('mousemove', this.onDividerMouseMove);\n        document.removeEventListener('mouseup', this.onDividerMouseUp);\n        this.resetGridSizedColumns();\n        this.isColumnBeingSized = false;\n        this.activeColumnIndex = undefined;\n        this.activeColumnDivider = undefined;\n        this.visibleColumns = [];\n    };\n\n    private getTotalColumnFixedWidth(): number {\n        let totalColumnFixedWidth = 0;\n        for (const column of this.visibleColumns) {\n            totalColumnFixedWidth\n                += column.columnInternals.currentPixelWidth ?? 0;\n        }\n        return totalColumnFixedWidth;\n    }\n\n    private setColumnsToFixedSize(): void {\n        this.cacheGridSizedColumns();\n        const headers = this.table.getHeaderContainerElements();\n        for (let i = 0; i < headers.length; i++) {\n            this.visibleColumns[i]!.columnInternals.currentPixelWidth = headers[i]!.getBoundingClientRect().width;\n        }\n        this.cacheColumnInitialPixelWidths();\n    }\n\n    private getAllowedSizeDelta(requestedResizeAmount: number): number {\n        let availableSpace = 0;\n        if (requestedResizeAmount > 0) {\n            // size right\n            return this.hasResizableColumnToLeft(this.leftColumnIndex!)\n                ? requestedResizeAmount\n                : 0;\n        }\n\n        // size left\n        if (!this.hasResizableColumnToRight(this.rightColumnIndex!)) {\n            return 0;\n        }\n\n        for (let i = this.leftColumnIndex!; i >= 0; i--) {\n            const columnInitialWidths = this.initialColumnWidths[i]!;\n            const column = this.visibleColumns[i]!;\n            if (!column.columnInternals.resizingDisabled) {\n                availableSpace\n                    += columnInitialWidths.initialPixelWidth\n                    - column.columnInternals.minPixelWidth;\n            }\n        }\n        return Math.max(requestedResizeAmount, -availableSpace);\n    }\n\n    /**\n     * Gets the index of the first resizable column starting with\n     * `columnIndex` and moving to the left. If no resizable column\n     * is found, returns -1.\n     */\n    private getFirstLeftResizableColumnIndex(columnIndex: number): number {\n        const visibleColumns = this.visibleColumns.length === 0\n            ? this.getVisibleColumns()\n            : this.visibleColumns;\n        for (let i = columnIndex; i >= 0; i--) {\n            const column = visibleColumns[i];\n            if (!column) {\n                return -1;\n            }\n            if (!column.columnInternals.resizingDisabled) {\n                return i;\n            }\n        }\n        return -1;\n    }\n\n    /**\n     * Gets the index of the first resizable column starting with\n     * `columnIndex` and moving to the right. If no resizable column\n     * is found, returns -1.\n     */\n    private getFirstRightResizableColumnIndex(columnIndex: number): number {\n        const visibleColumns = this.visibleColumns.length === 0\n            ? this.getVisibleColumns()\n            : this.visibleColumns;\n        for (let i = columnIndex; i < visibleColumns.length; i++) {\n            const column = visibleColumns[i];\n            if (!column) {\n                return -1;\n            }\n            if (!column.columnInternals.resizingDisabled) {\n                return i;\n            }\n        }\n        return -1;\n    }\n\n    private performCascadeSizeLeft(\n        leftColumnIndex: number,\n        delta: number\n    ): void {\n        const firstLeftResizableColumn = this.getFirstLeftResizableColumnIndex(leftColumnIndex);\n        if (firstLeftResizableColumn === -1) {\n            return;\n        }\n\n        let currentDelta = delta;\n        const leftColumn = this.visibleColumns[firstLeftResizableColumn]!;\n        const leftColumnInitialWidths = this.initialColumnWidths[firstLeftResizableColumn]!;\n        const allowedDelta = delta < 0\n            ? Math.max(\n                leftColumn.columnInternals.minPixelWidth\n                          - leftColumnInitialWidths.initialPixelWidth,\n                currentDelta\n            )\n            : delta;\n        const actualDelta = allowedDelta;\n        leftColumn.columnInternals.currentPixelWidth! += actualDelta;\n\n        if (\n            actualDelta > currentDelta\n            && firstLeftResizableColumn > 0\n            && delta < 0\n        ) {\n            currentDelta -= allowedDelta;\n            this.performCascadeSizeLeft(\n                firstLeftResizableColumn - 1,\n                currentDelta\n            );\n        }\n    }\n\n    private performCascadeSizeRight(\n        rightColumnIndex: number,\n        delta: number\n    ): void {\n        const firstRightResizableColumn = this.getFirstRightResizableColumnIndex(rightColumnIndex);\n        if (firstRightResizableColumn === -1) {\n            return;\n        }\n\n        let currentDelta = delta;\n        const rightColumn = this.visibleColumns[firstRightResizableColumn]!;\n        const rightColumnInitialWidths = this.initialColumnWidths[firstRightResizableColumn]!;\n        let allowedDelta: number;\n        if (rightColumn.columnInternals.resizingDisabled) {\n            allowedDelta = 0;\n        } else if (delta > 0) {\n            allowedDelta = Math.min(\n                rightColumnInitialWidths.initialPixelWidth\n                    - rightColumn.columnInternals.minPixelWidth,\n                currentDelta\n            );\n        } else {\n            allowedDelta = delta;\n        }\n        const actualDelta = allowedDelta;\n        rightColumn.columnInternals.currentPixelWidth! -= actualDelta;\n\n        if (\n            actualDelta < currentDelta\n            && firstRightResizableColumn < this.visibleColumns.length - 1\n            && delta > 0\n        ) {\n            currentDelta -= allowedDelta;\n            this.performCascadeSizeRight(\n                firstRightResizableColumn + 1,\n                currentDelta\n            );\n        }\n    }\n\n    private cacheGridSizedColumns(): void {\n        this.gridSizedColumns = [];\n        for (const column of this.visibleColumns) {\n            if (column.columnInternals.currentPixelWidth === undefined) {\n                this.gridSizedColumns.push(column);\n            }\n        }\n    }\n\n    private cacheColumnInitialPixelWidths(): void {\n        this.initialColumnWidths = [];\n        for (const column of this.visibleColumns) {\n            this.initialColumnWidths.push({\n                initalColumnFractionalWidth:\n                    column.columnInternals.currentFractionalWidth,\n                initialPixelWidth: column.columnInternals.currentPixelWidth!\n            });\n        }\n    }\n\n    private resetGridSizedColumns(): void {\n        if (!this.gridSizedColumns || this.gridSizedColumns.length === 0) {\n            return;\n        }\n\n        const gridSizeColumnTotal = this.gridSizedColumns.reduce(\n            (sum, col) => sum + col.columnInternals.currentPixelWidth!,\n            0\n        );\n        const gridSizeColumnAverage = gridSizeColumnTotal / this.gridSizedColumns.length;\n\n        let gridColumnIndex = 0;\n        for (\n            let i = 0;\n            i < this.visibleColumns.length\n            && gridColumnIndex < this.gridSizedColumns.length;\n            i++\n        ) {\n            const column = this.visibleColumns[i]!;\n            if (column === this.gridSizedColumns[gridColumnIndex]) {\n                gridColumnIndex += 1;\n                column.columnInternals.currentFractionalWidth = column.columnInternals.currentPixelWidth!\n                    / gridSizeColumnAverage;\n                column.columnInternals.currentPixelWidth = undefined;\n            }\n        }\n    }\n\n    private getVisibleColumns(): TableColumn[] {\n        return this.table.columns.filter(column => !column.columnHidden);\n    }\n\n    private getLeftColumnIndexFromDivider(dividerIndex: number): number {\n        return Math.floor(dividerIndex / 2);\n    }\n}\n"]}

package/dist/esm/table/models/table-update-tracker.js

@@ -89,7 +89,7 @@ export class TableUpdateTracker extends UpdateTracker {
             this.track('columnSort');
         }
         else if (isColumnProperty(changedColumnProperty, 'columnHidden')
-            || isColumnInternalsProperty(changedColumnProperty, 'currentFractionalWidth', 'currentPixelWidth', 'minPixelWidth')) {
+            || isColumnInternalsProperty(changedColumnProperty, 'currentFractionalWidth', 'currentPixelWidth', 'minPixelWidth', 'resizingDisabled')) {
             this.track('columnWidths');
         }
         else if (isColumnProperty(changedColumnProperty, 'actionMenuSlot')) {

package/dist/esm/table/models/table-update-tracker.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-update-tracker.js","sourceRoot":"","sources":["../../../../src/table/models/table-update-tracker.ts"],"names":[],"mappings":"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","sourcesContent":["import { DOM } from '@microsoft/fast-element';\nimport type { Table } from '..';\nimport type { TableColumn } from '../../table-column/base';\nimport type { TableRecord } from '../types';\nimport { UpdateTracker } from '../../utilities/models/update-tracker';\nimport { isColumnInternalsProperty } from '../../table-column/base/models/column-internals';\n\nconst isColumnProperty = (\n    changedProperty: string,\n    ...args: (keyof TableColumn)[]\n): boolean => {\n    for (const arg of args) {\n        if (changedProperty === arg) {\n            return true;\n        }\n    }\n    return false;\n};\n\nconst trackedItems = [\n    'rowIds',\n    'rowParentIds',\n    'groupRows',\n    'columnIds',\n    'columnSort',\n    'columnWidths',\n    'columnDefinition',\n    'actionMenuSlots',\n    'selectionMode'\n] as const;\n\n/**\n * Helper class to track what updates are needed to the table based on configuration\n * changes.\n */\nexport class TableUpdateTracker<\n    TData extends TableRecord\n> extends UpdateTracker<typeof trackedItems> {\n    private updateQueued = false;\n\n    public constructor(private readonly table: Table<TData>) {\n        super(trackedItems);\n    }\n\n    public get updateRowIds(): boolean {\n        return this.isTracked('rowIds');\n    }\n\n    public get updateRowParentIds(): boolean {\n        return this.isTracked('rowParentIds');\n    }\n\n    public get updateGroupRows(): boolean {\n        return this.isTracked('groupRows');\n    }\n\n    public get updateColumnIds(): boolean {\n        return this.isTracked('columnIds');\n    }\n\n    public get updateColumnSort(): boolean {\n        return this.isTracked('columnSort');\n    }\n\n    public get updateColumnWidths(): boolean {\n        return this.isTracked('columnWidths');\n    }\n\n    public get updateColumnDefinition(): boolean {\n        return this.isTracked('columnDefinition');\n    }\n\n    public get updateActionMenuSlots(): boolean {\n        return this.isTracked('actionMenuSlots');\n    }\n\n    public get updateSelectionMode(): boolean {\n        return this.isTracked('selectionMode');\n    }\n\n    public get requiresTanStackUpdate(): boolean {\n        return (\n            this.isTracked('rowIds')\n            || this.isTracked('rowParentIds')\n            || this.isTracked('columnSort')\n            || this.isTracked('columnDefinition')\n            || this.isTracked('groupRows')\n            || this.isTracked('selectionMode')\n        );\n    }\n\n    public get requiresTanStackDataReset(): boolean {\n        return (\n            this.isTracked('rowIds')\n            || this.isTracked('columnDefinition')\n            || this.isTracked('rowParentIds')\n        );\n    }\n\n    public trackAllStateChanged(): void {\n        this.trackAll();\n        this.queueUpdate();\n    }\n\n    public get hasPendingUpdates(): boolean {\n        return this.updateQueued;\n    }\n\n    public trackColumnPropertyChanged(changedColumnProperty: string): void {\n        if (isColumnProperty(changedColumnProperty, 'columnId')) {\n            this.track('columnIds');\n        } else if (\n            isColumnInternalsProperty(\n                changedColumnProperty,\n                'operandDataRecordFieldName',\n                'sortOperation'\n            )\n        ) {\n            this.track('columnDefinition');\n        } else if (\n            isColumnProperty(changedColumnProperty, 'sortingDisabled')\n            || isColumnInternalsProperty(\n                changedColumnProperty,\n                'currentSortDirection',\n                'currentSortIndex'\n            )\n        ) {\n            this.track('columnSort');\n        } else if (\n            isColumnProperty(changedColumnProperty, 'columnHidden')\n            || isColumnInternalsProperty(\n                changedColumnProperty,\n                'currentFractionalWidth',\n                'currentPixelWidth',\n                'minPixelWidth'\n            )\n        ) {\n            this.track('columnWidths');\n        } else if (isColumnProperty(changedColumnProperty, 'actionMenuSlot')) {\n            this.track('actionMenuSlots');\n        } else if (\n            isColumnInternalsProperty(\n                changedColumnProperty,\n                'groupIndex',\n                'groupingDisabled'\n            )\n        ) {\n            this.track('groupRows');\n        }\n\n        this.queueUpdate();\n    }\n\n    public trackColumnInstancesChanged(): void {\n        this.track('columnIds');\n        this.track('columnDefinition');\n        this.track('columnSort');\n        this.track('columnWidths');\n        this.track('actionMenuSlots');\n        this.track('groupRows');\n\n        this.queueUpdate();\n    }\n\n    public trackIdFieldNameChanged(): void {\n        this.track('rowIds');\n        this.queueUpdate();\n    }\n\n    public trackParentIdFieldNameChanged(): void {\n        this.track('rowParentIds');\n        this.queueUpdate();\n    }\n\n    public trackSelectionModeChanged(): void {\n        this.track('selectionMode');\n        this.queueUpdate();\n    }\n\n    protected override queueUpdate(): void {\n        if (!this.table.$fastController.isConnected) {\n            return;\n        }\n\n        if (!this.updateQueued) {\n            this.updateQueued = true;\n            DOM.queueUpdate(() => {\n                this.table.update();\n                this.untrackAll();\n                this.updateQueued = false;\n            });\n        }\n    }\n}\n"]}
+{"version":3,"file":"table-update-tracker.js","sourceRoot":"","sources":["../../../../src/table/models/table-update-tracker.ts"],"names":[],"mappings":"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","sourcesContent":["import { DOM } from '@microsoft/fast-element';\nimport type { Table } from '..';\nimport type { TableColumn } from '../../table-column/base';\nimport type { TableRecord } from '../types';\nimport { UpdateTracker } from '../../utilities/models/update-tracker';\nimport { isColumnInternalsProperty } from '../../table-column/base/models/column-internals';\n\nconst isColumnProperty = (\n    changedProperty: string,\n    ...args: (keyof TableColumn)[]\n): boolean => {\n    for (const arg of args) {\n        if (changedProperty === arg) {\n            return true;\n        }\n    }\n    return false;\n};\n\nconst trackedItems = [\n    'rowIds',\n    'rowParentIds',\n    'groupRows',\n    'columnIds',\n    'columnSort',\n    'columnWidths',\n    'columnDefinition',\n    'actionMenuSlots',\n    'selectionMode'\n] as const;\n\n/**\n * Helper class to track what updates are needed to the table based on configuration\n * changes.\n */\nexport class TableUpdateTracker<\n    TData extends TableRecord\n> extends UpdateTracker<typeof trackedItems> {\n    private updateQueued = false;\n\n    public constructor(private readonly table: Table<TData>) {\n        super(trackedItems);\n    }\n\n    public get updateRowIds(): boolean {\n        return this.isTracked('rowIds');\n    }\n\n    public get updateRowParentIds(): boolean {\n        return this.isTracked('rowParentIds');\n    }\n\n    public get updateGroupRows(): boolean {\n        return this.isTracked('groupRows');\n    }\n\n    public get updateColumnIds(): boolean {\n        return this.isTracked('columnIds');\n    }\n\n    public get updateColumnSort(): boolean {\n        return this.isTracked('columnSort');\n    }\n\n    public get updateColumnWidths(): boolean {\n        return this.isTracked('columnWidths');\n    }\n\n    public get updateColumnDefinition(): boolean {\n        return this.isTracked('columnDefinition');\n    }\n\n    public get updateActionMenuSlots(): boolean {\n        return this.isTracked('actionMenuSlots');\n    }\n\n    public get updateSelectionMode(): boolean {\n        return this.isTracked('selectionMode');\n    }\n\n    public get requiresTanStackUpdate(): boolean {\n        return (\n            this.isTracked('rowIds')\n            || this.isTracked('rowParentIds')\n            || this.isTracked('columnSort')\n            || this.isTracked('columnDefinition')\n            || this.isTracked('groupRows')\n            || this.isTracked('selectionMode')\n        );\n    }\n\n    public get requiresTanStackDataReset(): boolean {\n        return (\n            this.isTracked('rowIds')\n            || this.isTracked('columnDefinition')\n            || this.isTracked('rowParentIds')\n        );\n    }\n\n    public trackAllStateChanged(): void {\n        this.trackAll();\n        this.queueUpdate();\n    }\n\n    public get hasPendingUpdates(): boolean {\n        return this.updateQueued;\n    }\n\n    public trackColumnPropertyChanged(changedColumnProperty: string): void {\n        if (isColumnProperty(changedColumnProperty, 'columnId')) {\n            this.track('columnIds');\n        } else if (\n            isColumnInternalsProperty(\n                changedColumnProperty,\n                'operandDataRecordFieldName',\n                'sortOperation'\n            )\n        ) {\n            this.track('columnDefinition');\n        } else if (\n            isColumnProperty(changedColumnProperty, 'sortingDisabled')\n            || isColumnInternalsProperty(\n                changedColumnProperty,\n                'currentSortDirection',\n                'currentSortIndex'\n            )\n        ) {\n            this.track('columnSort');\n        } else if (\n            isColumnProperty(changedColumnProperty, 'columnHidden')\n            || isColumnInternalsProperty(\n                changedColumnProperty,\n                'currentFractionalWidth',\n                'currentPixelWidth',\n                'minPixelWidth',\n                'resizingDisabled'\n            )\n        ) {\n            this.track('columnWidths');\n        } else if (isColumnProperty(changedColumnProperty, 'actionMenuSlot')) {\n            this.track('actionMenuSlots');\n        } else if (\n            isColumnInternalsProperty(\n                changedColumnProperty,\n                'groupIndex',\n                'groupingDisabled'\n            )\n        ) {\n            this.track('groupRows');\n        }\n\n        this.queueUpdate();\n    }\n\n    public trackColumnInstancesChanged(): void {\n        this.track('columnIds');\n        this.track('columnDefinition');\n        this.track('columnSort');\n        this.track('columnWidths');\n        this.track('actionMenuSlots');\n        this.track('groupRows');\n\n        this.queueUpdate();\n    }\n\n    public trackIdFieldNameChanged(): void {\n        this.track('rowIds');\n        this.queueUpdate();\n    }\n\n    public trackParentIdFieldNameChanged(): void {\n        this.track('rowParentIds');\n        this.queueUpdate();\n    }\n\n    public trackSelectionModeChanged(): void {\n        this.track('selectionMode');\n        this.queueUpdate();\n    }\n\n    protected override queueUpdate(): void {\n        if (!this.table.$fastController.isConnected) {\n            return;\n        }\n\n        if (!this.updateQueued) {\n            this.updateQueued = true;\n            DOM.queueUpdate(() => {\n                this.table.update();\n                this.untrackAll();\n                this.updateQueued = false;\n            });\n        }\n    }\n}\n"]}

package/dist/esm/table/styles.js

@@ -113,8 +113,8 @@ export const styles = css `
         border-color: ${borderHoverColor};
     }
 
-    .column-divider.column-active,
-    .header-container:hover .column-divider {
+    .column-divider.column-active.draggable,
+    .header-container:hover .column-divider.draggable {
         display: block;
     }
 

package/dist/esm/table/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;UASX,cAAc;;;;;;;;gBAQR,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;sBAkBR,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA6B9B,iBAAiB;uBACZ,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;cAyBtB,gBAAgB;;kBAEZ,iBAAiB;;;mBAGhB,YAAY,CAAC,OAAO;;;;;wBAKf,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAkDZ,mBAAmB;;;;uBAIxB,eAAe;;;;;;;;;;;;;;;;UAgB5B,gBAAgB;;CAEzB,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;oCAKyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;SAGxD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    popupBorderColor,\n    controlSlimHeight,\n    mediumPadding,\n    standardPadding,\n    tableRowBorderColor,\n    borderHoverColor\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { userSelectNone } from '../utilities/style/user-select';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\nimport { ZIndexLevels } from '../utilities/style/types';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        height: 480px;\n        --ni-private-column-divider-width: 2px;\n        --ni-private-column-divider-padding: 3px;\n    }\n\n    .disable-select {\n        ${userSelectNone}\n    }\n\n    .table-container {\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        cursor: var(--ni-private-table-cursor-override);\n    }\n\n    .glass-overlay {\n        width: 100%;\n        height: 100%;\n        display: contents;\n        pointer-events: var(--ni-private-glass-overlay-pointer-events);\n    }\n\n    .header-row-container {\n        position: sticky;\n        top: 0;\n    }\n\n    .header-row {\n        display: flex;\n        background: ${applicationBackgroundColor};\n        position: relative;\n        width: fit-content;\n        min-width: max(\n            100%,\n            calc(\n                var(--ni-private-table-scrollable-min-width) +\n                    var(--ni-private-table-header-container-margin-right)\n            )\n        );\n        left: var(--ni-private-table-scroll-x);\n        align-items: center;\n    }\n\n    .header-row-action-container {\n        display: flex;\n    }\n\n    .checkbox-container {\n        display: flex;\n    }\n\n    .column-headers-container {\n        display: grid;\n        width: 100%;\n        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n    }\n\n    .collapse-all-button {\n        height: ${controlSlimHeight};\n        margin-left: ${mediumPadding};\n        visibility: hidden;\n    }\n\n    .collapse-all-button.visible {\n        visibility: visible;\n    }\n\n    .header-container {\n        display: flex;\n        align-items: center;\n        position: relative;\n    }\n\n    .header-scrollbar-spacer {\n        width: var(--ni-private-table-header-container-margin-right);\n    }\n\n    .header {\n        flex: 1;\n        overflow: hidden;\n    }\n\n    .column-divider {\n        border-left: var(--ni-private-column-divider-width) solid\n            ${popupBorderColor};\n        display: none;\n        height: ${controlSlimHeight};\n        cursor: col-resize;\n        position: absolute;\n        z-index: ${ZIndexLevels.zIndex1};\n    }\n\n    .column-divider:hover,\n    .column-divider.divider-active {\n        border-color: ${borderHoverColor};\n    }\n\n    .column-divider.column-active,\n    .header-container:hover .column-divider {\n        display: block;\n    }\n\n    .column-divider::before {\n        content: '';\n        position: absolute;\n        width: calc(\n            var(--ni-private-column-divider-width) +\n                (2 * var(--ni-private-column-divider-padding))\n        );\n        height: 100%;\n        left: calc(\n            -1 * (var(--ni-private-column-divider-width) +\n                        var(--ni-private-column-divider-padding))\n        );\n    }\n\n    .column-divider.left {\n        left: -1px;\n    }\n\n    .column-divider.right {\n        left: calc(100% - 1px);\n    }\n\n    .table-viewport {\n        overflow: auto;\n        display: block;\n        height: 100%;\n        position: relative;\n    }\n\n    .table-scroll {\n        pointer-events: none;\n        position: absolute;\n        top: 0px;\n        width: 100%;\n        height: var(--ni-private-table-scroll-height);\n    }\n\n    .table-row-container {\n        width: fit-content;\n        min-width: max(100%, var(--ni-private-table-scrollable-min-width));\n        position: relative;\n        top: var(--ni-private-table-row-container-top);\n        background-color: ${tableRowBorderColor};\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n\n    .group-row {\n        position: relative;\n    }\n\n    .row {\n        position: relative;\n    }\n\n    .accessibly-hidden {\n        ${accessiblyHidden}\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            .table-row-container::before {\n                content: '';\n                width: 100%;\n                height: 100%;\n                background-color: ${hexToRgbaCssColor(White, 0.1)};\n                position: absolute;\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;UASX,cAAc;;;;;;;;gBAQR,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;sBAkBR,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA6B9B,iBAAiB;uBACZ,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;cAyBtB,gBAAgB;;kBAEZ,iBAAiB;;;mBAGhB,YAAY,CAAC,OAAO;;;;;wBAKf,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAkDZ,mBAAmB;;;;uBAIxB,eAAe;;;;;;;;;;;;;;;;UAgB5B,gBAAgB;;CAEzB,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;oCAKyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;SAGxD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    popupBorderColor,\n    controlSlimHeight,\n    mediumPadding,\n    standardPadding,\n    tableRowBorderColor,\n    borderHoverColor\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { userSelectNone } from '../utilities/style/user-select';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\nimport { ZIndexLevels } from '../utilities/style/types';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        height: 480px;\n        --ni-private-column-divider-width: 2px;\n        --ni-private-column-divider-padding: 3px;\n    }\n\n    .disable-select {\n        ${userSelectNone}\n    }\n\n    .table-container {\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        cursor: var(--ni-private-table-cursor-override);\n    }\n\n    .glass-overlay {\n        width: 100%;\n        height: 100%;\n        display: contents;\n        pointer-events: var(--ni-private-glass-overlay-pointer-events);\n    }\n\n    .header-row-container {\n        position: sticky;\n        top: 0;\n    }\n\n    .header-row {\n        display: flex;\n        background: ${applicationBackgroundColor};\n        position: relative;\n        width: fit-content;\n        min-width: max(\n            100%,\n            calc(\n                var(--ni-private-table-scrollable-min-width) +\n                    var(--ni-private-table-header-container-margin-right)\n            )\n        );\n        left: var(--ni-private-table-scroll-x);\n        align-items: center;\n    }\n\n    .header-row-action-container {\n        display: flex;\n    }\n\n    .checkbox-container {\n        display: flex;\n    }\n\n    .column-headers-container {\n        display: grid;\n        width: 100%;\n        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n    }\n\n    .collapse-all-button {\n        height: ${controlSlimHeight};\n        margin-left: ${mediumPadding};\n        visibility: hidden;\n    }\n\n    .collapse-all-button.visible {\n        visibility: visible;\n    }\n\n    .header-container {\n        display: flex;\n        align-items: center;\n        position: relative;\n    }\n\n    .header-scrollbar-spacer {\n        width: var(--ni-private-table-header-container-margin-right);\n    }\n\n    .header {\n        flex: 1;\n        overflow: hidden;\n    }\n\n    .column-divider {\n        border-left: var(--ni-private-column-divider-width) solid\n            ${popupBorderColor};\n        display: none;\n        height: ${controlSlimHeight};\n        cursor: col-resize;\n        position: absolute;\n        z-index: ${ZIndexLevels.zIndex1};\n    }\n\n    .column-divider:hover,\n    .column-divider.divider-active {\n        border-color: ${borderHoverColor};\n    }\n\n    .column-divider.column-active.draggable,\n    .header-container:hover .column-divider.draggable {\n        display: block;\n    }\n\n    .column-divider::before {\n        content: '';\n        position: absolute;\n        width: calc(\n            var(--ni-private-column-divider-width) +\n                (2 * var(--ni-private-column-divider-padding))\n        );\n        height: 100%;\n        left: calc(\n            -1 * (var(--ni-private-column-divider-width) +\n                        var(--ni-private-column-divider-padding))\n        );\n    }\n\n    .column-divider.left {\n        left: -1px;\n    }\n\n    .column-divider.right {\n        left: calc(100% - 1px);\n    }\n\n    .table-viewport {\n        overflow: auto;\n        display: block;\n        height: 100%;\n        position: relative;\n    }\n\n    .table-scroll {\n        pointer-events: none;\n        position: absolute;\n        top: 0px;\n        width: 100%;\n        height: var(--ni-private-table-scroll-height);\n    }\n\n    .table-row-container {\n        width: fit-content;\n        min-width: max(100%, var(--ni-private-table-scrollable-min-width));\n        position: relative;\n        top: var(--ni-private-table-row-container-top);\n        background-color: ${tableRowBorderColor};\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n\n    .group-row {\n        position: relative;\n    }\n\n    .row {\n        position: relative;\n    }\n\n    .accessibly-hidden {\n        ${accessiblyHidden}\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            .table-row-container::before {\n                content: '';\n                width: 100%;\n                height: 100%;\n                background-color: ${hexToRgbaCssColor(White, 0.1)};\n                position: absolute;\n            }\n        `\n    )\n);\n"]}