@ni/nimble-components 35.12.3 → 35.12.5
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 +10 -3
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +5 -4
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +17 -0
- package/dist/custom-elements.md +11 -9
- package/dist/esm/switch/styles.js +7 -4
- package/dist/esm/switch/styles.js.map +1 -1
- package/dist/esm/text-field/index.d.ts +9 -0
- package/dist/esm/text-field/index.js +3 -0
- package/dist/esm/text-field/index.js.map +1 -1
- package/dist/esm/text-field/template.js +1 -0
- package/dist/esm/text-field/template.js.map +1 -1
- package/package.json +1 -1
|
@@ -7001,6 +7001,15 @@
|
|
|
7001
7001
|
"privacy": "public",
|
|
7002
7002
|
"description": "The appearance the text field should have."
|
|
7003
7003
|
},
|
|
7004
|
+
{
|
|
7005
|
+
"kind": "field",
|
|
7006
|
+
"name": "autocomplete",
|
|
7007
|
+
"type": {
|
|
7008
|
+
"text": "string | undefined"
|
|
7009
|
+
},
|
|
7010
|
+
"privacy": "public",
|
|
7011
|
+
"description": "The autofill hint forwarded to the internal input (e.g. \"username\",\n\"current-password\", \"off\") for browser password managers and autofill."
|
|
7012
|
+
},
|
|
7004
7013
|
{
|
|
7005
7014
|
"kind": "field",
|
|
7006
7015
|
"name": "fullBleed",
|
|
@@ -7081,6 +7090,14 @@
|
|
|
7081
7090
|
"description": "The appearance the text field should have.",
|
|
7082
7091
|
"fieldName": "appearance"
|
|
7083
7092
|
},
|
|
7093
|
+
{
|
|
7094
|
+
"name": "autocomplete",
|
|
7095
|
+
"type": {
|
|
7096
|
+
"text": "string | undefined"
|
|
7097
|
+
},
|
|
7098
|
+
"description": "The autofill hint forwarded to the internal input (e.g. \"username\",\n\"current-password\", \"off\") for browser password managers and autofill.",
|
|
7099
|
+
"fieldName": "autocomplete"
|
|
7100
|
+
},
|
|
7084
7101
|
{
|
|
7085
7102
|
"name": "full-bleed",
|
|
7086
7103
|
"type": {
|
package/dist/custom-elements.md
CHANGED
|
@@ -1036,21 +1036,23 @@
|
|
|
1036
1036
|
|
|
1037
1037
|
### Fields
|
|
1038
1038
|
|
|
1039
|
-
| Name | Privacy | Type | Default | Description
|
|
1040
|
-
| -------------------- | ------- | --------------------- | ------- |
|
|
1041
|
-
| `appearance` | public | `TextFieldAppearance` | | The appearance the text field should have.
|
|
1042
|
-
| `
|
|
1043
|
-
| `
|
|
1044
|
-
| `
|
|
1045
|
-
| `
|
|
1046
|
-
| `
|
|
1047
|
-
| `
|
|
1039
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
1040
|
+
| -------------------- | ------- | --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
|
|
1041
|
+
| `appearance` | public | `TextFieldAppearance` | | The appearance the text field should have. | |
|
|
1042
|
+
| `autocomplete` | public | `string \| undefined` | | The autofill hint forwarded to the internal input (e.g. "username",
"current-password", "off") for browser password managers and autofill. | |
|
|
1043
|
+
| `fullBleed` | public | `boolean` | `false` | | |
|
|
1044
|
+
| `appearanceReadOnly` | public | `boolean` | `false` | | |
|
|
1045
|
+
| `errorText` | public | `string \| undefined` | | The error text that will be displayed when a component is in the error appearance | mixinErrorPattern |
|
|
1046
|
+
| `errorVisible` | public | `boolean` | `false` | | mixinErrorPattern |
|
|
1047
|
+
| `errorHasOverflow` | public | `boolean` | `false` | | mixinErrorPattern |
|
|
1048
|
+
| `requiredVisible` | public | `boolean` | `false` | | mixinRequiredVisiblePattern |
|
|
1048
1049
|
|
|
1049
1050
|
### Attributes
|
|
1050
1051
|
|
|
1051
1052
|
| Name | Field | Inherited From |
|
|
1052
1053
|
| --------------------- | ------------------ | -------------- |
|
|
1053
1054
|
| `appearance` | appearance | |
|
|
1055
|
+
| `autocomplete` | autocomplete | |
|
|
1054
1056
|
| `full-bleed` | fullBleed | |
|
|
1055
1057
|
| `appearance-readonly` | appearanceReadOnly | |
|
|
1056
1058
|
|
|
@@ -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"]}
|
|
@@ -34,6 +34,15 @@ export declare class TextField extends TextField_base {
|
|
|
34
34
|
* HTML Attribute: appearance
|
|
35
35
|
*/
|
|
36
36
|
appearance: TextFieldAppearance;
|
|
37
|
+
/**
|
|
38
|
+
* The autofill hint forwarded to the internal input (e.g. "username",
|
|
39
|
+
* "current-password", "off") for browser password managers and autofill.
|
|
40
|
+
*
|
|
41
|
+
* @public
|
|
42
|
+
* @remarks
|
|
43
|
+
* HTML Attribute: autocomplete
|
|
44
|
+
*/
|
|
45
|
+
autocomplete?: string;
|
|
37
46
|
fullBleed: boolean;
|
|
38
47
|
appearanceReadOnly: boolean;
|
|
39
48
|
}
|
|
@@ -29,6 +29,9 @@ export class TextField extends mixinErrorPattern(mixinRequiredVisiblePattern(Fou
|
|
|
29
29
|
__decorate([
|
|
30
30
|
attr
|
|
31
31
|
], TextField.prototype, "appearance", void 0);
|
|
32
|
+
__decorate([
|
|
33
|
+
attr
|
|
34
|
+
], TextField.prototype, "autocomplete", void 0);
|
|
32
35
|
__decorate([
|
|
33
36
|
attr({ attribute: 'full-bleed', mode: 'boolean' })
|
|
34
37
|
], TextField.prototype, "fullBleed", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEnC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAQjF;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,iBAAiB,CAC5C,2BAA2B,CAAC,mBAAmB,CAAC,CACnD;IAFD;;QAGI;;;;;;WAMG;QAEI,eAAU,GAAwB,mBAAmB,CAAC,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEnC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAQjF;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,iBAAiB,CAC5C,2BAA2B,CAAC,mBAAmB,CAAC,CACnD;IAFD;;QAGI;;;;;;WAMG;QAEI,eAAU,GAAwB,mBAAmB,CAAC,SAAS,CAAC;QAchE,cAAS,GAAG,KAAK,CAAC;QAGlB,uBAAkB,GAAG,KAAK,CAAC;IACtC,CAAC;CAAA;AAlBU;IADN,IAAI;6CACkE;AAWhE;IADN,IAAI;+CACwB;AAGtB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CAC1B;AAGlB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qDAC1B;AAGtC,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,IAAI,CAAW;WACb,sBAAsB;;;aAGpB,sBAAsB;;;;UAIzB,iBAAiB;KACtB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,mBAAmB,CAAC","sourcesContent":["import { attr, html } from '@ni/fast-element';\nimport {\n DesignSystem,\n TextField as FoundationTextField,\n type TextFieldOptions\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { TextFieldAppearance } from './types';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { mixinErrorPattern } from '../patterns/error/types';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { template } from './template';\nimport { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-text-field': TextField;\n }\n}\n\n/**\n * A nimble-styed HTML text input\n */\nexport class TextField extends mixinErrorPattern(\n mixinRequiredVisiblePattern(FoundationTextField)\n) {\n /**\n * The appearance the text field should have.\n *\n * @public\n * @remarks\n * HTML Attribute: appearance\n */\n @attr\n public appearance: TextFieldAppearance = TextFieldAppearance.underline;\n\n /**\n * The autofill hint forwarded to the internal input (e.g. \"username\",\n * \"current-password\", \"off\") for browser password managers and autofill.\n *\n * @public\n * @remarks\n * HTML Attribute: autocomplete\n */\n @attr\n public autocomplete?: string;\n\n @attr({ attribute: 'full-bleed', mode: 'boolean' })\n public fullBleed = false;\n\n @attr({ attribute: 'appearance-readonly', mode: 'boolean' })\n public appearanceReadOnly = false;\n}\n\nconst nimbleTextField = TextField.compose<TextFieldOptions>({\n baseName: 'text-field',\n baseClass: FoundationTextField,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n },\n end: html<TextField>`\n <${iconExclamationMarkTag}\n severity=\"error\"\n class=\"error-icon\"\n ></${iconExclamationMarkTag}>\n <span part=\"actions\">\n <slot name=\"actions\"></slot>\n </span>\n ${errorTextTemplate}\n `\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());\nexport const textFieldTag = 'nimble-text-field';\n"]}
|
|
@@ -45,6 +45,7 @@ export const template = (context, definition) => html `
|
|
|
45
45
|
?spellcheck="${x => x.spellcheck}"
|
|
46
46
|
:value="${x => x.value}"
|
|
47
47
|
type="${x => x.type}"
|
|
48
|
+
autocomplete="${x => x.autocomplete}"
|
|
48
49
|
aria-atomic="${x => x.ariaAtomic}"
|
|
49
50
|
aria-busy="${x => x.ariaBusy}"
|
|
50
51
|
aria-controls="${x => x.ariaControls}"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/text-field/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAGH,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EAClB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,kCAAkC,EAAE,MAAM,uCAAuC,CAAC;AAE3F,MAAM,aAAa,GAAG,kCAAkC,CACpD,IAAI,CAAW;;;iBAGF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;cAG7E,OAAO,CAAC;IACd,QAAQ,EAAE,qBAAqB;IAC/B,MAAM,EAAE,gBAAgB;CAC3B,CAAC;;aAEO,CACZ,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAA;;;cAGnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;;;UAGvC,aAAa;;cAET,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;;0BAK1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;2BACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE;8BAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;6BACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;wBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;6BACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;6BAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;2BAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;+BACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;6BACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;6BACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;wBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;+BACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;0BACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;wBACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;+
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/text-field/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, slotted } from '@ni/fast-element';\nimport type { ViewTemplate } from '@ni/fast-element';\nimport {\n type FoundationElementTemplate,\n type TextFieldOptions,\n whitespaceFilter,\n startSlotTemplate,\n endSlotTemplate\n} from '@ni/fast-foundation';\nimport type { TextField } from '.';\nimport { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';\n\nconst labelTemplate = createRequiredVisibleLabelTemplate(\n html<TextField>`<label\n part=\"label\"\n for=\"control\"\n class=\"${x => (x.defaultSlottedNodes?.length > 0 ? 'label' : 'label label__hidden')}\"\n >\n <slot\n ${slotted({\n property: 'defaultSlottedNodes',\n filter: whitespaceFilter\n })}\n ></slot>\n </label>`\n);\n\n/**\n * The template for the {@link @ni/fast-foundation#(TextField:class)} component.\n * @public\n */\nexport const template: FoundationElementTemplate<\nViewTemplate<TextField>,\nTextFieldOptions\n> = (context, definition) => html`\n <template\n class=\"\n ${x => (x.readOnly ? 'readonly' : '')}\n \"\n >\n ${labelTemplate}\n <div class=\"root\" part=\"root\">\n ${startSlotTemplate(context, definition)}\n <input\n class=\"control\"\n part=\"control\"\n id=\"control\"\n @input=\"${x => x.handleTextInput()}\"\n @change=\"${x => x.handleChange()}\"\n ?autofocus=\"${x => x.autofocus}\"\n ?disabled=\"${x => x.disabled}\"\n list=\"${x => x.list}\"\n maxlength=\"${x => x.maxlength}\"\n minlength=\"${x => x.minlength}\"\n pattern=\"${x => x.pattern}\"\n placeholder=\"${x => x.placeholder}\"\n ?readonly=\"${x => x.readOnly}\"\n ?required=\"${x => x.required}\"\n size=\"${x => x.size}\"\n ?spellcheck=\"${x => x.spellcheck}\"\n :value=\"${x => x.value}\"\n type=\"${x => x.type}\"\n autocomplete=\"${x => x.autocomplete}\"\n aria-atomic=\"${x => x.ariaAtomic}\"\n aria-busy=\"${x => x.ariaBusy}\"\n aria-controls=\"${x => x.ariaControls}\"\n aria-current=\"${x => x.ariaCurrent}\"\n aria-describedby=\"${x => x.ariaDescribedby}\"\n aria-details=\"${x => x.ariaDetails}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-errormessage=\"${x => x.ariaErrormessage}\"\n aria-flowto=\"${x => x.ariaFlowto}\"\n aria-haspopup=\"${x => x.ariaHaspopup}\"\n aria-hidden=\"${x => x.ariaHidden}\"\n aria-invalid=\"${x => x.ariaInvalid}\"\n aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n aria-label=\"${x => x.ariaLabel}\"\n aria-labelledby=\"${x => x.ariaLabelledby}\"\n aria-live=\"${x => x.ariaLive}\"\n aria-owns=\"${x => x.ariaOwns}\"\n aria-relevant=\"${x => x.ariaRelevant}\"\n aria-roledescription=\"${x => x.ariaRoledescription}\"\n aria-required=\"${x => x.requiredVisible}\"\n ${ref('control')}\n />\n ${endSlotTemplate(context, definition)}\n </div>\n </template>\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "35.12.
|
|
3
|
+
"version": "35.12.5",
|
|
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",
|