import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";import{query as s,property as n,state as o,customElement as h}from"lit/decorators.js";import{s as l}from"./nile-auto-complete.css.esm.js";import{N as r}from"../internal/nile-element.esm.js";import{w as a}from"../internal/watch.esm.js";import{A as p}from"./portal-manager.esm.js";import{v as d}from"../virtualize-a4a40d96.esm.js";import{unsafeHTML as m}from"lit/directives/unsafe-html.js";import{V as u}from"../utilities/visibility-manager.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";import"../floating-ui.dom-cc9126da.esm.js";import"./portal-utils.esm.js";import"../lit-html-39a6718c.esm.js";import"lit/directive.js";import"lit/async-directive.js";import"lit/directives/repeat.js";let c=class extends r{constructor(){super(...arguments),this.disabled=!1,this.isDropdownOpen=!1,this.portal=!1,this.portalManager=new p(this),this.enableVirtualScroll=!1,this.openOnFocus=!1,this.value="",this.placeholder="Type here ..",this.noBorder=!1,this.noOutline=!1,this.noPadding=!1,this.loading=!1,this.filterFunction=(t,i)=>t.toLowerCase().includes(i.toLowerCase()),this.renderItemFunction=t=>t,this.allMenuItems=[],this.enableVisibilityEffect=!1,this.enableTabClose=!1,this.noDropdownClose=!1,this.label="",this.menuItems=[],this.handleWindowResize=()=>{this.portalManager.updatePortalAppendPosition()},this.handleWindowScroll=()=>{this.portalManager.updatePortalAppendPosition()}}async firstUpdated(t){await this.updateComplete,this.visibilityManager=new u({host:this,target:this.inputElement.input,enableVisibilityEffect:this.enableVisibilityEffect,enableTabClose:this.enableTabClose,isOpen:()=>this.isDropdownOpen,onAnchorOutOfView:()=>{this.isDropdownOpen=!1,this.dropdownElement?.hide(),this.emit("nile-visibility-change",{visible:!1,reason:"anchor-out-of-view"})},onDocumentHidden:()=>{this.isDropdownOpen=!1,this.dropdownElement?.hide(),this.emit("nile-visibility-change",{visible:!1,reason:"document-hidden"})},emit:(t,i)=>this.emit(`nile-${t}`,i)})}connectedCallback(){super.connectedCallback(),this.renderItemFunction=t=>t,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(t){super.updated(t),t.has("allMenuItems")&&(this.menuItems=this.applyFilter(this.allMenuItems,this.filterFunction),this.setVirtualMenuWidth(),this.portal&&this.isDropdownOpen&&this.portalManager.updatePortalOptions()),t.has("isDropdownOpen")&&(this.menuItems=this.applyFilter(this.allMenuItems,this.filterFunction),this.handleDropdownOpenChange()),t.has("value")&&(this.menuItems=this.applyFilter(this.allMenuItems,this.filterFunction),this.portal&&this.isDropdownOpen&&this.portalManager.updatePortalOptions()),t.has("portal")&&this.handlePortalChange()}handlePortalChange(){this.isDropdownOpen&&(this.portal?this.portalManager.setupPortalAppend():this.portalManager.cleanupPortalAppend())}handleDropdownOpenChange(){this.isDropdownOpen?(this.addOpenListeners(),this.visibilityManager?.setup(),this.portal&&this.portalManager.setupPortalAppend()):(this.removeOpenListeners(),this.visibilityManager?.cleanup(),this.portal&&this.portalManager.cleanupPortalAppend())}addOpenListeners(){document.addEventListener("focusin",this.handleDocumentFocusIn),document.addEventListener("mousedown",this.handleDocumentMouseDown),this.portal&&(window.addEventListener("resize",this.handleWindowResize),window.addEventListener("scroll",this.handleWindowScroll,!0))}removeOpenListeners(){document.removeEventListener("focusin",this.handleDocumentFocusIn),document.removeEventListener("mousedown",this.handleDocumentMouseDown),window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("scroll",this.handleWindowScroll,!0)}handleDocumentFocusIn(t){if(!this.isDropdownOpen)return;const i=t.composedPath(),e=i.includes(this),s=this.dropdownElement&&i.includes(this.dropdownElement),n=this.portal&&this.portalManager.portalContainerElement&&i.includes(this.portalManager.portalContainerElement);e||s||n||(this.isDropdownOpen=!1,this.dropdownElement?.hide())}handleDocumentMouseDown(t){if(!this.isDropdownOpen)return;const i=t.composedPath(),e=i.includes(this),s=this.dropdownElement&&i.includes(this.dropdownElement),n=this.portal&&this.portalManager.portalContainerElement&&i.includes(this.portalManager.portalContainerElement);e||s||n||(this.isDropdownOpen=!1,this.dropdownElement?.hide())}render(){const t=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();return i`
    ${this.label?i`
      <label class="nile-auto-complete__label">${this.label}</label>
    `:e}
      <nile-dropdown ?disabled=${this.disabled} class="nile-dropdown--input" ?open=${this.isDropdownOpen} ?stay-open-on-select=${this.noDropdownClose} 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?i`<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>`:e}
        </nile-input>
        ${this.menuItems.length>0&&!this.loading?t:e}
      </nile-dropdown>
    `}getVirtualizedContent(){return i`
      <nile-menu class="virtualized__menu" @nile-select=${this.handleSelect} id="content-menu" exportparts="menu__items-wrapper:options__wrapper" style=${this.portal?"display: none;":""}>
        ${d({items:this.menuItems,renderItem:t=>this.getItemRenderFunction(t),scroller:!0})}
      </nile-menu>
    `}getContent(){return i`
      <nile-menu id="content-menu" @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper" style=${this.portal?"display: none;":""}>
        ${this.menuItems.map((t=>this.getItemRenderFunction(t)))}
      </nile-menu>`}getItemRenderFunction(t){const e=this.renderItemFunction(t);let s="";(e||"number"==typeof e)&&(s=e.toString());if(!(!!t.tooltip&&(!t.tooltip.for||"menu"===t.tooltip.for)))return i`
        <nile-menu-item value=${e}>${m(s)}</nile-menu-item>
      `;let n=null;const o=t.tooltip.content;return o instanceof Promise?(n="Loading...",o.then((i=>{t.tooltip.content=i,this.requestUpdate()}))):n=o,i`
      <nile-menu-item value=${e}>
        <nile-lite-tooltip allowHTML .content=${n??""}>
          <span class="menu-item-text">${m(s)}</span>
        </nile-lite-tooltip>
      </nile-menu-item>
    `}handleSelect(t){this.value=t.detail.value,this.emit("nile-complete",{value:t.detail.value}),this.noDropdownClose?(this.isDropdownOpen=!0,this.dropdownElement?.show()):(this.isDropdownOpen=!1,this.dropdownElement?.hide())}setVirtualMenuWidth(){const t=this.menuItems.reduce(((t,i)=>{const e=this.renderItemFunction(i).length;return t>e?t:e}),0),i=9.5*t<110?110:9.5*t;this.style.setProperty("--virtual-scroll-container-width",i+"px")}handleSearch(t){this.value=t.detail.value,this.menuItems=this.applyFilter(this.allMenuItems,this.filterFunction),this.isDropdownOpen=this.menuItems.length>0,this.isDropdownOpen&&(this.dropdownElement?.show(),this.portal&&this.portalManager.updatePortalOptions())}handleFocus(){this.openOnFocus&&(this.portal&&this.inputElement?.focus(),setTimeout((()=>{this.isDropdownOpen=!0,this.dropdownElement?.show()}),300))}handleClick(){this.isDropdownOpen=!0,this.dropdownElement?.show()}applyFilter(t,i){if("object"!=typeof t)return[];const e=[];return t.forEach((t=>i(t,this.value)&&e.push(t))),e}};c.styles=l,t([s("nile-dropdown")],c.prototype,"dropdownElement",void 0),t([s("nile-input")],c.prototype,"inputElement",void 0),t([n({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),t([n({type:Boolean})],c.prototype,"isDropdownOpen",void 0),t([n({type:Boolean,reflect:!0})],c.prototype,"portal",void 0),t([n({type:Boolean})],c.prototype,"enableVirtualScroll",void 0),t([n({type:Boolean})],c.prototype,"openOnFocus",void 0),t([n({type:String})],c.prototype,"value",void 0),t([n({type:String})],c.prototype,"placeholder",void 0),t([n({type:Boolean})],c.prototype,"noBorder",void 0),t([n({type:Boolean})],c.prototype,"noOutline",void 0),t([n({type:Boolean})],c.prototype,"noPadding",void 0),t([n({type:Boolean})],c.prototype,"loading",void 0),t([n({attribute:!1})],c.prototype,"filterFunction",void 0),t([n({attribute:!1})],c.prototype,"renderItemFunction",void 0),t([n({type:Array})],c.prototype,"allMenuItems",void 0),t([n({type:Boolean,reflect:!0})],c.prototype,"enableVisibilityEffect",void 0),t([n({type:Boolean,reflect:!0})],c.prototype,"enableTabClose",void 0),t([n({type:Boolean,reflect:!0,attribute:!0})],c.prototype,"noDropdownClose",void 0),t([n({type:String})],c.prototype,"label",void 0),t([o()],c.prototype,"menuItems",void 0),t([a("portal",{waitUntilFirstUpdate:!0})],c.prototype,"handlePortalChange",null),c=t([h("nile-auto-complete")],c);export{c as N};
