otimus-library 0.3.46 → 0.3.47

package/fesm2022/otimus-library.mjs

@@ -1020,6 +1020,7 @@ class OcAutocompleteComponent {
         this.inputWidth = 'auto';
         this.overlayRef = null;
         this.dropdownComponentRef = null;
+        this.clickOutListener = null;
     }
     set ocData(value) {
         this._ocData = value;
@@ -1129,18 +1130,25 @@ class OcAutocompleteComponent {
         }, 50);
     }
     closeOnClickOut() {
-        this.renderer.listen('window', 'click', (e) => {
-            const target = e.target;
-            const insideCounterSelect = this.ocType === 'counterSelect' && target.closest('.oc-counter-select');
-            const insideDropdown = target.closest('.oc-autocomplete-dropdown-container');
-            if (this.input && !insideCounterSelect && !insideDropdown) {
-                if (target !== this.input.nativeElement && this.isOptionsShown) {
-                    this.isOptionsShown = false;
-                    this.closeOverlay();
-                    this.findByTyping();
+        if (this.clickOutListener) {
+            this.clickOutListener();
+            this.clickOutListener = null;
+        }
+        setTimeout(() => {
+            this.clickOutListener = this.renderer.listen('window', 'click', (e) => {
+                const target = e.target;
+                const insideCounterSelect = this.ocType === 'counterSelect' && target.closest('.oc-counter-select');
+                const insideDropdown = target.closest('.oc-autocomplete-dropdown-container');
+                const insideInput = this.input?.nativeElement?.contains(target);
+                if (this.input && !insideCounterSelect && !insideDropdown && !insideInput) {
+                    if (target !== this.input.nativeElement && this.isOptionsShown) {
+                        this.isOptionsShown = false;
+                        this.closeOverlay();
+                        this.findByTyping();
+                    }
                 }
-            }
-        });
+            });
+        }, 0);
     }
     findByTyping() {
         if (!this.ocValue || !this.ocValue?.toString().trim().length) {
@@ -1190,6 +1198,16 @@ class OcAutocompleteComponent {
             .normalize('NFD')
             .replace(/[\u0300-\u036f]/g, ''); // Remove marcas diacríticas
     }
+    open() {
+        if (!this.isOptionsShown) {
+            this.toggleOptions();
+        }
+    }
+    close() {
+        if (this.isOptionsShown) {
+            this.toggleOptions();
+        }
+    }
     toggleOptions() {
         this.closeOnClickOut();
         this.updateInputWidth();
@@ -1205,7 +1223,8 @@ class OcAutocompleteComponent {
         if (!this.input)
             return;
         const inputWidth = this.input.nativeElement.offsetWidth;
-        const positionStrategy = this.overlay.position()
+        const positionStrategy = this.overlay
+            .position()
             .flexibleConnectedTo(this.input.nativeElement)
             .withPositions([
             // Primary position: below the input
@@ -1213,15 +1232,15 @@ class OcAutocompleteComponent {
                 originX: 'start',
                 originY: 'bottom',
                 overlayX: 'start',
-                overlayY: 'top'
+                overlayY: 'top',
             },
             // Fallback position: above the input
             {
                 originX: 'start',
                 originY: 'top',
                 overlayX: 'start',
-                overlayY: 'bottom'
-            }
+                overlayY: 'bottom',
+            },
         ])
             .withFlexibleDimensions(false);
         // Create overlay config
@@ -1230,7 +1249,7 @@ class OcAutocompleteComponent {
             width: inputWidth,
             hasBackdrop: true,
             backdropClass: this.ocShowBackdrop ? undefined : 'cdk-overlay-transparent-backdrop',
-            scrollStrategy: this.overlay.scrollStrategies.reposition()
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
         };
         // Create overlay
         this.overlayRef = this.overlay.create(overlayConfig);