@ni/nimble-components 32.2.8 → 32.2.9
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 +5 -1
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +5 -1
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/text-field/styles.js +6 -2
- package/dist/esm/text-field/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '../utilities/style/display';
|
|
3
|
-
import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, failColor, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, controlLabelDisabledFontColor,
|
|
3
|
+
import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, failColor, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, controlLabelDisabledFontColor, smallPadding } from '../theme-provider/design-tokens';
|
|
4
4
|
import { appearanceBehavior } from '../utilities/style/appearance';
|
|
5
5
|
import { TextFieldAppearance } from './types';
|
|
6
6
|
import { Theme } from '../theme-provider/types';
|
|
@@ -45,8 +45,9 @@ export const styles = css `
|
|
|
45
45
|
align-items: center;
|
|
46
46
|
justify-content: center;
|
|
47
47
|
border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
|
|
48
|
-
gap: ${
|
|
48
|
+
gap: ${smallPadding};
|
|
49
49
|
padding: ${borderWidth};
|
|
50
|
+
padding-left: calc(${borderWidth} + ${smallPadding});
|
|
50
51
|
}
|
|
51
52
|
|
|
52
53
|
:host([readonly]) .root {
|
|
@@ -101,6 +102,7 @@ export const styles = css `
|
|
|
101
102
|
slot[name='start']::slotted(*) {
|
|
102
103
|
flex: none;
|
|
103
104
|
opacity: 0.6;
|
|
105
|
+
margin-right: ${smallPadding};
|
|
104
106
|
}
|
|
105
107
|
|
|
106
108
|
:host([disabled]) slot[name='start']::slotted(*) {
|
|
@@ -151,6 +153,7 @@ export const styles = css `
|
|
|
151
153
|
[part='end']::after {
|
|
152
154
|
content: '';
|
|
153
155
|
position: absolute;
|
|
156
|
+
margin-left: calc(-1 * (${borderWidth} + ${smallPadding}));
|
|
154
157
|
bottom: calc(-1 * ${borderWidth});
|
|
155
158
|
width: 0px;
|
|
156
159
|
height: 0px;
|
|
@@ -222,6 +225,7 @@ export const styles = css `
|
|
|
222
225
|
.root {
|
|
223
226
|
border-width: ${borderWidth};
|
|
224
227
|
padding: 0;
|
|
228
|
+
padding-left: ${smallPadding};
|
|
225
229
|
}
|
|
226
230
|
`), appearanceBehavior(TextFieldAppearance.frameless, css `
|
|
227
231
|
.control {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,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,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,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,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;iCAWb,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA6B1B;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,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 '@microsoft/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 { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-block')}\n ${errorStyles}\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 }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\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 .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: 0.6;\n margin-right: ${smallPadding};\n }\n\n :host([disabled]) slot[name='start']::slotted(*) {\n opacity: 0.3;\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 .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .control[disabled]::placeholder {\n color: ${bodyDisabledFontColor};\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": "32.2.
|
|
3
|
+
"version": "32.2.9",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",
|