import * as i0 from '@angular/core';
import { viewChild, input, signal, inject, Component } from '@angular/core';
import { NgControl } from '@angular/forms';
import { FormFieldControl } from '@ngstarter-ui/components/form-field';
import { Select, Option } from '@ngstarter-ui/components/select';
import { Subject, takeUntil } from 'rxjs';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { outputToObservable } from '@angular/core/rxjs-interop';

class DateFormatSelect {
    static nextId = 0;
    matSelect = viewChild.required(Select);
    dateFormats = input([
        { value: 'MM/dd/yyyy', name: 'MM/DD/YYYY' },
        { value: 'dd.MM.yyyy', name: 'DD.MM.YYYY' },
        { value: 'yyyy-MM-dd', name: 'YYYY-MM-DD' },
    ], ...(ngDevMode ? [{ debugName: "dateFormats" }] : /* istanbul ignore next */ []));
    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
    _describedBy = signal('', ...(ngDevMode ? [{ debugName: "_describedBy" }] : /* istanbul ignore next */ []));
    stateChanges = new Subject();
    id = `date-format-input-${DateFormatSelect.nextId++}`;
    controlType = 'date-format-input';
    autofilled = false;
    get focused() {
        return this._focused();
    }
    get empty() {
        return !this._value();
    }
    get shouldLabelFloat() {
        return this.focused || !this.empty;
    }
    get errorState() {
        return this.ngControl?.invalid === true && this.ngControl.touched === true;
    }
    get value() {
        return this._value();
    }
    set value(val) {
        this._value.set(val);
        this.stateChanges.next();
    }
    ngControl = inject(NgControl, { self: true, optional: true });
    placeholderInput = input('', { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
    get placeholder() {
        return this.placeholderInput();
    }
    _destroy$ = new Subject();
    constructor() {
        if (this.ngControl) {
            this.ngControl.valueAccessor = this;
        }
    }
    ngOnInit() {
        outputToObservable(this.matSelect().closed)
            .pipe(takeUntil(this._destroy$))
            .subscribe(() => {
            this._focused.set(false);
            this.onTouched();
            this.stateChanges.next();
        });
    }
    _required = false;
    get required() {
        return this._required;
    }
    set required(value) {
        this._required = coerceBooleanProperty(value);
        this.stateChanges.next();
    }
    _disabled = false;
    get disabled() {
        return this._disabled;
    }
    set disabled(value) {
        this._disabled = coerceBooleanProperty(value);
        this.matSelect().setDisabledState(this._disabled);
        this.stateChanges.next();
    }
    ngOnDestroy() {
        this._destroy$.next();
        this._destroy$.complete();
        this.stateChanges.complete();
    }
    onFocus() {
        if (!this.focused) {
            this._focused.set(true);
            this.stateChanges.next();
        }
    }
    onBlur() {
        if (!this.matSelect().panelOpen()) {
            this._focused.set(false);
            this.onTouched();
            this.stateChanges.next();
        }
    }
    onSelectionChange(event) {
        this.value = event.value;
        this.onChange(this.value);
    }
    setDescribedByIds(ids) {
        this._describedBy.set(ids.join(' '));
    }
    onContainerClick() {
        if (!this.disabled) {
            this.matSelect().open();
        }
    }
    onChange = () => { };
    onTouched = () => { };
    writeValue(value) {
        this.value = value;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    focus() {
        this.matSelect().focus();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateFormatSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DateFormatSelect, isStandalone: true, selector: "ngs-date-format-select", inputs: { dateFormats: { classPropertyName: "dateFormats", publicName: "dateFormats", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox" }, properties: { "id": "id", "attr.required": "required || null" } }, providers: [{
                provide: FormFieldControl,
                useExisting: DateFormatSelect
            }], viewQueries: [{ propertyName: "matSelect", first: true, predicate: Select, descendants: true, isSignal: true }], exportAs: ["ngsDateFormatSelect"], ngImport: i0, template: "<ngs-select\n  [value]=\"value\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n  [placeholder]=\"placeholder\">\n  @for (format of dateFormats(); track format.value) {\n    <ngs-option [value]=\"format.value\">{{ format.name }}</ngs-option>\n  }\n</ngs-select>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "ariaLabel", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateFormatSelect, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-date-format-select', exportAs: 'ngsDateFormatSelect', imports: [
                        Select,
                        Option
                    ], providers: [{
                            provide: FormFieldControl,
                            useExisting: DateFormatSelect
                        }], host: {
                        '[id]': 'id',
                        'role': 'combobox',
                        '[attr.required]': 'required || null',
                    }, template: "<ngs-select\n  [value]=\"value\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n  [placeholder]=\"placeholder\">\n  @for (format of dateFormats(); track format.value) {\n    <ngs-option [value]=\"format.value\">{{ format.name }}</ngs-option>\n  }\n</ngs-select>\n", styles: ["/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { matSelect: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Select), { isSignal: true }] }], dateFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormats", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });

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

export { DateFormatSelect };
//# sourceMappingURL=ngstarter-ui-components-date-format-select.mjs.map
