@ni/nimble-components 35.11.0 → 35.12.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 +22 -1
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +22 -1
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/combobox/styles.js +7 -0
- package/dist/esm/combobox/styles.js.map +1 -1
- package/dist/esm/number-field/styles.js +8 -0
- package/dist/esm/number-field/styles.js.map +1 -1
- package/dist/esm/text-area/styles.js +4 -1
- package/dist/esm/text-area/styles.js.map +1 -1
- package/dist/esm/text-field/styles.js +3 -0
- package/dist/esm/text-field/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,6 +12,7 @@ export const styles = css `
|
|
|
12
12
|
${requiredVisibleStyles}
|
|
13
13
|
|
|
14
14
|
:host {
|
|
15
|
+
field-sizing: fixed;
|
|
15
16
|
--ni-private-hover-bottom-border-width: 2px;
|
|
16
17
|
--ni-private-bottom-border-width: 1px;
|
|
17
18
|
--ni-private-height-within-border: calc(
|
|
@@ -20,6 +21,7 @@ export const styles = css `
|
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
.control {
|
|
24
|
+
field-sizing: inherit;
|
|
23
25
|
bottom-border-width: var(--ni-private-bottom-border-width);
|
|
24
26
|
}
|
|
25
27
|
|
|
@@ -27,7 +29,12 @@ export const styles = css `
|
|
|
27
29
|
border-bottom-color: ${borderHoverColor};
|
|
28
30
|
}
|
|
29
31
|
|
|
32
|
+
slot[name='control'] {
|
|
33
|
+
field-sizing: inherit;
|
|
34
|
+
}
|
|
35
|
+
|
|
30
36
|
.selected-value {
|
|
37
|
+
field-sizing: inherit;
|
|
31
38
|
-webkit-appearance: none;
|
|
32
39
|
background: transparent;
|
|
33
40
|
border: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/combobox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;MACX,qBAAqB
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/combobox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;MACX,qBAAqB;;;;;;;cAOb,aAAa,UAAU,WAAW;;;;;;;;;;+BAUjB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;qBAsB1B,YAAY;;;;;iBAKhB,oBAAoB;;;;iBAIpB,qBAAqB;;;;iBAIrB,oBAAoB;;;;;;;;;;yBAUZ,YAAY;;;;;;;;;;uCAUE,qBAAqB;uBACrC,aAAa;;;;;;UAM1B,aAAa,CAAC,iBAAiB;uBAClB,YAAY;;;;gBAInB,qBAAqB;;CAEpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n controlHeight,\n bodyDisabledFontColor,\n borderRgbPartialColor,\n smallPadding,\n borderHoverColor,\n borderWidth,\n placeholderFontColor\n} from '../theme-provider/design-tokens';\n\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { focusVisible } from '../utilities/style/focus';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from '../select/types';\n\nexport const styles = css`\n ${dropdownStyles}\n ${errorStyles}\n ${requiredVisibleStyles}\n\n :host {\n field-sizing: fixed;\n --ni-private-hover-bottom-border-width: 2px;\n --ni-private-bottom-border-width: 1px;\n --ni-private-height-within-border: calc(\n ${controlHeight} - 2 * ${borderWidth}\n );\n }\n\n .control {\n field-sizing: inherit;\n bottom-border-width: var(--ni-private-bottom-border-width);\n }\n\n .control:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n slot[name='control'] {\n field-sizing: inherit;\n }\n\n .selected-value {\n field-sizing: inherit;\n -webkit-appearance: none;\n background: transparent;\n border: none;\n color: inherit;\n margin: auto 0;\n width: 100%;\n font: inherit;\n height: var(--ni-private-height-within-border);\n }\n\n .selected-value:hover,\n .selected-value:disabled,\n .selected-value:active,\n .selected-value${focusVisible} {\n outline: none;\n }\n\n .selected-value::placeholder {\n color: ${placeholderFontColor};\n }\n\n :host([disabled]) .selected-value::placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .selected-value::placeholder {\n color: ${placeholderFontColor};\n }\n\n [part='indicator'] {\n display: none;\n }\n\n .end-slot-container {\n display: flex;\n align-items: baseline;\n padding-right: ${smallPadding};\n }\n\n :host([disabled][appearance-readonly]) .end-slot-container {\n display: none;\n }\n\n .separator {\n display: inline;\n width: 2px;\n border-right: 2px solid rgba(${borderRgbPartialColor}, 0.15);\n height: calc(${controlHeight} - 12px);\n align-self: center;\n margin-left: 4px;\n }\n\n .dropdown-button {\n ${controlHeight.cssCustomProperty}: 24px;\n margin-left: ${smallPadding};\n }\n\n :host([disabled]) .dropdown-icon {\n fill: ${bodyDisabledFontColor};\n }\n`.withBehaviors(\n appearanceBehavior(\n DropdownAppearance.block,\n css`\n :host([error-visible]) .control {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n )\n);\n"]}
|
|
@@ -16,6 +16,7 @@ export const styles = css `
|
|
|
16
16
|
outline: none;
|
|
17
17
|
${userSelectNone}
|
|
18
18
|
color: ${bodyFontColor};
|
|
19
|
+
field-sizing: fixed;
|
|
19
20
|
--ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
|
|
20
21
|
--ni-private-height-within-border: calc(
|
|
21
22
|
${controlHeight} - 2 * ${borderWidth}
|
|
@@ -48,6 +49,7 @@ export const styles = css `
|
|
|
48
49
|
position: relative;
|
|
49
50
|
display: flex;
|
|
50
51
|
flex-direction: row;
|
|
52
|
+
field-sizing: inherit;
|
|
51
53
|
justify-content: center;
|
|
52
54
|
align-items: center;
|
|
53
55
|
border-radius: 0px;
|
|
@@ -115,12 +117,17 @@ export const styles = css `
|
|
|
115
117
|
font: inherit;
|
|
116
118
|
background: transparent;
|
|
117
119
|
color: inherit;
|
|
120
|
+
field-sizing: inherit;
|
|
118
121
|
height: var(--ni-private-height-within-border);
|
|
119
122
|
width: 100%;
|
|
120
123
|
border: none;
|
|
121
124
|
padding: 0px;
|
|
122
125
|
padding-left: ${mediumPadding};
|
|
123
126
|
}
|
|
127
|
+
|
|
128
|
+
:host([hide-step]) .control {
|
|
129
|
+
padding-right: ${smallPadding};
|
|
130
|
+
}
|
|
124
131
|
|
|
125
132
|
.control:hover,
|
|
126
133
|
.control:focus,
|
|
@@ -218,6 +225,7 @@ export const styles = css `
|
|
|
218
225
|
|
|
219
226
|
:host([full-bleed]) .control {
|
|
220
227
|
padding-left: 0px;
|
|
228
|
+
padding-right: 0px;
|
|
221
229
|
}
|
|
222
230
|
`));
|
|
223
231
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;;mDAEqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;iCAWL,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;;6BAKlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;4BAMI,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0BhB,aAAa;;;;yBAIZ,YAAY;;;;;;;;;;;;;;;iBAepB,qBAAqB;;;;iBAIrB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE;sFACsF,CAAC,EAC3F;;;yBAGqB,YAAY;;;;;;;;UAQ3B,aAAa,CAAC,iBAAiB;;;;;;;;;wBASjB,YAAY;;CAEnC,CAAC,aAAa,CACX,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;uCAKvB,WAAW;;;;;uCAKX,WAAW;;;;;;yCAMT,qBAAqB;;;;;;;uCAOvB,SAAS;;SAEvC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;;SAOnC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n bodyFontColor,\n bodyDisabledFontColor,\n controlHeight,\n controlLabelFont,\n controlLabelFontColor,\n smallDelay,\n bodyFont,\n failColor,\n mediumPadding,\n smallPadding,\n controlLabelDisabledFontColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { NumberFieldAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-block')}\n ${errorStyles}\n ${requiredVisibleStyles}\n\n :host {\n font: ${bodyFont};\n outline: none;\n ${userSelectNone}\n color: ${bodyFontColor};\n field-sizing: fixed;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n --ni-private-height-within-border: calc(\n ${controlHeight} - 2 * ${borderWidth}\n );\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) {\n color: ${bodyFontColor};\n }\n\n .label {\n display: flex;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .label {\n color: ${controlLabelFontColor};\n }\n\n .root {\n position: relative;\n display: flex;\n flex-direction: row;\n field-sizing: inherit;\n justify-content: center;\n align-items: center;\n border-radius: 0px;\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n padding: ${borderWidth};\n }\n\n .root:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([readonly]) .root,\n :host([disabled]) .root {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([error-visible]) .root {\n border-bottom-color: ${failColor};\n }\n\n .root::before {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n .root::after {\n content: '';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n .root::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) .root::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) .root::after {\n width: 100%;\n }\n\n :host([readonly]:hover) .root::after,\n :host([disabled]:hover) .root::after {\n width: 0px;\n }\n\n [part='start'] {\n display: none;\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n background: transparent;\n color: inherit;\n field-sizing: inherit;\n height: var(--ni-private-height-within-border);\n width: 100%;\n border: none;\n padding: 0px;\n padding-left: ${mediumPadding};\n }\n \n :host([hide-step]) .control {\n padding-right: ${smallPadding};\n }\n\n .control:hover,\n .control:focus,\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n :host([disabled][appearance-readonly]) .control {\n cursor: text;\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n :host([disabled]) .control::placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .controls {\n display: contents;\n }\n\n ${\n /* We are using flex `order` to define the visual ordering of the inc/dec buttons\n and the invalid icon because they are not \"interactive\" i.e. part of the tab order */ ''\n }\n .step-up {\n order: 3;\n padding-right: ${smallPadding};\n }\n\n .step-down {\n order: 2;\n }\n\n .step-up-down-button {\n ${controlHeight.cssCustomProperty}: 24px;\n }\n\n [part='end'] {\n display: contents;\n }\n\n .error-icon {\n order: 1;\n margin-right: ${smallPadding};\n }\n`.withBehaviors(\n appearanceBehavior(\n NumberFieldAppearance.underline,\n css`\n .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n appearanceBehavior(\n NumberFieldAppearance.block,\n css`\n .root {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .root:focus-within,\n :host([error-visible]) .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host(:hover) .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host([readonly]) .root,\n :host([disabled]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n border-color: transparent;\n }\n\n :host([error-visible][readonly]) .root,\n :host([error-visible][disabled]) .root {\n padding-bottom: 0;\n border-bottom-color: ${failColor};\n }\n `\n ),\n appearanceBehavior(\n NumberFieldAppearance.outline,\n css`\n .root {\n border-width: ${borderWidth};\n padding: 0;\n }\n `\n ),\n appearanceBehavior(\n NumberFieldAppearance.frameless,\n css`\n .root {\n padding-left: ${borderWidth};\n padding-right: ${borderWidth};\n }\n\n :host([full-bleed]) .control {\n padding-left: 0px;\n padding-right: 0px;\n }\n `\n )\n);\n"]}
|
|
@@ -16,6 +16,8 @@ export const styles = css `
|
|
|
16
16
|
outline: none;
|
|
17
17
|
${userSelectNone}
|
|
18
18
|
color: ${bodyFontColor};
|
|
19
|
+
field-sizing: fixed;
|
|
20
|
+
min-width: 100px;
|
|
19
21
|
flex-direction: column;
|
|
20
22
|
vertical-align: top;
|
|
21
23
|
--ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
|
|
@@ -47,6 +49,7 @@ export const styles = css `
|
|
|
47
49
|
display: flex;
|
|
48
50
|
justify-content: center;
|
|
49
51
|
position: relative;
|
|
52
|
+
field-sizing: inherit;
|
|
50
53
|
height: 100%;
|
|
51
54
|
width: 100%;
|
|
52
55
|
}
|
|
@@ -91,7 +94,7 @@ export const styles = css `
|
|
|
91
94
|
border-radius: 0px;
|
|
92
95
|
align-items: flex-end;
|
|
93
96
|
border: ${borderWidth} solid transparent;
|
|
94
|
-
|
|
97
|
+
field-sizing: inherit;
|
|
95
98
|
min-height: calc(${iconSize} + ${standardPadding});
|
|
96
99
|
padding: 8px;
|
|
97
100
|
${
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;;;;;mDAKqB,WAAW;;;;iBAI7C,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;;;;;4BAeV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;kBAqBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;;;;;+BAQnB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;;;;;;;;;;eAoBvB,aAAa;;;CAG3B,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;qCAE0B,qBAAqB;;;SAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;;;;;yCASrB,qBAAqB;;;;qCAIzB,qBAAqB;;;;;uCAKnB,SAAS;;SAEvC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n smallDelay,\n bodyFontColor,\n bodyDisabledFontColor,\n controlLabelFont,\n controlLabelFontColor,\n bodyFont,\n controlLabelDisabledFontColor,\n iconSize,\n failColor,\n standardPadding,\n mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextAreaAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-flex')}\n ${errorStyles}\n ${requiredVisibleStyles}\n\n :host {\n font: ${bodyFont};\n outline: none;\n ${userSelectNone}\n color: ${bodyFontColor};\n field-sizing: fixed;\n min-width: 100px;\n flex-direction: column;\n vertical-align: top;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) {\n color: ${bodyFontColor};\n }\n\n .label {\n display: block;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .label {\n color: ${controlLabelFontColor};\n }\n\n .container {\n display: flex;\n justify-content: center;\n position: relative;\n field-sizing: inherit;\n height: 100%;\n width: 100%;\n }\n\n .container::after {\n content: ' ';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n .container::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) .container::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) .container::after {\n width: 100%;\n }\n\n :host([disabled]:hover) .container::after,\n :host([readonly]:hover) .container::after {\n width: 0px;\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n flex-grow: 1;\n outline: none;\n position: relative;\n color: inherit;\n border-radius: 0px;\n align-items: flex-end;\n border: ${borderWidth} solid transparent;\n field-sizing: inherit;\n min-height: calc(${iconSize} + ${standardPadding});\n padding: 8px;\n ${\n /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n }\n padding-right: calc(${iconSize});\n margin: 0px;\n resize: none;\n }\n\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n .control:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n .control[readonly],\n .control[readonly]:hover,\n .control[readonly]:hover:focus-within,\n .control[disabled],\n .control[disabled]:hover {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled][appearance-readonly]) .control {\n cursor: text;\n }\n\n :host([error-visible]) .control {\n border-bottom-color: ${failColor};\n }\n\n :host([error-visible]) .control[readonly]:hover:focus-within {\n border-bottom-color: ${failColor};\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n :host([disabled]) .control::placeholder {\n color: ${controlLabelDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n :host([resize='both']) .control {\n resize: both;\n }\n :host([resize='horizontal']) .control {\n resize: horizontal;\n }\n :host([resize='vertical']) .control {\n resize: vertical;\n }\n\n :host([error-visible]) .error-icon {\n display: none;\n }\n\n :host([error-visible]) .error-icon.scrollbar-width-calculated {\n display: inline-flex;\n position: absolute;\n top: ${mediumPadding};\n right: var(--ni-private-scrollbar-width);\n }\n`.withBehaviors(\n appearanceBehavior(\n TextAreaAppearance.outline,\n css`\n .control {\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n background-color: transparent;\n }\n `\n ),\n appearanceBehavior(\n TextAreaAppearance.block,\n css`\n .control {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([readonly]) .control {\n background-color: transparent;\n }\n\n :host([disabled]) .control {\n border-color: transparent;\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled][appearance-readonly]) .control {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n background-color: transparent;\n }\n\n :host([error-visible][disabled]) .control {\n border-bottom-color: ${failColor};\n }\n `\n )\n);\n"]}
|
|
@@ -18,6 +18,7 @@ export const styles = css `
|
|
|
18
18
|
outline: none;
|
|
19
19
|
${userSelectNone}
|
|
20
20
|
color: ${bodyFontColor};
|
|
21
|
+
field-sizing: fixed;
|
|
21
22
|
--ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
|
|
22
23
|
--ni-private-height-within-border: calc(
|
|
23
24
|
${controlHeight} - 2 * ${borderWidth}
|
|
@@ -52,6 +53,7 @@ export const styles = css `
|
|
|
52
53
|
display: flex;
|
|
53
54
|
flex-direction: row;
|
|
54
55
|
border-radius: 0px;
|
|
56
|
+
field-sizing: inherit;
|
|
55
57
|
font: inherit;
|
|
56
58
|
align-items: center;
|
|
57
59
|
justify-content: center;
|
|
@@ -130,6 +132,7 @@ export const styles = css `
|
|
|
130
132
|
background: transparent;
|
|
131
133
|
color: inherit;
|
|
132
134
|
padding: 0px;
|
|
135
|
+
field-sizing: inherit;
|
|
133
136
|
height: var(--ni-private-height-within-border);
|
|
134
137
|
width: 100%;
|
|
135
138
|
margin-top: auto;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;;iBAM/B,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;iCAWL,qBAAqB;eACvC,YAAY;mBACR,WAAW;6BACD,WAAW,MAAM,YAAY;;;;6BAI7B,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;UAQd,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;;;;;;;wBAcA,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAiC1B;AACE;;6CAE6C,CAAC,EAClD;;;;;;;;;iBASS,qBAAqB;;;;iBAIrB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;kCAUJ,WAAW,MAAM,YAAY;4BACnC,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACX,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAEqB,WAAW;;gCAEX,YAAY;;SAEnC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;SAIF,CACJ,EACD,aAAa,CACT,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EACzB,GAAG,CAAA;;;;SAIF,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n bodyFontColor,\n bodyDisabledFontColor,\n controlHeight,\n failColor,\n smallDelay,\n controlLabelFont,\n bodyFont,\n controlLabelFontColor,\n controlLabelDisabledFontColor,\n smallPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextFieldAppearance } from './types';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-block')}\n ${errorStyles}\n ${requiredVisibleStyles}\n\n :host {\n font: ${bodyFont};\n outline: none;\n ${userSelectNone}\n color: ${bodyFontColor};\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n --ni-private-height-within-border: calc(\n ${controlHeight} - 2 * ${borderWidth}\n );\n --ni-private-default-start-slot-opacity: 0.6;\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) {\n color: ${bodyFontColor};\n }\n\n .label {\n display: flex;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .label {\n color: ${controlLabelFontColor};\n }\n\n .root {\n position: relative;\n display: flex;\n flex-direction: row;\n border-radius: 0px;\n font: inherit;\n align-items: center;\n justify-content: center;\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n gap: ${smallPadding};\n padding: ${borderWidth};\n padding-left: calc(${borderWidth} + ${smallPadding});\n }\n\n :host([readonly]) .root {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled]) .root {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([error-visible]) .root {\n border-bottom-color: ${failColor};\n }\n\n .root:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([appearance='frameless'][full-bleed]) .root {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .root::before {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n :host([appearance='frameless'][full-bleed]) .root::before {\n display: none;\n }\n\n .root::after {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n :host([appearance='frameless'][full-bleed]) .root::after {\n display: none;\n }\n\n [part='start'] {\n display: contents;\n }\n\n slot[name='start']::slotted(*) {\n flex: none;\n opacity: var(--ni-private-default-start-slot-opacity);\n margin-right: ${smallPadding};\n }\n\n :host([disabled]) slot[name='start']::slotted(*) {\n opacity: 0.3;\n }\n\n :host([disabled][appearance-readonly]) slot[name='start']::slotted(*) {\n opacity: var(--ni-private-default-start-slot-opacity);\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n background: transparent;\n color: inherit;\n padding: 0px;\n height: var(--ni-private-height-within-border);\n width: 100%;\n margin-top: auto;\n margin-bottom: auto;\n border: none;\n text-overflow: ellipsis;\n }\n\n .control:hover,\n .control:focus,\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n .control:disabled {\n ${\n /* There's an issue with the input element where the ellipsized\n overflowed text is blank when scrolled into view, so just clip instead.\n See https://webcompat.com/issues/104481 */ ''\n }\n text-overflow: clip;\n }\n\n :host([disabled][appearance-readonly]) .control {\n cursor: text;\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n :host([disabled]) .control::placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n [part='end'] {\n display: contents;\n }\n\n [part='end']::after {\n content: '';\n position: absolute;\n margin-left: calc(-1 * (${borderWidth} + ${smallPadding}));\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n [part='end']::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) [part='end']::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) [part='end']::after {\n width: 100%;\n }\n\n :host([disabled]:hover) [part='end']::after,\n :host([readonly]:hover) [part='end']::after {\n width: 0px;\n }\n\n [part='actions'] {\n display: contents;\n }\n\n slot[name='actions']::slotted(*) {\n ${controlHeight.cssCustomProperty}: 24px;\n }\n`.withBehaviors(\n appearanceBehavior(\n TextFieldAppearance.underline,\n css`\n .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.block,\n css`\n .root {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .control {\n padding-left: ${borderWidth};\n padding-right: ${borderWidth};\n }\n\n .root:focus-within,\n :host([error-visible]) .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host(:hover) .root {\n padding-bottom: 0;\n }\n\n :host([readonly]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n border-color: transparent;\n }\n\n :host([disabled]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.outline,\n css`\n .root {\n border-width: ${borderWidth};\n padding: 0;\n padding-left: ${smallPadding};\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.frameless,\n css`\n .control {\n padding-left: ${borderWidth};\n padding-right: ${borderWidth};\n }\n\n :host([readonly]) .root {\n border-color: transparent;\n }\n `\n ),\n themeBehavior(\n Theme.light,\n css`\n .control::-ms-reveal {\n filter: invert(0%);\n }\n `\n ),\n themeBehavior(\n [Theme.dark, Theme.color],\n css`\n .control::-ms-reveal {\n filter: invert(100%);\n }\n `\n )\n);\n"]}
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;;mDAEqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;;iBAM/B,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;;iCAYL,qBAAqB;eACvC,YAAY;mBACR,WAAW;6BACD,WAAW,MAAM,YAAY;;;;6BAI7B,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;UAQd,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;;;;;;;wBAcA,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkC1B;AACE;;6CAE6C,CAAC,EAClD;;;;;;;;;iBASS,qBAAqB;;;;iBAIrB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;kCAUJ,WAAW,MAAM,YAAY;4BACnC,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACX,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAEqB,WAAW;;gCAEX,YAAY;;SAEnC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;SAIF,CACJ,EACD,aAAa,CACT,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EACzB,GAAG,CAAA;;;;SAIF,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n bodyFontColor,\n bodyDisabledFontColor,\n controlHeight,\n failColor,\n smallDelay,\n controlLabelFont,\n bodyFont,\n controlLabelFontColor,\n controlLabelDisabledFontColor,\n smallPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextFieldAppearance } from './types';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-block')}\n ${errorStyles}\n ${requiredVisibleStyles}\n\n :host {\n font: ${bodyFont};\n outline: none;\n ${userSelectNone}\n color: ${bodyFontColor};\n field-sizing: fixed;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n --ni-private-height-within-border: calc(\n ${controlHeight} - 2 * ${borderWidth}\n );\n --ni-private-default-start-slot-opacity: 0.6;\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) {\n color: ${bodyFontColor};\n }\n\n .label {\n display: flex;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .label {\n color: ${controlLabelFontColor};\n }\n\n .root {\n position: relative;\n display: flex;\n flex-direction: row;\n border-radius: 0px;\n field-sizing: inherit;\n font: inherit;\n align-items: center;\n justify-content: center;\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n gap: ${smallPadding};\n padding: ${borderWidth};\n padding-left: calc(${borderWidth} + ${smallPadding});\n }\n\n :host([readonly]) .root {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled]) .root {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([error-visible]) .root {\n border-bottom-color: ${failColor};\n }\n\n .root:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([appearance='frameless'][full-bleed]) .root {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .root::before {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n :host([appearance='frameless'][full-bleed]) .root::before {\n display: none;\n }\n\n .root::after {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n :host([appearance='frameless'][full-bleed]) .root::after {\n display: none;\n }\n\n [part='start'] {\n display: contents;\n }\n\n slot[name='start']::slotted(*) {\n flex: none;\n opacity: var(--ni-private-default-start-slot-opacity);\n margin-right: ${smallPadding};\n }\n\n :host([disabled]) slot[name='start']::slotted(*) {\n opacity: 0.3;\n }\n\n :host([disabled][appearance-readonly]) slot[name='start']::slotted(*) {\n opacity: var(--ni-private-default-start-slot-opacity);\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n background: transparent;\n color: inherit;\n padding: 0px;\n field-sizing: inherit;\n height: var(--ni-private-height-within-border);\n width: 100%;\n margin-top: auto;\n margin-bottom: auto;\n border: none;\n text-overflow: ellipsis;\n }\n\n .control:hover,\n .control:focus,\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n .control:disabled {\n ${\n /* There's an issue with the input element where the ellipsized\n overflowed text is blank when scrolled into view, so just clip instead.\n See https://webcompat.com/issues/104481 */ ''\n }\n text-overflow: clip;\n }\n\n :host([disabled][appearance-readonly]) .control {\n cursor: text;\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n :host([disabled]) .control::placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n [part='end'] {\n display: contents;\n }\n\n [part='end']::after {\n content: '';\n position: absolute;\n margin-left: calc(-1 * (${borderWidth} + ${smallPadding}));\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n [part='end']::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) [part='end']::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) [part='end']::after {\n width: 100%;\n }\n\n :host([disabled]:hover) [part='end']::after,\n :host([readonly]:hover) [part='end']::after {\n width: 0px;\n }\n\n [part='actions'] {\n display: contents;\n }\n\n slot[name='actions']::slotted(*) {\n ${controlHeight.cssCustomProperty}: 24px;\n }\n`.withBehaviors(\n appearanceBehavior(\n TextFieldAppearance.underline,\n css`\n .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.block,\n css`\n .root {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .control {\n padding-left: ${borderWidth};\n padding-right: ${borderWidth};\n }\n\n .root:focus-within,\n :host([error-visible]) .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host(:hover) .root {\n padding-bottom: 0;\n }\n\n :host([readonly]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n border-color: transparent;\n }\n\n :host([disabled]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.outline,\n css`\n .root {\n border-width: ${borderWidth};\n padding: 0;\n padding-left: ${smallPadding};\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.frameless,\n css`\n .control {\n padding-left: ${borderWidth};\n padding-right: ${borderWidth};\n }\n\n :host([readonly]) .root {\n border-color: transparent;\n }\n `\n ),\n themeBehavior(\n Theme.light,\n css`\n .control::-ms-reveal {\n filter: invert(0%);\n }\n `\n ),\n themeBehavior(\n [Theme.dark, Theme.color],\n css`\n .control::-ms-reveal {\n filter: invert(100%);\n }\n `\n )\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "35.
|
|
3
|
+
"version": "35.12.0",
|
|
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",
|