import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from '@angular/core';
import { isNullOrUndefined } from '@ironsource/fusion-ui/utils';
import { MONTH_NAMES_SHORT } from '@ironsource/fusion-ui/components/month-picker/common/base';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ironsource/fusion-ui/components/icon/v1";
function MonthPickerSelectorComponent_fusion_icon_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "fusion-icon", 6);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵproperty("name", ctx_r0.arrowLeftIconName);
} }
function MonthPickerSelectorComponent_fusion_icon_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "fusion-icon", 7);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("name", ctx_r1.arrowRightIconName);
} }
function MonthPickerSelectorComponent_div_7_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 8);
    i0.ɵɵlistener("click", function MonthPickerSelectorComponent_div_7_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const idx_r4 = restoredCtx.index; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.selectMonth(idx_r4)); });
    i0.ɵɵelementStart(1, "div", 9);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const month_r3 = ctx.$implicit;
    const idx_r4 = ctx.index;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("fu-current", ctx_r2.year === ctx_r2.currentMonthPicker.year && idx_r4 === ctx_r2.currentMonthPicker.month)("fu-disabled", ctx_r2.isMonthDisabled(idx_r4))("fu-selected", ctx_r2.isMonthSelected(idx_r4));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", month_r3, " ");
} }
export class MonthPickerSelectorComponent {
    constructor() {
        this.selectedChange = new EventEmitter();
        this.monthNames = MONTH_NAMES_SHORT.en;
        this.arrowLeftIconName = { iconName: 'arrow-left', iconVersion: 'v2' };
        this.arrowRightIconName = { iconName: 'arrow-right', iconVersion: 'v2' };
    }
    set selected(value) {
        if (isNullOrUndefined(value)) {
            this.setDefaultYear();
        }
        else {
            this.year = value.year;
            this.selectedValue = value;
        }
    }
    ngOnInit() {
        this.setDefaultYear();
    }
    isMonthDisabled(monthIndex) {
        return ((this.year === this.min?.year && monthIndex < this.min?.month) || (this.year === this.max?.year && monthIndex > this.max?.month));
    }
    isMonthSelected(monthIndex) {
        if (!isNullOrUndefined(this.selectedValue)) {
            return this.year === this.selectedValue?.year && monthIndex === this.selectedValue?.month;
        }
        return false;
    }
    onYearChange(isNext) {
        this.year = isNext ? this.year + 1 : this.year - 1;
    }
    selectMonth(idx) {
        this.selectedValue = { year: this.year, month: idx };
        this.selectedChange.emit(this.selectedValue);
    }
    setDefaultYear() {
        const defaultDate = new Date(new Date().setDate(10));
        this.currentMonthPicker = { month: defaultDate.getMonth(), year: defaultDate.getFullYear() };
        this.year = this.currentMonthPicker.year;
    }
    static { this.ɵfac = function MonthPickerSelectorComponent_Factory(t) { return new (t || MonthPickerSelectorComponent)(); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MonthPickerSelectorComponent, selectors: [["fusion-month-picker-selector"]], inputs: { min: "min", max: "max", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, decls: 8, vars: 8, consts: [[1, "fu-year-selector"], [1, "fu-arrow-holder", 3, "click"], ["class", "fu-arrow-prev", 3, "name", 4, "ngIf"], ["class", "fu-arrow-next", 3, "name", 4, "ngIf"], [1, "fu-month-selector"], ["class", "fu-month-name", 3, "fu-current", "fu-disabled", "fu-selected", "click", 4, "ngFor", "ngForOf"], [1, "fu-arrow-prev", 3, "name"], [1, "fu-arrow-next", 3, "name"], [1, "fu-month-name", 3, "click"], [1, "fu-month-item"]], template: function MonthPickerSelectorComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
            i0.ɵɵlistener("click", function MonthPickerSelectorComponent_Template_div_click_1_listener() { return ctx.onYearChange(false); });
            i0.ɵɵtemplate(2, MonthPickerSelectorComponent_fusion_icon_2_Template, 1, 1, "fusion-icon", 2);
            i0.ɵɵelementEnd();
            i0.ɵɵtext(3);
            i0.ɵɵelementStart(4, "div", 1);
            i0.ɵɵlistener("click", function MonthPickerSelectorComponent_Template_div_click_4_listener() { return ctx.onYearChange(true); });
            i0.ɵɵtemplate(5, MonthPickerSelectorComponent_fusion_icon_5_Template, 1, 1, "fusion-icon", 3);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(6, "div", 4);
            i0.ɵɵtemplate(7, MonthPickerSelectorComponent_div_7_Template, 3, 7, "div", 5);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵadvance();
            i0.ɵɵclassProp("fu-disabled", (ctx.min == null ? null : ctx.min.year) === ctx.year);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.arrowLeftIconName);
            i0.ɵɵadvance();
            i0.ɵɵtextInterpolate1(" ", ctx.year, " ");
            i0.ɵɵadvance();
            i0.ɵɵclassProp("fu-disabled", (ctx.max == null ? null : ctx.max.year) === ctx.year);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.arrowRightIconName);
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngForOf", ctx.monthNames);
        } }, dependencies: [i1.NgForOf, i1.NgIf, i2.IconComponent], styles: ["[_nghost-%COMP%]{position:absolute;z-index:1001;width:100%;min-width:220px;display:none;-webkit-user-select:none;user-select:none}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder[_ngcontent-%COMP%]{cursor:pointer}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder.fu-disabled[_ngcontent-%COMP%]{pointer-events:none;cursor:default}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]   .fu-month-name[_ngcontent-%COMP%]{text-align:center;cursor:pointer;position:relative}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]   .fu-month-name.fu-disabled[_ngcontent-%COMP%]{pointer-events:none}.fu-opened[_nghost-%COMP%]{display:block}", "[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]{font-size:13px;font-family:NHaasGroteskDSPro-75Bd,sans-serif;font-weight:400}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]   .fu-month-name[_ngcontent-%COMP%]{font-size:12px;font-family:HelveticaNeue,helvetica,sans-serif;font-weight:400;letter-spacing:.04px}[_nghost-%COMP%]   *[_ngcontent-%COMP%]{box-sizing:border-box}[_nghost-%COMP%]{background-color:var(--fu-white, #ffffff);border:var(--fu-month-picker-selector-border, none);border-radius:var(--fu-month-picker-selector-border-radius, 8px);box-shadow:var(--fu-month-picker-selector-box-shadow, 0 2px 4px 0 rgba(0, 0, 0, .15));padding:16px 16px 19px 13px}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]{margin-left:8px;margin-bottom:14px;position:relative}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder[_ngcontent-%COMP%]{width:18px;height:18px;border-radius:9px}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder[_ngcontent-%COMP%]   fusion-icon[class^=fu-arrow-prev][_ngcontent-%COMP%]{position:absolute;left:4px;top:0}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder[_ngcontent-%COMP%]   fusion-icon[class^=fu-arrow-prev][_ngcontent-%COMP%]     svg{width:8px;height:8px}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder[_ngcontent-%COMP%]   fusion-icon[class^=fu-arrow-prev][_ngcontent-%COMP%]     svg *{fill:var(--fu-month-picker-prev-icon-color, var(--fu-dark-500, #0d148c))}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder[_ngcontent-%COMP%]   fusion-icon[class^=fu-arrow-next][_ngcontent-%COMP%]{position:absolute;right:4px;top:0}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder[_ngcontent-%COMP%]   fusion-icon[class^=fu-arrow-next][_ngcontent-%COMP%]     svg{width:8px;height:8px}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder[_ngcontent-%COMP%]   fusion-icon[class^=fu-arrow-next][_ngcontent-%COMP%]     svg *{fill:var(--fu-month-picker-next-icon-color, var(--fu-dark-500, #0d148c))}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder[_ngcontent-%COMP%]:hover{background-color:var(--fu-light-300, #e5e7e9)}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder.fu-disabled[_ngcontent-%COMP%]   fusion-icon[class^=fu-arrow-prev][_ngcontent-%COMP%]     svg{width:8px;height:8px}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder.fu-disabled[_ngcontent-%COMP%]   fusion-icon[class^=fu-arrow-prev][_ngcontent-%COMP%]     svg *{fill:var(--fu-month-picker-prev-icon-disabled-color, var(--fu-light-700, #a9afb4))}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder.fu-disabled[_ngcontent-%COMP%]   fusion-icon[class^=fu-arrow-next][_ngcontent-%COMP%]     svg{width:8px;height:8px}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder.fu-disabled[_ngcontent-%COMP%]   fusion-icon[class^=fu-arrow-next][_ngcontent-%COMP%]     svg *{fill:var(--fu-month-picker-next-icon-disabled-color, var(--fu-light-700, #a9afb4))}[_nghost-%COMP%]   .fu-year-selector[_ngcontent-%COMP%]   .fu-arrow-holder.fu-disabled[_ngcontent-%COMP%]:hover{background-color:transparent}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]{gap:5px 40px}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]   .fu-month-name[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;line-height:1.7}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]   .fu-month-name[_ngcontent-%COMP%]   .fu-month-item[_ngcontent-%COMP%]{width:35px;height:35px;border-radius:18px;padding-top:8px;text-align:center}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]   .fu-month-name[_ngcontent-%COMP%]   .fu-month-item[_ngcontent-%COMP%]:hover{background-color:var(--fu-month-picker-month-hover-bg-color, var(--fu-primary-300, #96c0ff))}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]   .fu-month-name.fu-current[_ngcontent-%COMP%]:after{content:\"\";width:4px;height:4px;left:45%;bottom:2px;border-radius:2px;display:block;position:absolute;background-color:var(--fu-month-picker-month-current-dot-color, var(--fu-primary-500, #3083ff))}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]   .fu-month-name.fu-disabled[_ngcontent-%COMP%]   .fu-month-item[_ngcontent-%COMP%]{color:var(--fu-month-picker-month-disabled-color, var(--fu-light-700, #a9afb4))}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]   .fu-month-name.fu-disabled[_ngcontent-%COMP%]   .fu-month-item[_ngcontent-%COMP%]:hover{background-color:transparent}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]   .fu-month-name.fu-disabled[_ngcontent-%COMP%]   .fu-month-item[_ngcontent-%COMP%]:after{background-color:var(--fu-month-picker-month-disabled-current-dot-color, var(--fu-primary-500, #3083ff))}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]   .fu-month-name.fu-selected[_ngcontent-%COMP%]   .fu-month-item[_ngcontent-%COMP%]{background-color:var(--fu-month-picker-month-selected-bg-color, var(--fu-primary-500, #3083ff));color:var(--fu-month-picker-month-selected-color, var(--fu-white, #ffffff))}[_nghost-%COMP%]   .fu-month-selector[_ngcontent-%COMP%]   .fu-month-name.fu-selected[_ngcontent-%COMP%]:after{background-color:var(--fu-month-picker-month-selected-current-dot-color, var(--fu-white, #ffffff))}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MonthPickerSelectorComponent, [{
        type: Component,
        args: [{ selector: 'fusion-month-picker-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fu-year-selector\">\n    <div class=\"fu-arrow-holder\" [class.fu-disabled]=\"min?.year === year\" (click)=\"onYearChange(false)\">\n        <fusion-icon *ngIf=\"arrowLeftIconName\" class=\"fu-arrow-prev\" [name]=\"arrowLeftIconName\"></fusion-icon>\n    </div>\n    {{ year }}\n    <div class=\"fu-arrow-holder\" [class.fu-disabled]=\"max?.year === year\" (click)=\"onYearChange(true)\">\n        <fusion-icon *ngIf=\"arrowRightIconName\" class=\"fu-arrow-next\" [name]=\"arrowRightIconName\"></fusion-icon>\n    </div>\n</div>\n<div class=\"fu-month-selector\">\n    <div\n        *ngFor=\"let month of monthNames; index as idx\"\n        class=\"fu-month-name\"\n        [class.fu-current]=\"year === currentMonthPicker.year && idx === currentMonthPicker.month\"\n        [class.fu-disabled]=\"isMonthDisabled(idx)\"\n        [class.fu-selected]=\"isMonthSelected(idx)\"\n        (click)=\"selectMonth(idx)\"\n    ><div class=\"fu-month-item\">\n        {{ month }}\n    </div>\n    </div>\n</div>\n", styles: [":host{position:absolute;z-index:1001;width:100%;min-width:220px;display:none;-webkit-user-select:none;user-select:none}:host .fu-year-selector{display:flex;justify-content:space-between;align-items:center}:host .fu-year-selector .fu-arrow-holder{cursor:pointer}:host .fu-year-selector .fu-arrow-holder.fu-disabled{pointer-events:none;cursor:default}:host .fu-month-selector{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}:host .fu-month-selector .fu-month-name{text-align:center;cursor:pointer;position:relative}:host .fu-month-selector .fu-month-name.fu-disabled{pointer-events:none}:host.fu-opened{display:block}\n", ":host .fu-year-selector{font-size:13px;font-family:NHaasGroteskDSPro-75Bd,sans-serif;font-weight:400}:host .fu-month-selector .fu-month-name{font-size:12px;font-family:HelveticaNeue,helvetica,sans-serif;font-weight:400;letter-spacing:.04px}:host *{box-sizing:border-box}:host{background-color:var(--fu-white, #ffffff);border:var(--fu-month-picker-selector-border, none);border-radius:var(--fu-month-picker-selector-border-radius, 8px);box-shadow:var(--fu-month-picker-selector-box-shadow, 0 2px 4px 0 rgba(0, 0, 0, .15));padding:16px 16px 19px 13px}:host .fu-year-selector{margin-left:8px;margin-bottom:14px;position:relative}:host .fu-year-selector .fu-arrow-holder{width:18px;height:18px;border-radius:9px}:host .fu-year-selector .fu-arrow-holder fusion-icon[class^=fu-arrow-prev]{position:absolute;left:4px;top:0}:host .fu-year-selector .fu-arrow-holder fusion-icon[class^=fu-arrow-prev] ::ng-deep svg{width:8px;height:8px}:host .fu-year-selector .fu-arrow-holder fusion-icon[class^=fu-arrow-prev] ::ng-deep svg *{fill:var(--fu-month-picker-prev-icon-color, var(--fu-dark-500, #0d148c))}:host .fu-year-selector .fu-arrow-holder fusion-icon[class^=fu-arrow-next]{position:absolute;right:4px;top:0}:host .fu-year-selector .fu-arrow-holder fusion-icon[class^=fu-arrow-next] ::ng-deep svg{width:8px;height:8px}:host .fu-year-selector .fu-arrow-holder fusion-icon[class^=fu-arrow-next] ::ng-deep svg *{fill:var(--fu-month-picker-next-icon-color, var(--fu-dark-500, #0d148c))}:host .fu-year-selector .fu-arrow-holder:hover{background-color:var(--fu-light-300, #e5e7e9)}:host .fu-year-selector .fu-arrow-holder.fu-disabled fusion-icon[class^=fu-arrow-prev] ::ng-deep svg{width:8px;height:8px}:host .fu-year-selector .fu-arrow-holder.fu-disabled fusion-icon[class^=fu-arrow-prev] ::ng-deep svg *{fill:var(--fu-month-picker-prev-icon-disabled-color, var(--fu-light-700, #a9afb4))}:host .fu-year-selector .fu-arrow-holder.fu-disabled fusion-icon[class^=fu-arrow-next] ::ng-deep svg{width:8px;height:8px}:host .fu-year-selector .fu-arrow-holder.fu-disabled fusion-icon[class^=fu-arrow-next] ::ng-deep svg *{fill:var(--fu-month-picker-next-icon-disabled-color, var(--fu-light-700, #a9afb4))}:host .fu-year-selector .fu-arrow-holder.fu-disabled:hover{background-color:transparent}:host .fu-month-selector{gap:5px 40px}:host .fu-month-selector .fu-month-name{display:flex;align-items:center;justify-content:center;line-height:1.7}:host .fu-month-selector .fu-month-name .fu-month-item{width:35px;height:35px;border-radius:18px;padding-top:8px;text-align:center}:host .fu-month-selector .fu-month-name .fu-month-item:hover{background-color:var(--fu-month-picker-month-hover-bg-color, var(--fu-primary-300, #96c0ff))}:host .fu-month-selector .fu-month-name.fu-current:after{content:\"\";width:4px;height:4px;left:45%;bottom:2px;border-radius:2px;display:block;position:absolute;background-color:var(--fu-month-picker-month-current-dot-color, var(--fu-primary-500, #3083ff))}:host .fu-month-selector .fu-month-name.fu-disabled .fu-month-item{color:var(--fu-month-picker-month-disabled-color, var(--fu-light-700, #a9afb4))}:host .fu-month-selector .fu-month-name.fu-disabled .fu-month-item:hover{background-color:transparent}:host .fu-month-selector .fu-month-name.fu-disabled .fu-month-item:after{background-color:var(--fu-month-picker-month-disabled-current-dot-color, var(--fu-primary-500, #3083ff))}:host .fu-month-selector .fu-month-name.fu-selected .fu-month-item{background-color:var(--fu-month-picker-month-selected-bg-color, var(--fu-primary-500, #3083ff));color:var(--fu-month-picker-month-selected-color, var(--fu-white, #ffffff))}:host .fu-month-selector .fu-month-name.fu-selected:after{background-color:var(--fu-month-picker-month-selected-current-dot-color, var(--fu-white, #ffffff))}\n"] }]
    }], null, { min: [{
            type: Input
        }], max: [{
            type: Input
        }], selected: [{
            type: Input
        }], selectedChange: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MonthPickerSelectorComponent, { className: "MonthPickerSelectorComponent", filePath: "components/month-picker-selector/month-picker-selector.component.ts", lineNumber: 11 }); })();
//# sourceMappingURL=data:application/json;base64, 