codexly-ui 0.22.1 → 0.23.1

package/fesm2022/codexly-ui.mjs

@@ -14075,11 +14075,6 @@ class ClxPaginationComponent {
     _destroyRef = inject(DestroyRef);
     // ── FormControl interno para el select de pageSize ─────────────────────────
     _pageSizeCtrl = new FormControl(null);
-    /** True once the user has explicitly picked a pageSize from the select — after that, their
-     *  choice is respected even if a later filter shrinks totalItems below it. Until then, a
-     *  caller-provided default (e.g. 20) that exceeds a small totalItems is auto-corrected down
-     *  to the smallest available option, so the select never opens pre-selected on the largest value. */
-    _userTouchedPageSize = false;
     constructor() {
         // Sincroniza el pageSize model → FormControl cada vez que cambia desde afuera
         effect(() => {
@@ -14088,31 +14083,14 @@ class ClxPaginationComponent {
                 this._pageSizeCtrl.setValue(ps, { emitEvent: false });
             }
         });
-        // Mientras el usuario no haya elegido un pageSize a propósito, si el default provisto por el
-        // padre excede totalItems, se ajusta al más pequeño disponible en vez de quedar seleccionado
-        // como si fuera el "más grande elegido". Debe emitir pageChange/sizeChange igual que la
-        // selección manual — si no, el consumidor (ej. clx-table → su padre real) nunca se entera
-        // del nuevo tamaño y sigue pidiendo datos al backend con el size viejo.
-        effect(() => {
-            if (this._userTouchedPageSize)
-                return;
-            const total = this.totalItems();
-            if (!total || total <= 0)
-                return;
-            const smallest = this._pageSizeOptions()[0]?.value;
-            if (smallest != null && this.pageSize() > total && smallest !== this.pageSize()) {
-                this.pageSize.set(smallest);
-                this.currentPage.set(1);
-                this.sizeChange.emit({ pageSize: smallest });
-                this.pageChange.emit({ page: 1, pageSize: smallest });
-            }
-        });
+        // El pageSize solo cambia cuando el usuario lo elige: nunca se ajusta solo según totalItems.
+        // Antes se reducía a la opción más pequeña cuando había menos registros que el pageSize, lo
+        // que mostraba 5 por página donde cabían todos y obligaba al consumidor a pedir los datos de nuevo.
         // Sincroniza el FormControl → pageSize model cuando el usuario elige
         this._pageSizeCtrl.valueChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(val => {
             const newSize = Number(val);
             if (!val || !Number.isFinite(newSize) || newSize <= 0 || newSize === this.pageSize())
                 return;
-            this._userTouchedPageSize = true;
             this.pageSize.set(newSize);
             this.currentPage.set(1);
             this.sizeChange.emit({ pageSize: newSize });
@@ -19732,9 +19710,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 let _clxSearchIdCounter = 0;
 /** Storefront search bar — same color/size/CVA conventions as ClxInputComponent, but styled as
  *  one continuous pill (input fused with a solid search button) rather than a bordered field with
- *  a detached button, matching how e-commerce header search boxes are typically laid out. */
+ *  a detached button, matching how e-commerce header search boxes are typically laid out.
+ *
+ *  Optional autocomplete: the host listens to (queryChange) — the text, debounced, once it has
+ *  `minChars` — and feeds [suggestions] back (product rows with image and price, shortcuts, past
+ *  searches, a "¿Quisiste decir…?" correction, the result total). The panel opens under the bar,
+ *  supports ↑ ↓ Enter Esc, and reports picks through (suggestionSelect); Enter without a picked row,
+ *  the button, the correction and "Ver todos" emit (search). With [openOnFocus] the panel also shows
+ *  for an empty box (e.g. recent searches). */
 class ClxSearchComponent {
     _themeSvc = inject(ClxThemeService);
+    _el = inject((ElementRef));
+    _sso = inject(ScrollStrategyOptions);
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     /** Overrides only the search button's text color — see ClxButtonComponent's textColor input. */
@@ -19747,13 +19734,45 @@ class ClxSearchComponent {
     value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Disabled state for standalone use (without FormControl) */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Autocomplete content for the current text; null = no panel. */
+    suggestions = input(null, ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    /** The host is fetching suggestions. */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** (queryChange) waits this long after the last keystroke. */
+    debounceMs = input(250, ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
+    /** (queryChange) only from this many characters (0 = also for an empty box). */
+    minChars = input(2, ...(ngDevMode ? [{ debugName: "minChars" }] : /* istanbul ignore next */ []));
+    /** Show the panel when focusing an empty box (recent searches…). */
+    openOnFocus = input(false, ...(ngDevMode ? [{ debugName: "openOnFocus" }] : /* istanbul ignore next */ []));
     search = output();
+    /** Debounced text for the host to fetch suggestions for ('' when cleared). */
+    queryChange = output();
+    suggestionSelect = output();
     _inputId = `clx-search-${++_clxSearchIdCounter}`;
     _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     _cvaConnected = false;
     _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    _dismissed = signal(false, ...(ngDevMode ? [{ debugName: "_dismissed" }] : /* istanbul ignore next */ []));
+    _active = signal(null, ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
+    _panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
+    _debounce;
     _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _scrollStrategy = this._sso.reposition();
+    _positions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 6 },
+    ];
+    /** Flat list of the panel's rows, for ↑ ↓. */
+    _rows = computed(() => (this.suggestions()?.groups ?? [])
+        .flatMap(g => g.items.map(item => ({ group: g.key, item }))), ...(ngDevMode ? [{ debugName: "_rows" }] : /* istanbul ignore next */ []));
+    _panelOpen = computed(() => {
+        if (!this._focused() || this._dismissed() || this._disabled())
+            return false;
+        const s = this.suggestions();
+        const hasContent = !!s && (!!s.correction || s.groups.some(g => g.items.length > 0));
+        return hasContent && (this._value().trim().length > 0 || this.openOnFocus());
+    }, ...(ngDevMode ? [{ debugName: "_panelOpen" }] : /* istanbul ignore next */ []));
     _valueEffect = effect(() => {
         const v = this.value();
         if (!this._cvaConnected)
@@ -19761,6 +19780,9 @@ class ClxSearchComponent {
     }, ...(ngDevMode ? [{ debugName: "_valueEffect" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     _onTouched = () => { };
+    constructor() {
+        inject(DestroyRef).onDestroy(() => clearTimeout(this._debounce));
+    }
     _sizeConfig = computed(() => INPUT_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _buttonSize = computed(() => {
         switch (this._size()) {
@@ -19769,6 +19791,7 @@ class ClxSearchComponent {
             default: return 'md';
         }
     }, ...(ngDevMode ? [{ debugName: "_buttonSize" }] : /* istanbul ignore next */ []));
+    _accentText = computed(() => resolveColor(this._color()).textEmphasis, ...(ngDevMode ? [{ debugName: "_accentText" }] : /* istanbul ignore next */ []));
     _wrapperClass = computed(() => {
         const focusCls = this._disabled() ? '' : resolveColor(this._color()).focusWithin;
         return `relative flex items-stretch ${resolveRadius(this._themeSvc.config().borderRadius)} border border-clx-border ${focusCls} overflow-hidden transition-[border-color,box-shadow] duration-200`;
@@ -19797,34 +19820,106 @@ class ClxSearchComponent {
         const val = event.target.value;
         this._value.set(val);
         this._onChange(val);
+        this._dismissed.set(false);
+        this._active.set(null);
+        this._emitQuery(val);
+    }
+    _handleFocus() {
+        this._panelWidth.set(Math.round(this._el.nativeElement.getBoundingClientRect().width));
+        this._focused.set(true);
+        this._dismissed.set(false);
+        if (this.openOnFocus() && !this._value().trim())
+            this.queryChange.emit('');
     }
     _handleBlur() {
         this._onTouched();
+        this._focused.set(false);
+    }
+    _handleKeydown(event) {
+        const rows = this._rows();
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (!this._panelOpen() || !rows.length)
+                return;
+            event.preventDefault();
+            const current = this._active();
+            const index = current ? rows.findIndex(r => r.group === current.group && r.item.id === current.id) : -1;
+            const next = event.key === 'ArrowDown'
+                ? (index + 1) % rows.length
+                : (index <= 0 ? rows.length - 1 : index - 1);
+            this._active.set({ group: rows[next].group, id: rows[next].item.id });
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            const current = this._active();
+            const row = current && this._panelOpen()
+                ? rows.find(r => r.group === current.group && r.item.id === current.id)
+                : undefined;
+            if (row)
+                this._select(row.group, row.item);
+            else
+                this._handleSubmit();
+        }
+        else if (event.key === 'Escape') {
+            this._close();
+        }
+    }
+    _isActive(group, item) {
+        const a = this._active();
+        return !!a && a.group === group && a.id === item.id;
+    }
+    _activate(group, item) {
+        this._active.set({ group, id: item.id });
+    }
+    _select(group, item) {
+        this._close();
+        this.suggestionSelect.emit({ group, item });
+    }
+    _searchFor(text) {
+        this._value.set(text);
+        this._onChange(text);
+        this._handleSubmit();
+    }
+    _close() {
+        this._dismissed.set(true);
+        this._active.set(null);
     }
     _handleSubmit() {
         if (this._disabled())
             return;
+        this._close();
+        clearTimeout(this._debounce);
         this.search.emit(this._value());
     }
+    _emitQuery(val) {
+        clearTimeout(this._debounce);
+        const text = val.trim();
+        if (text.length > 0 && text.length < this.minChars())
+            return;
+        this._debounce = setTimeout(() => this.queryChange.emit(text), text ? this.debounceMs() : 0);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxSearchComponent, isStandalone: true, selector: "clx-search", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, buttonTextColor: { classPropertyName: "buttonTextColor", publicName: "buttonTextColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search" }, host: { classAttribute: "block w-full" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxSearchComponent, isStandalone: true, selector: "clx-search", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, buttonTextColor: { classPropertyName: "buttonTextColor", publicName: "buttonTextColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search", queryChange: "queryChange", suggestionSelect: "suggestionSelect" }, host: { classAttribute: "block w-full" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClxSearchComponent),
                 multi: true,
             },
         ], ngImport: i0, template: `
-    <div [class]="_wrapperClass()">
+    <div [class]="_wrapperClass()" cdkOverlayOrigin #origin="cdkOverlayOrigin">
       <input
         [id]="_inputId"
         type="search"
+        role="combobox"
+        [attr.aria-expanded]="_panelOpen()"
+        [attr.aria-controls]="_inputId + '-panel'"
         [placeholder]="placeholder()"
         [disabled]="_disabled()"
         [value]="_value()"
         [class]="_inputClass()"
         autocomplete="off"
         (input)="_handleInput($event)"
-        (keydown.enter)="_handleSubmit()"
+        (focus)="_handleFocus()"
+        (keydown)="_handleKeydown($event)"
         (blur)="_handleBlur()"
       />
       <button
@@ -19841,14 +19936,77 @@ class ClxSearchComponent {
         {{ buttonLabel() }}
       </button>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_panelOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayWidth]="_panelWidth()"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_close()"
+      (detach)="_close()">
+      <div [id]="_inputId + '-panel'" role="listbox"
+           class="w-full max-h-[70vh] overflow-y-auto bg-clx-surface rounded-xl shadow-xl border border-clx-border py-2"
+           (mousedown)="$event.preventDefault()">
+        @if (loading()) {
+          <div class="flex items-center gap-2 px-4 py-2 text-xs text-clx-text-subtle">
+            <clx-spinner size="xs" [color]="_color()" /> Buscando…
+          </div>
+        }
+        @if (suggestions()?.correction; as correction) {
+          <button type="button" class="w-full text-left px-4 py-2 text-sm text-clx-text-muted hover:bg-clx-surface-2"
+                  (click)="_searchFor(correction)">
+            ¿Quisiste decir <span class="font-semibold" [class]="_accentText()">{{ correction }}</span>?
+          </button>
+        }
+        @for (group of suggestions()?.groups ?? []; track group.key) {
+          @if (group.items.length) {
+            <p class="px-4 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-clx-text-subtle">{{ group.title }}</p>
+            @for (item of group.items; track item.id) {
+              <button type="button" role="option"
+                      [attr.aria-selected]="_isActive(group.key, item)"
+                      class="w-full flex items-center gap-3 px-4 py-2 text-left transition-colors"
+                      [class]="_isActive(group.key, item) ? 'bg-clx-surface-2' : 'hover:bg-clx-surface-2'"
+                      (mouseenter)="_activate(group.key, item)"
+                      (click)="_select(group.key, item)">
+                @if (item.image) {
+                  <img [src]="item.image" [alt]="item.label" class="w-10 h-10 rounded-lg object-cover shrink-0 bg-clx-surface-2" />
+                } @else if (item.icon) {
+                  <span class="w-8 h-8 rounded-lg bg-clx-surface-2 flex items-center justify-center shrink-0">
+                    <span clx-icon [name]="item.icon" size="sm" class="text-clx-text-muted"></span>
+                  </span>
+                }
+                <span class="flex-1 min-w-0">
+                  <span class="block text-sm text-clx-text-label truncate">{{ item.label }}</span>
+                  @if (item.sublabel) {
+                    <span class="block text-xs text-clx-text-subtle truncate">{{ item.sublabel }}</span>
+                  }
+                </span>
+                @if (item.meta) {
+                  <span class="text-sm font-semibold text-clx-text-label shrink-0">{{ item.meta }}</span>
+                }
+              </button>
+            }
+          }
+        }
+        @if (_value().trim() && suggestions()?.total) {
+          <button type="button" class="w-full text-left px-4 pt-3 pb-1 text-sm font-semibold" [class]="_accentText()"
+                  (click)="_handleSubmit()">
+            Ver los {{ suggestions()!.total }} resultados de “{{ _value().trim() }}”
+          </button>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSpinnerComponent, selector: "clx-spinner", inputs: ["size", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxSearchComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-search',
                     standalone: true,
-                    imports: [ClxButtonComponent],
+                    imports: [OverlayModule, ClxButtonComponent, ClxIconComponent, ClxSpinnerComponent],
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -19857,17 +20015,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         },
                     ],
                     template: `
-    <div [class]="_wrapperClass()">
+    <div [class]="_wrapperClass()" cdkOverlayOrigin #origin="cdkOverlayOrigin">
       <input
         [id]="_inputId"
         type="search"
+        role="combobox"
+        [attr.aria-expanded]="_panelOpen()"
+        [attr.aria-controls]="_inputId + '-panel'"
         [placeholder]="placeholder()"
         [disabled]="_disabled()"
         [value]="_value()"
         [class]="_inputClass()"
         autocomplete="off"
         (input)="_handleInput($event)"
-        (keydown.enter)="_handleSubmit()"
+        (focus)="_handleFocus()"
+        (keydown)="_handleKeydown($event)"
         (blur)="_handleBlur()"
       />
       <button
@@ -19884,6 +20046,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         {{ buttonLabel() }}
       </button>
     </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_panelOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayWidth]="_panelWidth()"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_close()"
+      (detach)="_close()">
+      <div [id]="_inputId + '-panel'" role="listbox"
+           class="w-full max-h-[70vh] overflow-y-auto bg-clx-surface rounded-xl shadow-xl border border-clx-border py-2"
+           (mousedown)="$event.preventDefault()">
+        @if (loading()) {
+          <div class="flex items-center gap-2 px-4 py-2 text-xs text-clx-text-subtle">
+            <clx-spinner size="xs" [color]="_color()" /> Buscando…
+          </div>
+        }
+        @if (suggestions()?.correction; as correction) {
+          <button type="button" class="w-full text-left px-4 py-2 text-sm text-clx-text-muted hover:bg-clx-surface-2"
+                  (click)="_searchFor(correction)">
+            ¿Quisiste decir <span class="font-semibold" [class]="_accentText()">{{ correction }}</span>?
+          </button>
+        }
+        @for (group of suggestions()?.groups ?? []; track group.key) {
+          @if (group.items.length) {
+            <p class="px-4 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-clx-text-subtle">{{ group.title }}</p>
+            @for (item of group.items; track item.id) {
+              <button type="button" role="option"
+                      [attr.aria-selected]="_isActive(group.key, item)"
+                      class="w-full flex items-center gap-3 px-4 py-2 text-left transition-colors"
+                      [class]="_isActive(group.key, item) ? 'bg-clx-surface-2' : 'hover:bg-clx-surface-2'"
+                      (mouseenter)="_activate(group.key, item)"
+                      (click)="_select(group.key, item)">
+                @if (item.image) {
+                  <img [src]="item.image" [alt]="item.label" class="w-10 h-10 rounded-lg object-cover shrink-0 bg-clx-surface-2" />
+                } @else if (item.icon) {
+                  <span class="w-8 h-8 rounded-lg bg-clx-surface-2 flex items-center justify-center shrink-0">
+                    <span clx-icon [name]="item.icon" size="sm" class="text-clx-text-muted"></span>
+                  </span>
+                }
+                <span class="flex-1 min-w-0">
+                  <span class="block text-sm text-clx-text-label truncate">{{ item.label }}</span>
+                  @if (item.sublabel) {
+                    <span class="block text-xs text-clx-text-subtle truncate">{{ item.sublabel }}</span>
+                  }
+                </span>
+                @if (item.meta) {
+                  <span class="text-sm font-semibold text-clx-text-label shrink-0">{{ item.meta }}</span>
+                }
+              </button>
+            }
+          }
+        }
+        @if (_value().trim() && suggestions()?.total) {
+          <button type="button" class="w-full text-left px-4 pt-3 pb-1 text-sm font-semibold" [class]="_accentText()"
+                  (click)="_handleSubmit()">
+            Ver los {{ suggestions()!.total }} resultados de “{{ _value().trim() }}”
+          </button>
+        }
+      </div>
+    </ng-template>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -19891,7 +20116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         class: 'block w-full',
                     },
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], buttonTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTextColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], search: [{ type: i0.Output, args: ["search"] }] } });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], buttonTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonTextColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], suggestionSelect: [{ type: i0.Output, args: ["suggestionSelect"] }] } });
 
 class ClxAnimateGroupDirective {
     stagger = input(100, { ...(ngDevMode ? { debugName: "stagger" } : /* istanbul ignore next */ {}), transform: numberAttribute });