@neural-ui/core 1.2.1 → 1.3.1

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

@@ -0,0 +1,825 @@
+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 de Multiselect. / Directive to customize the template of each Multiselect dropdown item.
+ *
+ * Uso:
+ * ```html
+ * <neu-multiselect [options]="opts" [formControl]="valuesCtrl">
+ *   <ng-template neuMultiselectItem let-item>
+ *     <span class="flag flag-{{ item.value }}"></span>
+ *     {{ item.label }}
+ *   </ng-template>
+ * </neu-multiselect>
+ * ```
+ */
+class NeuMultiselectItemDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuMultiselectItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: NeuMultiselectItemDirective, isStandalone: true, selector: "[neuMultiselectItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuMultiselectItemDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[neuMultiselectItem]', standalone: true }]
+        }] });
+
+let _neuMultiselectIdSeq = 0;
+function arraysEqual(left, right) {
+    return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+/**
+ * NeuralUI Multiselect Component
+ *
+ * Dropdown de selección múltiple con chips, búsqueda integrada y soporte / Multiple selection dropdown with chips, integrated search and support
+ * para ControlValueAccessor y Reactive Forms. Puede usarse dentro de un FormGroup o con un FormControl standalone. / for ControlValueAccessor and Reactive Forms. It can be used inside a FormGroup or with a standalone FormControl.
+ *
+ * Uso:
+ *   readonly technologiesCtrl = new FormControl<string[]>([], { nonNullable: true });
+ *   <neu-multiselect label="Tecnologías" [options]="opts" [formControl]="technologiesCtrl" />
+ */
+class NeuMultiselectComponent {
+    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 urlRaw = this._getUrlParamSignal(param)();
+            const urlVals = urlRaw ? urlRaw.split(',').filter(Boolean) : [];
+            const current = untracked(() => this._values());
+            if (!arraysEqual(urlVals, current)) {
+                this._values.set(urlVals);
+                this._onChange(urlVals);
+            }
+        });
+    }
+    /** @internal */
+    _triggerId = `neu-multiselect-trigger-${_neuMultiselectIdSeq++}`;
+    _panelId = `${this._triggerId}-panel`;
+    /** Template personalizado para cada opción del dropdown / Custom template for each dropdown option */
+    itemTpl = contentChild(NeuMultiselectItemDirective, ...(ngDevMode ? [{ debugName: "itemTpl" }] : /* istanbul ignore next */ []));
+    /** Opciones del dropdown / Dropdown options */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Etiqueta del componente / Component label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Muestra el label como flotante dentro del campo (true) o estático encima (false) / Shows the label as floating inside the field (true) or static above (false) */
+    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 */ []));
+    /** 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 componente / Disables the component */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* 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 */ []));
+    /** Texto cuando no hay opciones tras filtrar / Text when no options remain after filtering */
+    noResultsMessage = input('Sin resultados', ...(ngDevMode ? [{ debugName: "noResultsMessage" }] : /* istanbul ignore next */ []));
+    /** Texto del botón de limpiar todas las selecciones / Button text to clear all selections */
+    clearAllLabel = input('Limpiar todo', ...(ngDevMode ? [{ debugName: "clearAllLabel" }] : /* istanbul ignore next */ []));
+    /** Muestra un botón × en el trigger para limpiar la selección de una vez / Shows a × button in the trigger to clear the selection at once */
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    /** Aria-label del botón clear que aparece en el trigger / Aria-label for the clear button shown in the trigger */
+    clearAriaLabel = input('Limpiar selección', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Sincroniza los valores seleccionados con este query param de la URL.
+     * Los valores se codifican como lista separada por comas: `?{urlParam}=a,b,c`.
+     * Pasar `null` (default) deshabilita la sincronización.
+     */
+    urlParam = input(null, ...(ngDevMode ? [{ debugName: "urlParam" }] : /* istanbul ignore next */ []));
+    /**
+     * Emite el array de NeuSelectOption completo (incluyendo data) al cambiar la selección.
+     * Emite [] al limpiar toda la selección.
+     * Los valores del formControl siguen siendo string[].
+     */
+    selectionChange = output();
+    // --- Estado interno ---
+    _values = signal([], ...(ngDevMode ? [{ debugName: "_values" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    _chipMode = signal('count', ...(ngDevMode ? [{ debugName: "_chipMode" }] : /* istanbul ignore next */ []));
+    panelPosition = signal({
+        position: null,
+        top: null,
+        left: null,
+        width: null,
+        maxHeight: null,
+    }, ...(ngDevMode ? [{ debugName: "panelPosition" }] : /* istanbul ignore next */ []));
+    _visibleChips = computed(() => this._values().slice(0, 3), ...(ngDevMode ? [{ debugName: "_visibleChips" }] : /* 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 */ []));
+    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(value) {
+        this._values.set(Array.isArray(value) ? value : []);
+    }
+    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 */ []));
+    // --- Helpers ---
+    labelFor(value) {
+        return this.options().find((o) => o.value === value)?.label ?? value;
+    }
+    isSelected(value) {
+        return this._values().includes(value);
+    }
+    toggle() {
+        if (this.isDisabledFinal())
+            return;
+        this.isOpen.update((v) => !v);
+        if (!this.isOpen()) {
+            this.searchQuery.set('');
+            this.resetPanelPosition();
+            this._onTouched();
+        }
+        else {
+            this.syncPanelPosition();
+            requestAnimationFrame(() => {
+                const first = this.elementRef.nativeElement.querySelector('.neu-multiselect__option:not([aria-disabled="true"])');
+                first?.focus();
+            });
+        }
+    }
+    /** Abre el panel y mueve el foco al primer item / Opens the panel and moves focus to the first item */
+    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-multiselect__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-multiselect__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-ms-opt-${next.value}`);
+            el?.focus();
+        }
+    }
+    close() {
+        this.isOpen.set(false);
+        this.searchQuery.set('');
+        this.resetPanelPosition();
+        this._onTouched();
+    }
+    toggleOption(option) {
+        if (option.disabled)
+            return;
+        const current = this._values();
+        const next = current.includes(option.value)
+            ? current.filter((v) => v !== option.value)
+            : [...current, option.value];
+        this._values.set(next);
+        this._onChange(next);
+        this.selectionChange.emit(this.options().filter((o) => next.includes(o.value)));
+        const param = this.urlParam();
+        if (param)
+            this._urlState.setParam(param, next.length ? next.join(',') : null);
+    }
+    removeValue(value, event) {
+        event.stopPropagation();
+        const next = this._values().filter((v) => v !== value);
+        this._values.set(next);
+        this._onChange(next);
+        this._onTouched();
+        this.selectionChange.emit(this.options().filter((o) => next.includes(o.value)));
+        const param = this.urlParam();
+        if (param)
+            this._urlState.setParam(param, next.length ? next.join(',') : null);
+    }
+    clearAll(event) {
+        event.stopPropagation();
+        this._values.set([]);
+        this._onChange([]);
+        this._onTouched();
+        this.selectionChange.emit([]);
+        const param = this.urlParam();
+        if (param)
+            this._urlState.setParam(param, null);
+    }
+    toggleChipMode(event) {
+        event.stopPropagation();
+        this._chipMode.set(this._chipMode() === 'chips' ? 'count' : 'chips');
+    }
+    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-multiselect__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(180, 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: NeuMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NeuMultiselectComponent, isStandalone: true, selector: "neu-multiselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", 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 }, 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 }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", 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(() => NeuMultiselectComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "itemTpl", first: true, predicate: NeuMultiselectItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (!floatingLabel() && label()) {
+      <label class="neu-multiselect__static-label" [for]="_triggerId" (click)="focusTrigger()">{{
+        label()
+      }}</label>
+    }
+    <div
+      class="neu-multiselect"
+      [class.neu-multiselect--open]="isOpen()"
+      [class.neu-multiselect--disabled]="isDisabledFinal()"
+      [class.neu-multiselect--error]="hasError()"
+      [class.neu-multiselect--has-value]="_values().length > 0"
+      [class.neu-multiselect--no-float]="!floatingLabel()"
+      [class.neu-multiselect--sm]="size() === 'sm'"
+      [class.neu-multiselect--lg]="size() === 'lg'"
+    >
+      <!-- Trigger -->
+      <div
+        class="neu-multiselect__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-label]="label() || 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-multiselect__label">{{ label() }}</span>
+        }
+        <span class="neu-multiselect__chips">
+          @if (_values().length === 0) {
+            <span class="neu-multiselect__placeholder">{{ placeholder() }}</span>
+          } @else if (_chipMode() === 'count') {
+            <span class="neu-multiselect__count-badge">{{ _values().length }} seleccionados</span>
+          } @else {
+            @for (val of _visibleChips(); track val) {
+              <span class="neu-multiselect__chip">
+                {{ labelFor(val) }}
+                <button
+                  class="neu-multiselect__chip-remove"
+                  type="button"
+                  [attr.aria-label]="'Eliminar ' + labelFor(val)"
+                  (click)="removeValue(val, $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>
+              </span>
+            }
+            @if (_values().length > 3) {
+              <span class="neu-multiselect__chip neu-multiselect__chip--overflow"
+                >+{{ _values().length - 3 }}</span
+              >
+            }
+          }
+        </span>
+
+        <!-- Clear button -->
+        @if (clearable() && _values().length > 0 && !isDisabledFinal()) {
+          <button
+            class="neu-multiselect__clear"
+            type="button"
+            [attr.aria-label]="clearAriaLabel()"
+            (click)="clearAll($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-multiselect__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-multiselect__panel"
+          role="listbox"
+          [id]="_panelId"
+          [attr.aria-multiselectable]="true"
+          [attr.aria-label]="label() || null"
+          [style.position]="panelPosition().position"
+          [style.top]="panelPosition().top"
+          [style.left]="panelPosition().left"
+          [style.width]="panelPosition().width"
+          [style.max-height]="panelPosition().maxHeight"
+        >
+          <!-- Search -->
+          @if (searchable()) {
+            <div class="neu-multiselect__search">
+              <input
+                class="neu-multiselect__search-input"
+                type="text"
+                [attr.aria-label]="'Search ' + label()"
+                [placeholder]="searchPlaceholder()"
+                [value]="searchQuery()"
+                (input)="searchQuery.set($any($event.target).value)"
+                (click)="$event.stopPropagation()"
+              />
+            </div>
+          }
+
+          <!-- Opciones -->
+          <div class="neu-multiselect__options">
+            @for (option of filteredOptions(); track option.value) {
+              <div
+                class="neu-multiselect__option"
+                [class.neu-multiselect__option--selected]="isSelected(option.value)"
+                [class.neu-multiselect__option--disabled]="option.disabled"
+                role="option"
+                [id]="'neu-ms-opt-' + option.value"
+                [attr.aria-selected]="isSelected(option.value)"
+                [attr.aria-disabled]="option.disabled"
+                [attr.tabindex]="option.disabled ? null : '-1'"
+                (click)="toggleOption(option)"
+                (keydown.enter)="toggleOption(option)"
+                (keydown.space)="toggleOption(option)"
+                (keydown.arrowDown)="focusOptionByIndex($any($event), option, 1)"
+                (keydown.arrowUp)="focusOptionByIndex($any($event), option, -1)"
+              >
+                <!-- Checkbox visual -->
+                <span
+                  class="neu-multiselect__checkbox"
+                  [class.neu-multiselect__checkbox--checked]="isSelected(option.value)"
+                >
+                  <svg
+                    class="neu-multiselect__checkbox-check"
+                    viewBox="0 0 12 10"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <polyline points="1 5 4.5 9 11 1" />
+                  </svg>
+                </span>
+                @if (itemTpl()) {
+                  <ng-container
+                    [ngTemplateOutlet]="itemTpl()!.templateRef"
+                    [ngTemplateOutletContext]="{ $implicit: option }"
+                  />
+                } @else {
+                  {{ option.label }}
+                }
+              </div>
+            }
+
+            @if (filteredOptions().length === 0) {
+              <div class="neu-multiselect__empty">{{ noResultsMessage() }}</div>
+            }
+          </div>
+
+          <!-- Footer: resumen + limpiar + toggle modo -->
+          @if (_values().length > 0) {
+            <div class="neu-multiselect__footer">
+              <span class="neu-multiselect__footer-count"
+                >{{ _values().length }} seleccionados</span
+              >
+              <div class="neu-multiselect__footer-actions">
+                <button
+                  class="neu-multiselect__footer-mode"
+                  type="button"
+                  [attr.aria-label]="_chipMode() === 'chips' ? 'Mostrar contador' : 'Mostrar chips'"
+                  (click)="toggleChipMode($event)"
+                >
+                  {{ _chipMode() === 'chips' ? '#' : '☰' }}
+                </button>
+                <button
+                  class="neu-multiselect__footer-clear"
+                  type="button"
+                  (click)="clearAll($event)"
+                >
+                  {{ clearAllLabel() }}
+                </button>
+              </div>
+            </div>
+          }
+        </div>
+      }
+
+      <div class="neu-multiselect__sr-status" aria-live="polite" aria-atomic="true">
+        {{ resultsAnnouncement() }}
+      </div>
+    </div>
+
+    @if (hasError()) {
+      <p class="neu-multiselect__error" [id]="_triggerId + '-error'" role="alert">
+        {{ errorMessage() }}
+      </p>
+    } @else if (hint()) {
+      <p class="neu-multiselect__hint" [id]="_triggerId + '-hint'">{{ hint() }}</p>
+    }
+  `, isInline: true, styles: [".neu-multiselect__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-multiselect__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-8));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-multiselect--open .neu-multiselect__label,.neu-multiselect--has-value .neu-multiselect__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-multiselect--open .neu-multiselect__label{color:var(--neu-primary)}.neu-multiselect--error .neu-multiselect__label{color:var(--neu-error)}.neu-multiselect--disabled .neu-multiselect__label{background:var(--neu-surface-2)}.neu-multiselect{position:relative;font-family:var(--neu-font-sans)}.neu-multiselect__trigger{display:flex;align-items:center;width:100%;min-height:48px;padding:var(--neu-space-2) var(--neu-space-3);padding-right:36px;background:var(--neu-surface);border:1.5px solid var(--neu-border);border-radius:var(--neu-radius);cursor:pointer;text-align:left;transition:border-color var(--neu-transition),box-shadow var(--neu-transition)}.neu-multiselect__trigger:hover:not([aria-disabled=true]){border-color:var(--neu-border-hover)}.neu-multiselect__trigger:focus-visible{outline:none;border-color:var(--neu-primary);box-shadow:0 0 0 3px #007aff1f}.neu-multiselect__trigger[aria-disabled=true]{opacity:.6;cursor:not-allowed;background:var(--neu-surface-2)}.neu-multiselect--open .neu-multiselect__trigger{border-color:var(--neu-primary);box-shadow:0 0 0 3px #007aff1f}.neu-multiselect--error .neu-multiselect__trigger{border-color:var(--neu-error)}.neu-multiselect--error .neu-multiselect__trigger:focus-visible{box-shadow:0 0 0 3px #ef44441f}.neu-multiselect__chips{display:flex;flex-wrap:wrap;gap:var(--neu-space-1);flex:1;min-width:0}.neu-multiselect__placeholder{color:var(--neu-text-disabled);font-size:var(--neu-text-base);line-height:1.5}.neu-multiselect:not(.neu-multiselect--no-float):not(.neu-multiselect--open) .neu-multiselect__placeholder{visibility:hidden}.neu-multiselect__chip{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 8px;background:var(--neu-primary-soft, rgba(0, 122, 255, .1));color:var(--neu-primary);border-radius:var(--neu-radius-sm);font-size:var(--neu-text-xs);font-weight:500;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.neu-multiselect__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.7;border-radius:2px;transition:opacity var(--neu-transition);flex-shrink:0}.neu-multiselect__chip-remove:hover{opacity:1}.neu-multiselect__chip-remove:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px}.neu-multiselect__chip-remove svg{width:10px;height:10px}.neu-multiselect__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-multiselect__clear svg{width:14px;height:14px}.neu-multiselect__clear:hover{color:var(--neu-text);background:var(--neu-surface-3)}.neu-multiselect__clear:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px}.neu-multiselect__chevron{position:absolute;right:var(--neu-space-3);top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--neu-text-muted);pointer-events:none;transition:transform var(--neu-transition);flex-shrink:0}.neu-multiselect--open .neu-multiselect__chevron{transform:translateY(-50%) rotate(180deg)}.neu-multiselect__panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:200;background:var(--neu-surface);border:1.5px solid var(--neu-border);border-radius:var(--neu-radius);box-shadow:var(--neu-shadow-lg);overflow:hidden;max-height:280px;display:flex;flex-direction:column;animation:neu-multiselect-fade-in .12s ease}@media(max-width:600px){.neu-multiselect__panel{left:auto;right:0;width:min(max(100%,240px),100vw - 2rem);max-width:calc(100vw - 2rem)}}@keyframes neu-multiselect-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.neu-multiselect__search{padding:var(--neu-space-2);border-bottom:1px solid var(--neu-border);flex-shrink:0}.neu-multiselect__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-multiselect__search-input:focus{border-color:var(--neu-primary);box-shadow:0 0 0 2px #007aff1f}.neu-multiselect__search-input::placeholder{color:var(--neu-text-disabled)}.neu-multiselect__options{flex:1;overflow-y:auto;min-height:0}.neu-multiselect__option{display:flex;align-items:center;gap:var(--neu-space-2);padding:10px var(--neu-space-3);cursor:pointer;font-size:var(--neu-text-sm);color:var(--neu-text);transition:background var(--neu-transition)}.neu-multiselect__option:hover:not(.neu-multiselect__option--disabled){background:var(--neu-surface-2)}.neu-multiselect__option--selected{background:var(--neu-primary-soft, rgba(0, 122, 255, .06));color:var(--neu-primary);font-weight:500}.neu-multiselect__option--disabled{opacity:.4;cursor:not-allowed}.neu-multiselect__checkbox{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:3px;border:1.5px solid var(--neu-border);background:var(--neu-bg);flex-shrink:0;transition:border-color var(--neu-transition),background var(--neu-transition)}.neu-multiselect__checkbox--checked{background:var(--neu-primary);border-color:var(--neu-primary);color:#fff}.neu-multiselect__checkbox-check{width:10px;height:8px;opacity:0;transform:scale(.6);transition:opacity .12s ease,transform .12s ease}.neu-multiselect__checkbox--checked .neu-multiselect__checkbox-check{opacity:1;transform:scale(1)}.neu-multiselect__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-multiselect__footer{display:flex;align-items:center;justify-content:space-between;padding:var(--neu-space-2) var(--neu-space-3);border-top:1px solid var(--neu-border);background:var(--neu-surface);flex-shrink:0}.neu-multiselect__footer-count{font-size:var(--neu-text-xs);color:var(--neu-text-muted)}.neu-multiselect__footer-actions{display:flex;align-items:center;gap:var(--neu-space-2)}.neu-multiselect__footer-mode{background:none;border:1px solid var(--neu-border);border-radius:var(--neu-radius-sm);padding:2px 6px;font-size:var(--neu-text-xs);font-family:var(--neu-font-sans);color:var(--neu-text-muted);cursor:pointer;line-height:1.4}.neu-multiselect__footer-mode:hover{background:var(--neu-surface-2);color:var(--neu-text)}.neu-multiselect__footer-mode:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px}.neu-multiselect__footer-clear{background:none;border:none;padding:0;font-size:var(--neu-text-xs);font-family:var(--neu-font-sans);color:var(--neu-primary);cursor:pointer;font-weight:500}.neu-multiselect__footer-clear:hover{text-decoration:underline}.neu-multiselect__footer-clear:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px;border-radius:var(--neu-radius-sm)}.neu-multiselect__count-badge{display:inline-flex;align-items:center;padding:2px 10px;background:var(--neu-primary-100, rgba(14, 165, 233, .12));color:var(--neu-primary);border-radius:var(--neu-radius-full);font-size:var(--neu-text-sm);font-weight:500}.neu-multiselect__chip--overflow{background:var(--neu-surface-2);color:var(--neu-text-muted);border:1px dashed var(--neu-border);cursor:default;pointer-events:none}.neu-multiselect__error{margin-top:var(--neu-space-1);font-size:var(--neu-text-xs);color:var(--neu-error-text, var(--neu-error));font-family:var(--neu-font-sans)}.neu-multiselect__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-multiselect__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-multiselect--sm .neu-multiselect__trigger{min-height:36px;font-size:var(--neu-text-sm);padding:var(--neu-space-1) var(--neu-space-2);padding-right:36px}.neu-multiselect--lg .neu-multiselect__trigger{min-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: NeuMultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'neu-multiselect', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NeuMultiselectComponent),
+                            multi: true,
+                        },
+                    ], host: {
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(keydown.escape)': 'close()',
+                        '(window:resize)': 'onWindowResize()',
+                        '(window:scroll)': 'onWindowScroll()',
+                    }, template: `
+    @if (!floatingLabel() && label()) {
+      <label class="neu-multiselect__static-label" [for]="_triggerId" (click)="focusTrigger()">{{
+        label()
+      }}</label>
+    }
+    <div
+      class="neu-multiselect"
+      [class.neu-multiselect--open]="isOpen()"
+      [class.neu-multiselect--disabled]="isDisabledFinal()"
+      [class.neu-multiselect--error]="hasError()"
+      [class.neu-multiselect--has-value]="_values().length > 0"
+      [class.neu-multiselect--no-float]="!floatingLabel()"
+      [class.neu-multiselect--sm]="size() === 'sm'"
+      [class.neu-multiselect--lg]="size() === 'lg'"
+    >
+      <!-- Trigger -->
+      <div
+        class="neu-multiselect__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-label]="label() || 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-multiselect__label">{{ label() }}</span>
+        }
+        <span class="neu-multiselect__chips">
+          @if (_values().length === 0) {
+            <span class="neu-multiselect__placeholder">{{ placeholder() }}</span>
+          } @else if (_chipMode() === 'count') {
+            <span class="neu-multiselect__count-badge">{{ _values().length }} seleccionados</span>
+          } @else {
+            @for (val of _visibleChips(); track val) {
+              <span class="neu-multiselect__chip">
+                {{ labelFor(val) }}
+                <button
+                  class="neu-multiselect__chip-remove"
+                  type="button"
+                  [attr.aria-label]="'Eliminar ' + labelFor(val)"
+                  (click)="removeValue(val, $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>
+              </span>
+            }
+            @if (_values().length > 3) {
+              <span class="neu-multiselect__chip neu-multiselect__chip--overflow"
+                >+{{ _values().length - 3 }}</span
+              >
+            }
+          }
+        </span>
+
+        <!-- Clear button -->
+        @if (clearable() && _values().length > 0 && !isDisabledFinal()) {
+          <button
+            class="neu-multiselect__clear"
+            type="button"
+            [attr.aria-label]="clearAriaLabel()"
+            (click)="clearAll($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-multiselect__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-multiselect__panel"
+          role="listbox"
+          [id]="_panelId"
+          [attr.aria-multiselectable]="true"
+          [attr.aria-label]="label() || null"
+          [style.position]="panelPosition().position"
+          [style.top]="panelPosition().top"
+          [style.left]="panelPosition().left"
+          [style.width]="panelPosition().width"
+          [style.max-height]="panelPosition().maxHeight"
+        >
+          <!-- Search -->
+          @if (searchable()) {
+            <div class="neu-multiselect__search">
+              <input
+                class="neu-multiselect__search-input"
+                type="text"
+                [attr.aria-label]="'Search ' + label()"
+                [placeholder]="searchPlaceholder()"
+                [value]="searchQuery()"
+                (input)="searchQuery.set($any($event.target).value)"
+                (click)="$event.stopPropagation()"
+              />
+            </div>
+          }
+
+          <!-- Opciones -->
+          <div class="neu-multiselect__options">
+            @for (option of filteredOptions(); track option.value) {
+              <div
+                class="neu-multiselect__option"
+                [class.neu-multiselect__option--selected]="isSelected(option.value)"
+                [class.neu-multiselect__option--disabled]="option.disabled"
+                role="option"
+                [id]="'neu-ms-opt-' + option.value"
+                [attr.aria-selected]="isSelected(option.value)"
+                [attr.aria-disabled]="option.disabled"
+                [attr.tabindex]="option.disabled ? null : '-1'"
+                (click)="toggleOption(option)"
+                (keydown.enter)="toggleOption(option)"
+                (keydown.space)="toggleOption(option)"
+                (keydown.arrowDown)="focusOptionByIndex($any($event), option, 1)"
+                (keydown.arrowUp)="focusOptionByIndex($any($event), option, -1)"
+              >
+                <!-- Checkbox visual -->
+                <span
+                  class="neu-multiselect__checkbox"
+                  [class.neu-multiselect__checkbox--checked]="isSelected(option.value)"
+                >
+                  <svg
+                    class="neu-multiselect__checkbox-check"
+                    viewBox="0 0 12 10"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <polyline points="1 5 4.5 9 11 1" />
+                  </svg>
+                </span>
+                @if (itemTpl()) {
+                  <ng-container
+                    [ngTemplateOutlet]="itemTpl()!.templateRef"
+                    [ngTemplateOutletContext]="{ $implicit: option }"
+                  />
+                } @else {
+                  {{ option.label }}
+                }
+              </div>
+            }
+
+            @if (filteredOptions().length === 0) {
+              <div class="neu-multiselect__empty">{{ noResultsMessage() }}</div>
+            }
+          </div>
+
+          <!-- Footer: resumen + limpiar + toggle modo -->
+          @if (_values().length > 0) {
+            <div class="neu-multiselect__footer">
+              <span class="neu-multiselect__footer-count"
+                >{{ _values().length }} seleccionados</span
+              >
+              <div class="neu-multiselect__footer-actions">
+                <button
+                  class="neu-multiselect__footer-mode"
+                  type="button"
+                  [attr.aria-label]="_chipMode() === 'chips' ? 'Mostrar contador' : 'Mostrar chips'"
+                  (click)="toggleChipMode($event)"
+                >
+                  {{ _chipMode() === 'chips' ? '#' : '☰' }}
+                </button>
+                <button
+                  class="neu-multiselect__footer-clear"
+                  type="button"
+                  (click)="clearAll($event)"
+                >
+                  {{ clearAllLabel() }}
+                </button>
+              </div>
+            </div>
+          }
+        </div>
+      }
+
+      <div class="neu-multiselect__sr-status" aria-live="polite" aria-atomic="true">
+        {{ resultsAnnouncement() }}
+      </div>
+    </div>
+
+    @if (hasError()) {
+      <p class="neu-multiselect__error" [id]="_triggerId + '-error'" role="alert">
+        {{ errorMessage() }}
+      </p>
+    } @else if (hint()) {
+      <p class="neu-multiselect__hint" [id]="_triggerId + '-hint'">{{ hint() }}</p>
+    }
+  `, styles: [".neu-multiselect__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-multiselect__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-8));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-multiselect--open .neu-multiselect__label,.neu-multiselect--has-value .neu-multiselect__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-multiselect--open .neu-multiselect__label{color:var(--neu-primary)}.neu-multiselect--error .neu-multiselect__label{color:var(--neu-error)}.neu-multiselect--disabled .neu-multiselect__label{background:var(--neu-surface-2)}.neu-multiselect{position:relative;font-family:var(--neu-font-sans)}.neu-multiselect__trigger{display:flex;align-items:center;width:100%;min-height:48px;padding:var(--neu-space-2) var(--neu-space-3);padding-right:36px;background:var(--neu-surface);border:1.5px solid var(--neu-border);border-radius:var(--neu-radius);cursor:pointer;text-align:left;transition:border-color var(--neu-transition),box-shadow var(--neu-transition)}.neu-multiselect__trigger:hover:not([aria-disabled=true]){border-color:var(--neu-border-hover)}.neu-multiselect__trigger:focus-visible{outline:none;border-color:var(--neu-primary);box-shadow:0 0 0 3px #007aff1f}.neu-multiselect__trigger[aria-disabled=true]{opacity:.6;cursor:not-allowed;background:var(--neu-surface-2)}.neu-multiselect--open .neu-multiselect__trigger{border-color:var(--neu-primary);box-shadow:0 0 0 3px #007aff1f}.neu-multiselect--error .neu-multiselect__trigger{border-color:var(--neu-error)}.neu-multiselect--error .neu-multiselect__trigger:focus-visible{box-shadow:0 0 0 3px #ef44441f}.neu-multiselect__chips{display:flex;flex-wrap:wrap;gap:var(--neu-space-1);flex:1;min-width:0}.neu-multiselect__placeholder{color:var(--neu-text-disabled);font-size:var(--neu-text-base);line-height:1.5}.neu-multiselect:not(.neu-multiselect--no-float):not(.neu-multiselect--open) .neu-multiselect__placeholder{visibility:hidden}.neu-multiselect__chip{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 8px;background:var(--neu-primary-soft, rgba(0, 122, 255, .1));color:var(--neu-primary);border-radius:var(--neu-radius-sm);font-size:var(--neu-text-xs);font-weight:500;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.neu-multiselect__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.7;border-radius:2px;transition:opacity var(--neu-transition);flex-shrink:0}.neu-multiselect__chip-remove:hover{opacity:1}.neu-multiselect__chip-remove:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px}.neu-multiselect__chip-remove svg{width:10px;height:10px}.neu-multiselect__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-multiselect__clear svg{width:14px;height:14px}.neu-multiselect__clear:hover{color:var(--neu-text);background:var(--neu-surface-3)}.neu-multiselect__clear:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px}.neu-multiselect__chevron{position:absolute;right:var(--neu-space-3);top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--neu-text-muted);pointer-events:none;transition:transform var(--neu-transition);flex-shrink:0}.neu-multiselect--open .neu-multiselect__chevron{transform:translateY(-50%) rotate(180deg)}.neu-multiselect__panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:200;background:var(--neu-surface);border:1.5px solid var(--neu-border);border-radius:var(--neu-radius);box-shadow:var(--neu-shadow-lg);overflow:hidden;max-height:280px;display:flex;flex-direction:column;animation:neu-multiselect-fade-in .12s ease}@media(max-width:600px){.neu-multiselect__panel{left:auto;right:0;width:min(max(100%,240px),100vw - 2rem);max-width:calc(100vw - 2rem)}}@keyframes neu-multiselect-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.neu-multiselect__search{padding:var(--neu-space-2);border-bottom:1px solid var(--neu-border);flex-shrink:0}.neu-multiselect__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-multiselect__search-input:focus{border-color:var(--neu-primary);box-shadow:0 0 0 2px #007aff1f}.neu-multiselect__search-input::placeholder{color:var(--neu-text-disabled)}.neu-multiselect__options{flex:1;overflow-y:auto;min-height:0}.neu-multiselect__option{display:flex;align-items:center;gap:var(--neu-space-2);padding:10px var(--neu-space-3);cursor:pointer;font-size:var(--neu-text-sm);color:var(--neu-text);transition:background var(--neu-transition)}.neu-multiselect__option:hover:not(.neu-multiselect__option--disabled){background:var(--neu-surface-2)}.neu-multiselect__option--selected{background:var(--neu-primary-soft, rgba(0, 122, 255, .06));color:var(--neu-primary);font-weight:500}.neu-multiselect__option--disabled{opacity:.4;cursor:not-allowed}.neu-multiselect__checkbox{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:3px;border:1.5px solid var(--neu-border);background:var(--neu-bg);flex-shrink:0;transition:border-color var(--neu-transition),background var(--neu-transition)}.neu-multiselect__checkbox--checked{background:var(--neu-primary);border-color:var(--neu-primary);color:#fff}.neu-multiselect__checkbox-check{width:10px;height:8px;opacity:0;transform:scale(.6);transition:opacity .12s ease,transform .12s ease}.neu-multiselect__checkbox--checked .neu-multiselect__checkbox-check{opacity:1;transform:scale(1)}.neu-multiselect__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-multiselect__footer{display:flex;align-items:center;justify-content:space-between;padding:var(--neu-space-2) var(--neu-space-3);border-top:1px solid var(--neu-border);background:var(--neu-surface);flex-shrink:0}.neu-multiselect__footer-count{font-size:var(--neu-text-xs);color:var(--neu-text-muted)}.neu-multiselect__footer-actions{display:flex;align-items:center;gap:var(--neu-space-2)}.neu-multiselect__footer-mode{background:none;border:1px solid var(--neu-border);border-radius:var(--neu-radius-sm);padding:2px 6px;font-size:var(--neu-text-xs);font-family:var(--neu-font-sans);color:var(--neu-text-muted);cursor:pointer;line-height:1.4}.neu-multiselect__footer-mode:hover{background:var(--neu-surface-2);color:var(--neu-text)}.neu-multiselect__footer-mode:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px}.neu-multiselect__footer-clear{background:none;border:none;padding:0;font-size:var(--neu-text-xs);font-family:var(--neu-font-sans);color:var(--neu-primary);cursor:pointer;font-weight:500}.neu-multiselect__footer-clear:hover{text-decoration:underline}.neu-multiselect__footer-clear:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px;border-radius:var(--neu-radius-sm)}.neu-multiselect__count-badge{display:inline-flex;align-items:center;padding:2px 10px;background:var(--neu-primary-100, rgba(14, 165, 233, .12));color:var(--neu-primary);border-radius:var(--neu-radius-full);font-size:var(--neu-text-sm);font-weight:500}.neu-multiselect__chip--overflow{background:var(--neu-surface-2);color:var(--neu-text-muted);border:1px dashed var(--neu-border);cursor:default;pointer-events:none}.neu-multiselect__error{margin-top:var(--neu-space-1);font-size:var(--neu-text-xs);color:var(--neu-error-text, var(--neu-error));font-family:var(--neu-font-sans)}.neu-multiselect__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-multiselect__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-multiselect--sm .neu-multiselect__trigger{min-height:36px;font-size:var(--neu-text-sm);padding:var(--neu-space-1) var(--neu-space-2);padding-right:36px}.neu-multiselect--lg .neu-multiselect__trigger{min-height:56px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NeuMultiselectItemDirective), { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsMessage", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", 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 { NeuMultiselectComponent, NeuMultiselectItemDirective };
+//# sourceMappingURL=neural-ui-core-multiselect.mjs.map