@es.framework/ng.ui.core 2.0.65 → 2.0.66

package/fesm2022/es.framework-ng.ui.core-formly-prime-icon-picker.mjs

@@ -144,189 +144,189 @@ class PrimeIconPickerComponent extends FieldType {
     trackIcon = (_, icon) => icon.class;
     trackCategory = (_, cat) => cat.value || 'all';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PrimeIconPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: PrimeIconPickerComponent, isStandalone: true, selector: "formly-field-prime-icon-picker", viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-  <div class="relative inline-block w-full max-w-[320px]">
-    <!-- Trigger -->
-    <button
-      type="button"
-      class="group w-full flex items-center gap-2 px-3 py-2.5 border rounded-lg shadow-sm
-             bg-white dark:bg-gray-800 dark:border-gray-700
-             hover:bg-gray-50 dark:hover:bg-gray-700
-             focus:outline-none focus:ring-2 focus:ring-blue-500/40"
-      (click)="togglePopover($event)"
-    >
-      <span class="w-9 h-9 flex items-center justify-center rounded-md
-                   bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700">
-        <i [ngClass]="selectedIconClass" class="text-lg"></i>
-      </span>
-
-      <div class="min-w-0 flex-1 text-left">
-        <div class="text-sm font-semibold text-gray-800 dark:text-gray-100 truncate">
-          {{ selectedIconName }}
-        </div>
-        <div class="text-[11px] text-gray-500 dark:text-gray-400 truncate">
-          {{ selectedIconClass }}
-        </div>
-      </div>
-
-      <i class="pi pi-chevron-down text-xs text-gray-500 dark:text-gray-300 transition-transform"
-        ></i>
-    </button>
-
-    <!-- Popover -->
-    <p-popover
-      #popover
-      [appendTo]="'body'"
-      [style]="{ width: '420px', maxWidth: '95vw' }"
-      styleClass="shadow-2xl border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden"
-    >
-      <ng-template pTemplate="content">
-        <!-- Header -->
-        <div class="p-4 bg-white dark:bg-gray-800">
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <div class="text-sm font-bold text-gray-800 dark:text-gray-100">
-                Pick an icon
-              </div>
-              <div class="text-xs text-gray-500 dark:text-gray-400">
-                Search or choose a category
-              </div>
-            </div>
-
-            <button type="button"
-              class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-              (click)="popover.hide()">
-              <i class="pi pi-times text-sm text-gray-600 dark:text-gray-300"></i>
-            </button>
-          </div>
-
-          <!-- Search + Select -->
-          <div class="mt-3 flex gap-2">
-            <div class="relative flex-1">
-              <i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
-
-              <input
-                pInputText
-                type="text"
-                autocomplete="off"
-                placeholder="Search icons…"
-                [(ngModel)]="searchQuery"
-                (ngModelChange)="applyFilters()"
-                class="w-full pl-9 pr-9"
-              />
-
-              <button *ngIf="searchQuery"
-                type="button"
-                class="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
-                (click)="searchQuery=''; applyFilters()">
-                <i class="pi pi-times text-xs text-gray-500"></i>
-              </button>
-            </div>
-
-            <p-select
-              [options]="categories"
-              optionLabel="label"
-              optionValue="value"
-              [(ngModel)]="selectedCategory"
-              (ngModelChange)="applyFilters()"
-              placeholder="All"
-              [style]="{ width: '160px' }"
-            ></p-select>
-          </div>
-
-          <!-- Category Chips -->
-          <div class="mt-3 flex flex-wrap gap-2">
-            <button
-              type="button"
-              *ngFor="let cat of categories; trackBy: trackCategory"
-              (click)="selectCategory(cat.value)"
-              class="px-3 py-1.5 text-xs rounded-full border transition
-                     hover:bg-gray-100 dark:hover:bg-gray-700"
-              [ngClass]="{
-                'bg-blue-50 border-blue-300 text-blue-700 dark:bg-blue-900/40 dark:border-blue-700 dark:text-blue-200': selectedCategory === cat.value,
-                'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200': selectedCategory !== cat.value
-              }"
-            >
-              {{ cat.label }}
-            </button>
-          </div>
-        </div>
-
-        <!-- Divider -->
-        <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-
-        <!-- Grid -->
-        <div class="p-3 bg-gray-50 dark:bg-gray-900 max-h-[360px] overflow-y-auto">
-          <div *ngIf="filtered.length === 0" class="text-center py-10 text-gray-500">
-            <div class="text-sm font-semibold">No icons found</div>
-            <div class="text-xs">Try another keyword</div>
-          </div>
-
-          <div class="grid grid-cols-6 sm:grid-cols-7 gap-2">
-            <button
-              type="button"
-              *ngFor="let icon of filtered; trackBy: trackIcon"
-              (click)="onIconClick(icon, $event)"
-              class="relative group flex flex-col items-center justify-center gap-1.5
-                     p-2.5 rounded-xl border transition
-                     hover:shadow-sm hover:-translate-y-[1px]
-                     focus:outline-none focus:ring-2 focus:ring-blue-500/40"
-              [ngClass]="{
-                'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700': formControl.value !== icon.class,
-                'bg-blue-50 dark:bg-blue-900/40 border-blue-400 dark:border-blue-700 ring-2 ring-blue-500/30': formControl.value === icon.class
-              }"
-              [title]="icon.name"
-            >
-              <i [ngClass]="icon.class" class="text-xl"></i>
-
-              <span class="text-[10px] text-gray-600 dark:text-gray-300 truncate w-full text-center">
-                {{ icon.name }}
-              </span>
-
-              <!-- Tooltip-like hover -->
-              <span
-                class="pointer-events-none absolute -top-2 left-1/2 -translate-x-1/2 -translate-y-full
-                       opacity-0 group-hover:opacity-100 transition
-                       px-2 py-1 text-[11px] rounded-md
-                       bg-gray-900 text-white shadow-lg whitespace-nowrap"
-              >
-                {{ icon.class }}
-              </span>
-            </button>
-          </div>
-        </div>
-
-        <!-- Footer -->
-        <div class="px-4 py-3 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
-          <div class="flex items-center justify-between">
-            <span class="text-xs text-gray-500 dark:text-gray-400">
-              Showing <b class="text-gray-700 dark:text-gray-200">{{ filtered.length }}</b> icons
-            </span>
-
-            <div class="flex items-center gap-2">
-              <button
-                type="button"
-                class="px-3 py-1.5 text-xs rounded-md border border-gray-200 dark:border-gray-700
-                       hover:bg-gray-100 dark:hover:bg-gray-700"
-                (click)="selectCategory(''); searchQuery=''; applyFilters()"
-              >
-                Reset
-              </button>
-
-              <button
-                type="button"
-                class="px-3 py-1.5 text-xs rounded-md bg-blue-600 text-white
-                       hover:bg-blue-700"
-                (click)="popover.hide()"
-              >
-                Done
-              </button>
-            </div>
-          </div>
-        </div>
-      </ng-template>
-    </p-popover>
-  </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: PrimeIconPickerComponent, isStandalone: true, selector: "formly-field-prime-icon-picker", viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+  <div class="relative inline-block w-full max-w-[320px]">
+    <!-- Trigger -->
+    <button
+      type="button"
+      class="group w-full flex items-center gap-2 px-3 py-2.5 border rounded-lg shadow-sm
+             bg-white dark:bg-gray-800 dark:border-gray-700
+             hover:bg-gray-50 dark:hover:bg-gray-700
+             focus:outline-none focus:ring-2 focus:ring-blue-500/40"
+      (click)="togglePopover($event)"
+    >
+      <span class="w-9 h-9 flex items-center justify-center rounded-md
+                   bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700">
+        <i [ngClass]="selectedIconClass" class="text-lg"></i>
+      </span>
+
+      <div class="min-w-0 flex-1 text-left">
+        <div class="text-sm font-semibold text-gray-800 dark:text-gray-100 truncate">
+          {{ selectedIconName }}
+        </div>
+        <div class="text-[11px] text-gray-500 dark:text-gray-400 truncate">
+          {{ selectedIconClass }}
+        </div>
+      </div>
+
+      <i class="pi pi-chevron-down text-xs text-gray-500 dark:text-gray-300 transition-transform"
+        ></i>
+    </button>
+
+    <!-- Popover -->
+    <p-popover
+      #popover
+      [appendTo]="'body'"
+      [style]="{ width: '420px', maxWidth: '95vw' }"
+      styleClass="shadow-2xl border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden"
+    >
+      <ng-template pTemplate="content">
+        <!-- Header -->
+        <div class="p-4 bg-white dark:bg-gray-800">
+          <div class="flex items-start justify-between gap-3">
+            <div>
+              <div class="text-sm font-bold text-gray-800 dark:text-gray-100">
+                Pick an icon
+              </div>
+              <div class="text-xs text-gray-500 dark:text-gray-400">
+                Search or choose a category
+              </div>
+            </div>
+
+            <button type="button"
+              class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+              (click)="popover.hide()">
+              <i class="pi pi-times text-sm text-gray-600 dark:text-gray-300"></i>
+            </button>
+          </div>
+
+          <!-- Search + Select -->
+          <div class="mt-3 flex gap-2">
+            <div class="relative flex-1">
+              <i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
+
+              <input
+                pInputText
+                type="text"
+                autocomplete="off"
+                placeholder="Search icons…"
+                [(ngModel)]="searchQuery"
+                (ngModelChange)="applyFilters()"
+                class="w-full pl-9 pr-9"
+              />
+
+              <button *ngIf="searchQuery"
+                type="button"
+                class="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+                (click)="searchQuery=''; applyFilters()">
+                <i class="pi pi-times text-xs text-gray-500"></i>
+              </button>
+            </div>
+
+            <p-select
+              [options]="categories"
+              optionLabel="label"
+              optionValue="value"
+              [(ngModel)]="selectedCategory"
+              (ngModelChange)="applyFilters()"
+              placeholder="All"
+              [style]="{ width: '160px' }"
+            ></p-select>
+          </div>
+
+          <!-- Category Chips -->
+          <div class="mt-3 flex flex-wrap gap-2">
+            <button
+              type="button"
+              *ngFor="let cat of categories; trackBy: trackCategory"
+              (click)="selectCategory(cat.value)"
+              class="px-3 py-1.5 text-xs rounded-full border transition
+                     hover:bg-gray-100 dark:hover:bg-gray-700"
+              [ngClass]="{
+                'bg-blue-50 border-blue-300 text-blue-700 dark:bg-blue-900/40 dark:border-blue-700 dark:text-blue-200': selectedCategory === cat.value,
+                'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200': selectedCategory !== cat.value
+              }"
+            >
+              {{ cat.label }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Divider -->
+        <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
+
+        <!-- Grid -->
+        <div class="p-3 bg-gray-50 dark:bg-gray-900 max-h-[360px] overflow-y-auto">
+          <div *ngIf="filtered.length === 0" class="text-center py-10 text-gray-500">
+            <div class="text-sm font-semibold">No icons found</div>
+            <div class="text-xs">Try another keyword</div>
+          </div>
+
+          <div class="grid grid-cols-6 sm:grid-cols-7 gap-2">
+            <button
+              type="button"
+              *ngFor="let icon of filtered; trackBy: trackIcon"
+              (click)="onIconClick(icon, $event)"
+              class="relative group flex flex-col items-center justify-center gap-1.5
+                     p-2.5 rounded-xl border transition
+                     hover:shadow-sm hover:-translate-y-[1px]
+                     focus:outline-none focus:ring-2 focus:ring-blue-500/40"
+              [ngClass]="{
+                'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700': formControl.value !== icon.class,
+                'bg-blue-50 dark:bg-blue-900/40 border-blue-400 dark:border-blue-700 ring-2 ring-blue-500/30': formControl.value === icon.class
+              }"
+              [title]="icon.name"
+            >
+              <i [ngClass]="icon.class" class="text-xl"></i>
+
+              <span class="text-[10px] text-gray-600 dark:text-gray-300 truncate w-full text-center">
+                {{ icon.name }}
+              </span>
+
+              <!-- Tooltip-like hover -->
+              <span
+                class="pointer-events-none absolute -top-2 left-1/2 -translate-x-1/2 -translate-y-full
+                       opacity-0 group-hover:opacity-100 transition
+                       px-2 py-1 text-[11px] rounded-md
+                       bg-gray-900 text-white shadow-lg whitespace-nowrap"
+              >
+                {{ icon.class }}
+              </span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="px-4 py-3 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-gray-500 dark:text-gray-400">
+              Showing <b class="text-gray-700 dark:text-gray-200">{{ filtered.length }}</b> icons
+            </span>
+
+            <div class="flex items-center gap-2">
+              <button
+                type="button"
+                class="px-3 py-1.5 text-xs rounded-md border border-gray-200 dark:border-gray-700
+                       hover:bg-gray-100 dark:hover:bg-gray-700"
+                (click)="selectCategory(''); searchQuery=''; applyFilters()"
+              >
+                Reset
+              </button>
+
+              <button
+                type="button"
+                class="px-3 py-1.5 text-xs rounded-md bg-blue-600 text-white
+                       hover:bg-blue-700"
+                (click)="popover.hide()"
+              >
+                Done
+              </button>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+    </p-popover>
+  </div>
 `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i6.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PrimeIconPickerComponent, decorators: [{
@@ -344,189 +344,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         SelectModule,
                         PopoverModule,
                     ],
-                    template: `
-  <div class="relative inline-block w-full max-w-[320px]">
-    <!-- Trigger -->
-    <button
-      type="button"
-      class="group w-full flex items-center gap-2 px-3 py-2.5 border rounded-lg shadow-sm
-             bg-white dark:bg-gray-800 dark:border-gray-700
-             hover:bg-gray-50 dark:hover:bg-gray-700
-             focus:outline-none focus:ring-2 focus:ring-blue-500/40"
-      (click)="togglePopover($event)"
-    >
-      <span class="w-9 h-9 flex items-center justify-center rounded-md
-                   bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700">
-        <i [ngClass]="selectedIconClass" class="text-lg"></i>
-      </span>
-
-      <div class="min-w-0 flex-1 text-left">
-        <div class="text-sm font-semibold text-gray-800 dark:text-gray-100 truncate">
-          {{ selectedIconName }}
-        </div>
-        <div class="text-[11px] text-gray-500 dark:text-gray-400 truncate">
-          {{ selectedIconClass }}
-        </div>
-      </div>
-
-      <i class="pi pi-chevron-down text-xs text-gray-500 dark:text-gray-300 transition-transform"
-        ></i>
-    </button>
-
-    <!-- Popover -->
-    <p-popover
-      #popover
-      [appendTo]="'body'"
-      [style]="{ width: '420px', maxWidth: '95vw' }"
-      styleClass="shadow-2xl border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden"
-    >
-      <ng-template pTemplate="content">
-        <!-- Header -->
-        <div class="p-4 bg-white dark:bg-gray-800">
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <div class="text-sm font-bold text-gray-800 dark:text-gray-100">
-                Pick an icon
-              </div>
-              <div class="text-xs text-gray-500 dark:text-gray-400">
-                Search or choose a category
-              </div>
-            </div>
-
-            <button type="button"
-              class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-              (click)="popover.hide()">
-              <i class="pi pi-times text-sm text-gray-600 dark:text-gray-300"></i>
-            </button>
-          </div>
-
-          <!-- Search + Select -->
-          <div class="mt-3 flex gap-2">
-            <div class="relative flex-1">
-              <i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
-
-              <input
-                pInputText
-                type="text"
-                autocomplete="off"
-                placeholder="Search icons…"
-                [(ngModel)]="searchQuery"
-                (ngModelChange)="applyFilters()"
-                class="w-full pl-9 pr-9"
-              />
-
-              <button *ngIf="searchQuery"
-                type="button"
-                class="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
-                (click)="searchQuery=''; applyFilters()">
-                <i class="pi pi-times text-xs text-gray-500"></i>
-              </button>
-            </div>
-
-            <p-select
-              [options]="categories"
-              optionLabel="label"
-              optionValue="value"
-              [(ngModel)]="selectedCategory"
-              (ngModelChange)="applyFilters()"
-              placeholder="All"
-              [style]="{ width: '160px' }"
-            ></p-select>
-          </div>
-
-          <!-- Category Chips -->
-          <div class="mt-3 flex flex-wrap gap-2">
-            <button
-              type="button"
-              *ngFor="let cat of categories; trackBy: trackCategory"
-              (click)="selectCategory(cat.value)"
-              class="px-3 py-1.5 text-xs rounded-full border transition
-                     hover:bg-gray-100 dark:hover:bg-gray-700"
-              [ngClass]="{
-                'bg-blue-50 border-blue-300 text-blue-700 dark:bg-blue-900/40 dark:border-blue-700 dark:text-blue-200': selectedCategory === cat.value,
-                'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200': selectedCategory !== cat.value
-              }"
-            >
-              {{ cat.label }}
-            </button>
-          </div>
-        </div>
-
-        <!-- Divider -->
-        <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-
-        <!-- Grid -->
-        <div class="p-3 bg-gray-50 dark:bg-gray-900 max-h-[360px] overflow-y-auto">
-          <div *ngIf="filtered.length === 0" class="text-center py-10 text-gray-500">
-            <div class="text-sm font-semibold">No icons found</div>
-            <div class="text-xs">Try another keyword</div>
-          </div>
-
-          <div class="grid grid-cols-6 sm:grid-cols-7 gap-2">
-            <button
-              type="button"
-              *ngFor="let icon of filtered; trackBy: trackIcon"
-              (click)="onIconClick(icon, $event)"
-              class="relative group flex flex-col items-center justify-center gap-1.5
-                     p-2.5 rounded-xl border transition
-                     hover:shadow-sm hover:-translate-y-[1px]
-                     focus:outline-none focus:ring-2 focus:ring-blue-500/40"
-              [ngClass]="{
-                'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700': formControl.value !== icon.class,
-                'bg-blue-50 dark:bg-blue-900/40 border-blue-400 dark:border-blue-700 ring-2 ring-blue-500/30': formControl.value === icon.class
-              }"
-              [title]="icon.name"
-            >
-              <i [ngClass]="icon.class" class="text-xl"></i>
-
-              <span class="text-[10px] text-gray-600 dark:text-gray-300 truncate w-full text-center">
-                {{ icon.name }}
-              </span>
-
-              <!-- Tooltip-like hover -->
-              <span
-                class="pointer-events-none absolute -top-2 left-1/2 -translate-x-1/2 -translate-y-full
-                       opacity-0 group-hover:opacity-100 transition
-                       px-2 py-1 text-[11px] rounded-md
-                       bg-gray-900 text-white shadow-lg whitespace-nowrap"
-              >
-                {{ icon.class }}
-              </span>
-            </button>
-          </div>
-        </div>
-
-        <!-- Footer -->
-        <div class="px-4 py-3 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
-          <div class="flex items-center justify-between">
-            <span class="text-xs text-gray-500 dark:text-gray-400">
-              Showing <b class="text-gray-700 dark:text-gray-200">{{ filtered.length }}</b> icons
-            </span>
-
-            <div class="flex items-center gap-2">
-              <button
-                type="button"
-                class="px-3 py-1.5 text-xs rounded-md border border-gray-200 dark:border-gray-700
-                       hover:bg-gray-100 dark:hover:bg-gray-700"
-                (click)="selectCategory(''); searchQuery=''; applyFilters()"
-              >
-                Reset
-              </button>
-
-              <button
-                type="button"
-                class="px-3 py-1.5 text-xs rounded-md bg-blue-600 text-white
-                       hover:bg-blue-700"
-                (click)="popover.hide()"
-              >
-                Done
-              </button>
-            </div>
-          </div>
-        </div>
-      </ng-template>
-    </p-popover>
-  </div>
+                    template: `
+  <div class="relative inline-block w-full max-w-[320px]">
+    <!-- Trigger -->
+    <button
+      type="button"
+      class="group w-full flex items-center gap-2 px-3 py-2.5 border rounded-lg shadow-sm
+             bg-white dark:bg-gray-800 dark:border-gray-700
+             hover:bg-gray-50 dark:hover:bg-gray-700
+             focus:outline-none focus:ring-2 focus:ring-blue-500/40"
+      (click)="togglePopover($event)"
+    >
+      <span class="w-9 h-9 flex items-center justify-center rounded-md
+                   bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700">
+        <i [ngClass]="selectedIconClass" class="text-lg"></i>
+      </span>
+
+      <div class="min-w-0 flex-1 text-left">
+        <div class="text-sm font-semibold text-gray-800 dark:text-gray-100 truncate">
+          {{ selectedIconName }}
+        </div>
+        <div class="text-[11px] text-gray-500 dark:text-gray-400 truncate">
+          {{ selectedIconClass }}
+        </div>
+      </div>
+
+      <i class="pi pi-chevron-down text-xs text-gray-500 dark:text-gray-300 transition-transform"
+        ></i>
+    </button>
+
+    <!-- Popover -->
+    <p-popover
+      #popover
+      [appendTo]="'body'"
+      [style]="{ width: '420px', maxWidth: '95vw' }"
+      styleClass="shadow-2xl border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden"
+    >
+      <ng-template pTemplate="content">
+        <!-- Header -->
+        <div class="p-4 bg-white dark:bg-gray-800">
+          <div class="flex items-start justify-between gap-3">
+            <div>
+              <div class="text-sm font-bold text-gray-800 dark:text-gray-100">
+                Pick an icon
+              </div>
+              <div class="text-xs text-gray-500 dark:text-gray-400">
+                Search or choose a category
+              </div>
+            </div>
+
+            <button type="button"
+              class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+              (click)="popover.hide()">
+              <i class="pi pi-times text-sm text-gray-600 dark:text-gray-300"></i>
+            </button>
+          </div>
+
+          <!-- Search + Select -->
+          <div class="mt-3 flex gap-2">
+            <div class="relative flex-1">
+              <i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
+
+              <input
+                pInputText
+                type="text"
+                autocomplete="off"
+                placeholder="Search icons…"
+                [(ngModel)]="searchQuery"
+                (ngModelChange)="applyFilters()"
+                class="w-full pl-9 pr-9"
+              />
+
+              <button *ngIf="searchQuery"
+                type="button"
+                class="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+                (click)="searchQuery=''; applyFilters()">
+                <i class="pi pi-times text-xs text-gray-500"></i>
+              </button>
+            </div>
+
+            <p-select
+              [options]="categories"
+              optionLabel="label"
+              optionValue="value"
+              [(ngModel)]="selectedCategory"
+              (ngModelChange)="applyFilters()"
+              placeholder="All"
+              [style]="{ width: '160px' }"
+            ></p-select>
+          </div>
+
+          <!-- Category Chips -->
+          <div class="mt-3 flex flex-wrap gap-2">
+            <button
+              type="button"
+              *ngFor="let cat of categories; trackBy: trackCategory"
+              (click)="selectCategory(cat.value)"
+              class="px-3 py-1.5 text-xs rounded-full border transition
+                     hover:bg-gray-100 dark:hover:bg-gray-700"
+              [ngClass]="{
+                'bg-blue-50 border-blue-300 text-blue-700 dark:bg-blue-900/40 dark:border-blue-700 dark:text-blue-200': selectedCategory === cat.value,
+                'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200': selectedCategory !== cat.value
+              }"
+            >
+              {{ cat.label }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Divider -->
+        <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
+
+        <!-- Grid -->
+        <div class="p-3 bg-gray-50 dark:bg-gray-900 max-h-[360px] overflow-y-auto">
+          <div *ngIf="filtered.length === 0" class="text-center py-10 text-gray-500">
+            <div class="text-sm font-semibold">No icons found</div>
+            <div class="text-xs">Try another keyword</div>
+          </div>
+
+          <div class="grid grid-cols-6 sm:grid-cols-7 gap-2">
+            <button
+              type="button"
+              *ngFor="let icon of filtered; trackBy: trackIcon"
+              (click)="onIconClick(icon, $event)"
+              class="relative group flex flex-col items-center justify-center gap-1.5
+                     p-2.5 rounded-xl border transition
+                     hover:shadow-sm hover:-translate-y-[1px]
+                     focus:outline-none focus:ring-2 focus:ring-blue-500/40"
+              [ngClass]="{
+                'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700': formControl.value !== icon.class,
+                'bg-blue-50 dark:bg-blue-900/40 border-blue-400 dark:border-blue-700 ring-2 ring-blue-500/30': formControl.value === icon.class
+              }"
+              [title]="icon.name"
+            >
+              <i [ngClass]="icon.class" class="text-xl"></i>
+
+              <span class="text-[10px] text-gray-600 dark:text-gray-300 truncate w-full text-center">
+                {{ icon.name }}
+              </span>
+
+              <!-- Tooltip-like hover -->
+              <span
+                class="pointer-events-none absolute -top-2 left-1/2 -translate-x-1/2 -translate-y-full
+                       opacity-0 group-hover:opacity-100 transition
+                       px-2 py-1 text-[11px] rounded-md
+                       bg-gray-900 text-white shadow-lg whitespace-nowrap"
+              >
+                {{ icon.class }}
+              </span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="px-4 py-3 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-gray-500 dark:text-gray-400">
+              Showing <b class="text-gray-700 dark:text-gray-200">{{ filtered.length }}</b> icons
+            </span>
+
+            <div class="flex items-center gap-2">
+              <button
+                type="button"
+                class="px-3 py-1.5 text-xs rounded-md border border-gray-200 dark:border-gray-700
+                       hover:bg-gray-100 dark:hover:bg-gray-700"
+                (click)="selectCategory(''); searchQuery=''; applyFilters()"
+              >
+                Reset
+              </button>
+
+              <button
+                type="button"
+                class="px-3 py-1.5 text-xs rounded-md bg-blue-600 text-white
+                       hover:bg-blue-700"
+                (click)="popover.hide()"
+              >
+                Done
+              </button>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+    </p-popover>
+  </div>
 `,
                 }]
         }], propDecorators: { popover: [{