import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, forwardRef, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
import * as i4 from '@angular/common';
import { DatePipe, CommonModule } from '@angular/common';
import * as i3 from '@angular/forms';
import { ControlContainer, FormGroupDirective, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import * as i2 from '@ironsource/fusion-ui/components/icon/v1';
import { IconModule } from '@ironsource/fusion-ui/components/icon/v1';
import * as i4$1 from '@ironsource/fusion-ui/components/input/v1';
import { InputModule } from '@ironsource/fusion-ui/components/input/v1';
import * as i7 from '@ironsource/fusion-ui/components/dropdown';
import { DropdownModule } from '@ironsource/fusion-ui/components/dropdown';
import * as i8 from '@ironsource/fusion-ui/directives/click-outside';
import { ClickOutsideModule } from '@ironsource/fusion-ui/directives/click-outside';
import { takeUntil } from 'rxjs/operators';
import { isNullOrUndefined, isDate, isUndefined } from '@ironsource/fusion-ui/utils';
import { Subject, BehaviorSubject } from 'rxjs';
import * as i1 from '@ironsource/fusion-ui/services/timezone';
import * as i2$1 from '@ironsource/fusion-ui/components/calendar/common/base';
import { DAY_NAMES } from '@ironsource/fusion-ui/components/calendar/common/base';

var DatepickerMode;
(function (DatepickerMode) {
    DatepickerMode[DatepickerMode["Regular"] = 0] = "Regular";
    DatepickerMode[DatepickerMode["Header"] = 1] = "Header";
})(DatepickerMode || (DatepickerMode = {}));

class DatepickerDate {
    constructor(date, isToday, isInMonth, isSelected, isDisabled) {
        this.date = date;
        this.isToday = isToday;
        this.isInMonth = isInMonth;
        this.isSelected = isSelected;
        this.isDisabled = isDisabled;
    }
}

const DEFAULT_TIMEZONE_OPTIONS = [{ id: 'UTC', value: 'UTC (UTC 00:00)', displayText: 'UTC (UTC 00:00)' }];

function DatepickerHeaderComponent_span_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span");
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1("", ctx_r0.prefix, ": ");
} }
const _c0$2 = (a0, a1) => ({ "is-disabled": a0, opened: a1 });
const _c1$2 = () => ({ iconName: "calendar-2", iconVersion: "v2" });
const _c2$2 = () => ({ iconName: "arrow-right", iconVersion: "v1" });
class DatepickerHeaderComponent {
    constructor() {
        this.inputFocus = new EventEmitter();
    }
    onInputFocus() {
        this.inputFocus.emit();
    }
    static { this.ɵfac = function DatepickerHeaderComponent_Factory(t) { return new (t || DatepickerHeaderComponent)(); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DatepickerHeaderComponent, selectors: [["fusion-datepicker-header"]], inputs: { prefix: "prefix", isDisabled: "isDisabled", label: "label", open: "open" }, outputs: { inputFocus: "inputFocus" }, features: [i0.ɵɵProvidersFeature([{ provide: ControlContainer, useExisting: FormGroupDirective }])], decls: 8, vars: 10, consts: [[1, "is-datepicker-header", 3, "ngClass", "click"], [1, "lable-container"], [1, "lable-with-icon"], [3, "name"], [4, "ngIf"]], template: function DatepickerHeaderComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵlistener("click", function DatepickerHeaderComponent_Template_div_click_0_listener() { return ctx.onInputFocus(); });
            i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
            i0.ɵɵelement(3, "fusion-icon", 3);
            i0.ɵɵelementStart(4, "span");
            i0.ɵɵtemplate(5, DatepickerHeaderComponent_span_5_Template, 2, 1, "span", 4);
            i0.ɵɵtext(6);
            i0.ɵɵelementEnd()();
            i0.ɵɵelement(7, "fusion-icon", 3);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(5, _c0$2, ctx.isDisabled, ctx.open));
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("name", i0.ɵɵpureFunction0(8, _c1$2));
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngIf", ctx.prefix);
            i0.ɵɵadvance();
            i0.ɵɵtextInterpolate(ctx.label);
            i0.ɵɵadvance();
            i0.ɵɵproperty("name", i0.ɵɵpureFunction0(9, _c2$2));
        } }, dependencies: [i4.NgClass, i4.NgIf, i2.IconComponent], styles: ["[_nghost-%COMP%]   .is-datepicker-header[_ngcontent-%COMP%]   .lable-container[_ngcontent-%COMP%]   .lable-with-icon[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{font-size:12px;font-family:var(--body-font-family, \"HelveticaNeue\");font-weight:700}[_nghost-%COMP%]   .is-datepicker-header[_ngcontent-%COMP%]   .lable-container[_ngcontent-%COMP%]   .lable-with-icon[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:12px;font-family:var(--body-font-family, \"HelveticaNeue\");font-weight:400}[_nghost-%COMP%]{line-height:20px}[_nghost-%COMP%]   .is-datepicker-header[_ngcontent-%COMP%]{padding:10px 12px;width:250px;cursor:pointer}[_nghost-%COMP%]   .is-datepicker-header[_ngcontent-%COMP%]   fusion-icon[class^=calendar-2][_ngcontent-%COMP%]     svg{width:14px;height:14px}[_nghost-%COMP%]   .is-datepicker-header[_ngcontent-%COMP%]   fusion-icon[class^=calendar-2][_ngcontent-%COMP%]     svg *{fill:var(--light-color-800, #678099)}[_nghost-%COMP%]   .is-datepicker-header[_ngcontent-%COMP%]   fusion-icon[class^=arrow-right][_ngcontent-%COMP%]     svg{height:8px;width:5px;transform:rotate(90deg)}[_nghost-%COMP%]   .is-datepicker-header[_ngcontent-%COMP%]   fusion-icon[class^=arrow-right][_ngcontent-%COMP%]     svg *{fill:var(--light-color-800, #678099)}[_nghost-%COMP%]   .is-datepicker-header[_ngcontent-%COMP%]   .lable-container[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:space-between}[_nghost-%COMP%]   .is-datepicker-header[_ngcontent-%COMP%]   .lable-container[_ngcontent-%COMP%]   .lable-with-icon[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{display:inline-block;line-height:15px;vertical-align:text-top;margin-left:5px}[_nghost-%COMP%]   .is-datepicker-header[_ngcontent-%COMP%]:not(.opened):hover{background-color:var(--light-color-100, #F9FAFB);line-height:19px}[_nghost-%COMP%]   .is-datepicker-header.opened[_ngcontent-%COMP%]{border-top:2px solid var(--primary-color, #3091F6);padding-top:8px}[_nghost-%COMP%]   .is-datepicker-header.opened[_ngcontent-%COMP%]   fusion-icon[class^=arrow-right][_ngcontent-%COMP%]     svg{height:8px;width:5px;transform:rotate(270deg)}[_nghost-%COMP%]   .is-datepicker-header.opened[_ngcontent-%COMP%]   fusion-icon[class^=arrow-right][_ngcontent-%COMP%]     svg *{fill:var(--light-color-800, #678099)}"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatepickerHeaderComponent, [{
        type: Component,
        args: [{ selector: 'fusion-datepicker-header', providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<div class=\"is-datepicker-header\"\n     (click)=\"onInputFocus()\"\n     [ngClass]=\"{'is-disabled': isDisabled, opened: open}\">\n  <div class=\"lable-container\">\n    <div class=\"lable-with-icon\">\n      <fusion-icon [name]=\"{iconName: 'calendar-2', iconVersion: 'v2'}\"></fusion-icon>\n      <span><span *ngIf=\"prefix\">{{prefix}}: </span>{{label}}</span>\n    </div>\n    <fusion-icon [name]=\"{iconName: 'arrow-right', iconVersion: 'v1'}\"></fusion-icon>\n  </div>\n</div>\n", styles: [":host .is-datepicker-header .lable-container .lable-with-icon>span{font-size:12px;font-family:var(--body-font-family, \"HelveticaNeue\");font-weight:700}:host .is-datepicker-header .lable-container .lable-with-icon>span span{font-size:12px;font-family:var(--body-font-family, \"HelveticaNeue\");font-weight:400}:host{line-height:20px}:host .is-datepicker-header{padding:10px 12px;width:250px;cursor:pointer}:host .is-datepicker-header fusion-icon[class^=calendar-2] ::ng-deep svg{width:14px;height:14px}:host .is-datepicker-header fusion-icon[class^=calendar-2] ::ng-deep svg *{fill:var(--light-color-800, #678099)}:host .is-datepicker-header fusion-icon[class^=arrow-right] ::ng-deep svg{height:8px;width:5px;transform:rotate(90deg)}:host .is-datepicker-header fusion-icon[class^=arrow-right] ::ng-deep svg *{fill:var(--light-color-800, #678099)}:host .is-datepicker-header .lable-container{display:flex;align-items:center;justify-content:space-between}:host .is-datepicker-header .lable-container .lable-with-icon>span{display:inline-block;line-height:15px;vertical-align:text-top;margin-left:5px}:host .is-datepicker-header:not(.opened):hover{background-color:var(--light-color-100, #F9FAFB);line-height:19px}:host .is-datepicker-header.opened{border-top:2px solid var(--primary-color, #3091F6);padding-top:8px}:host .is-datepicker-header.opened fusion-icon[class^=arrow-right] ::ng-deep svg{height:8px;width:5px;transform:rotate(270deg)}:host .is-datepicker-header.opened fusion-icon[class^=arrow-right] ::ng-deep svg *{fill:var(--light-color-800, #678099)}\n"] }]
    }], null, { prefix: [{
            type: Input
        }], isDisabled: [{
            type: Input
        }], label: [{
            type: Input
        }], open: [{
            type: Input
        }], inputFocus: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatepickerHeaderComponent, { className: "DatepickerHeaderComponent", filePath: "datepicker-header/datepicker-header.component.ts", lineNumber: 10 }); })();

const _c0$1 = a0 => ({ "is-disabled": a0 });
const _c1$1 = () => ({ iconName: "calendar-2", iconVersion: "v2" });
function DatepickerSelectionComponent_div_1_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div")(1, "div", 3);
    i0.ɵɵlistener("click", function DatepickerSelectionComponent_div_1_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onInputFocus()); });
    i0.ɵɵelementStart(2, "label", 4);
    i0.ɵɵelement(3, "fusion-icon", 5);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0$1, ctx_r0.isDisabled));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("name", i0.ɵɵpureFunction0(5, _c1$1));
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r0.label, "");
} }
const _c2$1 = a0 => ({ iconData: a0, iconPos: "right" });
function DatepickerSelectionComponent_ng_template_2_fusion_input_0_Template(rf, ctx) { if (rf & 1) {
    const _r7 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "fusion-input", 7);
    i0.ɵɵlistener("ngFocus", function DatepickerSelectionComponent_ng_template_2_fusion_input_0_Template_fusion_input_ngFocus_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r6.onInputFocus()); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r5 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c2$1, i0.ɵɵpureFunction0(4, _c1$1)))("isDisabled", ctx_r5.isDisabled)("placeholder", "YYYY-MM-DD")("error", ctx_r5.error);
} }
function DatepickerSelectionComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, DatepickerSelectionComponent_ng_template_2_fusion_input_0_Template, 1, 7, "fusion-input", 6);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngIf", !ctx_r1.dropDownStyle);
} }
class DatepickerSelectionComponent {
    constructor() {
        this.inputFocus = new EventEmitter();
    }
    onInputFocus() {
        this.inputFocus.emit();
    }
    static { this.ɵfac = function DatepickerSelectionComponent_Factory(t) { return new (t || DatepickerSelectionComponent)(); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DatepickerSelectionComponent, selectors: [["fusion-datepicker-selection"]], inputs: { dropDownStyle: "dropDownStyle", isDisabled: "isDisabled", label: "label", error: "error" }, outputs: { inputFocus: "inputFocus" }, features: [i0.ɵɵProvidersFeature([], [{ provide: ControlContainer, useExisting: FormGroupDirective }])], decls: 4, vars: 2, consts: [[1, "is-datepicker"], [4, "ngIf", "ngIfElse"], ["inputStyle", ""], [1, "is-datepicker-select", 3, "ngClass", "click"], [1, "truncate"], [3, "name"], ["formControlName", "dateVal", 3, "icon", "isDisabled", "placeholder", "error", "ngFocus", 4, "ngIf"], ["formControlName", "dateVal", 3, "icon", "isDisabled", "placeholder", "error", "ngFocus"]], template: function DatepickerSelectionComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵtemplate(1, DatepickerSelectionComponent_div_1_Template, 5, 6, "div", 1)(2, DatepickerSelectionComponent_ng_template_2_Template, 1, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            const _r2 = i0.ɵɵreference(3);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.dropDownStyle)("ngIfElse", _r2);
        } }, dependencies: [i4.NgClass, i4.NgIf, i3.NgControlStatus, i3.FormControlName, i2.IconComponent, i4$1.InputComponent], styles: [".is-datepicker[_ngcontent-%COMP%]   .is-datepicker-select[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]{font-size:13px;font-family:var(--body-font-family, \"HelveticaNeue\");font-weight:400}.is-datepicker[_ngcontent-%COMP%]   .is-datepicker-select[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]{width:100%;display:inline-block;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis}.is-datepicker[_ngcontent-%COMP%]   .fu-input-holder[_ngcontent-%COMP%]:after, .is-datepicker[_ngcontent-%COMP%]   .is-datepicker-select[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:after{content:\"\";display:block;position:absolute;top:14px;right:10px;border-width:4px 4px 0;border-style:solid;border-color:var(--dark-color-300, #172D4C) transparent transparent}.is-datepicker[_ngcontent-%COMP%]{display:inline-block;width:250px;vertical-align:bottom}.is-datepicker[_ngcontent-%COMP%]   .is-datepicker-select[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]{color:var(--dark-color-300, #172D4C);cursor:pointer;display:block;border-radius:3px;background-image:linear-gradient(to bottom,#fff,var(--light-color-300, #EAEEF1));border:1px solid var(--light-color, #E1E6EB);height:32px;line-height:30px;padding-left:10px;position:relative}.is-datepicker[_ngcontent-%COMP%]   .is-datepicker-select[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   fusion-icon[class^=calendar-2][_ngcontent-%COMP%]{position:relative;top:2px;margin-right:5px}.is-datepicker[_ngcontent-%COMP%]   .is-datepicker-select[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   fusion-icon[class^=calendar-2][_ngcontent-%COMP%]     svg{width:15px;height:15px}.is-datepicker[_ngcontent-%COMP%]   .is-datepicker-select[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   fusion-icon[class^=calendar-2][_ngcontent-%COMP%]     svg *{fill:var(--light-color-800, #678099)}.is-datepicker[_ngcontent-%COMP%]   .is-datepicker-select.is-disabled[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]{color:var(--light-color-800, #678099);cursor:default}.is-datepicker[_ngcontent-%COMP%]   .is-datepicker-select.is-disabled[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:after{border-color:var(--light-color-700, #95A6B8) transparent transparent}.is-datepicker[_ngcontent-%COMP%]   .fu-input-holder.is-disabled[_ngcontent-%COMP%]:after{border-color:var(--light-color-700, #95A6B8) transparent transparent}"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatepickerSelectionComponent, [{
        type: Component,
        args: [{ selector: 'fusion-datepicker-selection', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<div class=\"is-datepicker\">\n  <div *ngIf=\"dropDownStyle; else inputStyle\">\n    <div class=\"is-datepicker-select\" (click)=\"onInputFocus()\" [ngClass]=\"{'is-disabled': isDisabled}\">\n      <label class=\"truncate\">\n        <fusion-icon [name]=\"{iconName:'calendar-2', iconVersion: 'v2'}\"></fusion-icon>\n        {{label}}</label>\n    </div>\n  </div>\n  <ng-template #inputStyle>\n    <fusion-input *ngIf=\"!dropDownStyle\"\n                  [icon]=\"{iconData: {iconName: 'calendar-2', iconVersion:'v2'}, iconPos: 'right'}\"\n                  [isDisabled]=\"isDisabled\"\n                  formControlName=\"dateVal\"\n                  [placeholder]=\"'YYYY-MM-DD'\"\n                  (ngFocus)=\"onInputFocus()\"\n                  [error]=\"error\"></fusion-input>\n  </ng-template>\n</div>\n", styles: [".is-datepicker .is-datepicker-select label{font-size:13px;font-family:var(--body-font-family, \"HelveticaNeue\");font-weight:400}.is-datepicker .is-datepicker-select label{width:100%;display:inline-block;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis}.is-datepicker .fu-input-holder:after,.is-datepicker .is-datepicker-select label:after{content:\"\";display:block;position:absolute;top:14px;right:10px;border-width:4px 4px 0;border-style:solid;border-color:var(--dark-color-300, #172D4C) transparent transparent}.is-datepicker{display:inline-block;width:250px;vertical-align:bottom}.is-datepicker .is-datepicker-select label{color:var(--dark-color-300, #172D4C);cursor:pointer;display:block;border-radius:3px;background-image:linear-gradient(to bottom,#fff,var(--light-color-300, #EAEEF1));border:1px solid var(--light-color, #E1E6EB);height:32px;line-height:30px;padding-left:10px;position:relative}.is-datepicker .is-datepicker-select label fusion-icon[class^=calendar-2]{position:relative;top:2px;margin-right:5px}.is-datepicker .is-datepicker-select label fusion-icon[class^=calendar-2] ::ng-deep svg{width:15px;height:15px}.is-datepicker .is-datepicker-select label fusion-icon[class^=calendar-2] ::ng-deep svg *{fill:var(--light-color-800, #678099)}.is-datepicker .is-datepicker-select.is-disabled label{color:var(--light-color-800, #678099);cursor:default}.is-datepicker .is-datepicker-select.is-disabled label:after{border-color:var(--light-color-700, #95A6B8) transparent transparent}.is-datepicker .fu-input-holder.is-disabled:after{border-color:var(--light-color-700, #95A6B8) transparent transparent}\n"] }]
    }], null, { dropDownStyle: [{
            type: Input
        }], isDisabled: [{
            type: Input
        }], label: [{
            type: Input
        }], error: [{
            type: Input
        }], inputFocus: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatepickerSelectionComponent, { className: "DatepickerSelectionComponent", filePath: "datepicker-selection/datepicker-selection.component.ts", lineNumber: 10 }); })();

const _c0 = ["hoursPicker"];
const _c1 = ["minutesPicker"];
function DatepickerComponent_div_0_fusion_datepicker_selection_2_Template(rf, ctx) { if (rf & 1) {
    const _r9 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "fusion-datepicker-selection", 15);
    i0.ɵɵlistener("inputFocus", function DatepickerComponent_div_0_fusion_datepicker_selection_2_Template_fusion_datepicker_selection_inputFocus_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r8.onInputFocus()); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("dropDownStyle", ctx_r1.dropDownStyle)("isDisabled", ctx_r1.isDisabled)("label", ctx_r1.selectedLabel)("error", ctx_r1.error);
} }
function DatepickerComponent_div_0_fusion_datepicker_header_3_Template(rf, ctx) { if (rf & 1) {
    const _r11 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "fusion-datepicker-header", 16);
    i0.ɵɵlistener("inputFocus", function DatepickerComponent_div_0_fusion_datepicker_header_3_Template_fusion_datepicker_header_inputFocus_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r10.onInputFocus()); });
    i0.ɵɵpipe(1, "async");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("isDisabled", ctx_r2.isDisabled)("label", ctx_r2.selectedLabel)("prefix", ctx_r2.prefix)("open", i0.ɵɵpipeBind1(1, 4, ctx_r2.isOpen$));
} }
function DatepickerComponent_div_0_th_17_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "th", 17);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const dow_r12 = ctx.$implicit;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(dow_r12);
} }
function DatepickerComponent_div_0_tr_19_td_1_span_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span");
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "date");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const date_r15 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, date_r15.date, "dd"));
} }
const _c2 = (a0, a1, a2) => ({ "today": a0, "active": a1, "disabled": a2 });
function DatepickerComponent_div_0_tr_19_td_1_Template(rf, ctx) { if (rf & 1) {
    const _r19 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "td", 19);
    i0.ɵɵlistener("click", function DatepickerComponent_div_0_tr_19_td_1_Template_td_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r19); const date_r15 = restoredCtx.$implicit; const ctx_r18 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r18.onDateClick(date_r15, $event)); });
    i0.ɵɵpipe(1, "date");
    i0.ɵɵtemplate(2, DatepickerComponent_div_0_tr_19_td_1_span_2_Template, 3, 4, "span", 20);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const date_r15 = ctx.$implicit;
    i0.ɵɵpropertyInterpolate("title", i0.ɵɵpipeBind2(1, 3, date_r15.date, "y-MM-dd"));
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(6, _c2, date_r15.isToday, date_r15.isSelected && date_r15.isInMonth, !date_r15.isInMonth || date_r15.isDisabled));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", date_r15.isInMonth);
} }
function DatepickerComponent_div_0_tr_19_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "tr");
    i0.ɵɵtemplate(1, DatepickerComponent_div_0_tr_19_td_1_Template, 3, 10, "td", 18);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const week_r13 = ctx.$implicit;
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngForOf", week_r13);
} }
function DatepickerComponent_div_0_div_20_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 21);
    i0.ɵɵelement(1, "fusion-input", 22, 23);
    i0.ɵɵtext(3, " : ");
    i0.ɵɵelement(4, "fusion-input", 24, 25);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r5 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("isDisabled", !ctx_r5.isDateSelected() || ctx_r5.isDisabled);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("isDisabled", !ctx_r5.isDateSelected() || ctx_r5.isDisabled);
} }
function DatepickerComponent_div_0_div_21_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 26);
    i0.ɵɵelement(1, "fusion-dropdown", 27);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r6 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("search", true)("options", ctx_r6.timeZonesOptions)("isDisabled", !ctx_r6.isDateSelected() || ctx_r6.isDisabled);
} }
function DatepickerComponent_div_0_div_22_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 28);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r7 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r7.error);
} }
const _c3 = () => ({ iconName: "arrow-right", iconVersion: "v1" });
function DatepickerComponent_div_0_Template(rf, ctx) { if (rf & 1) {
    const _r23 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 1);
    i0.ɵɵlistener("fusionClickOutside", function DatepickerComponent_div_0_Template_div_fusionClickOutside_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r22 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r22.onOutsideClick()); });
    i0.ɵɵpipe(1, "async");
    i0.ɵɵtemplate(2, DatepickerComponent_div_0_fusion_datepicker_selection_2_Template, 1, 4, "fusion-datepicker-selection", 2)(3, DatepickerComponent_div_0_fusion_datepicker_header_3_Template, 2, 6, "fusion-datepicker-header", 3);
    i0.ɵɵelementStart(4, "div", 4);
    i0.ɵɵpipe(5, "async");
    i0.ɵɵelementStart(6, "table", 5)(7, "thead")(8, "tr")(9, "th", 6);
    i0.ɵɵlistener("click", function DatepickerComponent_div_0_Template_th_click_9_listener() { i0.ɵɵrestoreView(_r23); const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.onMonthChangeClicked(-1)); });
    i0.ɵɵelement(10, "fusion-icon", 7);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(11, "th", 8);
    i0.ɵɵtext(12);
    i0.ɵɵpipe(13, "date");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(14, "th", 9);
    i0.ɵɵlistener("click", function DatepickerComponent_div_0_Template_th_click_14_listener() { i0.ɵɵrestoreView(_r23); const ctx_r25 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r25.onMonthChangeClicked(1)); });
    i0.ɵɵelement(15, "fusion-icon", 7);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(16, "tr");
    i0.ɵɵtemplate(17, DatepickerComponent_div_0_th_17_Template, 2, 1, "th", 10);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(18, "tbody");
    i0.ɵɵtemplate(19, DatepickerComponent_div_0_tr_19_Template, 2, 1, "tr", 11);
    i0.ɵɵelementEnd()()();
    i0.ɵɵtemplate(20, DatepickerComponent_div_0_div_20_Template, 6, 2, "div", 12)(21, DatepickerComponent_div_0_div_21_Template, 2, 3, "div", 13)(22, DatepickerComponent_div_0_div_22_Template, 2, 1, "div", 14);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵproperty("clickOutsideActivate", i0.ɵɵpipeBind1(1, 14, ctx_r0.isOpen$))("formGroup", ctx_r0.datesInputs);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r0.mode === ctx_r0.datepickerAvailableModes.Regular);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r0.mode === ctx_r0.datepickerAvailableModes.Header);
    i0.ɵɵadvance();
    i0.ɵɵclassProp("opened", i0.ɵɵpipeBind1(5, 16, ctx_r0.isOpen$));
    i0.ɵɵadvance(6);
    i0.ɵɵproperty("name", i0.ɵɵpureFunction0(21, _c3));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(13, 18, ctx_r0.calendarDate, "MMMM y"));
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("name", i0.ɵɵpureFunction0(22, _c3));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngForOf", ctx_r0.daysOfWeek);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngForOf", ctx_r0.weeks);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r0.isTimePicker);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r0.isTimeZonePicker);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r0.error);
} }
class DatepickerComponent {
    set isOpened(value) {
        this.isOpen$.next(!isNullOrUndefined(value) ? value : false);
    }
    constructor(timezoneService, calendarService, renderer, fb, datePipe, cdr) {
        this.timezoneService = timezoneService;
        this.calendarService = calendarService;
        this.renderer = renderer;
        this.fb = fb;
        this.datePipe = datePipe;
        this.cdr = cdr;
        this.isTimePicker = false;
        this.isTimeZonePicker = false;
        this.isDisabled = false;
        this.style = 'drop-down';
        this.labelDateFormat = 'd MMM, y';
        this.placeholder = 'Select Date';
        this.error = '';
        this.defaultTimezone = 'UTC';
        this.mode = DatepickerMode.Regular;
        this.suppressClickOnRemove = false;
        this.onDestroy$ = new Subject();
        this.daysOfWeek = DAY_NAMES.map(name => name.charAt(0).toUpperCase() + name.toLocaleLowerCase().slice(1));
        this.datepickerAvailableModes = DatepickerMode;
        this.isOpen$ = new BehaviorSubject(false);
        // Implement ControlValueAccessor methods
        /**
         * Method to call when value has changes.
         */
        this.propagateChange = (_) => { };
        /**
         * Method to call when the component is touched (when it was is clicked).
         */
        this.propagateTouched = () => { };
    }
    ngOnInit() {
        this.dropDownStyle = this.style === 'drop-down';
        this.today = new Date();
        this._setSelectedDate();
        this.calendarDate = new Date(this.today);
        this.setWeeks(this.calendarDate);
        this.datesInputs = this.fb.group({
            dateVal: '',
            hoursVal: '00',
            minutesVal: '00',
            timezone: this.isTimeZonePicker ? this.defaultTimezone : ''
        });
        this.timeZonesOptions = this.timezoneService.timeZones;
    }
    ngOnDestroy() {
        this.onDestroy$.next();
        this.onDestroy$.complete();
    }
    ngAfterViewInit() {
        this.initData();
        this.initListeners();
        if (this.isTimePicker) {
            this.setMinMaxForTimeInput();
        }
    }
    ngOnChanges(changes) {
        if (this.selectedDate &&
            (!this.isDatesEqual(changes?.minDate?.currentValue, changes?.minDate?.previousValue, 'day') ||
                !this.isDatesEqual(changes?.maxDate?.currentValue, changes?.maxDate?.previousValue, 'day'))) {
            this.setWeeks(this.selectedDate.date ? this.selectedDate.date : this.today);
        }
    }
    get selectedLabel() {
        return !isNullOrUndefined(this.selectedDate.date) && isDate(this.selectedDate.date)
            ? this.datePipe.transform(this.selectedDate.date, this.labelDateFormat)
            : this.placeholder;
    }
    setMinMaxForTimeInput() {
        setTimeout(() => {
            if (!!this.hoursPicker.elementRef.nativeElement.querySelector('input')) {
                this.renderer.setAttribute(this.hoursPicker.elementRef.nativeElement.querySelector('input'), 'min', '0');
                this.renderer.setAttribute(this.hoursPicker.elementRef.nativeElement.querySelector('input'), 'max', '23');
            }
            if (!!this.minutesPicker.elementRef.nativeElement.querySelector('input')) {
                this.renderer.setAttribute(this.minutesPicker.elementRef.nativeElement.querySelector('input'), 'min', '0');
                this.renderer.setAttribute(this.minutesPicker.elementRef.nativeElement.querySelector('input'), 'max', '59');
            }
        });
    }
    isDate(valToCheck) {
        return isDate(new Date(valToCheck));
    }
    _setSelectedDate(value) {
        if (!isNullOrUndefined(value) && !isUndefined(value.date) && this.isDate(value.date)) {
            if (isDate(value.date)) {
                this.selectedDate = value;
            }
            else {
                this.selectedDate = {
                    date: this.calendarService.getDateAsUTC(new Date(value.date))
                };
            }
        }
        else if (!isNullOrUndefined(value) && isUndefined(value.date) && this.isDate(value)) {
            this.selectedDate = {
                date: typeof value === 'string' ? this.calendarService.getDateAsUTC(new Date(value)) : value,
                timezone: this.defaultTimezone
            };
        }
        else {
            this.selectedDate = {
                date: undefined,
                timezone: this.defaultTimezone
            };
        }
        this.cdr.markForCheck();
    }
    selectCurrentDate() {
        for (const week of this.weeks) {
            for (const day of week) {
                if (this.isDatesEqual(day.date, this.selectedDate.date, 'day')) {
                    day.isSelected = true;
                }
                else {
                    day.isSelected = false;
                }
            }
        }
    }
    _toggleDateInputErrClass(hasError) {
        hasError ? (this.error = 'Invalid Date') : (this.error = '');
    }
    initData() {
        if (this.isTimeZonePicker && this.selectedDate) {
            this.datesInputs.get('timezone').patchValue(this._getSelectedTimezone());
        }
    }
    initListeners() {
        this.datesInputs.get('dateVal').valueChanges.pipe(takeUntil(this.onDestroy$)).subscribe(this.onDateValueChanged.bind(this));
        this.datesInputs.get('hoursVal').valueChanges.pipe(takeUntil(this.onDestroy$)).subscribe(this.onHoursValueChanged.bind(this));
        this.datesInputs.get('minutesVal').valueChanges.pipe(takeUntil(this.onDestroy$)).subscribe(this.onMinutesValueChanged.bind(this));
        this.datesInputs.get('timezone').valueChanges.pipe(takeUntil(this.onDestroy$)).subscribe(this.onTimezoneValueChanged.bind(this));
    }
    onDateValueChanged(value) {
        if (this.formatDateToString(this.selectedDate.date) === value) {
            return;
        }
        if (!isNullOrUndefined(value) && this.isDate(value)) {
            this.selectedDate.date = this.calendarService.getDateAsUTC(new Date(value));
            this.setWeeks(this.selectedDate.date);
            this.calendarDate = this.selectedDate.date;
        }
        else {
            this.selectedDate.date = null;
            // set calendar for today in this case
            this.calendarDate = this.calendarService.getDateAsUTC(new Date(this.today));
            this.setWeeks(this.calendarDate);
        }
        this._toggleDateInputErrClass(value && value.length !== 0 && !this.isDate(value));
        this.propagateChange(this.selectedDate);
    }
    onHoursValueChanged(value) {
        if (this.isTimePicker && this.selectedDate.date) {
            this.selectedDate.date.setHours(parseInt(value || '0', 10), this.selectedDate.date.getMinutes(), 0, 0);
            this.propagateChange(this.selectedDate);
        }
    }
    onMinutesValueChanged(value) {
        if (this.isTimePicker && this.selectedDate.date) {
            this.selectedDate.date.setMinutes(parseInt(value || '0', 10), 0, 0);
            this.propagateChange(this.selectedDate);
        }
    }
    onTimezoneValueChanged(value) {
        if (this.isTimeZonePicker) {
            this.selectedDate.timezone = value[0].id;
            this.propagateChange(this.selectedDate);
        }
    }
    _getSelectedTimezone() {
        return this.isTimeZonePicker && this.timeZonesOptions && this.selectedDate
            ? this.timeZonesOptions.filter(item => item.id === this.selectedDate.timezone)
            : DEFAULT_TIMEZONE_OPTIONS;
    }
    /**
     * On external (out component click event )
     */
    onOutsideClick() {
        if (this.isOpen$.getValue()) {
            this.isOpen$.next(false);
        }
    }
    /**
     * On input get focus
     */
    onInputFocus() {
        if (!this.isDisabled) {
            this.isOpen$.next(!this.isOpen$.getValue());
        }
        this.propagateTouched();
    }
    /**
     * gen array of weeks / days for calendar render
     * @param dateToCalendar - Date for calendar
     */
    setWeeks(date) {
        this.weeks = this.getCalendar(date.getMonth(), date.getFullYear());
    }
    getCalendar(month, year) {
        const weeks = [];
        const firstDay = new Date(year, month).getDay();
        const selectedMonthDate = new Date(year, month);
        // creating all cells
        let date = 1;
        for (let i = 0; i < 6; i++) {
            // creates a table row
            const week = [];
            for (let j = 0; j < 7; j++) {
                const currentDate = new Date(year, month, date);
                if (i === 0 && j < firstDay) {
                    week[j] = new DatepickerDate(currentDate, false, false, false, false);
                }
                else if (date > this.getDaysInMonth(month, year)) {
                    break;
                }
                else {
                    week[j] = new DatepickerDate(currentDate, this.isDatesEqual(currentDate, this.today, 'day'), this.isDatesEqual(currentDate, selectedMonthDate, 'month'), !isNullOrUndefined(this.selectedDate.date) ? this.isDatesEqual(currentDate, this.selectedDate.date, 'day') : false, this.isDateDisabled(currentDate));
                    date++;
                }
            }
            if (week.length > 0) {
                weeks.push(week);
            }
        }
        return weeks;
    }
    getDaysInMonth(iMonth, iYear) {
        return 32 - new Date(iYear, iMonth, 32).getDate();
    }
    isDatesEqual(dateA, dateB, granularity) {
        if (isDate(dateA) && isDate(dateB)) {
            dateA = new Date(dateA);
            dateB = new Date(dateB);
            dateA.setHours(0, 0, 0, 0);
            dateB.setHours(0, 0, 0, 0);
            if (granularity === 'day') {
                return dateA.getTime() === dateB.getTime();
            }
            else if (granularity === 'month') {
                return (new Date(dateA.getFullYear(), dateA.getMonth()).getTime() === new Date(dateB.getFullYear(), dateB.getMonth()).getTime());
            }
        }
        else if ((!isDate(dateA) && isDate(dateB)) || (isDate(dateA) && !isDate(dateB))) {
            return false;
        }
        else {
            return true;
        }
    }
    isDateDisabled(date) {
        const isBefore = !isNullOrUndefined(this.minDate) ? date.getTime() < this.minDate.getTime() : false;
        const isAfter = !isNullOrUndefined(this.maxDate) ? date.getTime() > this.maxDate.getTime() : false;
        return isBefore || isAfter;
    }
    formatDateToString(date) {
        return (date && date.toISOString().split('T') && new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().split('T')[0]);
    }
    getDateHours(date) {
        const hours = date ? date.getHours() : new Date().getHours();
        return hours > 9 ? `${hours}` : `0${hours}`;
    }
    getDateMinutes(date) {
        date = date || new Date();
        return `${date.getMinutes()}`;
    }
    /**
     * On month changed
     * @param direction month changing delta (1: for next, -1: for prev. )
     */
    onMonthChangeClicked(direction = 0) {
        if (direction !== 0) {
            this.calendarDate = new Date(this.calendarDate.setMonth(this.calendarDate.getMonth() + direction));
            this.setWeeks(this.calendarDate);
        }
    }
    /**
     * Select date on calendar;
     */
    onDateClick(dateToSelect, $event) {
        if (!dateToSelect.isSelected &&
            dateToSelect.isInMonth &&
            this.formatDateToString(dateToSelect.date) !== this.datesInputs.get('dateVal').value) {
            this.datesInputs.get('dateVal').patchValue(this.formatDateToString(dateToSelect.date));
        }
        if (this.suppressClickOnRemove) {
            $event.stopPropagation();
        }
        this.isOpen$.next(false);
    }
    /**
     * check if components has selected date
     */
    isDateSelected() {
        return !isNullOrUndefined(this.selectedDate.date);
    }
    /**
     * update value from model to the component
     */
    writeValue(value) {
        this._setSelectedDate(value);
        this.selectCurrentDate();
        this.datesInputs.patchValue({
            dateVal: this.selectedDate.date ? this.formatDateToString(this.selectedDate.date) : null,
            hoursVal: this.getDateHours(this.selectedDate.date),
            minutesVal: this.getDateMinutes(this.selectedDate.date),
            timezone: this._getSelectedTimezone()
        }, { emitEvent: value !== null });
    }
    /**
     * Informs the outside world about changes.
     * see method propagateChange call - this.propagateChange(this.model);
     */
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
    /**
     * on click
     */
    registerOnTouched(fn) {
        this.propagateTouched = fn;
    }
    /**
     * on set form controll enabled / disabled
     * also do UI Component enabled / disabled
     */
    setDisabledState(isDisabled) {
        this.isDisabled = isDisabled;
    }
    static { this.ɵfac = function DatepickerComponent_Factory(t) { return new (t || DatepickerComponent)(i0.ɵɵdirectiveInject(i1.TimezoneService), i0.ɵɵdirectiveInject(i2$1.CalendarService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i3.FormBuilder), i0.ɵɵdirectiveInject(i4.DatePipe), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DatepickerComponent, selectors: [["fusion-datepicker"]], viewQuery: function DatepickerComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 5);
            i0.ɵɵviewQuery(_c1, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.hoursPicker = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.minutesPicker = _t.first);
        } }, inputs: { isOpened: "isOpened", isTimePicker: "isTimePicker", isTimeZonePicker: "isTimeZonePicker", isDisabled: "isDisabled", style: "style", labelDateFormat: "labelDateFormat", placeholder: "placeholder", error: "error", defaultTimezone: "defaultTimezone", minDate: "minDate", maxDate: "maxDate", prefix: "prefix", mode: "mode", suppressClickOnRemove: "suppressClickOnRemove" }, features: [i0.ɵɵProvidersFeature([
                {
                    provide: NG_VALUE_ACCESSOR,
                    useExisting: forwardRef(() => DatepickerComponent),
                    multi: true
                }
            ]), i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[3, "clickOutsideActivate", "formGroup", "fusionClickOutside", 4, "ngIf"], [3, "clickOutsideActivate", "formGroup", "fusionClickOutside"], [3, "dropDownStyle", "isDisabled", "label", "error", "inputFocus", 4, "ngIf"], [3, "isDisabled", "label", "prefix", "open", "inputFocus", 4, "ngIf"], [1, "is-datepicker-holder"], [1, "is-calendar"], [1, "prev", 3, "click"], [3, "name"], ["colspan", "5", 1, "month"], [1, "next", 3, "click"], ["class", "dow", 4, "ngFor", "ngForOf"], [4, "ngFor", "ngForOf"], ["class", "is-timepicker-holder", 4, "ngIf"], ["class", "is-timezone-holder", 4, "ngIf"], ["class", "error-msg", 4, "ngIf"], [3, "dropDownStyle", "isDisabled", "label", "error", "inputFocus"], [3, "isDisabled", "label", "prefix", "open", "inputFocus"], [1, "dow"], ["class", "day", 3, "title", "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "day", 3, "title", "ngClass", "click"], [4, "ngIf"], [1, "is-timepicker-holder"], ["name", "hoursPicker", "formControlName", "hoursVal", "placeholder", "00", "type", "number", "min", "0", 3, "isDisabled"], ["hoursPicker", ""], ["name", "minutesPicker", "formControlName", "minutesVal", "placeholder", "00", "type", "number", 3, "isDisabled"], ["minutesPicker", ""], [1, "is-timezone-holder"], ["placeholder", "Default Selection", "name", "timeZonesOptions", "formControlName", "timezone", 3, "search", "options", "isDisabled"], [1, "error-msg"]], template: function DatepickerComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵtemplate(0, DatepickerComponent_div_0_Template, 23, 23, "div", 0);
        } if (rf & 2) {
            i0.ɵɵproperty("ngIf", ctx.datesInputs);
        } }, dependencies: [i4.NgClass, i4.NgForOf, i4.NgIf, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName, i2.IconComponent, i4$1.InputComponent, i7.DropdownComponent, i8.ClickOutsideDirective, DatepickerHeaderComponent, DatepickerSelectionComponent, i4.AsyncPipe, i4.DatePipe], styles: ["[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .month[_ngcontent-%COMP%]{font-size:15px;font-family:var(--bold-font-family, \"NHaasGroteskTXPro-75Bd\");font-weight:600}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .dow[_ngcontent-%COMP%]{font-size:12px;font-family:var(--regular-font-family, \"Open Sans\");font-weight:600}[_nghost-%COMP%]   .error-msg[_ngcontent-%COMP%], [_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .day[_ngcontent-%COMP%]{font-size:12px;font-family:var(--regular-font-family, \"Open Sans\");font-weight:400}[_nghost-%COMP%]   *[_ngcontent-%COMP%]{box-sizing:border-box}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .day.disabled[_ngcontent-%COMP%]{pointer-events:none;cursor:default;touch-callout:none;-webkit-user-select:none;user-select:none}[_nghost-%COMP%]{margin:0;padding:0;vertical-align:initial;text-align:initial}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]{z-index:2000!important}[_nghost-%COMP%]{position:relative;display:inline-block}[hidden][_nghost-%COMP%]{display:none}[_nghost-%COMP%]   fusion-input[_ngcontent-%COMP%]{font-size:13px}[_nghost-%COMP%]   .is-timepicker-holder[_ngcontent-%COMP%]{display:inline-block;margin-left:20px}[_nghost-%COMP%]   .is-timepicker-holder[_ngcontent-%COMP%]   fusion-input[_ngcontent-%COMP%]{display:inline-block;width:44%}[_nghost-%COMP%]   .is-timezone-holder[_ngcontent-%COMP%]{display:inline-block;margin-left:20px}[_nghost-%COMP%]   .is-timezone-holder[_ngcontent-%COMP%]   fusion-dropdown[_ngcontent-%COMP%]{display:inline-table;width:255px}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]{position:absolute;display:none;width:250px;height:250px;padding:var(--box-padding, 20px);border-radius:var(--border-radius, 3px);background-color:#fff;box-shadow:0 2px 4px #0000004d;color:var(--dark-color-300, #172D4C)}[_nghost-%COMP%]   .is-datepicker-holder.opened[_ngcontent-%COMP%]{display:block}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .prev[_ngcontent-%COMP%]{transform:rotate(180deg)}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]{border-spacing:0;width:100%}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   fusion-icon[class^=arrow-right][_ngcontent-%COMP%]     svg{width:6px;height:10px}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   fusion-icon[class^=arrow-right][_ngcontent-%COMP%]     svg *{fill:var(--light-color-800, #678099)}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .prev[_ngcontent-%COMP%], [_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .next[_ngcontent-%COMP%]{cursor:pointer}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .dow[_ngcontent-%COMP%]{padding-top:9px;border-bottom:solid 1px var(--light-color, #E1E6EB)}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .day[_ngcontent-%COMP%]{text-align:center;width:28px;height:28px;cursor:pointer}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .day[_ngcontent-%COMP%]:hover{background-color:var(--primary-color-200, #C3DFFC)}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .day.today[_ngcontent-%COMP%]{-webkit-text-decoration:var(--calendar-today-text-decoration, underline);text-decoration:var(--calendar-today-text-decoration, underline)}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .day.active[_ngcontent-%COMP%]{color:#fff;background-color:var(--primary-color, #3091F6);font-weight:700}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .day.active[_ngcontent-%COMP%]:hover{background-color:var(--primary-color, #3091F6)}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .day.disabled[_ngcontent-%COMP%]{color:var(--light-color-800, #678099)}[_nghost-%COMP%]   .is-datepicker-holder[_ngcontent-%COMP%]   .is-calendar[_ngcontent-%COMP%]   .day.disabled[_ngcontent-%COMP%]:hover{background-color:transparent}[_nghost-%COMP%]   .error-msg[_ngcontent-%COMP%]{color:var(--negative-color, #e1174c);margin-top:3px}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatepickerComponent, [{
        type: Component,
        args: [{ selector: 'fusion-datepicker', providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => DatepickerComponent),
                        multi: true
                    }
                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"datesInputs\"\n     [clickOutsideActivate]=\"isOpen$ | async\"\n     (fusionClickOutside)=\"onOutsideClick()\"\n     [formGroup]=\"datesInputs\">\n\n  <fusion-datepicker-selection *ngIf=\"mode === datepickerAvailableModes.Regular\"\n                               [dropDownStyle]=\"dropDownStyle\"\n                               [isDisabled]=\"isDisabled\"\n                               [label]=\"selectedLabel\"\n                               (inputFocus)=\"onInputFocus()\"\n                               [error]=\"error\">\n  </fusion-datepicker-selection>\n\n  <fusion-datepicker-header *ngIf=\"mode === datepickerAvailableModes.Header\"\n                            [isDisabled]=\"isDisabled\"\n                            [label]=\"selectedLabel\"\n                            [prefix]=\"prefix\"\n                            [open]=\"isOpen$ | async\"\n                            (inputFocus)=\"onInputFocus()\">\n  </fusion-datepicker-header>\n\n  <div class=\"is-datepicker-holder\"\n       [class.opened]=\"isOpen$ | async\">\n    <table class=\"is-calendar\">\n      <thead>\n      <tr>\n        <th class=\"prev\"\n            (click)=\"onMonthChangeClicked(-1)\">\n          <fusion-icon [name]=\"{iconName: 'arrow-right', iconVersion: 'v1'}\"></fusion-icon>\n        </th>\n        <th class=\"month\"\n            colspan=\"5\">{{calendarDate | date: 'MMMM y'}}</th>\n        <th class=\"next\"\n            (click)=\"onMonthChangeClicked(1)\">\n          <fusion-icon [name]=\"{iconName: 'arrow-right', iconVersion: 'v1'}\"></fusion-icon>\n        </th>\n      </tr>\n      <tr>\n        <th class=\"dow\"\n            *ngFor=\"let dow of daysOfWeek\">{{dow}}</th>\n      </tr>\n      </thead>\n      <tbody>\n      <tr *ngFor=\"let week of weeks\">\n        <td class=\"day\"\n            *ngFor=\"let date of week\"\n            title=\"{{date.date | date:'y-MM-dd'}}\"\n            [ngClass]=\"{'today': date.isToday, 'active': date.isSelected && date.isInMonth, 'disabled':(!date.isInMonth || date.isDisabled)}\"\n            (click)=\"onDateClick(date, $event)\">\n          <span *ngIf=\"date.isInMonth\">{{date.date | date: 'dd'}}</span>\n        </td>\n      </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <div class=\"is-timepicker-holder\"\n       *ngIf=\"isTimePicker\">\n    <fusion-input #hoursPicker\n                  name=\"hoursPicker\"\n                  formControlName=\"hoursVal\"\n                  placeholder=\"00\"\n                  type=\"number\"\n                  min=\"0\"\n                  [isDisabled]=\"!isDateSelected() || isDisabled\"></fusion-input>\n    :\n    <fusion-input #minutesPicker\n                  name=\"minutesPicker\"\n                  formControlName=\"minutesVal\"\n                  placeholder=\"00\"\n                  type=\"number\"\n                  [isDisabled]=\"!isDateSelected() || isDisabled\"></fusion-input>\n  </div>\n\n  <div class=\"is-timezone-holder\"\n       *ngIf=\"isTimeZonePicker\">\n    <fusion-dropdown placeholder=\"Default Selection\"\n                     [search]=\"true\"\n                     [options]=\"timeZonesOptions\"\n                     [isDisabled]=\"!isDateSelected() || isDisabled\"\n                     name=\"timeZonesOptions\"\n                     formControlName=\"timezone\"></fusion-dropdown>\n  </div>\n\n  <div class=\"error-msg\"\n       *ngIf=\"error\">{{error}}</div>\n</div>\n", styles: [":host .is-datepicker-holder .is-calendar .month{font-size:15px;font-family:var(--bold-font-family, \"NHaasGroteskTXPro-75Bd\");font-weight:600}:host .is-datepicker-holder .is-calendar .dow{font-size:12px;font-family:var(--regular-font-family, \"Open Sans\");font-weight:600}:host .error-msg,:host .is-datepicker-holder .is-calendar .day{font-size:12px;font-family:var(--regular-font-family, \"Open Sans\");font-weight:400}:host *{box-sizing:border-box}:host .is-datepicker-holder .is-calendar .day.disabled{pointer-events:none;cursor:default;touch-callout:none;-webkit-user-select:none;user-select:none}:host{margin:0;padding:0;vertical-align:initial;text-align:initial}:host .is-datepicker-holder{z-index:2000!important}:host{position:relative;display:inline-block}:host[hidden]{display:none}:host fusion-input{font-size:13px}:host .is-timepicker-holder{display:inline-block;margin-left:20px}:host .is-timepicker-holder fusion-input{display:inline-block;width:44%}:host .is-timezone-holder{display:inline-block;margin-left:20px}:host .is-timezone-holder fusion-dropdown{display:inline-table;width:255px}:host .is-datepicker-holder{position:absolute;display:none;width:250px;height:250px;padding:var(--box-padding, 20px);border-radius:var(--border-radius, 3px);background-color:#fff;box-shadow:0 2px 4px #0000004d;color:var(--dark-color-300, #172D4C)}:host .is-datepicker-holder.opened{display:block}:host .is-datepicker-holder .prev{transform:rotate(180deg)}:host .is-datepicker-holder .is-calendar{border-spacing:0;width:100%}:host .is-datepicker-holder .is-calendar fusion-icon[class^=arrow-right] ::ng-deep svg{width:6px;height:10px}:host .is-datepicker-holder .is-calendar fusion-icon[class^=arrow-right] ::ng-deep svg *{fill:var(--light-color-800, #678099)}:host .is-datepicker-holder .is-calendar .prev,:host .is-datepicker-holder .is-calendar .next{cursor:pointer}:host .is-datepicker-holder .is-calendar .dow{padding-top:9px;border-bottom:solid 1px var(--light-color, #E1E6EB)}:host .is-datepicker-holder .is-calendar .day{text-align:center;width:28px;height:28px;cursor:pointer}:host .is-datepicker-holder .is-calendar .day:hover{background-color:var(--primary-color-200, #C3DFFC)}:host .is-datepicker-holder .is-calendar .day.today{-webkit-text-decoration:var(--calendar-today-text-decoration, underline);text-decoration:var(--calendar-today-text-decoration, underline)}:host .is-datepicker-holder .is-calendar .day.active{color:#fff;background-color:var(--primary-color, #3091F6);font-weight:700}:host .is-datepicker-holder .is-calendar .day.active:hover{background-color:var(--primary-color, #3091F6)}:host .is-datepicker-holder .is-calendar .day.disabled{color:var(--light-color-800, #678099)}:host .is-datepicker-holder .is-calendar .day.disabled:hover{background-color:transparent}:host .error-msg{color:var(--negative-color, #e1174c);margin-top:3px}\n"] }]
    }], () => [{ type: i1.TimezoneService }, { type: i2$1.CalendarService }, { type: i0.Renderer2 }, { type: i3.FormBuilder }, { type: i4.DatePipe }, { type: i0.ChangeDetectorRef }], { isOpened: [{
            type: Input
        }], isTimePicker: [{
            type: Input
        }], isTimeZonePicker: [{
            type: Input
        }], isDisabled: [{
            type: Input
        }], style: [{
            type: Input
        }], labelDateFormat: [{
            type: Input
        }], placeholder: [{
            type: Input
        }], error: [{
            type: Input
        }], defaultTimezone: [{
            type: Input
        }], minDate: [{
            type: Input
        }], maxDate: [{
            type: Input
        }], prefix: [{
            type: Input
        }], mode: [{
            type: Input
        }], suppressClickOnRemove: [{
            type: Input
        }], hoursPicker: [{
            type: ViewChild,
            args: ['hoursPicker']
        }], minutesPicker: [{
            type: ViewChild,
            args: ['minutesPicker']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatepickerComponent, { className: "DatepickerComponent", filePath: "datepicker.component.ts", lineNumber: 42 }); })();

class DatepickerModule {
    static { this.ɵfac = function DatepickerModule_Factory(t) { return new (t || DatepickerModule)(); }; }
    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: DatepickerModule }); }
    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [DatePipe], imports: [CommonModule, ReactiveFormsModule, IconModule, InputModule, DropdownModule, ClickOutsideModule] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatepickerModule, [{
        type: NgModule,
        args: [{
                declarations: [DatepickerComponent, DatepickerHeaderComponent, DatepickerSelectionComponent],
                exports: [DatepickerComponent],
                imports: [CommonModule, ReactiveFormsModule, IconModule, InputModule, DropdownModule, ClickOutsideModule],
                providers: [DatePipe]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DatepickerModule, { declarations: [DatepickerComponent, DatepickerHeaderComponent, DatepickerSelectionComponent], imports: [CommonModule, ReactiveFormsModule, IconModule, InputModule, DropdownModule, ClickOutsideModule], exports: [DatepickerComponent] }); })();

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

export { DatepickerComponent, DatepickerMode, DatepickerModule };
//# sourceMappingURL=ironsource-fusion-ui-components-datepicker-v1.mjs.map
