npm - @aquera/nile-elements - Versions diffs - 1.8.5 → 1.8.7 - Mend

@aquera/nile-elements 1.8.5 → 1.8.7

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.

Files changed (115) hide show

package/dist/src/nile-option/nile-option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.ts"],"names":[],"mappings":"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","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 { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-option.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport NileElement from '../internal/nile-element';\nimport '../nile-checkbox';\n\n/\n Nile icon component.\n \n @tag nile-option\n \n /\n\n/*\n @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n \n @dependency nile-icon\n \n @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n \n @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n /\n\n@customElement('nile-option')\nexport class NileOption extends NileElement {\n static styles: CSSResultGroup = styles;\n\n private cachedTextLabel: string;\n\n @query('.option__label') defaultSlot: HTMLSlotElement;\n\n @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n @property({ type: Boolean, reflect: true, attribute: true }) hidden = false; // the option is hidden\n @state() isMultipleSelect = false;\n\n /\n The option's value. When selected, the containing form control will receive this value. The value must be unique\n * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n * multiple values.\n /\n @property({ reflect: true }) value = '';\n\n @property({ type: Boolean, reflect: true, attribute: true }) showCheckbox: boolean = false;\n\n /* Draws the option in a disabled state, preventing selection. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Indicates whether the option is selected. /\n @property({ type: Boolean, reflect: true }) selected = false;\n\n / used to pass group name to the option, so that grouped options can be shown /\n @property({ type: String, reflect: true, attribute: true }) groupName: string = '';\n\n / used to pass description to the option, so that description can be shown /\n @property({ type: String, reflect: true, attribute: true }) description: string = '';\n\n @query('slot[name=\"prefix\"]') prefixSlot!: HTMLSlotElement;\n\n @query('slot[name=\"suffix\"]') suffixSlot!: HTMLSlotElement;\n\n @query('.option__label-container') labelContainer!: HTMLElement;\n\n @state() isParentVirtualSelect = false;\n\n @property({ type: Boolean, reflect: true, attribute: true }) isDescriptionEnabled = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'option');\n this.setAttribute('aria-selected', 'false');\n\n this.checkIfMultipleSelect();\n }\n\n protected firstUpdated() {\n if (this.parentElement?.tagName === 'NILE-SELECT') {\n return;\n }\n\n this.isParentVirtualSelect = true;\n this.applyWidthToLabelContainer();\n }\n\n applyWidthToLabelContainer() {\n const hasPrefix = (this.prefixSlot?.assignedNodes({ flatten: true }) ?? []).length > 0;\n const hasSuffix = (this.suffixSlot?.assignedNodes({ flatten: true }) ?? []).length > 0;\n\n let totalWidth = 0;\n if (hasPrefix) totalWidth += 30;\n if (hasSuffix) totalWidth += 30;\n if (this.showCheckbox) totalWidth += 50;\n if (this.labelContainer) {\n this.labelContainer.style.width = `calc(100% - ${totalWidth}px)`;\n }\n }\n\n checkIfMultipleSelect() {\n // Find the closest parent 'nile-select' element\n const parentSelect = this.closest('nile-select');\n \n // Check if the parent has the 'multiple' attribute\n if (parentSelect && parentSelect.hasAttribute('multiple')) {\n if(parentSelect.hasAttribute('multiple') && parentSelect.getAttribute('multiple') === '') {\n this.isMultipleSelect = true;\n } else if (parentSelect.getAttribute('multiple') === 'true') {\n this.isMultipleSelect = true;\n } else {\n this.isMultipleSelect = false;\n }\n } else {\n this.isMultipleSelect = this.showCheckbox;\n }\n }\n\n protected updated(_changedProperties: PropertyValues): void {\n this.checkIfMultipleSelect();\n }\n\n private handleDefaultSlotChange() {\n const textLabel = this.getTextLabel();\n\n // Ignore the first time the label is set\n if (typeof this.cachedTextLabel === 'undefined') {\n this.cachedTextLabel = textLabel;\n return;\n }\n\n // When the label changes, emit a slotchange event so parent controls see it\n if (textLabel !== this.cachedTextLabel) {\n this.cachedTextLabel = textLabel;\n this.emit('slotchange');\n }\n }\n\n private handleMouseEnter() {\n this.hasHover = true;\n }\n\n private handleMouseLeave() {\n this.hasHover = false;\n }\n\n @watch('disabled')\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n\n @watch('selected')\n handleSelectedChange() {\n this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n }\n\n @watch('value')\n handleValueChange() {\n // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n // instead of requiring them to cast the value to a string.\n if (typeof this.value !== 'string') {\n this.value = String(this.value);\n }\n\n // if (this.value.includes(' ')) {\n // console.error(\n // `Option values cannot include a space. All spaces have been replaced with underscores.`,\n // this\n // );\n // this.value = this.value.replace(/ /g, '_');\n // }\n }\n\n /* Returns a plain text label based on the option's content. */\n getTextLabel() {\n // Search for a label element inside the component\n const labelElement = this.querySelector('label');\n\n // If a label element is found, return its text content\n if (labelElement) {\n return labelElement.textContent?.trim() ?? '';\n }\n\n // If no label element is found, return the existing behavior\n return (this.textContent ?? '').trim();\n }\n\n render() {\n return html`\n ${!this.hidden\n ? html` <div\n part=\"base\"\n class=${classMap({\n option: true,\n 'option--single-select': !this.isMultipleSelect,\n 'option--current': this.selected && !this.isMultipleSelect,\n 'option--disabled': this.disabled,\n 'option--selected': this.selected && !this.isMultipleSelect,\n 'option--hover': this.hasHover,\n })}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n >\n\n ${this.isMultipleSelect ? html`<nile-checkbox part=\"checkbox\" class=\"option--checkbox\" .checked=${this.selected}></nile-checkbox>` : ''}\n\n <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n ${this.isDescriptionEnabled\n ? html`\n <div\n class=\"option__label-container\"\n part=\"option_label_container\"\n >\n <slot\n part=\"label\"\n class=${classMap({\n 'option__label': true,\n 'option__label-text-ellipsis':\n this.isParentVirtualSelect,\n })}\n @slotchange=${this.handleDefaultSlotChange}\n ></slot>\n \n ${this.description\n ? html`\n <span\n part=\"option_description\"\n class=${classMap({\n option__description: true,\n 'text-ellipsis':\n this.isParentVirtualSelect,\n })}\n >\n ${this.description}\n </span>\n `\n : null}\n </div>\n `\n : html`\n <slot\n part=\"label\"\n class=\"option__label\"\n @slotchange=${this.handleDefaultSlotChange}\n ></slot>\n `}\n \n <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n </div>`\n : ''}\n `;\n } \n}\n\nexport default NileOption;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-option': NileOption;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.ts"],"names":[],"mappings":"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","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 { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-option.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport NileElement from '../internal/nile-element';\nimport '../nile-checkbox';\n\n/\n Nile icon component.\n \n @tag nile-option\n \n /\n\n/*\n @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n \n @dependency nile-icon\n \n @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n \n @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n /\n\n@customElement('nile-option')\nexport class NileOption extends NileElement {\n static styles: CSSResultGroup = styles;\n\n private cachedTextLabel: string;\n\n @query('.option__label') defaultSlot: HTMLSlotElement;\n\n @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n @property({ type: Boolean, reflect: true, attribute: true }) hidden = false; // the option is hidden\n @state() isMultipleSelect = false;\n\n /\n The option's value. When selected, the containing form control will receive this value. The value must be unique\n * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n * multiple values.\n /\n @property({ reflect: true }) value = '';\n\n @property({ type: Boolean, reflect: true, attribute: true }) showCheckbox: boolean = false;\n\n /* Opt OUT of the enhanced styling (enabled by default). Propagated from the parent nile-select. /\n @property({ type: Boolean, reflect: true }) legacy: boolean = false;\n\n \n @property({ type: Boolean, reflect: true, attribute: true }) tickOnSelect: boolean = false;\n\n /* Draws the option in a disabled state, preventing selection. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Indicates whether the option is selected. /\n @property({ type: Boolean, reflect: true }) selected = false;\n\n / used to pass group name to the option, so that grouped options can be shown /\n @property({ type: String, reflect: true, attribute: true }) groupName: string = '';\n\n / used to pass description to the option, so that description can be shown /\n @property({ type: String, reflect: true, attribute: true }) description: string = '';\n\n @query('slot[name=\"prefix\"]') prefixSlot!: HTMLSlotElement;\n\n @query('slot[name=\"suffix\"]') suffixSlot!: HTMLSlotElement;\n\n @query('.option__label-container') labelContainer!: HTMLElement;\n\n @state() isParentVirtualSelect = false;\n\n @property({ type: Boolean, reflect: true, attribute: true }) isDescriptionEnabled = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'option');\n this.setAttribute('aria-selected', 'false');\n\n this.checkIfMultipleSelect();\n }\n\n protected firstUpdated() {\n if (this.parentElement?.tagName === 'NILE-SELECT') {\n return;\n }\n\n this.isParentVirtualSelect = true;\n this.applyWidthToLabelContainer();\n }\n\n applyWidthToLabelContainer() {\n const hasPrefix = (this.prefixSlot?.assignedNodes({ flatten: true }) ?? []).length > 0;\n const hasSuffix = (this.suffixSlot?.assignedNodes({ flatten: true }) ?? []).length > 0;\n\n let totalWidth = 0;\n if (hasPrefix) totalWidth += 30;\n if (hasSuffix) totalWidth += 30;\n if (this.showCheckbox) totalWidth += 50;\n if (this.labelContainer) {\n this.labelContainer.style.width = `calc(100% - ${totalWidth}px)`;\n }\n }\n\n checkIfMultipleSelect() {\n // Find the closest parent 'nile-select' element\n const parentSelect = this.closest('nile-select');\n \n // Check if the parent has the 'multiple' attribute\n if (parentSelect && parentSelect.hasAttribute('multiple')) {\n if(parentSelect.hasAttribute('multiple') && parentSelect.getAttribute('multiple') === '') {\n this.isMultipleSelect = true;\n } else if (parentSelect.getAttribute('multiple') === 'true') {\n this.isMultipleSelect = true;\n } else {\n this.isMultipleSelect = false;\n }\n } else {\n this.isMultipleSelect = this.showCheckbox;\n }\n }\n\n protected updated(_changedProperties: PropertyValues): void {\n this.checkIfMultipleSelect();\n }\n\n private handleDefaultSlotChange() {\n const textLabel = this.getTextLabel();\n\n // Ignore the first time the label is set\n if (typeof this.cachedTextLabel === 'undefined') {\n this.cachedTextLabel = textLabel;\n return;\n }\n\n // When the label changes, emit a slotchange event so parent controls see it\n if (textLabel !== this.cachedTextLabel) {\n this.cachedTextLabel = textLabel;\n this.emit('slotchange');\n }\n }\n\n private handleMouseEnter() {\n this.hasHover = true;\n }\n\n private handleMouseLeave() {\n this.hasHover = false;\n }\n\n @watch('disabled')\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n\n @watch('selected')\n handleSelectedChange() {\n this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n }\n\n @watch('value')\n handleValueChange() {\n // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n // instead of requiring them to cast the value to a string.\n if (typeof this.value !== 'string') {\n this.value = String(this.value);\n }\n\n // if (this.value.includes(' ')) {\n // console.error(\n // `Option values cannot include a space. All spaces have been replaced with underscores.`,\n // this\n // );\n // this.value = this.value.replace(/ /g, '_');\n // }\n }\n\n /* Returns a plain text label based on the option's content. */\n getTextLabel() {\n // Search for a label element inside the component\n const labelElement = this.querySelector('label');\n\n // If a label element is found, return its text content\n if (labelElement) {\n return labelElement.textContent?.trim() ?? '';\n }\n\n // If no label element is found, return the existing behavior\n return (this.textContent ?? '').trim();\n }\n\n render() {\n return html`\n ${!this.hidden\n ? html` <div\n part=\"base\"\n class=${classMap({\n option: true,\n 'option--single-select': !this.isMultipleSelect,\n 'option--current': this.selected && !this.isMultipleSelect,\n 'option--disabled': this.disabled,\n 'option--selected': this.selected && !this.isMultipleSelect,\n 'option--hover': this.hasHover,\n })}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n >\n\n ${this.isMultipleSelect ? html`<nile-checkbox part=\"checkbox\" class=\"option--checkbox\" .checked=${this.selected}></nile-checkbox>` : ''}\n\n <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n ${this.isDescriptionEnabled\n ? html`\n <div\n class=\"option__label-container\"\n part=\"option_label_container\"\n >\n <slot\n part=\"label\"\n class=${classMap({\n 'option__label': true,\n 'option__label-text-ellipsis':\n this.isParentVirtualSelect,\n })}\n @slotchange=${this.handleDefaultSlotChange}\n ></slot>\n \n ${this.description\n ? html`\n <span\n part=\"option_description\"\n class=${classMap({\n option__description: true,\n 'text-ellipsis':\n this.isParentVirtualSelect,\n })}\n >\n ${this.description}\n </span>\n `\n : null}\n </div>\n `\n : html`\n <slot\n part=\"label\"\n class=\"option__label\"\n @slotchange=${this.handleDefaultSlotChange}\n ></slot>\n `}\n \n <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n\n ${this.tickOnSelect\n ? html`<span part=\"checked-icon\" class=\"option__check\">\n <nile-icon\n name=\"var(--nile-icon-tick, var(--ng-icon-check))\"\n method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n color=\"currentColor\"\n library=\"system\"\n aria-hidden=\"true\"\n ></nile-icon>\n </span>`\n : ''}\n </div>`\n : ''}\n `;\n } \n}\n\nexport default NileOption;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-option': NileOption;\n }\n}\n"]}

package/dist/src/nile-select/nile-select.css.js CHANGED Viewed

@@ -353,7 +353,8 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: inherit;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
     border: none;
     background: none;
@@ -454,21 +455,29 @@ export const styles = css `
   }
+  /* Default: visible + centered footer with proper nxtgen fallbacks. */
   .select__footer {
     position: sticky;
     bottom: 0px;
-    background: var(--nile-colors-neutral-100);
-    border-top: 1px solid var(--nile-colors-neutral-400);
-    display: flex;
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     height: 15px;
     /* Auto layout */
-    display:var(--nile-display-flex, var(--ng-display-none));
+    display: var(--nile-display-flex, var(--ng-display-flex));
     flex-direction: row;
+    align-items: center;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    justify-content: space-between;
+  }
+  :host([legacy]) .select__footer {
+    background: var(--nile-colors-neutral-100);
+    border-top: 1px solid var(--nile-colors-neutral-400);
+    display: var(--nile-display-flex, var(--ng-display-none));
     align-items: flex-start;
     padding: var(--nile-spacing-md) var(--nile-spacing-lg)
       var(--nile-spacing-xl);
-    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
-    justify-content: space-between;
   }
   .tag__prefix[slot='prefix'] {

package/dist/src/nile-select/nile-select.css.js.map CHANGED Viewed

	@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyhBxB,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: no-wrap;\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 .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-size: inherit;\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__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 .select__footer {\n position: sticky;\n bottom: 0px;\n background: var(--nile-colors-neutral-100);\n border-top: 1px solid var(--nile-colors-neutral-400);\n display: flex;\n height: 15px;\n / Auto layout */\n display:var(--nile-display-flex, var(--ng-display-none));\n flex-direction: row;\n align-items: flex-start;\n padding: var(--nile-spacing-md) var(--nile-spacing-lg)\n var(--nile-spacing-xl);\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n justify-content: space-between;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkiBxB,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: no-wrap;\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 .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__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-lg, var(--ng-spacing-lg));\n justify-content: space-between;\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"]}

package/dist/src/nile-select/nile-select.d.ts CHANGED Viewed

@@ -111,6 +111,9 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     /** Placeholder text to show as a hint when the select is empty. */
     searchValue: string;
     searchEnabled: boolean;
+    legacy: boolean;
+    /** Variant: show a tick on the right of the selected option (single-select). Propagated to options. */
+    tickOnSelect: boolean;
     internalSearchPlaceHolder: string;
     enableVisibilityEffect: boolean;
     blockValueChange: boolean;
@@ -202,6 +205,10 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     protected updated(_changedProperties: PropertyValues): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     setCheckBoxInOption(checked: boolean): void;
+    /** Propagates the legacy opt-out flag down to the slotted options. */
+    setLegacyInOptions(enabled: boolean): void;
+    /** Propagates the tick-on-select variant down to the slotted options. */
+    setTickOnSelectInOptions(enabled: boolean): void;
     setEnableDescriptionInOptions(): void;
     private addOpenListeners;
     private removeOpenListeners;

package/dist/src/nile-select/nile-select.js CHANGED Viewed

@@ -123,6 +123,9 @@ let NileSelect = class NileSelect extends NileElement {
         /** Placeholder text to show as a hint when the select is empty. */
         this.searchValue = '';
         this.searchEnabled = false;
+        this.legacy = false;
+        /** Variant: show a tick on the right of the selected option (single-select). Propagated to options. */
+        this.tickOnSelect = false;
         this.internalSearchPlaceHolder = 'Search...';
         this.enableVisibilityEffect = false;
         this.blockValueChange = false;
@@ -259,6 +262,12 @@ let NileSelect = class NileSelect extends NileElement {
         if (_changedProperties.has('multiple')) {
             this.setCheckBoxInOption(this.multiple);
         }
+        if (_changedProperties.has('legacy')) {
+            this.setLegacyInOptions(this.legacy);
+        }
+        if (_changedProperties.has('tickOnSelect')) {
+            this.setTickOnSelectInOptions(this.tickOnSelect);
+        }
         if (_changedProperties.has('autoResize')) {
             this.setupResizeObserver();
         }
@@ -277,6 +286,8 @@ let NileSelect = class NileSelect extends NileElement {
         if (_changedProperties.has('multiple')) {
             this.setCheckBoxInOption(this.multiple);
         }
+        this.setLegacyInOptions(this.legacy);
+        this.setTickOnSelectInOptions(this.tickOnSelect);
         if (_changedProperties.has('enableDescription')) {
             this.setEnableDescriptionInOptions();
         }
@@ -313,6 +324,24 @@ let NileSelect = class NileSelect extends NileElement {
             option.showCheckbox = checked;
         });
     }
+    /** Propagates the legacy opt-out flag down to the slotted options. */
+    setLegacyInOptions(enabled) {
+        if (!this.options.length) {
+            this.options = this.getAllOptions();
+        }
+        this.options.forEach((option) => {
+            option.legacy = enabled;
+        });
+    }
+    /** Propagates the tick-on-select variant down to the slotted options. */
+    setTickOnSelectInOptions(enabled) {
+        if (!this.options.length) {
+            this.options = this.getAllOptions();
+        }
+        this.options.forEach((option) => {
+            option.tickOnSelect = enabled;
+        });
+    }
     setEnableDescriptionInOptions() {
         this.options = this.getAllOptions();
         this.options.forEach((option) => {
@@ -1491,6 +1520,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileSelect.prototype, "searchEnabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSelect.prototype, "legacy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileSelect.prototype, "tickOnSelect", void 0);
 __decorate([
     property({ attribute: 'internal-search-placeholder' })
 ], NileSelect.prototype, "internalSearchPlaceHolder", void 0);