@ni/ok-components 1.11.0 → 1.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 +68 -1
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +4842 -4835
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/fv/search-input/styles.js +4 -1
- package/dist/esm/fv/search-input/styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -41,7 +41,7 @@ export const styles = css `
|
|
|
41
41
|
position: absolute;
|
|
42
42
|
inset-inline: 0;
|
|
43
43
|
inset-block-end: calc(-1 * ${borderWidth});
|
|
44
|
-
border-bottom:
|
|
44
|
+
border-bottom: ${borderWidth} solid ${borderHoverColor};
|
|
45
45
|
transform: scaleX(0);
|
|
46
46
|
transform-origin: center;
|
|
47
47
|
transition:
|
|
@@ -135,12 +135,15 @@ export const styles = css `
|
|
|
135
135
|
border-bottom-color: ${borderHoverColor};
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
+
:host([appearance='block']) .search-input-container:hover::after,
|
|
138
139
|
:host([appearance='underline']) .search-input-container:hover::after {
|
|
140
|
+
border-bottom-width: calc(${borderWidth} + 1px);
|
|
139
141
|
border-bottom-color: ${borderHoverColor};
|
|
140
142
|
}
|
|
141
143
|
|
|
142
144
|
:host([appearance='frameless']) .search-input-container:hover::after {
|
|
143
145
|
transform: scaleX(1);
|
|
146
|
+
border-bottom-width: calc(${borderWidth} + 1px);
|
|
144
147
|
border-bottom-color: ${borderHoverColor};
|
|
145
148
|
}
|
|
146
149
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/search-input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,cAAc,EACd,SAAS,EACT,QAAQ,EACR,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,UAAU,EACV,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;8DAG6B,eAAe;6DAChB,aAAa;uHAC6C,QAAQ,MAAM,YAAY;yHACxB,QAAQ;iEAChE,qBAAqB;;;sBAGhE,aAAa;oBACf,QAAQ;qBACP,aAAa;;;;;;;;;sBASZ,WAAW;;;;;+BAKF,UAAU;6BACZ,UAAU;mCACJ,UAAU;;;;;;;yCAOJ,WAAW;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/search-input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,cAAc,EACd,SAAS,EACT,QAAQ,EACR,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,UAAU,EACV,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;8DAG6B,eAAe;6DAChB,aAAa;uHAC6C,QAAQ,MAAM,YAAY;yHACxB,QAAQ;iEAChE,qBAAqB;;;sBAGhE,aAAa;oBACf,QAAQ;qBACP,aAAa;;;;;;;;;sBASZ,WAAW;;;;;+BAKF,UAAU;6BACZ,UAAU;mCACJ,UAAU;;;;;;;yCAOJ,WAAW;6BACvB,WAAW,UAAU,gBAAgB;;;;4BAItC,UAAU;sCACA,UAAU;;;;;;;;;;;;qBAY3B,oBAAoB;;cAE3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;;;;;;;;;;;;;qBAsB7C,oBAAoB;;;;;;;;;;;;;;;;;;;;;cAqB3B,SAAS,CAAC,iBAAiB;;;;;;;;qCAQJ,qBAAqB;;;;;;;;;;;0BAWhC,cAAc;;;;4BAIZ,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;mCAK5B,gBAAgB;;;;;wCAKX,WAAW;mCAChB,gBAAgB;;;;;wCAKX,WAAW;mCAChB,gBAAgB;;;;;;;;;;uBAU5B,WAAW,UAAU,gBAAgB;;;;;4BAKhC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;mCAK5B,gBAAgB;;;;mCAIhB,gBAAgB;;;;;mCAKhB,gBAAgB;;;CAGlD,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n bodyFont,\n bodyFontColor,\n borderHoverColor,\n borderRgbPartialColor,\n borderWidth,\n controlHeight,\n fillHoverColor,\n iconColor,\n iconSize,\n mediumPadding,\n placeholderFontColor,\n smallPadding,\n smallDelay,\n standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-block')}\n\n :host {\n --ni-private-ok-fv-search-input-inline-padding: ${standardPadding};\n --ni-private-ok-fv-search-input-leading-inset: ${mediumPadding};\n --ni-private-ok-fv-search-input-leading-space: calc(var(--ni-private-ok-fv-search-input-leading-inset) + ${iconSize} + ${smallPadding});\n --ni-private-ok-fv-search-input-trailing-space: calc(var(--ni-private-ok-fv-search-input-inline-padding) + ${iconSize});\n --ni-private-ok-fv-search-input-border-color: rgba(${borderRgbPartialColor}, 0.3);\n --ni-private-ok-fv-search-input-border-radius: 0px;\n min-width: 120px;\n height: ${controlHeight};\n font: ${bodyFont};\n color: ${bodyFontColor};\n }\n\n .search-input-container {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n border: ${borderWidth} solid transparent;\n border-radius: var(--ni-private-ok-fv-search-input-border-radius);\n color: inherit;\n background-color: transparent;\n transition:\n border-color ${smallDelay} ease-in-out,\n box-shadow ${smallDelay} ease-in-out,\n background-color ${smallDelay} ease-in-out;\n }\n\n .search-input-container::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-end: calc(-1 * ${borderWidth});\n border-bottom: ${borderWidth} solid ${borderHoverColor};\n transform: scaleX(0);\n transform-origin: center;\n transition:\n transform ${smallDelay} ease-in-out,\n border-bottom-color ${smallDelay} ease-in-out;\n pointer-events: none;\n }\n\n .search-input-icon {\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n inset-inline-start: var(--ni-private-ok-fv-search-input-leading-inset);\n transform: translateY(-50%);\n color: ${placeholderFontColor};\n pointer-events: none;\n ${iconColor.cssCustomProperty}: ${placeholderFontColor};\n }\n\n .search-input {\n -webkit-appearance: none;\n appearance: none;\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n width: 100%;\n height: 100%;\n padding: 0 var(--ni-private-ok-fv-search-input-trailing-space) 0 var(--ni-private-ok-fv-search-input-leading-space);\n font: inherit;\n line-height: normal;\n color: inherit;\n border: none;\n outline: none;\n border-radius: 0;\n background: transparent;\n }\n\n .search-input::placeholder {\n color: ${placeholderFontColor};\n }\n\n .search-input-clear {\n -webkit-appearance: none;\n appearance: none;\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n inset-inline-end: 3px;\n height: calc(100% - 6px);\n aspect-ratio: 1;\n padding: 0;\n transform: translateY(-50%);\n color: inherit;\n border: none;\n border-radius: 2px;\n background: transparent;\n cursor: pointer;\n ${iconColor.cssCustomProperty}: currentColor;\n }\n\n :host([appearance='outline']) .search-input-container {\n border-color: var(--ni-private-ok-fv-search-input-border-color);\n }\n\n :host([appearance='block']) .search-input-container {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([appearance='underline']) .search-input-container::after {\n transform: scaleX(1);\n border-bottom-color: var(--ni-private-ok-fv-search-input-border-color);\n }\n }\n\n @layer hover {\n .search-input-clear:hover {\n background: ${fillHoverColor};\n }\n\n :host([appearance='outline']) .search-input-container:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n }\n\n :host([appearance='block']) .search-input-container:hover::after {\n transform: scaleX(1);\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([appearance='block']) .search-input-container:hover::after,\n :host([appearance='underline']) .search-input-container:hover::after {\n border-bottom-width: calc(${borderWidth} + 1px);\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([appearance='frameless']) .search-input-container:hover::after {\n transform: scaleX(1);\n border-bottom-width: calc(${borderWidth} + 1px);\n border-bottom-color: ${borderHoverColor};\n }\n }\n\n @layer focusVisible {\n .search-input:focus-visible {\n outline: none;\n }\n\n .search-input-clear:focus-visible {\n outline: ${borderWidth} solid ${borderHoverColor};\n outline-offset: -1px;\n }\n\n :host([appearance='outline']) .search-input-container:focus-within {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n }\n\n :host([appearance='block']) .search-input-container:focus-within::after {\n transform: scaleX(1);\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([appearance='underline']) .search-input-container:focus-within::after {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([appearance='frameless']) .search-input-container:focus-within::after {\n transform: scaleX(1);\n border-bottom-color: ${borderHoverColor};\n }\n }\n`;"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/ok-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.12.0",
|
|
4
4
|
"description": "NI Ok Components",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run build:components && npm run build:cem",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"@ni/fast-element": "^10.2.0",
|
|
44
44
|
"@ni/fast-foundation": "^10.3.0",
|
|
45
45
|
"@ni/fast-web-utilities": "^10.1.0",
|
|
46
|
-
"@ni/nimble-components": "^35.
|
|
47
|
-
"@ni/spright-components": "^6.
|
|
46
|
+
"@ni/nimble-components": "^35.17.0",
|
|
47
|
+
"@ni/spright-components": "^6.24.0",
|
|
48
48
|
"tslib": "^2.2.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|