@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/split-button-anchor/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;;;;;;kEAMiC,qBAAqB;4DAC3B,oBAAoB;;sBAE1D,aAAa;;;;;;;;;;uBAUZ,qBAAqB;uBACrB,qBAAqB;;kEAEsB,qBAAqB;;;;;iEAKtB,qBAAqB;;;;6DAIzB,8BAA8B;4DAC/B,4BAA4B;;;;;kBAKtE,sBAAsB;kBACtB,sBAAsB;;6DAEqB,sBAAsB;4DACvB,sBAAsB;;;;;kBAKhE,qBAAqB;kBACrB,qBAAqB;;6DAEsB,qBAAqB;4DACtB,0BAA0B;;;;;;;;;;;;;;;;;;sBAkBhE,WAAW;;;;;;;;oBAQb,eAAe;;;;6BAIN,UAAU;+BACR,UAAU;kCACP,UAAU;;;;;;;yBAOnB,eAAe;;;;;;;;;;;;;;kCAcN,UAAU;;;;qBAIvB,aAAa;yBACT,aAAa;;;;;6CAKO,WAAW;;;;;cAK1C,SAAS,CAAC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;4BAsBb,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;;;;;;4DAMW,4BAA4B;;;;kEAItB,qBAAqB;;;;;;;;;;;;;;;;CAgBtF,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-anchor-background-image: none;\n --ni-private-ok-fv-split-button-anchor-background-size: 100% 100%;\n --ni-private-ok-fv-split-button-anchor-background-size-emphasis: 100% 100%;\n --ni-private-ok-fv-split-button-anchor-border: rgba(${actionRgbPartialColor}, 0.3);\n --ni-private-ok-fv-split-button-anchor-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-anchor-border: transparent;\n }\n\n :host([appearance='block']) {\n --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n --ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.1);\n --ni-private-ok-fv-split-button-anchor-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-anchor-border: rgb(${actionRgbPartialColor});\n }\n\n :host([appearance='outline'][appearance-variant='accent']) {\n --ni-private-ok-fv-split-button-anchor-border: ${buttonBorderAccentOutlineColor};\n --ni-private-ok-fv-split-button-anchor-color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance='block'][appearance-variant='primary']) {\n --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(\n ${buttonFillPrimaryColor},\n ${buttonFillPrimaryColor}\n );\n --ni-private-ok-fv-split-button-anchor-border: ${buttonFillPrimaryColor};\n --ni-private-ok-fv-split-button-anchor-color: ${buttonPrimaryFontColor};\n }\n\n :host([appearance='block'][appearance-variant='accent']) {\n --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(\n ${buttonFillAccentColor},\n ${buttonFillAccentColor}\n );\n --ni-private-ok-fv-split-button-anchor-border: ${buttonFillAccentColor};\n --ni-private-ok-fv-split-button-anchor-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-anchor-border);\n background-color: transparent;\n background-image: var(--ni-private-ok-fv-split-button-anchor-background-image);\n background-position: center;\n background-repeat: no-repeat;\n background-size: var(--ni-private-ok-fv-split-button-anchor-background-size);\n color: var(--ni-private-ok-fv-split-button-anchor-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 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0 ${standardPadding};\n border-inline-end-color: transparent;\n white-space: nowrap;\n text-decoration: none;\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-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-anchor-border);\n margin-inline-start: calc(-1 * ${borderWidth});\n }\n\n .split-button-toggle > * {\n color: currentColor;\n ${iconColor.cssCustomProperty}: currentColor;\n }\n\n .split-button-primary-disabled {\n cursor: default;\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-anchor-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-anchor-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-anchor-color: ${buttonLabelDisabledFontColor};\n }\n\n :host([disabled][appearance='outline']) {\n --ni-private-ok-fv-split-button-anchor-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-anchor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { styles } from '../split-button/styles';\n"]}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { html, ref, when } from '@ni/fast-element';
|
|
2
2
|
import { iconArrowExpanderDownTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-down';
|
|
3
3
|
import { anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';
|
|
4
|
+
const primaryContent = html `
|
|
5
|
+
<slot name="start"></slot>
|
|
6
|
+
<span>${x => x.label}</span>
|
|
7
|
+
<slot name="end"></slot>
|
|
8
|
+
`;
|
|
4
9
|
export const template = html `
|
|
5
10
|
<div
|
|
6
11
|
class="split-button-container"
|
|
7
|
-
${ref('splitButtonContainer')}
|
|
8
12
|
>
|
|
9
13
|
${when(x => !x.disabled && x.href.length > 0, html `
|
|
10
14
|
<a
|
|
@@ -18,7 +22,7 @@ export const template = html `
|
|
|
18
22
|
return true;
|
|
19
23
|
}}"
|
|
20
24
|
>
|
|
21
|
-
${
|
|
25
|
+
${primaryContent}
|
|
22
26
|
</a>
|
|
23
27
|
`)}
|
|
24
28
|
${when(x => x.disabled || x.href.length === 0, html `
|
|
@@ -26,11 +30,12 @@ export const template = html `
|
|
|
26
30
|
class="split-button-primary split-button-primary-disabled"
|
|
27
31
|
aria-disabled="${x => x.disabled}"
|
|
28
32
|
>
|
|
29
|
-
${
|
|
33
|
+
${primaryContent}
|
|
30
34
|
</span>
|
|
31
35
|
`)}
|
|
32
36
|
<button
|
|
33
37
|
class="split-button-toggle"
|
|
38
|
+
${ref('toggleButton')}
|
|
34
39
|
type="button"
|
|
35
40
|
?disabled="${x => x.disabled}"
|
|
36
41
|
aria-label="${x => `More actions for ${x.label}`}"
|
|
@@ -50,9 +55,9 @@ export const template = html `
|
|
|
50
55
|
auto-update-mode="auto"
|
|
51
56
|
horizontal-inset
|
|
52
57
|
horizontal-positioning-mode="dynamic"
|
|
58
|
+
horizontal-default-position="end"
|
|
53
59
|
vertical-positioning-mode="locktodefault"
|
|
54
60
|
vertical-default-position="bottom"
|
|
55
|
-
horizontal-scaling="anchor"
|
|
56
61
|
${ref('region')}
|
|
57
62
|
>
|
|
58
63
|
<span part="menu">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/split-button-anchor/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,
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/split-button-anchor/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,GAAG,IAAI,CAAqB;;YAEpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;;CAEvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAqB;;;;UAIvC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EACrC,IAAI,CAAqB;;;4BAGT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;8BACT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,IAAI,SAAS;2BAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,SAAS;gCAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,SAAS;8BAC9B,CAAC,CAAC,EAAE;IACV,CAAC,CAAC,kBAAkB,EAAE,CAAC;IACvB,OAAO,IAAI,CAAC;AAChB,CAAC;;sBAEC,cAAc;;aAEvB,CACJ;UACC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EACtC,IAAI,CAAqB;;;qCAGA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;sBAE9B,cAAc;;aAEvB,CACJ;;;cAGK,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,CAAqB;eAClB,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 { FvSplitButtonAnchor } from '.';\n\nconst primaryContent = html<FvSplitButtonAnchor>`\n <slot name=\"start\"></slot>\n <span>${x => x.label}</span>\n <slot name=\"end\"></slot>\n`;\n\nexport const template = html<FvSplitButtonAnchor>`\n <div\n class=\"split-button-container\"\n >\n ${when(\n x => !x.disabled && x.href.length > 0,\n html<FvSplitButtonAnchor>`\n <a\n class=\"split-button-primary\"\n href=\"${x => x.href}\"\n target=\"${x => x.target || undefined}\"\n rel=\"${x => x.rel || undefined}\"\n download=\"${x => x.download || undefined}\"\n @click=\"${x => {\n x.handlePrimaryClick();\n return true;\n }}\"\n >\n ${primaryContent}\n </a>\n `\n )}\n ${when(\n x => x.disabled || x.href.length === 0,\n html<FvSplitButtonAnchor>`\n <span\n class=\"split-button-primary split-button-primary-disabled\"\n aria-disabled=\"${x => x.disabled}\"\n >\n ${primaryContent}\n </span>\n `\n )}\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<FvSplitButtonAnchor>`\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`;"]}
|