import * as i0 from '@angular/core';
import { Directive, inject, ElementRef, Component, InjectionToken, ChangeDetectorRef, signal, contentChildren, input, booleanAttribute, computed, output, viewChild, model, DestroyRef, effect, untracked, forwardRef } from '@angular/core';
import { outputToObservable } from '@angular/core/rxjs-interop';
import { NgControl } from '@angular/forms';
import { SelectionModel } from '@angular/cdk/collections';
import * as i1 from '@angular/cdk/overlay';
import { CdkConnectedOverlay, OverlayModule, CdkOverlayOrigin } from '@angular/cdk/overlay';
import { Subject, takeUntil } from 'rxjs';
import { OPTION, Optgroup, OPTION_PARENT } from '@ngstarter-ui/components/option';
export { Optgroup, Option } from '@ngstarter-ui/components/option';
import { FORM_FIELD, FormFieldControl } from '@ngstarter-ui/components/form-field';
import { AUTOFOCUSABLE } from '@ngstarter-ui/components/core';

class SelectTrigger {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: SelectTrigger, isStandalone: true, selector: "ngs-select-trigger", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectTrigger, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ngs-select-trigger',
                    standalone: true
                }]
        }] });

class SelectBody {
    _elementRef = inject(ElementRef);
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: SelectBody, isStandalone: true, selector: "ngs-select-body", host: { classAttribute: "ngs-select-body" }, exportAs: ["ngsSelectBody"], ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{display:block;position:relative;flex:1;overflow:auto;min-height:0;max-height:var(--ngs-select-panel-max-height, var(--ngs-dropdown-max-height, 256px));padding:var(--ngs-select-content-padding, var(--ngs-dropdown-padding, calc(var(--spacing, .25rem) * 2)));box-sizing:border-box}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectBody, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-select-body', exportAs: 'ngsSelectBody', imports: [], template: '<ng-content/>', host: {
                        'class': 'ngs-select-body'
                    }, styles: [":host{display:block;position:relative;flex:1;overflow:auto;min-height:0;max-height:var(--ngs-select-panel-max-height, var(--ngs-dropdown-max-height, 256px));padding:var(--ngs-select-content-padding, var(--ngs-dropdown-padding, calc(var(--spacing, .25rem) * 2)));box-sizing:border-box}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class _Select {
}
const SELECT = new InjectionToken('SELECT');

class SelectChange {
    source;
    value;
    constructor(source, value) {
        this.source = source;
        this.value = value;
    }
}
class Select {
    _elementRef = inject(ElementRef);
    _cdr = inject(ChangeDetectorRef);
    _destroy = new Subject();
    _formField = inject(FORM_FIELD, { optional: true });
    ngControl = inject(NgControl, { optional: true, self: true });
    stateChanges = signal(undefined, ...(ngDevMode ? [{ debugName: "stateChanges" }] : /* istanbul ignore next */ []));
    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
    selectBody = contentChildren(SelectBody, ...(ngDevMode ? [{ debugName: "selectBody" }] : /* istanbul ignore next */ []));
    get focused() { return this._focused(); }
    _id = input(`ngs-select-${Math.random().toString(36).substr(2, 9)}`, { ...(ngDevMode ? { debugName: "_id" } : /* istanbul ignore next */ {}), alias: 'id' });
    get id() { return this._id(); }
    _placeholder = input(undefined, { ...(ngDevMode ? { debugName: "_placeholder" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
    get placeholder() { return this._placeholder(); }
    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
    _disabledInput = input(false, { ...(ngDevMode ? { debugName: "_disabledInput" } : /* istanbul ignore next */ {}), transform: (value) => booleanAttribute(value),
        alias: 'disabled' });
    _required = input(false, { ...(ngDevMode ? { debugName: "_required" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'required' });
    get required() { return this._required(); }
    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    hideCheckIcon = input(false, { ...(ngDevMode ? { debugName: "hideCheckIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
    tabIndex = input(0, { ...(ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {}), transform: (value) => value == null ? 0 : parseInt(value + '', 10) });
    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
    isDisabled = computed(() => this._disabledInput() || this._disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
    get disabled() { return this.isDisabled(); }
    selectionChange = output();
    opened = output();
    closed = output();
    options = contentChildren(OPTION, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
    optionGroups = contentChildren(Optgroup, { ...(ngDevMode ? { debugName: "optionGroups" } : /* istanbul ignore next */ {}), descendants: true });
    customTrigger = contentChildren(SelectTrigger, { ...(ngDevMode ? { debugName: "customTrigger" } : /* istanbul ignore next */ {}), descendants: true });
    overlayDir = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "overlayDir" }] : /* istanbul ignore next */ []));
    panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
    origin = viewChild('origin', ...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
    get overlayOrigin() {
        if (this._formField) {
            return this._formField.wrapper() || this._formField.elementRef;
        }
        return this.origin() || this._elementRef;
    }
    get overlayWidth() {
        if (this._formField) {
            const element = this._formField.wrapper().nativeElement || this._formField.elementRef.nativeElement;
            return element.getBoundingClientRect?.().width || 'auto';
        }
        return 'auto';
    }
    panelOpen = signal(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
    _panelPosition = signal('bottom', ...(ngDevMode ? [{ debugName: "_panelPosition" }] : /* istanbul ignore next */ []));
    _selectionModel;
    _selectionChanges = signal(0, ...(ngDevMode ? [{ debugName: "_selectionChanges" }] : /* istanbul ignore next */ []));
    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
    _optionsDestroy = new Subject();
    _selectionModelDestroy = new Subject();
    _optionsContentChanges = signal(0, ...(ngDevMode ? [{ debugName: "_optionsContentChanges" }] : /* istanbul ignore next */ []));
    _errorState = signal(false, ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
    get errorState() { return this._errorState(); }
    _empty = computed(() => {
        this._selectionChanges();
        const value = this.value();
        const isValueEmpty = value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0);
        const isEmpty = (this._selectionModel?.isEmpty() ?? true) && isValueEmpty;
        return isEmpty;
    }, ...(ngDevMode ? [{ debugName: "_empty" }] : /* istanbul ignore next */ []));
    get empty() { return this._empty(); }
    _shouldLabelFloat = computed(() => {
        return this.panelOpen() || !this.empty || this.focused;
    }, ...(ngDevMode ? [{ debugName: "_shouldLabelFloat" }] : /* istanbul ignore next */ []));
    get shouldLabelFloat() { return this._shouldLabelFloat(); }
    _onChange = () => { };
    _onTouched = () => { };
    constructor() {
        if (this.ngControl) {
            this.ngControl.valueAccessor = this;
        }
        this._selectionModel = new SelectionModel(this.multiple());
        const destroyRef = inject(DestroyRef);
        destroyRef.onDestroy(() => {
            this._selectionModelDestroy.next();
            this._selectionModelDestroy.complete();
        });
        effect(() => {
            const isMultiple = this.multiple();
            const value = this.value();
            untracked(() => {
                this._selectionModelDestroy.next();
                this._selectionModel = new SelectionModel(isMultiple);
                this._selectionModel.changed.pipe(takeUntil(this._selectionModelDestroy)).subscribe(event => {
                    event.added.forEach(option => option.select());
                    event.removed.forEach(option => option.deselect());
                    this._selectionChanges.update(v => v + 1);
                    this.stateChanges.set(undefined);
                });
                this._selectionChanges.update(v => v + 1);
                this._setSelectionByValue(value);
            });
        });
        effect(() => {
            this.options();
            this._optionsContentChanges();
            const value = this.value();
            untracked(() => {
                this._resetOptions();
                this._setSelectionByValue(value);
                if (this.panelOpen()) {
                    setTimeout(() => {
                        this._scrollToSelectedOption();
                    }, 10);
                }
            });
        });
        effect(() => {
            this._optionsContentChanges();
            untracked(() => {
                this._selectionChanges.update(v => v + 1);
            });
        });
    }
    get selected() {
        return this.multiple() ? this._selectionModel.selected : this._selectionModel.selected[0];
    }
    triggerValue = computed(() => {
        this._selectionChanges();
        this.options();
        this._optionsContentChanges();
        if (this.empty) {
            return '';
        }
        if (this.multiple()) {
            return this._selectionModel.selected.map(option => option.viewValue).join(', ');
        }
        return this._selectionModel.selected[0]?.viewValue || '';
    }, ...(ngDevMode ? [{ debugName: "triggerValue" }] : /* istanbul ignore next */ []));
    ngAfterContentInit() {
    }
    _resetOptions() {
        this._optionsDestroy.next();
        const options = this.options();
        if (options.length === 0) {
            return;
        }
        options.forEach(option => {
            outputToObservable(option.onSelectionChange).pipe(takeUntil(this._optionsDestroy)).subscribe(opt => {
                this._onOptionClick(opt);
            });
        });
    }
    ngOnDestroy() {
        this._destroy.next();
        this._destroy.complete();
        this._optionsDestroy.next();
        this._optionsDestroy.complete();
    }
    ngDoCheck() {
        this.updateErrorState();
    }
    updateErrorState() {
        const oldState = this.errorState;
        const newState = !!(this.ngControl?.invalid && (this.ngControl?.touched || this.ngControl?.dirty));
        if (newState !== oldState) {
            this._errorState.set(newState);
        }
    }
    toggle() {
        if (this.disabled) {
            return;
        }
        this.panelOpen() ? this.close() : this.open();
    }
    open() {
        if (this.disabled || this.panelOpen()) {
            return;
        }
        this.panelOpen.set(true);
        this._focused.set(true);
        this.stateChanges.set(undefined);
        this.opened.emit();
        setTimeout(() => {
            this._scrollToSelectedOption();
        }, 10);
    }
    close() {
        if (this.panelOpen()) {
            this.panelOpen.set(false);
            this._panelPosition.set('bottom');
            this._focused.set(false);
            this.stateChanges.set(undefined);
            this.closed.emit();
            this._onTouched();
        }
    }
    _onPositionChange(event) {
        this._panelPosition.set(event.connectionPair.originY === 'top' ? 'top' : 'bottom');
        this._cdr.detectChanges();
    }
    _onFocus() {
        if (!this.disabled) {
            this._focused.set(true);
            this.stateChanges.set(undefined);
        }
    }
    _onBlur() {
        if (!this.panelOpen()) {
            this._focused.set(false);
            this._onTouched();
            this.stateChanges.set(undefined);
        }
    }
    writeValue(value) {
        this.value.set(value);
        if (this.options()) {
            this._setSelectionByValue(value);
        }
    }
    registerOnChange(fn) {
        this._onChange = fn;
    }
    registerOnTouched(fn) {
        this._onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this._disabled.set(isDisabled);
        this._cdr.markForCheck();
    }
    focus() {
        this._elementRef.nativeElement.focus();
        this.open();
    }
    _handleKeydown(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            this.toggle();
            event.preventDefault();
        }
    }
    _onOptionClick(option) {
        if (option.value() == null || option.value() === '') {
            this._selectionModel.clear();
            this._propagateChanges();
        }
        else {
            this._selectOption(option);
        }
        if (!this.multiple()) {
            this.close();
        }
    }
    _selectOption(option) {
        const wasSelected = this._selectionModel.isSelected(option);
        if (this.multiple()) {
            this._selectionModel.toggle(option);
        }
        else {
            this._selectionModel.select(option);
        }
        if (wasSelected !== this._selectionModel.isSelected(option)) {
            this._propagateChanges();
        }
    }
    _propagateChanges() {
        let valueToEmit;
        if (this.multiple()) {
            valueToEmit = this._selectionModel.selected.map(option => option.value());
        }
        else {
            valueToEmit = this._selectionModel.selected[0]?.value();
        }
        if (valueToEmit === undefined) {
            valueToEmit = null;
        }
        this.value.set(valueToEmit);
        this._onChange(valueToEmit);
        this.selectionChange.emit(new SelectChange(this, valueToEmit));
        this._cdr.markForCheck();
    }
    _setSelectionByValue(value) {
        this._selectionModel.clear();
        if (this.multiple() && Array.isArray(value)) {
            value.forEach(v => this._selectValue(v));
        }
        else {
            this._selectValue(value);
        }
        this._cdr.markForCheck();
    }
    _scrollToSelectedOption() {
        const selected = this._selectionModel.selected[0];
        if (!selected) {
            return;
        }
        const panel = this.panel()?.nativeElement;
        if (!panel) {
            return;
        }
        let scrollContainer = panel;
        const selectBody = this.selectBody()[0];
        if (selectBody) {
            scrollContainer = selectBody._elementRef.nativeElement;
        }
        else {
            const content = panel.querySelector('.ngs-select-content');
            if (content) {
                scrollContainer = content;
            }
        }
        const option = selected.elementRef.nativeElement;
        let offsetTop = 0;
        let currentElement = option;
        while (currentElement && currentElement !== scrollContainer && scrollContainer.contains(currentElement)) {
            offsetTop += currentElement.offsetTop;
            currentElement = currentElement.offsetParent;
        }
        const optionHeight = option.offsetHeight;
        const containerScrollTop = scrollContainer.scrollTop;
        const containerHeight = scrollContainer.clientHeight;
        if (offsetTop < containerScrollTop) {
            scrollContainer.scrollTop = offsetTop;
        }
        else if (offsetTop + optionHeight > containerScrollTop + containerHeight) {
            scrollContainer.scrollTop = offsetTop - containerHeight + optionHeight;
        }
        // Дополнительная проверка: если скролл все еще не там, попробуем через getBoundingClientRect
        // но только как fallback, так как offsetTop надежнее если offsetParent настроены верно.
        const containerRect = scrollContainer.getBoundingClientRect();
        const optionRect = option.getBoundingClientRect();
        if (optionRect.top < containerRect.top || optionRect.bottom > containerRect.bottom) {
            const relativeOffsetTop = optionRect.top - containerRect.top + scrollContainer.scrollTop;
            if (relativeOffsetTop < scrollContainer.scrollTop) {
                scrollContainer.scrollTop = relativeOffsetTop;
            }
            else if (relativeOffsetTop + optionHeight > scrollContainer.scrollTop + containerHeight) {
                scrollContainer.scrollTop = relativeOffsetTop - containerHeight + optionHeight;
            }
        }
    }
    _getOptionIndex(option) {
        return this.options().indexOf(option);
    }
    _selectValue(value) {
        if (value == null) {
            return;
        }
        const correspondingOption = this.options().find(option => {
            try {
                return option.value() != null && option.value() === value;
            }
            catch {
                return false;
            }
        });
        if (correspondingOption) {
            this._selectionModel.select(correspondingOption);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Select, isStandalone: true, selector: "ngs-select", inputs: { _id: { classPropertyName: "_id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, _placeholder: { classPropertyName: "_placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _disabledInput: { classPropertyName: "_disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideCheckIcon: { classPropertyName: "hideCheckIcon", publicName: "hideCheckIcon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed", value: "valueChange" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "none", "aria-haspopup": "listbox" }, listeners: { "click": "toggle()", "keydown": "_handleKeydown($event)", "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex()", "attr.aria-controls": "panelOpen() ? id + \"-panel\" : null", "attr.aria-expanded": "panelOpen()", "attr.aria-label": "ariaLabel()", "attr.aria-required": "required", "attr.aria-disabled": "disabled", "attr.aria-invalid": "errorState", "class.ngs-select-disabled": "disabled", "class.ngs-select-invalid": "errorState", "class.ngs-select-required": "required", "class.ngs-select-empty": "empty" } }, providers: [
            {
                provide: FormFieldControl,
                useExisting: forwardRef(() => Select)
            },
            {
                provide: SELECT,
                useExisting: forwardRef(() => Select)
            },
            {
                provide: OPTION_PARENT,
                useExisting: forwardRef(() => Select)
            },
            {
                provide: AUTOFOCUSABLE,
                useExisting: forwardRef(() => Select)
            }
        ], queries: [{ propertyName: "selectBody", predicate: SelectBody, isSignal: true }, { propertyName: "options", predicate: OPTION, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: Optgroup, descendants: true, isSignal: true }, { propertyName: "customTrigger", predicate: SelectTrigger, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "origin", first: true, predicate: ["origin"], descendants: true, isSignal: true }], exportAs: ["ngsSelect"], ngImport: i0, template: "<div class=\"ngs-select-trigger\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n  <div class=\"ngs-select-value\">\n    @if (empty) {\n      <span class=\"ngs-select-placeholder\">{{ placeholder }}</span>\n    } @else {\n      @if (customTrigger().length > 0) {\n        <ng-content select=\"ngs-select-trigger\"/>\n      } @else {\n        <span class=\"ngs-select-value-text\">{{ triggerValue() }}</span>\n      }\n    }\n  </div>\n  <div class=\"ngs-select-arrow-wrapper\">\n    <svg viewBox=\"0 0 24 24\" class=\"ngs-select-arrow\">\n      <path fill=\"currentColor\"\n            d=\"M4.22 8.47a.75.75 0 0 1 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06\"></path>\n    </svg>\n  </div>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (positionChange)=\"_onPositionChange($event)\"\n  (detach)=\"close()\"\n>\n  <div\n    class=\"ngs-select-panel\"\n    [class.ngs-select-panel-above]=\"_panelPosition() === 'top'\"\n    #panel\n    [attr.id]=\"id + '-panel'\"\n    (keydown)=\"_handleKeydown($event)\"\n  >\n    <ng-content select=\"ngs-select-header\"/>\n\n    @if (selectBody().length > 0) {\n      <ng-content select=\"ngs-select-body\"/>\n    } @else {\n      <div class=\"ngs-select-content\">\n        <ng-content select=\"ngs-optgroup,ngs-option\" />\n        <ng-content/>\n      </div>\n    }\n\n    <ng-content select=\"ngs-select-footer\"/>\n  </div>\n</ng-template>\n\n\n", styles: [":host{--ngs-select-arrow-color: var(--ngs-color-on-surface-variant);--ngs-select-font-size: var(--ngs-field-font-size);--ngs-select-placeholder-color: var(--ngs-field-label-color);--ngs-select-border-color: var(--ngs-field-border-color);--ngs-select-min-width: 120px;display:inline-block;outline:none;cursor:pointer;font-size:var(--ngs-select-font-size);min-width:var(--ngs-select-min-width)}:host.ngs-select-disabled{cursor:default;pointer-events:none;--ngs-select-border-color: var(--ngs-color-outline)}@supports (color: color-mix(in lab,red,red)){:host.ngs-select-disabled{--ngs-select-border-color: color-mix(in srgb, var(--ngs-color-outline), transparent 80%)}}:host.ngs-select-disabled .ngs-select-trigger{opacity:.38}:host .ngs-select-value{display:flex;align-items:center;max-width:100%;min-width:0;height:100%;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--ngs-field-line-height);font-size:var(--ngs-field-font-size)}:host .ngs-select-value-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-select-placeholder{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ngs-select-placeholder-color)}.ngs-form-field :host{min-width:0}:host .ngs-select-arrow{width:18px;height:18px;display:flex;color:var(--ngs-select-arrow-color)}:host .ngs-select-arrow-wrapper{align-items:center;justify-content:center;flex-shrink:0;display:inline-flex;transition:transform .2s ease}.ngs-form-field:not(.ngs-form-field-has-label) :host .ngs-select-arrow-wrapper,.ngs-paginator :host .ngs-select-arrow-wrapper{top:0}:host .ngs-select-trigger{display:flex;align-items:center;height:100%;min-width:0;overflow:hidden;position:relative;box-sizing:border-box;line-height:var(--ngs-field-line-height);font-size:var(--ngs-field-font-size)}:host .ngs-select-trigger .hidden{display:none}:host ::ng-deep ngs-select-trigger,:host ::ng-deep .ngs-select-trigger-content{display:flex;align-items:center;min-width:0;max-width:100%;height:100%;overflow:hidden;white-space:nowrap}:host ::ng-deep .ngs-select-trigger-content{gap:var(--ngs-select-trigger-gap, var(--ngs-dropdown-item-gap, calc(var(--spacing, .25rem) * 2)))}:host ::ng-deep .ngs-select-trigger-icon{flex:none;line-height:0}:host ::ng-deep .ngs-select-trigger-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host-context(.ngs-form-field) .ngs-select-arrow-wrapper{position:relative;top:-8px}:host-context(.ngs-form-field-focused) .ngs-select-arrow-wrapper{transform:rotate(180deg)}.ngs-select-panel{background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg));box-shadow:var(--ngs-select-panel-shadow, var(--ngs-dropdown-shadow));border-radius:var(--ngs-dropdown-radius);width:100%;transform-origin:top;animation:ngs-dropdown-panel-showing .15s cubic-bezier(0,0,.2,1);display:flex;flex-direction:column;overflow:hidden;outline:var(--ngs-select-panel-border, var(--ngs-dropdown-border))}.ngs-select-panel.ngs-select-panel-above{transform-origin:bottom}.ngs-select-panel:not(:has(.ngs-select-body)){max-height:var(--ngs-select-panel-max-height, var(--ngs-dropdown-max-height, 256px))}.ngs-select-panel .ngs-select-header,.ngs-select-panel .ngs-select-footer{display:block;flex:none;z-index:1}.ngs-select-panel .ngs-select-content{position:relative;padding:var(--ngs-select-content-padding, var(--ngs-dropdown-padding, calc(var(--spacing, .25rem) * 2)));overflow:auto;max-height:inherit}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Select, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-select', exportAs: 'ngsSelect', standalone: true, imports: [
                        OverlayModule,
                        CdkOverlayOrigin
                    ], providers: [
                        {
                            provide: FormFieldControl,
                            useExisting: forwardRef(() => Select)
                        },
                        {
                            provide: SELECT,
                            useExisting: forwardRef(() => Select)
                        },
                        {
                            provide: OPTION_PARENT,
                            useExisting: forwardRef(() => Select)
                        },
                        {
                            provide: AUTOFOCUSABLE,
                            useExisting: forwardRef(() => Select)
                        }
                    ], host: {
                        'role': 'combobox',
                        'aria-autocomplete': 'none',
                        'aria-haspopup': 'listbox',
                        '[attr.id]': 'id',
                        '[attr.tabindex]': 'disabled ? -1 : tabIndex()',
                        '[attr.aria-controls]': 'panelOpen() ? id + "-panel" : null',
                        '[attr.aria-expanded]': 'panelOpen()',
                        '[attr.aria-label]': 'ariaLabel()',
                        '[attr.aria-required]': 'required',
                        '[attr.aria-disabled]': 'disabled',
                        '[attr.aria-invalid]': 'errorState',
                        '[class.ngs-select-disabled]': 'disabled',
                        '[class.ngs-select-invalid]': 'errorState',
                        '[class.ngs-select-required]': 'required',
                        '[class.ngs-select-empty]': 'empty',
                        '(click)': 'toggle()',
                        '(keydown)': '_handleKeydown($event)',
                        '(focus)': '_onFocus()',
                        '(blur)': '_onBlur()',
                    }, template: "<div class=\"ngs-select-trigger\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n  <div class=\"ngs-select-value\">\n    @if (empty) {\n      <span class=\"ngs-select-placeholder\">{{ placeholder }}</span>\n    } @else {\n      @if (customTrigger().length > 0) {\n        <ng-content select=\"ngs-select-trigger\"/>\n      } @else {\n        <span class=\"ngs-select-value-text\">{{ triggerValue() }}</span>\n      }\n    }\n  </div>\n  <div class=\"ngs-select-arrow-wrapper\">\n    <svg viewBox=\"0 0 24 24\" class=\"ngs-select-arrow\">\n      <path fill=\"currentColor\"\n            d=\"M4.22 8.47a.75.75 0 0 1 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06\"></path>\n    </svg>\n  </div>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (positionChange)=\"_onPositionChange($event)\"\n  (detach)=\"close()\"\n>\n  <div\n    class=\"ngs-select-panel\"\n    [class.ngs-select-panel-above]=\"_panelPosition() === 'top'\"\n    #panel\n    [attr.id]=\"id + '-panel'\"\n    (keydown)=\"_handleKeydown($event)\"\n  >\n    <ng-content select=\"ngs-select-header\"/>\n\n    @if (selectBody().length > 0) {\n      <ng-content select=\"ngs-select-body\"/>\n    } @else {\n      <div class=\"ngs-select-content\">\n        <ng-content select=\"ngs-optgroup,ngs-option\" />\n        <ng-content/>\n      </div>\n    }\n\n    <ng-content select=\"ngs-select-footer\"/>\n  </div>\n</ng-template>\n\n\n", styles: [":host{--ngs-select-arrow-color: var(--ngs-color-on-surface-variant);--ngs-select-font-size: var(--ngs-field-font-size);--ngs-select-placeholder-color: var(--ngs-field-label-color);--ngs-select-border-color: var(--ngs-field-border-color);--ngs-select-min-width: 120px;display:inline-block;outline:none;cursor:pointer;font-size:var(--ngs-select-font-size);min-width:var(--ngs-select-min-width)}:host.ngs-select-disabled{cursor:default;pointer-events:none;--ngs-select-border-color: var(--ngs-color-outline)}@supports (color: color-mix(in lab,red,red)){:host.ngs-select-disabled{--ngs-select-border-color: color-mix(in srgb, var(--ngs-color-outline), transparent 80%)}}:host.ngs-select-disabled .ngs-select-trigger{opacity:.38}:host .ngs-select-value{display:flex;align-items:center;max-width:100%;min-width:0;height:100%;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--ngs-field-line-height);font-size:var(--ngs-field-font-size)}:host .ngs-select-value-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-select-placeholder{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ngs-select-placeholder-color)}.ngs-form-field :host{min-width:0}:host .ngs-select-arrow{width:18px;height:18px;display:flex;color:var(--ngs-select-arrow-color)}:host .ngs-select-arrow-wrapper{align-items:center;justify-content:center;flex-shrink:0;display:inline-flex;transition:transform .2s ease}.ngs-form-field:not(.ngs-form-field-has-label) :host .ngs-select-arrow-wrapper,.ngs-paginator :host .ngs-select-arrow-wrapper{top:0}:host .ngs-select-trigger{display:flex;align-items:center;height:100%;min-width:0;overflow:hidden;position:relative;box-sizing:border-box;line-height:var(--ngs-field-line-height);font-size:var(--ngs-field-font-size)}:host .ngs-select-trigger .hidden{display:none}:host ::ng-deep ngs-select-trigger,:host ::ng-deep .ngs-select-trigger-content{display:flex;align-items:center;min-width:0;max-width:100%;height:100%;overflow:hidden;white-space:nowrap}:host ::ng-deep .ngs-select-trigger-content{gap:var(--ngs-select-trigger-gap, var(--ngs-dropdown-item-gap, calc(var(--spacing, .25rem) * 2)))}:host ::ng-deep .ngs-select-trigger-icon{flex:none;line-height:0}:host ::ng-deep .ngs-select-trigger-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host-context(.ngs-form-field) .ngs-select-arrow-wrapper{position:relative;top:-8px}:host-context(.ngs-form-field-focused) .ngs-select-arrow-wrapper{transform:rotate(180deg)}.ngs-select-panel{background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg));box-shadow:var(--ngs-select-panel-shadow, var(--ngs-dropdown-shadow));border-radius:var(--ngs-dropdown-radius);width:100%;transform-origin:top;animation:ngs-dropdown-panel-showing .15s cubic-bezier(0,0,.2,1);display:flex;flex-direction:column;overflow:hidden;outline:var(--ngs-select-panel-border, var(--ngs-dropdown-border))}.ngs-select-panel.ngs-select-panel-above{transform-origin:bottom}.ngs-select-panel:not(:has(.ngs-select-body)){max-height:var(--ngs-select-panel-max-height, var(--ngs-dropdown-max-height, 256px))}.ngs-select-panel .ngs-select-header,.ngs-select-panel .ngs-select-footer{display:block;flex:none;z-index:1}.ngs-select-panel .ngs-select-content{position:relative;padding:var(--ngs-select-content-padding, var(--ngs-dropdown-padding, calc(var(--spacing, .25rem) * 2)));overflow:auto;max-height:inherit}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { selectBody: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectBody), { isSignal: true }] }], _id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], _placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], _disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hideCheckIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCheckIcon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OPTION), { ...{ descendants: true }, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Optgroup), { ...{ descendants: true }, isSignal: true }] }], customTrigger: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectTrigger), { ...{ descendants: true }, isSignal: true }] }], overlayDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], origin: [{ type: i0.ViewChild, args: ['origin', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });

class SelectHeader {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: SelectHeader, isStandalone: true, selector: "ngs-select-header", host: { classAttribute: "ngs-select-header" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectHeader, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-select-header', standalone: true, imports: [], template: '<ng-content />', host: {
                        'class': 'ngs-select-header'
                    }, styles: [":host{display:block;background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class SelectFooter {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: SelectFooter, isStandalone: true, selector: "ngs-select-footer", host: { classAttribute: "ngs-select-footer" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectFooter, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-select-footer', standalone: true, imports: [], template: '<ng-content />', host: {
                        'class': 'ngs-select-footer'
                    }, styles: [":host{display:block;background:var(--ngs-select-panel-bg, var(--ngs-dropdown-bg))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { SELECT, Select, SelectBody, SelectChange, SelectFooter, SelectHeader, SelectTrigger, _Select };
//# sourceMappingURL=ngstarter-ui-components-select.mjs.map
