@ni/ok-components 1.14.0 → 1.15.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 +309 -487
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +58 -235
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +274 -274
- package/dist/custom-elements.md +50 -50
- package/dist/esm/fv/split-button/styles.js +45 -5
- package/dist/esm/fv/split-button/styles.js.map +1 -1
- package/dist/esm/fv/split-button/template.js +3 -1
- package/dist/esm/fv/split-button/template.js.map +1 -1
- package/dist/esm/fv/split-button-anchor/index.d.ts +2 -2
- package/dist/esm/fv/split-button-anchor/index.js +4 -4
- package/dist/esm/fv/split-button-anchor/index.js.map +1 -1
- package/dist/esm/fv/split-button-anchor/styles.d.ts +1 -1
- package/dist/esm/fv/split-button-anchor/styles.js +1 -227
- package/dist/esm/fv/split-button-anchor/styles.js.map +1 -1
- package/dist/esm/fv/split-button-anchor/template.js +9 -4
- package/dist/esm/fv/split-button-anchor/template.js.map +1 -1
- package/package.json +1 -1
package/dist/custom-elements.md
CHANGED
|
@@ -8,32 +8,6 @@
|
|
|
8
8
|
|
|
9
9
|
<hr/>
|
|
10
10
|
|
|
11
|
-
## class: `FvAccordionItem`
|
|
12
|
-
|
|
13
|
-
### Superclass
|
|
14
|
-
|
|
15
|
-
| Name | Module | Package |
|
|
16
|
-
| ------------------- | ------ | ------------------- |
|
|
17
|
-
| `FoundationElement` | | @ni/fast-foundation |
|
|
18
|
-
|
|
19
|
-
### Fields
|
|
20
|
-
|
|
21
|
-
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
22
|
-
| ------------ | ------- | --------------------------- | ------- | ----------- | -------------- |
|
|
23
|
-
| `header` | public | `string` | `''` | | |
|
|
24
|
-
| `expanded` | public | `boolean` | `false` | | |
|
|
25
|
-
| `appearance` | public | `FvAccordionItemAppearance` | | | |
|
|
26
|
-
|
|
27
|
-
### Attributes
|
|
28
|
-
|
|
29
|
-
| Name | Field | Inherited From |
|
|
30
|
-
| ------------ | ---------- | -------------- |
|
|
31
|
-
| `header` | header | |
|
|
32
|
-
| `expanded` | expanded | |
|
|
33
|
-
| `appearance` | appearance | |
|
|
34
|
-
|
|
35
|
-
<hr/>
|
|
36
|
-
|
|
37
11
|
## class: `FvBulkEditField`
|
|
38
12
|
|
|
39
13
|
### Superclass
|
|
@@ -91,6 +65,32 @@
|
|
|
91
65
|
|
|
92
66
|
<hr/>
|
|
93
67
|
|
|
68
|
+
## class: `FvAccordionItem`
|
|
69
|
+
|
|
70
|
+
### Superclass
|
|
71
|
+
|
|
72
|
+
| Name | Module | Package |
|
|
73
|
+
| ------------------- | ------ | ------------------- |
|
|
74
|
+
| `FoundationElement` | | @ni/fast-foundation |
|
|
75
|
+
|
|
76
|
+
### Fields
|
|
77
|
+
|
|
78
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
79
|
+
| ------------ | ------- | --------------------------- | ------- | ----------- | -------------- |
|
|
80
|
+
| `header` | public | `string` | `''` | | |
|
|
81
|
+
| `expanded` | public | `boolean` | `false` | | |
|
|
82
|
+
| `appearance` | public | `FvAccordionItemAppearance` | | | |
|
|
83
|
+
|
|
84
|
+
### Attributes
|
|
85
|
+
|
|
86
|
+
| Name | Field | Inherited From |
|
|
87
|
+
| ------------ | ---------- | -------------- |
|
|
88
|
+
| `header` | header | |
|
|
89
|
+
| `expanded` | expanded | |
|
|
90
|
+
| `appearance` | appearance | |
|
|
91
|
+
|
|
92
|
+
<hr/>
|
|
93
|
+
|
|
94
94
|
## class: `FvCard`
|
|
95
95
|
|
|
96
96
|
### Superclass
|
|
@@ -532,7 +532,7 @@
|
|
|
532
532
|
|
|
533
533
|
<hr/>
|
|
534
534
|
|
|
535
|
-
## class: `
|
|
535
|
+
## class: `FvSummaryPanelTile`
|
|
536
536
|
|
|
537
537
|
### Superclass
|
|
538
538
|
|
|
@@ -540,6 +540,28 @@
|
|
|
540
540
|
| ------------------- | ------ | ------------------- |
|
|
541
541
|
| `FoundationElement` | | @ni/fast-foundation |
|
|
542
542
|
|
|
543
|
+
### Fields
|
|
544
|
+
|
|
545
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
546
|
+
| -------------- | ------- | ------------------------------------ | ------- | ----------- | -------------- |
|
|
547
|
+
| `count` | public | `string` | `''` | | |
|
|
548
|
+
| `label` | public | `string` | `''` | | |
|
|
549
|
+
| `legacyStyle` | public | `boolean` | `false` | | |
|
|
550
|
+
| `size` | public | `FvSummaryPanelSizeType` | | | |
|
|
551
|
+
| `selected` | public | `boolean` | `false` | | |
|
|
552
|
+
| `textPosition` | public | `FvSummaryPanelTileTextPositionType` | | | |
|
|
553
|
+
|
|
554
|
+
### Attributes
|
|
555
|
+
|
|
556
|
+
| Name | Field | Inherited From |
|
|
557
|
+
| --------------- | ------------ | -------------- |
|
|
558
|
+
| `count` | count | |
|
|
559
|
+
| `label` | label | |
|
|
560
|
+
| `legacy-style` | legacyStyle | |
|
|
561
|
+
| `size` | size | |
|
|
562
|
+
| `selected` | selected | |
|
|
563
|
+
| `text-position` | textPosition | |
|
|
564
|
+
|
|
543
565
|
<hr/>
|
|
544
566
|
|
|
545
567
|
## class: `FvSummaryPanel`
|
|
@@ -576,7 +598,7 @@
|
|
|
576
598
|
|
|
577
599
|
<hr/>
|
|
578
600
|
|
|
579
|
-
## class: `
|
|
601
|
+
## class: `FvStickyHeader`
|
|
580
602
|
|
|
581
603
|
### Superclass
|
|
582
604
|
|
|
@@ -584,28 +606,6 @@
|
|
|
584
606
|
| ------------------- | ------ | ------------------- |
|
|
585
607
|
| `FoundationElement` | | @ni/fast-foundation |
|
|
586
608
|
|
|
587
|
-
### Fields
|
|
588
|
-
|
|
589
|
-
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
590
|
-
| -------------- | ------- | ------------------------------------ | ------- | ----------- | -------------- |
|
|
591
|
-
| `count` | public | `string` | `''` | | |
|
|
592
|
-
| `label` | public | `string` | `''` | | |
|
|
593
|
-
| `legacyStyle` | public | `boolean` | `false` | | |
|
|
594
|
-
| `size` | public | `FvSummaryPanelSizeType` | | | |
|
|
595
|
-
| `selected` | public | `boolean` | `false` | | |
|
|
596
|
-
| `textPosition` | public | `FvSummaryPanelTileTextPositionType` | | | |
|
|
597
|
-
|
|
598
|
-
### Attributes
|
|
599
|
-
|
|
600
|
-
| Name | Field | Inherited From |
|
|
601
|
-
| --------------- | ------------ | -------------- |
|
|
602
|
-
| `count` | count | |
|
|
603
|
-
| `label` | label | |
|
|
604
|
-
| `legacy-style` | legacyStyle | |
|
|
605
|
-
| `size` | size | |
|
|
606
|
-
| `selected` | selected | |
|
|
607
|
-
| `text-position` | textPosition | |
|
|
608
|
-
|
|
609
609
|
<hr/>
|
|
610
610
|
|
|
611
611
|
## class: `FvToolbar`
|
|
@@ -109,9 +109,32 @@ export const styles = css `
|
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
.split-button-primary {
|
|
112
|
+
display: inline-flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
justify-content: center;
|
|
112
115
|
padding: 0 ${standardPadding};
|
|
113
116
|
padding-inline-end: ${mediumPadding};
|
|
114
117
|
white-space: nowrap;
|
|
118
|
+
text-decoration: none;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
slot[name='start']::slotted(*),
|
|
122
|
+
slot[name='end']::slotted(*) {
|
|
123
|
+
flex-shrink: 0;
|
|
124
|
+
color: currentColor;
|
|
125
|
+
${iconColor.cssCustomProperty}: currentColor;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
slot[name='start']::slotted(*) {
|
|
129
|
+
margin-inline-end: ${smallPadding};
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
slot[name='end']::slotted(*) {
|
|
133
|
+
margin-inline-start: ${smallPadding};
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.split-button-primary-disabled {
|
|
137
|
+
cursor: default;
|
|
115
138
|
}
|
|
116
139
|
|
|
117
140
|
.split-button-toggle {
|
|
@@ -145,21 +168,21 @@ export const styles = css `
|
|
|
145
168
|
}
|
|
146
169
|
|
|
147
170
|
@layer hover {
|
|
148
|
-
.split-button-primary:enabled:hover,
|
|
171
|
+
.split-button-primary:is(:enabled, [href]):hover,
|
|
149
172
|
.split-button-toggle:enabled:hover {
|
|
150
173
|
border-color: ${borderHoverColor};
|
|
151
174
|
box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
|
|
152
175
|
z-index: 1;
|
|
153
176
|
}
|
|
154
177
|
|
|
155
|
-
.split-button-primary:enabled:hover + .split-button-toggle::after,
|
|
178
|
+
.split-button-primary:is(:enabled, [href]):hover + .split-button-toggle::after,
|
|
156
179
|
.split-button-toggle:enabled:hover::after {
|
|
157
180
|
visibility: hidden;
|
|
158
181
|
}
|
|
159
182
|
}
|
|
160
183
|
|
|
161
184
|
@layer focusVisible {
|
|
162
|
-
.split-button-primary:enabled:focus-visible,
|
|
185
|
+
.split-button-primary:is(:enabled, [href]):focus-visible,
|
|
163
186
|
.split-button-toggle:enabled:focus-visible {
|
|
164
187
|
border-color: ${borderHoverColor};
|
|
165
188
|
box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
|
|
@@ -178,7 +201,7 @@ export const styles = css `
|
|
|
178
201
|
}
|
|
179
202
|
|
|
180
203
|
@layer active {
|
|
181
|
-
.split-button-primary:enabled:active,
|
|
204
|
+
.split-button-primary:is(:enabled, [href]):active,
|
|
182
205
|
.split-button-toggle:enabled:active,
|
|
183
206
|
:host([open]) .split-button-toggle {
|
|
184
207
|
border-color: ${borderHoverColor};
|
|
@@ -196,7 +219,7 @@ export const styles = css `
|
|
|
196
219
|
visibility: hidden;
|
|
197
220
|
}
|
|
198
221
|
|
|
199
|
-
:host([appearance='block']) .split-button-primary:enabled:active,
|
|
222
|
+
:host([appearance='block']) .split-button-primary:is(:enabled, [href]):active,
|
|
200
223
|
:host([appearance='block']) .split-button-toggle:enabled:active,
|
|
201
224
|
:host([appearance='block'][open]) .split-button-toggle {
|
|
202
225
|
background-color: ${applicationBackgroundColor};
|
|
@@ -214,6 +237,14 @@ export const styles = css `
|
|
|
214
237
|
--ni-private-ok-fv-split-button-color: ${buttonLabelDisabledFontColor};
|
|
215
238
|
}
|
|
216
239
|
|
|
240
|
+
:host([disabled][appearance='block']) {
|
|
241
|
+
--ni-private-ok-fv-split-button-background-image: linear-gradient(
|
|
242
|
+
rgba(${borderRgbPartialColor}, 0.1),
|
|
243
|
+
rgba(${borderRgbPartialColor}, 0.1)
|
|
244
|
+
);
|
|
245
|
+
--ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.1);
|
|
246
|
+
}
|
|
247
|
+
|
|
217
248
|
:host([disabled][appearance='outline']) {
|
|
218
249
|
--ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.3);
|
|
219
250
|
}
|
|
@@ -222,6 +253,15 @@ export const styles = css `
|
|
|
222
253
|
:host([disabled]) .split-button-toggle {
|
|
223
254
|
cursor: default;
|
|
224
255
|
box-shadow: none;
|
|
256
|
+
background-image: none;
|
|
257
|
+
background-size: 100% 100%;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
:host([disabled]) slot[name='start']::slotted(*),
|
|
261
|
+
:host([disabled]) slot[name='end']::slotted(*),
|
|
262
|
+
:host([disabled]) .split-button-toggle > * {
|
|
263
|
+
opacity: 0.3;
|
|
264
|
+
${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
|
|
225
265
|
}
|
|
226
266
|
|
|
227
267
|
:host([disabled][appearance='ghost']) .split-button-primary,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/split-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,qBAAqB,EACrB,0BAA0B,EAC1B,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,0BAA0B,EAC1B,4BAA4B,EAC5B,8BAA8B,EAC9B,qBAAqB,EACrB,sBAAsB,EACtB,4BAA4B,EAC5B,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,2BAA2B,EAC3B,SAAS,EACT,aAAa,EACb,UAAU,EACV,YAAY,EACZ,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;;2DAI0B,qBAAqB;qDAC3B,oBAAoB;;sBAEnD,aAAa;;;;;;;;;;uBAUZ,qBAAqB;uBACrB,qBAAqB;;2DAEe,qBAAqB;;;;0DAItB,qBAAqB;;;;sDAIzB,8BAA8B;qDAC/B,4BAA4B;;;;;kBAK/D,sBAAsB;kBACtB,sBAAsB;;sDAEc,sBAAsB;qDACvB,sBAAsB;;;;;kBAKzD,qBAAqB;kBACrB,qBAAqB;;sDAEe,qBAAqB;qDACtB,0BAA0B;;;;;;;;;;;;;;sBAczD,WAAW;;;;;;;;;;;;;;sBAcX,WAAW;;;;;;;;oBAQb,eAAe;;;;6BAIN,UAAU;+BACR,UAAU;kCACP,UAAU;;;;;;;;;;;kCAWV,UAAU;;;;yBAInB,eAAe;kCACN,aAAa;;;;;qBAK1B,aAAa;yBACT,aAAa;;;;;;;;;;2BAUX,YAAY;4CACK,WAAW;8BACzB,WAAW;+BACV,qBAAqB;;;;;;cAMtC,SAAS,CAAC,iBAAiB;;;;;sBAKnB,YAAY;;;;;;;4BAON,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;;;;;;;4BAanC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;uBAMxC,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;4BAahC,gBAAgB;;gDAEI,iBAAiB,KAAK,iBAAiB;;;;;iCAKtD,2BAA2B;;;;;;;;;;;gCAW5B,0BAA0B;;;;;;qBAMrC,4BAA4B;;;;;;qDAMI,4BAA4B;;;;2DAItB,qBAAqB;;;;;;;;;;;;;;;;CAgB/E,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n actionRgbPartialColor,\n applicationBackgroundColor,\n borderHoverColor,\n borderRgbPartialColor,\n borderWidth,\n buttonAccentBlockFontColor,\n buttonAccentOutlineFontColor,\n buttonBorderAccentOutlineColor,\n buttonFillAccentColor,\n buttonFillPrimaryColor,\n buttonLabelDisabledFontColor,\n buttonLabelFont,\n buttonLabelFontColor,\n buttonPrimaryFontColor,\n controlHeight,\n fillSelectedColor,\n fillSelectedRgbPartialColor,\n iconColor,\n mediumPadding,\n smallDelay,\n smallPadding,\n standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-block')}\n\n :host {\n --ni-private-ok-fv-split-button-background-image: none;\n --ni-private-ok-fv-split-button-border: rgba(${actionRgbPartialColor}, 0.3);\n --ni-private-ok-fv-split-button-color: ${buttonLabelFontColor};\n position: relative;\n height: ${controlHeight};\n vertical-align: middle;\n }\n\n :host([appearance='ghost']) {\n --ni-private-ok-fv-split-button-border: transparent;\n }\n\n :host([appearance='block']) {\n --ni-private-ok-fv-split-button-background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([appearance='outline'][appearance-variant='primary']) {\n --ni-private-ok-fv-split-button-border: rgb(${actionRgbPartialColor});\n }\n\n :host([appearance='outline'][appearance-variant='accent']) {\n --ni-private-ok-fv-split-button-border: ${buttonBorderAccentOutlineColor};\n --ni-private-ok-fv-split-button-color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance='block'][appearance-variant='primary']) {\n --ni-private-ok-fv-split-button-background-image: linear-gradient(\n ${buttonFillPrimaryColor},\n ${buttonFillPrimaryColor}\n );\n --ni-private-ok-fv-split-button-border: ${buttonFillPrimaryColor};\n --ni-private-ok-fv-split-button-color: ${buttonPrimaryFontColor};\n }\n\n :host([appearance='block'][appearance-variant='accent']) {\n --ni-private-ok-fv-split-button-background-image: linear-gradient(\n ${buttonFillAccentColor},\n ${buttonFillAccentColor}\n );\n --ni-private-ok-fv-split-button-border: ${buttonFillAccentColor};\n --ni-private-ok-fv-split-button-color: ${buttonAccentBlockFontColor};\n }\n\n .split-button-container {\n position: relative;\n display: inline-flex;\n align-items: stretch;\n height: 100%;\n }\n\n .split-button-container::before {\n content: '';\n position: absolute;\n inset: 0;\n border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-border);\n background-image: var(--ni-private-ok-fv-split-button-background-image);\n background-repeat: no-repeat;\n pointer-events: none;\n }\n\n .split-button-primary,\n .split-button-toggle {\n appearance: none;\n position: relative;\n z-index: 0;\n height: 100%;\n box-sizing: border-box;\n margin: 0;\n border: ${borderWidth} solid transparent;\n background-color: transparent;\n background-position: center;\n background-repeat: no-repeat;\n background-origin: border-box;\n background-size: 100% 100%;\n color: var(--ni-private-ok-fv-split-button-color);\n fill: currentcolor;\n font: ${buttonLabelFont};\n cursor: pointer;\n outline: none;\n transition:\n box-shadow ${smallDelay} ease-in-out,\n border-color ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-in-out;\n }\n\n .split-button-primary::before,\n .split-button-toggle::before {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n outline: 0px solid transparent;\n outline-offset: -3px;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .split-button-primary {\n padding: 0 ${standardPadding};\n padding-inline-end: ${mediumPadding};\n white-space: nowrap;\n }\n\n .split-button-toggle {\n width: ${controlHeight};\n min-width: ${controlHeight};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n }\n\n .split-button-toggle::after {\n content: '';\n position: absolute;\n inset-block: ${smallPadding};\n inset-inline-start: calc(-1 * ${borderWidth});\n width: calc(2 * ${borderWidth});\n background: rgba(${borderRgbPartialColor}, 0.1);\n pointer-events: none;\n }\n\n .split-button-toggle > * {\n color: currentColor;\n ${iconColor.cssCustomProperty}: currentColor;\n }\n\n slot[name='menu']::slotted(*) {\n min-width: 100%;\n margin: ${smallPadding} 0 0;\n }\n }\n\n @layer hover {\n .split-button-primary:enabled:hover,\n .split-button-toggle:enabled:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n z-index: 1;\n }\n\n .split-button-primary:enabled:hover + .split-button-toggle::after,\n .split-button-toggle:enabled:hover::after {\n visibility: hidden;\n }\n }\n\n @layer focusVisible {\n .split-button-primary:enabled:focus-visible,\n .split-button-toggle:enabled:focus-visible {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n z-index: 1;\n }\n\n .split-button-primary:focus-visible::before,\n .split-button-toggle:focus-visible::before {\n outline: ${borderWidth} solid ${borderHoverColor};\n }\n\n .split-button-primary:focus-visible + .split-button-toggle::after,\n .split-button-toggle:focus-visible::after {\n visibility: hidden;\n }\n }\n\n @layer active {\n .split-button-primary:enabled:active,\n .split-button-toggle:enabled:active,\n :host([open]) .split-button-toggle {\n border-color: ${borderHoverColor};\n box-shadow: none;\n background-image: linear-gradient(${fillSelectedColor}, ${fillSelectedColor});\n background-size: calc(100% - 2px) calc(100% - 2px);\n }\n\n :host([open]) .split-button-toggle {\n border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);\n background-size: 100% 100%;\n }\n\n :host([open]) .split-button-toggle::after {\n visibility: hidden;\n }\n\n :host([appearance='block']) .split-button-primary:enabled:active,\n :host([appearance='block']) .split-button-toggle:enabled:active,\n :host([appearance='block'][open]) .split-button-toggle {\n background-color: ${applicationBackgroundColor};\n }\n\n :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,\n :host([appearance='outline'][appearance-variant='accent']) .split-button-toggle:active,\n :host([appearance='outline'][appearance-variant='accent'][open]) .split-button-toggle {\n color: ${buttonAccentOutlineFontColor};\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n --ni-private-ok-fv-split-button-color: ${buttonLabelDisabledFontColor};\n }\n\n :host([disabled][appearance='outline']) {\n --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.3);\n }\n\n :host([disabled]) .split-button-primary,\n :host([disabled]) .split-button-toggle {\n cursor: default;\n box-shadow: none;\n }\n\n :host([disabled][appearance='ghost']) .split-button-primary,\n :host([disabled][appearance='ghost']) .split-button-toggle {\n border-color: transparent;\n }\n }\n\n @layer top {}\n`;"]}
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/split-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,qBAAqB,EACrB,0BAA0B,EAC1B,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,0BAA0B,EAC1B,4BAA4B,EAC5B,8BAA8B,EAC9B,qBAAqB,EACrB,sBAAsB,EACtB,4BAA4B,EAC5B,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,2BAA2B,EAC3B,SAAS,EACT,aAAa,EACb,UAAU,EACV,YAAY,EACZ,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;;2DAI0B,qBAAqB;qDAC3B,oBAAoB;;sBAEnD,aAAa;;;;;;;;;;uBAUZ,qBAAqB;uBACrB,qBAAqB;;2DAEe,qBAAqB;;;;0DAItB,qBAAqB;;;;sDAIzB,8BAA8B;qDAC/B,4BAA4B;;;;;kBAK/D,sBAAsB;kBACtB,sBAAsB;;sDAEc,sBAAsB;qDACvB,sBAAsB;;;;;kBAKzD,qBAAqB;kBACrB,qBAAqB;;sDAEe,qBAAqB;qDACtB,0BAA0B;;;;;;;;;;;;;;sBAczD,WAAW;;;;;;;;;;;;;;sBAcX,WAAW;;;;;;;;oBAQb,eAAe;;;;6BAIN,UAAU;+BACR,UAAU;kCACP,UAAU;;;;;;;;;;;kCAWV,UAAU;;;;;;;yBAOnB,eAAe;kCACN,aAAa;;;;;;;;;cASjC,SAAS,CAAC,iBAAiB;;;;iCAIR,YAAY;;;;mCAIV,YAAY;;;;;;;;qBAQ1B,aAAa;yBACT,aAAa;;;;;;;;;;2BAUX,YAAY;4CACK,WAAW;8BACzB,WAAW;+BACV,qBAAqB;;;;;;cAMtC,SAAS,CAAC,iBAAiB;;;;;sBAKnB,YAAY;;;;;;;4BAON,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;;;;;;;4BAanC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;uBAMxC,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;4BAahC,gBAAgB;;gDAEI,iBAAiB,KAAK,iBAAiB;;;;;iCAKtD,2BAA2B;;;;;;;;;;;gCAW5B,0BAA0B;;;;;;qBAMrC,4BAA4B;;;;;;qDAMI,4BAA4B;;;;;uBAK1D,qBAAqB;uBACrB,qBAAqB;;2DAEe,qBAAqB;;;;2DAIrB,qBAAqB;;;;;;;;;;;;;;;cAelE,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;CAUjE,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n actionRgbPartialColor,\n applicationBackgroundColor,\n borderHoverColor,\n borderRgbPartialColor,\n borderWidth,\n buttonAccentBlockFontColor,\n buttonAccentOutlineFontColor,\n buttonBorderAccentOutlineColor,\n buttonFillAccentColor,\n buttonFillPrimaryColor,\n buttonLabelDisabledFontColor,\n buttonLabelFont,\n buttonLabelFontColor,\n buttonPrimaryFontColor,\n controlHeight,\n fillSelectedColor,\n fillSelectedRgbPartialColor,\n iconColor,\n mediumPadding,\n smallDelay,\n smallPadding,\n standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-block')}\n\n :host {\n --ni-private-ok-fv-split-button-background-image: none;\n --ni-private-ok-fv-split-button-border: rgba(${actionRgbPartialColor}, 0.3);\n --ni-private-ok-fv-split-button-color: ${buttonLabelFontColor};\n position: relative;\n height: ${controlHeight};\n vertical-align: middle;\n }\n\n :host([appearance='ghost']) {\n --ni-private-ok-fv-split-button-border: transparent;\n }\n\n :host([appearance='block']) {\n --ni-private-ok-fv-split-button-background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([appearance='outline'][appearance-variant='primary']) {\n --ni-private-ok-fv-split-button-border: rgb(${actionRgbPartialColor});\n }\n\n :host([appearance='outline'][appearance-variant='accent']) {\n --ni-private-ok-fv-split-button-border: ${buttonBorderAccentOutlineColor};\n --ni-private-ok-fv-split-button-color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance='block'][appearance-variant='primary']) {\n --ni-private-ok-fv-split-button-background-image: linear-gradient(\n ${buttonFillPrimaryColor},\n ${buttonFillPrimaryColor}\n );\n --ni-private-ok-fv-split-button-border: ${buttonFillPrimaryColor};\n --ni-private-ok-fv-split-button-color: ${buttonPrimaryFontColor};\n }\n\n :host([appearance='block'][appearance-variant='accent']) {\n --ni-private-ok-fv-split-button-background-image: linear-gradient(\n ${buttonFillAccentColor},\n ${buttonFillAccentColor}\n );\n --ni-private-ok-fv-split-button-border: ${buttonFillAccentColor};\n --ni-private-ok-fv-split-button-color: ${buttonAccentBlockFontColor};\n }\n\n .split-button-container {\n position: relative;\n display: inline-flex;\n align-items: stretch;\n height: 100%;\n }\n\n .split-button-container::before {\n content: '';\n position: absolute;\n inset: 0;\n border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-border);\n background-image: var(--ni-private-ok-fv-split-button-background-image);\n background-repeat: no-repeat;\n pointer-events: none;\n }\n\n .split-button-primary,\n .split-button-toggle {\n appearance: none;\n position: relative;\n z-index: 0;\n height: 100%;\n box-sizing: border-box;\n margin: 0;\n border: ${borderWidth} solid transparent;\n background-color: transparent;\n background-position: center;\n background-repeat: no-repeat;\n background-origin: border-box;\n background-size: 100% 100%;\n color: var(--ni-private-ok-fv-split-button-color);\n fill: currentcolor;\n font: ${buttonLabelFont};\n cursor: pointer;\n outline: none;\n transition:\n box-shadow ${smallDelay} ease-in-out,\n border-color ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-in-out;\n }\n\n .split-button-primary::before,\n .split-button-toggle::before {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n outline: 0px solid transparent;\n outline-offset: -3px;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .split-button-primary {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0 ${standardPadding};\n padding-inline-end: ${mediumPadding};\n white-space: nowrap;\n text-decoration: none;\n }\n\n slot[name='start']::slotted(*),\n slot[name='end']::slotted(*) {\n flex-shrink: 0;\n color: currentColor;\n ${iconColor.cssCustomProperty}: currentColor;\n }\n\n slot[name='start']::slotted(*) {\n margin-inline-end: ${smallPadding};\n }\n\n slot[name='end']::slotted(*) {\n margin-inline-start: ${smallPadding};\n }\n\n .split-button-primary-disabled {\n cursor: default;\n }\n\n .split-button-toggle {\n width: ${controlHeight};\n min-width: ${controlHeight};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n }\n\n .split-button-toggle::after {\n content: '';\n position: absolute;\n inset-block: ${smallPadding};\n inset-inline-start: calc(-1 * ${borderWidth});\n width: calc(2 * ${borderWidth});\n background: rgba(${borderRgbPartialColor}, 0.1);\n pointer-events: none;\n }\n\n .split-button-toggle > * {\n color: currentColor;\n ${iconColor.cssCustomProperty}: currentColor;\n }\n\n slot[name='menu']::slotted(*) {\n min-width: 100%;\n margin: ${smallPadding} 0 0;\n }\n }\n\n @layer hover {\n .split-button-primary:is(:enabled, [href]):hover,\n .split-button-toggle:enabled:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n z-index: 1;\n }\n\n .split-button-primary:is(:enabled, [href]):hover + .split-button-toggle::after,\n .split-button-toggle:enabled:hover::after {\n visibility: hidden;\n }\n }\n\n @layer focusVisible {\n .split-button-primary:is(:enabled, [href]):focus-visible,\n .split-button-toggle:enabled:focus-visible {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n z-index: 1;\n }\n\n .split-button-primary:focus-visible::before,\n .split-button-toggle:focus-visible::before {\n outline: ${borderWidth} solid ${borderHoverColor};\n }\n\n .split-button-primary:focus-visible + .split-button-toggle::after,\n .split-button-toggle:focus-visible::after {\n visibility: hidden;\n }\n }\n\n @layer active {\n .split-button-primary:is(:enabled, [href]):active,\n .split-button-toggle:enabled:active,\n :host([open]) .split-button-toggle {\n border-color: ${borderHoverColor};\n box-shadow: none;\n background-image: linear-gradient(${fillSelectedColor}, ${fillSelectedColor});\n background-size: calc(100% - 2px) calc(100% - 2px);\n }\n\n :host([open]) .split-button-toggle {\n border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);\n background-size: 100% 100%;\n }\n\n :host([open]) .split-button-toggle::after {\n visibility: hidden;\n }\n\n :host([appearance='block']) .split-button-primary:is(:enabled, [href]):active,\n :host([appearance='block']) .split-button-toggle:enabled:active,\n :host([appearance='block'][open]) .split-button-toggle {\n background-color: ${applicationBackgroundColor};\n }\n\n :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,\n :host([appearance='outline'][appearance-variant='accent']) .split-button-toggle:active,\n :host([appearance='outline'][appearance-variant='accent'][open]) .split-button-toggle {\n color: ${buttonAccentOutlineFontColor};\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n --ni-private-ok-fv-split-button-color: ${buttonLabelDisabledFontColor};\n }\n\n :host([disabled][appearance='block']) {\n --ni-private-ok-fv-split-button-background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled][appearance='outline']) {\n --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.3);\n }\n\n :host([disabled]) .split-button-primary,\n :host([disabled]) .split-button-toggle {\n cursor: default;\n box-shadow: none;\n background-image: none;\n background-size: 100% 100%;\n }\n\n :host([disabled]) slot[name='start']::slotted(*),\n :host([disabled]) slot[name='end']::slotted(*),\n :host([disabled]) .split-button-toggle > * {\n opacity: 0.3;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n :host([disabled][appearance='ghost']) .split-button-primary,\n :host([disabled][appearance='ghost']) .split-button-toggle {\n border-color: transparent;\n }\n }\n\n @layer top {}\n`;"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/split-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,0DAA0D,CAAC;AACpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAGnF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAe;;;;;;;yBAOlB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;sBAClB,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,kBAAkB,EAAE,CAAC;IACvB,OAAO,IAAI,CAAC;AAChB,CAAC
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/split-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,0DAA0D,CAAC;AACpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAGnF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAe;;;;;;;yBAOlB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;sBAClB,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,kBAAkB,EAAE,CAAC;IACvB,OAAO,IAAI,CAAC;AAChB,CAAC;;;oBAGO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;;;;;cAKlB,GAAG,CAAC,cAAc,CAAC;;yBAER,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;0BACd,CAAC,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,KAAK,EAAE;6BAC/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;sBAElB,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACtB,OAAO,IAAI,CAAC;AAChB,CAAC;;eAEE,wBAAwB,MAAM,wBAAwB;;;MAG/D,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAe;eACZ,iBAAiB;;;;;;;;kBAQd,GAAG,CAAC,QAAQ,CAAC;;;;;gBAKf,iBAAiB;SACxB,CACJ;CACJ,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport { iconArrowExpanderDownTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-down';\nimport { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';\nimport type { FvSplitButton } from '.';\n\nexport const template = html<FvSplitButton>`\n <div\n class=\"split-button-container\"\n >\n <button\n class=\"split-button-primary\"\n type=\"button\"\n ?disabled=\"${x => x.disabled}\"\n @click=\"${x => {\n x.handlePrimaryClick();\n return true;\n }}\"\n >\n <slot name=\"start\"></slot>\n <span>${x => x.label}</span>\n <slot name=\"end\"></slot>\n </button>\n <button\n class=\"split-button-toggle\"\n ${ref('toggleButton')}\n type=\"button\"\n ?disabled=\"${x => x.disabled}\"\n aria-label=\"${x => `More actions for ${x.label}`}\"\n aria-expanded=\"${x => x.open}\"\n aria-haspopup=\"menu\"\n @click=\"${x => {\n x.handleToggleClick();\n return true;\n }}\"\n >\n <${iconArrowExpanderDownTag}></${iconArrowExpanderDownTag}>\n </button>\n </div>\n ${when(\n x => x.open,\n html<FvSplitButton>`\n <${anchoredRegionTag}\n fixed-placement\n auto-update-mode=\"auto\"\n horizontal-inset\n horizontal-positioning-mode=\"dynamic\"\n horizontal-default-position=\"end\"\n vertical-positioning-mode=\"locktodefault\"\n vertical-default-position=\"bottom\"\n ${ref('region')}\n >\n <span part=\"menu\">\n <slot name=\"menu\"></slot>\n </span>\n </${anchoredRegionTag}>\n `\n )}\n`;"]}
|
|
@@ -20,7 +20,7 @@ export declare class FvSplitButtonAnchor extends FoundationElement {
|
|
|
20
20
|
appearance: FvSplitButtonAnchorAppearanceType;
|
|
21
21
|
appearanceVariant: FvSplitButtonAnchorAppearanceVariantType;
|
|
22
22
|
/** @internal */
|
|
23
|
-
|
|
23
|
+
toggleButton?: HTMLButtonElement;
|
|
24
24
|
/** @internal */
|
|
25
25
|
region?: AnchoredRegion;
|
|
26
26
|
/** @internal */
|
|
@@ -38,7 +38,7 @@ export declare class FvSplitButtonAnchor extends FoundationElement {
|
|
|
38
38
|
/** @internal */
|
|
39
39
|
regionChanged(prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void;
|
|
40
40
|
/** @internal */
|
|
41
|
-
|
|
41
|
+
toggleButtonChanged(): void;
|
|
42
42
|
private readonly documentClickHandler;
|
|
43
43
|
private readonly keydownHandler;
|
|
44
44
|
private readonly menuChangeHandler;
|
|
@@ -81,14 +81,14 @@ export class FvSplitButtonAnchor extends FoundationElement {
|
|
|
81
81
|
prev.removeEventListener('change', this.menuChangeHandler);
|
|
82
82
|
}
|
|
83
83
|
if (this.region) {
|
|
84
|
-
this.region.anchorElement = this.
|
|
84
|
+
this.region.anchorElement = this.toggleButton ?? this;
|
|
85
85
|
this.region.addEventListener('change', this.menuChangeHandler, { capture: true });
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
/** @internal */
|
|
89
|
-
|
|
89
|
+
toggleButtonChanged() {
|
|
90
90
|
if (this.region) {
|
|
91
|
-
this.region.anchorElement = this.
|
|
91
|
+
this.region.anchorElement = this.toggleButton ?? this;
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
setOpen(nextOpen) {
|
|
@@ -132,7 +132,7 @@ __decorate([
|
|
|
132
132
|
], FvSplitButtonAnchor.prototype, "appearanceVariant", void 0);
|
|
133
133
|
__decorate([
|
|
134
134
|
observable
|
|
135
|
-
], FvSplitButtonAnchor.prototype, "
|
|
135
|
+
], FvSplitButtonAnchor.prototype, "toggleButton", void 0);
|
|
136
136
|
__decorate([
|
|
137
137
|
observable
|
|
138
138
|
], FvSplitButtonAnchor.prototype, "region", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/split-button-anchor/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/split-button-anchor/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 { AnchoredRegion } from '@ni/nimble-components/dist/esm/anchored-region';\nimport { styles } from './styles';\nimport { template } from './template';\nimport {\n FvSplitButtonAnchorAppearance,\n type FvSplitButtonAnchorAppearance as FvSplitButtonAnchorAppearanceType,\n FvSplitButtonAnchorAppearanceVariant,\n type FvSplitButtonAnchorAppearanceVariant as FvSplitButtonAnchorAppearanceVariantType\n} from './types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ok-fv-split-button-anchor': FvSplitButtonAnchor;\n }\n}\n\n/**\n * A split button with an anchor-backed primary action and a secondary expandable menu surface.\n */\nexport class FvSplitButtonAnchor extends FoundationElement {\n @attr\n public label = 'Primary function';\n\n @attr\n public href = '';\n\n @attr\n public target = '';\n\n @attr\n public rel = '';\n\n @attr\n public download = '';\n\n @attr({ mode: 'boolean' })\n public disabled = false;\n\n @attr({ mode: 'boolean' })\n public open = false;\n\n @attr()\n public appearance: FvSplitButtonAnchorAppearanceType = FvSplitButtonAnchorAppearance.outline;\n\n @attr({ attribute: 'appearance-variant' })\n public appearanceVariant: FvSplitButtonAnchorAppearanceVariantType = FvSplitButtonAnchorAppearanceVariant.default;\n\n /** @internal */\n @observable\n public toggleButton?: HTMLButtonElement;\n\n /** @internal */\n @observable\n public region?: AnchoredRegion;\n\n /** @internal */\n public disabledChanged(): void {\n if (this.disabled) {\n this.setOpen(false);\n }\n }\n\n /** @internal */\n public override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this.documentClickHandler);\n document.addEventListener('keydown', this.keydownHandler);\n }\n\n /** @internal */\n public override disconnectedCallback(): void {\n document.removeEventListener('click', this.documentClickHandler);\n document.removeEventListener('keydown', this.keydownHandler);\n super.disconnectedCallback();\n }\n\n /** @internal */\n public handlePrimaryClick(): void {\n if (this.disabled) {\n return;\n }\n\n this.dispatchEvent(new CustomEvent('trigger', {\n bubbles: true,\n composed: true\n }));\n }\n\n /** @internal */\n public handleToggleClick(): void {\n if (this.disabled) {\n return;\n }\n\n this.setOpen(!this.open);\n }\n\n /** @internal */\n public handleMenuChange(): void {\n this.setOpen(false);\n }\n\n /** @internal */\n public regionChanged(prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void {\n if (prev) {\n prev.removeEventListener('change', this.menuChangeHandler);\n }\n if (this.region) {\n this.region.anchorElement = this.toggleButton ?? this;\n this.region.addEventListener('change', this.menuChangeHandler, { capture: true });\n }\n }\n\n /** @internal */\n public toggleButtonChanged(): void {\n if (this.region) {\n this.region.anchorElement = this.toggleButton ?? this;\n }\n }\n\n private readonly documentClickHandler = (event: Event): void => {\n if (!this.open) {\n return;\n }\n\n if (!event.composedPath().includes(this)) {\n this.setOpen(false);\n }\n };\n\n private readonly keydownHandler = (event: KeyboardEvent): void => {\n if (event.key === 'Escape') {\n this.setOpen(false);\n }\n };\n\n private readonly menuChangeHandler = (): void => {\n this.handleMenuChange();\n };\n\n private setOpen(nextOpen: boolean): void {\n if (this.open === nextOpen) {\n return;\n }\n\n this.open = nextOpen;\n this.dispatchEvent(new CustomEvent('toggle', {\n bubbles: true,\n composed: true,\n detail: { open: this.open }\n }));\n }\n}\n\nconst okFvSplitButtonAnchor = FvSplitButtonAnchor.compose({\n baseName: 'fv-split-button-anchor',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButtonAnchor());\nexport const fvSplitButtonAnchorTag = 'ok-fv-split-button-anchor';"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { styles } from '../split-button/styles';
|
|
@@ -1,228 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import { actionRgbPartialColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonAccentBlockFontColor, buttonAccentOutlineFontColor, buttonBorderAccentOutlineColor, buttonFillAccentColor, buttonFillPrimaryColor, buttonLabelDisabledFontColor, buttonLabelFont, buttonLabelFontColor, buttonPrimaryFontColor, controlHeight, fillSelectedColor, iconColor, smallDelay, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
|
|
3
|
-
import { display } from '../../utilities/style/display';
|
|
4
|
-
export const styles = css `
|
|
5
|
-
@layer base, hover, focusVisible, active, disabled, top;
|
|
6
|
-
|
|
7
|
-
@layer base {
|
|
8
|
-
${display('inline-block')}
|
|
9
|
-
|
|
10
|
-
:host {
|
|
11
|
-
--ni-private-ok-fv-split-button-anchor-background-image: none;
|
|
12
|
-
--ni-private-ok-fv-split-button-anchor-background-size: 100% 100%;
|
|
13
|
-
--ni-private-ok-fv-split-button-anchor-background-size-emphasis: 100% 100%;
|
|
14
|
-
--ni-private-ok-fv-split-button-anchor-border: rgba(${actionRgbPartialColor}, 0.3);
|
|
15
|
-
--ni-private-ok-fv-split-button-anchor-color: ${buttonLabelFontColor};
|
|
16
|
-
position: relative;
|
|
17
|
-
height: ${controlHeight};
|
|
18
|
-
vertical-align: middle;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
:host([appearance='ghost']) {
|
|
22
|
-
--ni-private-ok-fv-split-button-anchor-border: transparent;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
:host([appearance='block']) {
|
|
26
|
-
--ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
|
|
27
|
-
rgba(${borderRgbPartialColor}, 0.1),
|
|
28
|
-
rgba(${borderRgbPartialColor}, 0.1)
|
|
29
|
-
);
|
|
30
|
-
--ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.1);
|
|
31
|
-
--ni-private-ok-fv-split-button-anchor-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
:host([appearance='outline'][appearance-variant='primary']) {
|
|
35
|
-
--ni-private-ok-fv-split-button-anchor-border: rgb(${actionRgbPartialColor});
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
:host([appearance='outline'][appearance-variant='accent']) {
|
|
39
|
-
--ni-private-ok-fv-split-button-anchor-border: ${buttonBorderAccentOutlineColor};
|
|
40
|
-
--ni-private-ok-fv-split-button-anchor-color: ${buttonAccentOutlineFontColor};
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
:host([appearance='block'][appearance-variant='primary']) {
|
|
44
|
-
--ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
|
|
45
|
-
${buttonFillPrimaryColor},
|
|
46
|
-
${buttonFillPrimaryColor}
|
|
47
|
-
);
|
|
48
|
-
--ni-private-ok-fv-split-button-anchor-border: ${buttonFillPrimaryColor};
|
|
49
|
-
--ni-private-ok-fv-split-button-anchor-color: ${buttonPrimaryFontColor};
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
:host([appearance='block'][appearance-variant='accent']) {
|
|
53
|
-
--ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
|
|
54
|
-
${buttonFillAccentColor},
|
|
55
|
-
${buttonFillAccentColor}
|
|
56
|
-
);
|
|
57
|
-
--ni-private-ok-fv-split-button-anchor-border: ${buttonFillAccentColor};
|
|
58
|
-
--ni-private-ok-fv-split-button-anchor-color: ${buttonAccentBlockFontColor};
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.split-button-container {
|
|
62
|
-
position: relative;
|
|
63
|
-
display: inline-flex;
|
|
64
|
-
align-items: stretch;
|
|
65
|
-
height: 100%;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.split-button-primary,
|
|
69
|
-
.split-button-toggle {
|
|
70
|
-
appearance: none;
|
|
71
|
-
position: relative;
|
|
72
|
-
z-index: 0;
|
|
73
|
-
height: 100%;
|
|
74
|
-
box-sizing: border-box;
|
|
75
|
-
margin: 0;
|
|
76
|
-
border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-anchor-border);
|
|
77
|
-
background-color: transparent;
|
|
78
|
-
background-image: var(--ni-private-ok-fv-split-button-anchor-background-image);
|
|
79
|
-
background-position: center;
|
|
80
|
-
background-repeat: no-repeat;
|
|
81
|
-
background-size: var(--ni-private-ok-fv-split-button-anchor-background-size);
|
|
82
|
-
color: var(--ni-private-ok-fv-split-button-anchor-color);
|
|
83
|
-
fill: currentcolor;
|
|
84
|
-
font: ${buttonLabelFont};
|
|
85
|
-
cursor: pointer;
|
|
86
|
-
outline: none;
|
|
87
|
-
transition:
|
|
88
|
-
box-shadow ${smallDelay} ease-in-out,
|
|
89
|
-
border-color ${smallDelay} ease-in-out,
|
|
90
|
-
background-size ${smallDelay} ease-in-out;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.split-button-primary {
|
|
94
|
-
display: inline-flex;
|
|
95
|
-
align-items: center;
|
|
96
|
-
justify-content: center;
|
|
97
|
-
padding: 0 ${standardPadding};
|
|
98
|
-
border-inline-end-color: transparent;
|
|
99
|
-
white-space: nowrap;
|
|
100
|
-
text-decoration: none;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.split-button-primary::before,
|
|
104
|
-
.split-button-toggle::before {
|
|
105
|
-
content: '';
|
|
106
|
-
position: absolute;
|
|
107
|
-
inset: 0;
|
|
108
|
-
pointer-events: none;
|
|
109
|
-
outline: 0px solid transparent;
|
|
110
|
-
outline-offset: -3px;
|
|
111
|
-
transition: outline ${smallDelay} ease-in-out;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.split-button-toggle {
|
|
115
|
-
width: ${controlHeight};
|
|
116
|
-
min-width: ${controlHeight};
|
|
117
|
-
display: inline-flex;
|
|
118
|
-
align-items: center;
|
|
119
|
-
justify-content: center;
|
|
120
|
-
border-inline-start-color: var(--ni-private-ok-fv-split-button-anchor-border);
|
|
121
|
-
margin-inline-start: calc(-1 * ${borderWidth});
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.split-button-toggle > * {
|
|
125
|
-
color: currentColor;
|
|
126
|
-
${iconColor.cssCustomProperty}: currentColor;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.split-button-primary-disabled {
|
|
130
|
-
cursor: default;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
:host([appearance='ghost']) .split-button-primary,
|
|
134
|
-
:host([appearance='ghost']) .split-button-toggle {
|
|
135
|
-
border-color: transparent;
|
|
136
|
-
box-shadow: none;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
slot[name='menu']::slotted(*) {
|
|
140
|
-
min-width: 100%;
|
|
141
|
-
margin: 4px 0 0;
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
@layer hover {
|
|
146
|
-
.split-button-primary:hover,
|
|
147
|
-
.split-button-toggle:hover {
|
|
148
|
-
border-color: ${borderHoverColor};
|
|
149
|
-
box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
|
|
150
|
-
background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);
|
|
151
|
-
z-index: 1;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
:host([appearance='ghost']) .split-button-primary:hover,
|
|
155
|
-
:host([appearance='ghost']) .split-button-toggle:hover {
|
|
156
|
-
border-color: ${borderHoverColor};
|
|
157
|
-
box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
@layer focusVisible {
|
|
162
|
-
.split-button-primary:focus-visible,
|
|
163
|
-
.split-button-toggle:focus-visible {
|
|
164
|
-
border-color: ${borderHoverColor};
|
|
165
|
-
box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
|
|
166
|
-
background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);
|
|
167
|
-
z-index: 1;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.split-button-primary:focus-visible::before,
|
|
171
|
-
.split-button-toggle:focus-visible::before {
|
|
172
|
-
outline: ${borderWidth} solid ${borderHoverColor};
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
:host([appearance='ghost']) .split-button-primary:focus-visible,
|
|
176
|
-
:host([appearance='ghost']) .split-button-toggle:focus-visible {
|
|
177
|
-
border-color: ${borderHoverColor};
|
|
178
|
-
box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
@layer active {
|
|
183
|
-
.split-button-primary:active,
|
|
184
|
-
.split-button-toggle:active,
|
|
185
|
-
:host([open]) .split-button-toggle {
|
|
186
|
-
border-color: ${borderHoverColor};
|
|
187
|
-
box-shadow: none;
|
|
188
|
-
background-image: linear-gradient(${fillSelectedColor}, ${fillSelectedColor});
|
|
189
|
-
background-size: calc(100% - 2px) calc(100% - 2px);
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
:host([appearance='block']) .split-button-primary:active,
|
|
193
|
-
:host([appearance='block']) .split-button-toggle:active,
|
|
194
|
-
:host([appearance='block'][open]) .split-button-toggle {
|
|
195
|
-
background-size: calc(100% - 4px) calc(100% - 4px);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
:host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,
|
|
199
|
-
:host([appearance='outline'][appearance-variant='accent']) .split-button-toggle:active,
|
|
200
|
-
:host([appearance='outline'][appearance-variant='accent'][open]) .split-button-toggle {
|
|
201
|
-
color: ${buttonAccentOutlineFontColor};
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
@layer disabled {
|
|
206
|
-
:host([disabled]) {
|
|
207
|
-
--ni-private-ok-fv-split-button-anchor-color: ${buttonLabelDisabledFontColor};
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
:host([disabled][appearance='outline']) {
|
|
211
|
-
--ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.3);
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
:host([disabled]) .split-button-primary,
|
|
215
|
-
:host([disabled]) .split-button-toggle {
|
|
216
|
-
cursor: default;
|
|
217
|
-
box-shadow: none;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
:host([disabled][appearance='ghost']) .split-button-primary,
|
|
221
|
-
:host([disabled][appearance='ghost']) .split-button-toggle {
|
|
222
|
-
border-color: transparent;
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
@layer top {}
|
|
227
|
-
`;
|
|
1
|
+
export { styles } from '../split-button/styles';
|
|
228
2
|
//# sourceMappingURL=styles.js.map
|