import { ChangeDetectionStrategy, Component, forwardRef, Input, model, output } from '@angular/core';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { ButtonDirective } from '../button';
import { DateRangePickerComponent } from '../date-range-picker';
import { CalendarComponent } from '../calendar';
import { DropdownComponent, DropdownMenuDirective, DropdownToggleDirective } from '../dropdown';
import { FormControlDirective, InputGroupComponent, InputGroupTextDirective } from '../form';
import { TimePickerComponent } from '../time-picker';
import { CustomRangeKeyPipe } from '../date-range-picker/date-range-picker/custom-range-key.pipe';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/layout";
import * as i2 from "@angular/forms";
export class DatePickerComponent extends DateRangePickerComponent {
    constructor(breakpointObserver) {
        super(breakpointObserver);
        this.placeholder = 'Select date';
        this.dateChange = output();
        this.range = false;
        this.calendars = 1;
        this.endDate = model(null);
    }
    set date(value) {
        this.startDateModel.set(value);
    }
    get date() {
        return this.startDate();
    }
    writeValue(value) {
        this.date = value;
        super.writeValue(value);
    }
    subscribeDateChange(subscribe = true) {
        if (subscribe) {
            this.dateChangeSubscriptions.push(this.startDateChange.subscribe((next) => {
                this.date = next;
                this.onChange(next);
                this.dateChange.emit(this.date);
            }));
            return;
        }
        this.dateChangeSubscriptions.forEach((subscription) => {
            subscription?.unsubscribe();
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DatePickerComponent, isStandalone: true, selector: "c-date-picker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", endDate: "endDateChange" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => DatePickerComponent),
                multi: true
            }
        ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<fieldset [formGroup]=\"dateRangeGroup\">\n  <c-dropdown #dropdown=\"cDropdown\" [(visible)]=\"visible\" [autoClose]=\"'outside'\" [ngClass]=\"datePickerClasses\"\n              [popperOptions]=\"popperjsOptions\" class=\"date-picker picker\">\n    <div [caret]=\"false\"\n         [disabled]=\"disabled ?? dropdown.visible\"\n         cDropdownToggle\n         class=\"date-picker-input-group\"\n    >\n      <input #startDateElementRef\n             (change)=\"handleStartDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [ngClass]=\"{hover: !!inputStartHoverValue}\"\n             [placeholder]=\"startDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"range ? undefined : valid\"\n             cFormControl\n             class=\"date-picker-input\"\n             formControlName=\"startDateInput\"\n             pattern=\"[1-9]*\"\n      >\n      @if (range && separator !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\n        <c-calendar\n          (calendarCellHover)=\"handleCalendarCellHover($event)\"\n          (calendarDateChange)=\"handleCalendarDateChange($event)\"\n          (endDateChange)=\"handleEndDateChange($event)\"\n          (startDateChange)=\"handleStartDateChange($event)\"\n          [calendarDate]=\"calendarDate\"\n          [calendars]=\"isMobile ? 1 : calendars\"\n          [dateFilter]=\"dateFilter\"\n          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div class=\"date-picker-timepickers\">\n            <!-- todo-->\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale()\"\n              [disabled]=\"!startDate()\"\n              [time]=\"startDate() ?? undefined\"\n              (timeChange)=\"handleStartTimeChange($event)\"\n            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "pipe", type: CustomRangeKeyPipe, name: "customRangeKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DatePickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c-date-picker', exportAs: 'cDatePicker', standalone: true, imports: [
                        NgClass,
                        NgTemplateOutlet,
                        ReactiveFormsModule,
                        CalendarComponent,
                        TimePickerComponent,
                        ButtonDirective,
                        DropdownComponent,
                        DropdownToggleDirective,
                        DropdownMenuDirective,
                        InputGroupComponent,
                        FormControlDirective,
                        InputGroupTextDirective,
                        CustomRangeKeyPipe
                    ], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => DatePickerComponent),
                            multi: true
                        }
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset [formGroup]=\"dateRangeGroup\">\n  <c-dropdown #dropdown=\"cDropdown\" [(visible)]=\"visible\" [autoClose]=\"'outside'\" [ngClass]=\"datePickerClasses\"\n              [popperOptions]=\"popperjsOptions\" class=\"date-picker picker\">\n    <div [caret]=\"false\"\n         [disabled]=\"disabled ?? dropdown.visible\"\n         cDropdownToggle\n         class=\"date-picker-input-group\"\n    >\n      <input #startDateElementRef\n             (change)=\"handleStartDateInputChange($event)\"\n             [attr.tabindex]=\"disabled ? -1 : 0\"\n             [ngClass]=\"{hover: !!inputStartHoverValue}\"\n             [placeholder]=\"startDatePlaceholder\"\n             [readonly]=\"inputReadOnly ?? null\"\n             [valid]=\"range ? undefined : valid\"\n             cFormControl\n             class=\"date-picker-input\"\n             formControlName=\"startDateInput\"\n             pattern=\"[1-9]*\"\n      >\n      @if (range && separator !== false) {\n        <div class=\"date-picker-separator\"></div>\n      }\n      @if (range) {\n        <input #endDateElementRef\n               (change)=\"handleEndDateInputChange($event)\"\n               [attr.tabindex]=\"disabled ? -1 : 0\"\n               [ngClass]=\"{hover: !!inputEndHoverValue}\"\n               [placeholder]=\"endDatePlaceholder\"\n               [readonly]=\"inputReadOnly ?? null\"\n               [valid]=\"valid ?? undefined\"\n               cFormControl\n               class=\"date-picker-input\"\n               formControlName=\"endDateInput\"\n               pattern=\"[1-9]*\"\n        >\n      }\n      @if (indicator) {\n        <div class=\"date-picker-indicator\"></div>\n      }\n      @if (cleaner && startDateElementRef.value && !disabled) {\n        <div (click)=\"!disabled && handleClear($event)\" class=\"date-picker-cleaner\" role=\"button\"></div>\n      }\n    </div>\n    <div cDropdownMenu class=\"date-picker-dropdown py-0\">\n      <div class=\"date-picker-body\">\n        @if (!showRanges) {\n          @if (ranges && customRanges.length > 0) {\n            <div class=\"date-picker-ranges\">\n              @for (customRange of customRanges; track customRange) {\n                <button (click)=\"setCustomRange(customRange)\"\n                        [color]=\"rangesButtonsColor\"\n                        [size]=\"rangesButtonsSize\"\n                        [variant]=\"rangesButtonsVariant\"\n                        cButton>\n                  {{ customRange | customRangeKey }}\n                </button>\n              }\n            </div>\n          }\n        }\n        <c-calendar\n          (calendarCellHover)=\"handleCalendarCellHover($event)\"\n          (calendarDateChange)=\"handleCalendarDateChange($event)\"\n          (endDateChange)=\"handleEndDateChange($event)\"\n          (startDateChange)=\"handleStartDateChange($event)\"\n          [calendarDate]=\"calendarDate\"\n          [calendars]=\"isMobile ? 1 : calendars\"\n          [dateFilter]=\"dateFilter\"\n          [dayFormat]=\"dayFormat\"\n          [disabledDates]=\"disabledDates\"\n          [endDate]=\"endDate()\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [locale]=\"locale()\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [navYearFirst]=\"navYearFirst\"\n          [navigation]=\"navigation\"\n          [range]=\"range\"\n          [selectAdjacentDays]=\"selectAdjacentDays\"\n          [selectionType]=\"selectionType\"\n          [showAdjacentDays]=\"showAdjacentDays\"\n          [showWeekNumber]=\"showWeekNumber\"\n          [startDate]=\"startDate()\"\n          [weekNumbersLabel]=\"weekNumbersLabel\"\n          [weekdayFormat]=\"weekdayFormat\"\n          class=\"date-picker-calendars\"\n        />\n        @if (false && timepicker) {\n          <div class=\"date-picker-timepickers\">\n            <!-- todo-->\n            <c-time-picker\n              variant=\"select\"\n              [locale]=\"locale()\"\n              [disabled]=\"!startDate()\"\n              [time]=\"startDate() ?? undefined\"\n              (timeChange)=\"handleStartTimeChange($event)\"\n            />\n            @if (range) {\n              <c-time-picker\n                variant=\"select\"\n                [locale]=\"locale()\"\n                [disabled]=\"!endDate()\"\n                [time]=\"endDate() ?? undefined\"\n                (timeChange)=\"handleEndTimeChange($event)\"\n              />\n            }\n          </div>\n        }\n      </div>\n      @if (templates?.datePickerFooter) {\n        <div class=\"date-picker-footer\">\n          <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\" />\n        </div>\n      }\n    </div>\n    <ng-content />\n  </c-dropdown>\n</fieldset>\n", styles: [".form-control.date-picker-input:focus{box-shadow:0 0}\n"] }]
        }], ctorParameters: () => [{ type: i1.BreakpointObserver }], propDecorators: { placeholder: [{
                type: Input
            }], date: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 