import { Component, EventEmitter, Inject, Input, Optional, Output, ViewChild } from '@angular/core';
import { NG_ASYNC_VALIDATORS, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgModel } from '@angular/forms';
import { ElementBase } from '../../base/element-base';
import { INPUT_FORMS_CONFIG } from '../../input-forms-config.constants';
import { INPUT_MONTH_YEAR_LANGUAGES } from './input-month-year.constants';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "../../../ui/directives/click-outside.directive";
import * as i4 from "ngx-bootstrap/tooltip";
import * as i5 from "../input-validations/input-validations.component";
let identifier = 0;
export class InputMonthYearComponent extends ElementBase {
    constructor(validators, asyncValidators, config) {
        super(validators, asyncValidators, config);
        this.config = config;
        this.placeholder = 'Select...';
        this.language = 'en';
        this.format = 'MMM/yyyy';
        this.onChange = new EventEmitter();
        this.displayMode = EnumDisplayMode.Month;
        this.identifier = `input-month-year-${identifier++}`;
    }
    ngOnInit() {
        if (this.config.monthYear) {
            Object.assign(this, this.config.monthYear);
        }
        this.init();
    }
    ngDoCheck() {
        this.handleInitialValue();
    }
    ToggleDropDown(event, value) {
        if ((value == false && !this.showDropdown) || (value == undefined && this.disabled))
            return;
        this.displayMode = EnumDisplayMode.Month;
        this.handleSelectedYear();
        if (value == undefined) {
            if (this.showDropdown) {
                this.setComboTouched();
            }
            this.showDropdown = !this.showDropdown;
        }
        else {
            if (!value && this.showDropdown) {
                this.setComboTouched();
            }
            this.showDropdown = value;
        }
    }
    IncrementSelectedYear() {
        if (this.disabled)
            return;
        this.selectedYear++;
    }
    DecrementSelectedYear() {
        if (this.disabled)
            return;
        this.selectedYear--;
    }
    GetMonthAvaiable(index) {
        if (!this.monthsAvailable || (this.monthsAvailable && this.monthsAvailable.filter(x => x.year == this.selectedYear).length == 0) || (this.monthsAvailable && this.monthsAvailable.filter(x => x.year == this.selectedYear).length > 0 && !this.monthsAvailable.filter(x => x.year == this.selectedYear)[0].monthsAvaiable[index].value))
            return true;
        else
            return false;
    }
    SelectMonth(month) {
        if (this.disabled) {
            this.showDropdown = false;
            return;
        }
        if (!this.GetMonthAvaiable(month)) {
            return;
        }
        let newDate = new Date(this.selectedYear, month, 1, 0, 0, 0, 0);
        this.value = newDate;
        this.showDropdown = false;
        this.setComboTouched();
        this.onChange.emit(this.value);
    }
    Clear(event) {
        this.value = null;
        this.comboTouched = true;
        this.showDropdown = false;
        this.onChange.emit(this.value);
        event.stopPropagation();
    }
    OnComboPressed(event) {
        if (event.keyCode == 13) {
            this.ToggleDropDown(null);
            event.preventDefault();
        }
    }
    init() {
        this.initLanguageDefinitions();
    }
    initLanguageDefinitions() {
        this.languageDefinitions = INPUT_MONTH_YEAR_LANGUAGES.get(this.language);
    }
    handleSelectedYear() {
        if (this.value) {
            this.selectedYear = this.value.getFullYear();
        }
        else {
            this.selectedYear = new Date().getFullYear();
        }
    }
    handleInitialValue() {
        if (this.value && (typeof this.value == "string" || this.value instanceof String)) {
            let data = new Date(this.value);
            data.setHours(0);
            data.setMinutes(0);
            data.setSeconds(0);
            data.setMilliseconds(0);
            this.writeValue(data);
        }
    }
    setComboTouched() {
        this.comboTouched = true;
    }
}
InputMonthYearComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InputMonthYearComponent, deps: [{ token: NG_VALIDATORS, optional: true }, { token: NG_ASYNC_VALIDATORS, optional: true }, { token: INPUT_FORMS_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
InputMonthYearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: InputMonthYearComponent, selector: "input-month-year", inputs: { placeholder: "placeholder", language: "language", format: "format", monthsAvailable: "monthsAvailable" }, outputs: { onChange: "onChange" }, providers: [{
            provide: NG_VALUE_ACCESSOR,
            useExisting: InputMonthYearComponent,
            multi: true
        }], viewQueries: [{ propertyName: "model", first: true, predicate: NgModel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"identifier\" class=\"ui-month-year\">\n  <label *ngIf=\"label\">\n    {{label}}\n    <span class=\"required-symbol\" *ngIf=\"isRequired\"> *</span>\n    <i class=\"fa fa-question-circle ml-2\" tooltip=\"{{help}}\" container=\"body\" *ngIf=\"help\"></i>\n  </label>\n\n  <input type=\"date\" class=\"d-none\" [(ngModel)]=\"value\" />\n  <div class=\"combobox d-flex align-items-center justify-content-between\" \n      [ngClass]=\"{\n        'has-validations': showValidations,\n        'open': showDropdown, \n        'disabled': disabled,\n        'is-valid': !showDropdown && !disabled && comboTouched && !(invalid | async),\n        'is-invalid': !showDropdown && !disabled && comboTouched && (invalid | async)\n      }\"\n      (click)=\"ToggleDropDown($event)\" (keyup)=\"OnComboPressed($event)\" tabindex=\"0\">\n\n      <span *ngIf=\"!value\">{{placeholder}}</span>\n      <span *ngIf=\"value\">{{value | date:format}}</span>\n\n      <i class=\"fa fa-times btn-clear-selection ml-auto\" *ngIf=\"value && !disabled\" (click)=\"Clear($event)\"></i>\n      <i class=\"fa\" [ngClass]=\"{'fa-caret-down': !showDropdown, 'fa-caret-up': showDropdown}\"></i>\n  </div>\n\n  <div class=\"dropdown-options shadow fadeInDown\" *ngIf=\"showDropdown\" (clickOutside)=\"ToggleDropDown($event, false)\">\n    <div class=\"months-container\" *ngIf=\"displayMode == 0\">\n      <div class=\"toolbar d-flex align-items-center justify-content-between\">\n        <button class=\"btn btn-light\" (click)=\"DecrementSelectedYear()\"><i class=\"fa fa-chevron-left\"></i></button>\n        <button class=\"btn btn-light\">{{selectedYear}}</button>\n        <button class=\"btn btn-light\" (click)=\"IncrementSelectedYear()\"><i class=\"fa fa-chevron-right\"></i></button>\n      </div>\n\n      <ul class=\"d-flex flex-wrap\">\n        <li *ngFor=\"let item of languageDefinitions.months; let i = index;\" \n          (click)=\"SelectMonth(i)\"\n          [ngClass]=\"{'selected': value?.getMonth() == i && GetMonthAvaiable(i),\n                      'disabled': !GetMonthAvaiable(i) }\">\n          {{item | slice:0:3}}\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<input-validations\n  *ngIf=\"showValidations && !disabled && comboTouched && (invalid | async)\"\n  [messages]=\"failures | async\">\n</input-validations>\n\n<small class=\"text-muted\" *ngIf=\"description\">{{description}}</small>\n", styles: ["@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-5%,0)}to{opacity:1;transform:translateZ(0)}}.fadeInDown{animation-name:fadeInDown;animation-duration:.35s;animation-fill-mode:both}.ui-month-year{position:relative}.ui-month-year *{-webkit-user-select:none;user-select:none}.ui-month-year>.combobox{outline:none;background-color:#fff;padding:.375rem .4rem .375rem .75rem;border:1px solid #ced4da;border-radius:6px}.ui-month-year>.combobox>span{color:#6c757d;font-size:1rem;line-height:1.5}.ui-month-year>.combobox>i{color:#495057;font-size:14px;margin-left:10px}.ui-month-year>.combobox>i.fa-times{color:#9b9b9b;cursor:pointer}.ui-month-year>.combobox.open{border-radius:6px 6px 6px 0}.ui-month-year>.combobox.disabled{background-color:#e9ecef;border-color:#ced4da}.ui-month-year>.combobox.has-validations.is-invalid{border-color:#dc3545}.ui-month-year>.combobox.has-validations.is-invalid.open{box-shadow:0 0 0 .2rem #dc354540}.ui-month-year>.combobox.has-validations.is-valid{border-color:#28a745}.ui-month-year>.combobox.has-validations.is-valid.open{box-shadow:0 0 0 .2rem #28a74540}.ui-month-year>.dropdown-options{background-color:#fff;border:1px solid #ced4da;border-radius:0 0 6px 6px;position:absolute;top:71px;left:0;width:250px;z-index:20;margin-top:-1px}.ui-month-year>.dropdown-options .toolbar{padding:3px;border-bottom:1px solid #ced4da;background-color:#f8f9fa}.ui-month-year>.dropdown-options ul{margin:0;padding:5px 4px 5px 5px}.ui-month-year>.dropdown-options ul li{list-style:none;width:33.33%;height:25%;padding:10px;text-align:center;border-radius:4px}.ui-month-year>.dropdown-options ul li>span{cursor:pointer}.ui-month-year>.dropdown-options ul li.selected{color:#007bff;font-weight:600}.ui-month-year>.dropdown-options ul li.disabled{color:#dedede;text-decoration:line-through}.ui-month-year>.dropdown-options ul li:hover{background-color:#007bff;color:#fff;cursor:pointer}.btn-clear-selection{cursor:pointer;color:#495057!important;padding:8px 10px;margin-top:-5px!important;margin-bottom:-5px!important;border-radius:3px}.btn-clear-selection:hover{background-color:#e7e7e7}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i4.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["containerClass", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "placement", "tooltipIsOpen", "tooltipEnable", "isDisabled", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "delay", "tooltipTrigger", "triggers", "adaptivePosition"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i5.InputValidationsComponent, selector: "input-validations", inputs: ["messages"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InputMonthYearComponent, decorators: [{
            type: Component,
            args: [{ selector: 'input-month-year', providers: [{
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: InputMonthYearComponent,
                            multi: true
                        }], template: "<div [id]=\"identifier\" class=\"ui-month-year\">\n  <label *ngIf=\"label\">\n    {{label}}\n    <span class=\"required-symbol\" *ngIf=\"isRequired\"> *</span>\n    <i class=\"fa fa-question-circle ml-2\" tooltip=\"{{help}}\" container=\"body\" *ngIf=\"help\"></i>\n  </label>\n\n  <input type=\"date\" class=\"d-none\" [(ngModel)]=\"value\" />\n  <div class=\"combobox d-flex align-items-center justify-content-between\" \n      [ngClass]=\"{\n        'has-validations': showValidations,\n        'open': showDropdown, \n        'disabled': disabled,\n        'is-valid': !showDropdown && !disabled && comboTouched && !(invalid | async),\n        'is-invalid': !showDropdown && !disabled && comboTouched && (invalid | async)\n      }\"\n      (click)=\"ToggleDropDown($event)\" (keyup)=\"OnComboPressed($event)\" tabindex=\"0\">\n\n      <span *ngIf=\"!value\">{{placeholder}}</span>\n      <span *ngIf=\"value\">{{value | date:format}}</span>\n\n      <i class=\"fa fa-times btn-clear-selection ml-auto\" *ngIf=\"value && !disabled\" (click)=\"Clear($event)\"></i>\n      <i class=\"fa\" [ngClass]=\"{'fa-caret-down': !showDropdown, 'fa-caret-up': showDropdown}\"></i>\n  </div>\n\n  <div class=\"dropdown-options shadow fadeInDown\" *ngIf=\"showDropdown\" (clickOutside)=\"ToggleDropDown($event, false)\">\n    <div class=\"months-container\" *ngIf=\"displayMode == 0\">\n      <div class=\"toolbar d-flex align-items-center justify-content-between\">\n        <button class=\"btn btn-light\" (click)=\"DecrementSelectedYear()\"><i class=\"fa fa-chevron-left\"></i></button>\n        <button class=\"btn btn-light\">{{selectedYear}}</button>\n        <button class=\"btn btn-light\" (click)=\"IncrementSelectedYear()\"><i class=\"fa fa-chevron-right\"></i></button>\n      </div>\n\n      <ul class=\"d-flex flex-wrap\">\n        <li *ngFor=\"let item of languageDefinitions.months; let i = index;\" \n          (click)=\"SelectMonth(i)\"\n          [ngClass]=\"{'selected': value?.getMonth() == i && GetMonthAvaiable(i),\n                      'disabled': !GetMonthAvaiable(i) }\">\n          {{item | slice:0:3}}\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<input-validations\n  *ngIf=\"showValidations && !disabled && comboTouched && (invalid | async)\"\n  [messages]=\"failures | async\">\n</input-validations>\n\n<small class=\"text-muted\" *ngIf=\"description\">{{description}}</small>\n", styles: ["@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-5%,0)}to{opacity:1;transform:translateZ(0)}}.fadeInDown{animation-name:fadeInDown;animation-duration:.35s;animation-fill-mode:both}.ui-month-year{position:relative}.ui-month-year *{-webkit-user-select:none;user-select:none}.ui-month-year>.combobox{outline:none;background-color:#fff;padding:.375rem .4rem .375rem .75rem;border:1px solid #ced4da;border-radius:6px}.ui-month-year>.combobox>span{color:#6c757d;font-size:1rem;line-height:1.5}.ui-month-year>.combobox>i{color:#495057;font-size:14px;margin-left:10px}.ui-month-year>.combobox>i.fa-times{color:#9b9b9b;cursor:pointer}.ui-month-year>.combobox.open{border-radius:6px 6px 6px 0}.ui-month-year>.combobox.disabled{background-color:#e9ecef;border-color:#ced4da}.ui-month-year>.combobox.has-validations.is-invalid{border-color:#dc3545}.ui-month-year>.combobox.has-validations.is-invalid.open{box-shadow:0 0 0 .2rem #dc354540}.ui-month-year>.combobox.has-validations.is-valid{border-color:#28a745}.ui-month-year>.combobox.has-validations.is-valid.open{box-shadow:0 0 0 .2rem #28a74540}.ui-month-year>.dropdown-options{background-color:#fff;border:1px solid #ced4da;border-radius:0 0 6px 6px;position:absolute;top:71px;left:0;width:250px;z-index:20;margin-top:-1px}.ui-month-year>.dropdown-options .toolbar{padding:3px;border-bottom:1px solid #ced4da;background-color:#f8f9fa}.ui-month-year>.dropdown-options ul{margin:0;padding:5px 4px 5px 5px}.ui-month-year>.dropdown-options ul li{list-style:none;width:33.33%;height:25%;padding:10px;text-align:center;border-radius:4px}.ui-month-year>.dropdown-options ul li>span{cursor:pointer}.ui-month-year>.dropdown-options ul li.selected{color:#007bff;font-weight:600}.ui-month-year>.dropdown-options ul li.disabled{color:#dedede;text-decoration:line-through}.ui-month-year>.dropdown-options ul li:hover{background-color:#007bff;color:#fff;cursor:pointer}.btn-clear-selection{cursor:pointer;color:#495057!important;padding:8px 10px;margin-top:-5px!important;margin-bottom:-5px!important;border-radius:3px}.btn-clear-selection:hover{background-color:#e7e7e7}\n"] }]
        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [NG_VALIDATORS]
                }] }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [NG_ASYNC_VALIDATORS]
                }] }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [INPUT_FORMS_CONFIG]
                }] }]; }, propDecorators: { placeholder: [{
                type: Input
            }], language: [{
                type: Input
            }], format: [{
                type: Input
            }], monthsAvailable: [{
                type: Input
            }], model: [{
                type: ViewChild,
                args: [NgModel, { static: true }]
            }], onChange: [{
                type: Output
            }] } });
export var EnumDisplayMode;
(function (EnumDisplayMode) {
    EnumDisplayMode[EnumDisplayMode["Month"] = 0] = "Month";
    EnumDisplayMode[EnumDisplayMode["Year"] = 1] = "Year";
})(EnumDisplayMode || (EnumDisplayMode = {}));
//# sourceMappingURL=data:application/json;base64, 