import { booleanAttribute, Component, EventEmitter, HostBinding, HostListener, Input, Output, ViewEncapsulation, } from '@angular/core';
import { BaseStatesDirective } from '../base-states.directive';
import * as i0 from "@angular/core";
import * as i1 from "../base-states.directive";
import * as i2 from "@ngx-translate/core";
import * as i3 from "@ionic/angular";
import * as i4 from "../euim-avatar/euim-avatar.component";
import * as i5 from "../euim-avatar/euim-avatar-icon/euim-avatar-icon.component";
import * as i6 from "../atoms/euim-label/euim-label.component";
import * as i7 from "@angular/forms";
export class EuimToolbarDatepickerComponent {
    get cssClasses() {
        return this.getCssClasses();
    }
    constructor(baseStatesDirective, translate, modalController) {
        this.baseStatesDirective = baseStatesDirective;
        this.translate = translate;
        this.modalController = modalController;
        this.icon = 'calendar-clear';
        this.prevBtnClick = new EventEmitter();
        this.nextBtnClick = new EventEmitter();
        this.dateChanged = new EventEmitter();
        this.weekdays = [];
        this._dateTimeId = 'date';
        this.dateTimeId = crypto.randomUUID();
        this.modalId = crypto.randomUUID();
        this.currentDate = new Date();
        this.formattedDate = this.currentDate.toLocaleDateString();
    }
    async dismissModal() {
        const topModal = await this.modalController.getTop();
        if (topModal) {
            await this.modalController.dismiss();
        }
    }
    get dateTimeId() {
        return this._dateTimeId;
    }
    set dateTimeId(val) {
        this._dateTimeId = val;
    }
    ngOnInit() {
        if (!this.baseStatesDirective.color) {
            this.baseStatesDirective.color = 'primary';
        }
        this.loadWeekdaysTranslation(this.translate.currentLang);
        this.langChangeSubscription = this.translate.onLangChange.subscribe((event) => {
            this.currentLang = event.lang;
            this.loadWeekdaysTranslation(event.lang);
            this.formatDateAndWeekDay();
        });
        this.formatDateAndWeekDay();
    }
    ngOnDestroy() {
        if (this.langChangeSubscription) {
            this.langChangeSubscription.unsubscribe();
        }
    }
    getCssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('euim-toolbar-datepicker'),
        ].join(' ');
    }
    updateCurrentDate(date) {
        this.currentDate = (new Date(date));
        this.dateChanged.emit(this.currentDate);
        this.formattedDate = this.currentDate.toLocaleDateString();
        this.formatDateAndWeekDay();
    }
    calendarDateChanged(event) {
        const customEvent = event;
        if (customEvent.detail.value) {
            this.currentDate = (new Date(customEvent.detail.value));
            this.formattedDate = this.currentDate.toLocaleDateString();
            this.formatDateAndWeekDay();
            this.dateChanged.emit(this.currentDate);
        }
    }
    selectPrevDate() {
        if (this.selectDateBy === 'week') {
            this.currentDate.setDate(this.currentDate.getDate() - 7);
        }
        else {
            this.currentDate.setDate(this.currentDate.getDate() - 1);
        }
        this.formattedDate = this.currentDate.toLocaleDateString();
        this.formatDateAndWeekDay();
        this.selectedDate = this.currentDate.toISOString();
        this.prevBtnClick.emit(this.currentDate);
    }
    selectNextDate() {
        if (this.selectDateBy === 'week') {
            this.currentDate.setDate(this.currentDate.getDate() + 7);
        }
        else {
            this.currentDate.setDate(this.currentDate.getDate() + 1);
        }
        this.formattedDate = this.currentDate.toLocaleDateString();
        this.formatDateAndWeekDay();
        this.selectedDate = this.currentDate.toISOString();
        this.nextBtnClick.emit(this.currentDate);
    }
    loadWeekdaysTranslation(lang) {
        this.translate.get('euim.toolbar-datepicker.WEEKDAYS').subscribe((weekdays) => {
            this.weekdays = weekdays;
        });
    }
    formatDateAndWeekDay() {
        this.weekDayName = this.weekdays[this.currentDate.getDay()];
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuimToolbarDatepickerComponent, deps: [{ token: i1.BaseStatesDirective }, { token: i2.TranslateService }, { token: i3.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EuimToolbarDatepickerComponent, selector: "euim-toolbar-datepicker", inputs: { icon: "icon", title: "title", subTitle: "subTitle", euimPrevBtnDisabled: ["euimPrevBtnDisabled", "euimPrevBtnDisabled", booleanAttribute], euimNextBtnDisabled: ["euimNextBtnDisabled", "euimNextBtnDisabled", booleanAttribute], euimReadOnly: ["euimReadOnly", "euimReadOnly", booleanAttribute], selectDateBy: "selectDateBy" }, outputs: { prevBtnClick: "prevBtnClick", nextBtnClick: "nextBtnClick", dateChanged: "dateChanged" }, host: { listeners: { "window:popstate": "dismissModal($event)" }, properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ion-item class=\"euim-toolbar-datepicker__item\" color=\"branding\">\n    <euim-avatar  fill=\"clear\" slot=\"start\" >\n        <euim-avatar-icon>\n            <ion-icon [name]=\"icon\"\n                      class=\"euim-toolbar-datepicker__calendar\"></ion-icon>\n        </euim-avatar-icon>\n    </euim-avatar>\n    @if (!euimReadOnly){\n    <ion-datetime-button class=\"euim-toolbar-datepicker__datetime-button--hidden\"\n                         [datetime]=\"dateTimeId\">\n    </ion-datetime-button>\n    }\n    <div class=\"euim-toolbar-datepicker__datetime-button\" [id]=\"modalId\" [style.cursor]=\"(!euimReadOnly) ? 'pointer' : 'auto'\">\n        <ion-label class=\"euim-toolbar-datepicker__date\">\n            <div class=\"euim-toolbar-datepicker__title\"\n                 euimLabel\n                 euimLabelTitle\n                 euimLabelTruncate\n                 disabled=\"euimReadOnly\">{{!title ? weekDayName : title}}</div>\n\n            <div euimLabel\n                 euimLabelSubTitle\n                 euimLabelTruncate\n                 disabled=\"euimReadOnly\">{{!subTitle ? formattedDate : subTitle}}</div>\n        </ion-label>\n        @if (!euimReadOnly){\n            <ion-icon class=\"euim-toolbar-datepicker__datetime-caret\"\n                      name=\"caret-down\"></ion-icon>\n        }\n    </div>\n\n    @if (!euimReadOnly) {\n        <ion-buttons slot=\"end\">\n            <ion-button (click)=\"selectPrevDate()\"\n                        [disabled] = \"euimPrevBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button\">\n                <ion-icon name=\"chevron-back-circle\">\n                </ion-icon>\n            </ion-button>\n            <ion-button\n                        (click)=\"selectNextDate()\"\n                        [disabled]=\"euimNextBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button euim-toolbar-datepicker__nav-button--next\">\n                <ion-icon name=\"chevron-forward-circle\"></ion-icon>\n            </ion-button>\n        </ion-buttons>\n    }\n</ion-item>\n\n@if (!euimReadOnly){\n<ion-modal [keepContentsMounted]=\"true\"\n           [trigger]=\"modalId\">\n    <ng-template>\n        <ion-datetime\n            [showDefaultButtons]=\"true\"\n            (ionChange)=\"calendarDateChanged($event)\"\n            size=\"cover\"\n            [id]=\"dateTimeId\"\n            [locale]=\"currentLang\"\n            presentation=\"date\"\n            [(ngModel)]=\"selectedDate\"></ion-datetime>\n    </ng-template>\n</ion-modal>\n}\n", styles: [".euim-toolbar-datepicker{--inner-padding-end: var(--eui-s-xs)}.euim-toolbar-datepicker ion-item:has(ion-buttons ion-button ion-icon){--inner-padding-end: var(--eui-s-2xs)}.euim-toolbar-datepicker ion-item ion-buttons[slot=end]{margin-inline-start:0}.euim-toolbar-datepicker__datetime_icon{margin-left:var(--eui-s-l);margin-right:var(--eui-s-l);width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-toolbar-datepicker__datetime-button{display:flex;align-items:center;height:100%;width:100%;padding-top:var(--eui-s-s);padding-bottom:var(--eui-s-s)}.euim-toolbar-datepicker__datetime-button--hidden{display:none}.euim-toolbar-datepicker__datetime-button .euim-toolbar-datepicker__date{display:grid}.euim-toolbar-datepicker__datetime-caret{margin-left:var(--eui-s-xs)!important;margin-right:var(--eui-s-xs)!important;width:var(--eui-s-m);height:var(--eui-s-m);flex-shrink:0;color:var(--eui-c-branding-contrast)}.euim-toolbar-datepicker__nav-button ion-icon{width:var(--eui-is-l);height:var(--eui-is-l);color:var(--eui-c-branding-contrast)}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__calendar,.euim-toolbar-datepicker--primary .euim-label{color:var(--eui-c-branding-contrast)}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__datetime-button::part(native){background:var(--eui-c-branding);color:var(--eui-c-branding-contrast)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i3.IonDatetimeButton, selector: "ion-datetime-button", inputs: ["color", "datetime", "disabled", "mode"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "component", type: i4.EuimAvatarComponent, selector: "euim-avatar", inputs: ["color", "size", "fill", "variant", "borderColor"] }, { kind: "component", type: i5.EuimAvatarIconComponent, selector: "euim-avatar-icon" }, { kind: "component", type: i6.EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuimToolbarDatepickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'euim-toolbar-datepicker', encapsulation: ViewEncapsulation.None, hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'color',
                            ],
                        },
                    ], template: "<ion-item class=\"euim-toolbar-datepicker__item\" color=\"branding\">\n    <euim-avatar  fill=\"clear\" slot=\"start\" >\n        <euim-avatar-icon>\n            <ion-icon [name]=\"icon\"\n                      class=\"euim-toolbar-datepicker__calendar\"></ion-icon>\n        </euim-avatar-icon>\n    </euim-avatar>\n    @if (!euimReadOnly){\n    <ion-datetime-button class=\"euim-toolbar-datepicker__datetime-button--hidden\"\n                         [datetime]=\"dateTimeId\">\n    </ion-datetime-button>\n    }\n    <div class=\"euim-toolbar-datepicker__datetime-button\" [id]=\"modalId\" [style.cursor]=\"(!euimReadOnly) ? 'pointer' : 'auto'\">\n        <ion-label class=\"euim-toolbar-datepicker__date\">\n            <div class=\"euim-toolbar-datepicker__title\"\n                 euimLabel\n                 euimLabelTitle\n                 euimLabelTruncate\n                 disabled=\"euimReadOnly\">{{!title ? weekDayName : title}}</div>\n\n            <div euimLabel\n                 euimLabelSubTitle\n                 euimLabelTruncate\n                 disabled=\"euimReadOnly\">{{!subTitle ? formattedDate : subTitle}}</div>\n        </ion-label>\n        @if (!euimReadOnly){\n            <ion-icon class=\"euim-toolbar-datepicker__datetime-caret\"\n                      name=\"caret-down\"></ion-icon>\n        }\n    </div>\n\n    @if (!euimReadOnly) {\n        <ion-buttons slot=\"end\">\n            <ion-button (click)=\"selectPrevDate()\"\n                        [disabled] = \"euimPrevBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button\">\n                <ion-icon name=\"chevron-back-circle\">\n                </ion-icon>\n            </ion-button>\n            <ion-button\n                        (click)=\"selectNextDate()\"\n                        [disabled]=\"euimNextBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button euim-toolbar-datepicker__nav-button--next\">\n                <ion-icon name=\"chevron-forward-circle\"></ion-icon>\n            </ion-button>\n        </ion-buttons>\n    }\n</ion-item>\n\n@if (!euimReadOnly){\n<ion-modal [keepContentsMounted]=\"true\"\n           [trigger]=\"modalId\">\n    <ng-template>\n        <ion-datetime\n            [showDefaultButtons]=\"true\"\n            (ionChange)=\"calendarDateChanged($event)\"\n            size=\"cover\"\n            [id]=\"dateTimeId\"\n            [locale]=\"currentLang\"\n            presentation=\"date\"\n            [(ngModel)]=\"selectedDate\"></ion-datetime>\n    </ng-template>\n</ion-modal>\n}\n", styles: [".euim-toolbar-datepicker{--inner-padding-end: var(--eui-s-xs)}.euim-toolbar-datepicker ion-item:has(ion-buttons ion-button ion-icon){--inner-padding-end: var(--eui-s-2xs)}.euim-toolbar-datepicker ion-item ion-buttons[slot=end]{margin-inline-start:0}.euim-toolbar-datepicker__datetime_icon{margin-left:var(--eui-s-l);margin-right:var(--eui-s-l);width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-toolbar-datepicker__datetime-button{display:flex;align-items:center;height:100%;width:100%;padding-top:var(--eui-s-s);padding-bottom:var(--eui-s-s)}.euim-toolbar-datepicker__datetime-button--hidden{display:none}.euim-toolbar-datepicker__datetime-button .euim-toolbar-datepicker__date{display:grid}.euim-toolbar-datepicker__datetime-caret{margin-left:var(--eui-s-xs)!important;margin-right:var(--eui-s-xs)!important;width:var(--eui-s-m);height:var(--eui-s-m);flex-shrink:0;color:var(--eui-c-branding-contrast)}.euim-toolbar-datepicker__nav-button ion-icon{width:var(--eui-is-l);height:var(--eui-is-l);color:var(--eui-c-branding-contrast)}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__calendar,.euim-toolbar-datepicker--primary .euim-label{color:var(--eui-c-branding-contrast)}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__datetime-button::part(native){background:var(--eui-c-branding);color:var(--eui-c-branding-contrast)}\n"] }]
        }], ctorParameters: () => [{ type: i1.BaseStatesDirective }, { type: i2.TranslateService }, { type: i3.ModalController }], propDecorators: { icon: [{
                type: Input
            }], title: [{
                type: Input
            }], subTitle: [{
                type: Input
            }], euimPrevBtnDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euimNextBtnDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euimReadOnly: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], selectDateBy: [{
                type: Input
            }], prevBtnClick: [{
                type: Output
            }], nextBtnClick: [{
                type: Output
            }], dateChanged: [{
                type: Output
            }], cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], dismissModal: [{
                type: HostListener,
                args: ['window:popstate', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 