@ni/nimble-components 35.10.1 → 35.11.0

package/dist/custom-elements.json

@@ -5959,6 +5959,24 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "getPinnedColumnResolvedPixelWidth",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "column",
+                  "type": {
+                    "text": "TableColumn"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "updateRequestedSlotsForOpeningActionMenu",
@@ -6563,6 +6581,15 @@
           },
           "default": "{ none: undefined, canLoadChildren: 'can-load-children', loadingChildren: 'loading-children' }"
         },
+        {
+          "kind": "variable",
+          "name": "TableColumnPinLocation",
+          "type": {
+            "text": "{\n    none: undefined,\n    left: 'left'\n}"
+          },
+          "default": "{ none: undefined, left: 'left' }",
+          "description": "The possible pin locations for a table column."
+        },
         {
           "kind": "variable",
           "name": "TableColumnSortDirection",
@@ -6600,6 +6627,14 @@
             "module": "src/table/types.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "TableColumnPinLocation",
+          "declaration": {
+            "name": "TableColumnPinLocation",
+            "module": "src/table/types.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "TableColumnSortDirection",
@@ -14566,6 +14601,18 @@
                 "module": "src/table-column/mixins/fractional-width-column.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "pinLocation",
+              "type": {
+                "text": "TableColumnPinLocation | undefined"
+              },
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "mixinPinnableColumnAPI",
+                "module": "src/table-column/mixins/pinnable-column.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "sortingDisabled",
@@ -14622,6 +14669,10 @@
               "name": "mixinFractionalWidthColumnAPI",
               "module": "/src/table-column/mixins/fractional-width-column"
             },
+            {
+              "name": "mixinPinnableColumnAPI",
+              "module": "/src/table-column/mixins/pinnable-column"
+            },
             {
               "name": "mixinSortableColumnAPI",
               "module": "/src/table-column/mixins/sortable-column"
@@ -15082,6 +15133,45 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/table-column/mixins/pinnable-column.ts",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "mixinPinnableColumnAPI",
+          "members": [
+            {
+              "kind": "field",
+              "name": "pinLocation",
+              "type": {
+                "text": "TableColumnPinLocation | undefined"
+              },
+              "privacy": "public"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "base",
+              "type": {
+                "text": "TBase"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "mixinPinnableColumnAPI",
+          "declaration": {
+            "name": "mixinPinnableColumnAPI",
+            "module": "src/table-column/mixins/pinnable-column.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/table-column/mixins/placeholder.ts",

package/dist/custom-elements.md

@@ -2012,16 +2012,17 @@
 
 ### Fields
 
-| Name               | Privacy | Type                          | Default | Description | Inherited From                |
-| ------------------ | ------- | ----------------------------- | ------- | ----------- | ----------------------------- |
-| `widthMode`        | public  | `TableColumnMappingWidthMode` |         |             |                               |
-| `groupingDisabled` | public  | `boolean`                     | `false` |             | mixinGroupableColumnAPI       |
-| `groupIndex`       | public  | `number \| null \| undefined` |         |             | mixinGroupableColumnAPI       |
-| `fractionalWidth`  | public  | `number \| null \| undefined` |         |             | mixinFractionalWidthColumnAPI |
-| `minPixelWidth`    | public  | `number \| null \| undefined` |         |             | mixinFractionalWidthColumnAPI |
-| `sortingDisabled`  | public  | `boolean`                     | `false` |             | mixinSortableColumnAPI        |
-| `sortIndex`        | public  | `number \| null \| undefined` |         |             | mixinSortableColumnAPI        |
-| `sortDirection`    | public  | `TableColumnSortDirection`    |         |             | mixinSortableColumnAPI        |
+| Name               | Privacy | Type                                  | Default | Description | Inherited From                |
+| ------------------ | ------- | ------------------------------------- | ------- | ----------- | ----------------------------- |
+| `widthMode`        | public  | `TableColumnMappingWidthMode`         |         |             |                               |
+| `groupingDisabled` | public  | `boolean`                             | `false` |             | mixinGroupableColumnAPI       |
+| `groupIndex`       | public  | `number \| null \| undefined`         |         |             | mixinGroupableColumnAPI       |
+| `fractionalWidth`  | public  | `number \| null \| undefined`         |         |             | mixinFractionalWidthColumnAPI |
+| `minPixelWidth`    | public  | `number \| null \| undefined`         |         |             | mixinFractionalWidthColumnAPI |
+| `pinLocation`      | public  | `TableColumnPinLocation \| undefined` |         |             | mixinPinnableColumnAPI        |
+| `sortingDisabled`  | public  | `boolean`                             | `false` |             | mixinSortableColumnAPI        |
+| `sortIndex`        | public  | `number \| null \| undefined`         |         |             | mixinSortableColumnAPI        |
+| `sortDirection`    | public  | `TableColumnSortDirection`            |         |             | mixinSortableColumnAPI        |
 
 ### Methods
 

package/dist/esm/table/components/group-row/index.d.ts

@@ -14,6 +14,11 @@ declare global {
 export declare class TableGroupRow extends FoundationElement {
     groupRowValue?: unknown;
     nestingLevel: number;
+    pinnedColumnOffset: number;
+    /**
+     * @internal
+     */
+    hasPinnedColumns: boolean;
     /**
      * Row index in the flattened set of all regular and group header rows.
      * Represents the index in table.tableData (TableRowState[]).
@@ -46,6 +51,7 @@ export declare class TableGroupRow extends FoundationElement {
     onSelectionCheckboxChange(event: CustomEvent): void;
     /** @internal */
     getFocusableElements(): TableRowFocusableElements;
+    private pinnedColumnOffsetChanged;
     private selectionStateChanged;
     private selectionCheckboxChanged;
     private setSelectionCheckboxState;

package/dist/esm/table/components/group-row/index.js

@@ -12,6 +12,11 @@ export class TableGroupRow extends FoundationElement {
     constructor() {
         super(...arguments);
         this.nestingLevel = 0;
+        this.pinnedColumnOffset = 0;
+        /**
+         * @internal
+         */
+        this.hasPinnedColumns = false;
         this.expanded = false;
         this.selectable = false;
         this.selectionState = TableRowSelectionState.notSelected;
@@ -69,6 +74,9 @@ export class TableGroupRow extends FoundationElement {
             cells: []
         };
     }
+    pinnedColumnOffsetChanged() {
+        this.hasPinnedColumns = this.pinnedColumnOffset > 0;
+    }
     selectionStateChanged() {
         this.setSelectionCheckboxState();
     }
@@ -91,6 +99,12 @@ __decorate([
 __decorate([
     observable
 ], TableGroupRow.prototype, "nestingLevel", void 0);
+__decorate([
+    observable
+], TableGroupRow.prototype, "pinnedColumnOffset", void 0);
+__decorate([
+    attr({ attribute: 'has-pinned-columns', mode: 'boolean' })
+], TableGroupRow.prototype, "hasPinnedColumns", void 0);
 __decorate([
     observable
 ], TableGroupRow.prototype, "resolvedRowIndex", void 0);

package/dist/esm/table/components/group-row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport type { TableColumn } from '../../../table-column/base';\nimport { styles } from './styles';\nimport { template } from './template';\nimport {\n    type TableRowFocusableElements,\n    TableRowSelectionState,\n    type TableRowSelectionToggleEventDetail\n} from '../../types';\nimport type { Checkbox } from '../../../checkbox';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-group-row': TableGroupRow;\n    }\n}\n\n/**\n * A styled cell that is used within the nimble-table-row.\n * @internal\n */\nexport class TableGroupRow extends FoundationElement {\n    @observable\n    public groupRowValue?: unknown;\n\n    @observable\n    public nestingLevel = 0;\n\n    /**\n     * Row index in the flattened set of all regular and group header rows.\n     * Represents the index in table.tableData (TableRowState[]).\n     */\n    @observable\n    public resolvedRowIndex?: number;\n\n    @observable\n    public immediateChildCount?: number;\n\n    @observable\n    public groupColumn?: TableColumn;\n\n    @attr({ mode: 'boolean' })\n    public expanded = false;\n\n    @attr({ mode: 'boolean' })\n    public selectable = false;\n\n    @attr({ attribute: 'selection-state' })\n    public selectionState: TableRowSelectionState = TableRowSelectionState.notSelected;\n\n    /**\n     * @internal\n     */\n    public readonly expandIcon!: HTMLElement;\n\n    /**\n     * @internal\n     */\n    @observable\n    public readonly selectionCheckbox?: Checkbox;\n\n    /**\n     * @internal\n     */\n    @observable\n    public animationClass = '';\n\n    /**\n     * @internal\n     */\n    @attr({ attribute: 'allow-hover', mode: 'boolean' })\n    public allowHover = false;\n\n    // Programmatically updating the selection state of a checkbox fires the 'change' event.\n    // Therefore, selection change events that occur due to programmatically updating\n    // the selection checkbox 'checked' value should be ingored.\n    // https://github.com/ni/nimble/issues/2739\n    private ignoreSelectionChangeEvents = false;\n\n    public onGroupExpandToggle(): void {\n        this.$emit('group-expand-toggle');\n        // To avoid a visual glitch with improper expand/collapse icons performing an\n        // animation, we apply a class to the appropriate group row such that we can have\n        // a more targeted CSS animation. We use the 'transitionend' event to remove the\n        // temporary class and register a function reference as the handler to avoid issues\n        // that may result from the 'transitionend' event not firing, as it will never result\n        // in multiple event listeners being registered.\n        this.animationClass = 'animating';\n        this.expandIcon.addEventListener(\n            'transitionend',\n            this.removeAnimatingClass\n        );\n    }\n\n    /** @internal */\n    public onSelectionCheckboxChange(event: CustomEvent): void {\n        if (this.ignoreSelectionChangeEvents) {\n            return;\n        }\n\n        const checkbox = event.target as Checkbox;\n        const checked = checkbox.checked;\n        this.selectionState = checked\n            ? TableRowSelectionState.selected\n            : TableRowSelectionState.notSelected;\n        const detail: TableRowSelectionToggleEventDetail = {\n            oldState: !checked,\n            newState: checked\n        };\n        this.$emit('group-selection-toggle', detail);\n    }\n\n    /** @internal */\n    public getFocusableElements(): TableRowFocusableElements {\n        return {\n            selectionCheckbox: this.selectable\n                ? this.selectionCheckbox\n                : undefined,\n            cells: []\n        };\n    }\n\n    private selectionStateChanged(): void {\n        this.setSelectionCheckboxState();\n    }\n\n    private selectionCheckboxChanged(): void {\n        this.setSelectionCheckboxState();\n    }\n\n    private setSelectionCheckboxState(): void {\n        if (this.selectionCheckbox) {\n            this.ignoreSelectionChangeEvents = true;\n            this.selectionCheckbox.checked = this.selectionState === TableRowSelectionState.selected;\n            this.selectionCheckbox.indeterminate = this.selectionState\n                === TableRowSelectionState.partiallySelected;\n            this.ignoreSelectionChangeEvents = false;\n        }\n    }\n\n    private readonly removeAnimatingClass = (): void => {\n        this.animationClass = '';\n        this.expandIcon.removeEventListener(\n            'transitionend',\n            this.removeAnimatingClass\n        );\n    };\n}\n\nconst nimbleTableGroupRow = TableGroupRow.compose({\n    baseName: 'table-group-row',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());\nexport const tableGroupRowTag = 'nimble-table-group-row';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport type { TableColumn } from '../../../table-column/base';\nimport { styles } from './styles';\nimport { template } from './template';\nimport {\n    type TableRowFocusableElements,\n    TableRowSelectionState,\n    type TableRowSelectionToggleEventDetail\n} from '../../types';\nimport type { Checkbox } from '../../../checkbox';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-group-row': TableGroupRow;\n    }\n}\n\n/**\n * A styled cell that is used within the nimble-table-row.\n * @internal\n */\nexport class TableGroupRow extends FoundationElement {\n    @observable\n    public groupRowValue?: unknown;\n\n    @observable\n    public nestingLevel = 0;\n\n    @observable\n    public pinnedColumnOffset = 0;\n\n    /**\n     * @internal\n     */\n    @attr({ attribute: 'has-pinned-columns', mode: 'boolean' })\n    public hasPinnedColumns = false;\n\n    /**\n     * Row index in the flattened set of all regular and group header rows.\n     * Represents the index in table.tableData (TableRowState[]).\n     */\n    @observable\n    public resolvedRowIndex?: number;\n\n    @observable\n    public immediateChildCount?: number;\n\n    @observable\n    public groupColumn?: TableColumn;\n\n    @attr({ mode: 'boolean' })\n    public expanded = false;\n\n    @attr({ mode: 'boolean' })\n    public selectable = false;\n\n    @attr({ attribute: 'selection-state' })\n    public selectionState: TableRowSelectionState = TableRowSelectionState.notSelected;\n\n    /**\n     * @internal\n     */\n    public readonly expandIcon!: HTMLElement;\n\n    /**\n     * @internal\n     */\n    @observable\n    public readonly selectionCheckbox?: Checkbox;\n\n    /**\n     * @internal\n     */\n    @observable\n    public animationClass = '';\n\n    /**\n     * @internal\n     */\n    @attr({ attribute: 'allow-hover', mode: 'boolean' })\n    public allowHover = false;\n\n    // Programmatically updating the selection state of a checkbox fires the 'change' event.\n    // Therefore, selection change events that occur due to programmatically updating\n    // the selection checkbox 'checked' value should be ingored.\n    // https://github.com/ni/nimble/issues/2739\n    private ignoreSelectionChangeEvents = false;\n\n    public onGroupExpandToggle(): void {\n        this.$emit('group-expand-toggle');\n        // To avoid a visual glitch with improper expand/collapse icons performing an\n        // animation, we apply a class to the appropriate group row such that we can have\n        // a more targeted CSS animation. We use the 'transitionend' event to remove the\n        // temporary class and register a function reference as the handler to avoid issues\n        // that may result from the 'transitionend' event not firing, as it will never result\n        // in multiple event listeners being registered.\n        this.animationClass = 'animating';\n        this.expandIcon.addEventListener(\n            'transitionend',\n            this.removeAnimatingClass\n        );\n    }\n\n    /** @internal */\n    public onSelectionCheckboxChange(event: CustomEvent): void {\n        if (this.ignoreSelectionChangeEvents) {\n            return;\n        }\n\n        const checkbox = event.target as Checkbox;\n        const checked = checkbox.checked;\n        this.selectionState = checked\n            ? TableRowSelectionState.selected\n            : TableRowSelectionState.notSelected;\n        const detail: TableRowSelectionToggleEventDetail = {\n            oldState: !checked,\n            newState: checked\n        };\n        this.$emit('group-selection-toggle', detail);\n    }\n\n    /** @internal */\n    public getFocusableElements(): TableRowFocusableElements {\n        return {\n            selectionCheckbox: this.selectable\n                ? this.selectionCheckbox\n                : undefined,\n            cells: []\n        };\n    }\n\n    private pinnedColumnOffsetChanged(): void {\n        this.hasPinnedColumns = this.pinnedColumnOffset > 0;\n    }\n\n    private selectionStateChanged(): void {\n        this.setSelectionCheckboxState();\n    }\n\n    private selectionCheckboxChanged(): void {\n        this.setSelectionCheckboxState();\n    }\n\n    private setSelectionCheckboxState(): void {\n        if (this.selectionCheckbox) {\n            this.ignoreSelectionChangeEvents = true;\n            this.selectionCheckbox.checked = this.selectionState === TableRowSelectionState.selected;\n            this.selectionCheckbox.indeterminate = this.selectionState\n                === TableRowSelectionState.partiallySelected;\n            this.ignoreSelectionChangeEvents = false;\n        }\n    }\n\n    private readonly removeAnimatingClass = (): void => {\n        this.animationClass = '';\n        this.expandIcon.removeEventListener(\n            'transitionend',\n            this.removeAnimatingClass\n        );\n    };\n}\n\nconst nimbleTableGroupRow = TableGroupRow.compose({\n    baseName: 'table-group-row',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());\nexport const tableGroupRowTag = 'nimble-table-group-row';\n"]}

package/dist/esm/table/components/group-row/styles.js

@@ -1,13 +1,14 @@
 import { css } from '@ni/fast-element';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { display } from '../../../utilities/style/display';
-import { applicationBackgroundColor, borderHoverColor, borderWidth, controlHeight, fillHoverColor, mediumPadding, standardPadding } from '../../../theme-provider/design-tokens';
+import { applicationBackgroundColor, borderHoverColor, borderWidth, controlHeight, fillHoverColor, mediumPadding, standardPadding, tableRowBorderColor } from '../../../theme-provider/design-tokens';
 import { Theme } from '../../../theme-provider/types';
 import { hexToRgbaCssColor } from '../../../utilities/style/colors';
 import { themeBehavior } from '../../../utilities/style/theme';
 import { userSelectNone } from '../../../utilities/style/user-select';
 import { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';
 import { focusVisible } from '../../../utilities/style/focus';
+import { ZIndexLevels } from '../../../utilities/style/types';
 export const styles = css `
     ${display('grid')}
     ${expandCollapseStyles}
@@ -17,6 +18,7 @@ export const styles = css `
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
         grid-template-columns:
+            calc(var(--ni-private-table-group-row-pinned-column-offset))
             calc(
                 ${controlHeight} *
                     (var(--ni-private-table-group-row-indent-level) + 1)
@@ -26,6 +28,7 @@ export const styles = css `
 
     :host([selectable]) {
         grid-template-columns:
+            calc(var(--ni-private-table-group-row-pinned-column-offset))
             ${controlHeight}
             calc(
                 ${controlHeight} *
@@ -52,6 +55,37 @@ export const styles = css `
         outline-offset: calc(-2 * ${borderWidth});
     }
 
+    :host([has-pinned-columns]) .pinned-column-spacer {
+        display: block;
+        height: 100%;
+        position: sticky;
+        left: 0;
+        background: ${tableRowBorderColor};
+        z-index: ${ZIndexLevels.zIndex1};
+    }
+
+    :host([allow-hover][has-pinned-columns]:hover) .pinned-column-spacer {
+        background: linear-gradient(${fillHoverColor}, ${fillHoverColor}),
+            ${tableRowBorderColor};
+    }
+
+    :host([has-pinned-columns]${focusVisible}) .pinned-column-spacer {
+        box-shadow: inset 2px -2px 0 ${borderHoverColor};
+    }
+
+    .checkbox-container {
+        display: flex;
+    }
+
+    :host([has-pinned-columns]) .checkbox-container {
+        position: relative;
+    }
+
+    :host([allow-hover][has-pinned-columns]:hover) .checkbox-container {
+        background: linear-gradient(${fillHoverColor}, ${fillHoverColor}),
+            ${tableRowBorderColor};
+    }
+
     .expand-collapse-button {
         margin-left: calc(
             ${mediumPadding} + ${standardPadding} * 2 *
@@ -77,10 +111,6 @@ export const styles = css `
         ${userSelectNone}
     }
 
-    .checkbox-container {
-        display: flex;
-    }
-
     .selection-checkbox {
         margin-left: ${standardPadding};
     }
@@ -92,9 +122,65 @@ export const styles = css `
             :host([allow-hover]:hover)::before {
                 background-color: ${hexToRgbaCssColor(White, 0.05)};
             }
+
+            :host([has-pinned-columns]) .pinned-column-spacer {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.1)},
+                        ${hexToRgbaCssColor(White, 0.1)}
+                    ),
+                    ${tableRowBorderColor};
+            }
+
+            :host([allow-hover][has-pinned-columns]:hover) .pinned-column-spacer {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.05)},
+                        ${hexToRgbaCssColor(White, 0.05)}
+                    ),
+                    linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.1)},
+                        ${hexToRgbaCssColor(White, 0.1)}
+                    ),
+                    ${tableRowBorderColor};
+            }
+
+            :host([has-pinned-columns]) .checkbox-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.1)},
+                        ${hexToRgbaCssColor(White, 0.1)}
+                    ),
+                    ${tableRowBorderColor};
+            }
+
+            :host([allow-hover][has-pinned-columns]:hover) .checkbox-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.05)},
+                        ${hexToRgbaCssColor(White, 0.05)}
+                    ),
+                    linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.1)},
+                        ${hexToRgbaCssColor(White, 0.1)}
+                    ),
+                    ${tableRowBorderColor};
+            }
         `), themeBehavior(Theme.dark, css `
             :host([allow-hover]:hover)::before {
                 background-color: ${hexToRgbaCssColor(White, 0.1)};
             }
+
+            :host([allow-hover][has-pinned-columns]:hover) .pinned-column-spacer {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.1)},
+                        ${hexToRgbaCssColor(White, 0.1)}
+                    ),
+                    ${tableRowBorderColor};
+            }
+
+            :host([allow-hover][has-pinned-columns]:hover) .checkbox-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.1)},
+                        ${hexToRgbaCssColor(White, 0.1)}
+                    ),
+                    ${tableRowBorderColor};
+            }
         `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/table/components/group-row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,0BAA0B,EAC1B,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,oBAAoB;;;;uBAIH,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,0BAA0B;;;kBAG7D,aAAa;;;;;;;;cAQjB,aAAa;;kBAET,aAAa;;;;;;;;;kBASb,aAAa;;;;;;;4BAOH,cAAc;;;YAG9B,YAAY;4BACI,WAAW,WAAW,gBAAgB;oCAC9B,WAAW;;;;;cAKjC,aAAa,MAAM,eAAe;;;;;;;;;;;wBAWxB,aAAa;UAC3B,cAAc;;;;;;yBAMC,aAAa;;UAE5B,cAAc;;;;;;;;uBAQD,eAAe;;;;;;CAMrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEzD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    mediumPadding,\n    standardPadding\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 { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\nimport { focusVisible } from '../../../utilities/style/focus';\n\nexport const styles = css`\n    ${display('grid')}\n    ${expandCollapseStyles}\n\n    :host {\n        align-items: center;\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};\n        grid-template-columns:\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host([selectable]) {\n        grid-template-columns:\n            ${controlHeight}\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host([allow-hover]:hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    :host(${focusVisible}) {\n        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};\n        outline-offset: calc(-2 * ${borderWidth});\n    }\n\n    .expand-collapse-button {\n        margin-left: calc(\n            ${mediumPadding} + ${standardPadding} * 2 *\n                var(--ni-private-table-group-row-indent-level)\n        );\n    }\n\n    .group-row-header-content {\n        display: flex;\n        overflow: hidden;\n    }\n\n    .group-header-view {\n        padding-left: ${mediumPadding};\n        ${userSelectNone}\n        overflow: hidden;\n    }\n\n    .group-row-child-count {\n        padding-left: 2px;\n        padding-right: ${mediumPadding};\n        pointer-events: none;\n        ${userSelectNone}\n    }\n\n    .checkbox-container {\n        display: flex;\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host([allow-hover]:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host([allow-hover]:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.1)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    mediumPadding,\n    standardPadding,\n    tableRowBorderColor\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 { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\nimport { focusVisible } from '../../../utilities/style/focus';\nimport { ZIndexLevels } from '../../../utilities/style/types';\n\nexport const styles = css`\n    ${display('grid')}\n    ${expandCollapseStyles}\n\n    :host {\n        align-items: center;\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};\n        grid-template-columns:\n            calc(var(--ni-private-table-group-row-pinned-column-offset))\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host([selectable]) {\n        grid-template-columns:\n            calc(var(--ni-private-table-group-row-pinned-column-offset))\n            ${controlHeight}\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host([allow-hover]:hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    :host(${focusVisible}) {\n        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};\n        outline-offset: calc(-2 * ${borderWidth});\n    }\n\n    :host([has-pinned-columns]) .pinned-column-spacer {\n        display: block;\n        height: 100%;\n        position: sticky;\n        left: 0;\n        background: ${tableRowBorderColor};\n        z-index: ${ZIndexLevels.zIndex1};\n    }\n\n    :host([allow-hover][has-pinned-columns]:hover) .pinned-column-spacer {\n        background: linear-gradient(${fillHoverColor}, ${fillHoverColor}),\n            ${tableRowBorderColor};\n    }\n\n    :host([has-pinned-columns]${focusVisible}) .pinned-column-spacer {\n        box-shadow: inset 2px -2px 0 ${borderHoverColor};\n    }\n\n    .checkbox-container {\n        display: flex;\n    }\n\n    :host([has-pinned-columns]) .checkbox-container {\n        position: relative;\n    }\n\n    :host([allow-hover][has-pinned-columns]:hover) .checkbox-container {\n        background: linear-gradient(${fillHoverColor}, ${fillHoverColor}),\n            ${tableRowBorderColor};\n    }\n\n    .expand-collapse-button {\n        margin-left: calc(\n            ${mediumPadding} + ${standardPadding} * 2 *\n                var(--ni-private-table-group-row-indent-level)\n        );\n    }\n\n    .group-row-header-content {\n        display: flex;\n        overflow: hidden;\n    }\n\n    .group-header-view {\n        padding-left: ${mediumPadding};\n        ${userSelectNone}\n        overflow: hidden;\n    }\n\n    .group-row-child-count {\n        padding-left: 2px;\n        padding-right: ${mediumPadding};\n        pointer-events: none;\n        ${userSelectNone}\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host([allow-hover]:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n\n            :host([has-pinned-columns]) .pinned-column-spacer {\n                background: linear-gradient(\n                        ${hexToRgbaCssColor(White, 0.1)},\n                        ${hexToRgbaCssColor(White, 0.1)}\n                    ),\n                    ${tableRowBorderColor};\n            }\n\n            :host([allow-hover][has-pinned-columns]:hover) .pinned-column-spacer {\n                background: linear-gradient(\n                        ${hexToRgbaCssColor(White, 0.05)},\n                        ${hexToRgbaCssColor(White, 0.05)}\n                    ),\n                    linear-gradient(\n                        ${hexToRgbaCssColor(White, 0.1)},\n                        ${hexToRgbaCssColor(White, 0.1)}\n                    ),\n                    ${tableRowBorderColor};\n            }\n\n            :host([has-pinned-columns]) .checkbox-container {\n                background: linear-gradient(\n                        ${hexToRgbaCssColor(White, 0.1)},\n                        ${hexToRgbaCssColor(White, 0.1)}\n                    ),\n                    ${tableRowBorderColor};\n            }\n\n            :host([allow-hover][has-pinned-columns]:hover) .checkbox-container {\n                background: linear-gradient(\n                        ${hexToRgbaCssColor(White, 0.05)},\n                        ${hexToRgbaCssColor(White, 0.05)}\n                    ),\n                    linear-gradient(\n                        ${hexToRgbaCssColor(White, 0.1)},\n                        ${hexToRgbaCssColor(White, 0.1)}\n                    ),\n                    ${tableRowBorderColor};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host([allow-hover]:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.1)};\n            }\n\n            :host([allow-hover][has-pinned-columns]:hover) .pinned-column-spacer {\n                background: linear-gradient(\n                        ${hexToRgbaCssColor(White, 0.1)},\n                        ${hexToRgbaCssColor(White, 0.1)}\n                    ),\n                    ${tableRowBorderColor};\n            }\n\n            :host([allow-hover][has-pinned-columns]:hover) .checkbox-container {\n                background: linear-gradient(\n                        ${hexToRgbaCssColor(White, 0.1)},\n                        ${hexToRgbaCssColor(White, 0.1)}\n                    ),\n                    ${tableRowBorderColor};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/table/components/group-row/template.js

@@ -9,8 +9,13 @@ export const template = html `
         role="row"
         @click=${x => x.onGroupExpandToggle()}
         aria-expanded=${x => x.expanded}
-        style="--ni-private-table-group-row-indent-level: ${x => x.nestingLevel};"
+        style="
+            --ni-private-table-group-row-indent-level: ${x => x.nestingLevel};
+            --ni-private-table-group-row-pinned-column-offset: ${x => x.pinnedColumnOffset}px;
+        "
     >
+        <span class="pinned-column-spacer"></span>
+
         ${when(x => x.selectable, html `
             <span role="gridcell" class="checkbox-container">
                 <${checkboxTag}

package/dist/esm/table/components/group-row/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACH,uBAAuB,EACvB,qBAAqB,EACrB,wBAAwB,EAC3B,MAAM,4CAA4C,CAAC;AAEpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAe;;;iBAG1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;wBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;4DACqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;;UAErE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI,CAAe;;mBAElC,WAAW;sBACR,GAAG,CAAC,mBAAmB,CAAC;;+BAEf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAoB,CAAC;8BAC9D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE;6BACpC,CAAC,CAAC,EAAE,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC;kCACvC,CAAC,CAAC,EAAE,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC;;oBAE1D,WAAW;;SAEtB,CAAC;;;eAGK,SAAS;8BACM,gBAAgB,CAAC,KAAK;;;;yBAI3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;;;mBAGvG,yBAAyB,IAAI,GAAG,CAAC,YAAY,CAAC,sCAAsC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,OAAO,yBAAyB;gBAC5I,SAAS;;;;cAIX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,eAAe,CAAC,uBAAuB;mDACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;;;CAG5E,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport type { TableGroupRow } from '.';\nimport { buttonTag } from '../../../button';\nimport { ButtonAppearance } from '../../../button/types';\nimport { iconArrowExpanderRightTag } from '../../../icons/arrow-expander-right';\nimport { checkboxTag } from '../../../checkbox';\nimport {\n    tableGroupCollapseLabel,\n    tableGroupExpandLabel,\n    tableGroupSelectAllLabel\n} from '../../../label-provider/table/label-tokens';\n\nexport const template = html<TableGroupRow>`\n    <template\n        role=\"row\"\n        @click=${x => x.onGroupExpandToggle()}\n        aria-expanded=${x => x.expanded}\n        style=\"--ni-private-table-group-row-indent-level: ${x => x.nestingLevel};\"\n    >\n        ${when(x => x.selectable, html<TableGroupRow>`\n            <span role=\"gridcell\" class=\"checkbox-container\">\n                <${checkboxTag}\n                    ${ref('selectionCheckbox')}\n                    class=\"selection-checkbox\"\n                    @change=\"${(x, c) => x.onSelectionCheckboxChange(c.event as CustomEvent)}\"\n                    @click=\"${(_, c) => c.event.stopPropagation()}\"\n                    title=\"${x => tableGroupSelectAllLabel.getValueFor(x)}\"\n                    aria-label=\"${x => tableGroupSelectAllLabel.getValueFor(x)}\"\n                >\n                </${checkboxTag}>\n            </span>\n        `)}\n\n        <span role=\"gridcell\">\n            <${buttonTag}\n                appearance=\"${ButtonAppearance.ghost}\"\n                content-hidden\n                class=\"expand-collapse-button\"\n                tabindex=\"-1\"\n                title=\"${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}\"\n                aria-hidden=\"true\"\n            >\n                <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot=\"start\" class=\"expander-icon ${x => x.animationClass}\"></${iconArrowExpanderRightTag}>\n            </${buttonTag}>\n        </span>\n\n        <div class=\"group-row-header-content\">\n            ${x => x.groupColumn?.columnInternals.groupHeaderViewTemplate}\n            <span class=\"group-row-child-count\">(${x => x.immediateChildCount})</span>\n        </div>\n    </template>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACH,uBAAuB,EACvB,qBAAqB,EACrB,wBAAwB,EAC3B,MAAM,4CAA4C,CAAC;AAEpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAe;;;iBAG1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;wBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;yDAEkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;iEACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB;;;;;UAKhF,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI,CAAe;;mBAElC,WAAW;sBACR,GAAG,CAAC,mBAAmB,CAAC;;+BAEf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAoB,CAAC;8BAC9D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE;6BACpC,CAAC,CAAC,EAAE,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC;kCACvC,CAAC,CAAC,EAAE,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC;;oBAE1D,WAAW;;SAEtB,CAAC;;;eAGK,SAAS;8BACM,gBAAgB,CAAC,KAAK;;;;yBAI3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;;;mBAGvG,yBAAyB,IAAI,GAAG,CAAC,YAAY,CAAC,sCAAsC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,OAAO,yBAAyB;gBAC5I,SAAS;;;;cAIX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,eAAe,CAAC,uBAAuB;mDACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;;;CAG5E,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport type { TableGroupRow } from '.';\nimport { buttonTag } from '../../../button';\nimport { ButtonAppearance } from '../../../button/types';\nimport { iconArrowExpanderRightTag } from '../../../icons/arrow-expander-right';\nimport { checkboxTag } from '../../../checkbox';\nimport {\n    tableGroupCollapseLabel,\n    tableGroupExpandLabel,\n    tableGroupSelectAllLabel\n} from '../../../label-provider/table/label-tokens';\n\nexport const template = html<TableGroupRow>`\n    <template\n        role=\"row\"\n        @click=${x => x.onGroupExpandToggle()}\n        aria-expanded=${x => x.expanded}\n        style=\"\n            --ni-private-table-group-row-indent-level: ${x => x.nestingLevel};\n            --ni-private-table-group-row-pinned-column-offset: ${x => x.pinnedColumnOffset}px;\n        \"\n    >\n        <span class=\"pinned-column-spacer\"></span>\n\n        ${when(x => x.selectable, html<TableGroupRow>`\n            <span role=\"gridcell\" class=\"checkbox-container\">\n                <${checkboxTag}\n                    ${ref('selectionCheckbox')}\n                    class=\"selection-checkbox\"\n                    @change=\"${(x, c) => x.onSelectionCheckboxChange(c.event as CustomEvent)}\"\n                    @click=\"${(_, c) => c.event.stopPropagation()}\"\n                    title=\"${x => tableGroupSelectAllLabel.getValueFor(x)}\"\n                    aria-label=\"${x => tableGroupSelectAllLabel.getValueFor(x)}\"\n                >\n                </${checkboxTag}>\n            </span>\n        `)}\n\n        <span role=\"gridcell\">\n            <${buttonTag}\n                appearance=\"${ButtonAppearance.ghost}\"\n                content-hidden\n                class=\"expand-collapse-button\"\n                tabindex=\"-1\"\n                title=\"${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}\"\n                aria-hidden=\"true\"\n            >\n                <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot=\"start\" class=\"expander-icon ${x => x.animationClass}\"></${iconArrowExpanderRightTag}>\n            </${buttonTag}>\n        </span>\n\n        <div class=\"group-row-header-content\">\n            ${x => x.groupColumn?.columnInternals.groupHeaderViewTemplate}\n            <span class=\"group-row-child-count\">(${x => x.immediateChildCount})</span>\n        </div>\n    </template>\n`;\n"]}

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

@@ -3,6 +3,7 @@ import { Observable, attr, observable, volatile } from '@ni/fast-element';
 import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
+import { TableColumnPinLocation } from '../../types';
 import { tableCellTag } from '../cell';
 import { ColumnInternals, isColumnInternalsProperty } from '../../../table-column/base/models/column-internals';
 /**
@@ -181,8 +182,9 @@ export class TableRow extends FoundationElement {
         this.updateCellIndentLevels();
     }
     updateCellIndentLevels() {
+        const firstNonPinnedIndex = this.columns.findIndex(col => col.columnInternals.pinLocation !== TableColumnPinLocation.left);
         this.cellIndentLevels = this.columns.map((_, i) => {
-            return i === 0 ? this.nestingLevel : 0;
+            return i === firstNonPinnedIndex ? this.nestingLevel : 0;
         });
     }
     removeColumnObservers() {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    type Notifier,\n    Observable,\n    attr,\n    observable,\n    volatile\n} from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { TableCellState } from '../../../table-column/base/types';\nimport type {\n    CellViewSlotRequestEventDetail,\n    RowSlotRequestEventDetail,\n    TableActionMenuToggleEventDetail,\n    TableFieldName,\n    TableRecord,\n    TableRowExpansionToggleEventDetail,\n    TableRowFocusableElements,\n    TableRowSelectionToggleEventDetail\n} from '../../types';\nimport type { TableColumn } from '../../../table-column/base';\nimport type { MenuButtonToggleEventDetail } from '../../../menu-button/types';\nimport { tableCellTag } from '../cell';\nimport {\n    ColumnInternals,\n    isColumnInternalsProperty\n} from '../../../table-column/base/models/column-internals';\nimport type { Checkbox } from '../../../checkbox';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-row': TableRow;\n    }\n}\n\n/** Represents a single row (element) in the Table's data  */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface TableDataRecord extends TableRecord {}\n\n/**\n * A styled row that is used within the nimble-table.\n * @internal\n */\nexport class TableRow<\n    TDataRecord extends TableDataRecord = TableDataRecord\n> extends FoundationElement {\n    @attr({ attribute: 'record-id' })\n    public recordId?: string;\n\n    @attr({ mode: 'boolean' })\n    public selectable = false;\n\n    @attr({ mode: 'boolean' })\n    public selected = false;\n\n    @attr({ attribute: 'hide-selection', mode: 'boolean' })\n    public hideSelection = false;\n\n    @attr({ mode: 'boolean' })\n    public expanded = false;\n\n    @attr({ attribute: 'reserve-collapse-space', mode: 'boolean' })\n    public reserveCollapseSpace = false;\n\n    @observable\n    public dataRecord?: TDataRecord;\n\n    /**\n     * @internal\n     * */\n    public columnNotifiers: Notifier[] = [];\n\n    @observable\n    public columns: TableColumn[] = [];\n\n    @observable\n    public currentActionMenuColumn?: TableColumn;\n\n    @observable\n    public nestingLevel = 0;\n\n    /**\n     * Row index in the flattened set of all regular and group header rows.\n     * Represents the index in table.tableData (TableRowState[]).\n     */\n    @observable\n    public resolvedRowIndex?: number;\n\n    @attr({ attribute: 'is-parent-row', mode: 'boolean' })\n    public isParentRow = false;\n\n    @attr({ attribute: 'menu-open', mode: 'boolean' })\n    public menuOpen = false;\n\n    @attr({ attribute: 'row-operation-grid-cell-hidden', mode: 'boolean' })\n    public rowOperationGridCellHidden = false;\n\n    @attr({ mode: 'boolean' })\n    public loading = false;\n\n    /**\n     * @internal\n     * An array that parallels the `columns` array and contains the indent\n     * level of each column's cell.\n     * */\n    @observable\n    public cellIndentLevels: number[] = [];\n\n    /**\n     * @internal\n     * An array that parallels the `columns` array and contains the cell state\n     * of each column's cell.\n     * */\n    @observable\n    public cellStates: (TableCellState | undefined)[] = [];\n\n    /** @internal */\n    @observable\n    public readonly selectionCheckbox?: Checkbox;\n\n    /** @internal */\n    public readonly cellContainer!: HTMLSpanElement;\n\n    /**\n     * @internal\n     */\n    public readonly expandIcon?: HTMLElement;\n\n    /**\n     * @internal\n     */\n    @observable\n    public animationClass = '';\n\n    /**\n     * @internal\n     */\n    @attr({ attribute: 'allow-hover', mode: 'boolean' })\n    public allowHover = false;\n\n    @volatile\n    public get isTopLevelParentRow(): boolean {\n        return this.isParentRow && this.nestingLevel === 0;\n    }\n\n    @volatile\n    public get isNestedParent(): boolean {\n        return this.isParentRow && this.nestingLevel > 0;\n    }\n\n    /** @internal */\n    @volatile\n    public get showSelectionCheckbox(): boolean {\n        return this.selectable && !this.hideSelection;\n    }\n\n    // Programmatically updating the selection state of a checkbox fires the 'change' event.\n    // Therefore, selection change events that occur due to programmatically updating\n    // the selection checkbox 'checked' value should be ingored.\n    // https://github.com/ni/nimble/issues/2739\n    private ignoreSelectionChangeEvents = false;\n\n    @volatile\n    public override get ariaSelected(): 'true' | 'false' | null {\n        if (this.selectable) {\n            return this.selected ? 'true' : 'false';\n        }\n\n        return null;\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.removeColumnObservers();\n    }\n\n    /** @internal */\n    public onSelectionCheckboxChange(event: CustomEvent): void {\n        if (this.ignoreSelectionChangeEvents) {\n            return;\n        }\n\n        const checkbox = event.target as Checkbox;\n        const checked = checkbox.checked;\n        this.onSelectionChange(!checked, checked);\n    }\n\n    /** @internal */\n    public onSelectionChange(oldState: boolean, newState: boolean): void {\n        this.selected = newState;\n        const detail: TableRowSelectionToggleEventDetail = {\n            oldState,\n            newState\n        };\n        this.$emit('row-selection-toggle', detail);\n    }\n\n    /** @internal */\n    public onCellActionMenuBeforeToggle(\n        event: CustomEvent<MenuButtonToggleEventDetail>,\n        column: TableColumn\n    ): void {\n        this.currentActionMenuColumn = column;\n        this.emitActionMenuToggleEvent(\n            'row-action-menu-beforetoggle',\n            event.detail,\n            column\n        );\n    }\n\n    /** @internal */\n    public onCellActionMenuToggle(\n        event: CustomEvent<MenuButtonToggleEventDetail>,\n        column: TableColumn\n    ): void {\n        this.menuOpen = event.detail.newState;\n        this.emitActionMenuToggleEvent(\n            'row-action-menu-toggle',\n            event.detail,\n            column\n        );\n    }\n\n    /** @internal */\n    public handleChange(source: unknown, args: unknown): void {\n        if (\n            source instanceof ColumnInternals\n            && typeof args === 'string'\n            && (isColumnInternalsProperty(args, 'columnConfig')\n                || isColumnInternalsProperty(args, 'dataRecordFieldNames'))\n        ) {\n            this.updateCellStates();\n        }\n    }\n\n    /** @internal */\n    public getFocusableElements(): TableRowFocusableElements {\n        return {\n            selectionCheckbox: this.showSelectionCheckbox\n                ? this.selectionCheckbox\n                : undefined,\n            cells: Array.from(\n                this.cellContainer.querySelectorAll(tableCellTag)\n            ).map(cell => ({\n                cell,\n                actionMenuButton: cell.hasActionMenu\n                    ? cell.actionMenuButton\n                    : undefined\n            }))\n        };\n    }\n\n    public onRowExpandToggle(event?: Event): void {\n        const expandEventDetail: TableRowExpansionToggleEventDetail = {\n            oldState: this.expanded,\n            newState: !this.expanded,\n            recordId: this.recordId!\n        };\n        this.$emit('row-expand-toggle', expandEventDetail);\n        event?.stopImmediatePropagation();\n        // To avoid a visual glitch with improper expand/collapse icons performing an\n        // animation (due to visual re-use apparently), we apply a class to the\n        // contained expand-collapse button temporarily. We use the 'transitionend' event\n        // to remove the temporary class and register a function reference as the handler\n        // to avoid issues that may result from the 'transitionend' event not firing, as it\n        // will never result in multiple event listeners being registered.\n        this.animationClass = 'animating';\n        this.expandIcon?.addEventListener(\n            'transitionend',\n            this.removeAnimatingClass\n        );\n    }\n\n    public onCellViewSlotsRequest(\n        column: TableColumn,\n        event: CustomEvent<CellViewSlotRequestEventDetail>\n    ): void {\n        event.stopImmediatePropagation();\n        if (typeof this.recordId !== 'string') {\n            // The recordId is expected to be defined on any row that can be interacted with, but if\n            // it isn't defined, nothing can be done with the request to slot content into the row.\n            return;\n        }\n\n        const eventDetails: RowSlotRequestEventDetail = {\n            recordId: this.recordId,\n            columnInternalId: column.columnInternals.uniqueId,\n            slots: event.detail.slots\n        };\n        this.$emit('row-slots-request', eventDetails);\n    }\n\n    private readonly removeAnimatingClass = (): void => {\n        this.animationClass = '';\n        this.expandIcon?.removeEventListener(\n            'transitionend',\n            this.removeAnimatingClass\n        );\n    };\n\n    private emitActionMenuToggleEvent(\n        eventType: string,\n        menuButtonEventDetail: MenuButtonToggleEventDetail,\n        column: TableColumn\n    ): void {\n        const detail: TableActionMenuToggleEventDetail = {\n            newState: menuButtonEventDetail.newState,\n            oldState: menuButtonEventDetail.oldState,\n            recordIds: [this.recordId!],\n            operatingRecordId: this.recordId!,\n            columnId: column.columnId\n        };\n        this.$emit(eventType, detail);\n    }\n\n    private columnsChanged(): void {\n        this.updateCellIndentLevels();\n        this.updateCellStates();\n\n        this.observeColumns();\n    }\n\n    private dataRecordChanged(): void {\n        this.updateCellStates();\n    }\n\n    private nestingLevelChanged(): void {\n        this.updateCellIndentLevels();\n    }\n\n    private updateCellIndentLevels(): void {\n        this.cellIndentLevels = this.columns.map((_, i) => {\n            return i === 0 ? this.nestingLevel : 0;\n        });\n    }\n\n    private removeColumnObservers(): void {\n        this.columnNotifiers.forEach(notifier => {\n            notifier.unsubscribe(this);\n        });\n        this.columnNotifiers = [];\n    }\n\n    private observeColumns(): void {\n        this.removeColumnObservers();\n\n        this.columnNotifiers = this.columns.map(column => {\n            const notifier = Observable.getNotifier(column.columnInternals);\n            notifier.subscribe(this);\n            return notifier;\n        });\n    }\n\n    private updateCellStates(): void {\n        this.cellStates = this.columns.map(column => {\n            const fieldNames = column.columnInternals.dataRecordFieldNames;\n            let cellState: TableCellState | undefined;\n            if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {\n                const cellDataValues = fieldNames.map(\n                    field => this.dataRecord![field]\n                );\n                const cellRecord = Object.fromEntries(\n                    column.columnInternals.cellRecordFieldNames.map((k, j) => [\n                        k,\n                        cellDataValues[j]\n                    ])\n                );\n                const columnConfig = column.columnInternals.columnConfig;\n                cellState = {\n                    cellRecord,\n                    columnConfig\n                };\n            }\n            return cellState;\n        });\n    }\n\n    private hasValidFieldNames(\n        keys: readonly (TableFieldName | undefined)[]\n    ): keys is TableFieldName[] {\n        return keys.every(key => key !== undefined);\n    }\n\n    private selectedChanged(): void {\n        this.setSelectionCheckboxState();\n    }\n\n    private selectionCheckboxChanged(): void {\n        this.setSelectionCheckboxState();\n    }\n\n    private setSelectionCheckboxState(): void {\n        if (this.selectionCheckbox) {\n            this.ignoreSelectionChangeEvents = true;\n            this.selectionCheckbox.checked = this.selected;\n            this.ignoreSelectionChangeEvents = false;\n        }\n    }\n}\n\nconst nimbleTableRow = TableRow.compose({\n    baseName: 'table-row',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());\nexport const tableRowTag = 'nimble-table-row';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAEH,UAAU,EACV,IAAI,EACJ,UAAU,EACV,QAAQ,EACX,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAatC,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EACH,eAAe,EACf,yBAAyB,EAC5B,MAAM,oDAAoD,CAAC;AAa5D;;;GAGG;AACH,MAAM,OAAO,QAEX,SAAQ,iBAAiB;IAF3B;;QAOW,eAAU,GAAG,KAAK,CAAC;QAGnB,aAAQ,GAAG,KAAK,CAAC;QAGjB,kBAAa,GAAG,KAAK,CAAC;QAGtB,aAAQ,GAAG,KAAK,CAAC;QAGjB,yBAAoB,GAAG,KAAK,CAAC;QAKpC;;aAEK;QACE,oBAAe,GAAe,EAAE,CAAC;QAGjC,YAAO,GAAkB,EAAE,CAAC;QAM5B,iBAAY,GAAG,CAAC,CAAC;QAUjB,gBAAW,GAAG,KAAK,CAAC;QAGpB,aAAQ,GAAG,KAAK,CAAC;QAGjB,+BAA0B,GAAG,KAAK,CAAC;QAGnC,YAAO,GAAG,KAAK,CAAC;QAEvB;;;;aAIK;QAEE,qBAAgB,GAAa,EAAE,CAAC;QAEvC;;;;aAIK;QAEE,eAAU,GAAmC,EAAE,CAAC;QAcvD;;WAEG;QAEI,mBAAc,GAAG,EAAE,CAAC;QAE3B;;WAEG;QAEI,eAAU,GAAG,KAAK,CAAC;QAkB1B,wFAAwF;QACxF,iFAAiF;QACjF,4DAA4D;QAC5D,2CAA2C;QACnC,gCAA2B,GAAG,KAAK,CAAC;QAoI3B,yBAAoB,GAAG,GAAS,EAAE;YAC/C,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;YACzB,IAAI,CAAC,UAAU,EAAE,mBAAmB,CAChC,eAAe,EACf,IAAI,CAAC,oBAAoB,CAC5B,CAAC;QACN,CAAC,CAAC;IAuGN,CAAC;IApQG,IAAW,mBAAmB;QAC1B,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC;IACvD,CAAC;IAGD,IAAW,cAAc;QACrB,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;IACrD,CAAC;IAED,gBAAgB;IAEhB,IAAW,qBAAqB;QAC5B,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;IAClD,CAAC;IASD,IAAoB,YAAY;QAC5B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAC5C,CAAC;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAEe,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IACjC,CAAC;IAED,gBAAgB;IACT,yBAAyB,CAAC,KAAkB;QAC/C,IAAI,IAAI,CAAC,2BAA2B,EAAE,CAAC;YACnC,OAAO;QACX,CAAC;QAED,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAkB,CAAC;QAC1C,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,iBAAiB,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC9C,CAAC;IAED,gBAAgB;IACT,iBAAiB,CAAC,QAAiB,EAAE,QAAiB;QACzD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,MAAM,MAAM,GAAuC;YAC/C,QAAQ;YACR,QAAQ;SACX,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;IAC/C,CAAC;IAED,gBAAgB;IACT,4BAA4B,CAC/B,KAA+C,EAC/C,MAAmB;QAEnB,IAAI,CAAC,uBAAuB,GAAG,MAAM,CAAC;QACtC,IAAI,CAAC,yBAAyB,CAC1B,8BAA8B,EAC9B,KAAK,CAAC,MAAM,EACZ,MAAM,CACT,CAAC;IACN,CAAC;IAED,gBAAgB;IACT,sBAAsB,CACzB,KAA+C,EAC/C,MAAmB;QAEnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,yBAAyB,CAC1B,wBAAwB,EACxB,KAAK,CAAC,MAAM,EACZ,MAAM,CACT,CAAC;IACN,CAAC;IAED,gBAAgB;IACT,YAAY,CAAC,MAAe,EAAE,IAAa;QAC9C,IACI,MAAM,YAAY,eAAe;eAC9B,OAAO,IAAI,KAAK,QAAQ;eACxB,CAAC,yBAAyB,CAAC,IAAI,EAAE,cAAc,CAAC;mBAC5C,yBAAyB,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAC,EACjE,CAAC;YACC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC5B,CAAC;IACL,CAAC;IAED,gBAAgB;IACT,oBAAoB;QACvB,OAAO;YACH,iBAAiB,EAAE,IAAI,CAAC,qBAAqB;gBACzC,CAAC,CAAC,IAAI,CAAC,iBAAiB;gBACxB,CAAC,CAAC,SAAS;YACf,KAAK,EAAE,KAAK,CAAC,IAAI,CACb,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,CAAC,CACpD,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACX,IAAI;gBACJ,gBAAgB,EAAE,IAAI,CAAC,aAAa;oBAChC,CAAC,CAAC,IAAI,CAAC,gBAAgB;oBACvB,CAAC,CAAC,SAAS;aAClB,CAAC,CAAC;SACN,CAAC;IACN,CAAC;IAEM,iBAAiB,CAAC,KAAa;QAClC,MAAM,iBAAiB,GAAuC;YAC1D,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;YACxB,QAAQ,EAAE,IAAI,CAAC,QAAS;SAC3B,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;QACnD,KAAK,EAAE,wBAAwB,EAAE,CAAC;QAClC,6EAA6E;QAC7E,uEAAuE;QACvE,iFAAiF;QACjF,iFAAiF;QACjF,mFAAmF;QACnF,kEAAkE;QAClE,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;QAClC,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAC7B,eAAe,EACf,IAAI,CAAC,oBAAoB,CAC5B,CAAC;IACN,CAAC;IAEM,sBAAsB,CACzB,MAAmB,EACnB,KAAkD;QAElD,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACjC,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACpC,wFAAwF;YACxF,uFAAuF;YACvF,OAAO;QACX,CAAC;QAED,MAAM,YAAY,GAA8B;YAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,gBAAgB,EAAE,MAAM,CAAC,eAAe,CAAC,QAAQ;YACjD,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;SAC5B,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;IAClD,CAAC;IAUO,yBAAyB,CAC7B,SAAiB,EACjB,qBAAkD,EAClD,MAAmB;QAEnB,MAAM,MAAM,GAAqC;YAC7C,QAAQ,EAAE,qBAAqB,CAAC,QAAQ;YACxC,QAAQ,EAAE,qBAAqB,CAAC,QAAQ;YACxC,SAAS,EAAE,CAAC,IAAI,CAAC,QAAS,CAAC;YAC3B,iBAAiB,EAAE,IAAI,CAAC,QAAS;YACjC,QAAQ,EAAE,MAAM,CAAC,QAAQ;SAC5B,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAClC,CAAC;IAEO,cAAc;QAClB,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAEO,iBAAiB;QACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC5B,CAAC;IAEO,mBAAmB;QACvB,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAClC,CAAC;IAEO,sBAAsB;QAC1B,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAC9C,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,WAAW,KAAK,sBAAsB,CAAC,IAAI,CACzE,CAAC;QACF,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YAC9C,OAAO,CAAC,KAAK,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,qBAAqB;QACzB,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YACpC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;IAC9B,CAAC;IAEO,cAAc;QAClB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC7C,MAAM,QAAQ,GAAG,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;YAChE,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YACzB,OAAO,QAAQ,CAAC;QACpB,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,gBAAgB;QACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACxC,MAAM,UAAU,GAAG,MAAM,CAAC,eAAe,CAAC,oBAAoB,CAAC;YAC/D,IAAI,SAAqC,CAAC;YAC1C,IAAI,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACzD,MAAM,cAAc,GAAG,UAAU,CAAC,GAAG,CACjC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAW,CAAC,KAAK,CAAC,CACnC,CAAC;gBACF,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACjC,MAAM,CAAC,eAAe,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;oBACtD,CAAC;oBACD,cAAc,CAAC,CAAC,CAAC;iBACpB,CAAC,CACL,CAAC;gBACF,MAAM,YAAY,GAAG,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC;gBACzD,SAAS,GAAG;oBACR,UAAU;oBACV,YAAY;iBACf,CAAC;YACN,CAAC;YACD,OAAO,SAAS,CAAC;QACrB,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,kBAAkB,CACtB,IAA6C;QAE7C,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC;IAChD,CAAC;IAEO,eAAe;QACnB,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACrC,CAAC;IAEO,wBAAwB;QAC5B,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACrC,CAAC;IAEO,yBAAyB;QAC7B,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;YACxC,IAAI,CAAC,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC/C,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;QAC7C,CAAC;IACL,CAAC;CACJ;AAlWU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;0CACR;AAGlB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACA;AAGnB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;0CACF;AAGjB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CAC1B;AAGtB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;0CACF;AAGjB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sDAC3B;AAG7B;IADN,UAAU;4CACqB;AAQzB;IADN,UAAU;yCACwB;AAG5B;IADN,UAAU;yDACkC;AAGtC;IADN,UAAU;8CACa;AAOjB;IADN,UAAU;kDACsB;AAG1B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC3B;AAGpB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;0CAC1B;AAGjB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gCAAgC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4DAC7B;AAGnC;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;yCACH;AAQhB;IADN,UAAU;kDAC4B;AAQhC;IADN,UAAU;4CAC4C;AAIvC;IADf,UAAU;mDACkC;AActC;IADN,UAAU;gDACgB;AAMpB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CAC1B;AAG1B;IADC,QAAQ;mDAGR;AAGD;IADC,QAAQ;8CAGR;AAID;IADC,QAAQ;qDAGR;AASD;IADC,QAAQ;4CAOR;AA0OL,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC","sourcesContent":["import {\n    type Notifier,\n    Observable,\n    attr,\n    observable,\n    volatile\n} from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { TableCellState } from '../../../table-column/base/types';\nimport type {\n    CellViewSlotRequestEventDetail,\n    RowSlotRequestEventDetail,\n    TableActionMenuToggleEventDetail,\n    TableFieldName,\n    TableRecord,\n    TableRowExpansionToggleEventDetail,\n    TableRowFocusableElements,\n    TableRowSelectionToggleEventDetail\n} from '../../types';\nimport type { TableColumn } from '../../../table-column/base';\nimport { TableColumnPinLocation } from '../../types';\nimport type { MenuButtonToggleEventDetail } from '../../../menu-button/types';\nimport { tableCellTag } from '../cell';\nimport {\n    ColumnInternals,\n    isColumnInternalsProperty\n} from '../../../table-column/base/models/column-internals';\nimport type { Checkbox } from '../../../checkbox';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-row': TableRow;\n    }\n}\n\n/** Represents a single row (element) in the Table's data  */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface TableDataRecord extends TableRecord {}\n\n/**\n * A styled row that is used within the nimble-table.\n * @internal\n */\nexport class TableRow<\n    TDataRecord extends TableDataRecord = TableDataRecord\n> extends FoundationElement {\n    @attr({ attribute: 'record-id' })\n    public recordId?: string;\n\n    @attr({ mode: 'boolean' })\n    public selectable = false;\n\n    @attr({ mode: 'boolean' })\n    public selected = false;\n\n    @attr({ attribute: 'hide-selection', mode: 'boolean' })\n    public hideSelection = false;\n\n    @attr({ mode: 'boolean' })\n    public expanded = false;\n\n    @attr({ attribute: 'reserve-collapse-space', mode: 'boolean' })\n    public reserveCollapseSpace = false;\n\n    @observable\n    public dataRecord?: TDataRecord;\n\n    /**\n     * @internal\n     * */\n    public columnNotifiers: Notifier[] = [];\n\n    @observable\n    public columns: TableColumn[] = [];\n\n    @observable\n    public currentActionMenuColumn?: TableColumn;\n\n    @observable\n    public nestingLevel = 0;\n\n    /**\n     * Row index in the flattened set of all regular and group header rows.\n     * Represents the index in table.tableData (TableRowState[]).\n     */\n    @observable\n    public resolvedRowIndex?: number;\n\n    @attr({ attribute: 'is-parent-row', mode: 'boolean' })\n    public isParentRow = false;\n\n    @attr({ attribute: 'menu-open', mode: 'boolean' })\n    public menuOpen = false;\n\n    @attr({ attribute: 'row-operation-grid-cell-hidden', mode: 'boolean' })\n    public rowOperationGridCellHidden = false;\n\n    @attr({ mode: 'boolean' })\n    public loading = false;\n\n    /**\n     * @internal\n     * An array that parallels the `columns` array and contains the indent\n     * level of each column's cell.\n     * */\n    @observable\n    public cellIndentLevels: number[] = [];\n\n    /**\n     * @internal\n     * An array that parallels the `columns` array and contains the cell state\n     * of each column's cell.\n     * */\n    @observable\n    public cellStates: (TableCellState | undefined)[] = [];\n\n    /** @internal */\n    @observable\n    public readonly selectionCheckbox?: Checkbox;\n\n    /** @internal */\n    public readonly cellContainer!: HTMLSpanElement;\n\n    /**\n     * @internal\n     */\n    public readonly expandIcon?: HTMLElement;\n\n    /**\n     * @internal\n     */\n    @observable\n    public animationClass = '';\n\n    /**\n     * @internal\n     */\n    @attr({ attribute: 'allow-hover', mode: 'boolean' })\n    public allowHover = false;\n\n    @volatile\n    public get isTopLevelParentRow(): boolean {\n        return this.isParentRow && this.nestingLevel === 0;\n    }\n\n    @volatile\n    public get isNestedParent(): boolean {\n        return this.isParentRow && this.nestingLevel > 0;\n    }\n\n    /** @internal */\n    @volatile\n    public get showSelectionCheckbox(): boolean {\n        return this.selectable && !this.hideSelection;\n    }\n\n    // Programmatically updating the selection state of a checkbox fires the 'change' event.\n    // Therefore, selection change events that occur due to programmatically updating\n    // the selection checkbox 'checked' value should be ingored.\n    // https://github.com/ni/nimble/issues/2739\n    private ignoreSelectionChangeEvents = false;\n\n    @volatile\n    public override get ariaSelected(): 'true' | 'false' | null {\n        if (this.selectable) {\n            return this.selected ? 'true' : 'false';\n        }\n\n        return null;\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.removeColumnObservers();\n    }\n\n    /** @internal */\n    public onSelectionCheckboxChange(event: CustomEvent): void {\n        if (this.ignoreSelectionChangeEvents) {\n            return;\n        }\n\n        const checkbox = event.target as Checkbox;\n        const checked = checkbox.checked;\n        this.onSelectionChange(!checked, checked);\n    }\n\n    /** @internal */\n    public onSelectionChange(oldState: boolean, newState: boolean): void {\n        this.selected = newState;\n        const detail: TableRowSelectionToggleEventDetail = {\n            oldState,\n            newState\n        };\n        this.$emit('row-selection-toggle', detail);\n    }\n\n    /** @internal */\n    public onCellActionMenuBeforeToggle(\n        event: CustomEvent<MenuButtonToggleEventDetail>,\n        column: TableColumn\n    ): void {\n        this.currentActionMenuColumn = column;\n        this.emitActionMenuToggleEvent(\n            'row-action-menu-beforetoggle',\n            event.detail,\n            column\n        );\n    }\n\n    /** @internal */\n    public onCellActionMenuToggle(\n        event: CustomEvent<MenuButtonToggleEventDetail>,\n        column: TableColumn\n    ): void {\n        this.menuOpen = event.detail.newState;\n        this.emitActionMenuToggleEvent(\n            'row-action-menu-toggle',\n            event.detail,\n            column\n        );\n    }\n\n    /** @internal */\n    public handleChange(source: unknown, args: unknown): void {\n        if (\n            source instanceof ColumnInternals\n            && typeof args === 'string'\n            && (isColumnInternalsProperty(args, 'columnConfig')\n                || isColumnInternalsProperty(args, 'dataRecordFieldNames'))\n        ) {\n            this.updateCellStates();\n        }\n    }\n\n    /** @internal */\n    public getFocusableElements(): TableRowFocusableElements {\n        return {\n            selectionCheckbox: this.showSelectionCheckbox\n                ? this.selectionCheckbox\n                : undefined,\n            cells: Array.from(\n                this.cellContainer.querySelectorAll(tableCellTag)\n            ).map(cell => ({\n                cell,\n                actionMenuButton: cell.hasActionMenu\n                    ? cell.actionMenuButton\n                    : undefined\n            }))\n        };\n    }\n\n    public onRowExpandToggle(event?: Event): void {\n        const expandEventDetail: TableRowExpansionToggleEventDetail = {\n            oldState: this.expanded,\n            newState: !this.expanded,\n            recordId: this.recordId!\n        };\n        this.$emit('row-expand-toggle', expandEventDetail);\n        event?.stopImmediatePropagation();\n        // To avoid a visual glitch with improper expand/collapse icons performing an\n        // animation (due to visual re-use apparently), we apply a class to the\n        // contained expand-collapse button temporarily. We use the 'transitionend' event\n        // to remove the temporary class and register a function reference as the handler\n        // to avoid issues that may result from the 'transitionend' event not firing, as it\n        // will never result in multiple event listeners being registered.\n        this.animationClass = 'animating';\n        this.expandIcon?.addEventListener(\n            'transitionend',\n            this.removeAnimatingClass\n        );\n    }\n\n    public onCellViewSlotsRequest(\n        column: TableColumn,\n        event: CustomEvent<CellViewSlotRequestEventDetail>\n    ): void {\n        event.stopImmediatePropagation();\n        if (typeof this.recordId !== 'string') {\n            // The recordId is expected to be defined on any row that can be interacted with, but if\n            // it isn't defined, nothing can be done with the request to slot content into the row.\n            return;\n        }\n\n        const eventDetails: RowSlotRequestEventDetail = {\n            recordId: this.recordId,\n            columnInternalId: column.columnInternals.uniqueId,\n            slots: event.detail.slots\n        };\n        this.$emit('row-slots-request', eventDetails);\n    }\n\n    private readonly removeAnimatingClass = (): void => {\n        this.animationClass = '';\n        this.expandIcon?.removeEventListener(\n            'transitionend',\n            this.removeAnimatingClass\n        );\n    };\n\n    private emitActionMenuToggleEvent(\n        eventType: string,\n        menuButtonEventDetail: MenuButtonToggleEventDetail,\n        column: TableColumn\n    ): void {\n        const detail: TableActionMenuToggleEventDetail = {\n            newState: menuButtonEventDetail.newState,\n            oldState: menuButtonEventDetail.oldState,\n            recordIds: [this.recordId!],\n            operatingRecordId: this.recordId!,\n            columnId: column.columnId\n        };\n        this.$emit(eventType, detail);\n    }\n\n    private columnsChanged(): void {\n        this.updateCellIndentLevels();\n        this.updateCellStates();\n\n        this.observeColumns();\n    }\n\n    private dataRecordChanged(): void {\n        this.updateCellStates();\n    }\n\n    private nestingLevelChanged(): void {\n        this.updateCellIndentLevels();\n    }\n\n    private updateCellIndentLevels(): void {\n        const firstNonPinnedIndex = this.columns.findIndex(\n            col => col.columnInternals.pinLocation !== TableColumnPinLocation.left\n        );\n        this.cellIndentLevels = this.columns.map((_, i) => {\n            return i === firstNonPinnedIndex ? this.nestingLevel : 0;\n        });\n    }\n\n    private removeColumnObservers(): void {\n        this.columnNotifiers.forEach(notifier => {\n            notifier.unsubscribe(this);\n        });\n        this.columnNotifiers = [];\n    }\n\n    private observeColumns(): void {\n        this.removeColumnObservers();\n\n        this.columnNotifiers = this.columns.map(column => {\n            const notifier = Observable.getNotifier(column.columnInternals);\n            notifier.subscribe(this);\n            return notifier;\n        });\n    }\n\n    private updateCellStates(): void {\n        this.cellStates = this.columns.map(column => {\n            const fieldNames = column.columnInternals.dataRecordFieldNames;\n            let cellState: TableCellState | undefined;\n            if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {\n                const cellDataValues = fieldNames.map(\n                    field => this.dataRecord![field]\n                );\n                const cellRecord = Object.fromEntries(\n                    column.columnInternals.cellRecordFieldNames.map((k, j) => [\n                        k,\n                        cellDataValues[j]\n                    ])\n                );\n                const columnConfig = column.columnInternals.columnConfig;\n                cellState = {\n                    cellRecord,\n                    columnConfig\n                };\n            }\n            return cellState;\n        });\n    }\n\n    private hasValidFieldNames(\n        keys: readonly (TableFieldName | undefined)[]\n    ): keys is TableFieldName[] {\n        return keys.every(key => key !== undefined);\n    }\n\n    private selectedChanged(): void {\n        this.setSelectionCheckboxState();\n    }\n\n    private selectionCheckboxChanged(): void {\n        this.setSelectionCheckboxState();\n    }\n\n    private setSelectionCheckboxState(): void {\n        if (this.selectionCheckbox) {\n            this.ignoreSelectionChangeEvents = true;\n            this.selectionCheckbox.checked = this.selected;\n            this.ignoreSelectionChangeEvents = false;\n        }\n    }\n}\n\nconst nimbleTableRow = TableRow.compose({\n    baseName: 'table-row',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());\nexport const tableRowTag = 'nimble-table-row';\n"]}