@tolle_/tolle-ui 18.2.12 → 18.2.14

package/fesm2022/tolle-ui.mjs

@@ -739,6 +739,11 @@ class SelectComponent {
             });
         }
     }
+    _outsideClickHandler = (event) => {
+        if (!this.trigger.nativeElement.contains(event.target) && !this.popover?.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    };
     toggle() {
         if (this.disabled || this.readonly)
             return;
@@ -747,7 +752,10 @@ class SelectComponent {
     open() {
         this.isOpen = true;
         this.trigger.nativeElement.focus();
-        setTimeout(() => this.updatePosition());
+        setTimeout(() => {
+            this.updatePosition();
+            document.addEventListener('mousedown', this._outsideClickHandler);
+        });
     }
     close() {
         this.isOpen = false;
@@ -755,6 +763,7 @@ class SelectComponent {
         this.onSearchChange('');
         if (this.cleanupAutoUpdate)
             this.cleanupAutoUpdate();
+        document.removeEventListener('mousedown', this._outsideClickHandler);
     }
     updatePosition() {
         if (!this.trigger || !this.popover)
@@ -799,11 +808,6 @@ class SelectComponent {
         });
         this.noResults = visibleCount === 0 && filter !== '';
     }
-    onDocumentClick(event) {
-        if (this.isOpen && !this.trigger.nativeElement.contains(event.target) && !this.popover.nativeElement.contains(event.target)) {
-            this.close();
-        }
-    }
     writeValue(value) {
         this.value = value;
         this.updateItemSelection();
@@ -820,9 +824,10 @@ class SelectComponent {
         this.sub.unsubscribe();
         if (this.cleanupAutoUpdate)
             this.cleanupAutoUpdate();
+        document.removeEventListener('mousedown', this._outsideClickHandler);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: [{ token: SelectService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "tolle-select", inputs: { placeholder: "placeholder", class: "class", disabled: "disabled", searchable: "searchable", size: "size", readonly: "readonly" }, host: { listeners: { "document:mousedown": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "tolle-select", inputs: { placeholder: "placeholder", class: "class", disabled: "disabled", searchable: "searchable", size: "size", readonly: "readonly" }, providers: [
             SelectService,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -949,9 +954,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], items: [{
                 type: ContentChildren,
                 args: [SelectItemComponent, { descendants: true }]
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:mousedown', ['$event']]
             }] } });
 
 class SelectGroupComponent {
@@ -2024,6 +2026,11 @@ class MultiSelectComponent {
             return Infinity;
         return Math.max(0, this.maxSelections - this.value.length);
     }
+    _outsideClickHandler = (event) => {
+        if (!this.trigger.nativeElement.contains(event.target) && !this.popover?.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    };
     toggle() {
         if (this.disabled)
             return;
@@ -2031,7 +2038,10 @@ class MultiSelectComponent {
     }
     open() {
         this.isOpen = true;
-        setTimeout(() => this.updatePosition());
+        setTimeout(() => {
+            this.updatePosition();
+            document.addEventListener('mousedown', this._outsideClickHandler);
+        });
     }
     close() {
         this.isOpen = false;
@@ -2039,6 +2049,7 @@ class MultiSelectComponent {
         this.onSearchChange('');
         if (this.cleanup)
             this.cleanup();
+        document.removeEventListener('mousedown', this._outsideClickHandler);
     }
     updatePosition() {
         if (!this.trigger || !this.popover)
@@ -2138,10 +2149,10 @@ class MultiSelectComponent {
         });
         this.noResults = visibleCount === 0 && filter !== '';
     }
-    onClickOutside(event) {
-        if (this.isOpen && !this.trigger.nativeElement.contains(event.target) && !this.popover?.nativeElement.contains(event.target)) {
-            this.close();
-        }
+    ngOnDestroy() {
+        document.removeEventListener('mousedown', this._outsideClickHandler);
+        if (this.cleanup)
+            this.cleanup();
     }
     // ControlValueAccessor
     onChange = () => { };
@@ -2155,7 +2166,7 @@ class MultiSelectComponent {
     setDisabledState(isDisabled) { this.disabled = isDisabled; }
     cn = cn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiSelectComponent, deps: [{ token: SelectService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MultiSelectComponent, isStandalone: true, selector: "tolle-multi-select", inputs: { placeholder: "placeholder", size: "size", searchable: "searchable", disabled: "disabled", class: "class", maxSelections: "maxSelections", maxDisplayItems: "maxDisplayItems", error: "error" }, host: { listeners: { "document:mousedown": "onClickOutside($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MultiSelectComponent, isStandalone: true, selector: "tolle-multi-select", inputs: { placeholder: "placeholder", size: "size", searchable: "searchable", disabled: "disabled", class: "class", maxSelections: "maxSelections", maxDisplayItems: "maxDisplayItems", error: "error" }, providers: [
             SelectService,
             { provide: NG_VALUE_ACCESSOR, useExisting: MultiSelectComponent, multi: true }
         ], queries: [{ propertyName: "items", predicate: SelectItemComponent, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
@@ -2353,9 +2364,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], items: [{
                 type: ContentChildren,
                 args: [SelectItemComponent, { descendants: true }]
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:mousedown', ['$event']]
             }] } });
 
 class CalendarComponent {
@@ -3218,6 +3226,11 @@ class DatePickerComponent {
     inputValue = '';
     isOpen = false;
     cleanupAutoUpdate;
+    _outsideClickHandler = (event) => {
+        if (!this.triggerContainer.nativeElement.contains(event.target) && !this.popover?.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    };
     constructor(cdr) {
         this.cdr = cdr;
     }
@@ -3298,12 +3311,16 @@ class DatePickerComponent {
     }
     open() {
         this.isOpen = true;
-        setTimeout(() => this.updatePosition());
+        setTimeout(() => {
+            this.updatePosition();
+            document.addEventListener('mousedown', this._outsideClickHandler);
+        });
     }
     close() {
         this.isOpen = false;
         if (this.cleanupAutoUpdate)
             this.cleanupAutoUpdate();
+        document.removeEventListener('mousedown', this._outsideClickHandler);
     }
     clear(event) {
         event.stopPropagation();
@@ -3334,12 +3351,10 @@ class DatePickerComponent {
             });
         });
     }
-    onClickOutside(event) {
-        if (this.isOpen &&
-            !this.triggerContainer.nativeElement.contains(event.target) &&
-            !this.popover.nativeElement.contains(event.target)) {
-            this.close();
-        }
+    ngOnDestroy() {
+        if (this.cleanupAutoUpdate)
+            this.cleanupAutoUpdate();
+        document.removeEventListener('mousedown', this._outsideClickHandler);
     }
     // CVA Implementation
     onChange = () => { };
@@ -3363,7 +3378,7 @@ class DatePickerComponent {
     setDisabledState(isDisabled) { this.disabled = isDisabled; }
     cn = cn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatePickerComponent, isStandalone: true, selector: "tolle-date-picker", inputs: { placeholder: "placeholder", disabled: "disabled", class: "class", disablePastDates: "disablePastDates", showClear: "showClear", showQuickActions: "showQuickActions", minDate: "minDate", maxDate: "maxDate", mode: "mode", formatMonthFn: "formatMonthFn", formatYearFn: "formatYearFn", displayFormat: "displayFormat" }, host: { listeners: { "document:mousedown": "onClickOutside($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatePickerComponent, isStandalone: true, selector: "tolle-date-picker", inputs: { placeholder: "placeholder", disabled: "disabled", class: "class", disablePastDates: "disablePastDates", showClear: "showClear", showQuickActions: "showQuickActions", minDate: "minDate", maxDate: "maxDate", mode: "mode", formatMonthFn: "formatMonthFn", formatYearFn: "formatYearFn", displayFormat: "displayFormat" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatePickerComponent),
@@ -3508,9 +3523,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], popover: [{
                 type: ViewChild,
                 args: ['popover']
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:mousedown', ['$event']]
             }] } });
 
 class PaginationComponent {
@@ -3815,19 +3827,28 @@ class PopoverComponent {
     popoverEl;
     isOpen = false;
     cleanup;
+    _outsideClickHandler = (event) => {
+        if (!this.triggerEl.nativeElement.contains(event.target) && !this.popoverEl?.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    };
     toggle() {
         this.isOpen ? this.close() : this.open();
     }
     open() {
         this.isOpen = true;
         this.onOpen.emit();
-        setTimeout(() => this.updatePosition());
+        setTimeout(() => {
+            this.updatePosition();
+            document.addEventListener('mousedown', this._outsideClickHandler);
+        });
     }
     close() {
         this.isOpen = false;
         this.onClose.emit();
         if (this.cleanup)
             this.cleanup();
+        document.removeEventListener('mousedown', this._outsideClickHandler);
     }
     updatePosition() {
         if (!this.triggerEl || !this.popoverEl)
@@ -3846,19 +3867,13 @@ class PopoverComponent {
             });
         });
     }
-    onClickOutside(event) {
-        if (this.isOpen &&
-            !this.triggerEl.nativeElement.contains(event.target) &&
-            !this.popoverEl?.nativeElement.contains(event.target)) {
-            this.close();
-        }
-    }
     ngOnDestroy() {
         if (this.cleanup)
             this.cleanup();
+        document.removeEventListener('mousedown', this._outsideClickHandler);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PopoverComponent, isStandalone: true, selector: "tolle-popover", inputs: { placement: "placement" }, outputs: { onOpen: "onOpen", onClose: "onClose" }, host: { listeners: { "document:mousedown": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "popoverEl", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PopoverComponent, isStandalone: true, selector: "tolle-popover", inputs: { placement: "placement" }, outputs: { onOpen: "onOpen", onClose: "onClose" }, viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "popoverEl", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
     <div class="inline-block" #trigger (click)="toggle()">
       <ng-content select="[trigger]"></ng-content>
     </div>
@@ -3906,9 +3921,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], popoverEl: [{
                 type: ViewChild,
                 args: ['popover']
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:mousedown', ['$event']]
             }] } });
 
 class PopoverContentComponent {
@@ -5157,6 +5169,11 @@ class DateRangePickerComponent {
     value = { start: null, end: null };
     isOpen = false;
     cleanupAutoUpdate;
+    _outsideClickHandler = (event) => {
+        if (!this.triggerContainer.nativeElement.contains(event.target) && !this.popover?.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    };
     constructor(cdr) {
         this.cdr = cdr;
     }
@@ -5185,7 +5202,10 @@ class DateRangePickerComponent {
     }
     open() {
         this.isOpen = true;
-        setTimeout(() => this.updatePosition());
+        setTimeout(() => {
+            this.updatePosition();
+            document.addEventListener('mousedown', this._outsideClickHandler);
+        });
     }
     close() {
         this.isOpen = false;
@@ -5193,6 +5213,7 @@ class DateRangePickerComponent {
             this.cleanupAutoUpdate();
             this.cleanupAutoUpdate = undefined;
         }
+        document.removeEventListener('mousedown', this._outsideClickHandler);
     }
     clear(event) {
         event.stopPropagation();
@@ -5242,12 +5263,10 @@ class DateRangePickerComponent {
             });
         });
     }
-    onClickOutside(event) {
-        if (this.isOpen &&
-            !this.triggerContainer.nativeElement.contains(event.target) &&
-            !this.popover?.nativeElement.contains(event.target)) {
-            this.close();
-        }
+    ngOnDestroy() {
+        if (this.cleanupAutoUpdate)
+            this.cleanupAutoUpdate();
+        document.removeEventListener('mousedown', this._outsideClickHandler);
     }
     onWindowResize() {
         if (this.isOpen) {
@@ -5274,7 +5293,7 @@ class DateRangePickerComponent {
     setDisabledState(isDisabled) { this.disabled = isDisabled; }
     cn = cn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DateRangePickerComponent, isStandalone: true, selector: "tolle-date-range-picker", inputs: { disabled: "disabled", placeholder: "placeholder", class: "class", disablePastDates: "disablePastDates", size: "size" }, host: { listeners: { "document:mousedown": "onClickOutside($event)", "window:resize": "onWindowResize()", "window:scroll": "onWindowScroll()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DateRangePickerComponent, isStandalone: true, selector: "tolle-date-range-picker", inputs: { disabled: "disabled", placeholder: "placeholder", class: "class", disablePastDates: "disablePastDates", size: "size" }, host: { listeners: { "window:resize": "onWindowResize()", "window:scroll": "onWindowScroll()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateRangePickerComponent),
@@ -5383,9 +5402,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], popover: [{
                 type: ViewChild,
                 args: ['popover']
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:mousedown', ['$event']]
             }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -12916,6 +12932,7 @@ class CountrySelectorComponent {
     showName = true;
     onSelect = new EventEmitter();
     popover;
+    searchInput;
     countryCodesService = inject(CountryCodesService);
     sanitizer = inject(DomSanitizer);
     cdr = inject(ChangeDetectorRef);
@@ -12942,20 +12959,20 @@ class CountrySelectorComponent {
             'focus:ring-4',
             'focus:ring-ring/30',
             'focus:ring-offset-0',
-            'focus:border-primary/80'
+            'focus:border-primary/80',
         ], !(this.readonly || this.disabled) && 'hover:border-accent', this.error && [
             'border-destructive',
             !(this.readonly || this.disabled) && [
                 'focus:border-destructive/80',
-                'focus:ring-destructive/30'
-            ]
+                'focus:ring-destructive/30',
+            ],
         ], this.disabled && 'cursor-not-allowed opacity-50 border-opacity-50', this.readonly && 'cursor-default border-dashed', this.class);
     }
     get computedLabelClass() {
-        return cn("text-sm font-medium text-foreground leading-none transition-opacity duration-200", this.disabled && "opacity-50");
+        return cn('text-sm font-medium text-foreground leading-none transition-opacity duration-200', this.disabled && 'opacity-50');
     }
     get iconClass() {
-        return cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform duration-200', this.popover?.isOpen ? 'rotate-180' : '', (this.size === 'xs' || this.size === 'sm') ? 'text-[14px]' : 'text-[18px]', (this.disabled || this.readonly) && 'opacity-30');
+        return cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform duration-200', this.popover?.isOpen ? 'rotate-180' : '', this.size === 'xs' || this.size === 'sm' ? 'text-[14px]' : 'text-[18px]', (this.disabled || this.readonly) && 'opacity-30');
     }
     getItemClass(country) {
         const isSelected = this.selectedCountry?.isoAlpha2 === country.isoAlpha2;
@@ -12979,11 +12996,16 @@ class CountrySelectorComponent {
     }
     getReturnValue(country) {
         switch (this.returnValue) {
-            case 'object': return country;
-            case 'isoAlpha2': return country.isoAlpha2;
-            case 'dialCode': return country.dialCode;
-            case 'name': return country.name;
-            default: return country.isoAlpha2;
+            case 'object':
+                return country;
+            case 'isoAlpha2':
+                return country.isoAlpha2;
+            case 'dialCode':
+                return country.dialCode;
+            case 'name':
+                return country.name;
+            default:
+                return country.isoAlpha2;
         }
     }
     onFocus() {
@@ -12993,6 +13015,11 @@ class CountrySelectorComponent {
         this.isFocused = false;
         this.onTouched();
     }
+    onPopoverOpen() {
+        setTimeout(() => {
+            this.searchInput?.nativeElement?.focus();
+        }, 0);
+    }
     onPopoverClose() {
         this.searchQuery = '';
         this.filterCountries('');
@@ -13018,26 +13045,33 @@ class CountrySelectorComponent {
         }
         this.cdr.markForCheck();
     }
-    registerOnChange(fn) { this.onChange = fn; }
-    registerOnTouched(fn) { this.onTouched = fn; }
-    setDisabledState(isDisabled) { this.disabled = isDisabled; }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountrySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CountrySelectorComponent, isStandalone: true, selector: "tolle-country-selector", inputs: { id: "id", label: "label", hint: "hint", errorMessage: "errorMessage", error: "error", hideHintOnFocus: "hideHintOnFocus", placeholder: "placeholder", class: "class", disabled: "disabled", readonly: "readonly", size: "size", defaultCountryCode: "defaultCountryCode", returnValue: "returnValue", showName: "showName" }, outputs: { onSelect: "onSelect" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CountrySelectorComponent),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
-    <div class="flex flex-col gap-1.5 w-full">
-      <label
-        *ngIf="label"
-        [for]="id"
-        [class]="computedLabelClass">
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `
+    <div class="flex w-full flex-col gap-1.5">
+      <label *ngIf="label" [for]="id" [class]="computedLabelClass">
         {{ label }}
       </label>
 
-      <tolle-popover #popover [placement]="'bottom-start'" (onClose)="onPopoverClose()">
+      <tolle-popover
+        #popover
+        [placement]="'bottom-start'"
+        (onOpen)="onPopoverOpen()"
+        (onClose)="onPopoverClose()">
         <div trigger class="w-full">
           <button
             type="button"
@@ -13047,19 +13081,17 @@ class CountrySelectorComponent {
             (blur)="onBlur()"
             (focus)="onFocus()"
             [attr.aria-invalid]="error"
-            [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
-          >
+            [attr.aria-describedby]="error && errorMessage ? id + '-error' : null">
             <div class="flex items-center gap-2 truncate">
               <img
                 *ngIf="selectedCountry"
                 [src]="getFlagUrl(selectedCountry.flag)"
-                class="h-4 w-6 rounded-sm border border-border object-cover flex-shrink-0"
-                [alt]="selectedCountry.name"
-              />
+                class="h-4 w-6 flex-shrink-0 rounded-sm border border-border object-cover"
+                [alt]="selectedCountry.name" />
               <span *ngIf="selectedCountry && showName" class="truncate font-medium">
                 {{ selectedCountry.name }}
               </span>
-              <span *ngIf="!selectedCountry" class="text-muted-foreground truncate">
+              <span *ngIf="!selectedCountry" class="truncate text-muted-foreground">
                 {{ placeholder }}
               </span>
             </div>
@@ -13067,16 +13099,16 @@ class CountrySelectorComponent {
           </button>
         </div>
 
-        <div class="flex flex-col bg-popover rounded-md border border-border shadow-md min-w-[300px] max-w-[400px] overflow-hidden">
-          <div class="p-2 border-b border-border bg-popover shadow-sm sticky top-0 z-10">
+        <div
+          class="flex min-w-[300px] max-w-[400px] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md">
+          <div class="sticky top-0 z-10 border-b border-border bg-popover p-2 shadow-sm">
             <tolle-input
               size="sm"
               placeholder="Search country..."
               [(ngModel)]="searchQuery"
               (ngModelChange)="filterCountries($event)"
               class="w-full"
-              #searchInput
-            >
+              #searchInput>
               <i prefix class="ri-search-line"></i>
             </tolle-input>
           </div>
@@ -13085,20 +13117,22 @@ class CountrySelectorComponent {
             <div
               *ngFor="let country of shadowCountries"
               (click)="selectCountry(country)"
-              [class]="getItemClass(country)"
-            >
-              <div class="flex items-center gap-3 w-full">
+              [class]="getItemClass(country)">
+              <div class="flex w-full items-center gap-3">
                 <img
                   [src]="getFlagUrl(country.flag)"
-                  class="h-4 w-6 rounded-sm border border-border object-cover flex-shrink-0"
-                  [alt]="country.name"
-                />
-                <span class="text-sm flex-1 truncate">{{ country.name }}</span>
+                  class="h-4 w-6 flex-shrink-0 rounded-sm border border-border object-cover"
+                  [alt]="country.name" />
+                <span class="flex-1 truncate text-sm">{{ country.name }}</span>
                 <span class="text-xs text-muted-foreground">{{ country.dialCode }}</span>
-                <i *ngIf="selectedCountry?.isoAlpha2 === country.isoAlpha2" class="ri-check-line text-primary"></i>
+                <i
+                  *ngIf="selectedCountry?.isoAlpha2 === country.isoAlpha2"
+                  class="ri-check-line text-primary"></i>
               </div>
             </div>
-            <div *ngIf="shadowCountries.length === 0" class="py-6 text-center text-sm text-muted-foreground">
+            <div
+              *ngIf="shadowCountries.length === 0"
+              class="py-6 text-center text-sm text-muted-foreground">
               No countries found.
             </div>
           </div>
@@ -13108,16 +13142,14 @@ class CountrySelectorComponent {
       <ng-container *ngIf="!disabled">
         <p
           *ngIf="hint && !error"
-          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
-          [class.opacity-0]="isFocused && hideHintOnFocus"
-        >
+          class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus">
           {{ hint }}
         </p>
         <p
           *ngIf="error && errorMessage"
           [id]="id + '-error'"
-          class="text-xs text-destructive px-1 font-medium"
-        >
+          class="px-1 text-xs font-medium text-destructive">
           {{ errorMessage }}
         </p>
       </ng-container>
@@ -13134,19 +13166,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CountrySelectorComponent),
-                            multi: true
-                        }
+                            multi: true,
+                        },
                     ],
                     template: `
-    <div class="flex flex-col gap-1.5 w-full">
-      <label
-        *ngIf="label"
-        [for]="id"
-        [class]="computedLabelClass">
+    <div class="flex w-full flex-col gap-1.5">
+      <label *ngIf="label" [for]="id" [class]="computedLabelClass">
         {{ label }}
       </label>
 
-      <tolle-popover #popover [placement]="'bottom-start'" (onClose)="onPopoverClose()">
+      <tolle-popover
+        #popover
+        [placement]="'bottom-start'"
+        (onOpen)="onPopoverOpen()"
+        (onClose)="onPopoverClose()">
         <div trigger class="w-full">
           <button
             type="button"
@@ -13156,19 +13189,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             (blur)="onBlur()"
             (focus)="onFocus()"
             [attr.aria-invalid]="error"
-            [attr.aria-describedby]="error && errorMessage ? id + '-error' : null"
-          >
+            [attr.aria-describedby]="error && errorMessage ? id + '-error' : null">
             <div class="flex items-center gap-2 truncate">
               <img
                 *ngIf="selectedCountry"
                 [src]="getFlagUrl(selectedCountry.flag)"
-                class="h-4 w-6 rounded-sm border border-border object-cover flex-shrink-0"
-                [alt]="selectedCountry.name"
-              />
+                class="h-4 w-6 flex-shrink-0 rounded-sm border border-border object-cover"
+                [alt]="selectedCountry.name" />
               <span *ngIf="selectedCountry && showName" class="truncate font-medium">
                 {{ selectedCountry.name }}
               </span>
-              <span *ngIf="!selectedCountry" class="text-muted-foreground truncate">
+              <span *ngIf="!selectedCountry" class="truncate text-muted-foreground">
                 {{ placeholder }}
               </span>
             </div>
@@ -13176,16 +13207,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </button>
         </div>
 
-        <div class="flex flex-col bg-popover rounded-md border border-border shadow-md min-w-[300px] max-w-[400px] overflow-hidden">
-          <div class="p-2 border-b border-border bg-popover shadow-sm sticky top-0 z-10">
+        <div
+          class="flex min-w-[300px] max-w-[400px] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md">
+          <div class="sticky top-0 z-10 border-b border-border bg-popover p-2 shadow-sm">
             <tolle-input
               size="sm"
               placeholder="Search country..."
               [(ngModel)]="searchQuery"
               (ngModelChange)="filterCountries($event)"
               class="w-full"
-              #searchInput
-            >
+              #searchInput>
               <i prefix class="ri-search-line"></i>
             </tolle-input>
           </div>
@@ -13194,20 +13225,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <div
               *ngFor="let country of shadowCountries"
               (click)="selectCountry(country)"
-              [class]="getItemClass(country)"
-            >
-              <div class="flex items-center gap-3 w-full">
+              [class]="getItemClass(country)">
+              <div class="flex w-full items-center gap-3">
                 <img
                   [src]="getFlagUrl(country.flag)"
-                  class="h-4 w-6 rounded-sm border border-border object-cover flex-shrink-0"
-                  [alt]="country.name"
-                />
-                <span class="text-sm flex-1 truncate">{{ country.name }}</span>
+                  class="h-4 w-6 flex-shrink-0 rounded-sm border border-border object-cover"
+                  [alt]="country.name" />
+                <span class="flex-1 truncate text-sm">{{ country.name }}</span>
                 <span class="text-xs text-muted-foreground">{{ country.dialCode }}</span>
-                <i *ngIf="selectedCountry?.isoAlpha2 === country.isoAlpha2" class="ri-check-line text-primary"></i>
+                <i
+                  *ngIf="selectedCountry?.isoAlpha2 === country.isoAlpha2"
+                  class="ri-check-line text-primary"></i>
               </div>
             </div>
-            <div *ngIf="shadowCountries.length === 0" class="py-6 text-center text-sm text-muted-foreground">
+            <div
+              *ngIf="shadowCountries.length === 0"
+              class="py-6 text-center text-sm text-muted-foreground">
               No countries found.
             </div>
           </div>
@@ -13217,21 +13250,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <ng-container *ngIf="!disabled">
         <p
           *ngIf="hint && !error"
-          class="text-xs text-muted-foreground px-1 transition-opacity duration-200"
-          [class.opacity-0]="isFocused && hideHintOnFocus"
-        >
+          class="px-1 text-xs text-muted-foreground transition-opacity duration-200"
+          [class.opacity-0]="isFocused && hideHintOnFocus">
           {{ hint }}
         </p>
         <p
           *ngIf="error && errorMessage"
           [id]="id + '-error'"
-          class="text-xs text-destructive px-1 font-medium"
-        >
+          class="px-1 text-xs font-medium text-destructive">
           {{ errorMessage }}
         </p>
       </ng-container>
     </div>
-  `
+  `,
                 }]
         }], propDecorators: { id: [{
                 type: Input
@@ -13266,6 +13297,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], popover: [{
                 type: ViewChild,
                 args: ['popover']
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
             }] } });
 
 class PhoneNumberInputComponent {