import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { gettext } from '../i18n';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { CdkTrapFocus } from '@angular/cdk/a11y';
import { IconDirective } from '../common/icon.directive';
import { NgIf, DatePipe } from '@angular/common';
import { FormGroupComponent } from '../forms/form-group.component';
import { C8yTranslateDirective } from '../i18n/c8y-translate.directive';
import { RequiredInputPlaceholderDirective } from '../forms/required-input-placeholder.directive';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { C8yTranslatePipe } from '../i18n/c8y-translate.pipe';
import { DateFormatService } from '../common/date-format.service';
import * as i0 from "@angular/core";
import * as i1 from "ngx-bootstrap/dropdown";
import * as i2 from "@angular/forms";
import * as i3 from "ngx-bootstrap/datepicker";
export class DatePickerComponent {
    constructor() {
        this.onDateSelected = new EventEmitter();
        this.placeholder = gettext('Filter by date…');
        this.dateFormatService = inject(DateFormatService);
    }
    ngOnInit() {
        if (!this.dateInputFormat) {
            this.dateInputFormat = this.dateFormatService.getDateFormat();
        }
        this.fgDatePicker = new FormGroup({
            dateFrom: new FormControl(),
            dateTo: new FormControl()
        });
    }
    filter() {
        this.onDateSelected.emit(this.fgDatePicker.value);
        this.dateFrom = this.fgDatePicker.get('dateFrom').value;
        this.dateTo = this.fgDatePicker.get('dateTo').value;
    }
    clearFilter() {
        this.fgDatePicker.setValue({
            dateFrom: null,
            dateTo: null
        });
        this.onDateSelected.emit(null);
        this.dateFrom = null;
        this.dateTo = null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatePickerComponent, isStandalone: true, selector: "c8y-date-picker", inputs: { placeholder: "placeholder", dateInputFormat: "dateInputFormat" }, outputs: { onDateSelected: "onDateSelected" }, ngImport: i0, template: "<div\n  dropdown\n  class=\"c8y-child-assets-selector dropdown\"\n  #datefilter=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  placement=\"bottom left\"\n  [cdkTrapFocus]=\"datefilter.isOpen\"\n  >\n  <button\n    id=\"date-range\"\n    dropdownToggle\n    title=\"{{ 'Date filter' | translate }}\"\n    type=\"button\"\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n  >\n    <i c8yIcon=\"calendar-o\" class=\"m-r-4 text-primary\"></i>\n    <span class=\"text-truncate\">\n      <span *ngIf=\"dateFrom\">\n        <span class=\"text-label-small\">{{ 'From`date`' | translate }}</span>\n        {{ dateFrom | date }}\n      </span>\n      <span *ngIf=\"dateTo\">\n        <span class=\"text-label-small\">{{ 'To`date`' | translate }}</span>\n        {{ dateTo | date }}\n      </span>\n      <em *ngIf=\"!dateFrom && !dateTo\" class=\"text-muted\">\n        {{ placeholder }}\n      </em>\n    </span>\n  </button>\n\n  <form [formGroup]=\"fgDatePicker\"\n    id=\"dropdown-date-range\"\n    *dropdownMenu\n    class=\"dropdown-menu\">\n    <div class=\"dropdown-form p-b-0\">\n      <c8y-form-group class=\"form-group-sm\">\n        <label for=\"dateFrom\" class=\"text-medium m-b-4\" translate>Date from</label>\n        <div class=\"form-group datepicker d-block m-b-0\">\n          <input\n            id=\"dateFrom\"\n            formControlName=\"dateFrom\"\n            class=\"form-control fit-w text-left\"\n            placeholder=\"{{ 'Date from' | translate }}\"\n            bsDatepicker\n            [maxDate]=\"dateTo\"\n            (bsValueChange)=\"dateFrom = $event\"\n            [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true, dateInputFormat: dateInputFormat }\"\n          />\n        </div>\n      </c8y-form-group>\n      <c8y-form-group class=\"form-group form-group-sm \">\n        <label for=\"dateTo\" translate>Date to</label>\n        <div class=\"form-group datepicker m-l-0 d-block m-b-0 \">\n          <input\n            name=\"dateTo\"\n            id=\"dateTo\"\n            formControlName=\"dateTo\"\n            class=\"form-control fit-w text-left\"\n            placeholder=\"{{ 'Date to' | translate }}\"\n            bsDatepicker\n            [minDate]=\"dateFrom\"\n            (bsValueChange)=\"dateTo = $event\"\n            [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true, dateInputFormat: dateInputFormat }\"\n          />\n        </div>\n      </c8y-form-group>\n    </div>\n    <div class=\"p-16 d-flex separator-top gap-8\">\n      <button\n        title=\"{{ 'Clear selection' | translate }}\"\n        type=\"button\"\n        class=\"btn btn-default btn-sm flex-grow\"\n        (click)=\"clearFilter(); datefilter.isOpen = !datefilter.isOpen\"\n      >\n        {{ 'Clear`selection`' | translate }}\n      </button>\n      <button\n        [disabled]=\"!fgDatePicker.get('dateFrom').value && !fgDatePicker.get('dateTo').value\"\n        title=\"{{ 'Apply selection' | translate }}\"\n        type=\"submit\"\n        class=\"btn btn-primary btn-sm flex-grow\"\n        (click)=\"filter(); datefilter.isOpen = !datefilter.isOpen\"\n      >\n        {{ 'Apply`selection`' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i3.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i3.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-date-picker', standalone: true, imports: [
                        BsDropdownModule,
                        CdkTrapFocus,
                        IconDirective,
                        NgIf,
                        FormsModule,
                        ReactiveFormsModule,
                        FormGroupComponent,
                        C8yTranslateDirective,
                        RequiredInputPlaceholderDirective,
                        BsDatepickerModule,
                        DatePipe,
                        C8yTranslatePipe
                    ], template: "<div\n  dropdown\n  class=\"c8y-child-assets-selector dropdown\"\n  #datefilter=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  placement=\"bottom left\"\n  [cdkTrapFocus]=\"datefilter.isOpen\"\n  >\n  <button\n    id=\"date-range\"\n    dropdownToggle\n    title=\"{{ 'Date filter' | translate }}\"\n    type=\"button\"\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n  >\n    <i c8yIcon=\"calendar-o\" class=\"m-r-4 text-primary\"></i>\n    <span class=\"text-truncate\">\n      <span *ngIf=\"dateFrom\">\n        <span class=\"text-label-small\">{{ 'From`date`' | translate }}</span>\n        {{ dateFrom | date }}\n      </span>\n      <span *ngIf=\"dateTo\">\n        <span class=\"text-label-small\">{{ 'To`date`' | translate }}</span>\n        {{ dateTo | date }}\n      </span>\n      <em *ngIf=\"!dateFrom && !dateTo\" class=\"text-muted\">\n        {{ placeholder }}\n      </em>\n    </span>\n  </button>\n\n  <form [formGroup]=\"fgDatePicker\"\n    id=\"dropdown-date-range\"\n    *dropdownMenu\n    class=\"dropdown-menu\">\n    <div class=\"dropdown-form p-b-0\">\n      <c8y-form-group class=\"form-group-sm\">\n        <label for=\"dateFrom\" class=\"text-medium m-b-4\" translate>Date from</label>\n        <div class=\"form-group datepicker d-block m-b-0\">\n          <input\n            id=\"dateFrom\"\n            formControlName=\"dateFrom\"\n            class=\"form-control fit-w text-left\"\n            placeholder=\"{{ 'Date from' | translate }}\"\n            bsDatepicker\n            [maxDate]=\"dateTo\"\n            (bsValueChange)=\"dateFrom = $event\"\n            [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true, dateInputFormat: dateInputFormat }\"\n          />\n        </div>\n      </c8y-form-group>\n      <c8y-form-group class=\"form-group form-group-sm \">\n        <label for=\"dateTo\" translate>Date to</label>\n        <div class=\"form-group datepicker m-l-0 d-block m-b-0 \">\n          <input\n            name=\"dateTo\"\n            id=\"dateTo\"\n            formControlName=\"dateTo\"\n            class=\"form-control fit-w text-left\"\n            placeholder=\"{{ 'Date to' | translate }}\"\n            bsDatepicker\n            [minDate]=\"dateFrom\"\n            (bsValueChange)=\"dateTo = $event\"\n            [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true, dateInputFormat: dateInputFormat }\"\n          />\n        </div>\n      </c8y-form-group>\n    </div>\n    <div class=\"p-16 d-flex separator-top gap-8\">\n      <button\n        title=\"{{ 'Clear selection' | translate }}\"\n        type=\"button\"\n        class=\"btn btn-default btn-sm flex-grow\"\n        (click)=\"clearFilter(); datefilter.isOpen = !datefilter.isOpen\"\n      >\n        {{ 'Clear`selection`' | translate }}\n      </button>\n      <button\n        [disabled]=\"!fgDatePicker.get('dateFrom').value && !fgDatePicker.get('dateTo').value\"\n        title=\"{{ 'Apply selection' | translate }}\"\n        type=\"submit\"\n        class=\"btn btn-primary btn-sm flex-grow\"\n        (click)=\"filter(); datefilter.isOpen = !datefilter.isOpen\"\n      >\n        {{ 'Apply`selection`' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n" }]
        }], propDecorators: { onDateSelected: [{
                type: Output
            }], placeholder: [{
                type: Input
            }], dateInputFormat: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 