npm - @ni/nimble-components - Versions diffs - 35.10.0 → 35.11.0 - Mend

@ni/nimble-components 35.10.0 → 35.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAEH,sBAAsB,EAEzB,MAAM,aAAa,CAAC;AASrB;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QAKW,iBAAY,GAAG,CAAC,CAAC;~~QAgBjB~~,aAAQ,GAAG,KAAK,CAAC;QAGjB,eAAU,GAAG,KAAK,CAAC;QAGnB,mBAAc,GAA2B,sBAAsB,CAAC,WAAW,CAAC;QAanF;;WAEG;QAEI,mBAAc,GAAG,EAAE,CAAC;QAE3B;;WAEG;QAEI,eAAU,GAAG,KAAK,CAAC;QAE1B,wFAAwF;QACxF,iFAAiF;QACjF,4DAA4D;QAC5D,2CAA2C;QACnC,gCAA2B,GAAG,KAAK,CAAC;~~QA+D3B~~,yBAAoB,GAAG,GAAS,EAAE;YAC/C,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;YACzB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAC/B,eAAe,EACf,IAAI,CAAC,oBAAoB,CAC5B,CAAC;QACN,CAAC,CAAC;IACN,CAAC;~~IApEU~~,mBAAmB;QACtB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;QAClC,6EAA6E;QAC7E,iFAAiF;QACjF,gFAAgF;QAChF,mFAAmF;QACnF,qFAAqF;QACrF,gDAAgD;QAChD,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;QAClC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAC5B,eAAe,EACf,IAAI,CAAC,oBAAoB,CAC5B,CAAC;IACN,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,cAAc,GAAG,OAAO;YACzB,CAAC,CAAC,sBAAsB,CAAC,QAAQ;YACjC,CAAC,CAAC,sBAAsB,CAAC,WAAW,CAAC;QACzC,MAAM,MAAM,GAAuC;YAC/C,QAAQ,EAAE,CAAC,OAAO;YAClB,QAAQ,EAAE,OAAO;SACpB,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,wBAAwB,EAAE,MAAM,CAAC,CAAC;IACjD,CAAC;IAED,gBAAgB;IACT,oBAAoB;QACvB,OAAO;YACH,iBAAiB,EAAE,IAAI,CAAC,UAAU;gBAC9B,CAAC,CAAC,IAAI,CAAC,iBAAiB;gBACxB,CAAC,CAAC,SAAS;YACf,KAAK,EAAE,EAAE;SACZ,CAAC;IACN,CAAC;IAEO,qBAAqB;QACzB,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,cAAc,KAAK,sBAAsB,CAAC,QAAQ,CAAC;YACzF,IAAI,CAAC,iBAAiB,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc;oBAClD,sBAAsB,CAAC,iBAAiB,CAAC;YACjD,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;QAC7C,CAAC;IACL,CAAC;CASJ;~~AA5HU~~;IADN,UAAU;oDACoB;AAGxB;IADN,UAAU;mDACa;~~AAOjB~~;IADN,UAAU;uDACsB;AAG1B;IADN,UAAU;0DACyB;AAG7B;IADN,UAAU;kDACsB;AAG1B;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CACF;AAGjB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDACA;AAGnB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;qDAC4C;AAWnE;IADf,UAAU;wDACkC;AAMtC;IADN,UAAU;qDACgB;AAMpB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDAC1B;~~AA8E9B~~,MAAM,mBAAmB,GAAG,aAAa,CAAC,OAAO,CAAC;IAC9C,QAAQ,EAAE,iBAAiB;IAC3B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,mBAAmB,EAAE,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,gBAAgB,GAAG,wBAAwB,CAAC","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"]}
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 @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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,EACf,mBAAmB,EACtB,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;AAC9D,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;;;;kBAI7D,aAAa;;;;;;;;;cASjB,aAAa;;kBAET,aAAa;;;;;;;;;kBASb,aAAa;;;;;;;4BAOH,cAAc;;;YAG9B,YAAY;4BACI,WAAW,WAAW,gBAAgB;oCAC9B,WAAW;;;;;;;;sBAQzB,mBAAmB;mBACtB,YAAY,CAAC,OAAO;;;;sCAID,cAAc,KAAK,cAAc;cACzD,mBAAmB;;;gCAGD,YAAY;uCACL,gBAAgB;;;;;;;;;;;;sCAYjB,cAAc,KAAK,cAAc;cACzD,mBAAmB;;;;;cAKnB,aAAa,MAAM,eAAe;;;;;;;;;;;wBAWxB,aAAa;UAC3B,cAAc;;;;;;yBAMC,aAAa;;UAE5B,cAAc;;;;uBAID,eAAe;;;;;;CAMrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;;0BAKxC,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;0BAC7B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;sBAEjC,mBAAmB;;;;;0BAKf,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;0BAC9B,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;0BAG9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;0BAC7B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;sBAEjC,mBAAmB;;;;;0BAKf,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;0BAC7B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;sBAEjC,mBAAmB;;;;;0BAKf,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;0BAC9B,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;0BAG9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;0BAC7B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;sBAEjC,mBAAmB;;SAEhC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;;;0BAKvC,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;0BAC7B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;sBAEjC,mBAAmB;;;;;0BAKf,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;0BAC7B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;sBAEjC,mBAAmB;;SAEhC,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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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 { 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"]}

package/dist/esm/table/components/row/styles.js CHANGED Viewed

@@ -1,12 +1,13 @@
 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, controlSlimHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, mediumPadding, smallPadding, standardPadding } from '../../../theme-provider/design-tokens';
+import { applicationBackgroundColor, borderHoverColor, borderWidth, controlHeight, controlSlimHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, mediumPadding, smallPadding, 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 { 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('flex')}
     ${expandCollapseStyles}
@@ -29,7 +30,7 @@ export const styles = css `
         position: absolute;
     }
-    :host([selectable]:not([selected])[allow-hover]:hover)::before {
+    :host([selectable][allow-hover]:hover)::before {
         background-color: ${fillHoverColor};
     }
@@ -102,6 +103,46 @@ export const styles = css `
         width: ${mediumPadding};
     }
+    .pinned-cell-container {
+        display: grid;
+        grid-template-columns: var(--ni-private-table-pinned-columns-row-grid-columns);
+        position: sticky;
+        left: 0;
+        background: ${applicationBackgroundColor};
+        z-index: ${ZIndexLevels.zIndex1};
+        box-shadow: inset -2px 0 0 0 ${tableRowBorderColor};
+    }
+    :host([selectable][allow-hover]:hover) .pinned-cell-container {
+        background: linear-gradient(${fillHoverColor}, ${fillHoverColor}),
+            ${applicationBackgroundColor};
+    }
+    :host([selected]) .pinned-cell-container {
+        background: linear-gradient(${fillSelectedColor}, ${fillSelectedColor}),
+            ${applicationBackgroundColor};
+    }
+    :host([selected][allow-hover]:hover) .pinned-cell-container {
+        background: linear-gradient(
+                ${fillHoverSelectedColor},
+                ${fillHoverSelectedColor}
+            ),
+            ${applicationBackgroundColor};
+    }
+    :host(${focusVisible}) .pinned-cell-container {
+        box-shadow:
+            inset calc(2 * ${borderWidth}) 0 0 ${borderHoverColor},
+            inset 0 calc(2 * ${borderWidth}) 0 ${borderHoverColor},
+            inset 0 calc(-2 * ${borderWidth}) 0 ${borderHoverColor},
+            inset -2px 0 0 0 ${tableRowBorderColor};
+    }
+    ${'' /* Pushing the pinned-cell-container to a higher z-index for breakpoint menu behavior (not required by table directly) */}
+    :host([menu-open]) .pinned-cell-container {
+        z-index: ${ZIndexLevels.zIndex1000};
+    }
     .cell-container {
         display: grid;
         width: 100%;
@@ -177,5 +218,41 @@ export const styles = css `
             :host([selected][allow-hover]:hover)::before {
                 background-color: ${hexToRgbaCssColor(White, 0.2)};
             }
+            .pinned-cell-container {
+                box-shadow: inset -2px 0 0 0 ${hexToRgbaCssColor(White, 0.1)};
+            }
+            :host([selectable][allow-hover]:hover) .pinned-cell-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.05)},
+                        ${hexToRgbaCssColor(White, 0.05)}
+                    ),
+                    ${applicationBackgroundColor};
+            }
+            :host([selected]) .pinned-cell-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.25)},
+                        ${hexToRgbaCssColor(White, 0.25)}
+                    ),
+                    ${applicationBackgroundColor};
+            }
+            :host([selected][allow-hover]:hover) .pinned-cell-container {
+                background: linear-gradient(
+                        ${hexToRgbaCssColor(White, 0.2)},
+                        ${hexToRgbaCssColor(White, 0.2)}
+                    ),
+                    ${applicationBackgroundColor};
+            }
+            :host(${focusVisible}) .pinned-cell-container {
+                box-shadow:
+                    inset calc(2 * ${borderWidth}) 0 0 ${borderHoverColor},
+                    inset 0 calc(2 * ${borderWidth}) 0 ${borderHoverColor},
+                    inset 0 calc(-2 * ${borderWidth}) 0 ${borderHoverColor},
+                    inset -2px 0 0 0 ${hexToRgbaCssColor(White, 0.1)};
+            }
         `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/table/components/row/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/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,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,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,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;;;;;4BAKE,0BAA0B;uBAC/B,aAAa,UAAU,WAAW;+BAC1B,WAAW;;;;;;;kBAOxB,aAAa;;;;;;;4BAOH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;YAGtC,YAAY;;;6BAGK,WAAW,cAAc,WAAW;kBAC/C,gBAAgB;8BACJ,WAAW,eAAe,WAAW;kBACjD,gBAAgB;;;;;;;kBAOhB,aAAa;;sBAET,aAAa;;;;;;;;iBAQlB,iBAAiB;kBAChB,iBAAiB;;;;;;;kBAOjB,aAAa;;sBAET,aAAa;;;;;;;;;;;;uBAYZ,eAAe;;;;;;;;iBAQrB,aAAa;;;;;iBAKb,aAAa;;;;;;;;;;;;;eAaf,aAAa;;;;;;;;;;;;uBAYL,YAAY;;;;qCAIE,YAAY;;oBAE7B,aAAa,MAAM,YAAY;;;;eAIpC,aAAa,MAAM,aAAa;;kBAE7B,aAAa;;;;qCAIM,YAAY;;;;;sBAK3B,aAAa;;0BAET,YAAY;;;;kBAIpB,aAAa;;;;;;;;;;;YAWnB,YAAY;;;CAGvB,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,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 controlSlimHeight,\n fillHoverColor,\n fillHoverSelectedColor,\n fillSelectedColor,\n mediumPadding,\n smallPadding,\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 { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\nimport { focusVisible } from '../../../utilities/style/focus';\n\nexport const styles = css`\n ${display('flex')}\n ${expandCollapseStyles}\n\n :host {\n width: fit-content;\n min-width: 100%;\n background-color: ${applicationBackgroundColor};\n height: calc(${controlHeight} + 2 * ${borderWidth});\n border-top: calc(2 * ${borderWidth}) solid transparent;\n background-clip: padding-box;\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([selectable]:not([selected])[allow-hover]:hover)::before {\n background-color: ${fillHoverColor};\n }\n\n :host([selected])::before {\n background-color: ${fillSelectedColor};\n }\n\n :host([selected][allow-hover]:hover)::before {\n background-color: ${fillHoverSelectedColor};\n }\n\n :host(${focusVisible}) {\n outline: none;\n box-shadow:\n inset calc(2 * ${borderWidth}) calc(2 * ${borderWidth})\n ${borderHoverColor},\n inset calc(-2 * ${borderWidth}) calc(-2 * ${borderWidth})\n ${borderHoverColor};\n }\n\n .expand-collapse-button {\n flex: 0 0 auto;\n margin-left: max(\n calc(\n ${mediumPadding} +\n (var(--ni-private-table-row-indent-level) - 1) \n ${controlHeight}\n ),\n 0px\n );\n }\n\n .spinner-container {\n flex: 0 0 auto;\n width: ${controlSlimHeight};\n height: ${controlSlimHeight};\n align-self: center;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: max(\n calc(\n ${mediumPadding} +\n (var(--ni-private-table-row-indent-level) - 1) \n ${controlHeight}\n ),\n 0px\n );\n }\n\n .row-operations-container {\n flex: 0 0 auto;\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\n .row-front-spacer {\n width: ${controlHeight};\n flex: 0 0 auto;\n }\n\n .row-front-spacer.reduced-size-spacer {\n width: ${mediumPadding};\n }\n\n .cell-container {\n display: grid;\n width: 100%;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n }\n\n .cell-container.nested-parent {\n margin-left: calc(\n (${controlHeight} * var(--ni-private-table-row-indent-level)) * -1\n );\n }\n\n nimble-table-cell {\n --ni-private-table-cell-action-menu-display: none;\n }\n\n nimble-table-cell[menu-open] {\n --ni-private-table-cell-action-menu-display: block;\n }\n\n nimble-table-cell${focusVisible} {\n --ni-private-table-cell-action-menu-display: block;\n }\n\n nimble-table-cell:first-of-type${focusVisible} {\n margin-left: calc(\n -1 * (${controlHeight} - ${smallPadding}) \n var(--ni-private-table-cell-focus-offset-multiplier)\n );\n padding-left: calc(\n (${controlHeight} - ${mediumPadding}) \n var(--ni-private-table-cell-focus-offset-multiplier) +\n ${mediumPadding}\n );\n }\n\n nimble-table-cell:first-of-type${focusVisible}::before {\n content: '';\n display: block;\n width: calc(\n (\n ${controlHeight} \n var(--ni-private-table-cell-nesting-level) +\n ${smallPadding}\n ) \n var(--ni-private-table-cell-focus-offset-multiplier)\n );\n height: ${controlHeight};\n }\n\n :host([allow-hover]:hover) nimble-table-cell {\n --ni-private-table-cell-action-menu-display: block;\n }\n\n :host([selected]) nimble-table-cell {\n --ni-private-table-cell-action-menu-display: block;\n }\n\n :host(${focusVisible}) nimble-table-cell {\n --ni-private-table-cell-action-menu-display: block;\n }\n`.withBehaviors(\n themeBehavior(\n Theme.color,\n css`\n :host([selectable]:not([selected])[allow-hover]:hover)::before {\n background-color: ${hexToRgbaCssColor(White, 0.05)};\n }\n\n :host([selected])::before {\n background-color: ${hexToRgbaCssColor(White, 0.25)};\n }\n\n :host([selected][allow-hover]:hover)::before {\n background-color: ${hexToRgbaCssColor(White, 0.2)};\n }\n `\n )\n);\n"]}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/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 controlSlimHeight,\n fillHoverColor,\n fillHoverSelectedColor,\n fillSelectedColor,\n mediumPadding,\n smallPadding,\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 { 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('flex')}\n ${expandCollapseStyles}\n\n :host {\n width: fit-content;\n min-width: 100%;\n background-color: ${applicationBackgroundColor};\n height: calc(${controlHeight} + 2 * ${borderWidth});\n border-top: calc(2 * ${borderWidth}) solid transparent;\n background-clip: padding-box;\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([selectable][allow-hover]:hover)::before {\n background-color: ${fillHoverColor};\n }\n\n :host([selected])::before {\n background-color: ${fillSelectedColor};\n }\n\n :host([selected][allow-hover]:hover)::before {\n background-color: ${fillHoverSelectedColor};\n }\n\n :host(${focusVisible}) {\n outline: none;\n box-shadow:\n inset calc(2 * ${borderWidth}) calc(2 * ${borderWidth})\n ${borderHoverColor},\n inset calc(-2 * ${borderWidth}) calc(-2 * ${borderWidth})\n ${borderHoverColor};\n }\n\n .expand-collapse-button {\n flex: 0 0 auto;\n margin-left: max(\n calc(\n ${mediumPadding} +\n (var(--ni-private-table-row-indent-level) - 1) \n ${controlHeight}\n ),\n 0px\n );\n }\n\n .spinner-container {\n flex: 0 0 auto;\n width: ${controlSlimHeight};\n height: ${controlSlimHeight};\n align-self: center;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: max(\n calc(\n ${mediumPadding} +\n (var(--ni-private-table-row-indent-level) - 1) \n ${controlHeight}\n ),\n 0px\n );\n }\n\n .row-operations-container {\n flex: 0 0 auto;\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\n .row-front-spacer {\n width: ${controlHeight};\n flex: 0 0 auto;\n }\n\n .row-front-spacer.reduced-size-spacer {\n width: ${mediumPadding};\n }\n\n .pinned-cell-container {\n display: grid;\n grid-template-columns: var(--ni-private-table-pinned-columns-row-grid-columns);\n position: sticky;\n left: 0;\n background: ${applicationBackgroundColor};\n z-index: ${ZIndexLevels.zIndex1};\n box-shadow: inset -2px 0 0 0 ${tableRowBorderColor};\n }\n\n :host([selectable][allow-hover]:hover) .pinned-cell-container {\n background: linear-gradient(${fillHoverColor}, ${fillHoverColor}),\n ${applicationBackgroundColor};\n }\n\n :host([selected]) .pinned-cell-container {\n background: linear-gradient(${fillSelectedColor}, ${fillSelectedColor}),\n ${applicationBackgroundColor};\n }\n\n :host([selected][allow-hover]:hover) .pinned-cell-container {\n background: linear-gradient(\n ${fillHoverSelectedColor},\n ${fillHoverSelectedColor}\n ),\n ${applicationBackgroundColor};\n }\n\n :host(${focusVisible}) .pinned-cell-container {\n box-shadow:\n inset calc(2 * ${borderWidth}) 0 0 ${borderHoverColor},\n inset 0 calc(2 * ${borderWidth}) 0 ${borderHoverColor},\n inset 0 calc(-2 * ${borderWidth}) 0 ${borderHoverColor},\n inset -2px 0 0 0 ${tableRowBorderColor};\n }\n ${'' /* Pushing the pinned-cell-container to a higher z-index for breakpoint menu behavior (not required by table directly) /}\n :host([menu-open]) .pinned-cell-container {\n z-index: ${ZIndexLevels.zIndex1000};\n }\n\n .cell-container {\n display: grid;\n width: 100%;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n }\n\n .cell-container.nested-parent {\n margin-left: calc(\n (${controlHeight} var(--ni-private-table-row-indent-level)) * -1\n );\n }\n\n nimble-table-cell {\n --ni-private-table-cell-action-menu-display: none;\n }\n\n nimble-table-cell[menu-open] {\n --ni-private-table-cell-action-menu-display: block;\n }\n\n nimble-table-cell${focusVisible} {\n --ni-private-table-cell-action-menu-display: block;\n }\n\n nimble-table-cell:first-of-type${focusVisible} {\n margin-left: calc(\n -1 * (${controlHeight} - ${smallPadding}) \n var(--ni-private-table-cell-focus-offset-multiplier)\n );\n padding-left: calc(\n (${controlHeight} - ${mediumPadding}) \n var(--ni-private-table-cell-focus-offset-multiplier) +\n ${mediumPadding}\n );\n }\n\n nimble-table-cell:first-of-type${focusVisible}::before {\n content: '';\n display: block;\n width: calc(\n (\n ${controlHeight} \n var(--ni-private-table-cell-nesting-level) +\n ${smallPadding}\n ) \n var(--ni-private-table-cell-focus-offset-multiplier)\n );\n height: ${controlHeight};\n }\n\n :host([allow-hover]:hover) nimble-table-cell {\n --ni-private-table-cell-action-menu-display: block;\n }\n\n :host([selected]) nimble-table-cell {\n --ni-private-table-cell-action-menu-display: block;\n }\n\n :host(${focusVisible}) nimble-table-cell {\n --ni-private-table-cell-action-menu-display: block;\n }\n`.withBehaviors(\n themeBehavior(\n Theme.color,\n css`\n :host([selectable]:not([selected])[allow-hover]:hover)::before {\n background-color: ${hexToRgbaCssColor(White, 0.05)};\n }\n\n :host([selected])::before {\n background-color: ${hexToRgbaCssColor(White, 0.25)};\n }\n\n :host([selected][allow-hover]:hover)::before {\n background-color: ${hexToRgbaCssColor(White, 0.2)};\n }\n\n .pinned-cell-container {\n box-shadow: inset -2px 0 0 0 ${hexToRgbaCssColor(White, 0.1)};\n }\n\n :host([selectable][allow-hover]:hover) .pinned-cell-container {\n background: linear-gradient(\n ${hexToRgbaCssColor(White, 0.05)},\n ${hexToRgbaCssColor(White, 0.05)}\n ),\n ${applicationBackgroundColor};\n }\n\n :host([selected]) .pinned-cell-container {\n background: linear-gradient(\n ${hexToRgbaCssColor(White, 0.25)},\n ${hexToRgbaCssColor(White, 0.25)}\n ),\n ${applicationBackgroundColor};\n }\n\n :host([selected][allow-hover]:hover) .pinned-cell-container {\n background: linear-gradient(\n ${hexToRgbaCssColor(White, 0.2)},\n ${hexToRgbaCssColor(White, 0.2)}\n ),\n ${applicationBackgroundColor};\n }\n\n :host(${focusVisible}) .pinned-cell-container {\n box-shadow:\n inset calc(2 * ${borderWidth}) 0 0 ${borderHoverColor},\n inset 0 calc(2 * ${borderWidth}) 0 ${borderHoverColor},\n inset 0 calc(-2 * ${borderWidth}) 0 ${borderHoverColor},\n inset -2px 0 0 0 ${hexToRgbaCssColor(White, 0.1)};\n }\n `\n )\n);\n"]}