var _form, _subscription, _setStatusForm, _setMinMaxValidate, _setValidate, _setFormat, _setLabel, _formatValue, _emitValue, _setControlValue, _setTypeView, _getDate, _getDateFromZUIDate;
import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
import { Component, EventEmitter, forwardRef, Input, Output, ViewChild } from '@angular/core';
import { FormControl, FormGroup, NgForm, NG_VALUE_ACCESSOR } from '@angular/forms';
import { DateAdapter } from '@angular/material/core';
import { MatDatepicker } from '@angular/material/datepicker';
import { Subscription } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
import * as DF from 'date-fns';
import * as moment from 'moment';
import { ZuiB, ZuiD, ZuiF } from '@material-zui/core';
import { FORMAT_DATE, FORMAT_DATE_TIME, FORMAT_MONTH_YEAR, FORMAT_TIME } from './constant';
import { CustomDateAdapterService } from './service/custom-adapter.service';
import { DateTimeService } from './service/date-time.service';
import { MAX_MSG, MIN_MSG, REQUIRED } from '../constants';
export class ZUIDateTimePickerComponent {
    constructor(adapter, dateTimeService) {
        this.adapter = adapter;
        this.dateTimeService = dateTimeService;
        this.name = `zui-date-time-picker-${ZuiF.uuid()}`;
        this.disabledValidate = false;
        /** for date range */
        this.placeholderStart = 'Start';
        /** for date range */
        this.placeholderEnd = 'End';
        // @Input() comparisonStart: Date
        // @Input() comparisonEnd: Date
        /** "legacy" | "standard" | "fill" | "outline" */
        this.appearance = 'outline';
        /** 'date' | 'daterange' | 'datetime' | 'time' | 'calendar' */
        this.type = 'date';
        /** 'on' | 'off' */
        this.autocomplete = 'off';
        /** default "200px", eg: "300px", "400em", "500rem" */
        this.width = '300px';
        /** default "month", eg: "month" | "year" | "multi-year" */
        this.startView = 'month';
        /** default 'day-month-year', eg: 'day-month-year' | 'month-year' */
        this.typeView = 'day-month-year';
        this.stepHour = 1;
        this.stepMinute = 1;
        this.stepSecond = 1;
        this.validatorMessageDefault = { required: REQUIRED };
        this.validatorMessageVal = this.validatorMessageDefault;
        this.requiredVal = false;
        this.readonly = true;
        this.touchUiVal = false;
        this.showSecondsVal = false;
        this.disableMinuteVal = false;
        this.enableMeridianVal = false;
        this.customApplyBtnVal = false;
        this.showSpinners = true;
        this.tooltipPosition = 'above';
        this.tooltipDisabled = true;
        this.fullWidth = true;
        this.disabledAllVal = false;
        this.disabledInputVal = false;
        this.disabledIconVal = false;
        this.clickToOpen = true;
        _form.set(this, void 0);
        this.modelChange = new EventEmitter();
        this.valueChange = new EventEmitter();
        _subscription.set(this, new Subscription());
        this.formControl = new FormControl();
        this.dateRangeGroup = new FormGroup({
            start: new FormControl(),
            end: new FormControl(),
        });
        _setStatusForm.set(this, (status) => {
            if (status) {
                this.formControl.disable();
                this.dateRangeGroup.disable();
            }
            else {
                this.formControl.enable();
                this.dateRangeGroup.enable();
            }
        });
        _setMinMaxValidate.set(this, () => {
            var _a;
            let { min, max } = (_a = this.validatorMessage) !== null && _a !== void 0 ? _a : {};
            if (!max)
                max = `${MAX_MSG} ${__classPrivateFieldGet(this, _formatValue).call(this, this.maxDate)}`;
            if (!min)
                min = `${MIN_MSG} ${__classPrivateFieldGet(this, _formatValue).call(this, this.minDate)}`;
            this.validatorMessageVal = Object.assign(Object.assign(Object.assign({}, this.validatorMessageDefault), this.validatorMessage), { min, max });
        });
        _setValidate.set(this, () => {
            __classPrivateFieldGet(this, _setMinMaxValidate).call(this);
            if (this.allowValidate)
                this.formControl.markAllAsTouched();
        });
        _setFormat.set(this, () => {
            if (this.locales)
                this.adapter.setLocale(this.locales); // apply for all date-time-picker
            if (!this.format) {
                switch (this.type) {
                    case 'date':
                    case 'daterange':
                        this.format = FORMAT_DATE;
                        break;
                    case 'datetime':
                        this.format = FORMAT_DATE_TIME;
                        break;
                    case 'time':
                        this.format = FORMAT_TIME;
                        break;
                }
                if (this.typeView === 'month-year')
                    this.format = FORMAT_MONTH_YEAR;
            }
        });
        _setLabel.set(this, () => {
            if (this.isDateRange && this.requiredVal) {
                this.label = this.label.endsWith('*') ? this.label : `${this.label} *`;
            }
        });
        _formatValue.set(this, (value) => {
            if (!value)
                return '';
            value = __classPrivateFieldGet(this, _getDate).call(this, value);
            switch (this.type) {
                case 'date':
                    return this.locales ? value.toLocaleDateString(this.locales) : moment(value).format(this.format);
                case 'datetime':
                    return this.locales ? value.toLocaleString(this.locales) : moment(value).format(this.format);
                case 'time':
                    return value ? value.toTimeString() : '';
            }
        });
        _emitValue.set(this, (date) => {
            if (this.isDateRange) {
                const { start, end } = date;
                const startDate = __classPrivateFieldGet(this, _getDate).call(this, start);
                const endDate = __classPrivateFieldGet(this, _getDate).call(this, end);
                const startDetail = ZuiD.detail(start);
                const endDetail = ZuiD.detail(end);
                this.modelChange.emit({ start: startDate, end: endDate });
                this.valueChange.emit({ start: startDetail, end: endDetail });
            }
            else {
                const value = ZuiD.detail(date);
                this.modelChange.emit(new Date(date));
                this.valueChange.emit(value);
            }
        });
        _setControlValue.set(this, (value) => {
            var _a;
            if (this.isDateRange) {
                const { start = null, end = null } = (_a = value) !== null && _a !== void 0 ? _a : {};
                const startDate = __classPrivateFieldGet(this, _getDate).call(this, start);
                const endDate = __classPrivateFieldGet(this, _getDate).call(this, end);
                this.dateRangeGroup.setValue({ start: startDate, end: endDate });
            }
            else {
                const date = __classPrivateFieldGet(this, _getDateFromZUIDate).call(this, value);
                this.formControl.setValue(date);
            }
        });
        _setTypeView.set(this, () => {
            if (!this.typeView) {
                this.typeView = 'day-month-year';
            }
            else if (this.typeView === 'month-year') {
                this.startView = 'multi-year';
            }
        });
        _getDate.set(this, (value) => {
            var _a;
            if ((_a = value) === null || _a === void 0 ? void 0 : _a.isValid)
                return value.toDate();
            return value;
        });
        _getDateFromZUIDate.set(this, (value) => {
            var _a;
            if ((_a = value) === null || _a === void 0 ? void 0 : _a.isValid)
                return value.toDate();
            return value;
        });
        this.dateTimeChange = (date) => {
            __classPrivateFieldGet(this, _setControlValue).call(this, date);
        };
        this.filterFunc = (value) => {
            const time = ZuiD.detail(value);
            return this.filter ? this.filter(time) : true;
        };
        this.dateClassFunc = (cellDate, view) => {
            const time = ZuiD.detail(cellDate);
            return this.dateClass ? this.dateClass(time, view) : '';
        };
        this.onOpened = () => {
            this.dateTimeService.format = this.format;
        };
        this.onClick = () => {
            if (this.clickToOpen)
                this.picker.open();
        };
        this.callback = (item) => {
            if (item === null || item === void 0 ? void 0 : item.action)
                item.action();
        };
        this.open = () => {
            this.picker.open();
        };
        this.close = () => {
            this.picker.close();
        };
    }
    set required(val) {
        this.requiredVal = ZuiB.toBool(val);
    }
    set disabledReadonly(val) {
        this.readonly = ZuiB.toBoolReverse(val);
        if (this.readonly)
            this.clickToOpen = true;
    }
    set touchUi(val) {
        this.touchUiVal = ZuiB.toBool(val);
    }
    set showSeconds(val) {
        this.showSecondsVal = ZuiB.toBool(val);
    }
    set disableMinute(val) {
        this.disableMinuteVal = ZuiB.toBool(val);
    }
    /** show AM/PM */
    set enableMeridian(val) {
        this.enableMeridianVal = ZuiB.toBool(val);
    }
    set customApplyBtn(val) {
        this.customApplyBtnVal = ZuiB.toBool(val);
    }
    /** hide arrow up/down of time selector */
    set hideSpinners(val) {
        this.showSpinners = ZuiB.toBoolReverse(val);
    }
    set showTooltip(val) {
        this.tooltipDisabled = ZuiB.toBoolReverse(val);
    }
    set noFullWidth(val) {
        this.fullWidth = ZuiB.toBoolReverse(val);
    }
    set disabledAll(val) {
        this.disabledAllVal = ZuiB.toBool(val);
        __classPrivateFieldGet(this, _setStatusForm).call(this, this.disabledAllVal);
    }
    set disabledInput(val) {
        this.disabledInputVal = ZuiB.toBool(val);
        __classPrivateFieldGet(this, _setStatusForm).call(this, this.disabledInputVal);
    }
    set disabledIcon(val) {
        this.disabledIconVal = ZuiB.toBool(val);
    }
    set firstValidate(val) {
        this.allowValidate = ZuiB.toBool(val);
    }
    set disabledClickToOpen(val) {
        this.clickToOpen = ZuiB.toBoolReverse(val);
    }
    set comparisonStart(date) {
        this.comparisonStartVal = moment(date);
    }
    set comparisonEnd(date) {
        this.comparisonEndVal = moment(date);
    }
    set form(val) {
        if (val) {
            if (val instanceof NgForm) {
                __classPrivateFieldSet(this, _form, val.form);
            }
            else {
                __classPrivateFieldSet(this, _form, val);
            }
        }
    }
    set model(value) {
        __classPrivateFieldGet(this, _setControlValue).call(this, value);
    }
    ngOnInit() {
        __classPrivateFieldGet(this, _subscription).add(this.formControl.valueChanges.pipe(distinctUntilChanged((x, y) => DF.isEqual(x, y))).subscribe(date => __classPrivateFieldGet(this, _emitValue).call(this, date)))
            .add(this.dateRangeGroup.valueChanges.subscribe(date => __classPrivateFieldGet(this, _emitValue).call(this, date)));
    }
    ngOnDestroy() {
        __classPrivateFieldGet(this, _subscription).unsubscribe();
    }
    ngOnChanges() {
        __classPrivateFieldGet(this, _setLabel).call(this);
        __classPrivateFieldGet(this, _setTypeView).call(this);
        __classPrivateFieldGet(this, _setFormat).call(this);
        __classPrivateFieldGet(this, _setValidate).call(this);
    }
    ngAfterViewInit() {
        var _a, _b;
        if (this.isDateRange) {
            (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(this.name, this.dateRangeGroup);
        }
        else {
            (_b = __classPrivateFieldGet(this, _form)) === null || _b === void 0 ? void 0 : _b.addControl(this.name, this.formControl);
        }
        this.allowValidate = true;
    }
    get error() {
        var _a, _b, _c, _d, _e, _f;
        if (!this.disabledValidate) {
            const { required, max, min } = this.validatorMessageVal;
            if ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.hasError('required'))
                return required;
            if ((_b = this.formControl) === null || _b === void 0 ? void 0 : _b.hasError('matDatepickerMax'))
                return max;
            if ((_c = this.formControl) === null || _c === void 0 ? void 0 : _c.hasError('matDatepickerMin'))
                return min;
            if (((_d = this.formControl) === null || _d === void 0 ? void 0 : _d.hasError('validatorError')) || ((_e = this.formControl) === null || _e === void 0 ? void 0 : _e.hasError('validatorMsg')))
                return (_f = this.formControl.errors) === null || _f === void 0 ? void 0 : _f.validatorMsg;
        }
        return false;
    }
    get tooltipValue() {
        var _a;
        return __classPrivateFieldGet(this, _formatValue).call(this, (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.value);
    }
    get isDateRange() {
        return this.type === 'daterange';
    }
    onChange(_) { }
    registerOnTouched() { }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    writeValue(value) {
        __classPrivateFieldGet(this, _setControlValue).call(this, value);
    }
    onMonthSelect(monthAndYear, datepicker) {
        if (this.typeView === 'month-year') {
            if (this.type === 'daterange') {
            }
            else {
                const year = monthAndYear.year();
                const month = monthAndYear.month();
                this.formControl.setValue(new Date(year, month));
                datepicker.close();
            }
        }
    }
}
_form = new WeakMap(), _subscription = new WeakMap(), _setStatusForm = new WeakMap(), _setMinMaxValidate = new WeakMap(), _setValidate = new WeakMap(), _setFormat = new WeakMap(), _setLabel = new WeakMap(), _formatValue = new WeakMap(), _emitValue = new WeakMap(), _setControlValue = new WeakMap(), _setTypeView = new WeakMap(), _getDate = new WeakMap(), _getDateFromZUIDate = new WeakMap();
ZUIDateTimePickerComponent.decorators = [
    { type: Component, args: [{
                selector: 'zui-date-time-picker',
                template: "<mat-form-field\n  *ngIf=\"type === 'date'\"\n  [appearance]=\"appearance\"\n  [class.w-100]=\"fullWidth\"\n  [ngStyle]=\"{width: width}\"\n  [matTooltip]=\"tooltipValue\"\n  [matTooltipDisabled]=\"tooltipDisabled\"\n  [matTooltipPosition]=\"tooltipPosition\"\n>\n  <mat-label>{{ label }}</mat-label>\n  <input\n    matInput\n    [readonly]=\"readonly\"\n    [matDatepicker]=\"picker\"\n    [formControl]=\"formControl\"\n    [required]=\"!disabledValidate && requiredVal\"\n    [placeholder]=\"placeholder\"\n    [autocomplete]=\"autocomplete\"\n    [matDatepickerFilter]=\"filterFunc\"\n    [min]=\"minDate\"\n    [max]=\"maxDate\"\n    (click)=\"onClick()\"\n  />\n  <mat-hint *ngIf=\"hintStart\" [align]=\"'start'\">{{ hintStart }}</mat-hint>\n  <mat-hint [align]=\"'end'\">\n    <ng-container *ngIf=\"hintEnd\">{{ hintEnd }}</ng-container>\n    <ng-container *ngIf=\"!hintEnd\">\n      <ng-container *ngIf=\"minDate && !maxDate\"><mat-icon class=\"mr-2\">arrow_upward</mat-icon>{{ minDate | date: format }}</ng-container>\n      <ng-container *ngIf=\"!minDate && maxDate\"><mat-icon class=\"mr-2\">arrow_downward</mat-icon>{{ maxDate | date: format }}</ng-container>\n      <ng-container *ngIf=\"minDate && maxDate\">{{ minDate | date: format }} - {{ maxDate | date: format }}</ng-container>\n    </ng-container>\n  </mat-hint>\n  <mat-error *ngIf=\"error\">{{ error }}</mat-error>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon *ngIf=\"icon\" matDatepickerToggleIcon>{{ icon }}</mat-icon>\n  </mat-datepicker-toggle>\n  <mat-datepicker\n    #picker\n    [startView]=\"startView\"\n    [color]=\"color\"\n    [panelClass]=\"panelClass\"\n    [dateClass]=\"dateClassFunc\"\n    [touchUi]=\"touchUiVal\"\n    [disabled]=\"disabledAllVal || disabledIconVal\"\n    (monthSelected)=\"onMonthSelect($event, picker)\"\n    (opened)=\"onOpened()\"\n  >\n    <mat-datepicker-actions *ngIf=\"actions\">\n      <div *ngFor=\"let action of actions\" class=\"ml-5\">\n        <zui-button *ngIf=\"!action.status\" [label]=\"action.label\" [color]=\"action.color\" [type]=\"action.type\" (action)=\"callback(action)\"></zui-button>\n        <zui-button *ngIf=\"action.status === 'cancel'\" [label]=\"action.label\" [color]=\"action.color\" [type]=\"action.type\" matDatepickerCancel></zui-button>\n        <zui-button *ngIf=\"action.status === 'apply'\" [label]=\"action.label\" [color]=\"action.color || 'primary'\" [type]=\"action.type\" matDatepickerApply></zui-button>\n      </div>\n    </mat-datepicker-actions>\n  </mat-datepicker>\n</mat-form-field>\n\n<mat-form-field\n  *ngIf=\"type === 'daterange'\"\n  [appearance]=\"appearance\"\n  [class.w-100]=\"fullWidth\"\n  [ngStyle]=\"{width: width}\"\n  [matTooltip]=\"tooltipValue\"\n  [matTooltipDisabled]=\"tooltipDisabled\"\n  [matTooltipPosition]=\"tooltipPosition\"\n>\n  <mat-label>{{ label }}</mat-label>\n  <mat-date-range-input [formGroup]=\"dateRangeGroup\" [rangePicker]=\"rangePicker\" [comparisonStart]=\"comparisonStartVal\" [comparisonEnd]=\"comparisonEndVal\">\n    <input matStartDate formControlName=\"start\" [placeholder]=\"placeholderStart\" [autocomplete]=\"autocomplete\" [required]=\"!disabledValidate && requiredVal\" />\n    <input matEndDate formControlName=\"end\" [placeholder]=\"placeholderEnd\" [autocomplete]=\"autocomplete\" [required]=\"!disabledValidate && requiredVal\" />\n  </mat-date-range-input>\n\n  <mat-hint *ngIf=\"hintStart\" [align]=\"'start'\">{{ hintStart }}</mat-hint>\n  <mat-hint [align]=\"'end'\">\n    <ng-container *ngIf=\"hintEnd\">{{ hintEnd }}</ng-container>\n    <ng-container *ngIf=\"!hintEnd\">\n      <ng-container *ngIf=\"comparisonStart && !comparisonEnd\"><mat-icon class=\"mr-2\">arrow_upward</mat-icon>{{ comparisonStart | date: format }}</ng-container>\n      <ng-container *ngIf=\"!comparisonStart && comparisonEnd\"><mat-icon class=\"mr-2\">arrow_downward</mat-icon>{{ comparisonEnd | date: format }}</ng-container>\n      <ng-container *ngIf=\"comparisonStart && comparisonEnd\">{{ comparisonStart | date: format }} - {{ comparisonEnd | date: format }}</ng-container>\n    </ng-container>\n  </mat-hint>\n\n  <mat-error *ngIf=\"error\">{{ error }}</mat-error>\n  <mat-datepicker-toggle matSuffix [for]=\"rangePicker\">\n    <mat-icon *ngIf=\"icon\" matDatepickerToggleIcon>{{ icon }}</mat-icon>\n  </mat-datepicker-toggle>\n  <mat-date-range-picker\n    #rangePicker\n    [startView]=\"startView\"\n    [color]=\"color\"\n    [panelClass]=\"panelClass\"\n    [dateClass]=\"dateClassFunc\"\n    [touchUi]=\"touchUiVal\"\n    [disabled]=\"disabledAllVal || disabledIconVal\"\n    (monthSelected)=\"onMonthSelect($event, rangePicker)\"\n    (opened)=\"onOpened()\"\n  >\n    <mat-date-range-picker-actions *ngIf=\"actions\">\n      <div *ngFor=\"let action of actions\" class=\"ml-5\">\n        <zui-button *ngIf=\"!action.status\" [label]=\"action.label\" [color]=\"action.color\" [type]=\"action.type\" (action)=\"callback(action)\"></zui-button>\n        <zui-button *ngIf=\"action.status === 'cancel'\" [label]=\"action.label\" [color]=\"action.color\" [type]=\"action.type\" matDatepickerCancel></zui-button>\n        <zui-button *ngIf=\"action.status === 'apply'\" [label]=\"action.label\" [color]=\"action.color || 'primary'\" [type]=\"action.type\" matDatepickerApply></zui-button>\n      </div>\n    </mat-date-range-picker-actions>\n  </mat-date-range-picker>\n</mat-form-field>\n\n<ng-container *ngIf=\"type === 'datetime'\">\n  <mat-form-field\n    *ngIf=\"customApplyBtnVal\"\n    [appearance]=\"appearance\"\n    [class.w-100]=\"fullWidth\"\n    [ngStyle]=\"{width: width}\"\n    [matTooltip]=\"tooltipValue\"\n    [matTooltipDisabled]=\"tooltipDisabled\"\n    [matTooltipPosition]=\"tooltipPosition\"\n  >\n    <mat-label>{{ label }}</mat-label>\n    <input\n      matInput\n      [ngxMatDatetimePicker]=\"picker\"\n      [placeholder]=\"placeholder\"\n      [formControl]=\"formControl\"\n      [required]=\"!disabledValidate && requiredVal\"\n      [autocomplete]=\"autocomplete\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n    />\n    <mat-hint *ngIf=\"hintStart\" [align]=\"'start'\">{{ hintStart }}</mat-hint>\n    <mat-hint *ngIf=\"hintEnd\" [align]=\"'end'\">{{ hintEnd }}</mat-hint>\n    <mat-error *ngIf=\"error\">{{ error }}</mat-error>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n      <mat-icon *ngIf=\"icon\" matDatepickerToggleIcon>{{ icon }}</mat-icon>\n    </mat-datepicker-toggle>\n    <ngx-mat-datetime-picker\n      #picker\n      [showSpinners]=\"showSpinners\"\n      [showSeconds]=\"showSecondsVal\"\n      [disableMinute]=\"disableMinuteVal\"\n      [defaultTime]=\"defaultTime\"\n      [stepHour]=\"stepHour\"\n      [stepMinute]=\"stepMinute\"\n      [stepSecond]=\"stepSecond\"\n      [color]=\"color\"\n      [enableMeridian]=\"enableMeridianVal\"\n      [touchUi]=\"touchUiVal\"\n      [disabled]=\"disabledAllVal || disabledIconVal\"\n    >\n      <ng-template><ng-content></ng-content></ng-template>\n    </ngx-mat-datetime-picker>\n  </mat-form-field>\n\n  <mat-form-field\n    *ngIf=\"!customApplyBtnVal\"\n    [appearance]=\"appearance\"\n    [class.w-100]=\"fullWidth\"\n    [ngStyle]=\"{width: width}\"\n    [matTooltip]=\"tooltipValue\"\n    [matTooltipDisabled]=\"tooltipDisabled\"\n    [matTooltipPosition]=\"tooltipPosition\"\n  >\n    <mat-label>{{ label }}</mat-label>\n    <input\n      matInput\n      [ngxMatDatetimePicker]=\"picker\"\n      [placeholder]=\"placeholder\"\n      [formControl]=\"formControl\"\n      [required]=\"!disabledValidate && requiredVal\"\n      [autocomplete]=\"autocomplete\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n    />\n    <mat-hint *ngIf=\"hintStart\" [align]=\"'start'\">{{ hintStart }}</mat-hint>\n    <mat-hint *ngIf=\"hintEnd\" [align]=\"'end'\">{{ hintEnd }}</mat-hint>\n    <mat-error *ngIf=\"error\">{{ error }}</mat-error>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n      <mat-icon *ngIf=\"icon\" matDatepickerToggleIcon>{{ icon }}</mat-icon>\n    </mat-datepicker-toggle>\n    <ng-container *ngTemplateOutlet=\"belowContent\"></ng-container>\n    <ngx-mat-datetime-picker\n      #picker\n      [showSpinners]=\"showSpinners\"\n      [showSeconds]=\"showSecondsVal\"\n      [disableMinute]=\"disableMinuteVal\"\n      [defaultTime]=\"defaultTime\"\n      [stepHour]=\"stepHour\"\n      [stepMinute]=\"stepMinute\"\n      [stepSecond]=\"stepSecond\"\n      [color]=\"color\"\n      [enableMeridian]=\"enableMeridianVal\"\n      [touchUi]=\"touchUiVal\"\n      [disabled]=\"disabledAllVal || disabledIconVal\"\n    >\n    </ngx-mat-datetime-picker>\n  </mat-form-field>\n</ng-container>\n\n<ngx-mat-timepicker\n  *ngIf=\"type === 'time'\"\n  class=\"zui-date-time-picker-timepicker\"\n  [disabled]=\"disabledAllVal\"\n  [showSpinners]=\"showSpinners\"\n  [showSeconds]=\"showSecondsVal\"\n  [disableMinute]=\"disableMinuteVal\"\n  [stepHour]=\"stepHour\"\n  [stepMinute]=\"stepMinute\"\n  [stepSecond]=\"stepSecond\"\n  [color]=\"color\"\n  [enableMeridian]=\"enableMeridianVal\"\n  [(ngModel)]=\"formControl.value\"\n  (ngModelChange)=\"dateTimeChange($event)\"\n></ngx-mat-timepicker>\n\n<mat-card *ngIf=\"type === 'calendar'\" [ngClass]=\"fullWidth ? 'd-block' : 'd-inline-block'\" [class.w-100]=\"fullWidth\" [ngStyle]=\"{width: width}\">\n  <mat-calendar [dateFilter]=\"filterFunc\" [minDate]=\"minDate\" [maxDate]=\"maxDate\" [(selected)]=\"formControl.value\" (selectedChange)=\"dateTimeChange($event)\"></mat-calendar>\n</mat-card>\n",
                providers: [
                    CustomDateAdapterService,
                    { provide: DateAdapter, useClass: CustomDateAdapterService },
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => ZUIDateTimePickerComponent),
                        multi: true,
                    },
                ],
                styles: [":host ::ng-deep .zui-date-time-picker-timepicker{display:inline-block}:host ::ng-deep .zui-date-time-picker-timepicker form{min-width:auto}:host ::ng-deep .zui-date-time-picker-timepicker form,:host ::ng-deep .zui-date-time-picker-timepicker table{display:inline-block}"]
            },] }
];
ZUIDateTimePickerComponent.ctorParameters = () => [
    { type: DateAdapter },
    { type: DateTimeService }
];
ZUIDateTimePickerComponent.propDecorators = {
    label: [{ type: Input }],
    icon: [{ type: Input }],
    hintStart: [{ type: Input }],
    hintEnd: [{ type: Input }],
    locales: [{ type: Input }],
    name: [{ type: Input }],
    disabledValidate: [{ type: Input }],
    color: [{ type: Input }],
    actions: [{ type: Input }],
    placeholder: [{ type: Input }],
    placeholderStart: [{ type: Input }],
    placeholderEnd: [{ type: Input }],
    minDate: [{ type: Input }],
    maxDate: [{ type: Input }],
    appearance: [{ type: Input }],
    type: [{ type: Input }],
    autocomplete: [{ type: Input }],
    defaultTime: [{ type: Input }],
    width: [{ type: Input }],
    startView: [{ type: Input }],
    typeView: [{ type: Input }],
    format: [{ type: Input }],
    stepHour: [{ type: Input }],
    stepMinute: [{ type: Input }],
    stepSecond: [{ type: Input }],
    filter: [{ type: Input }],
    dateClass: [{ type: Input }],
    panelClass: [{ type: Input }],
    validatorMessage: [{ type: Input }],
    required: [{ type: Input }],
    disabledReadonly: [{ type: Input }],
    touchUi: [{ type: Input }],
    showSeconds: [{ type: Input }],
    disableMinute: [{ type: Input }],
    enableMeridian: [{ type: Input }],
    customApplyBtn: [{ type: Input }],
    hideSpinners: [{ type: Input }],
    tooltipPosition: [{ type: Input }],
    showTooltip: [{ type: Input }],
    noFullWidth: [{ type: Input }],
    disabledAll: [{ type: Input }],
    disabledInput: [{ type: Input }],
    disabledIcon: [{ type: Input }],
    firstValidate: [{ type: Input }],
    disabledClickToOpen: [{ type: Input }],
    comparisonStart: [{ type: Input }],
    comparisonEnd: [{ type: Input }],
    form: [{ type: Input }],
    model: [{ type: Input }],
    modelChange: [{ type: Output }],
    valueChange: [{ type: Output }],
    picker: [{ type: ViewChild, args: ['picker',] }]
};
//# sourceMappingURL=index.component.js.map