@ni/nimble-components 32.2.6 → 32.2.8
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 +125 -22
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +422 -402
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/number-field/styles.js +11 -0
- package/dist/esm/number-field/styles.js.map +1 -1
- package/package.json +7 -7
|
@@ -50,6 +50,7 @@ export const styles = css `
|
|
|
50
50
|
border-bottom-color: ${borderHoverColor};
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
+
:host([readonly]) .root,
|
|
53
54
|
:host([disabled]) .root {
|
|
54
55
|
border-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
55
56
|
}
|
|
@@ -91,6 +92,7 @@ export const styles = css `
|
|
|
91
92
|
width: 100%;
|
|
92
93
|
}
|
|
93
94
|
|
|
95
|
+
:host([readonly]:hover) .root::after,
|
|
94
96
|
:host([disabled]:hover) .root::after {
|
|
95
97
|
width: 0px;
|
|
96
98
|
}
|
|
@@ -171,11 +173,20 @@ export const styles = css `
|
|
|
171
173
|
}
|
|
172
174
|
|
|
173
175
|
:host(:hover) .root {
|
|
176
|
+
border-bottom-width: ${borderWidth};
|
|
174
177
|
padding-bottom: 0;
|
|
175
178
|
}
|
|
176
179
|
|
|
180
|
+
:host([readonly]) .root,
|
|
177
181
|
:host([disabled]) .root {
|
|
178
182
|
background-color: rgba(${borderRgbPartialColor}, 0.07);
|
|
183
|
+
border-color: transparent;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
:host([error-visible][readonly]) .root,
|
|
187
|
+
:host([error-visible][disabled]) .root {
|
|
188
|
+
padding-bottom: 0;
|
|
189
|
+
border-bottom-color: ${failColor};
|
|
179
190
|
}
|
|
180
191
|
`), appearanceBehavior(NumberFieldAppearance.outline, css `
|
|
181
192
|
.root {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,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,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;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;iCAUb,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,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,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;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;iCAUb,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;;6BAKlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;4BAMI,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;wBAyBhB,aAAa;;;;;;;;;;;iBAWpB,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,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/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 { 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 cursor: default;\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 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 height: var(--ni-private-height-within-border);\n width: 100%;\n border: none;\n padding: 0px;\n padding-left: ${mediumPadding};\n }\n\n .control:hover,\n .control:focus,\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .control[disabled]::placeholder {\n color: ${bodyDisabledFontColor};\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);\n"]}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "32.2.
|
|
3
|
+
"version": "32.2.8",
|
|
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",
|
|
7
|
-
"lint-concurrent": "concurrently --timings --group \"npm:eslint\" \"npm:prettier\"",
|
|
7
|
+
"lint-concurrent": "concurrently --pad-prefix --timings --group \"npm:eslint\" \"npm:prettier\"",
|
|
8
8
|
"format": "npm run prettier-fix",
|
|
9
9
|
"eslint": "eslint .",
|
|
10
10
|
"eslint-fix": "eslint . --fix",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"test-webkit:debugger": "karma start karma.conf.js --browsers=WebkitDebugging --skip-tags SkipWebkit",
|
|
42
42
|
"test-webkit:watch": "karma start karma.conf.headless.js --browsers=WebkitHeadless --skip-tags SkipWebkit --watch-extensions js",
|
|
43
43
|
"test-webkit": "karma start karma.conf.headless.js --browsers=WebkitHeadless --single-run --skip-tags SkipWebkit",
|
|
44
|
-
"test-concurrent": "concurrently --timings --group \"npm:test-chrome\" \"npm:test-firefox\" \"npm:test-webkit\""
|
|
44
|
+
"test-concurrent": "concurrently --pad-prefix --timings --group \"npm:test-chrome\" \"npm:test-firefox\" \"npm:test-webkit\""
|
|
45
45
|
},
|
|
46
46
|
"repository": {
|
|
47
47
|
"type": "git",
|
|
@@ -103,14 +103,14 @@
|
|
|
103
103
|
"devDependencies": {
|
|
104
104
|
"@ni-private/eslint-config-nimble": "*",
|
|
105
105
|
"@ni/jasmine-parameterized": "^1.0.0",
|
|
106
|
-
"@rollup/plugin-commonjs": "^
|
|
106
|
+
"@rollup/plugin-commonjs": "^28.0.0",
|
|
107
107
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
108
|
-
"@rollup/plugin-replace": "^
|
|
108
|
+
"@rollup/plugin-replace": "^6.0.0",
|
|
109
109
|
"@rollup/plugin-terser": "^0.4.0",
|
|
110
110
|
"@types/jasmine": "^5.1.4",
|
|
111
111
|
"@types/offscreencanvas": "^2019.7.3",
|
|
112
112
|
"@types/webpack-env": "^1.15.2",
|
|
113
|
-
"concurrently": "^
|
|
113
|
+
"concurrently": "^9.0.0",
|
|
114
114
|
"jasmine-core": "^5.1.2",
|
|
115
115
|
"karma": "^6.3.0",
|
|
116
116
|
"karma-chrome-launcher": "^3.1.0",
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
"prettier-eslint": "^16.3.0",
|
|
128
128
|
"prettier-eslint-cli": "^8.0.1",
|
|
129
129
|
"rollup": "^4.12.0",
|
|
130
|
-
"rollup-plugin-
|
|
130
|
+
"rollup-plugin-sourcemaps2": "^0.4.1",
|
|
131
131
|
"source-map-loader": "^5.0.0",
|
|
132
132
|
"terser-webpack-plugin": "^5.3.10",
|
|
133
133
|
"typescript": "~5.4.5",
|