@raintonic/formaui 0.2.0

package/fesm2022/raintonic-formaui-components-select.mjs

@@ -0,0 +1,1011 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, output, signal, inject, ElementRef, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component, computed, contentChildren, NgZone, effect, ViewChild } from '@angular/core';
+import { Subject, Subscription, fromEvent } from 'rxjs';
+import { NgForm, FormGroupDirective, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { DOCUMENT } from '@angular/common';
+import { filter } from 'rxjs/operators';
+import { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';
+import { DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
+import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
+
+/**
+ * Injection token used to provide the parent select to options.
+ */
+const FUI_SELECT = new InjectionToken('FUI_SELECT');
+
+/**
+ * # FuiOption Component
+ *
+ * Individual option component for use within fui-select.
+ * Works like Angular Material's mat-option with full accessibility support.
+ *
+ * ## Features
+ * - Disabled state support
+ * - Selection state management
+ * - Full accessibility support (ARIA attributes)
+ * - Keyboard navigation support
+ * - Custom content projection
+ * - Smooth hover animations
+ *
+ * ## Usage
+ *
+ * ### Basic Option
+ * ```html
+ * <fui-select placeholder="Select a status">
+ *   <fui-option value="active">Active</fui-option>
+ *   <fui-option value="inactive">Inactive</fui-option>
+ *   <fui-option value="pending" [disabled]="true">Pending (Disabled)</fui-option>
+ * </fui-select>
+ * ```
+ *
+ * ### Option with Custom Content
+ * ```html
+ * <fui-select placeholder="Select a country">
+ *   <fui-option value="us">
+ *     <fui-icon name="flag-us"></fui-icon>
+ *     United States
+ *   </fui-option>
+ *   <fui-option value="ca">
+ *     <fui-icon name="flag-ca"></fui-icon>
+ *     Canada
+ *   </fui-option>
+ * </fui-select>
+ * ```
+ */
+class FuiOptionComponent {
+    static nextId = 0;
+    /**
+     * The value of the option
+     */
+    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the option is disabled
+     * @default false
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Event emitted when the option is selected
+     */
+    selectionChange = output();
+    // Internal state
+    _selected = signal(false, ...(ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []));
+    _active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
+    stateChanges = new Subject();
+    // Element reference
+    _element = inject(ElementRef);
+    // Parent select (optional - may not exist if used standalone)
+    _parentSelect = inject(FUI_SELECT, { optional: true });
+    // Unique ID
+    id = `fui-option-${FuiOptionComponent.nextId++}`;
+    // Show checkmark only in multiple mode when selected
+    _showCheckmark = signal(false, ...(ngDevMode ? [{ debugName: "_showCheckmark" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        // Update checkmark visibility based on parent select's multiple mode
+        this._updateCheckmarkVisibility();
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    // View value (text content)
+    get viewValue() {
+        return (this._element.nativeElement.textContent || '').trim();
+    }
+    _handleClick(event) {
+        if (!this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            // Notify parent select
+            if (this._parentSelect) {
+                this._parentSelect._onOptionSelected(this);
+            }
+            else {
+                // Standalone usage - emit event
+                this._emitSelectionChangeEvent();
+            }
+        }
+    }
+    _handleMouseEnter() {
+        if (!this.disabled()) {
+            this._active.set(true);
+        }
+    }
+    _handleMouseLeave() {
+        this._active.set(false);
+    }
+    /**
+     * Selects the option
+     */
+    select() {
+        if (!this._selected()) {
+            this._selected.set(true);
+            this._updateCheckmarkVisibility();
+            this.stateChanges.next();
+        }
+    }
+    /**
+     * Deselects the option
+     */
+    deselect() {
+        if (this._selected()) {
+            this._selected.set(false);
+            this._updateCheckmarkVisibility();
+            this.stateChanges.next();
+        }
+    }
+    /**
+     * Sets the option as active (keyboard navigation)
+     */
+    setActive() {
+        if (!this._active()) {
+            this._active.set(true);
+            this.stateChanges.next();
+        }
+    }
+    /**
+     * Sets the option as inactive
+     */
+    setInactive() {
+        if (this._active()) {
+            this._active.set(false);
+            this.stateChanges.next();
+        }
+    }
+    /**
+     * Sets focus onto this option
+     */
+    focus() {
+        const element = this._element.nativeElement;
+        if (typeof element.focus === 'function') {
+            element.focus();
+        }
+    }
+    /**
+     * Gets the label to be used when displaying the option
+     */
+    getLabel() {
+        return this.viewValue;
+    }
+    /**
+     * Gets the host element
+     */
+    _getHostElement() {
+        return this._element.nativeElement;
+    }
+    /** Update checkmark visibility based on selection and multiple mode */
+    _updateCheckmarkVisibility() {
+        const isMultiple = this._parentSelect?.multiple() ?? false;
+        this._showCheckmark.set(isMultiple && this._selected());
+    }
+    /** Emits the selection change event */
+    _emitSelectionChangeEvent() {
+        this.selectionChange.emit({ source: this, value: this.value() });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiOptionComponent, isStandalone: true, selector: "fui-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "_handleClick($event)", "mouseenter": "_handleMouseEnter()", "mouseleave": "_handleMouseLeave()" }, properties: { "class.fui-option--selected": "_selected()", "class.fui-option--disabled": "disabled()", "class.fui-option--active": "_active()", "attr.id": "id", "attr.aria-selected": "_selected()", "attr.aria-disabled": "disabled()", "attr.tabindex": "-1" }, classAttribute: "fui-option" }, ngImport: i0, template: `
+    @if (_showCheckmark()) {
+      <span class="fui-option__checkmark">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+          <path d="M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1z" />
+        </svg>
+      </span>
+    }
+    <span class="fui-option__content">
+      <ng-content></ng-content>
+    </span>
+  `, isInline: true, styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-option{position:relative;display:flex;align-items:center;min-height:2.5rem;margin:0 var(--fui-spacing-02);padding:0 1rem;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-primary);background-color:transparent;transition:background-color,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-option:hover:not(.fui-option--disabled){background-color:var(--fui-surface-02)}.fui-option--selected{color:var(--fui-primary);background-color:var(--fui-primary-10)}.fui-option--selected:hover:not(.fui-option--disabled){background-color:var(--fui-primary-20)}.fui-option--disabled{opacity:.5;cursor:not-allowed;color:var(--fui-text-secondary)}.fui-option:focus-visible,.fui-option:focus,.fui-option--active{background-color:var(--fui-surface-01)}.fui-option__checkmark{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-right:.5rem;flex-shrink:0;color:var(--fui-primary);transition:transform,opacity var(--fui-duration-fast-02) var(--fui-ease-expressive) 0ms}.fui-option__checkmark svg{width:100%;height:100%}.fui-option__content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-option--group-header{font-size:var(--fui-font-size-01);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fui-text-secondary);padding:.5rem 1rem;min-height:2rem;cursor:default}.fui-option--group-header:hover{background-color:transparent}.fui-theme-dark .fui-option--selected{background-color:rgba(var(--fui-primary-rgb),.15)}.fui-theme-dark .fui-option--selected:hover:not(.fui-option--disabled){background-color:rgba(var(--fui-primary-rgb),.25)}@media(prefers-contrast:high){.fui-option--selected{outline:2px solid var(--fui-primary);outline-offset:-2px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-option', standalone: true, imports: [], template: `
+    @if (_showCheckmark()) {
+      <span class="fui-option__checkmark">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+          <path d="M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1z" />
+        </svg>
+      </span>
+    }
+    <span class="fui-option__content">
+      <ng-content></ng-content>
+    </span>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-option',
+                        '[class.fui-option--selected]': '_selected()',
+                        '[class.fui-option--disabled]': 'disabled()',
+                        '[class.fui-option--active]': '_active()',
+                        role: 'option',
+                        '[attr.id]': 'id',
+                        '[attr.aria-selected]': '_selected()',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[attr.tabindex]': '-1',
+                    }, styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-option{position:relative;display:flex;align-items:center;min-height:2.5rem;margin:0 var(--fui-spacing-02);padding:0 1rem;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-primary);background-color:transparent;transition:background-color,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-option:hover:not(.fui-option--disabled){background-color:var(--fui-surface-02)}.fui-option--selected{color:var(--fui-primary);background-color:var(--fui-primary-10)}.fui-option--selected:hover:not(.fui-option--disabled){background-color:var(--fui-primary-20)}.fui-option--disabled{opacity:.5;cursor:not-allowed;color:var(--fui-text-secondary)}.fui-option:focus-visible,.fui-option:focus,.fui-option--active{background-color:var(--fui-surface-01)}.fui-option__checkmark{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-right:.5rem;flex-shrink:0;color:var(--fui-primary);transition:transform,opacity var(--fui-duration-fast-02) var(--fui-ease-expressive) 0ms}.fui-option__checkmark svg{width:100%;height:100%}.fui-option__content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-option--group-header{font-size:var(--fui-font-size-01);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fui-text-secondary);padding:.5rem 1rem;min-height:2rem;cursor:default}.fui-option--group-header:hover{background-color:transparent}.fui-theme-dark .fui-option--selected{background-color:rgba(var(--fui-primary-rgb),.15)}.fui-theme-dark .fui-option--selected:hover:not(.fui-option--disabled){background-color:rgba(var(--fui-primary-rgb),.25)}@media(prefers-contrast:high){.fui-option--selected{outline:2px solid var(--fui-primary);outline-offset:-2px}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], _handleClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], _handleMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], _handleMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+/**
+ * # fui-select Component
+ *
+ * A select component designed to work seamlessly with fui-form-field.
+ * Similar to Angular Material's mat-select integration with mat-form-field.
+ * Provides full Reactive Forms support with validation and error handling.
+ *
+ * ## Features
+ * - Works inside fui-form-field like mat-select
+ * - Full Reactive Forms integration (ControlValueAccessor)
+ * - Multiple selection support
+ * - Options via projected content (fui-option)
+ * - Disabled and readonly states
+ * - Full accessibility support
+ * - Full keyboard navigation (Arrow keys, Enter, Space, Escape, Home, End)
+ * - Type-ahead search functionality
+ *
+ * ## Usage
+ *
+ * ### Basic Select with Form Field
+ * ```html
+ * <fui-form-field>
+ *   <label>Country</label>
+ *   <fui-select placeholder="Select a country">
+ *     <fui-option value="us">United States</fui-option>
+ *     <fui-option value="ca">Canada</fui-option>
+ *     <fui-option value="mx">Mexico</fui-option>
+ *   </fui-select>
+ * </fui-form-field>
+ * ```
+ *
+ * ### With Reactive Forms and Validation
+ * ```html
+ * <form [formGroup]="form">
+ *   <fui-form-field>
+ *     <label>Country</label>
+ *     <fui-select formControlName="country" placeholder="Select a country">
+ *       <fui-option value="us">United States</fui-option>
+ *       <fui-option value="ca">Canada</fui-option>
+ *     </fui-select>
+ *     <fui-error *ngIf="form.get('country')?.hasError('required')">
+ *       Country is required
+ *     </fui-error>
+ *   </fui-form-field>
+ * </form>
+ * ```
+ *
+ * ### Multiple Selection
+ * ```html
+ * <fui-form-field>
+ *   <label>Skills</label>
+ *   <fui-select formControlName="skills" [multiple]="true">
+ *     <fui-option value="js">JavaScript</fui-option>
+ *     <fui-option value="ts">TypeScript</fui-option>
+ *     <fui-option value="py">Python</fui-option>
+ *   </fui-select>
+ * </fui-form-field>
+ * ```
+ */
+class FuiSelectComponent {
+    // Static properties
+    static nextId = 0;
+    controlType = 'fui-select';
+    // Inputs using new signal-based API
+    placeholderInput = input('', { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    errorStateMatcher = input(null, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to compare option values using object identity or deep equality
+     */
+    compareWith = input((o1, o2) => o1 === o2, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    // Outputs
+    valueChange = output();
+    selectionChange = output();
+    openedChange = output();
+    // Internal state signals
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _readOnly = signal(false, ...(ngDevMode ? [{ debugName: "_readOnly" }] : /* istanbul ignore next */ []));
+    // FuiFormFieldControl implementation
+    stateChanges = new Subject();
+    _uid = `fui-select-${FuiSelectComponent.nextId++}`;
+    _ariaDescribedby = null;
+    // Error state
+    _errorState = signal(false, ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
+    errorState = this._errorState;
+    // Form control references
+    _parentForm = inject(NgForm, { optional: true });
+    _parentFormGroup = inject(FormGroupDirective, { optional: true });
+    _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);
+    _ngControlRef = injectNgControl();
+    get ngControl() {
+        return this._ngControlRef.ngControl;
+    }
+    // Interface implementation
+    placeholder = computed(() => this.placeholderInput(), ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    _required = signal(false, ...(ngDevMode ? [{ debugName: "_required" }] : /* istanbul ignore next */ []));
+    required = this._required;
+    value = this._value;
+    focused = this._focused;
+    _ngControlDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_ngControlDisabled" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this._disabled() || this.disabledInput() || this._ngControlDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    empty = computed(() => {
+        const val = this._value();
+        return val === null || val === undefined || (this.isArray(val) && val.length === 0);
+    }, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    id = this._uid;
+    // ViewChild for trigger and panel
+    trigger;
+    panel;
+    // ContentChildren for options
+    options = contentChildren(FuiOptionComponent, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
+    // Panel open/close state
+    panelOpen = signal(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+    // Active option index for keyboard navigation
+    _activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_activeOptionIndex" }] : /* istanbul ignore next */ []));
+    activeOptionIndex = this._activeOptionIndex.asReadonly();
+    // Live announcement for screen readers
+    _liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "_liveAnnouncement" }] : /* istanbul ignore next */ []));
+    // Overlay reference
+    _overlayRef = null;
+    _overlaySubscriptions = new Subscription();
+    // Services
+    _overlayService = inject(FuiOverlayService);
+    _elementRef = inject(ElementRef);
+    _document = inject(DOCUMENT);
+    _ngZone = inject(NgZone);
+    _outsideClickSub;
+    // Type-ahead search
+    _typeaheadBuffer = '';
+    _typeaheadTimeout = null;
+    TYPE_AHEAD_DEBOUNCE = 200;
+    // ControlValueAccessor callbacks
+    _onChange = () => {
+        // Intentionally empty: will be replaced by Angular forms
+    };
+    _onTouched = () => {
+        // Intentionally empty: will be replaced by Angular forms
+    };
+    // Computed properties
+    displayValue = computed(() => {
+        const currentValue = this.value();
+        const opts = this.options();
+        if (currentValue === null || currentValue === undefined) {
+            return '';
+        }
+        // Filter out options that don't have a value set yet
+        const validOpts = opts.filter((opt) => opt.value() !== undefined);
+        if (this.multiple()) {
+            if (this.isArray(currentValue)) {
+                const selectedOptions = validOpts.filter((opt) => currentValue.some((v) => this.compareWith()(v, opt.value())));
+                return selectedOptions.map((opt) => opt.getLabel()).join(', ');
+            }
+            return '';
+        }
+        else {
+            const selectedOption = validOpts.find((opt) => this.compareWith()(opt.value(), currentValue));
+            return selectedOption ? selectedOption.getLabel() : String(currentValue);
+        }
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Set valueAccessor after NgControl is resolved
+        void Promise.resolve().then(() => {
+            if (this._ngControlRef.ngControl) {
+                this._ngControlRef.ngControl.valueAccessor = this;
+            }
+        });
+        // Effect to emit state changes
+        effect(() => {
+            // Track all reactive inputs and internal signals
+            this.placeholderInput();
+            this.readonly();
+            this.disabledInput();
+            this.multiple();
+            this.errorStateMatcher();
+            this._focused();
+            this._disabled();
+            this._value();
+            this._ngControlDisabled();
+            this._required();
+            this._errorState();
+            // Emit state change
+            this.stateChanges.next();
+        });
+        // Effect to update options selected state when value or options change
+        effect(() => {
+            const currentValue = this._value();
+            const opts = this.options();
+            const isMultiple = this.multiple();
+            const compareFn = this.compareWith();
+            opts.forEach((option) => {
+                const optValue = option.value();
+                // Skip options that don't have a value set yet
+                if (optValue === undefined) {
+                    return;
+                }
+                let isSelected = false;
+                if (isMultiple && this.isArray(currentValue)) {
+                    isSelected = currentValue.some((v) => compareFn(v, optValue));
+                }
+                else {
+                    isSelected = compareFn(currentValue, optValue);
+                }
+                if (isSelected) {
+                    option.select();
+                }
+                else {
+                    option.deselect();
+                }
+            });
+            // Notify form-field that state may have changed (for display value updates)
+            this.stateChanges.next();
+        });
+    }
+    ngDoCheck() {
+        if (this.ngControl) {
+            updateErrorState(this.ngControl, this._errorState, this.errorStateMatcher(), this._defaultErrorStateMatcher, this._parentForm, this._parentFormGroup, this.stateChanges);
+            syncRequiredState(this.ngControl, this._required, this.stateChanges);
+            syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this._outsideClickSub?.unsubscribe();
+        this._disposeOverlay();
+        if (this._typeaheadTimeout) {
+            clearTimeout(this._typeaheadTimeout);
+        }
+    }
+    ngAfterContentInit() {
+        // Set up initial selection based on value
+        this._syncOptionsSelection();
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this._value.set(value ?? null);
+        //this._syncOptionsSelection();
+        this.stateChanges.next();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+        this.stateChanges.next();
+    }
+    // FuiFormFieldControl implementation
+    onContainerClick(_event) {
+        if (!this.disabled() && !this.readonly()) {
+            this.toggle();
+        }
+    }
+    setDescribedByIds(ids) {
+        this._ariaDescribedby = ids.length ? ids.join(' ') : null;
+    }
+    setReadOnly(readOnly) {
+        this._readOnly.set(readOnly);
+    }
+    // Sync options selection state with current value
+    _syncOptionsSelection() {
+        const currentValue = this._value();
+        const opts = this.options();
+        const isMultiple = this.multiple();
+        const compareFn = this.compareWith();
+        opts.forEach((option) => {
+            const optValue = option.value();
+            // Skip options that don't have a value set yet
+            if (optValue === undefined) {
+                return;
+            }
+            let isSelected = false;
+            if (isMultiple && this.isArray(currentValue)) {
+                isSelected = currentValue.some((v) => compareFn(v, optValue));
+            }
+            else if (currentValue !== null && currentValue !== undefined) {
+                isSelected = compareFn(currentValue, optValue);
+            }
+            if (isSelected) {
+                option.select();
+            }
+            else {
+                option.deselect();
+            }
+        });
+    }
+    // Focus/blur event handlers from template
+    _onFocus() {
+        this._focused.set(true);
+        this.stateChanges.next();
+    }
+    _onBlur(event) {
+        if (this.panelOpen()) {
+            // Check if focus moved to the overlay panel (e.g. clicking an option).
+            // In that case, don't close — the user is interacting with the dropdown.
+            const relatedTarget = event?.relatedTarget;
+            const overlayElement = this._overlayRef?.overlayElement;
+            if (relatedTarget && overlayElement?.contains(relatedTarget)) {
+                return;
+            }
+            // Focus left the select entirely (e.g. Tab) — close without restoring focus
+            this.close(false);
+        }
+        this._focused.set(false);
+        this._onTouched();
+        this.stateChanges.next();
+    }
+    // Public methods
+    focus() {
+        this.trigger?.nativeElement.focus();
+    }
+    blur() {
+        this.trigger?.nativeElement.blur();
+    }
+    // Toggle panel open/close
+    toggle() {
+        if (this.disabled())
+            return;
+        if (this.panelOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    // Open the dropdown panel
+    open() {
+        if (this.disabled() || this.readonly() || this.panelOpen())
+            return;
+        // Ensure DOM focus is on the trigger so blur/Tab work correctly
+        this.trigger?.nativeElement.focus();
+        requestAnimationFrame(() => {
+            this.panelOpen.set(true);
+            this._focused.set(true);
+            this.openedChange.emit(true);
+            // Set active option to currently selected or first option
+            this._setInitialActiveOption();
+            // Create overlay after the view updates
+            setTimeout(() => {
+                this._createOverlay();
+                this._scrollToActiveOption();
+                this._listenForOutsideClicks();
+            });
+        });
+    }
+    // Close the dropdown panel
+    close(restoreFocus = true) {
+        if (!this.panelOpen())
+            return;
+        this._outsideClickSub?.unsubscribe();
+        this.panelOpen.set(false);
+        this._focused.set(false);
+        this._activeOptionIndex.set(-1);
+        this._disposeOverlay();
+        this.openedChange.emit(false);
+        this._onTouched();
+        // Return focus to trigger only when explicitly requested (e.g. Escape, backdrop click).
+        // When closing via Tab, let the browser move focus naturally.
+        // Focus synchronously to avoid race conditions with Tab key presses.
+        if (restoreFocus) {
+            this.trigger?.nativeElement.focus();
+        }
+    }
+    // Handle option selection (called by FuiOptionComponent)
+    _onOptionSelected(option) {
+        const newValue = option.value();
+        if (this.multiple()) {
+            const raw = this._value();
+            const currentValue = this.isArray(raw) ? [...raw] : [];
+            const compareFn = this.compareWith();
+            const index = currentValue.findIndex((v) => compareFn(v, newValue));
+            if (index > -1) {
+                currentValue.splice(index, 1);
+                option.deselect();
+            }
+            else {
+                currentValue.push(newValue);
+                option.select();
+            }
+            this._value.set(currentValue);
+            this._onChange(currentValue);
+            this.valueChange.emit(currentValue);
+            this.selectionChange.emit({ source: this, value: currentValue });
+            // Announce for screen readers
+            const label = option.getLabel();
+            const action = index > -1 ? 'deselected' : 'selected';
+            this._announce(`${label} ${action}`);
+        }
+        else {
+            // Deselect previous option
+            const opts = this.options();
+            opts.forEach((opt) => {
+                if (opt !== option) {
+                    opt.deselect();
+                }
+            });
+            option.select();
+            this._value.set(newValue);
+            this._onChange(newValue);
+            this.valueChange.emit(newValue);
+            this.selectionChange.emit({ source: this, value: newValue });
+            // Announce for screen readers
+            this._announce(`${option.getLabel()} selected`);
+            this.close();
+        }
+        this.stateChanges.next();
+    }
+    // Get display value for trigger
+    _getDisplayValue() {
+        return this.displayValue();
+    }
+    // Handle keyboard navigation
+    _handleKeydown(event) {
+        if (this.disabled())
+            return;
+        const isOpen = this.panelOpen();
+        if (!isOpen) {
+            this._handleClosedKeydown(event);
+        }
+        else {
+            this._handleOpenKeydown(event);
+        }
+    }
+    // Handle keydown when panel is closed
+    _handleClosedKeydown(event) {
+        const key = event.key;
+        switch (key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.open();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._selectFirstOption();
+                break;
+            case 'End':
+                event.preventDefault();
+                this._selectLastOption();
+                break;
+            default:
+                // Type-ahead when closed
+                if (key.length === 1 && !event.ctrlKey && !event.metaKey) {
+                    this._handleTypeahead(key);
+                }
+                break;
+        }
+    }
+    // Handle keydown when panel is open
+    _handleOpenKeydown(event) {
+        const key = event.key;
+        const opts = this._getEnabledOptions();
+        const activeIndex = this._activeOptionIndex();
+        switch (key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this._setNextActiveOption(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this._setNextActiveOption(-1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._setActiveOptionIndex(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this._setActiveOptionIndex(opts.length - 1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (activeIndex >= 0 && activeIndex < opts.length) {
+                    this._onOptionSelected(opts[activeIndex]);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+            case 'Tab':
+                // Don't preventDefault — let browser handle Tab naturally.
+                // _onBlur will close the panel when focus leaves the trigger.
+                break;
+            default:
+                // Type-ahead when open
+                if (key.length === 1 && !event.ctrlKey && !event.metaKey) {
+                    event.preventDefault();
+                    this._handleTypeahead(key);
+                }
+                break;
+        }
+    }
+    // Set the next active option based on delta
+    _setNextActiveOption(delta) {
+        const opts = this._getEnabledOptions();
+        if (opts.length === 0)
+            return;
+        const currentIndex = this._activeOptionIndex();
+        let newIndex = currentIndex + delta;
+        // Wrap around
+        if (newIndex < 0) {
+            newIndex = opts.length - 1;
+        }
+        else if (newIndex >= opts.length) {
+            newIndex = 0;
+        }
+        this._setActiveOptionIndex(newIndex);
+    }
+    // Set the active option index
+    _setActiveOptionIndex(index) {
+        const opts = this._getEnabledOptions();
+        if (index < 0 || index >= opts.length)
+            return;
+        // Update active state on options
+        const allOpts = this.options();
+        allOpts.forEach((opt) => {
+            opt.setInactive();
+        });
+        const activeOption = opts[index];
+        activeOption.setActive();
+        this._activeOptionIndex.set(index);
+        this._scrollToActiveOption();
+        // Announce active option for screen readers (when panel is open and using keyboard)
+        if (this.panelOpen()) {
+            const label = activeOption.getLabel();
+            const selectedState = activeOption._selected() ? ', selected' : '';
+            this._announce(`${label}${selectedState}, ${index + 1} of ${opts.length}`);
+        }
+    }
+    // Set initial active option when opening
+    _setInitialActiveOption() {
+        const opts = this._getEnabledOptions();
+        if (opts.length === 0) {
+            this._activeOptionIndex.set(-1);
+            return;
+        }
+        const currentValue = this._value();
+        const compareFn = this.compareWith();
+        // Find the first selected option
+        let selectedIndex = -1;
+        if (!this.multiple() && currentValue !== null && currentValue !== undefined) {
+            selectedIndex = opts.findIndex((opt) => compareFn(opt.value(), currentValue));
+        }
+        else if (this.multiple() && this.isArray(currentValue) && currentValue.length > 0) {
+            selectedIndex = opts.findIndex((opt) => currentValue.some((v) => compareFn(v, opt.value())));
+        }
+        const initialIndex = selectedIndex >= 0 ? selectedIndex : 0;
+        this._setActiveOptionIndex(initialIndex);
+    }
+    // Scroll to active option
+    _scrollToActiveOption() {
+        const opts = this._getEnabledOptions();
+        const activeIndex = this._activeOptionIndex();
+        if (activeIndex < 0 || activeIndex >= opts.length)
+            return;
+        const activeOption = opts[activeIndex];
+        const element = activeOption._getHostElement();
+        const panel = this.panel?.nativeElement;
+        if (element && panel) {
+            const optionTop = element.offsetTop;
+            const optionBottom = optionTop + element.offsetHeight;
+            const panelTop = panel.scrollTop;
+            const panelBottom = panelTop + panel.clientHeight;
+            if (optionTop < panelTop) {
+                panel.scrollTop = optionTop;
+            }
+            else if (optionBottom > panelBottom) {
+                panel.scrollTop = optionBottom - panel.clientHeight;
+            }
+        }
+    }
+    // Handle type-ahead search
+    _handleTypeahead(char) {
+        // Clear timeout and add to buffer
+        if (this._typeaheadTimeout) {
+            clearTimeout(this._typeaheadTimeout);
+        }
+        this._typeaheadBuffer += char.toLowerCase();
+        // Find matching option
+        const opts = this._getEnabledOptions();
+        const matchIndex = opts.findIndex((opt) => opt.getLabel().toLowerCase().startsWith(this._typeaheadBuffer));
+        if (matchIndex >= 0) {
+            if (this.panelOpen()) {
+                this._setActiveOptionIndex(matchIndex);
+            }
+            else {
+                // Select the option when closed
+                this._onOptionSelected(opts[matchIndex]);
+            }
+        }
+        // Clear buffer after debounce
+        this._typeaheadTimeout = setTimeout(() => {
+            this._typeaheadBuffer = '';
+        }, this.TYPE_AHEAD_DEBOUNCE);
+    }
+    // Select first non-disabled option
+    _selectFirstOption() {
+        const opts = this._getEnabledOptions();
+        if (opts.length > 0) {
+            this._onOptionSelected(opts[0]);
+        }
+    }
+    // Select last non-disabled option
+    _selectLastOption() {
+        const opts = this._getEnabledOptions();
+        if (opts.length > 0) {
+            this._onOptionSelected(opts[opts.length - 1]);
+        }
+    }
+    // Get all non-disabled options
+    _getEnabledOptions() {
+        return this.options().filter((opt) => !opt.disabled());
+    }
+    // Start listening for outside clicks when panel opens
+    _listenForOutsideClicks() {
+        this._outsideClickSub?.unsubscribe();
+        // Run outside Angular zone to avoid triggering change detection on every document click
+        this._ngZone.runOutsideAngular(() => {
+            // Use setTimeout to skip the current click event that opened the panel
+            setTimeout(() => {
+                this._outsideClickSub = fromEvent(this._document, 'click')
+                    .pipe(filter(() => this.panelOpen()), filter((event) => {
+                    const target = event.target;
+                    const triggerElement = this.trigger?.nativeElement;
+                    const panelElement = this.panel?.nativeElement;
+                    const overlayElement = this._overlayRef?.overlayElement;
+                    return (!triggerElement?.contains(target) &&
+                        !panelElement?.contains(target) &&
+                        !overlayElement?.contains(target));
+                }))
+                    .subscribe(() => {
+                    this._ngZone.run(() => {
+                        this.close();
+                    });
+                });
+            });
+        });
+    }
+    // Create overlay for panel
+    _createOverlay() {
+        if (this._overlayRef || !this.panel || !this.trigger)
+            return;
+        const triggerElement = this.trigger.nativeElement;
+        const triggerWidth = triggerElement.getBoundingClientRect().width;
+        const positions = [
+            // Primary: open below
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            // Fallback: open above if no space below
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ];
+        const positionStrategy = this._overlayService
+            .position()
+            .connectedTo(triggerElement, positions)
+            .withPush(false)
+            .withFlexibleDimensions(true)
+            .withViewportMargin(8);
+        this._overlayRef = this._overlayService.create({
+            positionStrategy,
+            scrollStrategy: this._overlayService.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'fui-select-backdrop',
+            backdropClickBehavior: 'close',
+            panelClass: ['fui-select-overlay-panel'],
+            width: triggerWidth,
+        });
+        // Track overlay subscriptions for proper cleanup
+        this._overlaySubscriptions.unsubscribe();
+        this._overlaySubscriptions = new Subscription();
+        this._overlaySubscriptions.add(this._overlayRef.backdropClick.subscribe(() => {
+            this.close();
+        }));
+        this._overlaySubscriptions.add(this._overlayRef.keydownEvents.subscribe((event) => {
+            if (event.key === 'Escape') {
+                this.close();
+            }
+        }));
+        // Attach panel to overlay
+        const panelElement = this.panel.nativeElement;
+        this._overlayRef.attach(panelElement);
+    }
+    // Dispose overlay
+    _disposeOverlay() {
+        this._overlaySubscriptions.unsubscribe();
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+    }
+    // Get the active option's id for aria-activedescendant
+    _getActiveDescendant() {
+        const opts = this._getEnabledOptions();
+        const activeIndex = this._activeOptionIndex();
+        if (activeIndex >= 0 && activeIndex < opts.length) {
+            return opts[activeIndex].id;
+        }
+        return null;
+    }
+    /**
+     * Announces a message to screen readers via the aria-live region.
+     * Clears the message after a brief delay to allow repeated announcements.
+     */
+    _announce(message) {
+        // Clear first to ensure repeated identical messages are announced
+        this._liveAnnouncement.set('');
+        setTimeout(() => {
+            this._liveAnnouncement.set(message);
+        }, 50);
+    }
+    // Mat-select compatibility methods
+    get selected() {
+        return this.value;
+    }
+    // Helper method to check if value is array
+    isArray(value) {
+        return Array.isArray(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiSelectComponent, isStandalone: true, selector: "fui-select", inputs: { placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", openedChange: "openedChange" }, host: { properties: { "attr.id": "id", "class.fui-select--open": "panelOpen()", "class.fui-select--disabled": "disabled()", "class.fui-select--multiple": "multiple()", "class.fui-select--readonly": "_readOnly()" }, classAttribute: "fui-select" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: FuiSelectComponent,
+                multi: true,
+            },
+            {
+                provide: FUI_FORM_FIELD_CONTROL,
+                useExisting: FuiSelectComponent,
+            },
+            {
+                provide: FUI_SELECT,
+                useExisting: FuiSelectComponent,
+            },
+        ], queries: [{ propertyName: "options", predicate: FuiOptionComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<!-- Select Trigger -->\n<div\n  #trigger\n  [id]=\"id\"\n  class=\"fui-select__trigger\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  [attr.role]=\"'combobox'\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"panelOpen()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-invalid]=\"errorState()\"\n  [attr.aria-describedby]=\"_ariaDescribedby\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-label]=\"empty() ? placeholder() : null\"\n  aria-autocomplete=\"none\"\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\n  (keydown)=\"_handleKeydown($event)\"\n  (focus)=\"_onFocus()\"\n  (blur)=\"_onBlur($event)\"\n>\n  <span class=\"fui-select__value\">\n    @if (empty()) {\n      <span class=\"fui-select__placeholder\">{{ placeholder() }}</span>\n    } @else {\n      <span class=\"fui-select__value-text\">{{ _getDisplayValue() }}</span>\n    }\n  </span>\n</div>\n\n<!-- Live region for screen reader announcements -->\n<span class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">{{ _liveAnnouncement() }}</span>\n\n<!-- Dropdown Panel -->\n@if (panelOpen()) {\n  <div\n    #panel\n    [id]=\"id + '-panel'\"\n    class=\"fui-select__panel\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple()\"\n    [attr.aria-label]=\"placeholder()\"\n  >\n    <ng-content></ng-content>\n  </div>\n}\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-select{display:inline-block;width:100%;position:relative}.fui-select__trigger{width:100%;min-height:100%;display:flex;align-items:center;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;background:transparent;border:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary)}.fui-select__trigger:focus{outline:none}.fui-select__trigger:focus-visible{outline:none}.fui-select__trigger[aria-disabled=true]{cursor:not-allowed;opacity:.5}.fui-select__value{flex:1;display:flex;align-items:center;overflow:hidden;min-width:0}.fui-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--fui-spacing-02);color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-select__arrow svg{width:1rem;height:1rem}.fui-select--open .fui-select__arrow{transform:rotate(180deg)}.fui-select--disabled{pointer-events:none}.fui-select--disabled .fui-select__trigger{cursor:not-allowed;opacity:.5}.fui-select--disabled .fui-select__arrow{color:var(--fui-text-disabled)}.fui-select--readonly{pointer-events:none}.fui-select--readonly .fui-select__trigger{opacity:1;cursor:default;color:var(--fui-text-primary)}.fui-select--readonly .fui-select__trigger[aria-disabled=true]{opacity:1;cursor:default}.fui-select--readonly .fui-select__value-text{color:var(--fui-text-primary)}.fui-select__value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-select__placeholder{color:var(--fui-text-disabled);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-select .fui-select__panel{position:fixed;opacity:0;pointer-events:none}.fui-select__panel{--fui-select-panel-max-height: 16rem;--fui-select-panel-border-radius: var(--fui-border-radius-md);--fui-select-panel-shadow: var(--fui-shadow-03);--fui-select-panel-bg: var(--fui-surface-00);width:100%;max-height:var(--fui-select-panel-max-height);overflow-y:auto;overflow-x:hidden;background:var(--fui-select-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-select-panel-border-radius);box-shadow:var(--fui-select-panel-shadow);padding:var(--fui-spacing-02) 0;transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-select__panel::-webkit-scrollbar{width:8px}.fui-select__panel::-webkit-scrollbar-track{background:var(--fui-surface-01);border-radius:var(--fui-border-radius-sm)}.fui-select__panel::-webkit-scrollbar-thumb{background:var(--fui-border-color);border-radius:var(--fui-border-radius-sm)}.fui-select__panel::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-select-backdrop{background:transparent}.fui-select-overlay-panel{max-width:32rem;z-index:var(--fui-z-popover, 1060)}@media(prefers-contrast:high){.fui-select__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-select__panel{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-select', standalone: true, imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-select',
+                        '[attr.id]': 'id',
+                        '[class.fui-select--open]': 'panelOpen()',
+                        '[class.fui-select--disabled]': 'disabled()',
+                        '[class.fui-select--multiple]': 'multiple()',
+                        '[class.fui-select--readonly]': '_readOnly()',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: FuiSelectComponent,
+                            multi: true,
+                        },
+                        {
+                            provide: FUI_FORM_FIELD_CONTROL,
+                            useExisting: FuiSelectComponent,
+                        },
+                        {
+                            provide: FUI_SELECT,
+                            useExisting: FuiSelectComponent,
+                        },
+                    ], template: "<!-- Select Trigger -->\n<div\n  #trigger\n  [id]=\"id\"\n  class=\"fui-select__trigger\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  [attr.role]=\"'combobox'\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"panelOpen()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-invalid]=\"errorState()\"\n  [attr.aria-describedby]=\"_ariaDescribedby\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-label]=\"empty() ? placeholder() : null\"\n  aria-autocomplete=\"none\"\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\n  (keydown)=\"_handleKeydown($event)\"\n  (focus)=\"_onFocus()\"\n  (blur)=\"_onBlur($event)\"\n>\n  <span class=\"fui-select__value\">\n    @if (empty()) {\n      <span class=\"fui-select__placeholder\">{{ placeholder() }}</span>\n    } @else {\n      <span class=\"fui-select__value-text\">{{ _getDisplayValue() }}</span>\n    }\n  </span>\n</div>\n\n<!-- Live region for screen reader announcements -->\n<span class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">{{ _liveAnnouncement() }}</span>\n\n<!-- Dropdown Panel -->\n@if (panelOpen()) {\n  <div\n    #panel\n    [id]=\"id + '-panel'\"\n    class=\"fui-select__panel\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple()\"\n    [attr.aria-label]=\"placeholder()\"\n  >\n    <ng-content></ng-content>\n  </div>\n}\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-select{display:inline-block;width:100%;position:relative}.fui-select__trigger{width:100%;min-height:100%;display:flex;align-items:center;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;background:transparent;border:none;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary)}.fui-select__trigger:focus{outline:none}.fui-select__trigger:focus-visible{outline:none}.fui-select__trigger[aria-disabled=true]{cursor:not-allowed;opacity:.5}.fui-select__value{flex:1;display:flex;align-items:center;overflow:hidden;min-width:0}.fui-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--fui-spacing-02);color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-select__arrow svg{width:1rem;height:1rem}.fui-select--open .fui-select__arrow{transform:rotate(180deg)}.fui-select--disabled{pointer-events:none}.fui-select--disabled .fui-select__trigger{cursor:not-allowed;opacity:.5}.fui-select--disabled .fui-select__arrow{color:var(--fui-text-disabled)}.fui-select--readonly{pointer-events:none}.fui-select--readonly .fui-select__trigger{opacity:1;cursor:default;color:var(--fui-text-primary)}.fui-select--readonly .fui-select__trigger[aria-disabled=true]{opacity:1;cursor:default}.fui-select--readonly .fui-select__value-text{color:var(--fui-text-primary)}.fui-select__value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-select__placeholder{color:var(--fui-text-disabled);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-select .fui-select__panel{position:fixed;opacity:0;pointer-events:none}.fui-select__panel{--fui-select-panel-max-height: 16rem;--fui-select-panel-border-radius: var(--fui-border-radius-md);--fui-select-panel-shadow: var(--fui-shadow-03);--fui-select-panel-bg: var(--fui-surface-00);width:100%;max-height:var(--fui-select-panel-max-height);overflow-y:auto;overflow-x:hidden;background:var(--fui-select-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-select-panel-border-radius);box-shadow:var(--fui-select-panel-shadow);padding:var(--fui-spacing-02) 0;transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-select__panel::-webkit-scrollbar{width:8px}.fui-select__panel::-webkit-scrollbar-track{background:var(--fui-surface-01);border-radius:var(--fui-border-radius-sm)}.fui-select__panel::-webkit-scrollbar-thumb{background:var(--fui-border-color);border-radius:var(--fui-border-radius-sm)}.fui-select__panel::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-select-backdrop{background:transparent}.fui-select-overlay-panel{max-width:32rem;z-index:var(--fui-z-popover, 1060)}@media(prefers-contrast:high){.fui-select__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-select__panel{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], trigger: [{
+                type: ViewChild,
+                args: ['trigger', { static: false }]
+            }], panel: [{
+                type: ViewChild,
+                args: ['panel', { static: false }]
+            }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FuiOptionComponent), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FUI_SELECT, FuiOptionComponent, FuiSelectComponent };
+//# sourceMappingURL=raintonic-formaui-components-select.mjs.map