@ni/nimble-components 33.0.1 → 33.0.2
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 +4 -0
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +4 -0
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/select/styles.js +5 -1
- package/dist/esm/select/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
|
|
|
3
3
|
import { styles as dropdownStyles } from '../patterns/dropdown/styles';
|
|
4
4
|
import { styles as errorStyles } from '../patterns/error/styles';
|
|
5
5
|
import { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';
|
|
6
|
-
import { borderRgbPartialColor, borderWidth, controlHeight, controlSlimHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, iconColor, mediumPadding, placeholderFontColor, smallPadding } from '../theme-provider/design-tokens';
|
|
6
|
+
import { bodyDisabledFontColor, borderRgbPartialColor, borderWidth, controlHeight, controlSlimHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, iconColor, mediumPadding, placeholderFontColor, smallPadding } from '../theme-provider/design-tokens';
|
|
7
7
|
import { appearanceBehavior } from '../utilities/style/appearance';
|
|
8
8
|
import { DropdownAppearance } from './types';
|
|
9
9
|
import { focusVisible } from '../utilities/style/focus';
|
|
@@ -23,6 +23,10 @@ export const styles = css `
|
|
|
23
23
|
color: ${placeholderFontColor};
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
:host([disabled]) .selected-value.placeholder {
|
|
27
|
+
color: ${bodyDisabledFontColor};
|
|
28
|
+
}
|
|
29
|
+
|
|
26
30
|
.selected-value {
|
|
27
31
|
order: 1;
|
|
28
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,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,EACH,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;MACX,qBAAqB;;MAErB;AACE;gGACgG,CAAC,EACrG;;;iBAGa,oBAAoB;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,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,EACH,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;MACX,qBAAqB;;MAErB;AACE;gGACgG,CAAC,EACrG;;;iBAGa,oBAAoB;;;;iBAIpB,qBAAqB;;;;;;;;;kBASpB,iBAAiB;uBACZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA2BjB,aAAa;;;;;;;;8BAQD,qBAAqB;uBAC5B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIrC,WAAW;;;;;;;8BAOf,qBAAqB;oBAC/B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIlC,WAAW;;;;;uBAKtB,YAAY;UACzB,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;qBASzC,YAAY,MAAM,aAAa;;;;;iBAKnC,oBAAoB;;;mBAGlB,YAAY;;;;;;;;;4BASH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;wBAI1B,aAAa;yBACZ,aAAa;;kBAEpB,aAAa;;;;;;0BAML,YAAY;;;;;uBAKf,YAAY;;;;mBAIhB,YAAY,IAAI,aAAa;;;;;iBAK/B,oBAAoB;;;;;;CAMpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;8BAImB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\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 {\n bodyDisabledFontColor,\n borderRgbPartialColor,\n borderWidth,\n controlHeight,\n controlSlimHeight,\n fillHoverColor,\n fillHoverSelectedColor,\n fillSelectedColor,\n iconColor,\n mediumPadding,\n placeholderFontColor,\n smallPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from './types';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\n\nexport const styles = css`\n ${dropdownStyles}\n ${errorStyles}\n ${requiredVisibleStyles}\n\n ${\n /* We are using flex `order` to define the visual ordering of the selected value,\n error icon, and dropdown arrow because they are not \"interactive\" i.e. part of the tab order */ ''\n }\n\n .selected-value.placeholder {\n color: ${placeholderFontColor};\n }\n\n :host([disabled]) .selected-value.placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n .selected-value {\n order: 1;\n }\n\n .clear-button {\n order: 3;\n height: ${controlSlimHeight};\n margin-left: ${smallPadding};\n }\n\n [part='indicator'] {\n order: 4;\n }\n\n .error-icon {\n order: 2;\n }\n\n [part='end'] {\n display: contents;\n }\n\n .listbox {\n overflow-x: clip;\n }\n\n .listbox.above {\n flex-flow: column-reverse;\n }\n\n .filter-field {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: ${controlHeight};\n background: transparent;\n }\n\n .filter-field::before {\n content: '';\n position: absolute;\n height: 0px;\n border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n bottom: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n }\n\n .filter-field.above::before {\n width: calc(100% - (2 * ${borderWidth}));\n }\n\n .filter-field::after {\n content: '';\n position: absolute;\n height: 0px;\n border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n top: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n }\n\n .filter-field:not(.above)::after {\n width: calc(100% - (2 * ${borderWidth}));\n }\n\n .filter-icon {\n flex-shrink: 0;\n margin-left: ${smallPadding};\n ${iconColor.cssCustomProperty}: ${placeholderFontColor};\n }\n\n .filter-input {\n background: transparent;\n border: none;\n color: inherit;\n font: inherit;\n height: var(--ni-nimble-control-height);\n padding: 0 ${smallPadding} 0 ${mediumPadding};\n width: 100%;\n }\n\n .filter-input::placeholder {\n color: ${placeholderFontColor};\n }\n\n .filter-input${focusVisible} {\n outline: 0px;\n }\n\n ::slotted([role='option']) {\n background-color: transparent;\n }\n\n ::slotted([role='option']:hover) {\n background-color: ${fillHoverColor};\n }\n\n ::slotted([role='option'][active-option]) {\n background-color: ${fillSelectedColor};\n }\n\n ::slotted([role='option'][active-option]:hover) {\n background-color: ${fillHoverSelectedColor};\n }\n\n .loading-container {\n padding-left: ${mediumPadding};\n padding-right: ${mediumPadding};\n display: flex;\n height: ${controlHeight};\n flex: 1 0 auto;\n }\n\n .loading-container.above {\n align-items: end;\n padding-bottom: ${smallPadding};\n }\n\n .loading-container.below {\n align-items: normal;\n padding-top: ${smallPadding};\n }\n\n .loading-container.empty {\n padding: ${smallPadding} ${mediumPadding};\n align-items: center;\n }\n\n .loading-label {\n color: ${placeholderFontColor};\n }\n\n .loading-spinner {\n margin-left: auto;\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 themeBehavior(\n Theme.color,\n css`\n .filter-field,\n .no-results-label,\n .loading-container {\n background: ${hexToRgbaCssColor(White, 0.15)};\n }\n `\n )\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "33.0.
|
|
3
|
+
"version": "33.0.2",
|
|
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",
|