@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.5

package/dist/src/nile-auto-complete/nile-auto-complete.js

@@ -0,0 +1,364 @@
+import { __decorate } from "tslib";
+import { html, nothing, } from 'lit';
+import { customElement, query, state, property } from 'lit/decorators.js';
+import { styles } from './nile-auto-complete.css';
+import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
+import { AutoCompletePortalManager } from './portal-manager';
+import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
+// Define the custom element 'nile-auto-complete'
+let NileAutoComplete = class NileAutoComplete extends NileElement {
+    constructor() {
+        super(...arguments);
+        // Define component properties
+        this.disabled = false;
+        this.isDropdownOpen = false;
+        /**
+         * When true, the dropdown menu will be appended to the document body instead of the parent container.
+         * This is useful when the parent has overflow: hidden, clip-path, or transform applied.
+         */
+        this.portal = false;
+        this.portalManager = new AutoCompletePortalManager(this);
+        this.enableVirtualScroll = false;
+        this.openOnFocus = false;
+        this.value = '';
+        this.placeholder = 'Type here ..';
+        this.noBorder = false;
+        this.noOutline = false;
+        this.noPadding = false;
+        this.loading = false;
+        this.filterFunction = (item, searchedValue) => item.toLowerCase().includes(searchedValue.toLowerCase());
+        this.renderItemFunction = (item) => item;
+        this.allMenuItems = [];
+        this.enableVisibilityEffect = false;
+        this.enableTabClose = false;
+        this.menuItems = [];
+        this.handleWindowResize = () => {
+            this.portalManager.updatePortalAppendPosition();
+        };
+        this.handleWindowScroll = () => {
+            this.portalManager.updatePortalAppendPosition();
+        };
+    }
+    async firstUpdated(_changed) {
+        await this.updateComplete;
+        this.visibilityManager = new VisibilityManager({
+            host: this,
+            target: this.inputElement.input,
+            enableVisibilityEffect: this.enableVisibilityEffect,
+            enableTabClose: this.enableTabClose,
+            isOpen: () => this.isDropdownOpen,
+            onAnchorOutOfView: () => {
+                this.isDropdownOpen = false;
+                this.dropdownElement?.hide();
+                this.emit('nile-visibility-change', {
+                    visible: false,
+                    reason: 'anchor-out-of-view',
+                });
+            },
+            onDocumentHidden: () => {
+                this.isDropdownOpen = false;
+                this.dropdownElement?.hide();
+                this.emit('nile-visibility-change', {
+                    visible: false,
+                    reason: 'document-hidden',
+                });
+            },
+            emit: (event, detail) => this.emit(`nile-${event}`, detail),
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.renderItemFunction = (item) => item;
+        this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
+        this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+        this.handleWindowResize = this.handleWindowResize.bind(this);
+        this.handleWindowScroll = this.handleWindowScroll.bind(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeOpenListeners();
+        this.visibilityManager?.cleanup();
+        this.portalManager.cleanupPortalAppend();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('allMenuItems')) {
+            this.menuItems = this.applyFilter(this.allMenuItems, this.filterFunction);
+            this.setVirtualMenuWidth();
+            if (this.portal && this.isDropdownOpen) {
+                this.portalManager.updatePortalOptions();
+            }
+        }
+        if (changedProperties.has('isDropdownOpen')) {
+            this.menuItems = this.applyFilter(this.allMenuItems, this.filterFunction);
+            this.handleDropdownOpenChange();
+        }
+        if (changedProperties.has('value')) {
+            this.menuItems = this.applyFilter(this.allMenuItems, this.filterFunction);
+            if (this.portal && this.isDropdownOpen) {
+                this.portalManager.updatePortalOptions();
+            }
+        }
+        if (changedProperties.has('portal')) {
+            this.handlePortalChange();
+        }
+    }
+    handlePortalChange() {
+        if (this.isDropdownOpen) {
+            if (this.portal) {
+                this.portalManager.setupPortalAppend();
+            }
+            else {
+                this.portalManager.cleanupPortalAppend();
+            }
+        }
+    }
+    handleDropdownOpenChange() {
+        if (this.isDropdownOpen) {
+            this.addOpenListeners();
+            this.visibilityManager?.setup();
+            if (this.portal) {
+                this.portalManager.setupPortalAppend();
+            }
+        }
+        else {
+            this.removeOpenListeners();
+            this.visibilityManager?.cleanup();
+            if (this.portal) {
+                this.portalManager.cleanupPortalAppend();
+            }
+        }
+    }
+    addOpenListeners() {
+        document.addEventListener('focusin', this.handleDocumentFocusIn);
+        document.addEventListener('mousedown', this.handleDocumentMouseDown);
+        if (this.portal) {
+            window.addEventListener('resize', this.handleWindowResize);
+            window.addEventListener('scroll', this.handleWindowScroll, true);
+        }
+    }
+    removeOpenListeners() {
+        document.removeEventListener('focusin', this.handleDocumentFocusIn);
+        document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+        window.removeEventListener('resize', this.handleWindowResize);
+        window.removeEventListener('scroll', this.handleWindowScroll, true);
+    }
+    handleDocumentFocusIn(event) {
+        if (!this.isDropdownOpen)
+            return;
+        const path = event.composedPath();
+        const hitSelf = path.includes(this);
+        const hitDropdown = this.dropdownElement && path.includes(this.dropdownElement);
+        const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+        if (!hitSelf && !hitDropdown && !hitPortalAppend) {
+            this.isDropdownOpen = false;
+            this.dropdownElement?.hide();
+        }
+    }
+    handleDocumentMouseDown(event) {
+        if (!this.isDropdownOpen)
+            return;
+        const path = event.composedPath();
+        const hitSelf = path.includes(this);
+        const hitDropdown = this.dropdownElement && path.includes(this.dropdownElement);
+        const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+        if (!hitSelf && !hitDropdown && !hitPortalAppend) {
+            this.isDropdownOpen = false;
+            this.dropdownElement?.hide();
+        }
+    }
+    render() {
+        const content = this.enableVirtualScroll ? this.getVirtualizedContent() : this.getContent();
+        return html `
+      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick exportparts="input, base">
+        <nile-input class="nile-auto-complete--input"
+          ?no-border=${this.noBorder}
+          ?no-outline=${this.noOutline}
+          ?no-padding=${this.noPadding}
+          .disabled=${this.disabled}
+          .value=${this.value}
+          @nile-input=${this.handleSearch}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+          slot="trigger"
+          placeholder=${this.placeholder}
+          exportparts="input, base"
+        >
+          ${this.loading ? html `<nile-icon slot="suffix" color="var(--nile-colors-primary-600)" name="var(--nile-icon-button-loading-blue-animated, var(--ng-icon-button-loading-blue-animated))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>` : nothing}
+        </nile-input>
+        ${this.menuItems.length > 0 && !this.loading
+            ? content
+            : nothing}
+      </nile-dropdown>
+    `;
+    }
+    getVirtualizedContent() {
+        return html `
+      <nile-menu class="virtualized__menu" @nile-select=${this.handleSelect} id="content-menu" exportparts="menu__items-wrapper:options__wrapper" style=${this.portal ? 'display: none;' : ''}>
+        ${virtualize({
+            items: this.menuItems,
+            renderItem: (item) => this.getItemRenderFunction(item),
+            scroller: true
+        })}
+      </nile-menu>
+    `;
+    }
+    getContent() {
+        return html `
+      <nile-menu id="content-menu" @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper" style=${this.portal ? 'display: none;' : ''}>
+        ${this.menuItems.map((item) => this.getItemRenderFunction(item))}
+      </nile-menu>`;
+    }
+    getItemRenderFunction(item) {
+        const value = this.renderItemFunction(item);
+        const hasTooltip = !!item.tooltip;
+        const shouldShowTooltip = hasTooltip && (!item.tooltip.for || item.tooltip.for === 'menu');
+        if (!shouldShowTooltip) {
+            return html `
+        <nile-menu-item value=${value}>${unsafeHTML(value)}</nile-menu-item>
+      `;
+        }
+        let tooltipContent = null;
+        const content = item.tooltip.content;
+        if (content instanceof Promise) {
+            tooltipContent = 'Loading...';
+            content.then((resolved) => {
+                item.tooltip.content = resolved;
+                this.requestUpdate();
+            });
+        }
+        else {
+            tooltipContent = content;
+        }
+        return html `
+      <nile-menu-item value=${value}>
+        <nile-lite-tooltip allowHTML .content=${tooltipContent}>
+          <span class="menu-item-text">${unsafeHTML(value)}</span>
+        </nile-lite-tooltip>
+      </nile-menu-item>
+    `;
+    }
+    handleSelect(event) {
+        this.value = event.detail.value;
+        this.emit('nile-complete', { value: event.detail.value });
+        this.isDropdownOpen = false;
+        this.dropdownElement?.hide();
+    }
+    setVirtualMenuWidth() {
+        const maxLengthOption = this.menuItems
+            .reduce((acc, curr) => {
+            const currLength = this.renderItemFunction(curr).length;
+            return acc > currLength ? acc : currLength;
+        }, 0);
+        const defaultWith = 110;
+        const pixelMultiplier = 9.5;
+        const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;
+        this.style.setProperty("--virtual-scroll-container-width", menuWidth + "px");
+    }
+    handleSearch(event) {
+        this.value = event.detail.value.toLowerCase();
+        // Filter menu items based on the search value
+        this.menuItems = this.applyFilter(this.allMenuItems, this.filterFunction);
+        this.isDropdownOpen = this.menuItems.length > 0;
+        if (this.isDropdownOpen) {
+            this.dropdownElement?.show();
+            if (this.portal) {
+                this.portalManager.updatePortalOptions();
+            }
+        }
+    }
+    handleFocus() {
+        if (!this.openOnFocus) {
+            return;
+        }
+        if (this.portal) {
+            this.inputElement?.focus();
+        }
+        // Delay opening the dropdown to allow focus to take effect
+        setTimeout(() => {
+            this.isDropdownOpen = true;
+            this.dropdownElement?.show();
+        }, 300);
+    }
+    handleClick() {
+        this.isDropdownOpen = true;
+        this.dropdownElement?.show();
+    }
+    applyFilter(list, filterFn) {
+        if (typeof (list) !== 'object')
+            return [];
+        const res = [];
+        list.forEach(el => filterFn(el, this.value) && res.push(el));
+        return res;
+    }
+};
+NileAutoComplete.styles = styles;
+__decorate([
+    query('nile-dropdown')
+], NileAutoComplete.prototype, "dropdownElement", void 0);
+__decorate([
+    query('nile-input')
+], NileAutoComplete.prototype, "inputElement", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileAutoComplete.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileAutoComplete.prototype, "isDropdownOpen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileAutoComplete.prototype, "portal", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileAutoComplete.prototype, "enableVirtualScroll", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileAutoComplete.prototype, "openOnFocus", void 0);
+__decorate([
+    property({ type: String })
+], NileAutoComplete.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], NileAutoComplete.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileAutoComplete.prototype, "noBorder", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileAutoComplete.prototype, "noOutline", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileAutoComplete.prototype, "noPadding", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileAutoComplete.prototype, "loading", void 0);
+__decorate([
+    property({ attribute: false })
+], NileAutoComplete.prototype, "filterFunction", void 0);
+__decorate([
+    property({ attribute: false })
+], NileAutoComplete.prototype, "renderItemFunction", void 0);
+__decorate([
+    property({ type: Array })
+], NileAutoComplete.prototype, "allMenuItems", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileAutoComplete.prototype, "enableVisibilityEffect", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileAutoComplete.prototype, "enableTabClose", void 0);
+__decorate([
+    state()
+], NileAutoComplete.prototype, "menuItems", void 0);
+__decorate([
+    watch('portal', { waitUntilFirstUpdate: true })
+], NileAutoComplete.prototype, "handlePortalChange", null);
+NileAutoComplete = __decorate([
+    customElement('nile-auto-complete')
+], NileAutoComplete);
+export { NileAutoComplete };
+export default NileAutoComplete;
+//# sourceMappingURL=nile-auto-complete.js.map

package/dist/src/nile-auto-complete/nile-auto-complete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":";AAAA,OAAO,EAEL,IAAI,EAGJ,OAAO,GACR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAG7D,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAGvE,iDAAiD;AAE1C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QAUL,8BAA8B;QAED,aAAQ,GAAY,KAAK,CAAC;QAE1B,mBAAc,GAAY,KAAK,CAAC;QAE7D;;;WAGG;QACyC,WAAM,GAAG,KAAK,CAAC;QAE1C,kBAAa,GAAG,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAExC,wBAAmB,GAAY,KAAK,CAAC;QAErC,gBAAW,GAAY,KAAK,CAAC;QAE9B,UAAK,GAAW,EAAE,CAAC;QAEnB,gBAAW,GAAW,cAAc,CAAC;QAEpC,aAAQ,GAAY,KAAK,CAAC;QAE1B,cAAS,GAAY,KAAK,CAAC;QAE3B,cAAS,GAAY,KAAK,CAAC;QAE3B,YAAO,GAAY,KAAK,CAAC;QAExB,mBAAc,GAA8C,CAAC,IAAW,EAAC,aAAoB,EAAC,EAAE,CAAA,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,EAAE,CAAC,CAAC;QAEzJ,uBAAkB,GAAuB,CAAC,IAAQ,EAAC,EAAE,CAAA,IAAI,CAAC;QAE7D,iBAAY,GAAQ,EAAE,CAAC;QAEN,2BAAsB,GAAG,KAAK,CAAC;QAE/B,mBAAc,GAAG,KAAK,CAAC;QAG1D,cAAS,GAAQ,EAAE,CAAC;QA8IrB,uBAAkB,GAAG,GAAS,EAAE;YACtC,IAAI,CAAC,aAAa,CAAC,0BAA0B,EAAE,CAAC;QAClD,CAAC,CAAC;QAEM,uBAAkB,GAAG,GAAS,EAAE;YACtC,IAAI,CAAC,aAAa,CAAC,0BAA0B,EAAE,CAAC;QAClD,CAAC,CAAC;IA+IJ,CAAC;IAhSW,KAAK,CAAC,YAAY,CAAC,QAAwB;QACnD,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,IAAI,CAAC,iBAAiB,GAAG,IAAI,iBAAiB,CAAC;YAC7C,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK;YAC/B,sBAAsB,EAAE,IAAI,CAAC,sBAAsB;YACzD,cAAc,EAAE,IAAI,CAAC,cAAc;YAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc;YACjC,iBAAiB,EAAE,GAAG,EAAE;gBACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;gBAC5B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;gBAC7B,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE;oBAClC,OAAO,EAAE,KAAK;oBACd,MAAM,EAAE,oBAAoB;iBAC7B,CAAC,CAAC;YACL,CAAC;YACD,gBAAgB,EAAE,GAAG,EAAE;gBACrB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;gBAC5B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;gBAC7B,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE;oBAClC,OAAO,EAAE,KAAK;oBACd,MAAM,EAAE,iBAAiB;iBAC1B,CAAC,CAAC;YACL,CAAC;YACD,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,EAAE,EAAE,MAAM,CAAC;SAC5D,CAAC,CAAC;IACL,CAAC;IACD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,GAAC,CAAC,IAAQ,EAAC,EAAE,CAAA,IAAI,CAAC;QACzC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnE,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7D,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/D,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,iBAAiB,EAAE,OAAO,EAAE,CAAC;QAClC,IAAI,CAAC,aAAa,CAAC,mBAAmB,EAAE,CAAC;IAC3C,CAAC;IAES,OAAO,CAAC,iBAAiC;QACjD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC,EAAC,CAAC;YACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACzE,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACvC,IAAI,CAAC,aAAa,CAAC,mBAAmB,EAAE,CAAC;YAC3C,CAAC;QACH,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,CAAC;YAC5C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACzE,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAC,CAAC;YAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACzE,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACvC,IAAI,CAAC,aAAa,CAAC,mBAAmB,EAAE,CAAC;YAC7C,CAAC;QACH,CAAC;QACC,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAGD,kBAAkB;QAChB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,aAAa,CAAC,iBAAiB,EAAE,CAAC;YACzC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,CAAC,mBAAmB,EAAE,CAAC;YAC3C,CAAC;QACH,CAAC;IACH,CAAC;IAEO,wBAAwB;QAC9B,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE,CAAC;YAChC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,aAAa,CAAC,iBAAiB,EAAE,CAAC;YACzC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,EAAE,OAAO,EAAE,CAAC;YAClC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,aAAa,CAAC,mBAAmB,EAAE,CAAC;YAC3C,CAAC;QACH,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACjE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAErE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC3D,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;IAEO,mBAAmB;QACzB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACpE,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACxE,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC9D,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;IACtE,CAAC;IAEO,qBAAqB,CAAC,KAAiB;QAC7C,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO;QACjC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACpC,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAChF,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,CAAC,sBAAsB,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAE7I,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW,IAAI,CAAC,eAAe,EAAE,CAAC;YACjD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAEO,uBAAuB,CAAC,KAAiB;QAC/C,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO;QAEjC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACpC,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAChF,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,CAAC,sBAAsB,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAE7I,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW,IAAI,CAAC,eAAe,EAAE,CAAC;YACjD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAUM,MAAM;QACX,MAAM,OAAO,GAAC,IAAI,CAAC,mBAAmB,CAAA,CAAC,CAAA,IAAI,CAAC,qBAAqB,EAAE,CAAA,CAAC,CAAA,IAAI,CAAC,UAAU,EAAE,CAAC;QACtF,OAAO,IAAI,CAAA;0DAC2C,IAAI,CAAC,cAAc;;uBAEtD,IAAI,CAAC,QAAQ;wBACZ,IAAI,CAAC,SAAS;wBACd,IAAI,CAAC,SAAS;sBAChB,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,KAAK;wBACL,IAAI,CAAC,YAAY;mBACtB,IAAI,CAAC,WAAW;mBAChB,IAAI,CAAC,WAAW;;wBAEX,IAAI,CAAC,WAAW;;;YAG5B,IAAI,CAAC,OAAO,CAAA,CAAC,CAAA,IAAI,CAAA,mQAAmQ,CAAA,CAAC,CAAA,OAAO;;UAE9R,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO;YAC1C,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;IAED,qBAAqB;QACnB,OAAO,IAAI,CAAA;0DAC2C,IAAI,CAAC,YAAY,+EAA+E,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;UACnL,UAAU,CAAC;YACX,KAAK,EAAE,IAAI,CAAC,SAAS;YACrB,UAAU,EAAE,CAAC,IAAQ,EAAgB,EAAE,CAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC5E,QAAQ,EAAC,IAAI;SACT,CAAC;;KAEL,CAAA;IACH,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;kDACmC,IAAI,CAAC,YAAY,6DAA6D,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;UACzJ,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAS,EAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;mBAC3D,CAAA;IACjB,CAAC;IAED,qBAAqB,CAAC,IAAS;QAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC5C,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;QAClC,MAAM,iBAAiB,GACrB,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,KAAK,MAAM,CAAC,CAAC;QAEnE,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACvB,OAAO,IAAI,CAAA;gCACe,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC;OACnD,CAAC;QACJ,CAAC;QAED,IAAI,cAAc,GAAkB,IAAI,CAAC;QAEzC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;QACrC,IAAI,OAAO,YAAY,OAAO,EAAE,CAAC;YAC/B,cAAc,GAAG,YAAY,CAAC;YAC9B,OAAO,CAAC,IAAI,CAAC,CAAC,QAAgB,EAAE,EAAE;gBAChC,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,QAAQ,CAAC;gBAChC,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,cAAc,GAAG,OAAO,CAAC;QAC3B,CAAC;QAED,OAAO,IAAI,CAAA;8BACe,KAAK;gDACa,cAAc;yCACrB,UAAU,CAAC,KAAK,CAAC;;;KAGrD,CAAC;IACJ,CAAC;IAED,YAAY,CAAC,KAAkB;QAC7B,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,mBAAmB;QACzB,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS;aACnC,MAAM,CAAC,CAAC,GAAW,EAAE,IAAS,EAAE,EAAE;YACjC,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,MAAM,CAAA;YACvD,OAAO,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,CAAA;QAC5C,CAAC,EAAE,CAAC,CAAC,CAAA;QACP,MAAM,WAAW,GAAG,GAAG,CAAC;QACxB,MAAM,eAAe,GAAG,GAAG,CAAC;QAC5B,MAAM,SAAS,GAAG,eAAe,GAAG,eAAe,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,GAAG,eAAe,CAAC;QACpH,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,SAAS,GAAG,IAAI,CAAC,CAAC;IAC/E,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QAE9C,8CAA8C;QAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAEzE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;QAChD,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;YAC7B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,aAAa,CAAC,mBAAmB,EAAE,CAAC;YAC3C,CAAC;QACH,CAAC;IACH,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QAED,IAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YACf,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,CAAC;QAC7B,CAAC;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;IAED,WAAW,CAAI,IAAS,EAAE,QAAkD;QAC1E,IAAG,OAAM,CAAC,IAAI,CAAC,KAAG,QAAQ;YAAE,OAAO,EAAE,CAAA;QACrC,MAAM,GAAG,GAAK,EAAE,CAAA;QAChB,IAAI,CAAC,OAAO,CAAE,EAAE,CAAA,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAE,CAAA;QAC5D,OAAO,GAAG,CAAA;IACZ,CAAC;;AAlVM,uBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAIf;IAAvB,KAAK,CAAC,eAAe,CAAC;yDAA+B;AAEjC;IAApB,KAAK,CAAC,YAAY,CAAC;sDAAyB;AAIhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAA2B;AAE1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDAAiC;AAMjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAgB;AAI9B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6DAAsC;AAErC;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;AAE1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAA4B;AAE3B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAA4B;AAE3B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAA0B;AAExB;IAA7B,QAAQ,CAAC,EAAE,SAAS,EAAC,KAAK,EAAC,CAAC;wDAA0J;AAEzJ;IAA7B,QAAQ,CAAC,EAAE,SAAS,EAAC,KAAK,EAAC,CAAC;4DAA2D;AAE7D;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sDAAwB;AAEN;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gEAAgC;AAE/B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDAAwB;AAG1D;IAAR,KAAK,EAAE;mDAAqB;AAwE7B;IADC,KAAK,CAAC,QAAQ,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;0DAS/C;AAnIU,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAsV5B;;AAED,eAAe,gBAAgB,CAAC","sourcesContent":["import {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\nimport { watch } from '../internal/watch';\nimport { AutoCompletePortalManager } from './portal-manager';\nimport { NileInput } from '../nile-input';\n\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { VisibilityManager } from '../utilities/visibility-manager.js';\n\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n  static styles: CSSResultGroup = styles;\n  private visibilityManager?: VisibilityManager;\n\n\n  @query('nile-dropdown') dropdownElement: NileDropdown;\n\n  @query('nile-input') inputElement: NileInput;\n\n  // Define component properties\n\n  @property({ type: Boolean }) disabled: boolean = false;\n\n  @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n  /** \n   * When true, the dropdown menu will be appended to the document body instead of the parent container.\n   * This is useful when the parent has overflow: hidden, clip-path, or transform applied.\n   */\n  @property({ type: Boolean, reflect: true }) portal = false;\n\n  private readonly portalManager = new AutoCompletePortalManager(this);\n\n  @property({ type: Boolean }) enableVirtualScroll: 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  @property({ type: Boolean }) noOutline: boolean = false;\n\n  @property({ type: Boolean }) noPadding: boolean = false;\n\n  @property({ type: Boolean }) loading: boolean = false;\n\n  @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n  @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n  @property({ type: Array }) allMenuItems: any = [];\n\n  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;\n\n  @property({ type: Boolean, reflect: true }) enableTabClose = false;\n\n\n  @state() menuItems: any = [];\n\n\n  protected async firstUpdated(_changed: PropertyValues) {\n    await this.updateComplete;\n\n    this.visibilityManager = new VisibilityManager({\n      host: this,\n      target: this.inputElement.input,                \n      enableVisibilityEffect: this.enableVisibilityEffect,\nenableTabClose: this.enableTabClose,\n      isOpen: () => this.isDropdownOpen,\n      onAnchorOutOfView: () => {\n        this.isDropdownOpen = false;\n        this.dropdownElement?.hide();\n        this.emit('nile-visibility-change', {\n          visible: false,\n          reason: 'anchor-out-of-view',\n        });\n      },\n      onDocumentHidden: () => {\n        this.isDropdownOpen = false;\n        this.dropdownElement?.hide();\n        this.emit('nile-visibility-change', {\n          visible: false,\n          reason: 'document-hidden',\n        });\n      },\n      emit: (event, detail) => this.emit(`nile-${event}`, detail),\n    });\n  }\n  connectedCallback() {\n    super.connectedCallback();\n    this.renderItemFunction=(item:any)=>item;\n    this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n    this.handleWindowResize = this.handleWindowResize.bind(this);\n    this.handleWindowScroll = this.handleWindowScroll.bind(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeOpenListeners();\n    this.visibilityManager?.cleanup();\n    this.portalManager.cleanupPortalAppend();\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('allMenuItems')){\n      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n      this.setVirtualMenuWidth();\n      if (this.portal && this.isDropdownOpen) {\n        this.portalManager.updatePortalOptions();\n      }\n    }\n    if (changedProperties.has('isDropdownOpen')) {\n      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n      this.handleDropdownOpenChange();\n    }\n    if (changedProperties.has('value')){\n      this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n      if (this.portal && this.isDropdownOpen) {\n        this.portalManager.updatePortalOptions();\n    }\n  }\n    if (changedProperties.has('portal')) {\n      this.handlePortalChange();\n    }\n  }\n\n  @watch('portal', { waitUntilFirstUpdate: true })\n  handlePortalChange(): void {\n    if (this.isDropdownOpen) {\n      if (this.portal) {\n        this.portalManager.setupPortalAppend();\n      } else {\n        this.portalManager.cleanupPortalAppend();\n      }\n    }\n  }\n\n  private handleDropdownOpenChange(): void {\n    if (this.isDropdownOpen) {\n      this.addOpenListeners();\n      this.visibilityManager?.setup();\n      if (this.portal) {\n        this.portalManager.setupPortalAppend();\n      }\n    } else {\n      this.removeOpenListeners();\n      this.visibilityManager?.cleanup();\n      if (this.portal) {\n        this.portalManager.cleanupPortalAppend();\n      }\n    }\n  }\n\n  private addOpenListeners(): void {\n    document.addEventListener('focusin', this.handleDocumentFocusIn);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    \n    if (this.portal) {\n      window.addEventListener('resize', this.handleWindowResize);\n      window.addEventListener('scroll', this.handleWindowScroll, true);\n    }\n  }\n\n  private removeOpenListeners(): void {\n    document.removeEventListener('focusin', this.handleDocumentFocusIn);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    window.removeEventListener('resize', this.handleWindowResize);\n    window.removeEventListener('scroll', this.handleWindowScroll, true);\n  }\n\n  private handleDocumentFocusIn(event: FocusEvent) {\n    if (!this.isDropdownOpen) return;\n    const path = event.composedPath();\n    const hitSelf = path.includes(this);\n    const hitDropdown = this.dropdownElement && path.includes(this.dropdownElement);\n    const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);\n\n    if (!hitSelf && !hitDropdown && !hitPortalAppend) {\n      this.isDropdownOpen = false;\n      this.dropdownElement?.hide();\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    if (!this.isDropdownOpen) return;\n  \n    const path = event.composedPath();\n    const hitSelf = path.includes(this);\n    const hitDropdown = this.dropdownElement && path.includes(this.dropdownElement);\n    const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);\n  \n    if (!hitSelf && !hitDropdown && !hitPortalAppend) {\n      this.isDropdownOpen = false;\n      this.dropdownElement?.hide();\n    }\n  }\n\n  private handleWindowResize = (): void => {\n    this.portalManager.updatePortalAppendPosition();\n  };\n\n  private handleWindowScroll = (): void => {\n    this.portalManager.updatePortalAppendPosition();\n  };\n\n  public render(): TemplateResult {\n    const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n    return html`\n      <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick exportparts=\"input, base\">\n        <nile-input class=\"nile-auto-complete--input\"\n          ?no-border=${this.noBorder}\n          ?no-outline=${this.noOutline}\n          ?no-padding=${this.noPadding}\n          .disabled=${this.disabled}\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          exportparts=\"input, base\"\n        >\n          ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"var(--nile-icon-button-loading-blue-animated, var(--ng-icon-button-loading-blue-animated))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" library=\"system\"></nile-icon>`:nothing}\n        </nile-input>\n        ${this.menuItems.length > 0 && !this.loading\n          ? content\n          : nothing}\n      </nile-dropdown>\n    `;\n  }  \n  \n  getVirtualizedContent():TemplateResult{\n    return html`\n      <nile-menu class=\"virtualized__menu\" @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\" style=${this.portal ? 'display: none;' : ''}>\n        ${virtualize({\n          items: this.menuItems,\n          renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),\n\t\t\t\t\tscroller:true\n        })}\n      </nile-menu>\n    `\n  }\n\n  getContent():TemplateResult{\n    return html`\n      <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\" style=${this.portal ? 'display: none;' : ''}>\n        ${this.menuItems.map((item: any)  => this.getItemRenderFunction(item))}\n      </nile-menu>`\n  }\n\n  getItemRenderFunction(item: any): TemplateResult {\n    const value = this.renderItemFunction(item);\n    const hasTooltip = !!item.tooltip;\n    const shouldShowTooltip =\n      hasTooltip && (!item.tooltip.for || item.tooltip.for === 'menu');\n  \n    if (!shouldShowTooltip) {\n      return html`\n        <nile-menu-item value=${value}>${unsafeHTML(value)}</nile-menu-item>\n      `;\n    }\n  \n    let tooltipContent: string | null = null;\n  \n    const content = item.tooltip.content;\n    if (content instanceof Promise) {\n      tooltipContent = 'Loading...'; \n      content.then((resolved: string) => {\n        item.tooltip.content = resolved;\n        this.requestUpdate();  \n      });\n    } else {\n      tooltipContent = content;\n    }\n  \n    return html`\n      <nile-menu-item value=${value}>\n        <nile-lite-tooltip allowHTML .content=${tooltipContent}>\n          <span class=\"menu-item-text\">${unsafeHTML(value)}</span>\n        </nile-lite-tooltip>\n      </nile-menu-item>\n    `;\n  }\n\n  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 setVirtualMenuWidth() {\n    const maxLengthOption = this.menuItems\n      .reduce((acc: number, curr: any) => {\n        const currLength = this.renderItemFunction(curr).length\n        return acc > currLength ? acc : currLength\n      }, 0)\n    const defaultWith = 110;\n    const pixelMultiplier = 9.5;\n    const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;\n    this.style.setProperty(\"--virtual-scroll-container-width\", menuWidth + \"px\");\n  }\n\n  private handleSearch(event: CustomEvent) {\n    this.value = event.detail.value.toLowerCase();\n\n    // Filter menu items based on the search value\n    this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n    this.isDropdownOpen = this.menuItems.length > 0;\n    if (this.isDropdownOpen) {\n      this.dropdownElement?.show();\n      if (this.portal) {\n        this.portalManager.updatePortalOptions();\n      }\n    }\n  }\n\n  public handleFocus() {\n    if (!this.openOnFocus) {\n      return;\n    }\n\n    if(this.portal) {\n      this.inputElement?.focus();\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  applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n    if(typeof(list)!=='object') return []\n    const res:T[]=[]\n    list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n    return res\n  }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-auto-complete': NileAutoComplete;\n  }\n}\n"]}

package/dist/src/nile-auto-complete/nile-auto-complete.test.js

@@ -0,0 +1,116 @@
+import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
+import './nile-auto-complete';
+import { NileAutoComplete } from './nile-auto-complete';
+const wait = (ms = 50000) => new Promise(resolve => setTimeout(resolve, ms));
+describe('NileAutoComplete', () => {
+    it('should render correctly', async () => {
+        const el = await fixture(html `<nile-auto-complete></nile-auto-complete>`);
+        expect(el).to.be.instanceOf(NileAutoComplete);
+        expect(el.shadowRoot).not.to.be.null;
+    });
+    it('should have an empty value and dropdown closed by default', async () => {
+        const el = await fixture(html `<nile-auto-complete></nile-auto-complete>`);
+        expect(el.value).to.equal('');
+        expect(el.isDropdownOpen).to.be.false;
+    });
+    // it('should open the dropdown when input is focused and openOnFocus is true', async () => {
+    //   const el = await fixture<NileAutoComplete>(html`<nile-auto-complete openOnFocus></nile-auto-complete>`);
+    //   // Focus the input
+    //   const input = el.shadowRoot?.querySelector('nile-input');
+    //   input?.dispatchEvent(new Event('focus'));
+    // 	await wait()
+    //   await elementUpdated(el);
+    //   expect(el.isDropdownOpen).to.be.true;
+    // });
+    // it('should filter menu items based on the input value', async () => {
+    //   const el = await fixture<NileAutoComplete>(html`
+    //     <nile-auto-complete .allMenuItems=${['Apple', 'Banana', 'Cherry']}></nile-auto-complete>
+    //   `);
+    //   // Simulate typing in the input
+    //   const input = el.shadowRoot?.querySelector('nile-input');
+    //   input?.dispatchEvent(new CustomEvent('nile-input', { detail: { value: 'Ap' } }));
+    //   await elementUpdated(el);
+    //   expect(el.menuItems).to.deep.equal(['Apple']);
+    // });
+    it('should close the dropdown if no items match the search', async () => {
+        const el = await fixture(html `
+      <nile-auto-complete .allMenuItems=${['Apple', 'Banana', 'Cherry']}></nile-auto-complete>
+    `);
+        // Simulate typing in the input with a non-matching value
+        const input = el.shadowRoot?.querySelector('nile-input');
+        input?.dispatchEvent(new CustomEvent('nile-input', { detail: { value: 'Orange' } }));
+        await elementUpdated(el);
+        expect(el.menuItems).to.deep.equal([]);
+        expect(el.isDropdownOpen).to.be.false;
+    });
+    // it('should select an item from the menu', async () => {
+    //   const el = await fixture<NileAutoComplete>(html`
+    //     <nile-auto-complete .allMenuItems=${['Apple', 'Banana', 'Cherry']}></nile-auto-complete>
+    //   `);
+    //   // Simulate typing in the input
+    //   const input = el.shadowRoot?.querySelector('nile-input');
+    //   input?.dispatchEvent(new CustomEvent('nile-input', { detail: { value: 'Ban' } }));
+    //   await elementUpdated(el);
+    //   const menuItem = el.shadowRoot?.querySelector('nile-menu-item[value="Banana"]');
+    //   expect(menuItem).to.exist;
+    //   // Select the menu item
+    //   const selectEvent = new CustomEvent('nile-select', { detail: { value: 'Banana' } });
+    //   menuItem?.dispatchEvent(selectEvent);
+    //   await elementUpdated(el);
+    //   expect(el.value).to.equal('Banana');
+    //   expect(el.isDropdownOpen).to.be.false;
+    // });
+    // it('should emit nile-complete event when an item is selected', async () => {
+    //   const el = await fixture<NileAutoComplete>(html`
+    //     <nile-auto-complete .allMenuItems=${['Apple', 'Banana', 'Cherry']}></nile-auto-complete>
+    //   `);
+    //   // Simulate typing in the input
+    //   const input = el.shadowRoot?.querySelector('nile-input');
+    //   input?.dispatchEvent(new CustomEvent('nile-input', { detail: { value: 'App' } }));
+    //   await elementUpdated(el);
+    //   // Wait for the selection event
+    //   const selectEvent = oneEvent(el, 'nile-complete');
+    //   // Select an item
+    //   const menuItem = el.shadowRoot?.querySelector('nile-menu-item[value="Apple"]');
+    //   const event = new CustomEvent('nile-select', { detail: { value: 'Apple' } });
+    //   menuItem?.dispatchEvent(event);
+    //   const { detail } = await selectEvent;
+    //   expect(detail.value).to.equal('Apple');
+    // });
+    it('should apply the placeholder text to the input', async () => {
+        const el = await fixture(html `
+      <nile-auto-complete placeholder="Search items..."></nile-auto-complete>
+    `);
+        const input = el.shadowRoot?.querySelector('nile-input');
+        expect(input?.getAttribute('placeholder')).to.equal('Search items...');
+    });
+    it('should toggle border visibility based on the noBorder property', async () => {
+        const el = await fixture(html `
+      <nile-auto-complete noBorder></nile-auto-complete>
+    `);
+        const input = el.shadowRoot?.querySelector('nile-input');
+        expect(input?.hasAttribute('no-border')).to.be.true;
+        el.noBorder = false;
+        await elementUpdated(el);
+        expect(input?.hasAttribute('no-border')).to.be.false;
+    });
+    it('should handle an empty list of menu items', async () => {
+        const el = await fixture(html `<nile-auto-complete .allMenuItems=${[]}></nile-auto-complete>`);
+        const input = el.shadowRoot?.querySelector('nile-input');
+        input?.dispatchEvent(new CustomEvent('nile-input', { detail: { value: 'test' } }));
+        await elementUpdated(el);
+        expect(el.menuItems.length).to.equal(0);
+        expect(el.isDropdownOpen).to.be.false;
+    });
+    it('should hide the dropdown when no results are found', async () => {
+        const el = await fixture(html `
+      <nile-auto-complete .allMenuItems=${['Apple', 'Banana', 'Cherry']}></nile-auto-complete>
+    `);
+        const input = el.shadowRoot?.querySelector('nile-input');
+        input?.dispatchEvent(new CustomEvent('nile-input', { detail: { value: 'NonMatchingValue' } }));
+        await elementUpdated(el);
+        expect(el.isDropdownOpen).to.be.false;
+        expect(el.menuItems.length).to.equal(0);
+    });
+});
+//# sourceMappingURL=nile-auto-complete.test.js.map

package/dist/src/nile-auto-complete/nile-auto-complete.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-auto-complete.test.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testing';\nimport './nile-auto-complete';\nimport { NileAutoComplete } from './nile-auto-complete';\n\nconst wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))\n\ndescribe('NileAutoComplete', () => {\n  it('should render correctly', async () => {\n    const el = await fixture<NileAutoComplete>(html`<nile-auto-complete></nile-auto-complete>`);\n    expect(el).to.be.instanceOf(NileAutoComplete);\n    expect(el.shadowRoot).not.to.be.null;\n  });\n\n  it('should have an empty value and dropdown closed by default', async () => {\n    const el = await fixture<NileAutoComplete>(html`<nile-auto-complete></nile-auto-complete>`);\n    expect(el.value).to.equal('');\n    expect(el.isDropdownOpen).to.be.false;\n  });\n\n  // it('should open the dropdown when input is focused and openOnFocus is true', async () => {\n  //   const el = await fixture<NileAutoComplete>(html`<nile-auto-complete openOnFocus></nile-auto-complete>`);\n\n  //   // Focus the input\n  //   const input = el.shadowRoot?.querySelector('nile-input');\n  //   input?.dispatchEvent(new Event('focus'));\n\t// \tawait wait()\n  //   await elementUpdated(el);\n\n  //   expect(el.isDropdownOpen).to.be.true;\n  // });\n\n  // it('should filter menu items based on the input value', async () => {\n  //   const el = await fixture<NileAutoComplete>(html`\n  //     <nile-auto-complete .allMenuItems=${['Apple', 'Banana', 'Cherry']}></nile-auto-complete>\n  //   `);\n\n  //   // Simulate typing in the input\n  //   const input = el.shadowRoot?.querySelector('nile-input');\n  //   input?.dispatchEvent(new CustomEvent('nile-input', { detail: { value: 'Ap' } }));\n  //   await elementUpdated(el);\n\n  //   expect(el.menuItems).to.deep.equal(['Apple']);\n  // });\n\n  it('should close the dropdown if no items match the search', async () => {\n    const el = await fixture<NileAutoComplete>(html`\n      <nile-auto-complete .allMenuItems=${['Apple', 'Banana', 'Cherry']}></nile-auto-complete>\n    `);\n\n    // Simulate typing in the input with a non-matching value\n    const input = el.shadowRoot?.querySelector('nile-input');\n    input?.dispatchEvent(new CustomEvent('nile-input', { detail: { value: 'Orange' } }));\n    await elementUpdated(el);\n\n    expect(el.menuItems).to.deep.equal([]);\n    expect(el.isDropdownOpen).to.be.false;\n  });\n\n  // it('should select an item from the menu', async () => {\n  //   const el = await fixture<NileAutoComplete>(html`\n  //     <nile-auto-complete .allMenuItems=${['Apple', 'Banana', 'Cherry']}></nile-auto-complete>\n  //   `);\n\n  //   // Simulate typing in the input\n  //   const input = el.shadowRoot?.querySelector('nile-input');\n  //   input?.dispatchEvent(new CustomEvent('nile-input', { detail: { value: 'Ban' } }));\n  //   await elementUpdated(el);\n\n  //   const menuItem = el.shadowRoot?.querySelector('nile-menu-item[value=\"Banana\"]');\n  //   expect(menuItem).to.exist;\n\n  //   // Select the menu item\n  //   const selectEvent = new CustomEvent('nile-select', { detail: { value: 'Banana' } });\n  //   menuItem?.dispatchEvent(selectEvent);\n  //   await elementUpdated(el);\n\n  //   expect(el.value).to.equal('Banana');\n  //   expect(el.isDropdownOpen).to.be.false;\n  // });\n\n  // it('should emit nile-complete event when an item is selected', async () => {\n  //   const el = await fixture<NileAutoComplete>(html`\n  //     <nile-auto-complete .allMenuItems=${['Apple', 'Banana', 'Cherry']}></nile-auto-complete>\n  //   `);\n\n  //   // Simulate typing in the input\n  //   const input = el.shadowRoot?.querySelector('nile-input');\n  //   input?.dispatchEvent(new CustomEvent('nile-input', { detail: { value: 'App' } }));\n  //   await elementUpdated(el);\n\n  //   // Wait for the selection event\n  //   const selectEvent = oneEvent(el, 'nile-complete');\n\n  //   // Select an item\n  //   const menuItem = el.shadowRoot?.querySelector('nile-menu-item[value=\"Apple\"]');\n  //   const event = new CustomEvent('nile-select', { detail: { value: 'Apple' } });\n  //   menuItem?.dispatchEvent(event);\n\n  //   const { detail } = await selectEvent;\n  //   expect(detail.value).to.equal('Apple');\n  // });\n\n  it('should apply the placeholder text to the input', async () => {\n    const el = await fixture<NileAutoComplete>(html`\n      <nile-auto-complete placeholder=\"Search items...\"></nile-auto-complete>\n    `);\n\n    const input = el.shadowRoot?.querySelector('nile-input');\n    expect(input?.getAttribute('placeholder')).to.equal('Search items...');\n  });\n\n  it('should toggle border visibility based on the noBorder property', async () => {\n    const el = await fixture<NileAutoComplete>(html`\n      <nile-auto-complete noBorder></nile-auto-complete>\n    `);\n\n    const input = el.shadowRoot?.querySelector('nile-input');\n    expect(input?.hasAttribute('no-border')).to.be.true;\n\n    el.noBorder = false;\n    await elementUpdated(el);\n\n    expect(input?.hasAttribute('no-border')).to.be.false;\n  });\n\n  it('should handle an empty list of menu items', async () => {\n    const el = await fixture<NileAutoComplete>(html`<nile-auto-complete .allMenuItems=${[]}></nile-auto-complete>`);\n\n    const input = el.shadowRoot?.querySelector('nile-input');\n    input?.dispatchEvent(new CustomEvent('nile-input', { detail: { value: 'test' } }));\n    await elementUpdated(el);\n\n    expect(el.menuItems.length).to.equal(0);\n    expect(el.isDropdownOpen).to.be.false;\n  });\n\n  it('should hide the dropdown when no results are found', async () => {\n    const el = await fixture<NileAutoComplete>(html`\n      <nile-auto-complete .allMenuItems=${['Apple', 'Banana', 'Cherry']}></nile-auto-complete>\n    `);\n\n    const input = el.shadowRoot?.querySelector('nile-input');\n    input?.dispatchEvent(new CustomEvent('nile-input', { detail: { value: 'NonMatchingValue' } }));\n    await elementUpdated(el);\n\n    expect(el.isDropdownOpen).to.be.false;\n    expect(el.menuItems.length).to.equal(0);\n  });\n});\n"]}