@ni/nimble-components 35.12.2 → 35.12.4
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 +67 -8
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +976 -973
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +83 -83
- package/dist/custom-elements.md +24 -24
- package/dist/esm/switch/styles.js +7 -4
- package/dist/esm/switch/styles.js.map +1 -1
- package/dist/esm/utilities/models/document-element-lang.js +4 -1
- package/dist/esm/utilities/models/document-element-lang.js.map +1 -1
- package/package.json +5 -4
- package/dist/esm/utilities/style/prefers-reduced-motion.d.ts +0 -4
- package/dist/esm/utilities/style/prefers-reduced-motion.js +0 -5
- package/dist/esm/utilities/style/prefers-reduced-motion.js.map +0 -1
|
@@ -392,6 +392,89 @@
|
|
|
392
392
|
}
|
|
393
393
|
]
|
|
394
394
|
},
|
|
395
|
+
{
|
|
396
|
+
"kind": "javascript-module",
|
|
397
|
+
"path": "src/anchor-tab/index.ts",
|
|
398
|
+
"declarations": [
|
|
399
|
+
{
|
|
400
|
+
"kind": "class",
|
|
401
|
+
"description": "A nimble-styled link tab",
|
|
402
|
+
"name": "AnchorTab",
|
|
403
|
+
"members": [
|
|
404
|
+
{
|
|
405
|
+
"kind": "field",
|
|
406
|
+
"name": "disabled",
|
|
407
|
+
"type": {
|
|
408
|
+
"text": "boolean"
|
|
409
|
+
},
|
|
410
|
+
"privacy": "public",
|
|
411
|
+
"default": "false",
|
|
412
|
+
"description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information."
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
"kind": "field",
|
|
416
|
+
"name": "ariaSelected",
|
|
417
|
+
"type": {
|
|
418
|
+
"text": "string"
|
|
419
|
+
},
|
|
420
|
+
"privacy": "public",
|
|
421
|
+
"default": "'false'",
|
|
422
|
+
"description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected"
|
|
423
|
+
}
|
|
424
|
+
],
|
|
425
|
+
"attributes": [
|
|
426
|
+
{
|
|
427
|
+
"name": "disabled",
|
|
428
|
+
"type": {
|
|
429
|
+
"text": "boolean"
|
|
430
|
+
},
|
|
431
|
+
"default": "false",
|
|
432
|
+
"description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
|
|
433
|
+
"fieldName": "disabled"
|
|
434
|
+
},
|
|
435
|
+
{
|
|
436
|
+
"name": "aria-selected",
|
|
437
|
+
"type": {
|
|
438
|
+
"text": "string"
|
|
439
|
+
},
|
|
440
|
+
"default": "'false'",
|
|
441
|
+
"description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected",
|
|
442
|
+
"fieldName": "ariaSelected"
|
|
443
|
+
}
|
|
444
|
+
],
|
|
445
|
+
"superclass": {
|
|
446
|
+
"name": "AnchorBase",
|
|
447
|
+
"module": "/src/anchor-base"
|
|
448
|
+
}
|
|
449
|
+
},
|
|
450
|
+
{
|
|
451
|
+
"kind": "variable",
|
|
452
|
+
"name": "anchorTabTag",
|
|
453
|
+
"type": {
|
|
454
|
+
"text": "string"
|
|
455
|
+
},
|
|
456
|
+
"default": "'nimble-anchor-tab'"
|
|
457
|
+
}
|
|
458
|
+
],
|
|
459
|
+
"exports": [
|
|
460
|
+
{
|
|
461
|
+
"kind": "js",
|
|
462
|
+
"name": "AnchorTab",
|
|
463
|
+
"declaration": {
|
|
464
|
+
"name": "AnchorTab",
|
|
465
|
+
"module": "src/anchor-tab/index.ts"
|
|
466
|
+
}
|
|
467
|
+
},
|
|
468
|
+
{
|
|
469
|
+
"kind": "js",
|
|
470
|
+
"name": "anchorTabTag",
|
|
471
|
+
"declaration": {
|
|
472
|
+
"name": "anchorTabTag",
|
|
473
|
+
"module": "src/anchor-tab/index.ts"
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
]
|
|
477
|
+
},
|
|
395
478
|
{
|
|
396
479
|
"kind": "javascript-module",
|
|
397
480
|
"path": "src/anchor-step/index.ts",
|
|
@@ -576,89 +659,6 @@
|
|
|
576
659
|
}
|
|
577
660
|
]
|
|
578
661
|
},
|
|
579
|
-
{
|
|
580
|
-
"kind": "javascript-module",
|
|
581
|
-
"path": "src/anchor-tab/index.ts",
|
|
582
|
-
"declarations": [
|
|
583
|
-
{
|
|
584
|
-
"kind": "class",
|
|
585
|
-
"description": "A nimble-styled link tab",
|
|
586
|
-
"name": "AnchorTab",
|
|
587
|
-
"members": [
|
|
588
|
-
{
|
|
589
|
-
"kind": "field",
|
|
590
|
-
"name": "disabled",
|
|
591
|
-
"type": {
|
|
592
|
-
"text": "boolean"
|
|
593
|
-
},
|
|
594
|
-
"privacy": "public",
|
|
595
|
-
"default": "false",
|
|
596
|
-
"description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information."
|
|
597
|
-
},
|
|
598
|
-
{
|
|
599
|
-
"kind": "field",
|
|
600
|
-
"name": "ariaSelected",
|
|
601
|
-
"type": {
|
|
602
|
-
"text": "string"
|
|
603
|
-
},
|
|
604
|
-
"privacy": "public",
|
|
605
|
-
"default": "'false'",
|
|
606
|
-
"description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected"
|
|
607
|
-
}
|
|
608
|
-
],
|
|
609
|
-
"attributes": [
|
|
610
|
-
{
|
|
611
|
-
"name": "disabled",
|
|
612
|
-
"type": {
|
|
613
|
-
"text": "boolean"
|
|
614
|
-
},
|
|
615
|
-
"default": "false",
|
|
616
|
-
"description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
|
|
617
|
-
"fieldName": "disabled"
|
|
618
|
-
},
|
|
619
|
-
{
|
|
620
|
-
"name": "aria-selected",
|
|
621
|
-
"type": {
|
|
622
|
-
"text": "string"
|
|
623
|
-
},
|
|
624
|
-
"default": "'false'",
|
|
625
|
-
"description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected",
|
|
626
|
-
"fieldName": "ariaSelected"
|
|
627
|
-
}
|
|
628
|
-
],
|
|
629
|
-
"superclass": {
|
|
630
|
-
"name": "AnchorBase",
|
|
631
|
-
"module": "/src/anchor-base"
|
|
632
|
-
}
|
|
633
|
-
},
|
|
634
|
-
{
|
|
635
|
-
"kind": "variable",
|
|
636
|
-
"name": "anchorTabTag",
|
|
637
|
-
"type": {
|
|
638
|
-
"text": "string"
|
|
639
|
-
},
|
|
640
|
-
"default": "'nimble-anchor-tab'"
|
|
641
|
-
}
|
|
642
|
-
],
|
|
643
|
-
"exports": [
|
|
644
|
-
{
|
|
645
|
-
"kind": "js",
|
|
646
|
-
"name": "AnchorTab",
|
|
647
|
-
"declaration": {
|
|
648
|
-
"name": "AnchorTab",
|
|
649
|
-
"module": "src/anchor-tab/index.ts"
|
|
650
|
-
}
|
|
651
|
-
},
|
|
652
|
-
{
|
|
653
|
-
"kind": "js",
|
|
654
|
-
"name": "anchorTabTag",
|
|
655
|
-
"declaration": {
|
|
656
|
-
"name": "anchorTabTag",
|
|
657
|
-
"module": "src/anchor-tab/index.ts"
|
|
658
|
-
}
|
|
659
|
-
}
|
|
660
|
-
]
|
|
661
|
-
},
|
|
662
662
|
{
|
|
663
663
|
"kind": "javascript-module",
|
|
664
664
|
"path": "src/anchor-tabs/index.ts",
|
package/dist/custom-elements.md
CHANGED
|
@@ -93,6 +93,30 @@
|
|
|
93
93
|
|
|
94
94
|
<hr/>
|
|
95
95
|
|
|
96
|
+
## class: `AnchorTab`
|
|
97
|
+
|
|
98
|
+
### Superclass
|
|
99
|
+
|
|
100
|
+
| Name | Module | Package |
|
|
101
|
+
| ------------ | ---------------- | ------- |
|
|
102
|
+
| `AnchorBase` | /src/anchor-base | |
|
|
103
|
+
|
|
104
|
+
### Fields
|
|
105
|
+
|
|
106
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
107
|
+
| -------------- | ------- | --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
|
|
108
|
+
| `disabled` | public | `boolean` | `false` | When true, the control will be immutable by user interaction. See https\://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled \| disabled HTML attribute for more information. | |
|
|
109
|
+
| `ariaSelected` | public | `string` | `'false'` | Indicates the current "selected" state of various widgets.
https\://www\.w3.org/TR/wai-aria-1.1/#aria-selected | |
|
|
110
|
+
|
|
111
|
+
### Attributes
|
|
112
|
+
|
|
113
|
+
| Name | Field | Inherited From |
|
|
114
|
+
| --------------- | ------------ | -------------- |
|
|
115
|
+
| `disabled` | disabled | |
|
|
116
|
+
| `aria-selected` | ariaSelected | |
|
|
117
|
+
|
|
118
|
+
<hr/>
|
|
119
|
+
|
|
96
120
|
## class: `AnchorStep`
|
|
97
121
|
|
|
98
122
|
### Superclass
|
|
@@ -125,30 +149,6 @@
|
|
|
125
149
|
|
|
126
150
|
<hr/>
|
|
127
151
|
|
|
128
|
-
## class: `AnchorTab`
|
|
129
|
-
|
|
130
|
-
### Superclass
|
|
131
|
-
|
|
132
|
-
| Name | Module | Package |
|
|
133
|
-
| ------------ | ---------------- | ------- |
|
|
134
|
-
| `AnchorBase` | /src/anchor-base | |
|
|
135
|
-
|
|
136
|
-
### Fields
|
|
137
|
-
|
|
138
|
-
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
139
|
-
| -------------- | ------- | --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
|
|
140
|
-
| `disabled` | public | `boolean` | `false` | When true, the control will be immutable by user interaction. See https\://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled \| disabled HTML attribute for more information. | |
|
|
141
|
-
| `ariaSelected` | public | `string` | `'false'` | Indicates the current "selected" state of various widgets.
https\://www\.w3.org/TR/wai-aria-1.1/#aria-selected | |
|
|
142
|
-
|
|
143
|
-
### Attributes
|
|
144
|
-
|
|
145
|
-
| Name | Field | Inherited From |
|
|
146
|
-
| --------------- | ------------ | -------------- |
|
|
147
|
-
| `disabled` | disabled | |
|
|
148
|
-
| `aria-selected` | ariaSelected | |
|
|
149
|
-
|
|
150
|
-
<hr/>
|
|
151
|
-
|
|
152
152
|
## class: `AnchorTabs`
|
|
153
153
|
|
|
154
154
|
### Superclass
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css } from '@ni/fast-element';
|
|
2
2
|
import { Black15, Black75, Black91, DigitalGreenLight, PowerGreen, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
|
|
3
3
|
import { display } from '../utilities/style/display';
|
|
4
|
-
import { bodyFont, borderHoverColor, borderWidth, buttonLabelDisabledFontColor, buttonLabelFontColor,
|
|
4
|
+
import { bodyFont, borderHoverColor, borderWidth, buttonLabelDisabledFontColor, buttonLabelFontColor, controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, smallDelay } from '../theme-provider/design-tokens';
|
|
5
5
|
import { Theme } from '../theme-provider/types';
|
|
6
6
|
import { hexToRgbaCssColor } from '../utilities/style/colors';
|
|
7
7
|
import { focusVisible } from '../utilities/style/focus';
|
|
@@ -19,9 +19,6 @@ export const styles = css `
|
|
|
19
19
|
--ni-private-switch-indicator-size: 24px;
|
|
20
20
|
--ni-private-switch-indicator-inner-size: 18px;
|
|
21
21
|
--ni-private-switch-indicator-margin: -2px;
|
|
22
|
-
padding-bottom: calc(
|
|
23
|
-
${controlHeight} - var(--ni-private-switch-height)
|
|
24
|
-
);
|
|
25
22
|
}
|
|
26
23
|
|
|
27
24
|
:host([disabled]) {
|
|
@@ -46,6 +43,12 @@ export const styles = css `
|
|
|
46
43
|
.switch-container {
|
|
47
44
|
display: flex;
|
|
48
45
|
align-items: center;
|
|
46
|
+
${'' /*
|
|
47
|
+
Reserve space around the 24px control to fill a 32px height until we have a switch 32 design.
|
|
48
|
+
See: https://github.com/ni/nimble/issues/3013
|
|
49
|
+
*/}
|
|
50
|
+
padding-top: 2px;
|
|
51
|
+
padding-bottom: 6px;
|
|
49
52
|
}
|
|
50
53
|
|
|
51
54
|
slot[name='unchecked-message']::slotted(*) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n Black15,\n Black75,\n Black91,\n DigitalGreenLight,\n PowerGreen,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n bodyFont,\n borderHoverColor,\n borderWidth,\n buttonLabelDisabledFontColor,\n buttonLabelFontColor,\n controlHeight,\n controlLabelDisabledFontColor,\n controlLabelFont,\n controlLabelFontColor,\n smallDelay\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n outline: none;\n font: ${bodyFont};\n color: ${buttonLabelFontColor};\n flex-direction: column;\n cursor: pointer;\n --ni-private-switch-height: 24px;\n --ni-private-switch-indicator-size: 24px;\n --ni-private-switch-indicator-inner-size: 18px;\n --ni-private-switch-indicator-margin: -2px;\n padding-bottom: calc(\n ${controlHeight} - var(--ni-private-switch-height)\n );\n }\n\n :host([disabled]) {\n cursor: default;\n color: ${buttonLabelDisabledFontColor};\n }\n\n .label {\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n .switch-container {\n display: flex;\n align-items: center;\n }\n\n slot[name='unchecked-message']::slotted(*) {\n margin-inline-end: 8px;\n }\n\n .switch {\n display: flex;\n height: var(--ni-private-switch-height);\n width: calc(var(--ni-private-switch-height) * 2);\n background-color: var(--ni-private-switch-background-color);\n border-radius: calc(var(--ni-private-switch-height) / 2);\n align-items: center;\n border: calc(${borderWidth}) solid transparent;\n }\n\n :host([aria-checked='true']) .switch {\n background-color: var(--ni-private-switch-background-selected-color);\n }\n\n :host([aria-checked='true']:hover) .switch {\n background-color: var(--ni-private-switch-background-selected-rollover-color);\n }\n\n :host(${focusVisible}) .switch {\n border-color: ${borderHoverColor};\n }\n\n :host(${focusVisible}[aria-checked='true']) .switch {\n background-color: var(--ni-private-switch-background-selected-rollover-color);\n }\n\n :host([disabled]) .switch {\n background-color: var(--ni-private-switch-background-disabled-color);\n }\n\n :host([disabled]:hover) .switch {\n background-color: var(--ni-private-switch-background-disabled-color);\n }\n\n .checked-indicator-spacer {\n flex-grow: 0;\n transition: flex-grow ${smallDelay} ease-in-out;\n }\n\n :host([aria-checked='true']) .checked-indicator-spacer {\n flex-grow: 1;\n }\n\n .checked-indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--ni-private-switch-indicator-background-color);\n width: var(--ni-private-switch-indicator-size);\n height: var(--ni-private-switch-indicator-size);\n border-radius: calc(var(--ni-private-switch-indicator-size) / 2);\n margin: var(--ni-private-switch-indicator-margin);\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-color);\n }\n\n :host([aria-checked='true']) .checked-indicator {\n border-color: var(--ni-private-switch-indicator-border-selected-color);\n }\n\n :host(:hover) .checked-indicator {\n border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n }\n\n :host(${focusVisible}) .checked-indicator {\n border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n }\n\n :host([disabled]) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]:hover) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]${focusVisible}) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]:active) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n opacity: 0;\n }\n\n :host([disabled]${focusVisible}) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n opacity: 0;\n }\n\n .checked-indicator-inner {\n width: var(--ni-private-switch-indicator-inner-size);\n height: var(--ni-private-switch-indicator-inner-size);\n border-radius: calc(var(--ni-private-switch-indicator-inner-size) / 2);\n opacity: 0;\n }\n\n :host([aria-checked='true']) .checked-indicator-inner {\n opacity: 0;\n }\n\n :host(${focusVisible}) .checked-indicator-inner {\n opacity: 1;\n background-color: var(--ni-private-switch-indicator-background-color);\n border: 1px solid var(--ni-private-switch-indicator-border-selected-color);\n }\n\n :host(:active) .checked-indicator-inner {\n opacity: 1;\n background-color: var(--ni-private-switch-indicator-background-active-color);\n }\n\n :host([disabled]) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n }\n\n slot[name='checked-message']::slotted(*) {\n margin-inline-start: 8px;\n }\n\n @media (prefers-reduced-motion) {\n .checked-indicator-inner,\n .checked-indicator-spacer {\n transition-duration: 0s;\n }\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(Black91, 0.1)};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${White};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.15\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.3\n)};\n\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n Black91,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${DigitalGreenLight};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.15\n )};\n \n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(Black15, 0.1)};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${Black75};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.1\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.3\n )};\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n Black15,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${PowerGreen};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.15\n )};\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n White,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${White} ;\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n }\n `\n )\n);\n"]}
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n Black15,\n Black75,\n Black91,\n DigitalGreenLight,\n PowerGreen,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n bodyFont,\n borderHoverColor,\n borderWidth,\n buttonLabelDisabledFontColor,\n buttonLabelFontColor,\n controlLabelDisabledFontColor,\n controlLabelFont,\n controlLabelFontColor,\n smallDelay\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n outline: none;\n font: ${bodyFont};\n color: ${buttonLabelFontColor};\n flex-direction: column;\n cursor: pointer;\n --ni-private-switch-height: 24px;\n --ni-private-switch-indicator-size: 24px;\n --ni-private-switch-indicator-inner-size: 18px;\n --ni-private-switch-indicator-margin: -2px;\n }\n\n :host([disabled]) {\n cursor: default;\n color: ${buttonLabelDisabledFontColor};\n }\n\n .label {\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n .switch-container {\n display: flex;\n align-items: center;\n ${'' /*\n Reserve space around the 24px control to fill a 32px height until we have a switch 32 design.\n See: https://github.com/ni/nimble/issues/3013\n */}\n padding-top: 2px;\n padding-bottom: 6px;\n }\n\n slot[name='unchecked-message']::slotted(*) {\n margin-inline-end: 8px;\n }\n\n .switch {\n display: flex;\n height: var(--ni-private-switch-height);\n width: calc(var(--ni-private-switch-height) * 2);\n background-color: var(--ni-private-switch-background-color);\n border-radius: calc(var(--ni-private-switch-height) / 2);\n align-items: center;\n border: calc(${borderWidth}) solid transparent;\n }\n\n :host([aria-checked='true']) .switch {\n background-color: var(--ni-private-switch-background-selected-color);\n }\n\n :host([aria-checked='true']:hover) .switch {\n background-color: var(--ni-private-switch-background-selected-rollover-color);\n }\n\n :host(${focusVisible}) .switch {\n border-color: ${borderHoverColor};\n }\n\n :host(${focusVisible}[aria-checked='true']) .switch {\n background-color: var(--ni-private-switch-background-selected-rollover-color);\n }\n\n :host([disabled]) .switch {\n background-color: var(--ni-private-switch-background-disabled-color);\n }\n\n :host([disabled]:hover) .switch {\n background-color: var(--ni-private-switch-background-disabled-color);\n }\n\n .checked-indicator-spacer {\n flex-grow: 0;\n transition: flex-grow ${smallDelay} ease-in-out;\n }\n\n :host([aria-checked='true']) .checked-indicator-spacer {\n flex-grow: 1;\n }\n\n .checked-indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--ni-private-switch-indicator-background-color);\n width: var(--ni-private-switch-indicator-size);\n height: var(--ni-private-switch-indicator-size);\n border-radius: calc(var(--ni-private-switch-indicator-size) / 2);\n margin: var(--ni-private-switch-indicator-margin);\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-color);\n }\n\n :host([aria-checked='true']) .checked-indicator {\n border-color: var(--ni-private-switch-indicator-border-selected-color);\n }\n\n :host(:hover) .checked-indicator {\n border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n }\n\n :host(${focusVisible}) .checked-indicator {\n border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n }\n\n :host([disabled]) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]:hover) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]${focusVisible}) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]:active) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n opacity: 0;\n }\n\n :host([disabled]${focusVisible}) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n opacity: 0;\n }\n\n .checked-indicator-inner {\n width: var(--ni-private-switch-indicator-inner-size);\n height: var(--ni-private-switch-indicator-inner-size);\n border-radius: calc(var(--ni-private-switch-indicator-inner-size) / 2);\n opacity: 0;\n }\n\n :host([aria-checked='true']) .checked-indicator-inner {\n opacity: 0;\n }\n\n :host(${focusVisible}) .checked-indicator-inner {\n opacity: 1;\n background-color: var(--ni-private-switch-indicator-background-color);\n border: 1px solid var(--ni-private-switch-indicator-border-selected-color);\n }\n\n :host(:active) .checked-indicator-inner {\n opacity: 1;\n background-color: var(--ni-private-switch-indicator-background-active-color);\n }\n\n :host([disabled]) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n }\n\n slot[name='checked-message']::slotted(*) {\n margin-inline-start: 8px;\n }\n\n @media (prefers-reduced-motion) {\n .checked-indicator-inner,\n .checked-indicator-spacer {\n transition-duration: 0s;\n }\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(Black91, 0.1)};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${White};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.15\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.3\n)};\n\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n Black91,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${DigitalGreenLight};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.15\n )};\n \n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(Black15, 0.1)};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${Black75};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.1\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.3\n )};\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n Black15,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${PowerGreen};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.15\n )};\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n White,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${White} ;\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n }\n `\n )\n);\n"]}
|
|
@@ -5,7 +5,10 @@ import { observable } from '@ni/fast-element';
|
|
|
5
5
|
*/
|
|
6
6
|
class DocumentElementLang {
|
|
7
7
|
constructor() {
|
|
8
|
-
this.lang = document.documentElement.lang;
|
|
8
|
+
this.lang = typeof document === 'undefined' ? '' : document.documentElement.lang;
|
|
9
|
+
if (typeof document === 'undefined') {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
9
12
|
const observer = new MutationObserver(mutations => {
|
|
10
13
|
for (const mutation of mutations) {
|
|
11
14
|
if (mutation.type === 'attributes'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"document-element-lang.js","sourceRoot":"","sources":["../../../../src/utilities/models/document-element-lang.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;GAEG;AACH,MAAM,mBAAmB;IAIrB;QAFO,SAAI,GAAW,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"document-element-lang.js","sourceRoot":"","sources":["../../../../src/utilities/models/document-element-lang.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;GAEG;AACH,MAAM,mBAAmB;IAIrB;QAFO,SAAI,GAAW,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC;QAGvF,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;YAClC,OAAO;QACX,CAAC;QACD,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;YAC9C,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;gBAC/B,IACI,QAAQ,CAAC,IAAI,KAAK,YAAY;uBAC3B,QAAQ,CAAC,aAAa,KAAK,MAAM,EACtC,CAAC;oBACC,IAAI,CAAC,IAAI,GAAI,QAAQ,CAAC,MAAsB,CAAC,IAAI,CAAC;gBACtD,CAAC;YACL,CAAC;QACL,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;YACvC,eAAe,EAAE,CAAC,MAAM,CAAC;SAC5B,CAAC,CAAC;IACP,CAAC;CACJ;AApBU;IADN,UAAU;iDACgF;AAsB/F,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,mBAAmB,EAAE,CAAC","sourcesContent":["import { observable } from '@ni/fast-element';\n\n/**\n * Observable class to subscribe to changes in the page's lang attribute\n */\nclass DocumentElementLang {\n @observable\n public lang: string = typeof document === 'undefined' ? '' : document.documentElement.lang;\n\n public constructor() {\n if (typeof document === 'undefined') {\n return;\n }\n const observer = new MutationObserver(mutations => {\n for (const mutation of mutations) {\n if (\n mutation.type === 'attributes'\n && mutation.attributeName === 'lang'\n ) {\n this.lang = (mutation.target as HTMLElement).lang;\n }\n }\n });\n observer.observe(document.documentElement, {\n attributeFilter: ['lang']\n });\n }\n}\n\nexport const documentElementLang = new DocumentElementLang();\n"]}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "35.12.
|
|
3
|
+
"version": "35.12.4",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run build:icons && npm run build:workers && npm run build:components && npm run build:scss && npm run build:cem",
|
|
7
|
-
"build-bundle": "rollup --config",
|
|
7
|
+
"build-bundle": "rollup --config && npm run test-node-smoke-test",
|
|
8
8
|
"lint": "eslint .",
|
|
9
9
|
"format": "eslint . --fix",
|
|
10
10
|
"pack": "npm pack",
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
"build:cem": "npm run build:cem:config && npm run build:cem:markdown",
|
|
20
20
|
"build:cem:config": "cem analyze --config ./custom-elements-manifest.config.mjs",
|
|
21
21
|
"build:cem:markdown": "node build/generate-markdown.mjs",
|
|
22
|
+
"test-node-smoke-test": "node build/node-smoke-test.mjs",
|
|
22
23
|
"test-chrome-debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging --skip-tags SkipChrome",
|
|
23
24
|
"test-chrome": "karma start karma.conf.headless.cjs --browsers=ChromeHeadlessOpt --single-run --skip-tags SkipChrome",
|
|
24
25
|
"test-firefox-debugger": "karma start karma.conf.cjs --browsers=FirefoxDebugging --skip-tags SkipFirefox",
|
|
@@ -46,8 +47,8 @@
|
|
|
46
47
|
"customElements": "dist/custom-elements.json",
|
|
47
48
|
"dependencies": {
|
|
48
49
|
"@ni/fast-colors": "^10.0.0",
|
|
49
|
-
"@ni/fast-element": "^10.1.
|
|
50
|
-
"@ni/fast-foundation": "^10.2.
|
|
50
|
+
"@ni/fast-element": "^10.1.2",
|
|
51
|
+
"@ni/fast-foundation": "^10.2.4",
|
|
51
52
|
"@ni/fast-web-utilities": "^10.0.0",
|
|
52
53
|
"@ni/nimble-tokens": "^8.18.1",
|
|
53
54
|
"@ni/unit-format": "^1.0.5",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"prefers-reduced-motion.js","sourceRoot":"","sources":["../../../../src/utilities/style/prefers-reduced-motion.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAmB,MAAM,CAAC,UAAU,CAC3E,kCAAkC,CACrC,CAAC","sourcesContent":["/**\n * Singleton utility to watch the prefers-reduced-motion media value\n */\nexport const prefersReducedMotionMediaQuery: MediaQueryList = window.matchMedia(\n '(prefers-reduced-motion: reduce)'\n);\n"]}
|