@ni/nimble-components 35.10.1 → 35.12.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.
- package/dist/all-components-bundle.js +1279 -470
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +3587 -3321
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +90 -0
- package/dist/custom-elements.md +11 -10
- package/dist/esm/combobox/styles.js +7 -0
- package/dist/esm/combobox/styles.js.map +1 -1
- package/dist/esm/number-field/styles.js +8 -0
- package/dist/esm/number-field/styles.js.map +1 -1
- package/dist/esm/table/components/group-row/index.d.ts +6 -0
- package/dist/esm/table/components/group-row/index.js +14 -0
- package/dist/esm/table/components/group-row/index.js.map +1 -1
- package/dist/esm/table/components/group-row/styles.js +91 -5
- package/dist/esm/table/components/group-row/styles.js.map +1 -1
- package/dist/esm/table/components/group-row/template.js +6 -1
- package/dist/esm/table/components/group-row/template.js.map +1 -1
- package/dist/esm/table/components/row/index.js +3 -1
- package/dist/esm/table/components/row/index.js.map +1 -1
- package/dist/esm/table/components/row/styles.js +79 -2
- package/dist/esm/table/components/row/styles.js.map +1 -1
- package/dist/esm/table/components/row/template.js +43 -31
- package/dist/esm/table/components/row/template.js.map +1 -1
- package/dist/esm/table/index.d.ts +13 -0
- package/dist/esm/table/index.js +51 -2
- package/dist/esm/table/index.js.map +1 -1
- package/dist/esm/table/models/table-layout-manager.d.ts +1 -1
- package/dist/esm/table/models/table-layout-manager.js +8 -6
- package/dist/esm/table/models/table-layout-manager.js.map +1 -1
- package/dist/esm/table/models/table-update-tracker.d.ts +1 -1
- package/dist/esm/table/models/table-update-tracker.js +7 -1
- package/dist/esm/table/models/table-update-tracker.js.map +1 -1
- package/dist/esm/table/models/table-validator.d.ts +2 -0
- package/dist/esm/table/models/table-validator.js +10 -2
- package/dist/esm/table/models/table-validator.js.map +1 -1
- package/dist/esm/table/styles.js +23 -5
- package/dist/esm/table/styles.js.map +1 -1
- package/dist/esm/table/template.d.ts +2 -1
- package/dist/esm/table/template.js +23 -13
- package/dist/esm/table/template.js.map +1 -1
- package/dist/esm/table/types.d.ts +9 -0
- package/dist/esm/table/types.js +7 -0
- package/dist/esm/table/types.js.map +1 -1
- package/dist/esm/table-column/base/models/column-internals.d.ts +5 -1
- package/dist/esm/table-column/base/models/column-internals.js +4 -1
- package/dist/esm/table-column/base/models/column-internals.js.map +1 -1
- package/dist/esm/table-column/mapping/index.d.ts +4 -0
- package/dist/esm/table-column/mapping/index.js +2 -1
- package/dist/esm/table-column/mapping/index.js.map +1 -1
- package/dist/esm/table-column/mixins/pinnable-column.d.ts +11 -0
- package/dist/esm/table-column/mixins/pinnable-column.js +18 -0
- package/dist/esm/table-column/mixins/pinnable-column.js.map +1 -0
- package/dist/esm/text-area/styles.js +4 -1
- package/dist/esm/text-area/styles.js.map +1 -1
- package/dist/esm/text-field/styles.js +3 -0
- package/dist/esm/text-field/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -5959,6 +5959,24 @@
|
|
|
5959
5959
|
}
|
|
5960
5960
|
]
|
|
5961
5961
|
},
|
|
5962
|
+
{
|
|
5963
|
+
"kind": "method",
|
|
5964
|
+
"name": "getPinnedColumnResolvedPixelWidth",
|
|
5965
|
+
"privacy": "private",
|
|
5966
|
+
"return": {
|
|
5967
|
+
"type": {
|
|
5968
|
+
"text": "number | undefined"
|
|
5969
|
+
}
|
|
5970
|
+
},
|
|
5971
|
+
"parameters": [
|
|
5972
|
+
{
|
|
5973
|
+
"name": "column",
|
|
5974
|
+
"type": {
|
|
5975
|
+
"text": "TableColumn"
|
|
5976
|
+
}
|
|
5977
|
+
}
|
|
5978
|
+
]
|
|
5979
|
+
},
|
|
5962
5980
|
{
|
|
5963
5981
|
"kind": "method",
|
|
5964
5982
|
"name": "updateRequestedSlotsForOpeningActionMenu",
|
|
@@ -6563,6 +6581,15 @@
|
|
|
6563
6581
|
},
|
|
6564
6582
|
"default": "{ none: undefined, canLoadChildren: 'can-load-children', loadingChildren: 'loading-children' }"
|
|
6565
6583
|
},
|
|
6584
|
+
{
|
|
6585
|
+
"kind": "variable",
|
|
6586
|
+
"name": "TableColumnPinLocation",
|
|
6587
|
+
"type": {
|
|
6588
|
+
"text": "{\n none: undefined,\n left: 'left'\n}"
|
|
6589
|
+
},
|
|
6590
|
+
"default": "{ none: undefined, left: 'left' }",
|
|
6591
|
+
"description": "The possible pin locations for a table column."
|
|
6592
|
+
},
|
|
6566
6593
|
{
|
|
6567
6594
|
"kind": "variable",
|
|
6568
6595
|
"name": "TableColumnSortDirection",
|
|
@@ -6600,6 +6627,14 @@
|
|
|
6600
6627
|
"module": "src/table/types.ts"
|
|
6601
6628
|
}
|
|
6602
6629
|
},
|
|
6630
|
+
{
|
|
6631
|
+
"kind": "js",
|
|
6632
|
+
"name": "TableColumnPinLocation",
|
|
6633
|
+
"declaration": {
|
|
6634
|
+
"name": "TableColumnPinLocation",
|
|
6635
|
+
"module": "src/table/types.ts"
|
|
6636
|
+
}
|
|
6637
|
+
},
|
|
6603
6638
|
{
|
|
6604
6639
|
"kind": "js",
|
|
6605
6640
|
"name": "TableColumnSortDirection",
|
|
@@ -14566,6 +14601,18 @@
|
|
|
14566
14601
|
"module": "src/table-column/mixins/fractional-width-column.ts"
|
|
14567
14602
|
}
|
|
14568
14603
|
},
|
|
14604
|
+
{
|
|
14605
|
+
"kind": "field",
|
|
14606
|
+
"name": "pinLocation",
|
|
14607
|
+
"type": {
|
|
14608
|
+
"text": "TableColumnPinLocation | undefined"
|
|
14609
|
+
},
|
|
14610
|
+
"privacy": "public",
|
|
14611
|
+
"inheritedFrom": {
|
|
14612
|
+
"name": "mixinPinnableColumnAPI",
|
|
14613
|
+
"module": "src/table-column/mixins/pinnable-column.ts"
|
|
14614
|
+
}
|
|
14615
|
+
},
|
|
14569
14616
|
{
|
|
14570
14617
|
"kind": "field",
|
|
14571
14618
|
"name": "sortingDisabled",
|
|
@@ -14622,6 +14669,10 @@
|
|
|
14622
14669
|
"name": "mixinFractionalWidthColumnAPI",
|
|
14623
14670
|
"module": "/src/table-column/mixins/fractional-width-column"
|
|
14624
14671
|
},
|
|
14672
|
+
{
|
|
14673
|
+
"name": "mixinPinnableColumnAPI",
|
|
14674
|
+
"module": "/src/table-column/mixins/pinnable-column"
|
|
14675
|
+
},
|
|
14625
14676
|
{
|
|
14626
14677
|
"name": "mixinSortableColumnAPI",
|
|
14627
14678
|
"module": "/src/table-column/mixins/sortable-column"
|
|
@@ -15082,6 +15133,45 @@
|
|
|
15082
15133
|
}
|
|
15083
15134
|
]
|
|
15084
15135
|
},
|
|
15136
|
+
{
|
|
15137
|
+
"kind": "javascript-module",
|
|
15138
|
+
"path": "src/table-column/mixins/pinnable-column.ts",
|
|
15139
|
+
"declarations": [
|
|
15140
|
+
{
|
|
15141
|
+
"kind": "mixin",
|
|
15142
|
+
"description": "",
|
|
15143
|
+
"name": "mixinPinnableColumnAPI",
|
|
15144
|
+
"members": [
|
|
15145
|
+
{
|
|
15146
|
+
"kind": "field",
|
|
15147
|
+
"name": "pinLocation",
|
|
15148
|
+
"type": {
|
|
15149
|
+
"text": "TableColumnPinLocation | undefined"
|
|
15150
|
+
},
|
|
15151
|
+
"privacy": "public"
|
|
15152
|
+
}
|
|
15153
|
+
],
|
|
15154
|
+
"parameters": [
|
|
15155
|
+
{
|
|
15156
|
+
"name": "base",
|
|
15157
|
+
"type": {
|
|
15158
|
+
"text": "TBase"
|
|
15159
|
+
}
|
|
15160
|
+
}
|
|
15161
|
+
]
|
|
15162
|
+
}
|
|
15163
|
+
],
|
|
15164
|
+
"exports": [
|
|
15165
|
+
{
|
|
15166
|
+
"kind": "js",
|
|
15167
|
+
"name": "mixinPinnableColumnAPI",
|
|
15168
|
+
"declaration": {
|
|
15169
|
+
"name": "mixinPinnableColumnAPI",
|
|
15170
|
+
"module": "src/table-column/mixins/pinnable-column.ts"
|
|
15171
|
+
}
|
|
15172
|
+
}
|
|
15173
|
+
]
|
|
15174
|
+
},
|
|
15085
15175
|
{
|
|
15086
15176
|
"kind": "javascript-module",
|
|
15087
15177
|
"path": "src/table-column/mixins/placeholder.ts",
|
package/dist/custom-elements.md
CHANGED
|
@@ -2012,16 +2012,17 @@
|
|
|
2012
2012
|
|
|
2013
2013
|
### Fields
|
|
2014
2014
|
|
|
2015
|
-
| Name | Privacy | Type
|
|
2016
|
-
| ------------------ | ------- |
|
|
2017
|
-
| `widthMode` | public | `TableColumnMappingWidthMode`
|
|
2018
|
-
| `groupingDisabled` | public | `boolean`
|
|
2019
|
-
| `groupIndex` | public | `number \| null \| undefined`
|
|
2020
|
-
| `fractionalWidth` | public | `number \| null \| undefined`
|
|
2021
|
-
| `minPixelWidth` | public | `number \| null \| undefined`
|
|
2022
|
-
| `
|
|
2023
|
-
| `
|
|
2024
|
-
| `
|
|
2015
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
2016
|
+
| ------------------ | ------- | ------------------------------------- | ------- | ----------- | ----------------------------- |
|
|
2017
|
+
| `widthMode` | public | `TableColumnMappingWidthMode` | | | |
|
|
2018
|
+
| `groupingDisabled` | public | `boolean` | `false` | | mixinGroupableColumnAPI |
|
|
2019
|
+
| `groupIndex` | public | `number \| null \| undefined` | | | mixinGroupableColumnAPI |
|
|
2020
|
+
| `fractionalWidth` | public | `number \| null \| undefined` | | | mixinFractionalWidthColumnAPI |
|
|
2021
|
+
| `minPixelWidth` | public | `number \| null \| undefined` | | | mixinFractionalWidthColumnAPI |
|
|
2022
|
+
| `pinLocation` | public | `TableColumnPinLocation \| undefined` | | | mixinPinnableColumnAPI |
|
|
2023
|
+
| `sortingDisabled` | public | `boolean` | `false` | | mixinSortableColumnAPI |
|
|
2024
|
+
| `sortIndex` | public | `number \| null \| undefined` | | | mixinSortableColumnAPI |
|
|
2025
|
+
| `sortDirection` | public | `TableColumnSortDirection` | | | mixinSortableColumnAPI |
|
|
2025
2026
|
|
|
2026
2027
|
### Methods
|
|
2027
2028
|
|
|
@@ -12,6 +12,7 @@ export const styles = css `
|
|
|
12
12
|
${requiredVisibleStyles}
|
|
13
13
|
|
|
14
14
|
:host {
|
|
15
|
+
field-sizing: fixed;
|
|
15
16
|
--ni-private-hover-bottom-border-width: 2px;
|
|
16
17
|
--ni-private-bottom-border-width: 1px;
|
|
17
18
|
--ni-private-height-within-border: calc(
|
|
@@ -20,6 +21,7 @@ export const styles = css `
|
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
.control {
|
|
24
|
+
field-sizing: inherit;
|
|
23
25
|
bottom-border-width: var(--ni-private-bottom-border-width);
|
|
24
26
|
}
|
|
25
27
|
|
|
@@ -27,7 +29,12 @@ export const styles = css `
|
|
|
27
29
|
border-bottom-color: ${borderHoverColor};
|
|
28
30
|
}
|
|
29
31
|
|
|
32
|
+
slot[name='control'] {
|
|
33
|
+
field-sizing: inherit;
|
|
34
|
+
}
|
|
35
|
+
|
|
30
36
|
.selected-value {
|
|
37
|
+
field-sizing: inherit;
|
|
31
38
|
-webkit-appearance: none;
|
|
32
39
|
background: transparent;
|
|
33
40
|
border: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/combobox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;MACX,qBAAqB
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/combobox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;MACX,qBAAqB;;;;;;;cAOb,aAAa,UAAU,WAAW;;;;;;;;;;+BAUjB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;qBAsB1B,YAAY;;;;;iBAKhB,oBAAoB;;;;iBAIpB,qBAAqB;;;;iBAIrB,oBAAoB;;;;;;;;;;yBAUZ,YAAY;;;;;;;;;;uCAUE,qBAAqB;uBACrC,aAAa;;;;;;UAM1B,aAAa,CAAC,iBAAiB;uBAClB,YAAY;;;;gBAInB,qBAAqB;;CAEpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n controlHeight,\n bodyDisabledFontColor,\n borderRgbPartialColor,\n smallPadding,\n borderHoverColor,\n borderWidth,\n placeholderFontColor\n} from '../theme-provider/design-tokens';\n\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { focusVisible } from '../utilities/style/focus';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from '../select/types';\n\nexport const styles = css`\n ${dropdownStyles}\n ${errorStyles}\n ${requiredVisibleStyles}\n\n :host {\n field-sizing: fixed;\n --ni-private-hover-bottom-border-width: 2px;\n --ni-private-bottom-border-width: 1px;\n --ni-private-height-within-border: calc(\n ${controlHeight} - 2 * ${borderWidth}\n );\n }\n\n .control {\n field-sizing: inherit;\n bottom-border-width: var(--ni-private-bottom-border-width);\n }\n\n .control:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n slot[name='control'] {\n field-sizing: inherit;\n }\n\n .selected-value {\n field-sizing: inherit;\n -webkit-appearance: none;\n background: transparent;\n border: none;\n color: inherit;\n margin: auto 0;\n width: 100%;\n font: inherit;\n height: var(--ni-private-height-within-border);\n }\n\n .selected-value:hover,\n .selected-value:disabled,\n .selected-value:active,\n .selected-value${focusVisible} {\n outline: none;\n }\n\n .selected-value::placeholder {\n color: ${placeholderFontColor};\n }\n\n :host([disabled]) .selected-value::placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .selected-value::placeholder {\n color: ${placeholderFontColor};\n }\n\n [part='indicator'] {\n display: none;\n }\n\n .end-slot-container {\n display: flex;\n align-items: baseline;\n padding-right: ${smallPadding};\n }\n\n :host([disabled][appearance-readonly]) .end-slot-container {\n display: none;\n }\n\n .separator {\n display: inline;\n width: 2px;\n border-right: 2px solid rgba(${borderRgbPartialColor}, 0.15);\n height: calc(${controlHeight} - 12px);\n align-self: center;\n margin-left: 4px;\n }\n\n .dropdown-button {\n ${controlHeight.cssCustomProperty}: 24px;\n margin-left: ${smallPadding};\n }\n\n :host([disabled]) .dropdown-icon {\n fill: ${bodyDisabledFontColor};\n }\n`.withBehaviors(\n appearanceBehavior(\n DropdownAppearance.block,\n css`\n :host([error-visible]) .control {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n )\n);\n"]}
|
|
@@ -16,6 +16,7 @@ export const styles = css `
|
|
|
16
16
|
outline: none;
|
|
17
17
|
${userSelectNone}
|
|
18
18
|
color: ${bodyFontColor};
|
|
19
|
+
field-sizing: fixed;
|
|
19
20
|
--ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
|
|
20
21
|
--ni-private-height-within-border: calc(
|
|
21
22
|
${controlHeight} - 2 * ${borderWidth}
|
|
@@ -48,6 +49,7 @@ export const styles = css `
|
|
|
48
49
|
position: relative;
|
|
49
50
|
display: flex;
|
|
50
51
|
flex-direction: row;
|
|
52
|
+
field-sizing: inherit;
|
|
51
53
|
justify-content: center;
|
|
52
54
|
align-items: center;
|
|
53
55
|
border-radius: 0px;
|
|
@@ -115,12 +117,17 @@ export const styles = css `
|
|
|
115
117
|
font: inherit;
|
|
116
118
|
background: transparent;
|
|
117
119
|
color: inherit;
|
|
120
|
+
field-sizing: inherit;
|
|
118
121
|
height: var(--ni-private-height-within-border);
|
|
119
122
|
width: 100%;
|
|
120
123
|
border: none;
|
|
121
124
|
padding: 0px;
|
|
122
125
|
padding-left: ${mediumPadding};
|
|
123
126
|
}
|
|
127
|
+
|
|
128
|
+
:host([hide-step]) .control {
|
|
129
|
+
padding-right: ${smallPadding};
|
|
130
|
+
}
|
|
124
131
|
|
|
125
132
|
.control:hover,
|
|
126
133
|
.control:focus,
|
|
@@ -218,6 +225,7 @@ export const styles = css `
|
|
|
218
225
|
|
|
219
226
|
:host([full-bleed]) .control {
|
|
220
227
|
padding-left: 0px;
|
|
228
|
+
padding-right: 0px;
|
|
221
229
|
}
|
|
222
230
|
`));
|
|
223
231
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;;mDAEqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;iCAWL,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;;6BAKlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;4BAMI,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0BhB,aAAa;;;;yBAIZ,YAAY;;;;;;;;;;;;;;;iBAepB,qBAAqB;;;;iBAIrB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE;sFACsF,CAAC,EAC3F;;;yBAGqB,YAAY;;;;;;;;UAQ3B,aAAa,CAAC,iBAAiB;;;;;;;;;wBASjB,YAAY;;CAEnC,CAAC,aAAa,CACX,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;uCAKvB,WAAW;;;;;uCAKX,WAAW;;;;;;yCAMT,qBAAqB;;;;;;;uCAOvB,SAAS;;SAEvC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;;SAOnC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n bodyFontColor,\n bodyDisabledFontColor,\n controlHeight,\n controlLabelFont,\n controlLabelFontColor,\n smallDelay,\n bodyFont,\n failColor,\n mediumPadding,\n smallPadding,\n controlLabelDisabledFontColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { NumberFieldAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-block')}\n ${errorStyles}\n ${requiredVisibleStyles}\n\n :host {\n font: ${bodyFont};\n outline: none;\n ${userSelectNone}\n color: ${bodyFontColor};\n field-sizing: fixed;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n --ni-private-height-within-border: calc(\n ${controlHeight} - 2 * ${borderWidth}\n );\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) {\n color: ${bodyFontColor};\n }\n\n .label {\n display: flex;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .label {\n color: ${controlLabelFontColor};\n }\n\n .root {\n position: relative;\n display: flex;\n flex-direction: row;\n field-sizing: inherit;\n justify-content: center;\n align-items: center;\n border-radius: 0px;\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n padding: ${borderWidth};\n }\n\n .root:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([readonly]) .root,\n :host([disabled]) .root {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([error-visible]) .root {\n border-bottom-color: ${failColor};\n }\n\n .root::before {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n .root::after {\n content: '';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n .root::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) .root::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) .root::after {\n width: 100%;\n }\n\n :host([readonly]:hover) .root::after,\n :host([disabled]:hover) .root::after {\n width: 0px;\n }\n\n [part='start'] {\n display: none;\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n background: transparent;\n color: inherit;\n field-sizing: inherit;\n height: var(--ni-private-height-within-border);\n width: 100%;\n border: none;\n padding: 0px;\n padding-left: ${mediumPadding};\n }\n \n :host([hide-step]) .control {\n padding-right: ${smallPadding};\n }\n\n .control:hover,\n .control:focus,\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n :host([disabled][appearance-readonly]) .control {\n cursor: text;\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n :host([disabled]) .control::placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .controls {\n display: contents;\n }\n\n ${\n /* We are using flex `order` to define the visual ordering of the inc/dec buttons\n and the invalid icon because they are not \"interactive\" i.e. part of the tab order */ ''\n }\n .step-up {\n order: 3;\n padding-right: ${smallPadding};\n }\n\n .step-down {\n order: 2;\n }\n\n .step-up-down-button {\n ${controlHeight.cssCustomProperty}: 24px;\n }\n\n [part='end'] {\n display: contents;\n }\n\n .error-icon {\n order: 1;\n margin-right: ${smallPadding};\n }\n`.withBehaviors(\n appearanceBehavior(\n NumberFieldAppearance.underline,\n css`\n .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n appearanceBehavior(\n NumberFieldAppearance.block,\n css`\n .root {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .root:focus-within,\n :host([error-visible]) .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host(:hover) .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host([readonly]) .root,\n :host([disabled]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n border-color: transparent;\n }\n\n :host([error-visible][readonly]) .root,\n :host([error-visible][disabled]) .root {\n padding-bottom: 0;\n border-bottom-color: ${failColor};\n }\n `\n ),\n appearanceBehavior(\n NumberFieldAppearance.outline,\n css`\n .root {\n border-width: ${borderWidth};\n padding: 0;\n }\n `\n ),\n appearanceBehavior(\n NumberFieldAppearance.frameless,\n css`\n .root {\n padding-left: ${borderWidth};\n padding-right: ${borderWidth};\n }\n\n :host([full-bleed]) .control {\n padding-left: 0px;\n padding-right: 0px;\n }\n `\n )\n);\n"]}
|
|
@@ -14,6 +14,11 @@ declare global {
|
|
|
14
14
|
export declare class TableGroupRow extends FoundationElement {
|
|
15
15
|
groupRowValue?: unknown;
|
|
16
16
|
nestingLevel: number;
|
|
17
|
+
pinnedColumnOffset: number;
|
|
18
|
+
/**
|
|
19
|
+
* @internal
|
|
20
|
+
*/
|
|
21
|
+
hasPinnedColumns: boolean;
|
|
17
22
|
/**
|
|
18
23
|
* Row index in the flattened set of all regular and group header rows.
|
|
19
24
|
* Represents the index in table.tableData (TableRowState[]).
|
|
@@ -46,6 +51,7 @@ export declare class TableGroupRow extends FoundationElement {
|
|
|
46
51
|
onSelectionCheckboxChange(event: CustomEvent): void;
|
|
47
52
|
/** @internal */
|
|
48
53
|
getFocusableElements(): TableRowFocusableElements;
|
|
54
|
+
private pinnedColumnOffsetChanged;
|
|
49
55
|
private selectionStateChanged;
|
|
50
56
|
private selectionCheckboxChanged;
|
|
51
57
|
private setSelectionCheckboxState;
|
|
@@ -12,6 +12,11 @@ export class TableGroupRow extends FoundationElement {
|
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments);
|
|
14
14
|
this.nestingLevel = 0;
|
|
15
|
+
this.pinnedColumnOffset = 0;
|
|
16
|
+
/**
|
|
17
|
+
* @internal
|
|
18
|
+
*/
|
|
19
|
+
this.hasPinnedColumns = false;
|
|
15
20
|
this.expanded = false;
|
|
16
21
|
this.selectable = false;
|
|
17
22
|
this.selectionState = TableRowSelectionState.notSelected;
|
|
@@ -69,6 +74,9 @@ export class TableGroupRow extends FoundationElement {
|
|
|
69
74
|
cells: []
|
|
70
75
|
};
|
|
71
76
|
}
|
|
77
|
+
pinnedColumnOffsetChanged() {
|
|
78
|
+
this.hasPinnedColumns = this.pinnedColumnOffset > 0;
|
|
79
|
+
}
|
|
72
80
|
selectionStateChanged() {
|
|
73
81
|
this.setSelectionCheckboxState();
|
|
74
82
|
}
|
|
@@ -91,6 +99,12 @@ __decorate([
|
|
|
91
99
|
__decorate([
|
|
92
100
|
observable
|
|
93
101
|
], TableGroupRow.prototype, "nestingLevel", void 0);
|
|
102
|
+
__decorate([
|
|
103
|
+
observable
|
|
104
|
+
], TableGroupRow.prototype, "pinnedColumnOffset", void 0);
|
|
105
|
+
__decorate([
|
|
106
|
+
attr({ attribute: 'has-pinned-columns', mode: 'boolean' })
|
|
107
|
+
], TableGroupRow.prototype, "hasPinnedColumns", void 0);
|
|
94
108
|
__decorate([
|
|
95
109
|
observable
|
|
96
110
|
], TableGroupRow.prototype, "resolvedRowIndex", void 0);
|
|
@@ -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;
|
|
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;QAGjB,uBAAkB,GAAG,CAAC,CAAC;QAE9B;;WAEG;QAEI,qBAAgB,GAAG,KAAK,CAAC;QAgBzB,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;QAmE3B,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;IAxEU,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,yBAAyB;QAC7B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;IACxD,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;AAzIU;IADN,UAAU;oDACoB;AAGxB;IADN,UAAU;mDACa;AAGjB;IADN,UAAU;yDACmB;AAMvB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uDAC3B;AAOzB;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;AAkF9B,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 @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"]}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { css } from '@ni/fast-element';
|
|
2
2
|
import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
|
|
3
3
|
import { display } from '../../../utilities/style/display';
|
|
4
|
-
import { applicationBackgroundColor, borderHoverColor, borderWidth, controlHeight, fillHoverColor, mediumPadding, standardPadding } from '../../../theme-provider/design-tokens';
|
|
4
|
+
import { applicationBackgroundColor, borderHoverColor, borderWidth, controlHeight, fillHoverColor, mediumPadding, standardPadding, tableRowBorderColor } from '../../../theme-provider/design-tokens';
|
|
5
5
|
import { Theme } from '../../../theme-provider/types';
|
|
6
6
|
import { hexToRgbaCssColor } from '../../../utilities/style/colors';
|
|
7
7
|
import { themeBehavior } from '../../../utilities/style/theme';
|
|
8
8
|
import { userSelectNone } from '../../../utilities/style/user-select';
|
|
9
9
|
import { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';
|
|
10
10
|
import { focusVisible } from '../../../utilities/style/focus';
|
|
11
|
+
import { ZIndexLevels } from '../../../utilities/style/types';
|
|
11
12
|
export const styles = css `
|
|
12
13
|
${display('grid')}
|
|
13
14
|
${expandCollapseStyles}
|
|
@@ -17,6 +18,7 @@ export const styles = css `
|
|
|
17
18
|
height: calc(${controlHeight} + 2 * ${borderWidth});
|
|
18
19
|
border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
|
|
19
20
|
grid-template-columns:
|
|
21
|
+
calc(var(--ni-private-table-group-row-pinned-column-offset))
|
|
20
22
|
calc(
|
|
21
23
|
${controlHeight} *
|
|
22
24
|
(var(--ni-private-table-group-row-indent-level) + 1)
|
|
@@ -26,6 +28,7 @@ export const styles = css `
|
|
|
26
28
|
|
|
27
29
|
:host([selectable]) {
|
|
28
30
|
grid-template-columns:
|
|
31
|
+
calc(var(--ni-private-table-group-row-pinned-column-offset))
|
|
29
32
|
${controlHeight}
|
|
30
33
|
calc(
|
|
31
34
|
${controlHeight} *
|
|
@@ -52,6 +55,37 @@ export const styles = css `
|
|
|
52
55
|
outline-offset: calc(-2 * ${borderWidth});
|
|
53
56
|
}
|
|
54
57
|
|
|
58
|
+
:host([has-pinned-columns]) .pinned-column-spacer {
|
|
59
|
+
display: block;
|
|
60
|
+
height: 100%;
|
|
61
|
+
position: sticky;
|
|
62
|
+
left: 0;
|
|
63
|
+
background: ${tableRowBorderColor};
|
|
64
|
+
z-index: ${ZIndexLevels.zIndex1};
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
:host([allow-hover][has-pinned-columns]:hover) .pinned-column-spacer {
|
|
68
|
+
background: linear-gradient(${fillHoverColor}, ${fillHoverColor}),
|
|
69
|
+
${tableRowBorderColor};
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
:host([has-pinned-columns]${focusVisible}) .pinned-column-spacer {
|
|
73
|
+
box-shadow: inset 2px -2px 0 ${borderHoverColor};
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.checkbox-container {
|
|
77
|
+
display: flex;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
:host([has-pinned-columns]) .checkbox-container {
|
|
81
|
+
position: relative;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
:host([allow-hover][has-pinned-columns]:hover) .checkbox-container {
|
|
85
|
+
background: linear-gradient(${fillHoverColor}, ${fillHoverColor}),
|
|
86
|
+
${tableRowBorderColor};
|
|
87
|
+
}
|
|
88
|
+
|
|
55
89
|
.expand-collapse-button {
|
|
56
90
|
margin-left: calc(
|
|
57
91
|
${mediumPadding} + ${standardPadding} * 2 *
|
|
@@ -77,10 +111,6 @@ export const styles = css `
|
|
|
77
111
|
${userSelectNone}
|
|
78
112
|
}
|
|
79
113
|
|
|
80
|
-
.checkbox-container {
|
|
81
|
-
display: flex;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
114
|
.selection-checkbox {
|
|
85
115
|
margin-left: ${standardPadding};
|
|
86
116
|
}
|
|
@@ -92,9 +122,65 @@ export const styles = css `
|
|
|
92
122
|
:host([allow-hover]:hover)::before {
|
|
93
123
|
background-color: ${hexToRgbaCssColor(White, 0.05)};
|
|
94
124
|
}
|
|
125
|
+
|
|
126
|
+
:host([has-pinned-columns]) .pinned-column-spacer {
|
|
127
|
+
background: linear-gradient(
|
|
128
|
+
${hexToRgbaCssColor(White, 0.1)},
|
|
129
|
+
${hexToRgbaCssColor(White, 0.1)}
|
|
130
|
+
),
|
|
131
|
+
${tableRowBorderColor};
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
:host([allow-hover][has-pinned-columns]:hover) .pinned-column-spacer {
|
|
135
|
+
background: linear-gradient(
|
|
136
|
+
${hexToRgbaCssColor(White, 0.05)},
|
|
137
|
+
${hexToRgbaCssColor(White, 0.05)}
|
|
138
|
+
),
|
|
139
|
+
linear-gradient(
|
|
140
|
+
${hexToRgbaCssColor(White, 0.1)},
|
|
141
|
+
${hexToRgbaCssColor(White, 0.1)}
|
|
142
|
+
),
|
|
143
|
+
${tableRowBorderColor};
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
:host([has-pinned-columns]) .checkbox-container {
|
|
147
|
+
background: linear-gradient(
|
|
148
|
+
${hexToRgbaCssColor(White, 0.1)},
|
|
149
|
+
${hexToRgbaCssColor(White, 0.1)}
|
|
150
|
+
),
|
|
151
|
+
${tableRowBorderColor};
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
:host([allow-hover][has-pinned-columns]:hover) .checkbox-container {
|
|
155
|
+
background: linear-gradient(
|
|
156
|
+
${hexToRgbaCssColor(White, 0.05)},
|
|
157
|
+
${hexToRgbaCssColor(White, 0.05)}
|
|
158
|
+
),
|
|
159
|
+
linear-gradient(
|
|
160
|
+
${hexToRgbaCssColor(White, 0.1)},
|
|
161
|
+
${hexToRgbaCssColor(White, 0.1)}
|
|
162
|
+
),
|
|
163
|
+
${tableRowBorderColor};
|
|
164
|
+
}
|
|
95
165
|
`), themeBehavior(Theme.dark, css `
|
|
96
166
|
:host([allow-hover]:hover)::before {
|
|
97
167
|
background-color: ${hexToRgbaCssColor(White, 0.1)};
|
|
98
168
|
}
|
|
169
|
+
|
|
170
|
+
:host([allow-hover][has-pinned-columns]:hover) .pinned-column-spacer {
|
|
171
|
+
background: linear-gradient(
|
|
172
|
+
${hexToRgbaCssColor(White, 0.1)},
|
|
173
|
+
${hexToRgbaCssColor(White, 0.1)}
|
|
174
|
+
),
|
|
175
|
+
${tableRowBorderColor};
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
:host([allow-hover][has-pinned-columns]:hover) .checkbox-container {
|
|
179
|
+
background: linear-gradient(
|
|
180
|
+
${hexToRgbaCssColor(White, 0.1)},
|
|
181
|
+
${hexToRgbaCssColor(White, 0.1)}
|
|
182
|
+
),
|
|
183
|
+
${tableRowBorderColor};
|
|
184
|
+
}
|
|
99
185
|
`));
|
|
100
186
|
//# sourceMappingURL=styles.js.map
|
|
@@ -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,
|
|
1
|
+
{"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"]}
|
|
@@ -9,8 +9,13 @@ export const template = html `
|
|
|
9
9
|
role="row"
|
|
10
10
|
@click=${x => x.onGroupExpandToggle()}
|
|
11
11
|
aria-expanded=${x => x.expanded}
|
|
12
|
-
style="
|
|
12
|
+
style="
|
|
13
|
+
--ni-private-table-group-row-indent-level: ${x => x.nestingLevel};
|
|
14
|
+
--ni-private-table-group-row-pinned-column-offset: ${x => x.pinnedColumnOffset}px;
|
|
15
|
+
"
|
|
13
16
|
>
|
|
17
|
+
<span class="pinned-column-spacer"></span>
|
|
18
|
+
|
|
14
19
|
${when(x => x.selectable, html `
|
|
15
20
|
<span role="gridcell" class="checkbox-container">
|
|
16
21
|
<${checkboxTag}
|
|
@@ -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
|
|
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"]}
|
|
@@ -3,6 +3,7 @@ import { Observable, attr, observable, volatile } from '@ni/fast-element';
|
|
|
3
3
|
import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
|
|
4
4
|
import { styles } from './styles';
|
|
5
5
|
import { template } from './template';
|
|
6
|
+
import { TableColumnPinLocation } from '../../types';
|
|
6
7
|
import { tableCellTag } from '../cell';
|
|
7
8
|
import { ColumnInternals, isColumnInternalsProperty } from '../../../table-column/base/models/column-internals';
|
|
8
9
|
/**
|
|
@@ -181,8 +182,9 @@ export class TableRow extends FoundationElement {
|
|
|
181
182
|
this.updateCellIndentLevels();
|
|
182
183
|
}
|
|
183
184
|
updateCellIndentLevels() {
|
|
185
|
+
const firstNonPinnedIndex = this.columns.findIndex(col => col.columnInternals.pinLocation !== TableColumnPinLocation.left);
|
|
184
186
|
this.cellIndentLevels = this.columns.map((_, i) => {
|
|
185
|
-
return i ===
|
|
187
|
+
return i === firstNonPinnedIndex ? this.nestingLevel : 0;
|
|
186
188
|
});
|
|
187
189
|
}
|
|
188
190
|
removeColumnObservers() {
|