npm - @aquera/nile-elements - Versions diffs - 0.0.1-beta.6 → 0.0.1-beta.8 - Mend

@aquera/nile-elements 0.0.1-beta.6 → 0.0.1-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/nile-auto-complete.d.ts CHANGED Viewed

@@ -16,7 +16,6 @@ export declare class NileAutoComplete extends NileElement {
     private handleSearch;
     handleFocus(): void;
     private handleClick;
-    private handleBlur;
     render(): TemplateResult;
 }
 export default NileAutoComplete;

package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/nile-auto-complete.js CHANGED Viewed

@@ -59,9 +59,6 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
         this.isDropdownOpen = true;
         this.dropdownElement?.show();
     }
-    handleBlur() {
-        this.menuItems = this.allMenuItems;
-    }
     render() {
         return html `
       <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
@@ -70,7 +67,6 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
           .value=${this.value}
           @nile-input=${this.handleSearch}
           @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
           @click=${this.handleClick}
           slot="trigger"
           placeholder=${this.placeholder}

package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-auto-complete/nile-auto-complete.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":";AAAA,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,iDAAiD;AAEjD,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,WAAW;IAAjD;;QACE,8BAA8B;QACD,mBAAc,GAAY,KAAK,CAAC;QAEhC,gBAAW,GAAY,KAAK,CAAC;QAE9B,UAAK,GAAW,EAAE,CAAC;QAEnB,gBAAW,GAAW,cAAc,CAAC;QAEpC,aAAQ,GAAY,KAAK,CAAC;QAE9C,cAAS,GAAQ,EAAE,CAAC;QAEF,iBAAY,GAAQ,EAAE,CAAC;~~IA+FpD~~,CAAC;~~IA3FC~~,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC;IAED,+CAA+C;IAE/C,wBAAwB;QACtB,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC;IAED,+DAA+D;IAI/D,KAAK,CAAC,iBAAiB;QACrB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,8CAA8C;QAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAY,EAAE,EAAE,CACzD,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,CACvD,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;IAC/B,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QACrD,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;QAEzB,8CAA8C;QAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAY,EAAE,EAAE,CACzD,IAAI,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAC1C,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;QAChD,IAAI,IAAI,CAAC,cAAc;YAAE,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;IACxD,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAO;SACR;QAED,2DAA2D;QAC3D,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;QAC/B,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;IAC/B,CAAC;~~IAEO,UAAU;QAChB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;IACrC,CAAC;~~IAEM,MAAM;QACX,OAAO,IAAI,CAAA;0DAC2C,IAAI,CAAC,cAAc;;uBAEtD,IAAI,CAAC,QAAQ;mBACjB,IAAI,CAAC,KAAK;wBACL,IAAI,CAAC,YAAY;mBACtB,IAAI,CAAC,WAAW;~~kBACjB~~,IAAI,CAAC,~~UAAU;mBACd,IAAI,CAAC,~~WAAW;;wBAEX,IAAI,CAAC,WAAW;;UAE9B,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC;YACzB,CAAC,CAAC,IAAI,CAAA;wCACwB,IAAI,CAAC,YAAY;kBACvC,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,CAAC,IAAa,EAAG,EAAE,CAAC,IAAI,CAAA;4CACE,IAAI,IAAI,IAAI;mBACrC,CACF;;aAEJ;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;CACF,CAAA;~~AA3G8B~~;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDAAiC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAA8B;AAE9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAsC;AAEpC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAA2B;AAE9C;IAAR,KAAK,EAAE;mDAAqB;AAEF;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sDAAwB;AAE1B;IAAvB,KAAK,CAAC,eAAe,CAAC;yDAAsB;AAS7C;IADC,KAAK,CAAC,cAAc,CAAC;gEAGrB;AAMD;IAHC,KAAK,CAAC,OAAO,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;IAE9C,KAAK,CAAC,gBAAgB,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;yDAOvD;AAvCU,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,~~CA6G5B~~;~~SA7GY~~,gBAAgB;~~AA+G7B~~,eAAe,gBAAgB,CAAC","sourcesContent":["import {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../watch';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n // Define component properties\n @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n @property({ type: Boolean }) openOnFocus: boolean = false;\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) placeholder: string = 'Type here ..';\n\n @property({ type: Boolean }) noBorder: boolean = false;\n\n @state() menuItems: any = [];\n\n @property({ type: Array }) allMenuItems: any = [];\n\n @query('nile-dropdown') dropdownElement: any;\n\n connectedCallback() {\n super.connectedCallback();\n this.menuItems = [...this.allMenuItems];\n }\n\n // Watch for changes in 'allMenuItems' property\n @watch('allMenuItems')\n handleAllMenuItemsChange() {\n this.menuItems = [...this.allMenuItems];\n }\n\n // Watch for changes in 'value' and 'isDropdownOpen' properties\n @watch('value', { waitUntilFirstUpdate: true })\n\n @watch('isDropdownOpen', { waitUntilFirstUpdate: true })\n async handleValueChange() {\n await this.updateComplete;\n // Filter menu items based on the search value\n this.menuItems = this.allMenuItems.filter((item: string) =>\n item.toLowerCase().includes(this.value?.toLowerCase())\n );\n }\n\n private handleSelect(event: CustomEvent) {\n this.value = event.detail.value;\n this.emit('nile-complete', { value: event.detail.value });\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n\n private handleSearch(event: CustomEvent) {\n const searchValue = event.detail.value.toLowerCase();\n this.value = searchValue;\n\n // Filter menu items based on the search value\n this.menuItems = this.allMenuItems.filter((item: string) =>\n item?.toLowerCase().includes(searchValue)\n );\n\n this.isDropdownOpen = this.menuItems.length > 0;\n if (this.isDropdownOpen) this.dropdownElement?.show();\n }\n\n public handleFocus() {\n if (!this.openOnFocus) {\n return;\n }\n\n // Delay opening the dropdown to allow focus to take effect\n setTimeout(() => {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }, 300);\n }\n\n private handleClick() {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }\n\n ~~private handleBlur() {\n this.menuItems = this.allMenuItems;\n }\n\n~~ public render(): TemplateResult {\n return html`\n <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n <nile-input class=\"nile-auto-complete--input\"\n ?no-border=${this.noBorder}\n .value=${this.value}\n @nile-input=${this.handleSearch}\n @focus=${this.handleFocus}\n @~~blur=${this.handleBlur}\n @~~click=${this.handleClick}\n slot=\"trigger\"\n placeholder=${this.placeholder}\n ></nile-input>\n ${this.menuItems.length > 0\n ? html`\n <nile-menu @nile-select=${this.handleSelect}>\n ${this.menuItems.map(\n (item: unknown) => html`\n <nile-menu-item value=${item}>${item}</nile-menu-item>\n `\n )}\n </nile-menu>\n `\n : ''}\n </nile-dropdown>\n `;\n }\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-auto-complete': NileAutoComplete;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../watch';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n // Define component properties\n @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n @property({ type: Boolean }) openOnFocus: boolean = false;\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) placeholder: string = 'Type here ..';\n\n @property({ type: Boolean }) noBorder: boolean = false;\n\n @state() menuItems: any = [];\n\n @property({ type: Array }) allMenuItems: any = [];\n\n @query('nile-dropdown') dropdownElement: any;\n\n connectedCallback() {\n super.connectedCallback();\n this.menuItems = [...this.allMenuItems];\n }\n\n // Watch for changes in 'allMenuItems' property\n @watch('allMenuItems')\n handleAllMenuItemsChange() {\n this.menuItems = [...this.allMenuItems];\n }\n\n // Watch for changes in 'value' and 'isDropdownOpen' properties\n @watch('value', { waitUntilFirstUpdate: true })\n\n @watch('isDropdownOpen', { waitUntilFirstUpdate: true })\n async handleValueChange() {\n await this.updateComplete;\n // Filter menu items based on the search value\n this.menuItems = this.allMenuItems.filter((item: string) =>\n item.toLowerCase().includes(this.value?.toLowerCase())\n );\n }\n\n private handleSelect(event: CustomEvent) {\n this.value = event.detail.value;\n this.emit('nile-complete', { value: event.detail.value });\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n\n private handleSearch(event: CustomEvent) {\n const searchValue = event.detail.value.toLowerCase();\n this.value = searchValue;\n\n // Filter menu items based on the search value\n this.menuItems = this.allMenuItems.filter((item: string) =>\n item?.toLowerCase().includes(searchValue)\n );\n\n this.isDropdownOpen = this.menuItems.length > 0;\n if (this.isDropdownOpen) this.dropdownElement?.show();\n }\n\n public handleFocus() {\n if (!this.openOnFocus) {\n return;\n }\n\n // Delay opening the dropdown to allow focus to take effect\n setTimeout(() => {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }, 300);\n }\n\n private handleClick() {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }\n\n public render(): TemplateResult {\n return html`\n <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n <nile-input class=\"nile-auto-complete--input\"\n ?no-border=${this.noBorder}\n .value=${this.value}\n @nile-input=${this.handleSearch}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n slot=\"trigger\"\n placeholder=${this.placeholder}\n ></nile-input>\n ${this.menuItems.length > 0\n ? html`\n <nile-menu @nile-select=${this.handleSelect}>\n ${this.menuItems.map(\n (item: unknown) => html`\n <nile-menu-item value=${item}>${item}</nile-menu-item>\n `\n )}\n </nile-menu>\n `\n : ''}\n </nile-dropdown>\n `;\n }\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-auto-complete': NileAutoComplete;\n }\n}\n"]}

package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/nile-chip.d.ts CHANGED Viewed

@@ -13,6 +13,12 @@ export declare class NileChip extends NileElement {
     inputValue: string;
     isDropdownOpen: boolean;
     autoComplete: any;
+    /** Sets the input to a warning state, changing its visual appearance. */
+    warning: boolean;
+    /** Sets the input to an error state, changing its visual appearance. */
+    error: boolean;
+    /** Sets the input to a success state, changing its visual appearance. */
+    success: boolean;
     /** The input's label. If you need to display HTML, use the `label` slot instead. */
     label: string;
     /** Adds a clear button when the input is not empty. */

package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/nile-chip.js CHANGED Viewed

@@ -19,6 +19,12 @@ let NileChip = class NileChip extends NileElement {
         this.tags = [];
         this.inputValue = '';
         this.isDropdownOpen = false;
+        /** Sets the input to a warning state, changing its visual appearance. */
+        this.warning = false;
+        /** Sets the input to an error state, changing its visual appearance. */
+        this.error = false;
+        /** Sets the input to a success state, changing its visual appearance. */
+        this.success = false;
         /** The input's label. If you need to display HTML, use the `label` slot instead. */
         this.label = '';
         /** Adds a clear button when the input is not empty. */
@@ -107,7 +113,14 @@ let NileChip = class NileChip extends NileElement {
           <slot name="label">${this.label}</slot>
         </label>
-        <div class="nile-chip">
+        <div
+        class=${classMap({
+            'nile-chip': true,
+            'nile-chip--warning': this.warning,
+            'nile-chip--error': this.error,
+            'nile-chip--success': this.success,
+        })}
+            >
           ${this.tags.map(tag => html `
             <nile-tag class="nile-chip__tags" @nile-remove=${() => this.handleRemove(tag)} removable pill>
               ${tag}
@@ -153,6 +166,15 @@ __decorate([
 __decorate([
     query('nile-auto-complete')
 ], NileChip.prototype, "autoComplete", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "warning", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "success", void 0);
 __decorate([
     property()
 ], NileChip.prototype, "label", void 0);

package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-chip/nile-chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.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 {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult\n} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport { watch } from '../internal/watch';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\n\ninterface CustomEventDetail {\n value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n\n @state() tags: string[] = [];\n\n @state() inputValue: string = '';\n\n @state() isDropdownOpen: boolean = false;\n\n @query('nile-auto-complete') autoComplete!: any;\n\n /* The input's label. If you need to display HTML, use the `label` slot instead. /\n @property() label = '';\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) acceptUserInput = false;\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) clearable = false;\n\n /* Placeholder text to show as a hint when the input is empty. /\n @property() placeholder = '';\n\n /* Makes the input readonly. /\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /* Disables the input. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* The input's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n // Auto-complete options\n @property({ type: Array }) autoCompleteOptions : any[] = [];\n\n @property({ type: Array }) value : any[] = [];\n\n @watch('value')\n onValueChanged() {\n this.tags = [...this.value];\n }\n\n private handleSelect(event: CustomEvent<CustomEventDetail>) {\n\n // Add the selected value to the tags array\n this.tags = [...this.tags, event.detail.value];\n\n // Emit a custom event with the selected value\n this.emit('nile-chip-change', { value: this.tags });\n\n // Reset the input field\n this.resetInput();\n }\n\n private handleRemove(value: string) {\n // Remove the tag from the tags array\n this.tags = this.tags.filter(tag => tag !== value);\n this.emit('nile-chip-change', { value: this.tags });\n\n }\n\n private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n // Update the input value\n this.inputValue = event.detail.value;\n }\n\n private handleInputKeydown(event: KeyboardEvent) {\n if (!this.acceptUserInput) {\n return;\n }\n\n if (event.key === 'Enter' && this.inputValue) {\n this.tags = [...this.tags, this.inputValue];\n\n this.resetInput();\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n\n }\n\n private handleFocus() {\n this.isDropdownOpen = true;\n }\n\n private resetInput() {\n // Reset the input-related properties\n this.inputValue = '';\n this.isDropdownOpen = false;\n this.autoComplete.value = '';\n this.autoComplete.handleFocus();\n }\n\n render() {\n // Check if slots are present\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n // Check if label and help text are present\n const hasLabel = this.label ? true : !!hasLabelSlot;\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText,\n 'nile-chip--disabled': this.disabled,\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div class=\"nile-chip\">\n ${this.tags.map(tag => html`\n <nile-tag class=\"nile-chip__tags\" @nile-remove=${() => this.handleRemove(tag)} removable pill>\n ${tag}\n </nile-tag>\n `)}\n <div class=\"nile-chip__auto-complete\">\n <nile-auto-complete\n .allMenuItems=${this.autoCompleteOptions}\n .value=${this.inputValue}\n ?isDropdownOpen=${this.isDropdownOpen}\n .noBorder=${true}\n openOnFocus\n .placeholder=${this.placeholder}\n @nile-input=${this.handleInputChange}\n @keydown=${this.handleInputKeydown}\n @nile-focus=${this.handleFocus}\n @nile-complete=${this.handleSelect}\n ></nile-auto-complete>\n </div>\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n ${this.helpText}\n </slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default NileChip;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-chip': NileChip;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.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 {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult\n} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport { watch } from '../internal/watch';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\n\ninterface CustomEventDetail {\n value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n\n @state() tags: string[] = [];\n\n @state() inputValue: string = '';\n\n @state() isDropdownOpen: boolean = false;\n\n @query('nile-auto-complete') autoComplete!: any;\n\n /* Sets the input to a warning state, changing its visual appearance. /\n @property({ type: Boolean }) warning = false;\n\n /* Sets the input to an error state, changing its visual appearance. /\n @property({ type: Boolean }) error = false;\n\n /* Sets the input to a success state, changing its visual appearance. /\n @property({ type: Boolean }) success = false;\n\n /* The input's label. If you need to display HTML, use the `label` slot instead. /\n @property() label = '';\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) acceptUserInput = false;\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) clearable = false;\n\n /* Placeholder text to show as a hint when the input is empty. /\n @property() placeholder = '';\n\n /* Makes the input readonly. /\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /* Disables the input. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* The input's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n // Auto-complete options\n @property({ type: Array }) autoCompleteOptions : any[] = [];\n\n @property({ type: Array }) value : any[] = [];\n\n @watch('value')\n onValueChanged() {\n this.tags = [...this.value];\n }\n\n private handleSelect(event: CustomEvent<CustomEventDetail>) {\n\n // Add the selected value to the tags array\n this.tags = [...this.tags, event.detail.value];\n\n // Emit a custom event with the selected value\n this.emit('nile-chip-change', { value: this.tags });\n\n // Reset the input field\n this.resetInput();\n }\n\n private handleRemove(value: string) {\n // Remove the tag from the tags array\n this.tags = this.tags.filter(tag => tag !== value);\n this.emit('nile-chip-change', { value: this.tags });\n\n }\n\n private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n // Update the input value\n this.inputValue = event.detail.value;\n }\n\n private handleInputKeydown(event: KeyboardEvent) {\n if (!this.acceptUserInput) {\n return;\n }\n\n if (event.key === 'Enter' && this.inputValue) {\n this.tags = [...this.tags, this.inputValue];\n\n this.resetInput();\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n\n }\n\n private handleFocus() {\n this.isDropdownOpen = true;\n }\n\n private resetInput() {\n // Reset the input-related properties\n this.inputValue = '';\n this.isDropdownOpen = false;\n this.autoComplete.value = '';\n this.autoComplete.handleFocus();\n }\n\n render() {\n // Check if slots are present\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n // Check if label and help text are present\n const hasLabel = this.label ? true : !!hasLabelSlot;\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText,\n 'nile-chip--disabled': this.disabled,\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div\n class=${classMap({\n 'nile-chip': true,\n 'nile-chip--warning': this.warning,\n 'nile-chip--error': this.error,\n 'nile-chip--success': this.success,\n\n })}\n >\n ${this.tags.map(tag => html`\n <nile-tag class=\"nile-chip__tags\" @nile-remove=${() => this.handleRemove(tag)} removable pill>\n ${tag}\n </nile-tag>\n `)}\n <div class=\"nile-chip__auto-complete\">\n <nile-auto-complete\n .allMenuItems=${this.autoCompleteOptions}\n .value=${this.inputValue}\n ?isDropdownOpen=${this.isDropdownOpen}\n .noBorder=${true}\n openOnFocus\n .placeholder=${this.placeholder}\n @nile-input=${this.handleInputChange}\n @keydown=${this.handleInputKeydown}\n @nile-focus=${this.handleFocus}\n @nile-complete=${this.handleSelect}\n ></nile-auto-complete>\n </div>\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n ${this.helpText}\n </slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default NileChip;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-chip': NileChip;\n }\n}\n"]}

package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-select/nile-select.css.js CHANGED Viewed

@@ -94,7 +94,7 @@ export const styles = css `
   }
   .select::part(popup) {
-    z-index: 900;
+    z-index: 9999;
   }
   .select[data-current-placement^='top']::part(popup) {
@@ -353,7 +353,7 @@ export const styles = css `
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: #aaaaaa;
+    color: #005EA6;
     border: none;
     background: none;
     padding: 0;
@@ -393,7 +393,7 @@ export const styles = css `
     background: #ffffff;
     border: solid 1px #cccccc;
     border-radius: 0.25rem;
-    padding-block: 0.25rem 0;
+    padding-block: 0;
     padding-inline: 0;
     overflow: auto;
     overscroll-behavior: none;
@@ -402,10 +402,15 @@ export const styles = css `
     max-height: var(--auto-size-available-height);
   }
-  /* Listbox */
-  .select__search-enabled {
-    padding-top: 50px;
+  .select__options{
+    padding-top: 10px;
+  }
+  .select__options{
+    padding: 5px;
+    margin: 4px;
+    font-size: 14px;
+    color: rgb(133, 129, 129);
   }
   .select__listbox::slotted(nile-divider) {
@@ -421,11 +426,12 @@ export const styles = css `
   }
   .select__search {
-    position: absolute;
+    position: sticky;
     top: 0px;
-    height: 15px;
+    z-index: 1;
     width: calc(100% - 16px);
     padding: 8px;
+    background-color: white;
   }
   .select__footer {
@@ -439,7 +445,7 @@ export const styles = css `
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    padding: 12px;
+    padding: 8px;
     gap: 12px;
     justify-content: space-between;
   }

package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/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;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmbxB,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-element';\n\n/\n Select_2 CSS\n /\nexport const styles = css`\n :host {\n box-sizing: border-box;\n }\n\n :host ,\n :host ::before,\n :host ::after {\n box-sizing: inherit;\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: inline-block;\n color: #333333;\n margin-bottom: 0.75rem;\n }\n\n .form-control--has-label.form-control--small .form-control__label {\n font-size: 0.875rem;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 1rem;\n }\n\n .form-control--has-label.form-control--large .form-control__label {\n font-size: 1.25rem;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '';\n margin-inline-start: -2px;\n color: inherit;\n }\n\n /* Help text /\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #666666;\n margin-top: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--small .form-control__help-text {\n font-size: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\n }\n\n .form-control--has-help-text.form-control--large .form-control__help-text {\n font-size: 1rem;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\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: 900;\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n font-weight: 400;\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: #333333;\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: #333333;\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: 0;\n margin: 0;\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: 0.5rem;\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n position: absolute;\n right: 0;\n border: 1px solid rgb(169, 218, 218);\n border-radius: 0.25rem;\n margin-right: 30px;\n }\n\n .select__tags-count-clearable {\n margin-right: 50px;\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: #ffffff;\n border: solid 1px #cccccc;\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: #f4f4f4;\n border-color: #cccccc;\n color: #999999;\n opacity: 0.5;\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: #f4f4f4;\n border-color: #0059ff;\n box-shadow: 0 0 0 3px rgba(0, 89, 255, 0.4);\n }\n\n / Filled selects /\n .select--filled .select__combobox {\n border: none;\n background-color: #f4f4f4;\n color: #333333;\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: #f4f4f4;\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: #f4f4f4;\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n / Sizes /\n .select--small .select__combobox {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n min-height: 1.875rem;\n padding-block: 0;\n padding-inline: 0.5rem;\n }\n\n .select--small .select__clear {\n margin-inline-start: 0.5rem;\n }\n\n .select--small .select__prefix::slotted() {\n margin-inline-end: 0.5rem;\n }\n\n .select--small.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-block: 2px;\n padding-inline-start: 0;\n }\n\n .select--small .select__tags {\n gap: 2px;\n }\n\n .select--medium .select__combobox {\n border-radius: 0.25rem;\n font-size: 1rem;\n min-height: 2.5rem;\n padding-block: 0;\n padding-inline: 0.75rem;\n }\n\n .select--medium .select__clear {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium .select__prefix::slotted() {\n margin-inline-end: 0.75rem;\n / margin-inline-start: 0.75rem; /\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n .select--large .select__combobox {\n border-radius: 0.5rem;\n font-size: 1.25rem;\n min-height: 3.125rem;\n padding-block: 0;\n padding-inline: 1rem;\n }\n\n .select--large .select__clear {\n margin-inline-start: 1rem;\n }\n\n .select--large .select__prefix::slotted() {\n margin-inline-end: 1rem;\n }\n\n .select--large.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n padding-block: 4px;\n }\n\n .select--large .select__tags {\n gap: 4px;\n }\n\n /* Pills /\n .select--pill.select--small .select__combobox {\n border-radius: 1.875rem;\n }\n\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\n }\n\n .select--pill.select--large .select__combobox {\n border-radius: 3.125rem;\n }\n\n / Prefix /\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\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: #aaaaaa;\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: #999999;\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: 0.25rem;\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: 1rem;\n font-weight: 400;\n box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);\n background: #ffffff;\n border: solid 1px #cccccc;\n border-radius: 0.25rem;\n padding-block: 0.25rem 0;\n padding-inline: 0;\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 }\n\n / Listbox /\n .select__search-enabled {\n padding-top: 50px;\n\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: 0.25rem;\n }\n\n .select__listbox::slotted(small) {\n font-size: 0.875rem;\n font-weight: 600;\n color: #888888;\n padding-block: 0.25rem;\n padding-inline: 1rem;\n }\n\n .select__search {\n position: absolute;\n top: 0px;\n height: 15px;\n width: calc(100% - 16px);\n padding: 8px;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: #fafafa;\n border: 1px solid #e5e9eb;\n display: flex;\n height: 15px;\n / Auto layout */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 12px;\n gap: 12px;\n justify-content: space-between;\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;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAybxB,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-element';\n\n/\n Select_2 CSS\n /\nexport const styles = css`\n :host {\n box-sizing: border-box;\n }\n\n :host ,\n :host ::before,\n :host ::after {\n box-sizing: inherit;\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: inline-block;\n color: #333333;\n margin-bottom: 0.75rem;\n }\n\n .form-control--has-label.form-control--small .form-control__label {\n font-size: 0.875rem;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 1rem;\n }\n\n .form-control--has-label.form-control--large .form-control__label {\n font-size: 1.25rem;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '';\n margin-inline-start: -2px;\n color: inherit;\n }\n\n /* Help text /\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #666666;\n margin-top: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--small .form-control__help-text {\n font-size: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\n }\n\n .form-control--has-help-text.form-control--large .form-control__help-text {\n font-size: 1rem;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n font-weight: 400;\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: #333333;\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n }\n\n .select:not(.select--disabled):hover .select__display-input {\n color: #333333;\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: 0;\n margin: 0;\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: 0.5rem;\n width: 100%;\n overflow: hidden;\n }\n\n .select__tags-count {\n position: absolute;\n right: 0;\n border: 1px solid rgb(169, 218, 218);\n border-radius: 0.25rem;\n margin-right: 30px;\n }\n\n .select__tags-count-clearable {\n margin-right: 50px;\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: #ffffff;\n border: solid 1px #cccccc;\n }\n\n .select--standard.select--disabled .select__combobox {\n background-color: #f4f4f4;\n border-color: #cccccc;\n color: #999999;\n opacity: 0.5;\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: #f4f4f4;\n border-color: #0059ff;\n box-shadow: 0 0 0 3px rgba(0, 89, 255, 0.4);\n }\n\n / Filled selects /\n .select--filled .select__combobox {\n border: none;\n background-color: #f4f4f4;\n color: #333333;\n }\n\n .select--filled:hover:not(.select--disabled) .select__combobox {\n background-color: #f4f4f4;\n }\n\n .select--filled.select--disabled .select__combobox {\n background-color: #f4f4f4;\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: #f4f4f4;\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n / Sizes /\n .select--small .select__combobox {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n min-height: 1.875rem;\n padding-block: 0;\n padding-inline: 0.5rem;\n }\n\n .select--small .select__clear {\n margin-inline-start: 0.5rem;\n }\n\n .select--small .select__prefix::slotted() {\n margin-inline-end: 0.5rem;\n }\n\n .select--small.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-block: 2px;\n padding-inline-start: 0;\n }\n\n .select--small .select__tags {\n gap: 2px;\n }\n\n .select--medium .select__combobox {\n border-radius: 0.25rem;\n font-size: 1rem;\n min-height: 2.5rem;\n padding-block: 0;\n padding-inline: 0.75rem;\n }\n\n .select--medium .select__clear {\n margin-inline-start: 0.75rem;\n }\n\n .select--medium .select__prefix::slotted() {\n margin-inline-end: 0.75rem;\n / margin-inline-start: 0.75rem; /\n }\n\n .select--medium.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n }\n\n .select--medium .select__tags {\n gap: 3px;\n }\n\n .select--large .select__combobox {\n border-radius: 0.5rem;\n font-size: 1.25rem;\n min-height: 3.125rem;\n padding-block: 0;\n padding-inline: 1rem;\n }\n\n .select--large .select__clear {\n margin-inline-start: 1rem;\n }\n\n .select--large .select__prefix::slotted() {\n margin-inline-end: 1rem;\n }\n\n .select--large.select--multiple:not(.select--placeholder-visible)\n .select__combobox {\n padding-inline-start: 0;\n padding-block: 4px;\n }\n\n .select--large .select__tags {\n gap: 4px;\n }\n\n /* Pills /\n .select--pill.select--small .select__combobox {\n border-radius: 1.875rem;\n }\n\n .select--pill.select--medium .select__combobox {\n border-radius: 2.5rem;\n }\n\n .select--pill.select--large .select__combobox {\n border-radius: 3.125rem;\n }\n\n / Prefix /\n .select__prefix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: #aaaaaa;\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: #005EA6;\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .select__clear:hover {\n color: #999999;\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: 0.25rem;\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: 1rem;\n font-weight: 400;\n box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);\n background: #ffffff;\n border: solid 1px #cccccc;\n border-radius: 0.25rem;\n padding-block: 0;\n padding-inline: 0;\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 }\n\n .select__options{\n padding-top: 10px;\n }\n\n .select__options{\n padding: 5px;\n margin: 4px;\n font-size: 14px;\n color: rgb(133, 129, 129);\n }\n\n .select__listbox::slotted(nile-divider) {\n --spacing: 0.25rem;\n }\n\n .select__listbox::slotted(small) {\n font-size: 0.875rem;\n font-weight: 600;\n color: #888888;\n padding-block: 0.25rem;\n padding-inline: 1rem;\n }\n\n .select__search {\n position: sticky;\n top: 0px;\n z-index: 1;\n width: calc(100% - 16px);\n padding: 8px;\n background-color: white;\n }\n\n .select__footer {\n position: sticky;\n bottom: 0px;\n background: #fafafa;\n border: 1px solid #e5e9eb;\n display: flex;\n height: 15px;\n / Auto layout */\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 8px;\n gap: 12px;\n justify-content: space-between;\n }\n`;\n\nexport default [styles];\n"]}

package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-select/nile-select.d.ts CHANGED Viewed

@@ -138,6 +138,8 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     /** The select's required attribute. */
     required: boolean;
     showSelected: boolean;
+    showNoResults: boolean;
+    noResultsMessage: string;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
@@ -181,7 +183,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     handleSearchFocus(): void;
     handleSearchBlur(): void;
     handleSearchChange(e: any): void;
-    filterOptions(searchValue: string): void;
+    filterOptions(searchValue: string): NileOption[];
     private handleInvalid;
     handleDisabledChange(): void;
     handleValueChange(): void;

package/.rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-select/nile-select.js CHANGED Viewed

@@ -143,6 +143,7 @@ let NileSelect = class NileSelect extends NileElement {
         /** The select's required attribute. */
         this.required = false;
         this.showSelected = false;
+        this.noResultsMessage = "No results found";
     }
     /** Gets the validity state object */
     get validity() {
@@ -173,11 +174,11 @@ let NileSelect = class NileSelect extends NileElement {
     handleFocus() {
         this.hasFocus = true;
         this.displayInput.setSelectionRange(0, 0);
-        this.emit('nile-focus');
+        this.emit('nile-focus', { value: this.value, name: this.name });
     }
     handleBlur() {
         this.hasFocus = false;
-        this.emit('nile-blur');
+        this.emit('nile-blur', { value: this.value, name: this.name });
     }
     handleDocumentFocusIn(event) {
         // Close when focusing out of the select
@@ -228,6 +229,7 @@ let NileSelect = class NileSelect extends NileElement {
         });
         this.value = '';
         this.selectionChanged();
+        this.emit('nile-change', { value: this.value, name: this.name });
     }
     handleDocumentKeyDown(event) {
         const target = event.target;
@@ -265,8 +267,8 @@ let NileSelect = class NileSelect extends NileElement {
                 }
                 // Emit after updating
                 this.updateComplete.then(() => {
-                    this.emit('nile-input');
-                    this.emit('nile-change');
+                    this.emit('nile-input', { value: this.value, name: this.name });
+                    this.emit('nile-change', { value: this.value, name: this.name });
                 });
                 if (!this.multiple) {
                     this.hide();
@@ -374,9 +376,9 @@ let NileSelect = class NileSelect extends NileElement {
             this.displayInput.focus({ preventScroll: true });
             // Emit after update
             this.updateComplete.then(() => {
-                this.emit('nile-clear');
-                this.emit('nile-input');
-                this.emit('nile-change');
+                this.emit('nile-clear', { value: this.value, name: this.name });
+                this.emit('nile-input', { value: this.value, name: this.name });
+                this.emit('nile-change', { value: this.value, name: this.name });
             });
         }
     }
@@ -401,8 +403,8 @@ let NileSelect = class NileSelect extends NileElement {
             if (this.value !== oldValue) {
                 // Emit after updating
                 this.updateComplete.then(() => {
-                    this.emit('nile-input');
-                    this.emit('nile-change');
+                    this.emit('nile-input', { value: this.value, name: this.name });
+                    this.emit('nile-change', { value: this.value, name: this.name });
                 });
             }
             if (!this.multiple) {
@@ -434,8 +436,8 @@ let NileSelect = class NileSelect extends NileElement {
             this.toggleOptionSelection(option, false);
             // Emit after updating
             this.updateComplete.then(() => {
-                this.emit('nile-input');
-                this.emit('nile-change');
+                this.emit('nile-input', { value: this.value, name: this.name });
+                this.emit('nile-change', { value: this.value, name: this.name });
             });
         }
     }
@@ -520,18 +522,31 @@ let NileSelect = class NileSelect extends NileElement {
     }
     handleSearchChange(e) {
         this.searchValue = e.detail.value;
-        this.filterOptions(this.searchValue);
+        let filteredOptions = this.filterOptions(this.searchValue);
+        if (filteredOptions.length === 0) {
+            // Display 'No results found' message.
+            this.showNoResults = true;
+        }
+        else {
+            this.showNoResults = false;
+        }
     }
     filterOptions(searchValue) {
         const allOptions = this.getAllOptions();
         const lowerCaseSearchValue = searchValue.toLowerCase();
+        let filteredOptions = [];
         allOptions.forEach(el => {
-            // Hide the option if its text and value do not include the search value.
             const lowerCaseLabel = el.getTextLabel().toLowerCase();
             const lowerCaseValue = (el.value || '').toLowerCase();
-            el.hidden = !(lowerCaseLabel.includes(lowerCaseSearchValue) ||
-                lowerCaseValue.includes(lowerCaseSearchValue));
+            if (lowerCaseLabel.startsWith(lowerCaseSearchValue) || lowerCaseValue.startsWith(lowerCaseSearchValue)) {
+                el.hidden = false;
+                filteredOptions.push(el);
+            }
+            else {
+                el.hidden = true;
+            }
         });
+        return filteredOptions;
     }
     handleInvalid(event) {
         this.formControlController.setValidity(false);
@@ -555,7 +570,7 @@ let NileSelect = class NileSelect extends NileElement {
             // Reset the current option
             this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
             // Show
-            this.emit('nile-show');
+            this.emit('nile-show', { value: this.value, name: this.name });
             this.addOpenListeners();
             await stopAnimations(this);
             this.listbox.hidden = false;
@@ -572,11 +587,11 @@ let NileSelect = class NileSelect extends NileElement {
             if (this.currentOption) {
                 scrollIntoView(this.currentOption, this.listbox, 'vertical', 'auto');
             }
-            this.emit('nile-after-show');
+            this.emit('nile-after-show', { value: this.value, name: this.name });
         }
         else {
             // Hide
-            this.emit('nile-hide');
+            this.emit('nile-hide', { value: this.value, name: this.name });
             this.removeOpenListeners();
             await stopAnimations(this);
             const { keyframes, options } = getAnimation(this, 'select.hide', {
@@ -585,7 +600,7 @@ let NileSelect = class NileSelect extends NileElement {
             await animateTo(this.popup.popup, keyframes, options);
             this.listbox.hidden = true;
             this.popup.active = false;
-            this.emit('nile-after-hide');
+            this.emit('nile-after-hide', { value: this.value, name: this.name });
         }
     }
     /** Shows the listbox. */
@@ -818,9 +833,7 @@ let NileSelect = class NileSelect extends NileElement {
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
             >
-              <slot></slot>
-              ${this.searchEnabled
+            ${this.searchEnabled
             ? html ` <div class="select__search">
                     <nile-input
                       size="small"
@@ -835,6 +848,14 @@ let NileSelect = class NileSelect extends NileElement {
                     </nile-input>
                   </div>`
             : ``}
+                <div class="select__options">
+                ${this.showNoResults
+            ? html ` <div class="select__no-results">${this.noResultsMessage} </div>
+                ` : ''}
+                <slot></slot>
+                  </div>
               ${this.multiple
             ? html ` <div
                     class="select__footer"
@@ -969,6 +990,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileSelect.prototype, "showSelected", void 0);
+__decorate([
+    state()
+], NileSelect.prototype, "showNoResults", void 0);
+__decorate([
+    property({ type: String })
+], NileSelect.prototype, "noResultsMessage", void 0);
 __decorate([
     watch('disabled', { waitUntilFirstUpdate: true })
 ], NileSelect.prototype, "handleDisabledChange", null);