@open-rlb/ng-bootstrap 3.1.4 → 3.1.5

package/fesm2022/open-rlb-ng-bootstrap.mjs

@@ -6686,11 +6686,37 @@ function requiredAutocompleteValue() {
     };
 }
 
-class AutocompleteCountryDialCodeComponent extends AbstractAutocompleteComponent {
-    constructor(idService, renderer, control) {
-        super(idService, renderer, control);
+class AutocompleteCountryDialCodeComponent extends AbstractComponent {
+    onDocumentPointerDown(event) {
+        this.handleOutsideEvent(event);
+    }
+    onEscape(event) {
+        if (this.isOpen()) {
+            this.closeDropdown();
+            this.el()?.nativeElement?.blur();
+        }
+    }
+    constructor(idService, hostRef, control) {
+        super(idService, control);
+        this.hostRef = hostRef;
         this.control = control;
+        // State
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+        this.hasSuggestions = computed(() => this.suggestions().length > 0, ...(ngDevMode ? [{ debugName: "hasSuggestions" }] : []));
+        // Inputs
+        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+        this.placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}), alias: 'placeholder' });
+        this.size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.maxHeight = input(200, { ...(ngDevMode ? { debugName: "maxHeight" } : {}), transform: numberAttribute, alias: 'max-height' });
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute, alias: 'loading' });
+        this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : {}), alias: 'id', transform: (v) => v || '' });
         this.enableFlagIcons = input(true, { ...(ngDevMode ? { debugName: "enableFlagIcons" } : {}), transform: booleanAttribute, alias: 'enable-flag-icons' });
+        // View Children
+        this.el = viewChild('field', ...(ngDevMode ? [{ debugName: "el" }] : []));
+        this.dropdown = viewChild('autocomplete', ...(ngDevMode ? [{ debugName: "dropdown" }] : []));
+        this.selected = output();
         this._countries = [
             {
                 text: 'Afghanistan',
@@ -7909,47 +7935,105 @@ class AutocompleteCountryDialCodeComponent extends AbstractAutocompleteComponent
             },
         ];
     }
-    getSuggestions(query) {
-        this.clearDropdown();
-        this.activeIndex.set(-1);
+    update(ev) {
+        if (this.typingTimeout)
+            clearTimeout(this.typingTimeout);
+        this.typingTimeout = setTimeout(() => {
+            if (!this.disabled()) {
+                const t = ev;
+                this.manageSuggestions(t?.value);
+            }
+        }, 200);
+    }
+    onWrite(data) {
+        const field = this.el();
+        if (field && field.nativeElement) {
+            if (typeof data === 'string') {
+                const match = this._countries.find(c => c.value === data);
+                field.nativeElement.value = match ? match.text : data;
+            }
+            else {
+                field.nativeElement.value = data?.text || '';
+            }
+        }
+    }
+    getText(d) {
+        if (!d)
+            return '';
+        if (typeof d === 'string') {
+            const match = this._countries.find(c => c.value === d);
+            return match ? match.text : d;
+        }
+        return d.text;
+    }
+    manageSuggestions(query) {
+        this.suggestions.set([]);
         if (query && query.length > 0) {
             this.openDropdown();
-            const suggestions = this.getCountries().filter(o => {
-                const _c = o;
-                return _c.text.toLowerCase().startsWith(query.toLowerCase());
-            });
-            this.renderAc(suggestions);
+            const rawSuggestions = this.getCountries().filter(c => c.text.toLowerCase().startsWith(query.toLowerCase()));
+            this.suggestions.set(rawSuggestions);
         }
         else {
             this.closeDropdown();
         }
     }
-    getItemText(data) {
-        const valueToFind = typeof data === 'object' ? data?.value : data;
-        const h = this.getCountries().find(c => {
-            if (typeof c === 'object') {
-                const _c = c;
-                return _c.value === valueToFind;
-            }
-            return false;
-        });
-        return typeof h === 'object' ? h.text : typeof data === 'string' ? data : '';
+    selectItem(item, ev) {
+        ev?.stopPropagation();
+        this.selected.emit(item);
+        this.setValue(item);
+        this.closeDropdown();
+    }
+    onEnter(ev) {
+        const t = ev;
+        if (!this.disabled() && t && t.value) {
+            // Try to find exact match by name
+            const match = this._countries.find(c => c.text.toLowerCase() === t.value.toLowerCase());
+            const item = match || { text: t.value, value: t.value };
+            this.setValue(item);
+            this.closeDropdown();
+        }
+    }
+    handleOutsideEvent(event) {
+        if (!this.isOpen())
+            return;
+        const target = event.target;
+        const dropdown = this.dropdown();
+        const path = event.composedPath ? event.composedPath() : [];
+        const clickedInsideHost = this.hostRef?.nativeElement?.contains(target);
+        const clickedInsideDropdown = dropdown?.nativeElement?.contains
+            ? dropdown.nativeElement.contains(target)
+            : false;
+        const clickedInPath = path.length
+            ? path.some(p => p === this.hostRef.nativeElement || (dropdown && p === dropdown.nativeElement))
+            : false;
+        if (!(clickedInsideHost || clickedInsideDropdown || clickedInPath)) {
+            this.closeDropdown();
+        }
+    }
+    openDropdown() {
+        if (this.isOpen())
+            return;
+        this.isOpen.set(true);
+    }
+    closeDropdown() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
     }
     getCountries() {
         if (this.enableFlagIcons()) {
-            return this._countries.map(country => {
-                return {
-                    ...country,
-                    iconClass: `fi fi-${country.data.toLowerCase()}`,
-                };
-            });
+            return this._countries.map(country => ({
+                ...country,
+                // Using 'data' (ISO Code) for flag class
+                iconClass: country.data ? `fi fi-${country.data.toLowerCase()}` : undefined,
+            }));
         }
         else {
             return this._countries;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AutocompleteCountryDialCodeComponent, deps: [{ token: UniqueIdService }, { token: i0.Renderer2 }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AutocompleteCountryDialCodeComponent, isStandalone: false, selector: "rlb-autocomplete-country-dial-code", inputs: { enableFlagIcons: { classPropertyName: "enableFlagIcons", publicName: "enable-flag-icons", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AutocompleteCountryDialCodeComponent, deps: [{ token: UniqueIdService }, { token: i0.ElementRef }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AutocompleteCountryDialCodeComponent, isStandalone: false, selector: "rlb-autocomplete-country-dial-code", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "max-height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, enableFlagIcons: { classPropertyName: "enableFlagIcons", publicName: "enable-flag-icons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown.escape": "onEscape($event)" } }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-content select="[before]"></ng-content>
     <div class="input-group has-validation position-relative">
       <input
@@ -7957,7 +8041,8 @@ class AutocompleteCountryDialCodeComponent extends AbstractAutocompleteComponent
         [id]="id"
         class="form-control"
         type="text"
-        [attr.autocomplete]="'off'"
+        [value]="getText(value)"
+        autocomplete="off"
         [attr.disabled]="disabled() ? true : undefined"
         [attr.readonly]="readonly() ? true : undefined"
         [attr.placeholder]="placeholder()"
@@ -7969,23 +8054,47 @@ class AutocompleteCountryDialCodeComponent extends AbstractAutocompleteComponent
           'is-valid': control?.touched && control?.valid,
         }"
         (input)="update($event.target)"
+        (keyup.enter)="onEnter($event.target)"
       />
       @if (errors() && showError()) {
         <rlb-input-validation [errors]="errors()" />
       }
-      <div
-        #autocomplete
-        [id]="id + '-ac'"
-        class="dropdown-menu overflow-y-auto w-100 position-absolute"
-        aria-labelledby="dropdownMenu"
-        [style.max-height.px]="maxHeight()"
-        style="z-index: 1000; top: 100%;"
-      ></div>
+
+      <!-- Dropdown Logic -->
+      @if (isOpen()) {
+        <div
+          #autocomplete
+          class="dropdown-menu show w-100 position-absolute overflow-y-auto"
+          [style.max-height.px]="maxHeight()"
+          style="z-index: 1000; top: 100%;"
+        >
+          @if (!hasSuggestions()) {
+            <a class="dropdown-item disabled text-center">No suggestions</a>
+          } @else {
+            @for (item of suggestions(); track item.value) {
+              <a
+                class="dropdown-item"
+                (click)="selectItem(item, $event)"
+                style="cursor: pointer"
+              >
+                @if (item.iconClass) {
+                  <i
+                    [class]="item.iconClass"
+                    class="me-2"
+                  ></i>
+                }
+                <!-- Display Country Name and Dial Code -->
+                {{ item.text }} ({{ item.value }})
+              </a>
+            }
+          }
+        </div>
+      }
     </div>
-    @if (loading() || acLoading()) {
+    @if (loading()) {
       <rlb-progress
         [height]="2"
-        [infinite]="loading() || acLoading()"
+        [infinite]="loading()"
         color="primary"
         class="w-100"
       />
@@ -8005,7 +8114,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         [id]="id"
         class="form-control"
         type="text"
-        [attr.autocomplete]="'off'"
+        [value]="getText(value)"
+        autocomplete="off"
         [attr.disabled]="disabled() ? true : undefined"
         [attr.readonly]="readonly() ? true : undefined"
         [attr.placeholder]="placeholder()"
@@ -8017,23 +8127,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           'is-valid': control?.touched && control?.valid,
         }"
         (input)="update($event.target)"
+        (keyup.enter)="onEnter($event.target)"
       />
       @if (errors() && showError()) {
         <rlb-input-validation [errors]="errors()" />
       }
-      <div
-        #autocomplete
-        [id]="id + '-ac'"
-        class="dropdown-menu overflow-y-auto w-100 position-absolute"
-        aria-labelledby="dropdownMenu"
-        [style.max-height.px]="maxHeight()"
-        style="z-index: 1000; top: 100%;"
-      ></div>
+
+      <!-- Dropdown Logic -->
+      @if (isOpen()) {
+        <div
+          #autocomplete
+          class="dropdown-menu show w-100 position-absolute overflow-y-auto"
+          [style.max-height.px]="maxHeight()"
+          style="z-index: 1000; top: 100%;"
+        >
+          @if (!hasSuggestions()) {
+            <a class="dropdown-item disabled text-center">No suggestions</a>
+          } @else {
+            @for (item of suggestions(); track item.value) {
+              <a
+                class="dropdown-item"
+                (click)="selectItem(item, $event)"
+                style="cursor: pointer"
+              >
+                @if (item.iconClass) {
+                  <i
+                    [class]="item.iconClass"
+                    class="me-2"
+                  ></i>
+                }
+                <!-- Display Country Name and Dial Code -->
+                {{ item.text }} ({{ item.value }})
+              </a>
+            }
+          }
+        </div>
+      }
     </div>
-    @if (loading() || acLoading()) {
+    @if (loading()) {
       <rlb-progress
         [height]="2"
-        [infinite]="loading() || acLoading()"
+        [infinite]="loading()"
         color="primary"
         class="w-100"
       />
@@ -8042,20 +8176,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
   `,
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.Renderer2 }, { type: i2$2.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.ElementRef }, { type: i2$2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }], propDecorators: { enableFlagIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-flag-icons", required: false }] }] } });
+                }] }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableFlagIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-flag-icons", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }], onDocumentPointerDown: [{
+                type: HostListener,
+                args: ['document:pointerdown', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
 
-class AutocompleteCountryComponent extends AbstractAutocompleteComponent {
-    constructor(idService, renderer, control) {
-        super(idService, renderer, control);
+class AutocompleteCountryComponent extends AbstractComponent {
+    onDocumentPointerDown(event) {
+        this.handleOutsideEvent(event);
+    }
+    onEscape(event) {
+        if (this.isOpen()) {
+            this.closeDropdown();
+            this.el()?.nativeElement?.blur();
+        }
+    }
+    constructor(idService, hostRef, control) {
+        super(idService, control);
+        this.hostRef = hostRef;
         this.control = control;
-        this.enableFlagIcons = input(false, { ...(ngDevMode ? { debugName: "enableFlagIcons" } : {}), transform: booleanAttribute,
-            alias: 'enable-flag-icons' });
-        this.enableValidation = input(false, { ...(ngDevMode ? { debugName: "enableValidation" } : {}), transform: booleanAttribute,
-            alias: 'enable-validation' });
+        // State
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+        this.hasSuggestions = computed(() => this.suggestions().length > 0, ...(ngDevMode ? [{ debugName: "hasSuggestions" }] : []));
+        // Inputs
+        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+        this.placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}), alias: 'placeholder' });
+        this.size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.maxHeight = input(200, { ...(ngDevMode ? { debugName: "maxHeight" } : {}), transform: numberAttribute, alias: 'max-height' });
+        this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : {}), alias: 'id', transform: (v) => v || '' });
+        // Specific inputs for Country
+        this.enableFlagIcons = input(false, { ...(ngDevMode ? { debugName: "enableFlagIcons" } : {}), transform: booleanAttribute, alias: 'enable-flag-icons' });
+        this.enableValidation = input(false, { ...(ngDevMode ? { debugName: "enableValidation" } : {}), transform: booleanAttribute, alias: 'enable-validation' });
+        // View Children
+        this.el = viewChild('field', ...(ngDevMode ? [{ debugName: "el" }] : []));
+        this.dropdown = viewChild('autocomplete', ...(ngDevMode ? [{ debugName: "dropdown" }] : []));
+        this.selected = output();
         this._countries = [
             { text: 'Afghanistan', value: 'AF' },
             { text: 'Albania', value: 'AL' },
@@ -8257,51 +8421,106 @@ class AutocompleteCountryComponent extends AbstractAutocompleteComponent {
             { text: 'Zimbabwe', value: 'ZW' },
         ];
     }
-    getSuggestions(query) {
-        this.clearDropdown();
-        this.activeIndex.set(-1);
+    update(ev) {
+        if (this.typingTimeout)
+            clearTimeout(this.typingTimeout);
+        this.typingTimeout = setTimeout(() => {
+            if (!this.disabled()) {
+                const t = ev;
+                this.manageSuggestions(t?.value);
+            }
+        }, 200);
+    }
+    onWrite(data) {
+        const field = this.el();
+        if (field && field.nativeElement) {
+            if (typeof data === 'string') {
+                // Try to find the full object to display correct text
+                const match = this._countries.find(c => c.value === data || c.text === data);
+                field.nativeElement.value = match ? match.text : data;
+            }
+            else {
+                field.nativeElement.value = data?.text || '';
+            }
+        }
+    }
+    getText(d) {
+        if (d == null)
+            return '';
+        if (typeof d === 'string') {
+            const match = this._countries.find(c => c.value === d);
+            return match ? match.text : d;
+        }
+        return d?.text;
+    }
+    manageSuggestions(query) {
+        this.suggestions.set([]);
         if (query && query.length > 0) {
             this.openDropdown();
-            const suggestions = this.getCountries().filter((o) => {
-                const _c = o;
-                return _c.text.toLowerCase().startsWith(query.toLowerCase());
-            });
-            this.renderAc(suggestions);
+            const rawSuggestions = this.getCountries().filter(c => c.text.toLowerCase().startsWith(query.toLowerCase()));
+            this.suggestions.set(rawSuggestions);
         }
         else {
             this.closeDropdown();
         }
     }
-    getItemText(data) {
-        const valueToFind = typeof data === 'object' ? data?.value : data;
-        const h = this.getCountries().find((c) => {
-            if (typeof c === 'object') {
-                const _c = c;
-                return _c.value === valueToFind;
-            }
-            return false;
-        });
-        return typeof h === 'object'
-            ? h.text
-            : typeof data === 'string'
-                ? data
-                : '';
+    selectItem(item, ev) {
+        ev?.stopPropagation();
+        this.selected.emit(item);
+        this.setValue(item);
+        this.closeDropdown();
     }
+    onEnter(ev) {
+        const t = ev;
+        if (!this.disabled() && t && t.value) {
+            // Try to find exact match
+            const match = this._countries.find(c => c.text.toLowerCase() === t.value.toLowerCase());
+            const item = match || { text: t.value, value: t.value };
+            this.setValue(item);
+            this.closeDropdown();
+        }
+    }
+    handleOutsideEvent(event) {
+        if (!this.isOpen())
+            return;
+        const target = event.target;
+        const dropdown = this.dropdown();
+        const path = event.composedPath ? event.composedPath() : [];
+        const clickedInsideHost = this.hostRef?.nativeElement?.contains(target);
+        const clickedInsideDropdown = dropdown?.nativeElement?.contains
+            ? dropdown.nativeElement.contains(target)
+            : false;
+        const clickedInPath = path.length
+            ? path.some(p => p === this.hostRef.nativeElement || (dropdown && p === dropdown.nativeElement))
+            : false;
+        if (!(clickedInsideHost || clickedInsideDropdown || clickedInPath)) {
+            this.closeDropdown();
+        }
+    }
+    openDropdown() {
+        if (this.isOpen())
+            return;
+        this.isOpen.set(true);
+    }
+    closeDropdown() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+    }
+    // Data Logic
     getCountries() {
         if (this.enableFlagIcons()) {
-            return this._countries.map((country) => {
-                return {
-                    ...country,
-                    iconClass: `fi fi-${country.value.toLowerCase()}`,
-                };
-            });
+            return this._countries.map(country => ({
+                ...country,
+                iconClass: `fi fi-${country.value.toLowerCase()}`,
+            }));
         }
         else {
             return this._countries;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AutocompleteCountryComponent, deps: [{ token: UniqueIdService }, { token: i0.Renderer2 }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AutocompleteCountryComponent, isStandalone: false, selector: "rlb-autocomplete-country", inputs: { enableFlagIcons: { classPropertyName: "enableFlagIcons", publicName: "enable-flag-icons", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AutocompleteCountryComponent, deps: [{ token: UniqueIdService }, { token: i0.ElementRef }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AutocompleteCountryComponent, isStandalone: false, selector: "rlb-autocomplete-country", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "max-height", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, enableFlagIcons: { classPropertyName: "enableFlagIcons", publicName: "enable-flag-icons", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown.escape": "onEscape($event)" } }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-content select="[before]"></ng-content>
     <div class="input-group has-validation position-relative">
       <input
@@ -8309,7 +8528,8 @@ class AutocompleteCountryComponent extends AbstractAutocompleteComponent {
         [id]="id"
         class="form-control"
         type="text"
-        [attr.autocomplete]="'off'"
+        [value]="getText(value)"
+        autocomplete="off"
         [attr.disabled]="disabled() ? true : undefined"
         [attr.readonly]="readonly() ? true : undefined"
         [attr.placeholder]="placeholder()"
@@ -8317,34 +8537,46 @@ class AutocompleteCountryComponent extends AbstractAutocompleteComponent {
         [class.form-control-sm]="size() === 'small'"
         (blur)="touch()"
         [ngClass]="{
-          'is-invalid':
-            control?.touched && control?.invalid && enableValidation(),
+          'is-invalid': control?.touched && control?.invalid && enableValidation(),
           'is-valid': control?.touched && control?.valid && enableValidation(),
         }"
         (input)="update($event.target)"
+        (keyup.enter)="onEnter($event.target)"
       />
-      @if (errors() && showError()) {
-        <rlb-input-validation [errors]="errors()" />
+
+      <!-- Dropdown Logic -->
+      @if (isOpen()) {
+        <div
+          #autocomplete
+          class="dropdown-menu show w-100 position-absolute overflow-y-auto"
+          [style.max-height.px]="maxHeight()"
+          style="z-index: 1000; top: 100%;"
+        >
+          @if (!hasSuggestions()) {
+            <a class="dropdown-item disabled text-center">No suggestions</a>
+          } @else {
+            @for (item of suggestions(); track item.value) {
+              <a
+                class="dropdown-item"
+                (click)="selectItem(item, $event)"
+                style="cursor: pointer"
+              >
+                <!-- Flag Icon Support -->
+                @if (item.iconClass) {
+                  <i
+                    [class]="item.iconClass"
+                    class="me-2"
+                  ></i>
+                }
+                {{ item.text }}
+              </a>
+            }
+          }
+        </div>
       }
-      <div
-        #autocomplete
-        [id]="id + '-ac'"
-        class="dropdown-menu overflow-y-auto w-100 position-absolute"
-        aria-labelledby="dropdownMenu"
-        [style.max-height.px]="maxHeight()"
-        style="z-index: 1000; top: 100%;"
-      ></div>
     </div>
-    @if (loading() || acLoading()) {
-      <rlb-progress
-        [height]="2"
-        [infinite]="loading() || acLoading()"
-        color="primary"
-        class="w-100"
-      />
-    }
     <ng-content select="[after]"></ng-content>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"], outputs: ["errorsChange"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AutocompleteCountryComponent, decorators: [{
             type: Component,
@@ -8358,7 +8590,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         [id]="id"
         class="form-control"
         type="text"
-        [attr.autocomplete]="'off'"
+        [value]="getText(value)"
+        autocomplete="off"
         [attr.disabled]="disabled() ? true : undefined"
         [attr.readonly]="readonly() ? true : undefined"
         [attr.placeholder]="placeholder()"
@@ -8366,75 +8599,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         [class.form-control-sm]="size() === 'small'"
         (blur)="touch()"
         [ngClass]="{
-          'is-invalid':
-            control?.touched && control?.invalid && enableValidation(),
+          'is-invalid': control?.touched && control?.invalid && enableValidation(),
           'is-valid': control?.touched && control?.valid && enableValidation(),
         }"
         (input)="update($event.target)"
+        (keyup.enter)="onEnter($event.target)"
       />
-      @if (errors() && showError()) {
-        <rlb-input-validation [errors]="errors()" />
+
+      <!-- Dropdown Logic -->
+      @if (isOpen()) {
+        <div
+          #autocomplete
+          class="dropdown-menu show w-100 position-absolute overflow-y-auto"
+          [style.max-height.px]="maxHeight()"
+          style="z-index: 1000; top: 100%;"
+        >
+          @if (!hasSuggestions()) {
+            <a class="dropdown-item disabled text-center">No suggestions</a>
+          } @else {
+            @for (item of suggestions(); track item.value) {
+              <a
+                class="dropdown-item"
+                (click)="selectItem(item, $event)"
+                style="cursor: pointer"
+              >
+                <!-- Flag Icon Support -->
+                @if (item.iconClass) {
+                  <i
+                    [class]="item.iconClass"
+                    class="me-2"
+                  ></i>
+                }
+                {{ item.text }}
+              </a>
+            }
+          }
+        </div>
       }
-      <div
-        #autocomplete
-        [id]="id + '-ac'"
-        class="dropdown-menu overflow-y-auto w-100 position-absolute"
-        aria-labelledby="dropdownMenu"
-        [style.max-height.px]="maxHeight()"
-        style="z-index: 1000; top: 100%;"
-      ></div>
     </div>
-    @if (loading() || acLoading()) {
-      <rlb-progress
-        [height]="2"
-        [infinite]="loading() || acLoading()"
-        color="primary"
-        class="w-100"
-      />
-    }
     <ng-content select="[after]"></ng-content>
   `,
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.Renderer2 }, { type: i2$2.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.ElementRef }, { type: i2$2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }], propDecorators: { enableFlagIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-flag-icons", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }] } });
+                }] }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableFlagIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-flag-icons", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }], onDocumentPointerDown: [{
+                type: HostListener,
+                args: ['document:pointerdown', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
 
-class AutocompleteTimezonesComponent extends AbstractAutocompleteComponent {
-    constructor(idService, renderer, control) {
-        super(idService, renderer, control);
+class AutocompleteTimezonesComponent extends AbstractComponent {
+    onDocumentPointerDown(event) {
+        this.handleOutsideEvent(event);
+    }
+    onEscape(event) {
+        if (this.isOpen()) {
+            this.closeDropdown();
+            this.el()?.nativeElement?.blur();
+        }
+    }
+    constructor(idService, hostRef, control) {
+        super(idService, control);
+        this.hostRef = hostRef;
         this.control = control;
-        this.enableFlagIcons = input(false, { ...(ngDevMode ? { debugName: "enableFlagIcons" } : {}), transform: booleanAttribute,
-            alias: 'enable-flag-icons' });
+        // State
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+        this.hasSuggestions = computed(() => this.suggestions().length > 0, ...(ngDevMode ? [{ debugName: "hasSuggestions" }] : []));
+        // Inputs
+        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+        this.placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}), alias: 'placeholder' });
+        this.size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.maxHeight = input(200, { ...(ngDevMode ? { debugName: "maxHeight" } : {}), transform: numberAttribute, alias: 'max-height' });
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute, alias: 'loading' });
+        this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : {}), alias: 'id', transform: (v) => v || '' });
+        this.enableFlagIcons = input(false, { ...(ngDevMode ? { debugName: "enableFlagIcons" } : {}), transform: booleanAttribute, alias: 'enable-flag-icons' });
+        // View Children
+        this.el = viewChild('field', ...(ngDevMode ? [{ debugName: "el" }] : []));
+        this.dropdown = viewChild('autocomplete', ...(ngDevMode ? [{ debugName: "dropdown" }] : []));
+        this.selected = output();
     }
-    getSuggestions(query) {
-        this.clearDropdown();
-        this.activeIndex.set(-1);
+    update(ev) {
+        if (this.typingTimeout)
+            clearTimeout(this.typingTimeout);
+        this.typingTimeout = setTimeout(() => {
+            if (!this.disabled()) {
+                const t = ev;
+                this.manageSuggestions(t?.value);
+            }
+        }, 200);
+    }
+    onWrite(data) {
+        const field = this.el();
+        if (field && field.nativeElement) {
+            // Timezones are simple strings, so we just set the value
+            field.nativeElement.value = data || '';
+        }
+    }
+    manageSuggestions(query) {
+        this.suggestions.set([]);
         if (query && query.length > 0) {
             this.openDropdown();
             const timezones = DateTz.timezones();
-            const suggestions = timezones.filter((o) => {
-                return o.toLowerCase().includes(query.toLowerCase());
-            });
-            this.renderAc(suggestions);
+            const filtered = timezones.filter(tz => tz.toLowerCase().includes(query.toLowerCase()));
+            // Map string[] to AutocompleteItem[] for the template
+            this.suggestions.set(filtered.map(tz => ({
+                text: tz,
+                value: tz,
+            })));
         }
         else {
             this.closeDropdown();
         }
     }
-    getItemText(data) {
-        if (typeof data === 'object' && data !== null && 'text' in data) {
-            return data.text || '';
+    selectItem(item, ev) {
+        ev?.stopPropagation();
+        const val = item.value;
+        this.selected.emit(val);
+        this.setValue(val);
+        this.closeDropdown();
+        const field = this.el();
+        if (field?.nativeElement) {
+            field.nativeElement.value = val;
         }
-        else if (typeof data === 'string') {
-            return data;
+    }
+    onEnter(ev) {
+        const t = ev;
+        if (!this.disabled() && t && t.value) {
+            this.setValue(t.value);
+            this.closeDropdown();
         }
-        return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AutocompleteTimezonesComponent, deps: [{ token: UniqueIdService }, { token: i0.Renderer2 }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AutocompleteTimezonesComponent, isStandalone: false, selector: "rlb-autocomplete-timezones", inputs: { enableFlagIcons: { classPropertyName: "enableFlagIcons", publicName: "enable-flag-icons", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    handleOutsideEvent(event) {
+        if (!this.isOpen())
+            return;
+        const target = event.target;
+        const dropdown = this.dropdown();
+        const path = event.composedPath ? event.composedPath() : [];
+        const clickedInsideHost = this.hostRef?.nativeElement?.contains(target);
+        const clickedInsideDropdown = dropdown?.nativeElement?.contains
+            ? dropdown.nativeElement.contains(target)
+            : false;
+        const clickedInPath = path.length
+            ? path.some(p => p === this.hostRef.nativeElement || (dropdown && p === dropdown.nativeElement))
+            : false;
+        if (!(clickedInsideHost || clickedInsideDropdown || clickedInPath)) {
+            this.closeDropdown();
+        }
+    }
+    openDropdown() {
+        if (this.isOpen())
+            return;
+        this.isOpen.set(true);
+    }
+    closeDropdown() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AutocompleteTimezonesComponent, deps: [{ token: UniqueIdService }, { token: i0.ElementRef }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AutocompleteTimezonesComponent, isStandalone: false, selector: "rlb-autocomplete-timezones", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "max-height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, enableFlagIcons: { classPropertyName: "enableFlagIcons", publicName: "enable-flag-icons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown.escape": "onEscape($event)" } }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-content select="[before]"></ng-content>
     <div class="input-group has-validation position-relative">
       <input
@@ -8442,10 +8772,11 @@ class AutocompleteTimezonesComponent extends AbstractAutocompleteComponent {
         [id]="id"
         class="form-control"
         type="text"
+        [value]="value || ''"
+        autocomplete="off"
         [attr.disabled]="disabled() ? true : undefined"
         [attr.readonly]="readonly() ? true : undefined"
         [attr.placeholder]="placeholder()"
-        [attr.autocomplete]="'off'"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
         (blur)="touch()"
@@ -8454,23 +8785,46 @@ class AutocompleteTimezonesComponent extends AbstractAutocompleteComponent {
           'is-valid': control?.touched && control?.valid,
         }"
         (input)="update($event.target)"
+        (keyup.enter)="onEnter($event.target)"
       />
       @if (errors() && showError()) {
         <rlb-input-validation [errors]="errors()" />
       }
-      <div
-        #autocomplete
-        [id]="id + '-ac'"
-        class="dropdown-menu overflow-y-auto w-100 position-absolute"
-        aria-labelledby="dropdownMenu"
-        [style.max-height.px]="maxHeight()"
-        style="z-index: 1000; top: 100%;"
-      ></div>
+
+      <!-- Dropdown Logic -->
+      @if (isOpen()) {
+        <div
+          #autocomplete
+          class="dropdown-menu show w-100 position-absolute overflow-y-auto"
+          [style.max-height.px]="maxHeight()"
+          style="z-index: 1000; top: 100%;"
+        >
+          @if (!hasSuggestions()) {
+            <a class="dropdown-item disabled text-center">No suggestions</a>
+          } @else {
+            @for (item of suggestions(); track item.value) {
+              <a
+                class="dropdown-item"
+                (click)="selectItem(item, $event)"
+                style="cursor: pointer"
+              >
+                @if (item.iconClass) {
+                  <i
+                    [class]="item.iconClass"
+                    class="me-2"
+                  ></i>
+                }
+                {{ item.text }}
+              </a>
+            }
+          }
+        </div>
+      }
     </div>
-    @if (loading() || acLoading()) {
+    @if (loading()) {
       <rlb-progress
         [height]="2"
-        [infinite]="loading() || acLoading()"
+        [infinite]="loading()"
         color="primary"
         class="w-100"
       />
@@ -8490,10 +8844,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         [id]="id"
         class="form-control"
         type="text"
+        [value]="value || ''"
+        autocomplete="off"
         [attr.disabled]="disabled() ? true : undefined"
         [attr.readonly]="readonly() ? true : undefined"
         [attr.placeholder]="placeholder()"
-        [attr.autocomplete]="'off'"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
         (blur)="touch()"
@@ -8502,23 +8857,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           'is-valid': control?.touched && control?.valid,
         }"
         (input)="update($event.target)"
+        (keyup.enter)="onEnter($event.target)"
       />
       @if (errors() && showError()) {
         <rlb-input-validation [errors]="errors()" />
       }
-      <div
-        #autocomplete
-        [id]="id + '-ac'"
-        class="dropdown-menu overflow-y-auto w-100 position-absolute"
-        aria-labelledby="dropdownMenu"
-        [style.max-height.px]="maxHeight()"
-        style="z-index: 1000; top: 100%;"
-      ></div>
+
+      <!-- Dropdown Logic -->
+      @if (isOpen()) {
+        <div
+          #autocomplete
+          class="dropdown-menu show w-100 position-absolute overflow-y-auto"
+          [style.max-height.px]="maxHeight()"
+          style="z-index: 1000; top: 100%;"
+        >
+          @if (!hasSuggestions()) {
+            <a class="dropdown-item disabled text-center">No suggestions</a>
+          } @else {
+            @for (item of suggestions(); track item.value) {
+              <a
+                class="dropdown-item"
+                (click)="selectItem(item, $event)"
+                style="cursor: pointer"
+              >
+                @if (item.iconClass) {
+                  <i
+                    [class]="item.iconClass"
+                    class="me-2"
+                  ></i>
+                }
+                {{ item.text }}
+              </a>
+            }
+          }
+        </div>
+      }
     </div>
-    @if (loading() || acLoading()) {
+    @if (loading()) {
       <rlb-progress
         [height]="2"
-        [infinite]="loading() || acLoading()"
+        [infinite]="loading()"
         color="primary"
         class="w-100"
       />
@@ -8527,11 +8905,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
   `,
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.Renderer2 }, { type: i2$2.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.ElementRef }, { type: i2$2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }], propDecorators: { enableFlagIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-flag-icons", required: false }] }] } });
+                }] }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableFlagIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-flag-icons", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }], onDocumentPointerDown: [{
+                type: HostListener,
+                args: ['document:pointerdown', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
 
 class AutocompleteComponent extends AbstractComponent {
     onDocumentPointerDown(event) {
@@ -8543,19 +8927,22 @@ class AutocompleteComponent extends AbstractComponent {
             this.el()?.nativeElement?.blur();
         }
     }
-    constructor(idService, renderer, hostRef, control) {
+    constructor(idService, hostRef, control) {
         super(idService, control);
-        this.renderer = renderer;
         this.hostRef = hostRef;
         this.control = control;
         this.acLoading = signal(false, ...(ngDevMode ? [{ debugName: "acLoading" }] : []));
+        // State
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+        this.hasSuggestions = computed(() => this.suggestions().length > 0, ...(ngDevMode ? [{ debugName: "hasSuggestions" }] : []));
+        // Inputs
         this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute, alias: 'readonly' });
         this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute, alias: 'loading' });
         this.maxHeight = input(200, { ...(ngDevMode ? { debugName: "maxHeight" } : {}), transform: numberAttribute, alias: 'max-height' });
         this.placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}), alias: 'placeholder' });
-        this.autocomplete = input(() => { return []; }, { ...(ngDevMode ? { debugName: "autocomplete" } : {}), alias: 'autocomplete' });
+        this.autocomplete = input(() => [], { ...(ngDevMode ? { debugName: "autocomplete" } : {}), alias: 'autocomplete' });
         this.type = input('text', { ...(ngDevMode ? { debugName: "type" } : {}), alias: 'type' });
         this.size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : []));
         this.charsToSearch = input(3, { ...(ngDevMode ? { debugName: "charsToSearch" } : {}), alias: 'chars-to-search', transform: numberAttribute });
@@ -8585,83 +8972,63 @@ class AutocompleteComponent extends AbstractComponent {
                 field.nativeElement.value = data;
             }
             else {
-                field.nativeElement.value = data?.text;
+                field.nativeElement.value = data?.text || '';
             }
         }
     }
     manageSuggestions(data) {
-        this.clearDropdown();
+        // 1. Reset suggestions but keep dropdown state logic clean
+        this.suggestions.set([]);
         if (data && data.length >= this.charsToSearch()) {
             this.openDropdown();
-            const suggestions = this.autocomplete()(data);
-            if (suggestions instanceof Promise) {
-                this.acLoading.set(true);
-                suggestions.then(s => this.renderAc(s)).finally(() => (this.acLoading.set(false)));
-            }
-            else if (suggestions instanceof Observable) {
-                this.acLoading.set(true);
-                lastValueFrom(suggestions).then(s => this.renderAc(s)).finally(() => (this.acLoading.set(false)));
+            try {
+                const result = this.autocomplete()(data);
+                if (result instanceof Promise) {
+                    this.acLoading.set(true);
+                    result
+                        .then(s => this.handleResults(s))
+                        .catch(() => this.handleResults([]))
+                        .finally(() => this.acLoading.set(false));
+                }
+                else if (result instanceof Observable) {
+                    this.acLoading.set(true);
+                    lastValueFrom(result)
+                        .then(s => this.handleResults(s))
+                        .catch(() => this.handleResults([]))
+                        .finally(() => this.acLoading.set(false));
+                }
+                else {
+                    this.handleResults(result);
+                }
             }
-            else {
-                this.renderAc(suggestions);
+            catch (e) {
+                console.error('Error executing autocomplete function:', e);
+                this.closeDropdown();
             }
         }
         else {
             this.closeDropdown();
         }
     }
-    renderAc(suggestions) {
-        const dropdown = this.dropdown();
-        if (!dropdown)
-            return;
-        this.clearDropdown();
-        if (!suggestions || suggestions.length === 0) {
-            const el = this.renderer.createElement('a');
-            this.renderer.addClass(el, 'dropdown-item');
-            this.renderer.addClass(el, 'disabled');
-            this.renderer.addClass(el, 'text-center');
-            this.renderer.setAttribute(el, 'disabled', 'true');
-            this.renderer.appendChild(el, this.renderer.createText('No suggestions'));
-            this.renderer.appendChild(dropdown.nativeElement, el);
-            return;
-        }
-        for (const suggestion of suggestions) {
-            const itemData = typeof suggestion === 'string'
-                ? { text: suggestion, value: suggestion }
-                : suggestion;
-            const el = this.renderer.createElement('a');
-            this.renderer.addClass(el, 'dropdown-item');
-            if (itemData.iconClass) {
-                const icon = this.renderer.createElement('i');
-                const classes = itemData.iconClass.split(/\s+/);
-                for (const cls of classes) {
-                    if (cls) {
-                        this.renderer.addClass(icon, cls);
-                    }
-                }
-                this.renderer.addClass(icon, 'me-2');
-                this.renderer.appendChild(el, icon);
-            }
-            this.renderer.appendChild(el, this.renderer.createText(itemData.text));
-            this.renderer.listen(el, 'click', (ev) => {
-                this.selected.emit(itemData);
-                this.setValue(itemData);
-                this.closeDropdown();
-                ev.stopPropagation();
-            });
-            this.renderer.appendChild(dropdown.nativeElement, el);
-        }
+    handleResults(raw) {
+        const normalize = raw.map(r => (typeof r === 'string' ? { text: r, value: r } : r));
+        this.suggestions.set(normalize);
+    }
+    selectItem(item, ev) {
+        ev?.stopPropagation();
+        this.selected.emit(item);
+        this.setValue(item);
+        this.closeDropdown();
     }
     onEnter(ev) {
         const t = ev;
-        const dropdown = this.dropdown();
-        if (!this.disabled() && t && t.value && dropdown) {
+        if (!this.disabled() && t && t.value) {
             const item = {
                 text: t.value,
-                value: t.value
+                value: t.value,
             };
             this.setValue(item);
-            this.renderer.setStyle(dropdown.nativeElement, 'display', 'none');
+            this.closeDropdown();
         }
     }
     getText(d) {
@@ -8670,86 +9037,94 @@ class AutocompleteComponent extends AbstractComponent {
         return typeof d === 'string' ? d : d?.text;
     }
     handleOutsideEvent(event) {
+        if (!this.isOpen())
+            return;
         const target = event.target;
         const dropdown = this.dropdown();
         const path = event.composedPath ? event.composedPath() : [];
         const clickedInsideHost = this.hostRef?.nativeElement?.contains(target);
-        const clickedInsideDropdown = dropdown?.nativeElement?.contains ? dropdown.nativeElement.contains(target) : false;
-        const clickedInPath = path.length ? path.some(p => p === this.hostRef.nativeElement || (dropdown && p === dropdown.nativeElement)) : false;
+        const clickedInsideDropdown = dropdown?.nativeElement?.contains
+            ? dropdown.nativeElement.contains(target)
+            : false;
+        // Check path for Shadow DOM support
+        const clickedInPath = path.length
+            ? path.some(p => p === this.hostRef.nativeElement || (dropdown && p === dropdown.nativeElement))
+            : false;
         if (!(clickedInsideHost || clickedInsideDropdown || clickedInPath)) {
             this.closeDropdown();
         }
     }
     openDropdown() {
-        const dropdown = this.dropdown();
-        if (!dropdown || this.isOpen())
+        if (this.isOpen())
             return;
-        this.renderer.setStyle(dropdown.nativeElement, 'display', 'block');
         this.isOpen.set(true);
     }
     closeDropdown() {
-        const dropdown = this.dropdown();
-        if (!dropdown || !this.isOpen())
+        if (!this.isOpen())
             return;
-        this.renderer.setStyle(dropdown.nativeElement, 'display', 'none');
         this.isOpen.set(false);
-        this.clearDropdown();
         this.acLoading.set(false);
     }
-    clearDropdown() {
-        const dropdown = this.dropdown();
-        if (!dropdown)
-            return;
-        while (dropdown.nativeElement.firstChild) {
-            dropdown.nativeElement.removeChild(dropdown.nativeElement.lastChild);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AutocompleteComponent, deps: [{ token: UniqueIdService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AutocompleteComponent, isStandalone: false, selector: "rlb-autocomplete", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "max-height", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, charsToSearch: { classPropertyName: "charsToSearch", publicName: "chars-to-search", isSignal: true, isRequired: false, transformFunction: null }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null }, inputAutocomplete: { classPropertyName: "inputAutocomplete", publicName: "inputAutocomplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown.escape": "onEscape($event)" }, styleAttribute: "position: relative;" }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AutocompleteComponent, deps: [{ token: UniqueIdService }, { token: i0.ElementRef }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AutocompleteComponent, isStandalone: false, selector: "rlb-autocomplete", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "max-height", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, charsToSearch: { classPropertyName: "charsToSearch", publicName: "chars-to-search", isSignal: true, isRequired: false, transformFunction: null }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null }, inputAutocomplete: { classPropertyName: "inputAutocomplete", publicName: "inputAutocomplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown.escape": "onEscape($event)" } }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-content select="[before]"></ng-content>
-    <div class="input-group has-validation">
+    <div class="input-group has-validation position-relative">
       <input
         #field
-        [id]="id"
         class="form-control"
+        [value]="getText(value)"
+        (input)="update($event.target)"
+        (keyup.enter)="onEnter($event.target)"
+        (blur)="touch()"
+        [id]="id"
         [type]="type()"
-        [attr.autocomplete]="inputAutocomplete()"
         [attr.disabled]="disabled() ? true : undefined"
+        [class.is-invalid]="control?.touched && control?.invalid && enableValidation()"
+        [attr.autocomplete]="inputAutocomplete()"
         [attr.readonly]="readonly() ? true : undefined"
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
-        [value]="getText(value)"
-        (blur)="touch()"
-				[ngClass]="{
-        'is-invalid': control?.touched && control?.invalid && enableValidation(),
-        'is-valid': control?.touched && control?.valid && enableValidation()
+        [ngClass]="{
+          'is-invalid': control?.touched && control?.invalid && enableValidation(),
+          'is-valid': control?.touched && control?.valid && enableValidation(),
         }"
-        (input)="update($event.target)"
-        (keyup.enter)="onEnter($event.target)"
-        />
-        @if (errors() && showError() && enableValidation()) {
-          <rlb-input-validation [errors]="errors()"/>
-        }
-      </div>
-      @if (loading() || acLoading()) {
-        <rlb-progress
-          [height]="2"
-          [infinite]="loading() || acLoading()"
-          color="primary"
-          class="w-100"
-          />
+      />
+
+      @if (isOpen()) {
+        <div
+          #autocomplete
+          class="dropdown-menu show w-100 position-absolute overflow-y-auto"
+          [style.max-height.px]="maxHeight()"
+          [style.max-width.px]="menuMaxWidth()"
+          style="z-index: 1000; top: 100%;"
+        >
+          @if (acLoading()) {
+            <div class="dropdown-item disabled text-center">Loading...</div>
+          } @else if (!hasSuggestions()) {
+            <a class="dropdown-item disabled text-center">No suggestions</a>
+          } @else {
+            @for (item of suggestions(); track item.value) {
+              <a
+                class="dropdown-item"
+                (click)="selectItem(item, $event)"
+                style="cursor: pointer"
+              >
+                @if (item.iconClass) {
+                  <i
+                    [class]="item.iconClass"
+                    class="me-2"
+                  ></i>
+                }
+                {{ item.text }}
+              </a>
+            }
+          }
+        </div>
       }
-      <ng-content select="[after]"></ng-content>
-      <div
-        #autocomplete
-        [id]="id+'-ac'"
-        class="dropdown-menu overflow-y-auto w-100 position-absolute"
-        aria-labelledby="dropdownMenu"
-        [style.max-height.px]="maxHeight()"
-        [style.width]="'fit-content !important'"
-      [style.max-width.px]="menuMaxWidth()"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"], outputs: ["errorsChange"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }] }); }
+    </div>
+    <ng-content select="[after]"></ng-content>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -8757,55 +9132,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     selector: 'rlb-autocomplete',
                     template: `
     <ng-content select="[before]"></ng-content>
-    <div class="input-group has-validation">
+    <div class="input-group has-validation position-relative">
       <input
         #field
-        [id]="id"
         class="form-control"
+        [value]="getText(value)"
+        (input)="update($event.target)"
+        (keyup.enter)="onEnter($event.target)"
+        (blur)="touch()"
+        [id]="id"
         [type]="type()"
-        [attr.autocomplete]="inputAutocomplete()"
         [attr.disabled]="disabled() ? true : undefined"
+        [class.is-invalid]="control?.touched && control?.invalid && enableValidation()"
+        [attr.autocomplete]="inputAutocomplete()"
         [attr.readonly]="readonly() ? true : undefined"
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
-        [value]="getText(value)"
-        (blur)="touch()"
-				[ngClass]="{
-        'is-invalid': control?.touched && control?.invalid && enableValidation(),
-        'is-valid': control?.touched && control?.valid && enableValidation()
+        [ngClass]="{
+          'is-invalid': control?.touched && control?.invalid && enableValidation(),
+          'is-valid': control?.touched && control?.valid && enableValidation(),
         }"
-        (input)="update($event.target)"
-        (keyup.enter)="onEnter($event.target)"
-        />
-        @if (errors() && showError() && enableValidation()) {
-          <rlb-input-validation [errors]="errors()"/>
-        }
-      </div>
-      @if (loading() || acLoading()) {
-        <rlb-progress
-          [height]="2"
-          [infinite]="loading() || acLoading()"
-          color="primary"
-          class="w-100"
-          />
+      />
+
+      @if (isOpen()) {
+        <div
+          #autocomplete
+          class="dropdown-menu show w-100 position-absolute overflow-y-auto"
+          [style.max-height.px]="maxHeight()"
+          [style.max-width.px]="menuMaxWidth()"
+          style="z-index: 1000; top: 100%;"
+        >
+          @if (acLoading()) {
+            <div class="dropdown-item disabled text-center">Loading...</div>
+          } @else if (!hasSuggestions()) {
+            <a class="dropdown-item disabled text-center">No suggestions</a>
+          } @else {
+            @for (item of suggestions(); track item.value) {
+              <a
+                class="dropdown-item"
+                (click)="selectItem(item, $event)"
+                style="cursor: pointer"
+              >
+                @if (item.iconClass) {
+                  <i
+                    [class]="item.iconClass"
+                    class="me-2"
+                  ></i>
+                }
+                {{ item.text }}
+              </a>
+            }
+          }
+        </div>
       }
-      <ng-content select="[after]"></ng-content>
-      <div
-        #autocomplete
-        [id]="id+'-ac'"
-        class="dropdown-menu overflow-y-auto w-100 position-absolute"
-        aria-labelledby="dropdownMenu"
-        [style.max-height.px]="maxHeight()"
-        [style.width]="'fit-content !important'"
-      [style.max-width.px]="menuMaxWidth()"></div>
-    `,
+    </div>
+    <ng-content select="[after]"></ng-content>
+  `,
                     standalone: false,
-                    host: {
-                        style: 'position: relative;',
-                    }
                 }]
-        }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2$2.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.ElementRef }, { type: i2$2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional