@aquera/nile-elements 1.3.1-beta-1.0 → 1.3.1-beta-1

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.3.1-beta-1.0",
+  "version": "1.3.1-beta-1",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -220,4 +220,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -16,12 +16,16 @@ import { NileInput } from '../nile-input';
 
 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'
 @customElement('nile-auto-complete')
 export class NileAutoComplete extends NileElement {
 
   static styles: CSSResultGroup = styles;
+  private visibilityManager?: VisibilityManager;
+
 
   @query('nile-dropdown') dropdownElement: NileDropdown;
 
@@ -63,8 +67,42 @@ export class NileAutoComplete extends NileElement {
 
   @property({ type: Array }) allMenuItems: any = [];
 
+  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
+
+  @property({ type: Boolean, reflect: true }) enableTabClose = false;
+
+
   @state() menuItems: any = [];
 
+
+  protected async firstUpdated(_changed: PropertyValues) {
+    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:any)=>item;
@@ -77,6 +115,7 @@ export class NileAutoComplete extends NileElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeOpenListeners();
+    this.visibilityManager?.cleanup();
     this.portalManager.cleanupPortalAppend();
   }
 
@@ -118,11 +157,13 @@ export class NileAutoComplete extends NileElement {
   private handleDropdownOpenChange(): void {
     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();
       }