@neural-ui/core 1.2.1 → 1.3.1

package/fesm2022/neural-ui-core-select.mjs

@@ -0,0 +1,710 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, ElementRef, effect, untracked, contentChild, input, output, signal, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { NeuUrlStateService } from '@neural-ui/core/url-state';
+import { NgTemplateOutlet } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * Directiva para personalizar el template de cada ítem del dropdown.
+ *
+ * Uso:
+ * ```html
+ * <neu-select [options]="opts" [formControl]="valueCtrl">
+ *   <ng-template neuSelectItem let-item>
+ *     <span class="flag flag-{{ item.value }}"></span>
+ *     {{ item.label }}
+ *   </ng-template>
+ * </neu-select>
+ * ```
+ */
+class NeuSelectItemDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuSelectItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: NeuSelectItemDirective, isStandalone: true, selector: "[neuSelectItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuSelectItemDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[neuSelectItem]', standalone: true }]
+        }] });
+/**
+ * Directiva para personalizar el template del ítem seleccionado (trigger).
+ *
+ * Uso:
+ * ```html
+ * <neu-select [options]="opts" [formControl]="valueCtrl">
+ *   <ng-template neuSelectSelected let-item>
+ *     <strong>{{ item?.label }}</strong>
+ *   </ng-template>
+ * </neu-select>
+ * ```
+ */
+class NeuSelectSelectedDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuSelectSelectedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: NeuSelectSelectedDirective, isStandalone: true, selector: "[neuSelectSelected]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuSelectSelectedDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[neuSelectSelected]', standalone: true }]
+        }] });
+
+let _neuSelectIdSeq = 0;
+/**
+ * NeuralUI Select Component
+ *
+ * Dropdown personalizado con soporte para ControlValueAccessor y Reactive Forms.
+ * Puede usarse dentro de un FormGroup o con un FormControl standalone.
+ * Cierra automáticamente al hacer clic fuera del componente.
+ *
+ * Uso:
+ *   readonly countryCtrl = new FormControl<string | null>(null);
+ *   <neu-select label="País" [options]="paises" [formControl]="countryCtrl" />
+ *
+ * Uso standalone fuera de un formulario completo:
+ *   readonly sortCtrl = new FormControl<string | null>('name');
+ *   <neu-select label="Orden" [options]="sortOptions" [formControl]="sortCtrl" />
+ */
+class NeuSelectComponent {
+    elementRef = inject(ElementRef);
+    _urlState = inject(NeuUrlStateService);
+    _mobileViewportMax = 768;
+    _viewportMargin = 16;
+    _urlParamSignals = new Map();
+    _getUrlParamSignal(key) {
+        let paramSignal = this._urlParamSignals.get(key);
+        if (!paramSignal) {
+            paramSignal = this._urlState.getParam(key);
+            this._urlParamSignals.set(key, paramSignal);
+        }
+        return paramSignal;
+    }
+    constructor() {
+        effect(() => {
+            const param = this.urlParam();
+            if (!param)
+                return;
+            const urlVal = this._getUrlParamSignal(param)();
+            if (urlVal !== untracked(() => this._value())) {
+                this._value.set(urlVal);
+                this._onChange(urlVal);
+            }
+        });
+    }
+    /** @internal — ID \u00fanico para asociar label con trigger */
+    _triggerId = `neu-select-trigger-${_neuSelectIdSeq++}`;
+    _panelId = `${this._triggerId}-panel`;
+    /** Template personalizado para cada opción del dropdown / Custom template for each dropdown option */
+    itemTpl = contentChild(NeuSelectItemDirective, ...(ngDevMode ? [{ debugName: "itemTpl" }] : /* istanbul ignore next */ []));
+    /** Template personalizado para el valor seleccionado en el trigger / Custom template for the selected value in the trigger */
+    selectedItemTpl = contentChild(NeuSelectSelectedDirective, ...(ngDevMode ? [{ debugName: "selectedItemTpl" }] : /* istanbul ignore next */ []));
+    /** Opciones del dropdown / Dropdown options */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Texto del floating label / Floating label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Placeholder cuando no hay selección / Placeholder when there is no selection */
+    placeholder = input('Seleccionar...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Mensaje de error / Error message */
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    /** Texto de ayuda bajo el campo / Helper text below the field */
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Deshabilita el select / Disables the select */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Muestra el label como flotante (true) o como label estático encima (false, por defecto) / Shows the label as floating (true) or static above (false, default) */
+    floatingLabel = input(false, ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+    /** Tamaño del campo: 'sm' = 36px | 'md' = 48px | 'lg' = 56px / Field size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Activa input de búsqueda/filtro en el panel / Activates the search/filter input in the panel */
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    /** Placeholder del input de búsqueda / Search input placeholder */
+    searchPlaceholder = input('Buscar...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Muestra un botón para limpiar la selección / Shows a button to clear the selection */
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    /** Texto cuando no hay opciones tras filtrar / Text when no options remain after filtering */
+    noResultsMessage = input('Sin resultados', ...(ngDevMode ? [{ debugName: "noResultsMessage" }] : /* istanbul ignore next */ []));
+    /** Aria-label del botón de limpiar / Aria-label for the clear button */
+    clearAriaLabel = input('Limpiar selección', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Sincroniza el valor seleccionado con este query param de la URL.
+     * Al seleccionar una opción se añade `?{urlParam}=value` a la URL.
+     * Pasar `null` (default) deshabilita la sincronización.
+     */
+    urlParam = input(null, ...(ngDevMode ? [{ debugName: "urlParam" }] : /* istanbul ignore next */ []));
+    /**
+     * Emite el objeto NeuSelectOption completo (incluyendo data) al seleccionar una opción.
+     * Emite null al limpiar la selección.
+     * El valor del formControl sigue siendo string.
+     */
+    selectionChange = output();
+    // Estado interno
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    panelPosition = signal({
+        position: null,
+        top: null,
+        left: null,
+        width: null,
+        maxHeight: null,
+    }, ...(ngDevMode ? [{ debugName: "panelPosition" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMessage(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        if (this.hasError()) {
+            return `${this._triggerId}-error`;
+        }
+        if (this.hint()) {
+            return `${this._triggerId}-hint`;
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const q = this.searchQuery().toLowerCase().trim();
+        if (!q)
+            return this.options();
+        return this.options().filter((o) => o.label.toLowerCase().includes(q));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    selectedLabel = computed(() => this.options().find((o) => o.value === this._value())?.label ?? null, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    _selectedOption = computed(() => this.options().find((o) => o.value === this._value()) ?? null, ...(ngDevMode ? [{ debugName: "_selectedOption" }] : /* istanbul ignore next */ []));
+    resultsAnnouncement = computed(() => {
+        if (!this.isOpen()) {
+            return '';
+        }
+        const total = this.filteredOptions().length;
+        if (!total) {
+            return this.noResultsMessage();
+        }
+        return total === 1 ? '1 opción disponible' : `${total} opciones disponibles`;
+    }, ...(ngDevMode ? [{ debugName: "resultsAnnouncement" }] : /* istanbul ignore next */ []));
+    // CVA
+    _onChange = () => { };
+    _onTouched = () => { };
+    writeValue(val) {
+        this._value.set(val ?? null);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    setDisabledState(isDisabled) {
+        this._cvaDisabled.set(isDisabled);
+    }
+    isDisabledFinal = computed(() => this.disabled() || this._cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabledFinal" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (!this.isDisabledFinal())
+            this.isOpen.update((v) => !v);
+        if (this.isOpen()) {
+            this.syncPanelPosition();
+            // Foco al primer item cuando abre con teclado
+            requestAnimationFrame(() => {
+                const first = this.elementRef.nativeElement.querySelector('.neu-select__option:not([aria-disabled="true"])');
+                first?.focus();
+            });
+        }
+        else {
+            this.resetPanelPosition();
+        }
+    }
+    close() {
+        this.isOpen.set(false);
+        this.searchQuery.set('');
+        this.resetPanelPosition();
+        this._onTouched();
+    }
+    /** Abre el panel y navega con flechas desde el trigger / Opens the panel and navigates with arrows from the trigger */
+    onTriggerKey(event) {
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        event.preventDefault();
+        if (!this.isOpen()) {
+            this.isOpen.set(true);
+            this.syncPanelPosition();
+            requestAnimationFrame(() => {
+                const first = this.elementRef.nativeElement.querySelector('.neu-select__option:not([aria-disabled="true"])');
+                first?.focus();
+            });
+        }
+    }
+    onTriggerActionKey(event) {
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        event.preventDefault();
+        this.toggle();
+    }
+    focusTrigger() {
+        this.elementRef.nativeElement.querySelector('.neu-select__trigger')?.focus();
+    }
+    /** Navega entre opciones con flechas / Navigates between options with arrows */
+    focusOptionByIndex(event, current, dir) {
+        event.preventDefault();
+        const opts = this.filteredOptions().filter((o) => !o.disabled);
+        const idx = opts.findIndex((o) => o.value === current.value);
+        const next = opts[(idx + dir + opts.length) % opts.length];
+        if (next) {
+            const el = this.elementRef.nativeElement.querySelector(`#neu-select-opt-${next.value}`);
+            el?.focus();
+        }
+    }
+    clearValue(event) {
+        event.stopPropagation();
+        this._value.set(null);
+        this._onChange(null);
+        const param = this.urlParam();
+        if (param)
+            this._urlState.setParam(param, null);
+        this._onTouched();
+        this.selectionChange.emit(null);
+        this.close();
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        this._value.set(option.value);
+        this._onChange(option.value);
+        const param = this.urlParam();
+        if (param)
+            this._urlState.setParam(param, option.value);
+        this.selectionChange.emit(option);
+        this.close();
+    }
+    onDocumentClick(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    onWindowResize() {
+        if (this.isOpen()) {
+            this.syncPanelPosition();
+        }
+    }
+    onWindowScroll() {
+        if (this.isOpen()) {
+            this.syncPanelPosition();
+        }
+    }
+    syncPanelPosition() {
+        requestAnimationFrame(() => {
+            const trigger = this.elementRef.nativeElement.querySelector('.neu-select__trigger');
+            if (!trigger)
+                return;
+            if (window.innerWidth > this._mobileViewportMax) {
+                this.resetPanelPosition();
+                return;
+            }
+            const triggerRect = trigger.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const width = Math.min(triggerRect.width, viewportWidth - this._viewportMargin * 2);
+            const left = Math.min(Math.max(triggerRect.left, this._viewportMargin), viewportWidth - this._viewportMargin - width);
+            const top = triggerRect.bottom + 6;
+            const maxHeight = Math.max(140, viewportHeight - top - this._viewportMargin);
+            this.panelPosition.set({
+                position: 'fixed',
+                top: `${top}px`,
+                left: `${left}px`,
+                width: `${width}px`,
+                maxHeight: `${maxHeight}px`,
+            });
+        });
+    }
+    resetPanelPosition() {
+        this.panelPosition.set({
+            position: null,
+            top: null,
+            left: null,
+            width: null,
+            maxHeight: null,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NeuSelectComponent, isStandalone: true, selector: "neu-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, urlParam: { classPropertyName: "urlParam", publicName: "urlParam", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "close()", "window:resize": "onWindowResize()", "window:scroll": "onWindowScroll()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NeuSelectComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "itemTpl", first: true, predicate: NeuSelectItemDirective, descendants: true, isSignal: true }, { propertyName: "selectedItemTpl", first: true, predicate: NeuSelectSelectedDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (!floatingLabel() && label()) {
+      <label class="neu-select__static-label" [for]="_triggerId" (click)="focusTrigger()">{{
+        label()
+      }}</label>
+    }
+    <div
+      class="neu-select"
+      [class.neu-select--open]="isOpen()"
+      [class.neu-select--disabled]="isDisabledFinal()"
+      [class.neu-select--error]="hasError()"
+      [class.neu-select--has-value]="!!_value()"
+      [class.neu-select--has-placeholder]="!!placeholder() && !_value()"
+      [class.neu-select--no-float]="!floatingLabel()"
+      [class.neu-select--sm]="size() === 'sm'"
+      [class.neu-select--lg]="size() === 'lg'"
+    >
+      <!-- Trigger ------>
+      <div
+        class="neu-select__trigger"
+        [id]="_triggerId"
+        [attr.tabindex]="isDisabledFinal() ? '-1' : '0'"
+        [attr.role]="'combobox'"
+        [attr.aria-haspopup]="'listbox'"
+        [attr.aria-expanded]="isOpen() ? 'true' : 'false'"
+        [attr.aria-controls]="_panelId"
+        [attr.aria-disabled]="isDisabledFinal() ? 'true' : null"
+        [attr.aria-invalid]="hasError() ? 'true' : null"
+        [attr.aria-describedby]="describedBy()"
+        [attr.aria-activedescendant]="isOpen() && _value() ? 'neu-select-opt-' + _value() : null"
+        [attr.aria-label]="label() || placeholder() || null"
+        (click)="toggle()"
+        (keydown.arrowDown)="onTriggerKey($any($event))"
+        (keydown.arrowUp)="onTriggerKey($any($event))"
+        (keydown.enter)="onTriggerActionKey($any($event))"
+        (keydown.space)="onTriggerActionKey($any($event))"
+      >
+        <!-- Floating label -->
+        @if (floatingLabel() && label()) {
+          <span class="neu-select__label">{{ label() }}</span>
+        }
+
+        <span class="neu-select__value">
+          @if (selectedLabel()) {
+            @if (selectedItemTpl()) {
+              <ng-container
+                [ngTemplateOutlet]="selectedItemTpl()!.templateRef"
+                [ngTemplateOutletContext]="{ $implicit: _selectedOption() }"
+              />
+            } @else {
+              {{ selectedLabel() }}
+            }
+          } @else {
+            <span class="neu-select__placeholder">{{ placeholder() }}</span>
+          }
+        </span>
+
+        <!-- Clear button -->
+        @if (clearable() && !!_value() && !isDisabledFinal()) {
+          <button
+            class="neu-select__clear"
+            type="button"
+            aria-label="Limpiar selección"
+            [attr.aria-label]="clearAriaLabel()"
+            (click)="clearValue($event)"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              aria-hidden="true"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        }
+
+        <!-- Chevron -->
+        <svg
+          class="neu-select__chevron"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </div>
+
+      <!-- Panel ------>
+      @if (isOpen()) {
+        <div
+          class="neu-select__panel"
+          role="listbox"
+          [id]="_panelId"
+          [attr.aria-label]="label()"
+          [style.position]="panelPosition().position"
+          [style.top]="panelPosition().top"
+          [style.left]="panelPosition().left"
+          [style.width]="panelPosition().width"
+          [style.max-height]="panelPosition().maxHeight"
+        >
+          @if (searchable()) {
+            <div class="neu-select__search">
+              <input
+                class="neu-select__search-input"
+                type="text"
+                [attr.aria-label]="'Search ' + label()"
+                [placeholder]="searchPlaceholder()"
+                [value]="searchQuery()"
+                (input)="searchQuery.set($any($event.target).value)"
+                (click)="$event.stopPropagation()"
+              />
+            </div>
+          }
+          @for (option of filteredOptions(); track option.value) {
+            <div
+              class="neu-select__option"
+              [class.neu-select__option--selected]="option.value === _value()"
+              [class.neu-select__option--disabled]="option.disabled"
+              role="option"
+              [id]="'neu-select-opt-' + option.value"
+              [attr.aria-selected]="option.value === _value()"
+              [attr.aria-disabled]="option.disabled"
+              [attr.tabindex]="option.disabled ? null : '-1'"
+              (click)="selectOption(option)"
+              (keydown.enter)="selectOption(option)"
+              (keydown.space)="selectOption(option)"
+              (keydown.arrowDown)="focusOptionByIndex($any($event), option, 1)"
+              (keydown.arrowUp)="focusOptionByIndex($any($event), option, -1)"
+            >
+              <!-- Checkmark en la seleccionada (siempre reserva el espacio) -->
+              <svg
+                class="neu-select__check"
+                [style.visibility]="option.value === _value() ? 'visible' : 'hidden'"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+              @if (itemTpl()) {
+                <ng-container
+                  [ngTemplateOutlet]="itemTpl()!.templateRef"
+                  [ngTemplateOutletContext]="{ $implicit: option }"
+                />
+              } @else {
+                {{ option.label }}
+              }
+            </div>
+          }
+          @if (filteredOptions().length === 0) {
+            <div class="neu-select__empty">{{ noResultsMessage() }}</div>
+          }
+        </div>
+      }
+      <div class="neu-select__sr-status" aria-live="polite" aria-atomic="true">
+        {{ resultsAnnouncement() }}
+      </div>
+    </div>
+
+    <!-- Error / hint -->
+    @if (hasError()) {
+      <p class="neu-select__error" [id]="_triggerId + '-error'" role="alert">
+        {{ errorMessage() }}
+      </p>
+    } @else if (hint()) {
+      <p class="neu-select__hint" [id]="_triggerId + '-hint'">{{ hint() }}</p>
+    }
+  `, isInline: true, styles: [".neu-select{position:relative;display:block}.neu-select--disabled{opacity:.6;pointer-events:none}.neu-select__trigger{display:flex;align-items:center;width:100%;height:48px;padding:0 var(--neu-space-3);padding-right:36px;background:var(--neu-surface);border:1.5px solid var(--neu-border);border-radius:var(--neu-radius);font-family:var(--neu-font-sans);font-size:var(--neu-text-base);color:var(--neu-text);cursor:pointer;text-align:left;outline:none;transition:border-color var(--neu-transition),box-shadow var(--neu-transition);position:relative}.neu-select__trigger:hover:not([aria-disabled=true]){border-color:var(--neu-border-hover)}.neu-select__trigger[aria-disabled=true]{cursor:not-allowed;background:var(--neu-surface-2)}.neu-select__trigger:focus-visible{border-color:var(--neu-primary);box-shadow:0 0 0 3px #007aff1f}.neu-select--open .neu-select__trigger{border-color:var(--neu-primary);box-shadow:0 0 0 3px #007aff1f;border-bottom-left-radius:0;border-bottom-right-radius:0}.neu-select--error .neu-select__trigger{border-color:var(--neu-error)}.neu-select--error .neu-select__trigger:focus-visible{box-shadow:0 0 0 3px #ef44441f}.neu-select__label{position:absolute;left:var(--neu-space-3);top:50%;transform:translateY(-50%);font-size:var(--neu-text-base);color:var(--neu-text-muted);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--neu-space-6));transition:top var(--neu-transition),font-size var(--neu-transition),color var(--neu-transition),transform var(--neu-transition),padding var(--neu-transition),background var(--neu-transition)}.neu-select--open .neu-select__label,.neu-select--has-value .neu-select__label{top:0;transform:translateY(-50%);font-size:12px;font-weight:600;letter-spacing:.01em;background:var(--neu-surface);padding:0 4px;left:calc(var(--neu-space-3) - 4px)}.neu-select--open .neu-select__label{color:var(--neu-primary)}.neu-select--error .neu-select__label{color:var(--neu-error)}.neu-select--disabled .neu-select__label{background:var(--neu-surface-2)}.neu-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neu-select--no-float .neu-select__value{padding-top:0}.neu-select__placeholder{color:var(--neu-text-disabled)}.neu-select:not(.neu-select--no-float):not(.neu-select--open) .neu-select__placeholder{visibility:hidden}.neu-select__chevron{position:absolute;right:var(--neu-space-3);top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--neu-text-muted);flex-shrink:0;transition:transform var(--neu-transition)}.neu-select--open .neu-select__chevron{transform:translateY(-50%) rotate(180deg);color:var(--neu-primary)}.neu-select__clear{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:2px;padding:0;border:none;background:transparent;color:var(--neu-text-muted);cursor:pointer;border-radius:var(--neu-radius-sm);flex-shrink:0;transition:color var(--neu-transition),background var(--neu-transition)}.neu-select__clear svg{width:14px;height:14px}.neu-select__clear:hover{color:var(--neu-text);background:var(--neu-surface-3)}.neu-select__clear:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px}.neu-select__panel{position:absolute;top:100%;left:0;right:0;z-index:var(--neu-z-dropdown);background:var(--neu-surface);border:1.5px solid var(--neu-primary);border-top:none;border-bottom-left-radius:var(--neu-radius);border-bottom-right-radius:var(--neu-radius);box-shadow:var(--neu-shadow-lg);max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--neu-surface-3) transparent;animation:neu-select-open .15s ease forwards}.neu-select__panel::-webkit-scrollbar{width:4px}.neu-select__panel::-webkit-scrollbar-thumb{background:var(--neu-surface-3);border-radius:99px}@media(max-width:600px){.neu-select__panel{left:auto;right:0;width:min(max(100%,220px),100vw - 2rem);max-width:calc(100vw - 2rem)}}@keyframes neu-select-open{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.neu-select__option{display:flex;align-items:center;gap:var(--neu-space-2);padding:var(--neu-space-3) var(--neu-space-4);font-size:var(--neu-text-sm);color:var(--neu-text);cursor:pointer;transition:background-color var(--neu-transition)}.neu-select__option:hover:not(.neu-select__option--disabled){background:var(--neu-primary-50);color:var(--neu-primary)}.neu-select__option--selected{color:var(--neu-primary);font-weight:600;background:var(--neu-primary-50)}.neu-select__option--disabled{opacity:.4;cursor:not-allowed}.neu-select__check{width:14px;height:14px;flex-shrink:0}.neu-select__error{margin-top:var(--neu-space-1);font-size:var(--neu-text-xs);color:var(--neu-error-text);font-family:var(--neu-font-sans)}.neu-select__hint{margin-top:var(--neu-space-1);font-size:var(--neu-text-xs);color:var(--neu-text-muted);font-family:var(--neu-font-sans)}.neu-select__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.neu-select__static-label{display:block;font-size:var(--neu-text-sm);font-weight:500;color:var(--neu-text-muted);margin-bottom:var(--neu-space-2)}.neu-select__search{padding:var(--neu-space-2);border-bottom:1px solid var(--neu-border);position:sticky;top:0;background:var(--neu-surface);z-index:1}.neu-select__search-input{width:100%;height:34px;padding:0 var(--neu-space-3);border:1.5px solid var(--neu-border);border-radius:var(--neu-radius-sm);background:var(--neu-bg);font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);color:var(--neu-text);outline:none;transition:border-color var(--neu-transition),box-shadow var(--neu-transition)}.neu-select__search-input:focus{border-color:var(--neu-primary);box-shadow:0 0 0 2px #007aff1f}.neu-select__search-input::placeholder{color:var(--neu-text-disabled)}.neu-select__empty{padding:var(--neu-space-4);text-align:center;font-size:var(--neu-text-sm);color:var(--neu-text-disabled);font-family:var(--neu-font-sans)}.neu-select--sm .neu-select__trigger{height:36px;font-size:var(--neu-text-sm)}.neu-select--lg .neu-select__trigger{height:56px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'neu-select', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NeuSelectComponent),
+                            multi: true,
+                        },
+                    ], host: {
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(keydown.escape)': 'close()',
+                        '(window:resize)': 'onWindowResize()',
+                        '(window:scroll)': 'onWindowScroll()',
+                    }, template: `
+    @if (!floatingLabel() && label()) {
+      <label class="neu-select__static-label" [for]="_triggerId" (click)="focusTrigger()">{{
+        label()
+      }}</label>
+    }
+    <div
+      class="neu-select"
+      [class.neu-select--open]="isOpen()"
+      [class.neu-select--disabled]="isDisabledFinal()"
+      [class.neu-select--error]="hasError()"
+      [class.neu-select--has-value]="!!_value()"
+      [class.neu-select--has-placeholder]="!!placeholder() && !_value()"
+      [class.neu-select--no-float]="!floatingLabel()"
+      [class.neu-select--sm]="size() === 'sm'"
+      [class.neu-select--lg]="size() === 'lg'"
+    >
+      <!-- Trigger ------>
+      <div
+        class="neu-select__trigger"
+        [id]="_triggerId"
+        [attr.tabindex]="isDisabledFinal() ? '-1' : '0'"
+        [attr.role]="'combobox'"
+        [attr.aria-haspopup]="'listbox'"
+        [attr.aria-expanded]="isOpen() ? 'true' : 'false'"
+        [attr.aria-controls]="_panelId"
+        [attr.aria-disabled]="isDisabledFinal() ? 'true' : null"
+        [attr.aria-invalid]="hasError() ? 'true' : null"
+        [attr.aria-describedby]="describedBy()"
+        [attr.aria-activedescendant]="isOpen() && _value() ? 'neu-select-opt-' + _value() : null"
+        [attr.aria-label]="label() || placeholder() || null"
+        (click)="toggle()"
+        (keydown.arrowDown)="onTriggerKey($any($event))"
+        (keydown.arrowUp)="onTriggerKey($any($event))"
+        (keydown.enter)="onTriggerActionKey($any($event))"
+        (keydown.space)="onTriggerActionKey($any($event))"
+      >
+        <!-- Floating label -->
+        @if (floatingLabel() && label()) {
+          <span class="neu-select__label">{{ label() }}</span>
+        }
+
+        <span class="neu-select__value">
+          @if (selectedLabel()) {
+            @if (selectedItemTpl()) {
+              <ng-container
+                [ngTemplateOutlet]="selectedItemTpl()!.templateRef"
+                [ngTemplateOutletContext]="{ $implicit: _selectedOption() }"
+              />
+            } @else {
+              {{ selectedLabel() }}
+            }
+          } @else {
+            <span class="neu-select__placeholder">{{ placeholder() }}</span>
+          }
+        </span>
+
+        <!-- Clear button -->
+        @if (clearable() && !!_value() && !isDisabledFinal()) {
+          <button
+            class="neu-select__clear"
+            type="button"
+            aria-label="Limpiar selección"
+            [attr.aria-label]="clearAriaLabel()"
+            (click)="clearValue($event)"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              aria-hidden="true"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        }
+
+        <!-- Chevron -->
+        <svg
+          class="neu-select__chevron"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </div>
+
+      <!-- Panel ------>
+      @if (isOpen()) {
+        <div
+          class="neu-select__panel"
+          role="listbox"
+          [id]="_panelId"
+          [attr.aria-label]="label()"
+          [style.position]="panelPosition().position"
+          [style.top]="panelPosition().top"
+          [style.left]="panelPosition().left"
+          [style.width]="panelPosition().width"
+          [style.max-height]="panelPosition().maxHeight"
+        >
+          @if (searchable()) {
+            <div class="neu-select__search">
+              <input
+                class="neu-select__search-input"
+                type="text"
+                [attr.aria-label]="'Search ' + label()"
+                [placeholder]="searchPlaceholder()"
+                [value]="searchQuery()"
+                (input)="searchQuery.set($any($event.target).value)"
+                (click)="$event.stopPropagation()"
+              />
+            </div>
+          }
+          @for (option of filteredOptions(); track option.value) {
+            <div
+              class="neu-select__option"
+              [class.neu-select__option--selected]="option.value === _value()"
+              [class.neu-select__option--disabled]="option.disabled"
+              role="option"
+              [id]="'neu-select-opt-' + option.value"
+              [attr.aria-selected]="option.value === _value()"
+              [attr.aria-disabled]="option.disabled"
+              [attr.tabindex]="option.disabled ? null : '-1'"
+              (click)="selectOption(option)"
+              (keydown.enter)="selectOption(option)"
+              (keydown.space)="selectOption(option)"
+              (keydown.arrowDown)="focusOptionByIndex($any($event), option, 1)"
+              (keydown.arrowUp)="focusOptionByIndex($any($event), option, -1)"
+            >
+              <!-- Checkmark en la seleccionada (siempre reserva el espacio) -->
+              <svg
+                class="neu-select__check"
+                [style.visibility]="option.value === _value() ? 'visible' : 'hidden'"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+              @if (itemTpl()) {
+                <ng-container
+                  [ngTemplateOutlet]="itemTpl()!.templateRef"
+                  [ngTemplateOutletContext]="{ $implicit: option }"
+                />
+              } @else {
+                {{ option.label }}
+              }
+            </div>
+          }
+          @if (filteredOptions().length === 0) {
+            <div class="neu-select__empty">{{ noResultsMessage() }}</div>
+          }
+        </div>
+      }
+      <div class="neu-select__sr-status" aria-live="polite" aria-atomic="true">
+        {{ resultsAnnouncement() }}
+      </div>
+    </div>
+
+    <!-- Error / hint -->
+    @if (hasError()) {
+      <p class="neu-select__error" [id]="_triggerId + '-error'" role="alert">
+        {{ errorMessage() }}
+      </p>
+    } @else if (hint()) {
+      <p class="neu-select__hint" [id]="_triggerId + '-hint'">{{ hint() }}</p>
+    }
+  `, styles: [".neu-select{position:relative;display:block}.neu-select--disabled{opacity:.6;pointer-events:none}.neu-select__trigger{display:flex;align-items:center;width:100%;height:48px;padding:0 var(--neu-space-3);padding-right:36px;background:var(--neu-surface);border:1.5px solid var(--neu-border);border-radius:var(--neu-radius);font-family:var(--neu-font-sans);font-size:var(--neu-text-base);color:var(--neu-text);cursor:pointer;text-align:left;outline:none;transition:border-color var(--neu-transition),box-shadow var(--neu-transition);position:relative}.neu-select__trigger:hover:not([aria-disabled=true]){border-color:var(--neu-border-hover)}.neu-select__trigger[aria-disabled=true]{cursor:not-allowed;background:var(--neu-surface-2)}.neu-select__trigger:focus-visible{border-color:var(--neu-primary);box-shadow:0 0 0 3px #007aff1f}.neu-select--open .neu-select__trigger{border-color:var(--neu-primary);box-shadow:0 0 0 3px #007aff1f;border-bottom-left-radius:0;border-bottom-right-radius:0}.neu-select--error .neu-select__trigger{border-color:var(--neu-error)}.neu-select--error .neu-select__trigger:focus-visible{box-shadow:0 0 0 3px #ef44441f}.neu-select__label{position:absolute;left:var(--neu-space-3);top:50%;transform:translateY(-50%);font-size:var(--neu-text-base);color:var(--neu-text-muted);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--neu-space-6));transition:top var(--neu-transition),font-size var(--neu-transition),color var(--neu-transition),transform var(--neu-transition),padding var(--neu-transition),background var(--neu-transition)}.neu-select--open .neu-select__label,.neu-select--has-value .neu-select__label{top:0;transform:translateY(-50%);font-size:12px;font-weight:600;letter-spacing:.01em;background:var(--neu-surface);padding:0 4px;left:calc(var(--neu-space-3) - 4px)}.neu-select--open .neu-select__label{color:var(--neu-primary)}.neu-select--error .neu-select__label{color:var(--neu-error)}.neu-select--disabled .neu-select__label{background:var(--neu-surface-2)}.neu-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neu-select--no-float .neu-select__value{padding-top:0}.neu-select__placeholder{color:var(--neu-text-disabled)}.neu-select:not(.neu-select--no-float):not(.neu-select--open) .neu-select__placeholder{visibility:hidden}.neu-select__chevron{position:absolute;right:var(--neu-space-3);top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--neu-text-muted);flex-shrink:0;transition:transform var(--neu-transition)}.neu-select--open .neu-select__chevron{transform:translateY(-50%) rotate(180deg);color:var(--neu-primary)}.neu-select__clear{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:2px;padding:0;border:none;background:transparent;color:var(--neu-text-muted);cursor:pointer;border-radius:var(--neu-radius-sm);flex-shrink:0;transition:color var(--neu-transition),background var(--neu-transition)}.neu-select__clear svg{width:14px;height:14px}.neu-select__clear:hover{color:var(--neu-text);background:var(--neu-surface-3)}.neu-select__clear:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px}.neu-select__panel{position:absolute;top:100%;left:0;right:0;z-index:var(--neu-z-dropdown);background:var(--neu-surface);border:1.5px solid var(--neu-primary);border-top:none;border-bottom-left-radius:var(--neu-radius);border-bottom-right-radius:var(--neu-radius);box-shadow:var(--neu-shadow-lg);max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--neu-surface-3) transparent;animation:neu-select-open .15s ease forwards}.neu-select__panel::-webkit-scrollbar{width:4px}.neu-select__panel::-webkit-scrollbar-thumb{background:var(--neu-surface-3);border-radius:99px}@media(max-width:600px){.neu-select__panel{left:auto;right:0;width:min(max(100%,220px),100vw - 2rem);max-width:calc(100vw - 2rem)}}@keyframes neu-select-open{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.neu-select__option{display:flex;align-items:center;gap:var(--neu-space-2);padding:var(--neu-space-3) var(--neu-space-4);font-size:var(--neu-text-sm);color:var(--neu-text);cursor:pointer;transition:background-color var(--neu-transition)}.neu-select__option:hover:not(.neu-select__option--disabled){background:var(--neu-primary-50);color:var(--neu-primary)}.neu-select__option--selected{color:var(--neu-primary);font-weight:600;background:var(--neu-primary-50)}.neu-select__option--disabled{opacity:.4;cursor:not-allowed}.neu-select__check{width:14px;height:14px;flex-shrink:0}.neu-select__error{margin-top:var(--neu-space-1);font-size:var(--neu-text-xs);color:var(--neu-error-text);font-family:var(--neu-font-sans)}.neu-select__hint{margin-top:var(--neu-space-1);font-size:var(--neu-text-xs);color:var(--neu-text-muted);font-family:var(--neu-font-sans)}.neu-select__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.neu-select__static-label{display:block;font-size:var(--neu-text-sm);font-weight:500;color:var(--neu-text-muted);margin-bottom:var(--neu-space-2)}.neu-select__search{padding:var(--neu-space-2);border-bottom:1px solid var(--neu-border);position:sticky;top:0;background:var(--neu-surface);z-index:1}.neu-select__search-input{width:100%;height:34px;padding:0 var(--neu-space-3);border:1.5px solid var(--neu-border);border-radius:var(--neu-radius-sm);background:var(--neu-bg);font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);color:var(--neu-text);outline:none;transition:border-color var(--neu-transition),box-shadow var(--neu-transition)}.neu-select__search-input:focus{border-color:var(--neu-primary);box-shadow:0 0 0 2px #007aff1f}.neu-select__search-input::placeholder{color:var(--neu-text-disabled)}.neu-select__empty{padding:var(--neu-space-4);text-align:center;font-size:var(--neu-text-sm);color:var(--neu-text-disabled);font-family:var(--neu-font-sans)}.neu-select--sm .neu-select__trigger{height:36px;font-size:var(--neu-text-sm)}.neu-select--lg .neu-select__trigger{height:56px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NeuSelectItemDirective), { isSignal: true }] }], selectedItemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NeuSelectSelectedDirective), { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], noResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsMessage", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], urlParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "urlParam", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NeuSelectComponent, NeuSelectItemDirective, NeuSelectSelectedDirective };
+//# sourceMappingURL=neural-ui-core-select.mjs.map