@open-rlb/ng-bootstrap 3.3.11 → 3.3.12

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

@@ -6370,6 +6370,8 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
         this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'id', transform: (v) => v || '' });
         this.enableFlagIcons = input(true, { ...(ngDevMode ? { debugName: "enableFlagIcons" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-flag-icons' });
         this.enableValidation = input(false, { ...(ngDevMode ? { debugName: "enableValidation" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-validation' });
+        this.openOnFocus = input(false, { ...(ngDevMode ? { debugName: "openOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'open-on-focus' });
+        this.detectLocale = input(false, { ...(ngDevMode ? { debugName: "detectLocale" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'detect-locale' });
         this.el = viewChild('field', ...(ngDevMode ? [{ debugName: "el" }] : /* istanbul ignore next */ []));
         this.dropdown = viewChild('autocomplete', ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
         this.selected = output();
@@ -7591,6 +7593,16 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
                 data: 'ZW',
             },
         ];
+        const destroyRef = inject(DestroyRef);
+        const onScroll = (event) => {
+            if (!this.isOpen())
+                return;
+            if (this.dropdown()?.nativeElement.contains(event.target))
+                return;
+            this.closeDropdown();
+        };
+        document.addEventListener('scroll', onScroll, { capture: true });
+        destroyRef.onDestroy(() => document.removeEventListener('scroll', onScroll, { capture: true }));
     }
     onEscape(event) {
         if (this.isOpen()) {
@@ -7598,6 +7610,11 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
             this.el()?.nativeElement?.blur();
         }
     }
+    onFocus() {
+        if (this.openOnFocus() && !this.isOpen()) {
+            this.manageSuggestions('', true);
+        }
+    }
     update(ev) {
         if (this.typingTimeout)
             clearTimeout(this.typingTimeout);
@@ -7616,16 +7633,33 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
         }
         return `${d.text} (${d.value})`;
     }
-    manageSuggestions(query) {
-        if (query && query.length > 0) {
+    manageSuggestions(query, showAll = false) {
+        if (showAll || (query && query.length > 0)) {
             this.openDropdown();
-            const rawSuggestions = this.getCountries().filter(c => c.text.toLowerCase().includes(query.toLowerCase()) || c.value.includes(query));
-            this.suggestions.set(rawSuggestions);
+            let results = showAll && !query
+                ? this.getCountries()
+                : this.getCountries().filter(c => c.text.toLowerCase().includes(query.toLowerCase()) || c.value.includes(query));
+            if (this.detectLocale()) {
+                const code = this._localeCountryCode();
+                if (code) {
+                    const idx = results.findIndex(c => c.data === code);
+                    if (idx > 0)
+                        results = [results[idx], ...results.filter((_, i) => i !== idx)];
+                }
+            }
+            this.suggestions.set(results);
         }
         else {
             this.closeDropdown();
         }
     }
+    _localeCountryCode() {
+        const lang = navigator.languages?.[0] ?? navigator.language;
+        if (!lang)
+            return null;
+        const parts = lang.split('-');
+        return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : null;
+    }
     selectItem(item, ev) {
         ev?.preventDefault();
         ev?.stopPropagation();
@@ -7669,7 +7703,7 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AutocompleteCountryDialCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteCountryDialCodeComponent, isStandalone: true, 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 }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", 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 }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "handleOutsideEvent($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteCountryDialCodeComponent, isStandalone: true, 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 }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", 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 }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "open-on-focus", isSignal: true, isRequired: false, transformFunction: null }, detectLocale: { classPropertyName: "detectLocale", publicName: "detect-locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "handleOutsideEvent($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, 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
@@ -7684,6 +7718,7 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
+        (focus)="onFocus()"
         (blur)="touch()"
         [ngClass]="{
           'is-invalid': controlTouched() && invalid() && enableValidation(),
@@ -7765,6 +7800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
+        (focus)="onFocus()"
         (blur)="touch()"
         [ngClass]="{
           'is-invalid': controlTouched() && invalid() && enableValidation(),
@@ -7834,7 +7870,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, InputValidationComponent, ProgressComponent],
                 }]
-        }], ctorParameters: () => [], 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 }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", 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 }] }], 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"] }] } });
+        }], ctorParameters: () => [], 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 }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", 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 }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "open-on-focus", required: false }] }], detectLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "detect-locale", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 class AutocompleteCountryComponent extends AbstractComponent {
     constructor() {
@@ -7854,6 +7890,8 @@ class AutocompleteCountryComponent extends AbstractComponent {
         this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'id', transform: (v) => v || '' });
         this.enableFlagIcons = input(false, { ...(ngDevMode ? { debugName: "enableFlagIcons" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-flag-icons' });
         this.enableValidation = input(false, { ...(ngDevMode ? { debugName: "enableValidation" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-validation' });
+        this.openOnFocus = input(false, { ...(ngDevMode ? { debugName: "openOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'open-on-focus' });
+        this.detectLocale = input(false, { ...(ngDevMode ? { debugName: "detectLocale" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'detect-locale' });
         this.el = viewChild('field', ...(ngDevMode ? [{ debugName: "el" }] : /* istanbul ignore next */ []));
         this.dropdown = viewChild('autocomplete', ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
         this.selected = output();
@@ -8058,6 +8096,16 @@ class AutocompleteCountryComponent extends AbstractComponent {
             { text: 'Zambia', value: 'ZM' },
             { text: 'Zimbabwe', value: 'ZW' },
         ];
+        const destroyRef = inject(DestroyRef);
+        const onScroll = (event) => {
+            if (!this.isOpen())
+                return;
+            if (this.dropdown()?.nativeElement.contains(event.target))
+                return;
+            this.closeDropdown();
+        };
+        document.addEventListener('scroll', onScroll, { capture: true });
+        destroyRef.onDestroy(() => document.removeEventListener('scroll', onScroll, { capture: true }));
     }
     onEscape(event) {
         if (this.isOpen()) {
@@ -8065,6 +8113,11 @@ class AutocompleteCountryComponent extends AbstractComponent {
             this.el()?.nativeElement?.blur();
         }
     }
+    onFocus() {
+        if (this.openOnFocus() && !this.isOpen()) {
+            this.manageSuggestions('', true);
+        }
+    }
     update(ev) {
         if (this.typingTimeout)
             clearTimeout(this.typingTimeout);
@@ -8083,16 +8136,33 @@ class AutocompleteCountryComponent extends AbstractComponent {
         }
         return d?.text;
     }
-    manageSuggestions(query) {
-        if (query && query.length > 0) {
+    manageSuggestions(query, showAll = false) {
+        if (showAll || (query && query.length > 0)) {
             this.openDropdown();
-            const rawSuggestions = this.getCountries().filter(c => c.text.toLowerCase().includes(query.toLowerCase()));
-            this.suggestions.set(rawSuggestions);
+            let results = showAll && !query
+                ? this.getCountries()
+                : this.getCountries().filter(c => c.text.toLowerCase().includes(query.toLowerCase()));
+            if (this.detectLocale()) {
+                const code = this._localeCountryCode();
+                if (code) {
+                    const idx = results.findIndex(c => c.value === code);
+                    if (idx > 0)
+                        results = [results[idx], ...results.filter((_, i) => i !== idx)];
+                }
+            }
+            this.suggestions.set(results);
         }
         else {
             this.closeDropdown();
         }
     }
+    _localeCountryCode() {
+        const lang = navigator.languages?.[0] ?? navigator.language;
+        if (!lang)
+            return null;
+        const parts = lang.split('-');
+        return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : null;
+    }
     selectItem(item, ev) {
         ev?.preventDefault();
         ev?.stopPropagation();
@@ -8139,7 +8209,7 @@ class AutocompleteCountryComponent extends AbstractComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AutocompleteCountryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteCountryComponent, isStandalone: true, 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 }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", 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": "handleOutsideEvent($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteCountryComponent, isStandalone: true, 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 }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", 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 }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "open-on-focus", isSignal: true, isRequired: false, transformFunction: null }, detectLocale: { classPropertyName: "detectLocale", publicName: "detect-locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "handleOutsideEvent($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, 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
@@ -8154,6 +8224,7 @@ class AutocompleteCountryComponent extends AbstractComponent {
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
+        (focus)="onFocus()"
         (blur)="touch()"
         [ngClass]="{
           'is-invalid': controlTouched() && invalid() && enableValidation(),
@@ -8224,6 +8295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
+        (focus)="onFocus()"
         (blur)="touch()"
         [ngClass]="{
           'is-invalid': controlTouched() && invalid() && enableValidation(),
@@ -8283,12 +8355,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, InputValidationComponent],
                 }]
-        }], ctorParameters: () => [], 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 }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", 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"] }] } });
+        }], ctorParameters: () => [], 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 }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", 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 }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "open-on-focus", required: false }] }], detectLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "detect-locale", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 class AutocompleteTimezonesComponent extends AbstractComponent {
     constructor() {
         super();
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.dropdownTop = signal(0, ...(ngDevMode ? [{ debugName: "dropdownTop" }] : /* istanbul ignore next */ []));
+        this.dropdownLeft = signal(0, ...(ngDevMode ? [{ debugName: "dropdownLeft" }] : /* istanbul ignore next */ []));
+        this.dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
         this.suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
         this.hasSuggestions = computed(() => this.suggestions().length > 0, ...(ngDevMode ? [{ debugName: "hasSuggestions" }] : /* istanbul ignore next */ []));
         this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -8300,10 +8375,21 @@ class AutocompleteTimezonesComponent extends AbstractComponent {
         this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'id', transform: (v) => v || '' });
         this.enableValidation = input(false, { ...(ngDevMode ? { debugName: "enableValidation" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-validation' });
+        this.openOnFocus = input(false, { ...(ngDevMode ? { debugName: "openOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'open-on-focus' });
         this.el = viewChild('field', ...(ngDevMode ? [{ debugName: "el" }] : /* istanbul ignore next */ []));
         this.dropdown = viewChild('autocomplete', ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
         this.selected = output();
         this.hostRef = inject((ElementRef));
+        const destroyRef = inject(DestroyRef);
+        const onScroll = (event) => {
+            if (!this.isOpen())
+                return;
+            if (this.dropdown()?.nativeElement.contains(event.target))
+                return;
+            this.closeDropdown();
+        };
+        document.addEventListener('scroll', onScroll, { capture: true });
+        destroyRef.onDestroy(() => document.removeEventListener('scroll', onScroll, { capture: true }));
     }
     onEscape(event) {
         if (this.isOpen()) {
@@ -8311,6 +8397,11 @@ class AutocompleteTimezonesComponent extends AbstractComponent {
             this.el()?.nativeElement?.blur();
         }
     }
+    onFocus() {
+        if (this.openOnFocus() && !this.isOpen()) {
+            this.manageSuggestions('', true);
+        }
+    }
     update(ev) {
         if (this.typingTimeout)
             clearTimeout(this.typingTimeout);
@@ -8323,11 +8414,13 @@ class AutocompleteTimezonesComponent extends AbstractComponent {
     // We leave onWrite empty because [value]="value() || ''" in the template
     // handles the synchronization automatically in a Zoneless/Signal world.
     onWrite(data) { }
-    manageSuggestions(query) {
-        if (query && query.length > 0) {
+    manageSuggestions(query, showAll = false) {
+        if (showAll || (query && query.length > 0)) {
             this.openDropdown();
             const timezones = DateTz.timezones();
-            const filtered = timezones.filter(tz => tz.toLowerCase().includes(query.toLowerCase()));
+            const filtered = showAll && !query
+                ? timezones
+                : timezones.filter(tz => tz.toLowerCase().includes(query.toLowerCase()));
             this.suggestions.set(filtered.map(tz => ({ text: tz, value: tz })));
         }
         else {
@@ -8359,13 +8452,19 @@ class AutocompleteTimezonesComponent extends AbstractComponent {
             this.closeDropdown();
     }
     openDropdown() {
+        const rect = this.el()?.nativeElement.getBoundingClientRect();
+        if (rect) {
+            this.dropdownTop.set(rect.bottom);
+            this.dropdownLeft.set(rect.left);
+            this.dropdownWidth.set(rect.width);
+        }
         this.isOpen.set(true);
     }
     closeDropdown() {
         this.isOpen.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AutocompleteTimezonesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteTimezonesComponent, isStandalone: true, 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 }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", 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 }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "handleOutsideEvent($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteTimezonesComponent, isStandalone: true, 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 }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", 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 }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "open-on-focus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "handleOutsideEvent($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, 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
@@ -8380,6 +8479,7 @@ class AutocompleteTimezonesComponent extends AbstractComponent {
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
+        (focus)="onFocus()"
         (blur)="touch()"
         [ngClass]="{
           'is-invalid': controlTouched() && invalid() && enableValidation(),
@@ -8397,10 +8497,13 @@ class AutocompleteTimezonesComponent extends AbstractComponent {
       @if (isOpen()) {
         <div
           #autocomplete
-          class="dropdown-menu show w-100 position-absolute overflow-y-auto shadow"
+          class="dropdown-menu show overflow-y-auto shadow"
           [style.max-height.px]="maxHeight()"
           [style.max-width.px]="menuMaxWidth()"
-          style="z-index: 1000; top: 100%;"
+          [style.top.px]="dropdownTop()"
+          [style.left.px]="dropdownLeft()"
+          [style.width.px]="dropdownWidth()"
+          style="z-index: 1050; position: fixed;"
         >
           @if (!hasSuggestions()) {
             <a class="dropdown-item disabled text-center italic">No suggestions</a>
@@ -8448,6 +8551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
+        (focus)="onFocus()"
         (blur)="touch()"
         [ngClass]="{
           'is-invalid': controlTouched() && invalid() && enableValidation(),
@@ -8465,10 +8569,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       @if (isOpen()) {
         <div
           #autocomplete
-          class="dropdown-menu show w-100 position-absolute overflow-y-auto shadow"
+          class="dropdown-menu show overflow-y-auto shadow"
           [style.max-height.px]="maxHeight()"
           [style.max-width.px]="menuMaxWidth()"
-          style="z-index: 1000; top: 100%;"
+          [style.top.px]="dropdownTop()"
+          [style.left.px]="dropdownLeft()"
+          [style.width.px]="dropdownWidth()"
+          style="z-index: 1050; position: fixed;"
         >
           @if (!hasSuggestions()) {
             <a class="dropdown-item disabled text-center italic">No suggestions</a>
@@ -8504,7 +8611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, InputValidationComponent, ProgressComponent],
                 }]
-        }], ctorParameters: () => [], 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 }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", 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"] }] } });
+        }], ctorParameters: () => [], 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 }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "open-on-focus", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 class AutocompleteComponent extends AbstractComponent {
     onDocumentPointerDown(event) {
@@ -8540,17 +8647,32 @@ class AutocompleteComponent extends AbstractComponent {
         this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'id', transform: (v) => v || '' });
         this.enableValidation = input(false, { ...(ngDevMode ? { debugName: "enableValidation" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-validation' });
         this.inputAutocomplete = input('off', ...(ngDevMode ? [{ debugName: "inputAutocomplete" }] : /* istanbul ignore next */ []));
+        this.openOnFocus = input(false, { ...(ngDevMode ? { debugName: "openOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'open-on-focus' });
         this.el = viewChild('field', ...(ngDevMode ? [{ debugName: "el" }] : /* istanbul ignore next */ []));
         this.dropdown = viewChild('autocomplete', ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
         this.selected = output();
         this.hostRef = inject((ElementRef));
         this.searchSubject = new Subject();
-        // Use RxJS for cleaner debouncing
         this.searchSubject
             .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed())
             .subscribe(val => {
             this.manageSuggestions(val);
         });
+        const destroyRef = inject(DestroyRef);
+        const onScroll = (event) => {
+            if (!this.isOpen())
+                return;
+            if (this.dropdown()?.nativeElement.contains(event.target))
+                return;
+            this.closeDropdown();
+        };
+        document.addEventListener('scroll', onScroll, { capture: true });
+        destroyRef.onDestroy(() => document.removeEventListener('scroll', onScroll, { capture: true }));
+    }
+    onFocus() {
+        if (this.openOnFocus() && !this.isOpen()) {
+            this.manageSuggestions('', true);
+        }
     }
     update(ev) {
         if (this.disabled())
@@ -8571,10 +8693,10 @@ class AutocompleteComponent extends AbstractComponent {
         //   }
         // }
     }
-    manageSuggestions(data) {
+    manageSuggestions(data, showAll = false) {
         // 1. Reset suggestions but keep dropdown state logic clean
         this.suggestions.set([]);
-        if (data && data.length >= this.charsToSearch()) {
+        if (showAll || (data && data.length >= this.charsToSearch())) {
             this.openDropdown();
             try {
                 const result = this.autocomplete()(data);
@@ -8668,7 +8790,7 @@ class AutocompleteComponent extends AbstractComponent {
         this.acLoading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteComponent, isStandalone: true, 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)" }, properties: { "attr.id": "null" } }, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteComponent, isStandalone: true, 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 }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "open-on-focus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, 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
@@ -8678,6 +8800,7 @@ class AutocompleteComponent extends AbstractComponent {
         [value]="getText(value())"
         (input)="update($event.target)"
         (keyup.enter)="onEnter($event.target)"
+        (focus)="onFocus()"
         (blur)="touch()"
         [id]="id()"
         [type]="type()"
@@ -8749,6 +8872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         [value]="getText(value())"
         (input)="update($event.target)"
         (keyup.enter)="onEnter($event.target)"
+        (focus)="onFocus()"
         (blur)="touch()"
         [id]="id()"
         [type]="type()"
@@ -8813,7 +8937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, InputValidationComponent],
                 }]
-        }], ctorParameters: () => [], 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 }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], charsToSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "chars-to-search", required: false }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], inputAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAutocomplete", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+        }], ctorParameters: () => [], 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 }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], charsToSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "chars-to-search", required: false }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], inputAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAutocomplete", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "open-on-focus", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 class CheckboxComponent extends AbstractComponent {
     setExtValidation(val) {