import { ChangeDetectionStrategy, Component, Input, ViewChild, } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { map } from 'rxjs/operators';
import { dayOfWeekIndex, weekDayNames } from './constants';
import { DatetimePickerService } from './datetime-picker.service';
import * as i0 from "@angular/core";
import * as i1 from "./datetime-picker.service";
import * as i2 from "@clr/angular";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "@angular/cdk/bidi";
import * as i6 from "../form-field/form-field-control.directive";
import * as i7 from "../dropdown/dropdown.component";
import * as i8 from "../dropdown/dropdown-menu.component";
import * as i9 from "../dropdown/dropdown-trigger.directive";
import * as i10 from "@ngx-translate/core";
import * as i11 from "../../pipes/locale-date.pipe";
/**
 * @description
 * A form input for selecting datetime values.
 *
 * @example
 * ```HTML
 * <vdr-datetime-picker [(ngModel)]="startDate"></vdr-datetime-picker>
 * ```
 *
 * @docsCategory components
 */
export class DatetimePickerComponent {
    constructor(changeDetectorRef, datetimePickerService) {
        this.changeDetectorRef = changeDetectorRef;
        this.datetimePickerService = datetimePickerService;
        /**
         * @description
         * The day that the week should start with in the calendar view.
         */
        this.weekStartDay = 'mon';
        /**
         * @description
         * The granularity of the minutes time picker
         */
        this.timeGranularityInterval = 5;
        /**
         * @description
         * The minimum date as an ISO string
         */
        this.min = null;
        /**
         * @description
         * The maximum date as an ISO string
         */
        this.max = null;
        /**
         * @description
         * Sets the readonly state
         */
        this.readonly = false;
        this.disabled = false;
        this.weekdays = [];
    }
    ngOnInit() {
        this.datetimePickerService.setWeekStartingDay(this.weekStartDay);
        this.datetimePickerService.setMin(this.min);
        this.datetimePickerService.setMax(this.max);
        this.populateYearsSelection();
        this.populateWeekdays();
        this.populateHours();
        this.populateMinutes();
        this.calendarView$ = this.datetimePickerService.calendarView$;
        this.current$ = this.datetimePickerService.viewing$.pipe(map(date => ({
            date,
            month: date.getMonth() + 1,
            year: date.getFullYear(),
        })));
        this.selected$ = this.datetimePickerService.selected$;
        this.selectedHours$ = this.selected$.pipe(map(date => date && date.getHours()));
        this.selectedMinutes$ = this.selected$.pipe(map(date => date && date.getMinutes()));
        this.subscription = this.datetimePickerService.selected$.subscribe(val => {
            if (this.onChange) {
                this.onChange(val == null ? val : val.toISOString());
            }
        });
    }
    ngAfterViewInit() {
        this.dropdownComponent.onOpenChange(isOpen => {
            if (isOpen) {
                this.calendarTable.nativeElement.focus();
            }
        });
    }
    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouch = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    writeValue(value) {
        this.datetimePickerService.selectDatetime(value);
    }
    prevMonth() {
        this.datetimePickerService.viewPrevMonth();
    }
    nextMonth() {
        this.datetimePickerService.viewNextMonth();
    }
    selectToday() {
        this.datetimePickerService.selectToday();
    }
    setYear(event) {
        const target = event.target;
        this.datetimePickerService.viewYear(parseInt(target.value, 10));
    }
    setMonth(event) {
        const target = event.target;
        this.datetimePickerService.viewMonth(parseInt(target.value, 10));
    }
    selectDay(day) {
        if (day.disabled) {
            return;
        }
        day.select();
    }
    clearValue() {
        this.datetimePickerService.selectDatetime(null);
    }
    handleCalendarKeydown(event) {
        switch (event.key) {
            case 'ArrowDown':
                return this.datetimePickerService.viewJumpDown();
            case 'ArrowUp':
                return this.datetimePickerService.viewJumpUp();
            case 'ArrowRight':
                return this.datetimePickerService.viewJumpRight();
            case 'ArrowLeft':
                return this.datetimePickerService.viewJumpLeft();
            case 'Enter':
                return this.datetimePickerService.selectViewed();
        }
    }
    setHour(event) {
        const target = event.target;
        this.datetimePickerService.selectHour(parseInt(target.value, 10));
    }
    setMinute(event) {
        const target = event.target;
        this.datetimePickerService.selectMinute(parseInt(target.value, 10));
    }
    closeDatepicker() {
        this.dropdownComponent.toggleOpen();
        this.datetimeInput.nativeElement.focus();
    }
    populateYearsSelection() {
        const yearRange = this.yearRange ?? 10;
        const currentYear = new Date().getFullYear();
        const min = (this.min && new Date(this.min).getFullYear()) || currentYear - yearRange;
        const max = (this.max && new Date(this.max).getFullYear()) || currentYear + yearRange;
        const spread = max - min + 1;
        this.years = Array.from({ length: spread }).map((_, i) => min + i);
    }
    populateWeekdays() {
        const weekStartDayIndex = dayOfWeekIndex[this.weekStartDay];
        for (let i = 0; i < 7; i++) {
            this.weekdays.push(weekDayNames[(i + weekStartDayIndex + 0) % 7]);
        }
    }
    populateHours() {
        this.hours = Array.from({ length: 24 }).map((_, i) => i);
    }
    populateMinutes() {
        const minutes = [];
        for (let i = 0; i < 60; i += this.timeGranularityInterval) {
            minutes.push(i);
        }
        this.minutes = minutes;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DatetimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DatetimePickerService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: { yearRange: "yearRange", weekStartDay: "weekStartDay", timeGranularityInterval: "timeGranularityInterval", min: "min", max: "max", readonly: "readonly" }, providers: [
            DatetimePickerService,
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: DatetimePickerComponent,
                multi: true,
            },
        ], viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: ["dropdownComponent"], descendants: true, static: true }, { propertyName: "datetimeInput", first: true, predicate: ["datetimeInput"], descendants: true, static: true }, { propertyName: "calendarTable", first: true, predicate: ["calendarTable"], descendants: true }], ngImport: i0, template: "<div class=\"input-wrapper\">\n    <input\n        readonly\n        [ngModel]=\"selected$ | async | localeDate : 'medium'\"\n        class=\"selected-datetime\"\n        (keydown.enter)=\"dropdownComponent.toggleOpen()\"\n        (keydown.space)=\"dropdownComponent.toggleOpen()\"\n        #datetimeInput\n    />\n    <button\n        class=\"clear-value-button\"\n        [class.visible]=\"!disabled && !readonly && (selected$ | async)\"\n        (click)=\"clearValue()\"\n    >\n        <clr-icon shape=\"times\"></clr-icon>\n    </button>\n</div>\n<vdr-dropdown #dropdownComponent>\n    <button class=\"calendar-button\" vdrDropdownTrigger [disabled]=\"readonly || disabled\">\n        <clr-icon shape=\"calendar\"></clr-icon>\n    </button>\n    <vdr-dropdown-menu>\n        <div\n            class=\"datetime-picker\"\n            *ngIf=\"current$ | async as currentView\"\n            (keydown.escape)=\"closeDatepicker()\"\n        >\n            <div class=\"controls\">\n                <div class=\"selects\">\n                    <div class=\"month-select\">\n                        <select name=\"month\" [ngModel]=\"currentView.month\" (change)=\"setMonth($event)\">\n                            <option [value]=\"1\">{{ 'datetime.month-jan' | translate }}</option>\n                            <option [value]=\"2\">{{ 'datetime.month-feb' | translate }}</option>\n                            <option [value]=\"3\">{{ 'datetime.month-mar' | translate }}</option>\n                            <option [value]=\"4\">{{ 'datetime.month-apr' | translate }}</option>\n                            <option [value]=\"5\">{{ 'datetime.month-may' | translate }}</option>\n                            <option [value]=\"6\">{{ 'datetime.month-jun' | translate }}</option>\n                            <option [value]=\"7\">{{ 'datetime.month-jul' | translate }}</option>\n                            <option [value]=\"8\">{{ 'datetime.month-aug' | translate }}</option>\n                            <option [value]=\"9\">{{ 'datetime.month-sep' | translate }}</option>\n                            <option [value]=\"10\">{{ 'datetime.month-oct' | translate }}</option>\n                            <option [value]=\"11\">{{ 'datetime.month-nov' | translate }}</option>\n                            <option [value]=\"12\">{{ 'datetime.month-dec' | translate }}</option>\n                        </select>\n                    </div>\n                    <div class=\"year-select\">\n                        <select name=\"month\" [ngModel]=\"currentView.year\" (change)=\"setYear($event)\">\n                            <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\n                        </select>\n                    </div>\n                </div>\n                <div class=\"control-buttons\">\n                    <button\n                        class=\"btn btn-link btn-sm\"\n                        (click)=\"prevMonth()\"\n                        [title]=\"'common.view-previous-month' | translate\"\n                    >\n                        <clr-icon shape=\"caret\" dir=\"left\"></clr-icon>\n                    </button>\n                    <button\n                        class=\"btn btn-link btn-sm\"\n                        (click)=\"selectToday()\"\n                        [title]=\"'common.select-today' | translate\"\n                    >\n                        <clr-icon shape=\"event\"></clr-icon>\n                    </button>\n                    <button\n                        class=\"btn btn-link btn-sm\"\n                        (click)=\"nextMonth()\"\n                        [title]=\"'common.view-next-month' | translate\"\n                    >\n                        <clr-icon shape=\"caret\" dir=\"right\"></clr-icon>\n                    </button>\n                </div>\n            </div>\n            <table\n                class=\"calendar-table\"\n                #calendarTable\n                tabindex=\"0\"\n                (keydown)=\"handleCalendarKeydown($event)\"\n            >\n                <thead>\n                    <tr>\n                        <td *ngFor=\"let weekdayName of weekdays\">\n                            {{ weekdayName | translate }}\n                        </td>\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr *ngFor=\"let week of calendarView$ | async\">\n                        <td\n                            *ngFor=\"let day of week\"\n                            class=\"day-cell\"\n                            [class.selected]=\"day.selected\"\n                            [class.today]=\"day.isToday\"\n                            [class.viewing]=\"day.isViewing\"\n                            [class.current-month]=\"day.inCurrentMonth\"\n                            [class.disabled]=\"day.disabled\"\n                            (keydown.enter)=\"selectDay(day)\"\n                            (click)=\"selectDay(day)\"\n                        >\n                            {{ day.dayOfMonth }}\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n            <div class=\"time-picker\">\n                <span class=\"flex-spacer\"> {{ 'datetime.time' | translate }}: </span>\n                <select name=\"hour\" [ngModel]=\"selectedHours$ | async\" (change)=\"setHour($event)\">\n                    <option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour | number : '2.0-0' }}</option>\n                </select>\n                <span>:</span>\n                <select name=\"hour\" [ngModel]=\"selectedMinutes$ | async\" (change)=\"setMinute($event)\">\n                    <option *ngFor=\"let minute of minutes\" [value]=\"minute\">\n                        {{ minute | number : '2.0-0' }}\n                    </option>\n                </select>\n            </div>\n        </div>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [":host{display:flex;width:100%}.input-wrapper{flex:1;display:flex}input.selected-datetime{flex:1;border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-inline-end:none!important}button.clear-value-button{margin:0;border-radius:0;border-inline-start:none;border:none;border-top:1px solid var(--color-weight-200);border-bottom:1px solid var(--color-weight-200);border-inline-end:1px solid var(--color-weight-200);background-color:var(--color-button-bg);color:var(--color-text-100);display:none}button.clear-value-button.visible{display:block}button.calendar-button{margin:0;border-top-left-radius:0;border-bottom-left-radius:0;border:1px solid var(--color-weight-200);border-radius:var(--border-radius-sm);border-inline-start:none;height:100%;background-color:var(--color-button-bg);color:var(--color-text-100)}.datetime-picker{margin:0 12px}table.calendar-table{padding:6px}table.calendar-table:focus{outline:1px solid var(--color-primary-500);box-shadow:0 0 1px 2px var(--color-primary-100)}table.calendar-table td{width:24px;text-align:center;border:1px solid transparent;-webkit-user-select:none;user-select:none}table.calendar-table .day-cell{background-color:var(--color-component-bg-200);color:var(--color-text-100);cursor:pointer;transition:background-color .1s}table.calendar-table .day-cell.current-month{background-color:var(--color-weight-100);color:var(--color-text-100)}table.calendar-table .day-cell.selected{background-color:var(--color-primary-500);color:#fff}table.calendar-table .day-cell.viewing:not(.selected){background-color:var(--color-primary-200)}table.calendar-table .day-cell.today{border:1px solid var(--color-component-border-300)}table.calendar-table .day-cell:hover:not(.selected):not(.disabled){background-color:var(--color-primary-100)}table.calendar-table .day-cell.disabled{cursor:default;color:var(--color-text-200)}.selects{display:flex;justify-content:space-between;margin-bottom:12px}.control-buttons{display:flex}.time-picker{display:flex;align-items:baseline;margin-top:12px}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i6.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i7.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i8.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i9.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i11.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DatetimePickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-datetime-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        DatetimePickerService,
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: DatetimePickerComponent,
                            multi: true,
                        },
                    ], template: "<div class=\"input-wrapper\">\n    <input\n        readonly\n        [ngModel]=\"selected$ | async | localeDate : 'medium'\"\n        class=\"selected-datetime\"\n        (keydown.enter)=\"dropdownComponent.toggleOpen()\"\n        (keydown.space)=\"dropdownComponent.toggleOpen()\"\n        #datetimeInput\n    />\n    <button\n        class=\"clear-value-button\"\n        [class.visible]=\"!disabled && !readonly && (selected$ | async)\"\n        (click)=\"clearValue()\"\n    >\n        <clr-icon shape=\"times\"></clr-icon>\n    </button>\n</div>\n<vdr-dropdown #dropdownComponent>\n    <button class=\"calendar-button\" vdrDropdownTrigger [disabled]=\"readonly || disabled\">\n        <clr-icon shape=\"calendar\"></clr-icon>\n    </button>\n    <vdr-dropdown-menu>\n        <div\n            class=\"datetime-picker\"\n            *ngIf=\"current$ | async as currentView\"\n            (keydown.escape)=\"closeDatepicker()\"\n        >\n            <div class=\"controls\">\n                <div class=\"selects\">\n                    <div class=\"month-select\">\n                        <select name=\"month\" [ngModel]=\"currentView.month\" (change)=\"setMonth($event)\">\n                            <option [value]=\"1\">{{ 'datetime.month-jan' | translate }}</option>\n                            <option [value]=\"2\">{{ 'datetime.month-feb' | translate }}</option>\n                            <option [value]=\"3\">{{ 'datetime.month-mar' | translate }}</option>\n                            <option [value]=\"4\">{{ 'datetime.month-apr' | translate }}</option>\n                            <option [value]=\"5\">{{ 'datetime.month-may' | translate }}</option>\n                            <option [value]=\"6\">{{ 'datetime.month-jun' | translate }}</option>\n                            <option [value]=\"7\">{{ 'datetime.month-jul' | translate }}</option>\n                            <option [value]=\"8\">{{ 'datetime.month-aug' | translate }}</option>\n                            <option [value]=\"9\">{{ 'datetime.month-sep' | translate }}</option>\n                            <option [value]=\"10\">{{ 'datetime.month-oct' | translate }}</option>\n                            <option [value]=\"11\">{{ 'datetime.month-nov' | translate }}</option>\n                            <option [value]=\"12\">{{ 'datetime.month-dec' | translate }}</option>\n                        </select>\n                    </div>\n                    <div class=\"year-select\">\n                        <select name=\"month\" [ngModel]=\"currentView.year\" (change)=\"setYear($event)\">\n                            <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\n                        </select>\n                    </div>\n                </div>\n                <div class=\"control-buttons\">\n                    <button\n                        class=\"btn btn-link btn-sm\"\n                        (click)=\"prevMonth()\"\n                        [title]=\"'common.view-previous-month' | translate\"\n                    >\n                        <clr-icon shape=\"caret\" dir=\"left\"></clr-icon>\n                    </button>\n                    <button\n                        class=\"btn btn-link btn-sm\"\n                        (click)=\"selectToday()\"\n                        [title]=\"'common.select-today' | translate\"\n                    >\n                        <clr-icon shape=\"event\"></clr-icon>\n                    </button>\n                    <button\n                        class=\"btn btn-link btn-sm\"\n                        (click)=\"nextMonth()\"\n                        [title]=\"'common.view-next-month' | translate\"\n                    >\n                        <clr-icon shape=\"caret\" dir=\"right\"></clr-icon>\n                    </button>\n                </div>\n            </div>\n            <table\n                class=\"calendar-table\"\n                #calendarTable\n                tabindex=\"0\"\n                (keydown)=\"handleCalendarKeydown($event)\"\n            >\n                <thead>\n                    <tr>\n                        <td *ngFor=\"let weekdayName of weekdays\">\n                            {{ weekdayName | translate }}\n                        </td>\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr *ngFor=\"let week of calendarView$ | async\">\n                        <td\n                            *ngFor=\"let day of week\"\n                            class=\"day-cell\"\n                            [class.selected]=\"day.selected\"\n                            [class.today]=\"day.isToday\"\n                            [class.viewing]=\"day.isViewing\"\n                            [class.current-month]=\"day.inCurrentMonth\"\n                            [class.disabled]=\"day.disabled\"\n                            (keydown.enter)=\"selectDay(day)\"\n                            (click)=\"selectDay(day)\"\n                        >\n                            {{ day.dayOfMonth }}\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n            <div class=\"time-picker\">\n                <span class=\"flex-spacer\"> {{ 'datetime.time' | translate }}: </span>\n                <select name=\"hour\" [ngModel]=\"selectedHours$ | async\" (change)=\"setHour($event)\">\n                    <option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour | number : '2.0-0' }}</option>\n                </select>\n                <span>:</span>\n                <select name=\"hour\" [ngModel]=\"selectedMinutes$ | async\" (change)=\"setMinute($event)\">\n                    <option *ngFor=\"let minute of minutes\" [value]=\"minute\">\n                        {{ minute | number : '2.0-0' }}\n                    </option>\n                </select>\n            </div>\n        </div>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [":host{display:flex;width:100%}.input-wrapper{flex:1;display:flex}input.selected-datetime{flex:1;border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-inline-end:none!important}button.clear-value-button{margin:0;border-radius:0;border-inline-start:none;border:none;border-top:1px solid var(--color-weight-200);border-bottom:1px solid var(--color-weight-200);border-inline-end:1px solid var(--color-weight-200);background-color:var(--color-button-bg);color:var(--color-text-100);display:none}button.clear-value-button.visible{display:block}button.calendar-button{margin:0;border-top-left-radius:0;border-bottom-left-radius:0;border:1px solid var(--color-weight-200);border-radius:var(--border-radius-sm);border-inline-start:none;height:100%;background-color:var(--color-button-bg);color:var(--color-text-100)}.datetime-picker{margin:0 12px}table.calendar-table{padding:6px}table.calendar-table:focus{outline:1px solid var(--color-primary-500);box-shadow:0 0 1px 2px var(--color-primary-100)}table.calendar-table td{width:24px;text-align:center;border:1px solid transparent;-webkit-user-select:none;user-select:none}table.calendar-table .day-cell{background-color:var(--color-component-bg-200);color:var(--color-text-100);cursor:pointer;transition:background-color .1s}table.calendar-table .day-cell.current-month{background-color:var(--color-weight-100);color:var(--color-text-100)}table.calendar-table .day-cell.selected{background-color:var(--color-primary-500);color:#fff}table.calendar-table .day-cell.viewing:not(.selected){background-color:var(--color-primary-200)}table.calendar-table .day-cell.today{border:1px solid var(--color-component-border-300)}table.calendar-table .day-cell:hover:not(.selected):not(.disabled){background-color:var(--color-primary-100)}table.calendar-table .day-cell.disabled{cursor:default;color:var(--color-text-200)}.selects{display:flex;justify-content:space-between;margin-bottom:12px}.control-buttons{display:flex}.time-picker{display:flex;align-items:baseline;margin-top:12px}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DatetimePickerService }]; }, propDecorators: { yearRange: [{
                type: Input
            }], weekStartDay: [{
                type: Input
            }], timeGranularityInterval: [{
                type: Input
            }], min: [{
                type: Input
            }], max: [{
                type: Input
            }], readonly: [{
                type: Input
            }], dropdownComponent: [{
                type: ViewChild,
                args: ['dropdownComponent', { static: true }]
            }], datetimeInput: [{
                type: ViewChild,
                args: ['datetimeInput', { static: true }]
            }], calendarTable: [{
                type: ViewChild,
                args: ['calendarTable']
            }] } });
//# sourceMappingURL=data:application/json;base64, 