import * as i0 from '@angular/core';
import { input, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { Hint, Suffix, Error, Label, FormField } from '@ngstarter-ui/components/form-field';
import { DatepickerToggle, Datepicker, DatepickerInput, provideNativeDateAdapter } from '@ngstarter-ui/components/datepicker';
import { Input } from '@ngstarter-ui/components/input';

class DatepickerField {
    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
    getErrorMessage() {
        const errors = this.control().errors;
        if (!errors)
            return '';
        const errorKey = Object.keys(errors)[0];
        const validator = this.config().validators?.find((v) => v.type === errorKey);
        return validator?.message || 'Invalid value';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerField, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DatepickerField, isStandalone: true, selector: "ngs-datepicker-field", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
            provideNativeDateAdapter()
        ], exportAs: ["ngsDatepickerField"], ngImport: i0, template: "@if(control() && config()) {\n  <ngs-form-field>\n    <ngs-label>{{ config().label }}</ngs-label>\n    <input ngsInput [ngsDatepicker]=\"picker\" [formControl]=\"control()\" readonly>\n    <ngs-datepicker-toggle ngsSuffix [for]=\"picker\" />\n    <ngs-datepicker #picker />\n    <ngs-hint>{{ config().hint }}</ngs-hint>\n    @if (control().invalid && control().touched) {\n      <ngs-error>{{ getErrorMessage() }}</ngs-error>\n    }\n  </ngs-form-field>\n}\n", styles: [":host{display:block}:host ngs-form-field{width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "directive", type: Suffix, selector: "[ngsSuffix]" }, { kind: "component", type: DatepickerToggle, selector: "ngs-datepicker-toggle", inputs: ["for"], exportAs: ["ngsDatepickerToggle"] }, { kind: "component", type: Datepicker, selector: "ngs-datepicker", inputs: ["startAt", "calendarHeaderComponent", "quickPresets", "showQuickPresets"], exportAs: ["ngsDatepicker"] }, { kind: "component", type: Error, selector: "ngs-error" }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty"], exportAs: ["ngsFormField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: DatepickerInput, selector: "input[ngsDatepicker]", inputs: ["ngsDatepicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerField, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-datepicker-field', exportAs: 'ngsDatepickerField', providers: [
                        provideNativeDateAdapter()
                    ], imports: [
                        Hint,
                        Input,
                        Suffix,
                        DatepickerToggle,
                        Datepicker,
                        Error,
                        Label,
                        FormField,
                        ReactiveFormsModule,
                        DatepickerInput
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(control() && config()) {\n  <ngs-form-field>\n    <ngs-label>{{ config().label }}</ngs-label>\n    <input ngsInput [ngsDatepicker]=\"picker\" [formControl]=\"control()\" readonly>\n    <ngs-datepicker-toggle ngsSuffix [for]=\"picker\" />\n    <ngs-datepicker #picker />\n    <ngs-hint>{{ config().hint }}</ngs-hint>\n    @if (control().invalid && control().touched) {\n      <ngs-error>{{ getErrorMessage() }}</ngs-error>\n    }\n  </ngs-form-field>\n}\n", styles: [":host{display:block}:host ngs-form-field{width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });

export { DatepickerField };
//# sourceMappingURL=ngstarter-ui-components-form-renderer-datepicker-field-Bzc0TPO9.mjs.map
