import { BsLocaleService } from 'ngx-bootstrap/datepicker';
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 * as i0 from "@angular/core";
import * as i1 from "ngx-bootstrap/datepicker";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "../../../ui/directives/click-outside.directive";
let identifier = 0;
export class FilterDateComponent extends ElementBase {
    constructor(validators, asyncValidators, config, localeService) {
        super(validators, asyncValidators, config);
        this.config = config;
        this.localeService = localeService;
        this.format = 'MM/dd/yyyy';
        this.theme = 'theme-dark-blue';
        this.clearSelectionButtonLabel = 'Clear';
        this.onChange = new EventEmitter();
        this.clickOutsideEnabled = true;
        this.locale = 'en-gb';
        this.bsConfig = {
            containerClass: this.theme,
            customTodayClass: 'today',
        };
        this.identifier = `filter-date-${identifier++}`;
        if (config.date) {
            Object.assign(this, config.date);
        }
        if (config.dropDown) {
            this.clearSelectionButtonLabel = config.dropDown.clearSelectionButtonLabel;
        }
    }
    ngOnInit() {
        this.localeService.use(this.locale);
        setTimeout(() => {
            this.handleInitialValue();
        });
    }
    ngDoCheck() {
        this.handleInitialValue();
    }
    onValueChange(value) {
        if (this.toggling)
            return;
        this.value = value;
        this.onChange.emit(value);
        setTimeout(() => {
            this.showDropdown = false;
        }, 0);
    }
    toggleDropDown(event, value) {
        if (this.clickOutsideEnabled) {
            this.toggling = true;
            if ((value == false && !this.showDropdown) || (value == undefined && this.disabled))
                return;
            if (value == undefined) {
                if (this.showDropdown) {
                    this.setComboTouched();
                }
                this.showDropdown = !this.showDropdown;
            }
            else {
                if (!value && this.showDropdown) {
                    this.setComboTouched();
                }
                this.showDropdown = value;
            }
            setTimeout(() => {
                this.toggling = false;
            }, 0);
        }
        else {
            this.clickOutsideEnabled = true;
        }
    }
    onComboPressed(event) {
        if (event.keyCode == 13) {
            this.toggleDropDown(null);
            event.preventDefault();
        }
    }
    clearSelection(e) {
        this.value = null;
        this.comboTouched = true;
        this.showDropdown = false;
        this.onChange.emit(this.value);
        if (e)
            e.stopPropagation();
    }
    setComboTouched() {
        this.comboTouched = true;
    }
    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);
        }
    }
}
FilterDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterDateComponent, deps: [{ token: NG_VALIDATORS, optional: true }, { token: NG_ASYNC_VALIDATORS, optional: true }, { token: INPUT_FORMS_CONFIG }, { token: i1.BsLocaleService }], target: i0.ɵɵFactoryTarget.Component });
FilterDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FilterDateComponent, selector: "filter-date", inputs: { minDate: "minDate", maxDate: "maxDate", format: "format", theme: "theme", clearSelectionButtonLabel: "clearSelectionButtonLabel" }, outputs: { onChange: "onChange" }, providers: [{
            provide: NG_VALUE_ACCESSOR,
            useExisting: FilterDateComponent,
            multi: true
        }], viewQueries: [{ propertyName: "model", first: true, predicate: NgModel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"identifier\" class=\"ui-filter-date\">\n    <input type=\"hidden\" [(ngModel)]=\"value\" />\n\n    <div class=\"combobox d-flex align-items-center\" [ngClass]=\"{\n        'open': showDropdown, \n        'disabled': disabled,\n        'has-value': value\n      }\" (click)=\"toggleDropDown($event)\" (keyup)=\"onComboPressed($event)\" tabindex=\"0\">\n        <span *ngIf=\"!value\">{{label}}</span>\n\n        <span *ngIf=\"value\">\n            <b>{{label}}</b>:\n            <small class=\"text-muted text-truncate ml-1\">{{value | date:format}}</small>\n        </span>\n        \n        <i class=\"fa\" [ngClass]=\"{'fa-angle-down': !showDropdown, 'fa-angle-up': showDropdown}\"></i>\n    </div>\n\n    <div class=\"dropdown-options fadeInDown\" *ngIf=\"showDropdown\" (clickOutside)=\"toggleDropDown($event, false)\">\n        <div class=\"options-container\">\n            <bs-datepicker-inline \n                [minDate]=\"minDate\"\n                [maxDate]=\"maxDate\"\n                [bsConfig]=\"bsConfig\"\n                [bsValue]=\"value\"\n                (bsValueChange)=\"onValueChange($event)\">\n            </bs-datepicker-inline>\n            <div class=\"toolbar\" *ngIf=\"value && !disabled\">\n                <button type=\"button\" class=\"btn btn-light ml-1 flex-shrink-0\" (click)=\"clearSelection($event)\">\n                    <i class=\"fa fa-eraser\"></i> {{clearSelectionButtonLabel}}\n                </button>\n            </div>\n        </div>\n    </div>\n</div>", 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-filter-date{position:relative}.ui-filter-date *{-webkit-user-select:none;user-select:none}.ui-filter-date>.combobox{outline:none;padding:.375rem .475rem;width:-moz-fit-content;width:fit-content}.ui-filter-date>.combobox>span{color:#6c757d;font-size:1rem;line-height:1.5}.ui-filter-date>.combobox>i{color:#495057;font-size:14px;margin-left:10px}.ui-filter-date .combobox:hover{cursor:pointer}.ui-filter-date>.combobox.open{border-radius:.25rem .25rem 0 0}.ui-filter-date>.combobox.disabled{background-color:#e9ecef;border-color:#ced4da}.ui-filter-date>.dropdown-options{background-color:#fff;border:1px solid #ced4da;border-radius:0 0 .25rem .25rem;position:absolute;top:100%;left:0;z-index:20;margin-top:-1px;min-width:300px}.ui-filter-date>.dropdown-options>.options-container{display:inherit;position:initial;font-family:inherit;background-color:inherit;box-shadow:none;height:auto;width:auto;color:inherit;font-size:inherit;letter-spacing:inherit;line-height:inherit;padding:inherit;border-radius:inherit}.ui-filter-date>.dropdown-options .toolbar{padding:10px;border-bottom:1px solid #ced4da;background-color:#1b578a}.ui-filter-date>.dropdown-options.drop-right{left:inherit;right:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i1.BsDatepickerInlineDirective, selector: "bs-datepicker-inline", inputs: ["bsValue", "bsConfig", "isDisabled", "minDate", "maxDate", "dateCustomClasses", "datesEnabled", "datesDisabled"], outputs: ["bsValueChange"], exportAs: ["bsDatepickerInline"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterDateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'filter-date', providers: [{
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: FilterDateComponent,
                            multi: true
                        }], template: "<div [id]=\"identifier\" class=\"ui-filter-date\">\n    <input type=\"hidden\" [(ngModel)]=\"value\" />\n\n    <div class=\"combobox d-flex align-items-center\" [ngClass]=\"{\n        'open': showDropdown, \n        'disabled': disabled,\n        'has-value': value\n      }\" (click)=\"toggleDropDown($event)\" (keyup)=\"onComboPressed($event)\" tabindex=\"0\">\n        <span *ngIf=\"!value\">{{label}}</span>\n\n        <span *ngIf=\"value\">\n            <b>{{label}}</b>:\n            <small class=\"text-muted text-truncate ml-1\">{{value | date:format}}</small>\n        </span>\n        \n        <i class=\"fa\" [ngClass]=\"{'fa-angle-down': !showDropdown, 'fa-angle-up': showDropdown}\"></i>\n    </div>\n\n    <div class=\"dropdown-options fadeInDown\" *ngIf=\"showDropdown\" (clickOutside)=\"toggleDropDown($event, false)\">\n        <div class=\"options-container\">\n            <bs-datepicker-inline \n                [minDate]=\"minDate\"\n                [maxDate]=\"maxDate\"\n                [bsConfig]=\"bsConfig\"\n                [bsValue]=\"value\"\n                (bsValueChange)=\"onValueChange($event)\">\n            </bs-datepicker-inline>\n            <div class=\"toolbar\" *ngIf=\"value && !disabled\">\n                <button type=\"button\" class=\"btn btn-light ml-1 flex-shrink-0\" (click)=\"clearSelection($event)\">\n                    <i class=\"fa fa-eraser\"></i> {{clearSelectionButtonLabel}}\n                </button>\n            </div>\n        </div>\n    </div>\n</div>", 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-filter-date{position:relative}.ui-filter-date *{-webkit-user-select:none;user-select:none}.ui-filter-date>.combobox{outline:none;padding:.375rem .475rem;width:-moz-fit-content;width:fit-content}.ui-filter-date>.combobox>span{color:#6c757d;font-size:1rem;line-height:1.5}.ui-filter-date>.combobox>i{color:#495057;font-size:14px;margin-left:10px}.ui-filter-date .combobox:hover{cursor:pointer}.ui-filter-date>.combobox.open{border-radius:.25rem .25rem 0 0}.ui-filter-date>.combobox.disabled{background-color:#e9ecef;border-color:#ced4da}.ui-filter-date>.dropdown-options{background-color:#fff;border:1px solid #ced4da;border-radius:0 0 .25rem .25rem;position:absolute;top:100%;left:0;z-index:20;margin-top:-1px;min-width:300px}.ui-filter-date>.dropdown-options>.options-container{display:inherit;position:initial;font-family:inherit;background-color:inherit;box-shadow:none;height:auto;width:auto;color:inherit;font-size:inherit;letter-spacing:inherit;line-height:inherit;padding:inherit;border-radius:inherit}.ui-filter-date>.dropdown-options .toolbar{padding:10px;border-bottom:1px solid #ced4da;background-color:#1b578a}.ui-filter-date>.dropdown-options.drop-right{left:inherit;right:0}\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]
                }] }, { type: i1.BsLocaleService }]; }, propDecorators: { minDate: [{
                type: Input
            }], maxDate: [{
                type: Input
            }], format: [{
                type: Input
            }], theme: [{
                type: Input
            }], clearSelectionButtonLabel: [{
                type: Input
            }], onChange: [{
                type: Output
            }], model: [{
                type: ViewChild,
                args: [NgModel, { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 