@ni/ok-components 1.12.2 → 1.12.3
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 +56 -41
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +53 -38
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/fv/split-button/index.d.ts +2 -2
- package/dist/esm/fv/split-button/index.js +4 -4
- package/dist/esm/fv/split-button/index.js.map +1 -1
- package/dist/esm/fv/split-button/styles.js +51 -36
- package/dist/esm/fv/split-button/styles.js.map +1 -1
- package/dist/esm/fv/split-button/template.js +2 -2
- package/dist/esm/fv/split-button/template.js.map +1 -1
- package/package.json +1 -1
|
@@ -16,7 +16,7 @@ export declare class FvSplitButton extends FoundationElement {
|
|
|
16
16
|
appearance: FvSplitButtonAppearanceType;
|
|
17
17
|
appearanceVariant: FvSplitButtonAppearanceVariantType;
|
|
18
18
|
/** @internal */
|
|
19
|
-
|
|
19
|
+
toggleButton?: HTMLButtonElement;
|
|
20
20
|
/** @internal */
|
|
21
21
|
region?: AnchoredRegion;
|
|
22
22
|
/** @internal */
|
|
@@ -34,7 +34,7 @@ export declare class FvSplitButton extends FoundationElement {
|
|
|
34
34
|
/** @internal */
|
|
35
35
|
regionChanged(prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void;
|
|
36
36
|
/** @internal */
|
|
37
|
-
|
|
37
|
+
toggleButtonChanged(): void;
|
|
38
38
|
private readonly documentClickHandler;
|
|
39
39
|
private readonly keydownHandler;
|
|
40
40
|
private readonly menuChangeHandler;
|
|
@@ -77,14 +77,14 @@ export class FvSplitButton extends FoundationElement {
|
|
|
77
77
|
prev.removeEventListener('change', this.menuChangeHandler);
|
|
78
78
|
}
|
|
79
79
|
if (this.region) {
|
|
80
|
-
this.region.anchorElement = this.
|
|
80
|
+
this.region.anchorElement = this.toggleButton ?? this;
|
|
81
81
|
this.region.addEventListener('change', this.menuChangeHandler, { capture: true });
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
/** @internal */
|
|
85
|
-
|
|
85
|
+
toggleButtonChanged() {
|
|
86
86
|
if (this.region) {
|
|
87
|
-
this.region.anchorElement = this.
|
|
87
|
+
this.region.anchorElement = this.toggleButton ?? this;
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
setOpen(nextOpen) {
|
|
@@ -116,7 +116,7 @@ __decorate([
|
|
|
116
116
|
], FvSplitButton.prototype, "appearanceVariant", void 0);
|
|
117
117
|
__decorate([
|
|
118
118
|
observable
|
|
119
|
-
], FvSplitButton.prototype, "
|
|
119
|
+
], FvSplitButton.prototype, "toggleButton", void 0);
|
|
120
120
|
__decorate([
|
|
121
121
|
observable
|
|
122
122
|
], FvSplitButton.prototype, "region", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/split-button/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,EACH,uBAAuB,EAEvB,8BAA8B,EAEjC,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QAEW,UAAK,GAAG,kBAAkB,CAAC;QAG3B,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGb,eAAU,GAAgC,uBAAuB,CAAC,OAAO,CAAC;QAG1E,sBAAiB,GAAuC,8BAA8B,CAAC,OAAO,CAAC;QA2ErF,yBAAoB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAC3D,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACb,OAAO;YACX,CAAC;YAED,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBACvC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC;QACL,CAAC,CAAC;QAEe,mBAAc,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAC7D,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACzB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC;QACL,CAAC,CAAC;QAEe,sBAAiB,GAAG,GAAS,EAAE;YAC5C,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC5B,CAAC,CAAC;IAcN,CAAC;IAjGG,gBAAgB;IACT,eAAe;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;IACL,CAAC;IAED,gBAAgB;IACA,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC9D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC9D,CAAC;IAED,gBAAgB;IACA,oBAAoB;QAChC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACjE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC7D,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACjC,CAAC;IAED,gBAAgB;IACT,kBAAkB;QACrB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,OAAO;QACX,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE;YAC1C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC,CAAC;IACR,CAAC;IAED,gBAAgB;IACT,iBAAiB;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,OAAO;QACX,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,gBAAgB;IACT,gBAAgB;QACnB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,gBAAgB;IACT,aAAa,CAAC,IAAgC,EAAE,KAAiC;QACpF,IAAI,IAAI,EAAE,CAAC;YACP,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC/D,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACd,IAAI,CAAC,MAAM,CAAC,aAAa,GAAG,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/split-button/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 FvSplitButtonAppearance,\n type FvSplitButtonAppearance as FvSplitButtonAppearanceType,\n FvSplitButtonAppearanceVariant,\n type FvSplitButtonAppearanceVariant as FvSplitButtonAppearanceVariantType\n} from './types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ok-fv-split-button': FvSplitButton;\n }\n}\n\n/**\n * A button with a primary action and a secondary expandable menu surface.\n */\nexport class FvSplitButton extends FoundationElement {\n @attr\n public label = 'Primary function';\n\n @attr({ mode: 'boolean' })\n public disabled = false;\n\n @attr({ mode: 'boolean' })\n public open = false;\n\n @attr()\n public appearance: FvSplitButtonAppearanceType = FvSplitButtonAppearance.outline;\n\n @attr({ attribute: 'appearance-variant' })\n public appearanceVariant: FvSplitButtonAppearanceVariantType = FvSplitButtonAppearanceVariant.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 okFvSplitButton = FvSplitButton.compose({\n baseName: 'fv-split-button',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButton());\nexport const fvSplitButtonTag = 'ok-fv-split-button';"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@ni/fast-element';
|
|
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';
|
|
2
|
+
import { actionRgbPartialColor, applicationBackgroundColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonAccentBlockFontColor, buttonAccentOutlineFontColor, buttonBorderAccentOutlineColor, buttonFillAccentColor, buttonFillPrimaryColor, buttonLabelDisabledFontColor, buttonLabelFont, buttonLabelFontColor, buttonPrimaryFontColor, controlHeight, fillSelectedColor, fillSelectedRgbPartialColor, iconColor, mediumPadding, smallDelay, smallPadding, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
|
|
3
3
|
import { display } from '../../utilities/style/display';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
@layer base, hover, focusVisible, active, disabled, top;
|
|
@@ -9,8 +9,6 @@ export const styles = css `
|
|
|
9
9
|
|
|
10
10
|
:host {
|
|
11
11
|
--ni-private-ok-fv-split-button-background-image: none;
|
|
12
|
-
--ni-private-ok-fv-split-button-background-size: 100% 100%;
|
|
13
|
-
--ni-private-ok-fv-split-button-background-size-emphasis: 100% 100%;
|
|
14
12
|
--ni-private-ok-fv-split-button-border: rgba(${actionRgbPartialColor}, 0.3);
|
|
15
13
|
--ni-private-ok-fv-split-button-color: ${buttonLabelFontColor};
|
|
16
14
|
position: relative;
|
|
@@ -28,7 +26,6 @@ export const styles = css `
|
|
|
28
26
|
rgba(${borderRgbPartialColor}, 0.1)
|
|
29
27
|
);
|
|
30
28
|
--ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.1);
|
|
31
|
-
--ni-private-ok-fv-split-button-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);
|
|
32
29
|
}
|
|
33
30
|
|
|
34
31
|
:host([appearance='outline'][appearance-variant='primary']) {
|
|
@@ -65,6 +62,16 @@ export const styles = css `
|
|
|
65
62
|
height: 100%;
|
|
66
63
|
}
|
|
67
64
|
|
|
65
|
+
.split-button-container::before {
|
|
66
|
+
content: '';
|
|
67
|
+
position: absolute;
|
|
68
|
+
inset: 0;
|
|
69
|
+
border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-border);
|
|
70
|
+
background-image: var(--ni-private-ok-fv-split-button-background-image);
|
|
71
|
+
background-repeat: no-repeat;
|
|
72
|
+
pointer-events: none;
|
|
73
|
+
}
|
|
74
|
+
|
|
68
75
|
.split-button-primary,
|
|
69
76
|
.split-button-toggle {
|
|
70
77
|
appearance: none;
|
|
@@ -73,12 +80,12 @@ export const styles = css `
|
|
|
73
80
|
height: 100%;
|
|
74
81
|
box-sizing: border-box;
|
|
75
82
|
margin: 0;
|
|
76
|
-
border: ${borderWidth} solid
|
|
83
|
+
border: ${borderWidth} solid transparent;
|
|
77
84
|
background-color: transparent;
|
|
78
|
-
background-image: var(--ni-private-ok-fv-split-button-background-image);
|
|
79
85
|
background-position: center;
|
|
80
86
|
background-repeat: no-repeat;
|
|
81
|
-
background-
|
|
87
|
+
background-origin: border-box;
|
|
88
|
+
background-size: 100% 100%;
|
|
82
89
|
color: var(--ni-private-ok-fv-split-button-color);
|
|
83
90
|
fill: currentcolor;
|
|
84
91
|
font: ${buttonLabelFont};
|
|
@@ -103,7 +110,7 @@ export const styles = css `
|
|
|
103
110
|
|
|
104
111
|
.split-button-primary {
|
|
105
112
|
padding: 0 ${standardPadding};
|
|
106
|
-
|
|
113
|
+
padding-inline-end: ${mediumPadding};
|
|
107
114
|
white-space: nowrap;
|
|
108
115
|
}
|
|
109
116
|
|
|
@@ -113,8 +120,17 @@ export const styles = css `
|
|
|
113
120
|
display: inline-flex;
|
|
114
121
|
align-items: center;
|
|
115
122
|
justify-content: center;
|
|
116
|
-
|
|
117
|
-
|
|
123
|
+
padding: 0;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.split-button-toggle::after {
|
|
127
|
+
content: '';
|
|
128
|
+
position: absolute;
|
|
129
|
+
inset-block: ${smallPadding};
|
|
130
|
+
inset-inline-start: calc(-1 * ${borderWidth});
|
|
131
|
+
width: calc(2 * ${borderWidth});
|
|
132
|
+
background: rgba(${borderRgbPartialColor}, 0.1);
|
|
133
|
+
pointer-events: none;
|
|
118
134
|
}
|
|
119
135
|
|
|
120
136
|
.split-button-toggle > * {
|
|
@@ -122,40 +138,31 @@ export const styles = css `
|
|
|
122
138
|
${iconColor.cssCustomProperty}: currentColor;
|
|
123
139
|
}
|
|
124
140
|
|
|
125
|
-
:host([appearance='ghost']) .split-button-primary,
|
|
126
|
-
:host([appearance='ghost']) .split-button-toggle {
|
|
127
|
-
border-color: transparent;
|
|
128
|
-
box-shadow: none;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
141
|
slot[name='menu']::slotted(*) {
|
|
132
142
|
min-width: 100%;
|
|
133
|
-
margin:
|
|
143
|
+
margin: ${smallPadding} 0 0;
|
|
134
144
|
}
|
|
135
145
|
}
|
|
136
146
|
|
|
137
147
|
@layer hover {
|
|
138
|
-
.split-button-primary:hover,
|
|
139
|
-
.split-button-toggle:hover {
|
|
148
|
+
.split-button-primary:enabled:hover,
|
|
149
|
+
.split-button-toggle:enabled:hover {
|
|
140
150
|
border-color: ${borderHoverColor};
|
|
141
151
|
box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
|
|
142
|
-
background-size: var(--ni-private-ok-fv-split-button-background-size-emphasis);
|
|
143
152
|
z-index: 1;
|
|
144
153
|
}
|
|
145
154
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
|
|
155
|
+
.split-button-primary:enabled:hover + .split-button-toggle::after,
|
|
156
|
+
.split-button-toggle:enabled:hover::after {
|
|
157
|
+
visibility: hidden;
|
|
150
158
|
}
|
|
151
159
|
}
|
|
152
160
|
|
|
153
161
|
@layer focusVisible {
|
|
154
|
-
.split-button-primary:focus-visible,
|
|
155
|
-
.split-button-toggle:focus-visible {
|
|
162
|
+
.split-button-primary:enabled:focus-visible,
|
|
163
|
+
.split-button-toggle:enabled:focus-visible {
|
|
156
164
|
border-color: ${borderHoverColor};
|
|
157
165
|
box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
|
|
158
|
-
background-size: var(--ni-private-ok-fv-split-button-background-size-emphasis);
|
|
159
166
|
z-index: 1;
|
|
160
167
|
}
|
|
161
168
|
|
|
@@ -164,16 +171,15 @@ export const styles = css `
|
|
|
164
171
|
outline: ${borderWidth} solid ${borderHoverColor};
|
|
165
172
|
}
|
|
166
173
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
|
|
174
|
+
.split-button-primary:focus-visible + .split-button-toggle::after,
|
|
175
|
+
.split-button-toggle:focus-visible::after {
|
|
176
|
+
visibility: hidden;
|
|
171
177
|
}
|
|
172
178
|
}
|
|
173
179
|
|
|
174
180
|
@layer active {
|
|
175
|
-
.split-button-primary:active,
|
|
176
|
-
.split-button-toggle:active,
|
|
181
|
+
.split-button-primary:enabled:active,
|
|
182
|
+
.split-button-toggle:enabled:active,
|
|
177
183
|
:host([open]) .split-button-toggle {
|
|
178
184
|
border-color: ${borderHoverColor};
|
|
179
185
|
box-shadow: none;
|
|
@@ -181,10 +187,19 @@ export const styles = css `
|
|
|
181
187
|
background-size: calc(100% - 2px) calc(100% - 2px);
|
|
182
188
|
}
|
|
183
189
|
|
|
184
|
-
:host([
|
|
185
|
-
|
|
190
|
+
:host([open]) .split-button-toggle {
|
|
191
|
+
border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
|
|
192
|
+
background-size: 100% 100%;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
:host([open]) .split-button-toggle::after {
|
|
196
|
+
visibility: hidden;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
:host([appearance='block']) .split-button-primary:enabled:active,
|
|
200
|
+
:host([appearance='block']) .split-button-toggle:enabled:active,
|
|
186
201
|
:host([appearance='block'][open]) .split-button-toggle {
|
|
187
|
-
background-
|
|
202
|
+
background-color: ${applicationBackgroundColor};
|
|
188
203
|
}
|
|
189
204
|
|
|
190
205
|
:host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,
|
|
@@ -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,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,SAAS,EACT,UAAU,EACV,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;;;;;;2DAM0B,qBAAqB;qDAC3B,oBAAoB;;sBAEnD,aAAa;;;;;;;;;;uBAUZ,qBAAqB;uBACrB,qBAAqB;;2DAEe,qBAAqB;;;;;0DAKtB,qBAAqB;;;;sDAIzB,8BAA8B;qDAC/B,4BAA4B;;;;;kBAK/D,sBAAsB;kBACtB,sBAAsB;;sDAEc,sBAAsB;qDACvB,sBAAsB;;;;;kBAKzD,qBAAqB;kBACrB,qBAAqB;;sDAEe,qBAAqB;qDACtB,0BAA0B;;;;;;;;;;;;;;;;;;sBAkBzD,WAAW;;;;;;;;oBAQb,eAAe;;;;6BAIN,UAAU;+BACR,UAAU;kCACP,UAAU;;;;;;;;;;;kCAWV,UAAU;;;;yBAInB,eAAe;;;;;;qBAMnB,aAAa;yBACT,aAAa;;;;;6CAKO,WAAW;;;;;cAK1C,SAAS,CAAC,iBAAiB;;;;;;;;;;;;;;;;;;4BAkBb,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;4BAOnC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;4BAOnC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;uBAOxC,WAAW,UAAU,gBAAgB;;;;;4BAKhC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;;4BAQnC,gBAAgB;;gDAEI,iBAAiB,KAAK,iBAAiB;;;;;;;;;;;;;qBAalE,4BAA4B;;;;;;qDAMI,4BAA4B;;;;2DAItB,qBAAqB;;;;;;;;;;;;;;;;CAgB/E,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n actionRgbPartialColor,\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 iconColor,\n smallDelay,\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-background-size: 100% 100%;\n --ni-private-ok-fv-split-button-background-size-emphasis: 100% 100%;\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 --ni-private-ok-fv-split-button-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);\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-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 var(--ni-private-ok-fv-split-button-border);\n background-color: transparent;\n background-image: var(--ni-private-ok-fv-split-button-background-image);\n background-position: center;\n background-repeat: no-repeat;\n background-size: var(--ni-private-ok-fv-split-button-background-size);\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 border-inline-end-color: transparent;\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 border-inline-start-color: var(--ni-private-ok-fv-split-button-border);\n margin-inline-start: calc(-1 * ${borderWidth});\n }\n\n .split-button-toggle > * {\n color: currentColor;\n ${iconColor.cssCustomProperty}: currentColor;\n }\n\n :host([appearance='ghost']) .split-button-primary,\n :host([appearance='ghost']) .split-button-toggle {\n border-color: transparent;\n box-shadow: none;\n }\n\n slot[name='menu']::slotted(*) {\n min-width: 100%;\n margin: 4px 0 0;\n }\n }\n\n @layer hover {\n .split-button-primary:hover,\n .split-button-toggle:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n background-size: var(--ni-private-ok-fv-split-button-background-size-emphasis);\n z-index: 1;\n }\n\n :host([appearance='ghost']) .split-button-primary:hover,\n :host([appearance='ghost']) .split-button-toggle:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n }\n }\n\n @layer focusVisible {\n .split-button-primary:focus-visible,\n .split-button-toggle:focus-visible {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n background-size: var(--ni-private-ok-fv-split-button-background-size-emphasis);\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 :host([appearance='ghost']) .split-button-primary:focus-visible,\n :host([appearance='ghost']) .split-button-toggle:focus-visible {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n }\n }\n\n @layer active {\n .split-button-primary:active,\n .split-button-toggle: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([appearance='block']) .split-button-primary:active,\n :host([appearance='block']) .split-button-toggle:active,\n :host([appearance='block'][open]) .split-button-toggle {\n background-size: calc(100% - 4px) calc(100% - 4px);\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;;;;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`;"]}
|
|
@@ -4,7 +4,6 @@ import { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-regio
|
|
|
4
4
|
export const template = html `
|
|
5
5
|
<div
|
|
6
6
|
class="split-button-container"
|
|
7
|
-
${ref('splitButtonContainer')}
|
|
8
7
|
>
|
|
9
8
|
<button
|
|
10
9
|
class="split-button-primary"
|
|
@@ -19,6 +18,7 @@ export const template = html `
|
|
|
19
18
|
</button>
|
|
20
19
|
<button
|
|
21
20
|
class="split-button-toggle"
|
|
21
|
+
${ref('toggleButton')}
|
|
22
22
|
type="button"
|
|
23
23
|
?disabled="${x => x.disabled}"
|
|
24
24
|
aria-label="${x => `More actions for ${x.label}`}"
|
|
@@ -38,9 +38,9 @@ export const template = html `
|
|
|
38
38
|
auto-update-mode="auto"
|
|
39
39
|
horizontal-inset
|
|
40
40
|
horizontal-positioning-mode="dynamic"
|
|
41
|
+
horizontal-default-position="end"
|
|
41
42
|
vertical-positioning-mode="locktodefault"
|
|
42
43
|
vertical-default-position="bottom"
|
|
43
|
-
horizontal-scaling="anchor"
|
|
44
44
|
${ref('region')}
|
|
45
45
|
>
|
|
46
46
|
<span part="menu">
|
|
@@ -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
|
|
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;;cAEC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;;;;cAIZ,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 ${x => x.label}\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`;"]}
|