@aquera/nile-elements 2.0.13 → 2.0.15
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/README.md +12 -0
- package/dist/index.js +68 -42
- package/dist/nile-auto-complete/nile-auto-complete.css.cjs.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.css.cjs.js.map +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.css.esm.js +5 -2
- package/dist/nile-badge/nile-badge.cjs.js +1 -1
- package/dist/nile-badge/nile-badge.cjs.js.map +1 -1
- package/dist/nile-badge/nile-badge.css.cjs.js +1 -1
- package/dist/nile-badge/nile-badge.css.cjs.js.map +1 -1
- package/dist/nile-badge/nile-badge.css.esm.js +29 -8
- package/dist/nile-badge/nile-badge.esm.js +3 -3
- package/dist/nile-chip/nile-chip.css.cjs.js +1 -1
- package/dist/nile-chip/nile-chip.css.cjs.js.map +1 -1
- package/dist/nile-chip/nile-chip.css.esm.js +2 -0
- package/dist/nile-combobox/nile-combobox.css.cjs.js +1 -1
- package/dist/nile-combobox/nile-combobox.css.cjs.js.map +1 -1
- package/dist/nile-combobox/nile-combobox.css.esm.js +9 -9
- package/dist/nile-command-menu/nile-command-menu.css.cjs.js +1 -1
- package/dist/nile-command-menu/nile-command-menu.css.cjs.js.map +1 -1
- package/dist/nile-command-menu/nile-command-menu.css.esm.js +5 -5
- package/dist/nile-command-menu-item/nile-command-menu-item.css.cjs.js +1 -1
- package/dist/nile-command-menu-item/nile-command-menu-item.css.cjs.js.map +1 -1
- package/dist/nile-command-menu-item/nile-command-menu-item.css.esm.js +2 -2
- package/dist/nile-option/nile-option.css.cjs.js +1 -1
- package/dist/nile-option/nile-option.css.cjs.js.map +1 -1
- package/dist/nile-option/nile-option.css.esm.js +1 -1
- package/dist/nile-select/nile-select.css.cjs.js +1 -1
- package/dist/nile-select/nile-select.css.cjs.js.map +1 -1
- package/dist/nile-select/nile-select.css.esm.js +7 -7
- package/dist/nile-virtual-select/nile-virtual-select.css.cjs.js +1 -1
- package/dist/nile-virtual-select/nile-virtual-select.css.cjs.js.map +1 -1
- package/dist/nile-virtual-select/nile-virtual-select.css.esm.js +8 -8
- package/dist/src/nile-auto-complete/nile-auto-complete.css.js +3 -0
- package/dist/src/nile-auto-complete/nile-auto-complete.css.js.map +1 -1
- package/dist/src/nile-badge/nile-badge.css.js +27 -6
- package/dist/src/nile-badge/nile-badge.css.js.map +1 -1
- package/dist/src/nile-badge/nile-badge.d.ts +2 -0
- package/dist/src/nile-badge/nile-badge.js +8 -0
- package/dist/src/nile-badge/nile-badge.js.map +1 -1
- package/dist/src/nile-badge/nile-badge.test.js +76 -1
- package/dist/src/nile-badge/nile-badge.test.js.map +1 -1
- package/dist/src/nile-chip/nile-chip.css.js +2 -0
- package/dist/src/nile-chip/nile-chip.css.js.map +1 -1
- package/dist/src/nile-combobox/nile-combobox.css.js +9 -9
- package/dist/src/nile-combobox/nile-combobox.css.js.map +1 -1
- package/dist/src/nile-command-menu/nile-command-menu.css.js +5 -5
- package/dist/src/nile-command-menu/nile-command-menu.css.js.map +1 -1
- package/dist/src/nile-command-menu-item/nile-command-menu-item.css.js +2 -2
- package/dist/src/nile-command-menu-item/nile-command-menu-item.css.js.map +1 -1
- package/dist/src/nile-option/nile-option.css.js +1 -1
- package/dist/src/nile-option/nile-option.css.js.map +1 -1
- package/dist/src/nile-select/nile-select.css.js +7 -7
- package/dist/src/nile-select/nile-select.css.js.map +1 -1
- package/dist/src/nile-virtual-select/nile-virtual-select.css.js +8 -8
- package/dist/src/nile-virtual-select/nile-virtual-select.css.js.map +1 -1
- package/dist/src/version.js +1 -1
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-auto-complete/nile-auto-complete.css.ts +3 -0
- package/src/nile-badge/nile-badge.css.ts +27 -6
- package/src/nile-badge/nile-badge.test.ts +87 -0
- package/src/nile-badge/nile-badge.ts +6 -0
- package/src/nile-chip/nile-chip.css.ts +2 -0
- package/src/nile-combobox/nile-combobox.css.ts +9 -9
- package/src/nile-command-menu/nile-command-menu.css.ts +5 -5
- package/src/nile-command-menu-item/nile-command-menu-item.css.ts +2 -2
- package/src/nile-option/nile-option.css.ts +1 -1
- package/src/nile-select/nile-select.css.ts +7 -7
- package/src/nile-virtual-select/nile-virtual-select.css.ts +8 -8
- package/vscode-html-custom-data.json +16 -1
|
@@ -56,7 +56,7 @@ export const styles = css `
|
|
|
56
56
|
max-height: var(--max-height);
|
|
57
57
|
overflow: hidden;
|
|
58
58
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
59
|
-
border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
59
|
+
border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
|
|
60
60
|
border-radius: var(--nile-radius-lg, var(--ng-radius-xl));
|
|
61
61
|
box-shadow: var(--nile-box-shadow-8, var(--ng-shadow-xl));
|
|
62
62
|
}
|
|
@@ -71,7 +71,7 @@ export const styles = css `
|
|
|
71
71
|
align-items: center;
|
|
72
72
|
gap: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
73
73
|
padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
|
|
74
|
-
border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
74
|
+
border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.command__search-icon {
|
|
@@ -110,7 +110,7 @@ export const styles = css `
|
|
|
110
110
|
flex-wrap: wrap;
|
|
111
111
|
gap: var(--nile-spacing-md, var(--ng-spacing-md));
|
|
112
112
|
padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
|
|
113
|
-
border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
113
|
+
border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
.command__scopes-label {
|
|
@@ -152,7 +152,7 @@ export const styles = css `
|
|
|
152
152
|
align-items: center;
|
|
153
153
|
gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
|
|
154
154
|
padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
|
|
155
|
-
border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
155
|
+
border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
|
|
156
156
|
font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
|
|
157
157
|
color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
|
|
158
158
|
}
|
|
@@ -182,7 +182,7 @@ export const styles = css `
|
|
|
182
182
|
height: 20px;
|
|
183
183
|
padding: 0 5px;
|
|
184
184
|
border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
|
|
185
|
-
border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
185
|
+
border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
|
|
186
186
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
187
187
|
font-family: inherit;
|
|
188
188
|
font-size: 11px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-command-menu.css.js","sourceRoot":"","sources":["../../../src/nile-command-menu/nile-command-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqLxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * CommandMenu CSS\n */\nexport const styles = css`\n :host {\n --width: 640px;\n --max-height: 480px;\n\n display: contents;\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n .command {\n position: fixed;\n inset: 0;\n z-index: 9999;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: 15vh var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n\n .command[hidden] {\n display: none;\n }\n\n .command__overlay {\n position: fixed;\n inset: 0;\n background-color: var(--nile-bg-color-dialog, var(--ng-componentcolors-alpha-black-70));\n }\n\n .command__panel {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: var(--width);\n max-height: var(--max-height);\n overflow: hidden;\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
1
|
+
{"version":3,"file":"nile-command-menu.css.js","sourceRoot":"","sources":["../../../src/nile-command-menu/nile-command-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqLxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * CommandMenu CSS\n */\nexport const styles = css`\n :host {\n --width: 640px;\n --max-height: 480px;\n\n display: contents;\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n .command {\n position: fixed;\n inset: 0;\n z-index: 9999;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: 15vh var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n\n .command[hidden] {\n display: none;\n }\n\n .command__overlay {\n position: fixed;\n inset: 0;\n background-color: var(--nile-bg-color-dialog, var(--ng-componentcolors-alpha-black-70));\n }\n\n .command__panel {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: var(--width);\n max-height: var(--max-height);\n overflow: hidden;\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-lg, var(--ng-radius-xl));\n box-shadow: var(--nile-box-shadow-8, var(--ng-shadow-xl));\n }\n\n .command__panel:focus {\n outline: none;\n }\n\n /* Search header */\n .command__header {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));\n }\n\n .command__search-icon {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n\n .command__search-icon nile-glyph {\n width: 20px;\n height: 20px;\n }\n\n .command__input {\n flex: 1 1 auto;\n min-width: 0;\n border: none;\n outline: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: 1.4;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .command__input::placeholder {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n }\n\n /* \"Searching for\" scopes row */\n .command__scopes {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));\n }\n\n .command__scopes-label {\n flex: 0 0 auto;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));\n }\n\n .command__scopes-tags {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n /* Scrollable results list */\n .command__list {\n flex: 1 1 auto;\n overflow-y: auto;\n overscroll-behavior: contain;\n padding: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .command__empty {\n display: none;\n padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n text-align: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));\n }\n\n .command__empty--visible {\n display: block;\n }\n\n /* Footer */\n .command__footer {\n display: none;\n align-items: center;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));\n }\n\n .command--has-footer .command__footer {\n display: flex;\n }\n\n /* Built-in keyboard-hint row (footer slot fallback) */\n .command__hints {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .command__hint {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .command__footer kbd {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 5px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n font-family: inherit;\n font-size: 11px;\n line-height: 1;\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -55,7 +55,7 @@ export const styles = css `
|
|
|
55
55
|
/* Active / selected (keyboard or hover) */
|
|
56
56
|
:host([active]:not([disabled])) .item,
|
|
57
57
|
.item:hover {
|
|
58
|
-
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
58
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
|
|
59
59
|
color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
|
|
60
60
|
}
|
|
61
61
|
|
|
@@ -114,7 +114,7 @@ export const styles = css `
|
|
|
114
114
|
height: 20px;
|
|
115
115
|
padding: 0 5px;
|
|
116
116
|
border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
|
|
117
|
-
border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-
|
|
117
|
+
border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
|
|
118
118
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
119
119
|
font-family: inherit;
|
|
120
120
|
font-size: 11px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-command-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-command-menu-item/nile-command-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * CommandMenuItem CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n display: block;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .item {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n width: 100%;\n margin-block: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n border-radius: var(--nile-radius-md, var(--ng-radius-md));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: 1.4;\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n cursor: pointer;\n user-select: none;\n transition: background-color 200ms ease, color 200ms ease;\n }\n\n /* size variants — small (default) vs medium */\n :host([size='medium']) .item {\n padding-block: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n /* Active / selected (keyboard or hover) */\n :host([active]:not([disabled])) .item,\n .item:hover {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
1
|
+
{"version":3,"file":"nile-command-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-command-menu-item/nile-command-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * CommandMenuItem CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n display: block;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .item {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n width: 100%;\n margin-block: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n border-radius: var(--nile-radius-md, var(--ng-radius-md));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: 1.4;\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n cursor: pointer;\n user-select: none;\n transition: background-color 200ms ease, color 200ms ease;\n }\n\n /* size variants — small (default) vs medium */\n :host([size='medium']) .item {\n padding-block: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n /* Active / selected (keyboard or hover) */\n :host([active]:not([disabled])) .item,\n .item:hover {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n :host([disabled]) .item {\n cursor: not-allowed;\n opacity: 0.4;\n pointer-events: none;\n }\n\n .item__icon {\n flex: 0 0 auto;\n /* Reserve a fixed icon gutter so items with and without a leading icon\n keep their labels aligned. */\n width: 20px;\n height: 20px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n\n .item__icon::slotted(*) {\n width: 20px;\n height: 20px;\n }\n\n .item__label {\n flex: 1 1 auto;\n min-width: 0;\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .item__suffix {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .item__shortcut {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .item__shortcut kbd {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 5px;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n font-family: inherit;\n font-size: 11px;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: 1;\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -49,7 +49,7 @@ export const styles = css `
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.option--hover:not(.option--current):not(.option--disabled) {
|
|
52
|
-
background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-
|
|
52
|
+
background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-primary-hover));
|
|
53
53
|
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
54
54
|
border-radius: var(--nile-radius-none, var(--ng-radius-sm));
|
|
55
55
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8JxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Option_2 CSS\n */\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n :host([legacy]) .option {\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n :host([groupName]:not([groupName=''])) .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-xl));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-
|
|
1
|
+
{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8JxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Option_2 CSS\n */\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n :host([legacy]) .option {\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n :host([groupName]:not([groupName=''])) .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-xl));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n opacity: 1;\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n word-break: break-all;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: var(--nile-spacing-xs);\n color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n :host([tickonselect][selected]) .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n :host(:not([aria-selected='true'])) .option .option__suffix{\n display: var(--nile-display-block, var(--ng-display-none));\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n width:auto;\n display:var(--nile-display-inline-block, var(--ng-display-inline-block));\n }\n :host([legacy]) .option--checkbox{\n display:var(--nile-display-inline-block, var(--ng-display-none));\n }\n\n \n :host([tickonselect]) .option--checkbox{\n display: none;\n }\n\n :host([tickonselect]) .option{\n padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n\n .option__label-container {\n display: flex;\n flex-direction: column;\n }\n\n .option__description {\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n width: 99%;\n }\n\n .option__label-text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n width: 99%;\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -285,7 +285,7 @@ export const styles = css `
|
|
|
285
285
|
white-space: nowrap;
|
|
286
286
|
cursor: pointer;
|
|
287
287
|
border: 1px dashed
|
|
288
|
-
var(--nile-colors-neutral-500, var(--ng-colors-border-
|
|
288
|
+
var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
289
289
|
border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
|
|
290
290
|
}
|
|
291
291
|
|
|
@@ -353,12 +353,12 @@ export const styles = css `
|
|
|
353
353
|
/* Filled selects */
|
|
354
354
|
.select--filled .select__combobox {
|
|
355
355
|
border: none;
|
|
356
|
-
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
356
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
|
|
357
357
|
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
358
358
|
}
|
|
359
359
|
|
|
360
360
|
.select--filled:hover:not(.select--disabled) .select__combobox {
|
|
361
|
-
background-color: var(--nile-colors-neutral-100);
|
|
361
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
|
|
362
362
|
}
|
|
363
363
|
|
|
364
364
|
.select--filled.select--disabled .select__combobox {
|
|
@@ -369,7 +369,7 @@ export const styles = css `
|
|
|
369
369
|
|
|
370
370
|
.select--filled:not(.select--disabled).select--open .select__combobox,
|
|
371
371
|
.select--filled:not(.select--disabled).select--focused .select__combobox {
|
|
372
|
-
background-color: var(--nile-colors-neutral-100);
|
|
372
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
|
|
373
373
|
outline: 3px solid rgba(0, 89, 255, 0.4);
|
|
374
374
|
}
|
|
375
375
|
|
|
@@ -472,7 +472,7 @@ export const styles = css `
|
|
|
472
472
|
font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
|
|
473
473
|
font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
|
|
474
474
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
475
|
-
border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-
|
|
475
|
+
border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
476
476
|
border-radius: var(--nile-radius-sm, var(--ng-radius-md));
|
|
477
477
|
padding-block: var(--nile-spacing-none, var(--ng-spacing-none));
|
|
478
478
|
padding-inline: var(--nile-spacing-none, var(--ng-spacing-none));
|
|
@@ -530,7 +530,7 @@ export const styles = css `
|
|
|
530
530
|
|
|
531
531
|
.select__custom-footer {
|
|
532
532
|
display: block;
|
|
533
|
-
border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-
|
|
533
|
+
border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
|
|
534
534
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
535
535
|
padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) ;
|
|
536
536
|
}
|
|
@@ -545,7 +545,7 @@ export const styles = css `
|
|
|
545
545
|
position: sticky;
|
|
546
546
|
bottom: 0px;
|
|
547
547
|
background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
|
|
548
|
-
border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-
|
|
548
|
+
border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
|
|
549
549
|
height: 15px;
|
|
550
550
|
/* Auto layout */
|
|
551
551
|
display: var(--nile-display-flex, var(--ng-display-flex));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqpBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n :host([disabled]) .form-control--has-label .form-control__label {\n user-select: none;\n -webkit-user-select: none;\n }\n \n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: block;\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n :host {\n display: block;\n }\n\n /** The popup */\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: 9999;\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n /* Combobox */\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n .select__display-input {\n position: relative;\n width: 100%;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n border: none;\n background: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n cursor: inherit;\n overflow: hidden;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n }\n\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n }\n\n .select--disabled.select--placeholder-visible .select__display-input::placeholder {\n color: var(--nile-colors-dark-500,var(--ng-colors-text-disabled));\n }\n\n .select--disabled .select__display-input{\n color:var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events:none;\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n /* Visually hide the display input when multiple is enabled */\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: var(--nile-spacing-none);\n margin: var(--nile-spacing-none);\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: nowrap;\n margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-line-height-xsmall);\n letter-spacing: 0.2px;\n margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .select__tags-count-clearable {\n margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n }\n\n button.select__tags-count {\n appearance: none;\n -webkit-appearance: none;\n background: none;\n text-align: inherit;\n }\n\n button.select__tags-count:disabled {\n cursor: not-allowed;\n }\n\n .select__tags--fitted {\n min-width: 0;\n }\n\n .select__tags nile-lite-tooltip.select__tag-tip {\n display: contents;\n }\n\n :host([showtooltip]) .select__tags nile-tag {\n flex: 0 1 auto;\n cursor: pointer;\n min-width: 0;\n max-width: var(--nile-width-180px, var(--ng-height-180px));\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(base) {\n max-width: 100%;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(prefix_content_wrapper) {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(content) {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n /* The tag's line-height of 1 leaves the clip box shorter than the glyph\n box, so descenders are cut. Pad the clip box, negate it in layout. */\n padding-block: 3px;\n margin-block: -3px;\n overflow: hidden;\n white-space: nowrap;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(content) {\n text-overflow: ellipsis;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(remove-button) {\n flex: 0 0 auto;\n }\n\n .select__tags--fitted nile-tag:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n outline-offset: 1px;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .select__tags--fitted .select__tags-count {\n flex: 0 0 auto;\n margin: 0;\n padding: 0 var(--nile-spacing-xsmall, var(--ng-spacing-md));\n height: var(--nile-height-26px, var(--ng-height-26px));\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n cursor: pointer;\n border: 1px dashed\n var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .select__tags--fitted .select__tags-count:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n outline-offset: 1px;\n }\n\n .select__tags::slotted(nile-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(nile-tag) {\n cursor: not-allowed !important;\n }\n\n /* Standard selects */\n .select--standard .select__combobox {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n /* outline: var(--nile-outline-none, var(--ng-private-outline-transparent)); */\n }\n\n .select--standard .select__combobox:hover {\n border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n /* outline: var(--nile-outline-none, var(--ng-nxt-gen-outline)); */\n }\n\n .select--error:hover:not(.select--disabled) .select__combobox{\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n /* outline: var(--nile-outline-none, var(--ng-colors-border-error)); */\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled) );\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n }\n\n .select--warning .select__combobox {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .select--error .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n\n\n\n .select--success {\n border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n }\n\n /* Filled selects */\n .select--filled .select__combobox {\n border: none;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: var(--nile-colors-neutral-100);\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: var(--nile-colors-neutral-100);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .select--filled:not(.select--disabled).select--open .select__combobox,\n .select--filled:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100);\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n\n padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n height: var(--nile-height-40px, var(--ng-height-40px));\n box-sizing: border-box;\n }\n\n .select--medium .select__clear {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--medium .select__prefix.multiple::slotted(*) {\n margin-right: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--medium:not(.select--placeholder-visible) .select__prefix.multiple::slotted(*) {\n margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .select--medium .select__tags {\n gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n }\n\n /* Pills */\n .select--pill.select--medium .select__combobox {\n border-radius: var(--nile-radius-3xl);\n }\n\n /* Prefix */\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500);\n }\n\n .select__suffix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500);\n }\n\n /* Clear button */\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n border: none;\n background: none;\n padding: var(--nile-spacing-none);\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: var(--nile-colors-dark-500);\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n /* Expand icon */\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n rotate: 0;\n margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n /* Listbox */\n .select__listbox {\n display: block;\n position: relative;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n padding-block: var(--nile-spacing-none, var(--ng-spacing-none));\n padding-inline: var(--nile-spacing-none, var(--ng-spacing-none));\n overflow: auto;\n overscroll-behavior: none;\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .select__options__search-enabled {\n padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n }\n\n .select__options {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n color: rgb(133, 129, 129);\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n .select__listbox::slotted(small) {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n color: var(--nile-colors-dark-500);\n padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: var(--nile-spacing-md, var(--ng-spacing-md));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n margin-bottom: -8px;\n }\n\n .select__pre-footer-area {\n position: sticky;\n bottom: 0;\n z-index: 1;\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .select__pre-footer-area--query {\n container-type: inline-size;\n container-name: nile-select-footer;\n }\n\n .select__custom-footer {\n display: block;\n border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) ;\n }\n\n .select__custom-footer:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n\n /* Default: visible + centered footer with proper nxtgen fallbacks. */\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n height: 15px;\n /* Auto layout */\n display: var(--nile-display-flex, var(--ng-display-flex));\n flex-direction: row;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n gap: var(--nile-spacing-none, var(--ng-spacing-none));\n justify-content: space-between;\n }\n\n .select__footer-action,\n .select__footer .select__clear {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n min-width: 0;\n }\n\n .select__footer-glyph {\n flex: 0 0 auto;\n display: inline-flex;\n vertical-align: middle;\n }\n\n .select__footer-label {\n white-space: nowrap;\n }\n\n @container nile-select-footer (max-width: 178px) {\n .select__clear .select__footer-label {\n display: none;\n }\n }\n\n @container nile-select-footer (max-width: 137px) {\n .select__footer-label {\n display: none;\n }\n }\n\n :host([legacy]) .select__footer {\n background: var(--nile-colors-neutral-100);\n border-top: 1px solid var(--nile-colors-neutral-400);\n display: var(--nile-display-flex, var(--ng-display-none));\n align-items: flex-start;\n padding: var(--nile-spacing-md) var(--nile-spacing-lg)\n var(--nile-spacing-xl);\n }\n\n .tag__prefix[slot='prefix'] {\n height: 14px;\n display: inline-block;\n overflow: hidden;\n }\n\n .tag__prefix[slot='prefix'] img {\n max-height: 100%;\n }\n\n .select__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .select__loader--icon {\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n animation: spin 0.6s linear infinite;\n }\n\n .select__no-results {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .select__invisible {\n opacity: 0;\n }\n\n .select__prefix--from-options {\n margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .select__prefix--from-options img{\n max-height: var(--nile-height-none, var(--ng-height-24px));\n max-width: var(--nile-width-none, var(--ng-width-6));\n }\n\n .select__hide-default {\n display: none;\n }\n \n .select.select--open .select__combobox {\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-brand));\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset ;\n}\n\n.select.select--open:hover .select__combobox {\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-brand));\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset ;\n}\n\n.select.select--open .select__combobox:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset ;\n}\n\n:host([stickyHeader]) .select__footer-area {\n z-index: 1;\n}\n\n.select--disabled .select__combobox{\n user-select: none ;\n -webkit-user-select: none ;\n} \n`;\n\nexport default [styles];\n"]}
|
|
1
|
+
{"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqpBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n :host([disabled]) .form-control--has-label .form-control__label {\n user-select: none;\n -webkit-user-select: none;\n }\n \n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: block;\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n :host {\n display: block;\n }\n\n /** The popup */\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: 9999;\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n /* Combobox */\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n .select__display-input {\n position: relative;\n width: 100%;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n border: none;\n background: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n cursor: inherit;\n overflow: hidden;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n }\n\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n }\n\n .select--disabled.select--placeholder-visible .select__display-input::placeholder {\n color: var(--nile-colors-dark-500,var(--ng-colors-text-disabled));\n }\n\n .select--disabled .select__display-input{\n color:var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events:none;\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n /* Visually hide the display input when multiple is enabled */\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: var(--nile-spacing-none);\n margin: var(--nile-spacing-none);\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: nowrap;\n margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-line-height-xsmall);\n letter-spacing: 0.2px;\n margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .select__tags-count-clearable {\n margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n }\n\n button.select__tags-count {\n appearance: none;\n -webkit-appearance: none;\n background: none;\n text-align: inherit;\n }\n\n button.select__tags-count:disabled {\n cursor: not-allowed;\n }\n\n .select__tags--fitted {\n min-width: 0;\n }\n\n .select__tags nile-lite-tooltip.select__tag-tip {\n display: contents;\n }\n\n :host([showtooltip]) .select__tags nile-tag {\n flex: 0 1 auto;\n cursor: pointer;\n min-width: 0;\n max-width: var(--nile-width-180px, var(--ng-height-180px));\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(base) {\n max-width: 100%;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(prefix_content_wrapper) {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(content) {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n /* The tag's line-height of 1 leaves the clip box shorter than the glyph\n box, so descenders are cut. Pad the clip box, negate it in layout. */\n padding-block: 3px;\n margin-block: -3px;\n overflow: hidden;\n white-space: nowrap;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(content) {\n text-overflow: ellipsis;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(remove-button) {\n flex: 0 0 auto;\n }\n\n .select__tags--fitted nile-tag:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n outline-offset: 1px;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .select__tags--fitted .select__tags-count {\n flex: 0 0 auto;\n margin: 0;\n padding: 0 var(--nile-spacing-xsmall, var(--ng-spacing-md));\n height: var(--nile-height-26px, var(--ng-height-26px));\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n cursor: pointer;\n border: 1px dashed\n var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .select__tags--fitted .select__tags-count:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n outline-offset: 1px;\n }\n\n .select__tags::slotted(nile-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(nile-tag) {\n cursor: not-allowed !important;\n }\n\n /* Standard selects */\n .select--standard .select__combobox {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n /* outline: var(--nile-outline-none, var(--ng-private-outline-transparent)); */\n }\n\n .select--standard .select__combobox:hover {\n border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n /* outline: var(--nile-outline-none, var(--ng-nxt-gen-outline)); */\n }\n\n .select--error:hover:not(.select--disabled) .select__combobox{\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n /* outline: var(--nile-outline-none, var(--ng-colors-border-error)); */\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled) );\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n }\n\n .select--warning .select__combobox {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .select--error .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n\n\n\n .select--success {\n border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n }\n\n /* Filled selects */\n .select--filled .select__combobox {\n border: none;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: var(--nile-colors-neutral-100);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .select--filled:not(.select--disabled).select--open .select__combobox,\n .select--filled:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n\n padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n height: var(--nile-height-40px, var(--ng-height-40px));\n box-sizing: border-box;\n }\n\n .select--medium .select__clear {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--medium .select__prefix.multiple::slotted(*) {\n margin-right: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--medium:not(.select--placeholder-visible) .select__prefix.multiple::slotted(*) {\n margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .select--medium .select__tags {\n gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n }\n\n /* Pills */\n .select--pill.select--medium .select__combobox {\n border-radius: var(--nile-radius-3xl);\n }\n\n /* Prefix */\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500);\n }\n\n .select__suffix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500);\n }\n\n /* Clear button */\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n border: none;\n background: none;\n padding: var(--nile-spacing-none);\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: var(--nile-colors-dark-500);\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n /* Expand icon */\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n rotate: 0;\n margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n /* Listbox */\n .select__listbox {\n display: block;\n position: relative;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n padding-block: var(--nile-spacing-none, var(--ng-spacing-none));\n padding-inline: var(--nile-spacing-none, var(--ng-spacing-none));\n overflow: auto;\n overscroll-behavior: none;\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .select__options__search-enabled {\n padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n }\n\n .select__options {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n color: rgb(133, 129, 129);\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n .select__listbox::slotted(small) {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n color: var(--nile-colors-dark-500);\n padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: var(--nile-spacing-md, var(--ng-spacing-md));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n margin-bottom: -8px;\n }\n\n .select__pre-footer-area {\n position: sticky;\n bottom: 0;\n z-index: 1;\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .select__pre-footer-area--query {\n container-type: inline-size;\n container-name: nile-select-footer;\n }\n\n .select__custom-footer {\n display: block;\n border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) ;\n }\n\n .select__custom-footer:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n\n /* Default: visible + centered footer with proper nxtgen fallbacks. */\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n height: 15px;\n /* Auto layout */\n display: var(--nile-display-flex, var(--ng-display-flex));\n flex-direction: row;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n gap: var(--nile-spacing-none, var(--ng-spacing-none));\n justify-content: space-between;\n }\n\n .select__footer-action,\n .select__footer .select__clear {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n min-width: 0;\n }\n\n .select__footer-glyph {\n flex: 0 0 auto;\n display: inline-flex;\n vertical-align: middle;\n }\n\n .select__footer-label {\n white-space: nowrap;\n }\n\n @container nile-select-footer (max-width: 178px) {\n .select__clear .select__footer-label {\n display: none;\n }\n }\n\n @container nile-select-footer (max-width: 137px) {\n .select__footer-label {\n display: none;\n }\n }\n\n :host([legacy]) .select__footer {\n background: var(--nile-colors-neutral-100);\n border-top: 1px solid var(--nile-colors-neutral-400);\n display: var(--nile-display-flex, var(--ng-display-none));\n align-items: flex-start;\n padding: var(--nile-spacing-md) var(--nile-spacing-lg)\n var(--nile-spacing-xl);\n }\n\n .tag__prefix[slot='prefix'] {\n height: 14px;\n display: inline-block;\n overflow: hidden;\n }\n\n .tag__prefix[slot='prefix'] img {\n max-height: 100%;\n }\n\n .select__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .select__loader--icon {\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n animation: spin 0.6s linear infinite;\n }\n\n .select__no-results {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .select__invisible {\n opacity: 0;\n }\n\n .select__prefix--from-options {\n margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .select__prefix--from-options img{\n max-height: var(--nile-height-none, var(--ng-height-24px));\n max-width: var(--nile-width-none, var(--ng-width-6));\n }\n\n .select__hide-default {\n display: none;\n }\n \n .select.select--open .select__combobox {\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-brand));\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset ;\n}\n\n.select.select--open:hover .select__combobox {\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-brand));\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset ;\n}\n\n.select.select--open .select__combobox:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset ;\n}\n\n:host([stickyHeader]) .select__footer-area {\n z-index: 1;\n}\n\n.select--disabled .select__combobox{\n user-select: none ;\n -webkit-user-select: none ;\n} \n`;\n\nexport default [styles];\n"]}
|
|
@@ -296,7 +296,7 @@ export const styles = css `
|
|
|
296
296
|
white-space: nowrap;
|
|
297
297
|
cursor: pointer;
|
|
298
298
|
border: 1px dashed
|
|
299
|
-
var(--nile-colors-neutral-500, var(--ng-colors-border-
|
|
299
|
+
var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
300
300
|
border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
|
|
301
301
|
}
|
|
302
302
|
|
|
@@ -347,7 +347,7 @@ export const styles = css `
|
|
|
347
347
|
|
|
348
348
|
.select--standard:not(.select--disabled).select--open .select__combobox,
|
|
349
349
|
.select--standard:not(.select--disabled).select--focused .select__combobox {
|
|
350
|
-
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
350
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
|
|
351
351
|
}
|
|
352
352
|
|
|
353
353
|
.select--warning .select__combobox {
|
|
@@ -366,12 +366,12 @@ export const styles = css `
|
|
|
366
366
|
/* Filled selects */
|
|
367
367
|
.select--filled .select__combobox {
|
|
368
368
|
border: none;
|
|
369
|
-
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
369
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
|
|
370
370
|
color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
|
|
371
371
|
}
|
|
372
372
|
|
|
373
373
|
.select--filled:hover:not(.select--disabled) .select__combobox {
|
|
374
|
-
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
374
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
|
|
375
375
|
}
|
|
376
376
|
|
|
377
377
|
.select--filled.select--disabled .select__combobox {
|
|
@@ -382,7 +382,7 @@ export const styles = css `
|
|
|
382
382
|
|
|
383
383
|
.select--filled:not(.select--disabled).select--open .select__combobox,
|
|
384
384
|
.select--filled:not(.select--disabled).select--focused .select__combobox {
|
|
385
|
-
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
385
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
|
|
386
386
|
outline: 3px solid rgba(0, 89, 255, 0.4);
|
|
387
387
|
}
|
|
388
388
|
|
|
@@ -479,7 +479,7 @@ export const styles = css `
|
|
|
479
479
|
font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
|
|
480
480
|
font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
|
|
481
481
|
background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
482
|
-
border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-
|
|
482
|
+
border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
|
|
483
483
|
border-radius: var(--nile-radius-sm, var(--ng-radius-md));
|
|
484
484
|
padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));
|
|
485
485
|
padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));
|
|
@@ -527,7 +527,7 @@ export const styles = css `
|
|
|
527
527
|
position: sticky;
|
|
528
528
|
bottom: 0px;
|
|
529
529
|
background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
|
|
530
|
-
border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-
|
|
530
|
+
border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
|
|
531
531
|
display: flex;
|
|
532
532
|
height: 15px;
|
|
533
533
|
/* Auto layout */
|
|
@@ -622,7 +622,7 @@ export const styles = css `
|
|
|
622
622
|
}
|
|
623
623
|
|
|
624
624
|
.virtualized nile-option[selected] {
|
|
625
|
-
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-
|
|
625
|
+
background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-active));
|
|
626
626
|
}
|
|
627
627
|
|
|
628
628
|
.virtualized nile-option[selected]::part(base) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-virtual-select.css.js","sourceRoot":"","sources":["../../../src/nile-virtual-select/nile-virtual-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAopBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {css} from 'lit';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .virtualized{\n min-width: 110px;\n width: 100%;\n }\n\n .virtualized ::slotted(nile-option),\n .virtualized nile-option {\n width: 100%;\n display: block;\n }\n\n /* Ensure proper sizing for non-virtualized options (small datasets) */\n .virtualized:not(:has(lit-virtualizer)) {\n display: flex;\n flex-direction: column;\n }\n\n .virtualized:not(:has(lit-virtualizer)) nile-option {\n flex-shrink: 0;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n :host([disabled]) .form-control--has-label .form-control__label {\n user-select: none;\n -webkit-user-select: none;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: block;\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n :host {\n display: block;\n }\n\n /** The popup */\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: 9999;\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n /* Combobox */\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n .select__display-input {\n position: relative;\n width: 100%;\n font: inherit;\n border: none;\n background: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n cursor: inherit;\n overflow: hidden;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n /* Visually hide the display input when multiple is enabled */\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: nowrap;\n margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .select__tags-count-clearable {\n margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n }\n\n button.select__tags-count {\n appearance: none;\n -webkit-appearance: none;\n background: none;\n text-align: inherit;\n }\n\n button.select__tags-count:disabled {\n cursor: not-allowed;\n }\n\n .select__tags--fitted {\n min-width: 0;\n }\n\n .select__tags nile-lite-tooltip.select__tag-tip {\n display: contents;\n }\n\n :host([showtooltip]) .select__tags nile-tag {\n flex: 0 1 auto;\n cursor: pointer;\n min-width: 0;\n max-width: var(--nile-width-180px, var(--ng-height-180px));\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(base) {\n max-width: 100%;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(prefix_content_wrapper) {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(content) {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n /* The tag's line-height of 1 leaves the clip box shorter than the glyph\n box, so descenders are cut. Pad the clip box, negate it in layout. */\n padding-block: 3px;\n margin-block: -3px;\n overflow: hidden;\n white-space: nowrap;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(content) {\n text-overflow: ellipsis;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(remove-button) {\n flex: 0 0 auto;\n }\n\n .select__tags--fitted nile-tag:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n outline-offset: 1px;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .select__tags--fitted .select__tags-count {\n flex: 0 0 auto;\n margin: 0;\n padding: 0 var(--nile-spacing-xsmall, var(--ng-spacing-md));\n height: var(--nile-height-26px, var(--ng-height-26px));\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n cursor: pointer;\n border: 1px dashed\n var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .select__tags--fitted .select__tags-count:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n outline-offset: 1px;\n }\n\n .select__tags::slotted(nile-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(nile-tag) {\n cursor: not-allowed !important;\n }\n\n .select--disabled .select__display-input{\n color:var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events:none;\n }\n\n /* Standard selects */\n .select--standard .select__combobox {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .select--standard .select__combobox:hover {\n border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .select--error:hover:not(.select--disabled) .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-colors-border-error));\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n user-select:none;\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .select--warning .select__combobox {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .select--error .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .select--success {\n border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n }\n\n /* Filled selects */\n .select--filled .select__combobox {\n border: none;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n cursor: not-allowed;\n }\n\n .select--filled:not(.select--disabled).select--open .select__combobox,\n .select--filled:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n height: var(--nile-height-40px, var(--ng-height-40px));\n box-sizing: border-box;\n }\n\n .select--medium .select__clear {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--medium .select__prefix.multiple::slotted(*) {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .select--medium .select__tags {\n gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n }\n\n /* Pills */\n .select--pill.select--medium .select__combobox {\n border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n }\n\n /* Prefix */\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .select__suffix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n /* Clear button */\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n border: none;\n background: none;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n /* Expand icon */\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n rotate: 0;\n margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n /* Listbox */\n .select__listbox {\n display: block;\n position: relative;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n overscroll-behavior: none;\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .select__options {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: rgb(133, 129, 129);\n width: 100%;\n }\n\n .select__options__search-enabled {\n padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n width: 100%;\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n .select__listbox::slotted(small) {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: var(--nile-spacing-md, var(--ng-spacing-md));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n display: flex;\n height: 15px;\n /* Auto layout */\n display: var(--nile-display-flex, var(--ng-display-flex));\n flex-direction: row;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n gap: var(--nile-spacing-none, var(--ng-spacing-none));\n justify-content: space-between;\n box-sizing: unset;\n }\n\n .select__footer--query {\n container-type: inline-size;\n container-name: nile-select-footer;\n }\n\n .select__footer-action,\n .select__footer .select__clear {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n min-width: 0;\n }\n\n .select__footer-glyph {\n flex: 0 0 auto;\n display: inline-flex;\n vertical-align: middle;\n }\n\n .select__footer-label {\n white-space: nowrap;\n }\n\n @container nile-select-footer (max-width: 148px) {\n .select__clear .select__footer-label {\n display: none;\n }\n }\n\n @container nile-select-footer (max-width: 113px) {\n .select__footer-label {\n display: none;\n }\n }\n\n .tag__prefix[slot='prefix'] {\n height: 14px;\n display: inline-block;\n overflow: hidden;\n }\n\n .tag__prefix[slot='prefix'] img {\n max-height: 100%;\n }\n\n .select__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .select__loader--icon {\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n animation: spin 0.6s linear infinite;\n }\n\n .select__no-results {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .select__invisible {\n opacity: 0;\n }\n\n .select__prefix--from-options {\n margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n \n .select__hide-default{\n display: none;\n }\n\n .virtualized nile-option[selected] {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .virtualized nile-option[selected]::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n .virtualized.no-scroll {\n overflow: hidden !important;\n }\n\n .virtual-select-loader {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n .select__footer.loading, .select__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .virtual-select-loader {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n .select__footer.loading, .select__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n .select.select--open .select__combobox {\n border-color: var(--ng-colors-border-brand);\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset ;\n }\n\n :host([enableDescription]) .option::part(base) {\n height: 41px;\n }\n`;\n\nexport default [styles];\n"]}
|
|
1
|
+
{"version":3,"file":"nile-virtual-select.css.js","sourceRoot":"","sources":["../../../src/nile-virtual-select/nile-virtual-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAopBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {css} from 'lit';\n\n/**\n * Select_2 CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .virtualized{\n min-width: 110px;\n width: 100%;\n }\n\n .virtualized ::slotted(nile-option),\n .virtualized nile-option {\n width: 100%;\n display: block;\n }\n\n /* Ensure proper sizing for non-virtualized options (small datasets) */\n .virtualized:not(:has(lit-virtualizer)) {\n display: flex;\n flex-direction: column;\n }\n\n .virtualized:not(:has(lit-virtualizer)) nile-option {\n flex-shrink: 0;\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n :host([disabled]) .form-control--has-label .form-control__label {\n user-select: none;\n -webkit-user-select: none;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: block;\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n :host {\n display: block;\n }\n\n /** The popup */\n .select {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .select::part(popup) {\n z-index: 9999;\n }\n\n .select[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .select[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n /* Combobox */\n .select__combobox {\n flex: 1;\n display: flex;\n width: 100%;\n min-width: 0;\n position: relative;\n align-items: center;\n justify-content: start;\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n .select__display-input {\n position: relative;\n width: 100%;\n font: inherit;\n border: none;\n background: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n cursor: inherit;\n overflow: hidden;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .select__display-input::placeholder {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select__display-input:focus {\n outline: none;\n }\n\n /* Visually hide the display input when multiple is enabled */\n .select--multiple:not(.select--placeholder-visible) .select__display-input {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n .select__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n opacity: 0;\n z-index: -1;\n }\n\n .select__tags {\n display: flex;\n flex: 1;\n align-items: center;\n flex-wrap: nowrap;\n margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .select__tags-count-clearable {\n margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n }\n\n button.select__tags-count {\n appearance: none;\n -webkit-appearance: none;\n background: none;\n text-align: inherit;\n }\n\n button.select__tags-count:disabled {\n cursor: not-allowed;\n }\n\n .select__tags--fitted {\n min-width: 0;\n }\n\n .select__tags nile-lite-tooltip.select__tag-tip {\n display: contents;\n }\n\n :host([showtooltip]) .select__tags nile-tag {\n flex: 0 1 auto;\n cursor: pointer;\n min-width: 0;\n max-width: var(--nile-width-180px, var(--ng-height-180px));\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(base) {\n max-width: 100%;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(prefix_content_wrapper) {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(content) {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n /* The tag's line-height of 1 leaves the clip box shorter than the glyph\n box, so descenders are cut. Pad the clip box, negate it in layout. */\n padding-block: 3px;\n margin-block: -3px;\n overflow: hidden;\n white-space: nowrap;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(content) {\n text-overflow: ellipsis;\n }\n\n :host([showtooltip]) .select__tags nile-tag::part(remove-button) {\n flex: 0 0 auto;\n }\n\n .select__tags--fitted nile-tag:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n outline-offset: 1px;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .select__tags--fitted .select__tags-count {\n flex: 0 0 auto;\n margin: 0;\n padding: 0 var(--nile-spacing-xsmall, var(--ng-spacing-md));\n height: var(--nile-height-26px, var(--ng-height-26px));\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n cursor: pointer;\n border: 1px dashed\n var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .select__tags--fitted .select__tags-count:focus-visible {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n outline-offset: 1px;\n }\n\n .select__tags::slotted(nile-tag) {\n cursor: pointer !important;\n }\n\n .select--disabled .select__tags,\n .select--disabled .select__tags::slotted(nile-tag) {\n cursor: not-allowed !important;\n }\n\n .select--disabled .select__display-input{\n color:var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events:none;\n }\n\n /* Standard selects */\n .select--standard .select__combobox {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .select--standard .select__combobox:hover {\n border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .select--error:hover:not(.select--disabled) .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-colors-border-error));\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n user-select:none;\n cursor: not-allowed;\n outline: none;\n }\n\n .select--standard:not(.select--disabled).select--open .select__combobox,\n .select--standard:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n }\n\n .select--warning .select__combobox {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .select--error .select__combobox {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n }\n\n .select--success {\n border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n }\n\n /* Filled selects */\n .select--filled .select__combobox {\n border: none;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n cursor: not-allowed;\n }\n\n .select--filled:not(.select--disabled).select--open .select__combobox,\n .select--filled:not(.select--disabled).select--focused .select__combobox {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n .select--medium .select__combobox {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n height: var(--nile-height-40px, var(--ng-height-40px));\n box-sizing: border-box;\n }\n\n .select--medium .select__clear {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .select--medium .select__prefix::slotted(*) {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--medium .select__prefix.multiple::slotted(*) {\n margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .select--medium .select__tags {\n gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n }\n\n /* Pills */\n .select--pill.select--medium .select__combobox {\n border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n }\n\n /* Prefix */\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .select__suffix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n /* Clear button */\n .select__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n border: none;\n background: none;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .select__clear:focus {\n outline: none;\n }\n\n /* Expand icon */\n .select__expand-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n rotate: 0;\n margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .select--open .select__expand-icon {\n rotate: -180deg;\n }\n\n /* Listbox */\n .select__listbox {\n display: block;\n position: relative;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n overscroll-behavior: none;\n /* Make sure it adheres to the popup's auto size */\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .select__options {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: rgb(133, 129, 129);\n width: 100%;\n }\n\n .select__options__search-enabled {\n padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n width: 100%;\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n }\n\n .select__listbox::slotted(small) {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: var(--nile-spacing-md, var(--ng-spacing-md));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n margin-bottom: -8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n display: flex;\n height: 15px;\n /* Auto layout */\n display: var(--nile-display-flex, var(--ng-display-flex));\n flex-direction: row;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n gap: var(--nile-spacing-none, var(--ng-spacing-none));\n justify-content: space-between;\n box-sizing: unset;\n }\n\n .select__footer--query {\n container-type: inline-size;\n container-name: nile-select-footer;\n }\n\n .select__footer-action,\n .select__footer .select__clear {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n min-width: 0;\n }\n\n .select__footer-glyph {\n flex: 0 0 auto;\n display: inline-flex;\n vertical-align: middle;\n }\n\n .select__footer-label {\n white-space: nowrap;\n }\n\n @container nile-select-footer (max-width: 148px) {\n .select__clear .select__footer-label {\n display: none;\n }\n }\n\n @container nile-select-footer (max-width: 113px) {\n .select__footer-label {\n display: none;\n }\n }\n\n .tag__prefix[slot='prefix'] {\n height: 14px;\n display: inline-block;\n overflow: hidden;\n }\n\n .tag__prefix[slot='prefix'] img {\n max-height: 100%;\n }\n\n .select__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .select__loader--icon {\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n animation: spin 0.6s linear infinite;\n }\n\n .select__no-results {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .select__invisible {\n opacity: 0;\n }\n\n .select__prefix--from-options {\n margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n \n .select__hide-default{\n display: none;\n }\n\n .virtualized nile-option[selected] {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-active));\n }\n\n .virtualized nile-option[selected]::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n .virtualized.no-scroll {\n overflow: hidden !important;\n }\n\n .virtual-select-loader {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n .select__footer.loading, .select__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .virtual-select-loader {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n .select__footer.loading, .select__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n .select.select--open .select__combobox {\n border-color: var(--ng-colors-border-brand);\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset ;\n }\n\n :host([enableDescription]) .option::part(base) {\n height: 41px;\n }\n`;\n\nexport default [styles];\n"]}
|
package/dist/src/version.js
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
// @aquera/nile/lib/version.js into dist/index.js, so on the CDN build it is
|
|
13
13
|
// frozen at this package's build time. The stylesheet is the live source.
|
|
14
14
|
import { NILE_VERSION as BUILT_IN_NILE_VERSION } from '@aquera/nile/lib/version.js';
|
|
15
|
-
export const NILE_ELEMENTS_VERSION = '2.0.
|
|
15
|
+
export const NILE_ELEMENTS_VERSION = '2.0.15';
|
|
16
16
|
function readStylesheetNileVersion() {
|
|
17
17
|
if (typeof window === 'undefined' || typeof getComputedStyle !== 'function') {
|
|
18
18
|
return null;
|
package/dist/src/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,mBAAmB;AACnB,EAAE;AACF,+EAA+E;AAC/E,gDAAgD;AAChD,EAAE;AACF,8EAA8E;AAC9E,6EAA6E;AAC7E,qEAAqE;AACrE,EAAE;AACF,0EAA0E;AAC1E,kEAAkE;AAClE,4EAA4E;AAC5E,0EAA0E;AAC1E,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEpF,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AAEjE,SAAS,yBAAyB;IAChC,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,gBAAgB,KAAK,UAAU,EAAE,CAAC;QAC5E,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC;QACH,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC;aACrD,gBAAgB,CAAC,gBAAgB,CAAC;aAClC,IAAI,EAAE;aACN,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QAE/B,OAAO,KAAK,IAAI,IAAI,CAAC;IACvB,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,yBAAyB,EAAE,IAAI,qBAAqB,CAAC;AAC9D,CAAC;AAED,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAE5D,yEAAyE;IACzE,yEAAyE;IACzE,IAAI,QAAQ,GAAkB,IAAI,CAAC;IACnC,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,aAAa,EAAE;QAC3C,YAAY,EAAE,IAAI;QAClB,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,cAAc,EAAE;QACvC,GAAG,EAAE,CAAC,KAAa,EAAE,EAAE;YACrB,QAAQ,GAAG,KAAK,CAAC;QACnB,CAAC;KACF,CAAC,CAAC;IAEF,MAAc,CAAC,OAAO,GAAI,MAAc,CAAC,OAAO,IAAI;QACnD,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE;KAChC,CAAC;AACJ,CAAC","sourcesContent":["// Version utility.\n//\n// NILE_ELEMENTS_VERSION is this package's own version and is still substituted\n// at build time by scripts/replace-version.cjs.\n//\n// The tokens version is read from the loaded Nile stylesheet's --nile-version\n// custom property (stamped by @aquera/nile's scripts/stamp-css-version.mjs),\n// falling back to the @aquera/nile installed alongside this package.\n//\n// Reading the stylesheet is what makes a tokens-only release visible. The\n// imported constant alone is not enough: rollup.config.js bundles\n// @aquera/nile/lib/version.js into dist/index.js, so on the CDN build it is\n// frozen at this package's build time. The stylesheet is the live source.\nimport { NILE_VERSION as BUILT_IN_NILE_VERSION } from '@aquera/nile/lib/version.js';\n\nexport const NILE_ELEMENTS_VERSION = '2.0.
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,mBAAmB;AACnB,EAAE;AACF,+EAA+E;AAC/E,gDAAgD;AAChD,EAAE;AACF,8EAA8E;AAC9E,6EAA6E;AAC7E,qEAAqE;AACrE,EAAE;AACF,0EAA0E;AAC1E,kEAAkE;AAClE,4EAA4E;AAC5E,0EAA0E;AAC1E,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEpF,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AAEjE,SAAS,yBAAyB;IAChC,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,gBAAgB,KAAK,UAAU,EAAE,CAAC;QAC5E,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC;QACH,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC;aACrD,gBAAgB,CAAC,gBAAgB,CAAC;aAClC,IAAI,EAAE;aACN,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QAE/B,OAAO,KAAK,IAAI,IAAI,CAAC;IACvB,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,yBAAyB,EAAE,IAAI,qBAAqB,CAAC;AAC9D,CAAC;AAED,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAE5D,yEAAyE;IACzE,yEAAyE;IACzE,IAAI,QAAQ,GAAkB,IAAI,CAAC;IACnC,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,aAAa,EAAE;QAC3C,YAAY,EAAE,IAAI;QAClB,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,cAAc,EAAE;QACvC,GAAG,EAAE,CAAC,KAAa,EAAE,EAAE;YACrB,QAAQ,GAAG,KAAK,CAAC;QACnB,CAAC;KACF,CAAC,CAAC;IAEF,MAAc,CAAC,OAAO,GAAI,MAAc,CAAC,OAAO,IAAI;QACnD,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE;KAChC,CAAC;AACJ,CAAC","sourcesContent":["// Version utility.\n//\n// NILE_ELEMENTS_VERSION is this package's own version and is still substituted\n// at build time by scripts/replace-version.cjs.\n//\n// The tokens version is read from the loaded Nile stylesheet's --nile-version\n// custom property (stamped by @aquera/nile's scripts/stamp-css-version.mjs),\n// falling back to the @aquera/nile installed alongside this package.\n//\n// Reading the stylesheet is what makes a tokens-only release visible. The\n// imported constant alone is not enough: rollup.config.js bundles\n// @aquera/nile/lib/version.js into dist/index.js, so on the CDN build it is\n// frozen at this package's build time. The stylesheet is the live source.\nimport { NILE_VERSION as BUILT_IN_NILE_VERSION } from '@aquera/nile/lib/version.js';\n\nexport const NILE_ELEMENTS_VERSION = '2.0.15';\n\nfunction readStylesheetNileVersion(): string | null {\n if (typeof window === 'undefined' || typeof getComputedStyle !== 'function') {\n return null;\n }\n\n try {\n const value = getComputedStyle(document.documentElement)\n .getPropertyValue('--nile-version')\n .trim()\n .replace(/^[\"']|[\"']$/g, '');\n\n return value || null;\n } catch {\n return null;\n }\n}\n\n/**\n * The version of @aquera/nile (tokens/stylesheets) whose CSS is loaded in the\n * page, falling back to the @aquera/nile bundled into this package when no\n * stamped stylesheet is present.\n *\n * This is the canonical runtime API. It resolves on every call rather than\n * caching, so it is correct even when the Nile stylesheet is added to the page\n * after this module evaluates - which is the common case, and why no\n * module-evaluation-time snapshot of it is exported.\n */\nexport function getNileVersion(): string {\n return readStylesheetNileVersion() ?? BUILT_IN_NILE_VERSION;\n}\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n\n // A getter rather than a value, so window.nileVersion reflects whichever\n // stylesheet is loaded at read time regardless of script/style ordering.\n let override: string | null = null;\n Object.defineProperty(window, 'nileVersion', {\n configurable: true,\n get: () => override ?? getNileVersion(),\n set: (value: string) => {\n override = value;\n },\n });\n\n (window as any).process = (window as any).process || {\n env: { NODE_ENV: 'production' },\n };\n}\n"]}
|