@libs-ui/components-datetime-picker 0.1.1-1

package/fesm2022/libs-ui-components-datetime-picker.mjs

@@ -0,0 +1,2024 @@
+import * as i0 from '@angular/core';
+import { signal, computed, input, model, output, inject, viewChild, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
+import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
+import { UtilsLanguageConstants, get, UtilsCache, getDayjs, UtilsHttpParamsRequestInstance, isEmpty, set, ERROR_MESSAGE_EMPTY_VALID } from '@libs-ui/utils';
+import * as i1 from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
+import { LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';
+import { LibsUiComponentsInputsInputComponent } from '@libs-ui/components-inputs-input';
+import dayjs from 'dayjs';
+import isoWeek from 'dayjs/plugin/isoWeek';
+import { returnListObject, returnDetailObject } from '@libs-ui/services-http-request';
+
+const getDateOptions = () => {
+    const dateOptions = {
+        [UtilsLanguageConstants.VI]: {
+            monthNames: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'],
+            ranges: { today: 'Hôm nay', yesterday: 'Hôm qua', _7days_ago: '7 ngày trước', _30days_ago: '30 ngày trước', this_month: 'Tháng này', last_month: 'Tháng trước', _3months_ago: '90 ngày trước' },
+            daysOfWeek: ['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'],
+            applyLabel: 'Lưu',
+            cancelLabel: 'Huỷ bỏ',
+            fromLabel: 'Từ',
+            toLabel: 'Đến',
+            customRangeLabel: 'Tùy Chỉnh',
+        },
+        [UtilsLanguageConstants.EN]: {
+            monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+            ranges: { today: 'Today', yesterday: 'Yesterday', _7days_ago: '7 days ago', _30days_ago: '30 days ago', this_month: 'This month', last_month: 'Last month', _3months_ago: '90 days ago' },
+            daysOfWeek: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+            applyLabel: 'Apply',
+            cancelLabel: 'Cancel',
+            fromLabel: 'From',
+            toLabel: 'To',
+            customRangeLabel: 'Customize',
+        },
+    };
+    return get(dateOptions, UtilsCache.getLang());
+};
+const defaultLocaleConfig = () => {
+    return {
+        direction: 'ltr',
+        separator: ' - ',
+        weekLabel: 'W',
+        applyLabel: 'Apply',
+        cancelLabel: 'Cancel',
+        clearLabel: 'Clear',
+        customRangeLabel: 'customRangeLabel',
+        daysOfWeek: [],
+        monthNames: [],
+        firstDay: 1,
+    };
+};
+const getDateRangeDefault = () => {
+    return {
+        today: [getDayjs().hour(0).minute(0).second(0).millisecond(0), getDayjs().hour(23).minute(59).second(59)],
+        yesterday: [getDayjs().subtract(1, 'days').hour(0).minute(0).second(0).millisecond(0), getDayjs().subtract(1, 'days').hour(23).minute(59).second(59)],
+        _7days_ago: [getDayjs().subtract(6, 'days').hour(0).second(0).minute(0).millisecond(0), getDayjs().hour(23).minute(59).second(59)],
+        _30days_ago: [getDayjs().subtract(29, 'days').hour(0).second(0).minute(0).millisecond(0), getDayjs().hour(23).minute(59).second(59)],
+        this_month: [getDayjs().startOf('month'), getDayjs().endOf('month')],
+        last_month: [getDayjs().subtract(1, 'month').startOf('month'), getDayjs().subtract(1, 'month').endOf('month')],
+        _3months_ago: [getDayjs().subtract(89, 'days').hour(0).second(0).minute(0).millisecond(0), getDayjs().hour(23).minute(59).second(59)],
+    };
+};
+const getDateOptionsDefault = () => ({ ...defaultLocaleConfig(), ...getDateOptions() });
+
+const getMonthsDefault = () => {
+    return [
+        {
+            id: 1,
+            label: 'i18n_january',
+            maxDays: 31,
+        },
+        {
+            id: 2,
+            label: 'i18n_february',
+            maxDays: 29,
+        },
+        {
+            id: 3,
+            label: 'i18n_march',
+            maxDays: 31,
+        },
+        {
+            id: 4,
+            label: 'i18n_april',
+            maxDays: 30,
+        },
+        {
+            id: 5,
+            label: 'i18n_may',
+            maxDays: 31,
+        },
+        {
+            id: 6,
+            label: 'i18n_june',
+            maxDays: 30,
+        },
+        {
+            id: 7,
+            label: 'i18n_july',
+            maxDays: 31,
+        },
+        {
+            id: 8,
+            label: 'i18n_august',
+            maxDays: 31,
+        },
+        {
+            id: 9,
+            label: 'i18n_september',
+            maxDays: 30,
+        },
+        {
+            id: 10,
+            label: 'i18n_october',
+            maxDays: 31,
+        },
+        {
+            id: 11,
+            label: 'i18n_november',
+            maxDays: 30,
+        },
+        {
+            id: 12,
+            label: 'i18n_december',
+            maxDays: 31,
+        },
+    ];
+};
+const getMonthsListConfig = (translate) => {
+    return {
+        type: 'text',
+        httpRequestData: signal({
+            objectInstance: returnListObject(getMonthsDefault()),
+            functionName: 'list',
+            argumentsValue: [],
+        }),
+        configTemplateText: signal({
+            fieldKey: 'id',
+            autoScrollToItemSelected: true,
+            getValue: (item) => {
+                const label = translate.instant(item.label || ' ', { year: ' ' });
+                return label.substring(0, UtilsCache.getLang() === UtilsLanguageConstants.VI ? label.length : 3);
+            },
+            getClassIncludePopover: () => 'libs-ui-font-h5r',
+        }),
+    };
+};
+const getMonthsDetailById = () => {
+    return {
+        objectInstance: returnDetailObject(UtilsHttpParamsRequestInstance(), getMonthsDefault()),
+        functionName: 'detailByData',
+        argumentsValue: [],
+        guideAutoUpdateArgumentsValue: {
+            paging: {},
+            detailById: {
+                fieldUpdate: '[0]',
+                fieldGetValue: '',
+                subFieldUpdate: 'keys',
+            },
+        },
+    };
+};
+const getYearsListConfig = (listOfYears = []) => {
+    return {
+        type: 'text',
+        httpRequestData: signal({
+            objectInstance: returnListObject(listOfYears),
+            functionName: 'list',
+            argumentsValue: [],
+        }),
+        configTemplateText: signal({
+            fieldKey: 'id',
+            autoScrollToItemSelected: true,
+            getValue: (item) => {
+                return item.label;
+            },
+            getClassIncludeTooltip: () => 'libs-ui-font-h5r',
+        }),
+    };
+};
+const getYearsDetailById = (listOfYears = []) => {
+    return {
+        objectInstance: returnDetailObject(UtilsHttpParamsRequestInstance(), listOfYears),
+        functionName: 'detailByData',
+        argumentsValue: [],
+        guideAutoUpdateArgumentsValue: {
+            paging: {},
+            detailById: {
+                fieldUpdate: '[0]',
+                fieldGetValue: '',
+                subFieldUpdate: 'keys',
+            },
+        },
+    };
+};
+
+const DEFAULT_MIN_YEAR = 1945;
+const DEFAULT_MAX_YEAR = getDayjs().year() + 5;
+
+var SideEnum;
+(function (SideEnum) {
+    SideEnum["left"] = "left";
+    SideEnum["right"] = "right";
+})(SideEnum || (SideEnum = {}));
+
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+dayjs.extend(isoWeek);
+class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
+    /** PROPERTY */
+    sideEnum = SideEnum;
+    calendarVariables = signal({ left: signal({}), right: signal({}) });
+    timepickerVariables = signal({ left: signal({ selectedHour: 0, selectedMinute: 0 }), right: signal({ selectedHour: 23, selectedMinute: 59 }) });
+    disableMonth = signal({ left: signal([]), right: signal([]) });
+    today = signal(getDayjs());
+    listKeyFromSelected = signal({ month: undefined, year: undefined });
+    listKeyToSelected = signal({ month: undefined, year: undefined });
+    checkShowListDropdown = signal({});
+    selectedQuickRange = signal('');
+    leftCalendar = signal({});
+    rightCalendar = signal({});
+    listMonthsConfig = signal(undefined);
+    monthHttpDetailConfig = signal(getMonthsDetailById());
+    listLeftYearConfig = signal(undefined);
+    listRightYearConfig = signal(undefined);
+    listYearConfig = signal(undefined);
+    leftYearHttpDetailConfig = signal(undefined);
+    rightYearHttpDetailConfig = signal(undefined);
+    timePickerError = signal(false);
+    computedDisplayTimeLeft = computed(() => this.computedDisplayTime({ selectedHour: this.timepickerValueItem().lefthour(), selectedMinute: this.timepickerValueItem().leftminute() }));
+    computedDisplayTimeRight = computed(() => this.computedDisplayTime({ selectedHour: this.timepickerValueItem().righthour(), selectedMinute: this.timepickerValueItem().rightminute() }));
+    computedDisplayTimeLeftInputHour = computed(() => this.computedDisplayTimeInput(SideEnum.left, 'hour'));
+    computedDisplayTimeLeftInputMinute = computed(() => this.computedDisplayTimeInput(SideEnum.left, 'minute'));
+    computedDisplayTimeRightInputHour = computed(() => this.computedDisplayTimeInput(SideEnum.right, 'hour'));
+    computedDisplayTimeRightInputMinute = computed(() => this.computedDisplayTimeInput(SideEnum.right, 'minute'));
+    timepickerValueItem = signal({ lefthour: signal(0), leftminute: signal(0), righthour: signal(0), rightminute: signal(0) });
+    functionControls = new Map();
+    pickingDate = signal(false);
+    isShown = signal(false);
+    nowHoveredDate = signal(null);
+    timePickerIncrement = signal(1);
+    selectedLabel = signal(undefined);
+    keyCodeBackspace = signal(false);
+    checkBackspaceFocus = signal({ lefthour: signal(1), leftminute: signal(1), righthour: signal(1), rightminute: signal(1) });
+    isZero = signal(undefined);
+    oldDate = signal({ start: dayjs(0), end: dayjs(0) });
+    isSelectedData = signal({ leftmonth: false, leftyear: false, rightmonth: false, rightyear: false });
+    splitPickerDate = signal({ start: signal({ month: 0, year: 0, day: 0, hour: 0, minute: 0 }), end: signal({ month: 0, year: 0, day: 0, hour: 23, minute: 59 }) });
+    /** INPUT */
+    quickRangesArray = input([]);
+    zIndex = input(1200, { transform: (value) => value ?? 1200 });
+    classInclude = input('');
+    isSingle = input(false);
+    showDropdownsSelect = input(true);
+    hasTimePicker = input(true);
+    flagMouse = input({ isMouseEnter: false, isMouseEnterContent: false });
+    dateOptions = input({ ...defaultLocaleConfig(), ...getDateOptions() });
+    autoApply = input(false);
+    hasSecondPicker = input(false);
+    showRangeLabelOnInput = input(undefined);
+    startDate = model(getDayjs().startOf('day'));
+    endDate = model(getDayjs().endOf('day'));
+    minDate = input(undefined, { transform: this.transformMinMaxDate.bind(this) });
+    maxDate = input(undefined, { transform: this.transformMinMaxDate.bind(this) });
+    listYearHiddenInputSearch = input(true, { transform: (value) => value ?? true });
+    /** OUTPUT */
+    outChangStageFlagMouse = output();
+    // readonly outStartDateChanged = output<{ startDate: Dayjs | undefined }>();
+    // readonly outEndDateChanged = output<{ endDate: Dayjs | undefined }>();
+    outPickerDate = output();
+    // readonly outRangeClicked: EventEmitter<IRangesClicked> = new EventEmitter();
+    outCancel = output();
+    outUpdateWidth = output();
+    outFunctionsControl = output();
+    /** INJECTION */
+    translate = inject(TranslateService);
+    pickerContainer = viewChild('pickerContainer');
+    constructor() {
+        this.listMonthsConfig.set(getMonthsListConfig(this.translate));
+        effect(() => {
+            const oldStart = getDayjs({ date: this.startDate()?.clone() });
+            const oldEnd = getDayjs({ date: this.endDate()?.clone() });
+            untracked(() => {
+                this.oldDate.set({ start: oldStart, end: oldEnd });
+            });
+        });
+    }
+    ngOnInit() {
+        const startDate = getDayjs({ date: this.startDate()?.clone() });
+        const endDate = getDayjs({ date: this.endDate()?.clone() });
+        this.splitPickerDate.update((current) => {
+            current.start.update((sideCurrent) => {
+                sideCurrent.day = (startDate ?? getDayjs().startOf('day')).date();
+                return sideCurrent;
+            });
+            current.end.update((sideCurrent) => {
+                sideCurrent.day = (endDate ?? getDayjs().endOf('day')).date();
+                return sideCurrent;
+            });
+            return current;
+        });
+        if (startDate) {
+            this.updateElement();
+        }
+        if (startDate && this.hasTimePicker()) {
+            this.setStartDate(startDate);
+            this.renderTimePicker(SideEnum.left);
+        }
+        if (endDate && this.hasTimePicker()) {
+            this.setEndDate(endDate);
+            this.renderTimePicker(SideEnum.right);
+        }
+        this.buildConfigYear(SideEnum.left);
+        this.buildConfigYear(SideEnum.right, startDate?.year());
+        this.updateMonthsInView();
+        this.renderCalendar(SideEnum.left);
+        if ((getDayjs({ date: this.maxDate() })?.year() ?? DEFAULT_MAX_YEAR) < (startDate?.year() || 0)) {
+            this.handlerSelectedDropdown({ key: getDayjs({ date: this.maxDate() })?.year() }, SideEnum.left + 'year');
+        }
+        if (!this.isSingle()) {
+            this.renderCalendar(SideEnum.right);
+            if ((getDayjs({ date: this.maxDate() })?.year() ?? DEFAULT_MAX_YEAR) < (endDate?.year() || 0)) {
+                this.handlerSelectedDropdown({ key: getDayjs({ date: this.maxDate() })?.year() }, SideEnum.right + 'year');
+            }
+        }
+        // this.renderRanges();
+        this.formatMonthYear();
+        this.outUpdateWidth.emit(1);
+        this.updateElement();
+        this.timepickerValueItem.set({
+            lefthour: signal(this.timepickerVariables().left().selectedHour),
+            righthour: signal(this.timepickerVariables().right().selectedHour),
+            leftminute: signal(this.timepickerVariables().left().selectedMinute),
+            rightminute: signal(this.timepickerVariables().right().selectedMinute),
+        });
+        // this.outFunctionsControl.emit({ buildDefaultRange: this.buildDefaultRange.bind(this), applyToSelect: this.applyToSelect.bind(this) })
+    }
+    buildConfigYear(side, startYear) {
+        const minDate = getDayjs({ date: this.minDate() });
+        const maxDate = getDayjs({ date: this.maxDate() });
+        const listLeftYear = [];
+        const listRightYear = [];
+        if (side === SideEnum.left) {
+            const start = maxDate?.year() ?? DEFAULT_MAX_YEAR;
+            const end = minDate?.year() ?? DEFAULT_MIN_YEAR;
+            for (let i = start; i >= end; i--) {
+                listLeftYear.push({
+                    id: i,
+                    label: `${i}`,
+                });
+            }
+            this.listLeftYearConfig.set(getYearsListConfig(listLeftYear));
+            this.leftYearHttpDetailConfig.set(getYearsDetailById(listLeftYear));
+            return;
+        }
+        const start = maxDate?.year() ?? DEFAULT_MAX_YEAR;
+        const end = startYear ?? minDate?.year() ?? getDayjs().year();
+        for (let i = start; i >= end; i--) {
+            listRightYear.push({
+                id: i,
+                label: `${i}`,
+            });
+        }
+        this.listRightYearConfig.set(getYearsListConfig(listRightYear));
+        this.rightYearHttpDetailConfig.set(getYearsDetailById(listRightYear));
+    }
+    handlerChangeFlagMouse(flagMouse) {
+        this.outChangStageFlagMouse.emit(flagMouse);
+    }
+    updateStartEndDate(date) {
+        date = getDayjs({ date });
+        if (this.endDate() || date.isBefore(getDayjs({ date: this.startDate() }), 'day')) {
+            if (this.hasTimePicker()) {
+                date = this.getDateWithTime(date, SideEnum.left);
+            }
+            this.endDate.set(undefined);
+            this.setStartDate(getDayjs({ date: date.clone() }));
+            return;
+        }
+        if (!this.endDate() && this.startDate() && date.isBefore(getDayjs({ date: this.startDate() }))) {
+            this.setEndDate(getDayjs({ date: this.startDate()?.clone() }));
+            return;
+        }
+        if (this.hasTimePicker()) {
+            date = getDayjs({ date: this.getDateWithTime(date, SideEnum.right) });
+        }
+        if (!date.isBefore(getDayjs({ date: this.startDate() }), 'day')) {
+            this.setEndDate(getDayjs({ date: date.clone() }));
+        }
+        if (this.autoApply()) {
+            this.calculateSelectedLabel();
+        }
+    }
+    calculateSelectedLabel() {
+        this.updateElement();
+    }
+    formatMonthYear() {
+        const month = (this.calendarVariables().left().dropdowns?.()?.currentMonth ?? 0) + 1;
+        this.listKeyFromSelected.update((current) => {
+            current.month = month;
+            current.year = this.calendarVariables().left().dropdowns?.()?.currentYear;
+            return current;
+        });
+        if (this.isSingle()) {
+            this.isSelectedData.set({ leftmonth: true, leftyear: true, rightmonth: true, rightyear: true });
+            return;
+        }
+        const rightMonth = (this.calendarVariables().right().dropdowns?.()?.currentMonth ?? 0) + 1;
+        this.listKeyToSelected.update((current) => {
+            current.month = rightMonth;
+            current.year = this.calendarVariables().right().dropdowns?.()?.currentYear;
+            return current;
+        });
+        this.isSelectedData.set({ leftmonth: true, leftyear: true, rightmonth: true, rightyear: true });
+    }
+    setStartDate(startDate) {
+        if (!this.startDate()) {
+            return;
+        }
+        if (typeof startDate === 'string') {
+            this.startDate.set(getDayjs({ date: dayjs(startDate, this.dateOptions().format), returnDayjsIfConfigDateNotExist: true }));
+        }
+        if (typeof startDate === 'object') {
+            this.pickingDate.set(true);
+            this.startDate.set(getDayjs({ date: startDate, returnDayjsIfConfigDateNotExist: true }));
+        }
+        if (!this.hasTimePicker()) {
+            this.pickingDate.set(true);
+            this.startDate.set(getDayjs({ date: this.startDate()?.startOf('day') }));
+        }
+        this.setStartDateInTimePicker();
+        if (this.minDate() && this.startDate()?.isBefore(this.minDate())) {
+            this.startDate.set(getDayjs({ date: this.minDate() })?.clone());
+            this.setStartDateInTimePicker();
+        }
+        if (this.maxDate() && this.startDate()?.isAfter(this.maxDate())) {
+            this.startDate.set(getDayjs({ date: this.maxDate() })?.clone());
+            this.setStartDateInTimePicker();
+        }
+        if (!this.isShown()) {
+            this.updateElement();
+        }
+        // this.outStartDateChanged.emit({ startDate: this.startDate() });
+        this.updateMonthsInView();
+    }
+    setStartDateInTimePicker() {
+        if (!this.hasTimePicker() || !this.timePickerIncrement()) {
+            return;
+        }
+        this.startDate.update((current) => {
+            if (!current) {
+                return;
+            }
+            current.minute(Math.round(current.minute() / this.timePickerIncrement()) * this.timePickerIncrement());
+            return current;
+        });
+    }
+    setEndDate(endDate) {
+        if (typeof endDate === 'string') {
+            this.endDate.set(getDayjs({ date: dayjs(endDate, this.dateOptions().format), returnDayjsIfConfigDateNotExist: true }));
+        }
+        if (typeof endDate === 'object') {
+            this.pickingDate.set(false);
+            this.endDate.set(getDayjs({ date: dayjs(endDate), returnDayjsIfConfigDateNotExist: true }));
+        }
+        if (!this.endDate() || !this.startDate()) {
+            return this.updateMonthsInView();
+        }
+        if (!this.hasTimePicker()) {
+            this.pickingDate.set(false);
+            this.endDate.set(this.endDate()?.add(1, 'd').startOf('day').subtract(1, 'second'));
+        }
+        if (this.hasTimePicker() && this.timePickerIncrement()) {
+            this.endDate.update((current) => {
+                if (!current) {
+                    return;
+                }
+                current.minute(Math.round(current.minute() / this.timePickerIncrement()) * this.timePickerIncrement());
+                return current;
+            });
+        }
+        if (this.endDate()?.isBefore(this.startDate())) {
+            this.endDate.set(this.startDate()?.clone());
+        }
+        if (this.maxDate() && this.endDate()?.isAfter(this.maxDate())) {
+            this.endDate.set(getDayjs({ date: this.maxDate() })?.clone());
+        }
+        // this.outEndDateChanged.emit({ endDate: this.endDate() });
+        this.updateMonthsInView();
+    }
+    handlerHoverDate(event, side, row, col) {
+        event.stopPropagation();
+        const leftCalDate = this.calendarVariables().left().calendar?.[row][col];
+        const rightCalDate = this.calendarVariables().right().calendar?.[row][col];
+        if (!this.pickingDate || !rightCalDate || !leftCalDate) {
+            return;
+        }
+        this.nowHoveredDate.set(side === SideEnum.left ? leftCalDate : rightCalDate);
+        this.renderCalendar(SideEnum.left);
+        this.renderCalendar(SideEnum.right);
+    }
+    getDisable(type) {
+        const minDate = getDayjs({ date: this.minDate() });
+        const maxDate = getDayjs({ date: this.maxDate() });
+        if (type === 'left') {
+            this.disableMonth().left.set([]);
+            if (minDate && minDate?.year() === this.listKeyFromSelected().year) {
+                for (let i = 1; i < minDate?.month() + 1; i++) {
+                    this.disableMonth().left.update((current) => {
+                        current.push(i);
+                        return current;
+                    });
+                }
+            }
+            if (maxDate && maxDate?.year() === this.listKeyFromSelected().year) {
+                for (let i = maxDate?.month() + 2; i < 13; i++) {
+                    this.disableMonth().left.update((current) => {
+                        current.push(i);
+                        return current;
+                    });
+                }
+            }
+            return;
+        }
+        this.disableMonth().right.set([]);
+        if (minDate && minDate?.year() === this.listKeyToSelected().year) {
+            for (let i = 1; i < minDate?.month() + 1; i++) {
+                this.disableMonth().right.update((current) => {
+                    current.push(i);
+                    return current;
+                });
+            }
+        }
+        if (maxDate && maxDate?.year() === this.listKeyToSelected().year) {
+            for (let i = maxDate?.month() + 2; i < 13; i++) {
+                this.disableMonth().right.update((current) => {
+                    current.push(i);
+                    return current;
+                });
+            }
+        }
+        if (Number(this.listKeyFromSelected().year) === Number(this.listKeyToSelected().year)) {
+            for (let i = 1; i <= Number(this.listKeyFromSelected().month); i++) {
+                this.disableMonth().right.update((current) => {
+                    current.push(i);
+                    return current;
+                });
+            }
+        }
+    }
+    handlerClickPrev(side) {
+        if (side === SideEnum.left && this.leftCalendar().month) {
+            this.leftCalendar.update((current) => {
+                current.month = current.month?.subtract(1, 'month');
+                return current;
+            });
+            this.listKeyFromSelected.update((current) => {
+                current.month = (this.leftCalendar().month?.month() ?? 0) + 1;
+                current.year = this.leftCalendar().month?.year();
+                return current;
+            });
+            return this.updateCalendars();
+        }
+        this.rightCalendar.update((current) => {
+            current.month = current.month?.subtract(1, 'month');
+            return current;
+        });
+        this.listKeyToSelected.update((current) => {
+            current.month = (this.rightCalendar().month?.month() ?? 0) + 1;
+            current.year = this.rightCalendar().month?.year();
+            return current;
+        });
+        this.getDisable('right');
+        this.updateCalendars();
+    }
+    handlerClickNext(side) {
+        if (side === SideEnum.left) {
+            this.leftCalendar.update((current) => {
+                current.month = current.month?.add(1, 'month');
+                return current;
+            });
+            this.listKeyFromSelected.update((current) => {
+                current.month = (this.leftCalendar().month?.month() ?? 0) + 1;
+                current.year = this.leftCalendar().month?.year();
+                return current;
+            });
+            if (this.listKeyFromSelected().month === this.listKeyToSelected().month && this.listKeyFromSelected().year === this.listKeyToSelected().year) {
+                this.rightCalendar.update((current) => {
+                    current.month = current.month?.add(1, 'month');
+                    return current;
+                });
+                this.listKeyToSelected.update((current) => {
+                    current.month = (this.rightCalendar().month?.month() ?? 0) + 1;
+                    current.year = this.rightCalendar().month?.year();
+                    return current;
+                });
+            }
+            this.getDisable('right');
+            return this.updateCalendars();
+        }
+        this.rightCalendar.update((current) => {
+            current.month = current.month?.add(1, 'month');
+            return current;
+        });
+        this.listKeyToSelected.update((current) => {
+            current.month = (this.rightCalendar().month?.month() ?? 0) + 1;
+            current.year = this.rightCalendar().month?.year();
+            return current;
+        });
+        this.updateCalendars();
+    }
+    handlerPickerDate(event, side, row, col) {
+        event.stopPropagation();
+        if (event.target?.tagName === 'TD') {
+            if (event.target.classList && !event.target.classList.contains('available')) {
+                return;
+            }
+        }
+        if (event.target.tagName === 'SPAN') {
+            if (event.target.parentElement && event.target.parentElement.classList && !event.target.parentElement.classList.contains('available')) {
+                return;
+            }
+        }
+        if (!this.dateOptions().customRangeLabel) {
+            return;
+        }
+        if (this.quickRangesArray().length) {
+            this.selectedQuickRange.set(this.dateOptions().customRangeLabel);
+        }
+        const date = side === SideEnum.left ? this.leftCalendar().calendar?.[row][col] : this.rightCalendar().calendar?.[row][col];
+        if (!date) {
+            return;
+        }
+        this.splitPickerDate.update((current) => {
+            current[side === SideEnum.left ? 'start' : 'end'].update((sideCurrent) => {
+                sideCurrent.day = date.date();
+                return sideCurrent;
+            });
+            return current;
+        });
+        this.updateStartEndDate(date);
+        if (this.isSingle() && this.startDate()) {
+            this.setEndDate(this.startDate());
+            this.updateElement();
+            if (this.autoApply()) {
+                this.handlerClickApply();
+            }
+        }
+        this.updateView();
+        if (this.autoApply() && this.startDate() && this.endDate()) {
+            this.handlerClickApply();
+        }
+    }
+    handlerClickApply(event) {
+        event?.stopPropagation();
+        // this.validate();
+        // if (!this.validate()) {
+        //   return;
+        // }
+        if (this.hasTimePicker()) {
+            this.setTimeInput(SideEnum.left);
+            this.setTimeInput(SideEnum.right);
+        }
+        this.calculateSelectedLabel();
+        if (this.selectedLabel()) {
+            this.outPickerDate.emit({ displayLabel: this.selectedLabel(), startDate: this.startDate(), endDate: this.endDate(), detailDatePicker: this.splitPickerDate() });
+        }
+    }
+    handlerClickCancel(event) {
+        event.stopPropagation();
+        this.startDate.set(dayjs(0));
+        this.endDate.set(dayjs(0));
+        this.outCancel.emit('');
+    }
+    handlerFunctionControl(event, type) {
+        this.functionControls.set(type, event);
+    }
+    handlerSelectedDropdown(event, type) {
+        this.outChangStageFlagMouse.emit({
+            isMouseEnter: false,
+            isMouseEnterContent: false,
+            isContainerHasScroll: false,
+        });
+        if (!event) {
+            return;
+        }
+        switch (type) {
+            case `${SideEnum.left}month`:
+            case `${SideEnum.right}month`:
+                this.updateMonthSelect(event, type);
+                break;
+            case `${SideEnum.left}year`:
+            case `${SideEnum.right}year`:
+                this.updateYearSelect(event, type);
+                break;
+            default:
+                break;
+        }
+        this.splitPickerDate.update((current) => {
+            if (type === `${SideEnum.left}month` || type === `${SideEnum.left}year`) {
+                current.start.update((start) => {
+                    if (type === `${SideEnum.left}month`) {
+                        start.month = event.key;
+                    }
+                    if (type === `${SideEnum.left}year`) {
+                        start.year = event.key;
+                    }
+                    return start;
+                });
+                return current;
+            }
+            current.end.update((end) => {
+                if (type === `${SideEnum.right}month`) {
+                    end.month = event.key;
+                }
+                if (type === `${SideEnum.right}year`) {
+                    end.year = event.key;
+                }
+                return end;
+            });
+            return current;
+        });
+    }
+    updateMonthSelect(event, type) {
+        const side = type.includes(SideEnum.left) ? SideEnum.left : SideEnum.right;
+        const year = this.calendarVariables()[side]().dropdowns?.()?.currentYear || getDayjs().year();
+        const month = Number(event.key) - 1;
+        if (side === SideEnum.left) {
+            if (this.isSelectedData().leftmonth) {
+                this.isSelectedData.update((current) => {
+                    current.leftmonth = false;
+                    return current;
+                });
+                this.getDisable('right');
+                return;
+            }
+            this.listKeyFromSelected.update((current) => {
+                current.month = event.key;
+                return current;
+            });
+            if (Number(event.key) >= Number(this.listKeyFromSelected().month) && Number(this.listKeyFromSelected().year) === Number(this.listKeyToSelected().year)) {
+                if (Number(event.key) <= 11) {
+                    this.listKeyToSelected.update((current) => {
+                        current.month = Number(event.key) + 1;
+                        return current;
+                    });
+                }
+                if (Number(event.key) === 12) {
+                    this.listKeyToSelected.update((current) => {
+                        current.month = 1;
+                        current.year += 1;
+                        return current;
+                    });
+                }
+            }
+        }
+        if (side === SideEnum.right) {
+            if (this.isSelectedData().rightmonth) {
+                this.isSelectedData.update((current) => {
+                    current.rightmonth = false;
+                    return current;
+                });
+                this.getDisable('right');
+                return;
+            }
+            this.listKeyToSelected.update((current) => {
+                current.month = event.key;
+                return current;
+            });
+        }
+        this.functionControls.get(type)?.removeList();
+        this.getDisable('right');
+        this.monthOrYearChanged(month, year, side);
+    }
+    updateYearSelect(event, type) {
+        const side = type.includes(SideEnum.left) ? SideEnum.left : SideEnum.right;
+        if (side === SideEnum.left) {
+            if (this.isSelectedData()?.leftyear) {
+                this.isSelectedData.update((current) => {
+                    current.leftyear = false;
+                    return current;
+                });
+                this.getDisable('left');
+                // this.SetListYearRight(this.listViewKeySelectedYear as number);
+                this.functionControls.get(type)?.removeList();
+                return;
+            }
+            this.listKeyFromSelected.update((current) => {
+                current.year = event.key;
+                return current;
+            });
+            if (this.listKeyFromSelected().year && this.listKeyToSelected().year && this.listKeyFromSelected().year >= this.listKeyToSelected().year) {
+                this.listKeyToSelected.update((current) => {
+                    current.year = event.key;
+                    return current;
+                });
+                if (this.listKeyFromSelected().month && Number(this.listKeyFromSelected().month) <= 11) {
+                    this.listKeyToSelected.update((current) => {
+                        current.month = Number(this.listKeyFromSelected().month) + 1;
+                        return current;
+                    });
+                }
+                if (this.listKeyFromSelected().month && this.listKeyFromSelected().month === 12) {
+                    this.listKeyToSelected.update((current) => {
+                        current.month = Number(this.listKeyFromSelected().month);
+                        return current;
+                    });
+                }
+            }
+            this.getDisable('left');
+            this.buildConfigYear(SideEnum.right, this.listKeyFromSelected().year);
+            this.functionControls.get(type)?.removeList();
+        }
+        if (side === SideEnum.right) {
+            if (this.isSelectedData().rightyear) {
+                this.isSelectedData.update((current) => {
+                    current.rightyear = false;
+                    return current;
+                });
+                this.getDisable('right');
+                return;
+            }
+            this.listKeyToSelected.update((current) => {
+                current.year = event.key;
+                return current;
+            });
+            if (this.listKeyFromSelected().year && this.listKeyToSelected().year && this.listKeyFromSelected().year >= this.listKeyToSelected().year) {
+                if (this.listKeyFromSelected().month && Number(this.listKeyFromSelected().month) <= 11) {
+                    this.listKeyToSelected.update((current) => {
+                        current.month = Number(this.listKeyFromSelected().month) + 1;
+                        return current;
+                    });
+                }
+                if (this.listKeyFromSelected().month && this.listKeyFromSelected().month === 12) {
+                    this.listKeyToSelected.update((current) => {
+                        current.month = Number(this.listKeyFromSelected().month);
+                        return current;
+                    });
+                }
+            }
+        }
+        this.getDisable('right');
+        let month = getDayjs().month();
+        if (side === SideEnum.right && this.listKeyFromSelected().month) {
+            month = Number(this.listKeyFromSelected().month) - 1;
+        }
+        if (side === SideEnum.left && this.listKeyFromSelected().month) {
+            month = Number(this.listKeyFromSelected().month) - 1;
+        }
+        const year = Number(event.key);
+        this.monthOrYearChanged(month, year, side);
+    }
+    monthOrYearChanged(month, year, side) {
+        const isLeft = side === SideEnum.left;
+        const minDate = getDayjs({ date: this.minDate() });
+        const maxDate = getDayjs({ date: this.maxDate() });
+        if (minDate && (year < minDate?.year() || (year === minDate?.year() && month < minDate?.month()))) {
+            month = minDate?.month();
+            year = minDate?.year();
+        }
+        if (maxDate && (year > maxDate?.year() || (year === maxDate?.year() && month > maxDate?.month()))) {
+            month = maxDate?.month();
+            year = maxDate?.year();
+        }
+        const dropdowns = this.calendarVariables()[side]().dropdowns;
+        if (dropdowns?.()) {
+            dropdowns.update((current) => {
+                current.currentYear = year;
+                current.currentMonth = month;
+                return current;
+            });
+        }
+        if (isLeft && this.leftCalendar().month) {
+            this.leftCalendar.update((current) => {
+                current.month = current.month?.month(month).year(year);
+                return current;
+            });
+            return this.updateCalendars();
+        }
+        if (month === 12) {
+            this.rightCalendar.update((current) => {
+                current.month = current.month?.clone().add(1, 'month');
+                return current;
+            });
+            return this.updateCalendars();
+        }
+        this.rightCalendar.update((current) => {
+            current.month = current.month?.month(month).year(year);
+            return current;
+        });
+        this.updateCalendars();
+    }
+    handlerInputEvent(event, type) {
+        if (event.keyCode !== 8) {
+            event.keyCode &&
+                this.checkBackspaceFocus.update((current) => {
+                    current[type].set(1);
+                    return current;
+                });
+            this.keyCodeBackspace.set(false);
+            return;
+        }
+        this.keyCodeBackspace.set(true);
+        switch (type) {
+            case 'leftminute':
+                if (isEmpty(this.timepickerValueItem().leftminute())) {
+                    if (this.checkBackspaceFocus()[type]() === 1) {
+                        this.checkBackspaceFocus.update((current) => {
+                            current[type].set(current[type]() + 1);
+                            return current;
+                        });
+                        return;
+                    }
+                    this.checkBackspaceFocus.update((current) => {
+                        current[type].set(1);
+                        return current;
+                    });
+                    this.functionControls.get(`${SideEnum.left}hour`)?.focus();
+                }
+                break;
+            case 'rightminute':
+                if (isEmpty(this.timepickerValueItem().rightminute())) {
+                    if (this.checkBackspaceFocus()[type]() === 1) {
+                        this.checkBackspaceFocus.update((current) => {
+                            current[type].set(current[type]() + 1);
+                            return current;
+                        });
+                        return;
+                    }
+                    this.checkBackspaceFocus.update((current) => {
+                        current[type].set(1);
+                        return current;
+                    });
+                    this.functionControls.get(`${SideEnum.right}hour`)?.focus();
+                }
+                break;
+        }
+    }
+    handlerFocusAndBlurTime(event, type) {
+        if (event.name === 'focus') {
+            return;
+        }
+        const eventInput = event.event;
+        const target = eventInput.target;
+        switch (type) {
+            case 'lefthour':
+                this.timepickerVariables().left.update((current) => {
+                    current.selectedHour = !isEmpty(this.timepickerValueItem().lefthour()) ? this.timepickerValueItem().lefthour() : 0;
+                    return current;
+                });
+                if (Number(this.timepickerValueItem().lefthour()) === 0 || isEmpty(this.timepickerValueItem().lefthour())) {
+                    this.timepickerValueItem.update((current) => {
+                        current.lefthour.set(0);
+                        return current;
+                    });
+                    target.value = '00';
+                    break;
+                }
+                if (Number(this.timepickerValueItem().lefthour()) < 10) {
+                    target.value = `0${Number(this.timepickerValueItem().lefthour())}`;
+                }
+                break;
+            case 'righthour':
+                this.timepickerVariables().right.update((current) => {
+                    current.selectedHour = !isEmpty(this.timepickerValueItem().righthour()) ? this.timepickerValueItem().righthour() : 0;
+                    return current;
+                });
+                if (Number(this.timepickerValueItem().righthour()) === 0 || isEmpty(this.timepickerValueItem().righthour())) {
+                    this.timepickerValueItem.update((current) => {
+                        current.righthour.set(0);
+                        return current;
+                    });
+                    target.value = '00';
+                    break;
+                }
+                if (Number(this.timepickerValueItem().righthour()) < 10) {
+                    target.value = `0${Number(this.timepickerValueItem().righthour())}`;
+                }
+                break;
+            case 'leftminute':
+                this.timepickerVariables().left.update((current) => {
+                    current.selectedMinute = !isEmpty(this.timepickerValueItem().leftminute()) ? this.timepickerValueItem().leftminute() : 0;
+                    return current;
+                });
+                if (Number(this.timepickerValueItem().leftminute()) === 0 || isEmpty(this.timepickerValueItem().leftminute())) {
+                    this.timepickerValueItem.update((current) => {
+                        current.leftminute.set(0);
+                        return current;
+                    });
+                    target.value = '00';
+                    break;
+                }
+                if (Number(this.timepickerValueItem().leftminute()) < 10) {
+                    target.value = `0${Number(this.timepickerValueItem().leftminute())}`;
+                }
+                break;
+            case 'rightminute':
+                this.timepickerVariables().right.update((current) => {
+                    current.selectedMinute = !isEmpty(this.timepickerValueItem().rightminute()) ? this.timepickerValueItem().rightminute() : 0;
+                    return current;
+                });
+                if (Number(this.timepickerValueItem().rightminute()) === 0 || isEmpty(this.timepickerValueItem().rightminute())) {
+                    this.timepickerValueItem.update((current) => {
+                        current.rightminute.set(0);
+                        return current;
+                    });
+                    target.value = '00';
+                    break;
+                }
+                if (Number(this.timepickerValueItem().rightminute()) < 10) {
+                    target.value = `0${Number(this.timepickerValueItem().rightminute())}`;
+                }
+                break;
+        }
+    }
+    handlerChangeTimeValue(event, type) {
+        this.timepickerValueItem.update((current) => {
+            current[type].set(event);
+            return current;
+        });
+        const side = type.includes(SideEnum.left) ? SideEnum.left : SideEnum.right;
+        const attr = type.includes('hour') ? 'hour' : 'minute';
+        this.splitPickerDate.update((current) => {
+            current[side === SideEnum.left ? 'start' : 'end'].update((sideCurrent) => {
+                sideCurrent[attr] = event;
+                return sideCurrent;
+            });
+            return current;
+        });
+        if ((type !== 'lefthour' && type !== 'righthour') || event === undefined) {
+            this.isZero.set(false);
+            return;
+        }
+        if (`${event}`.length === 2 || Number(event) > 2 || (Number(event) <= 2 && Number(event) > 0 && this.isZero()) || (this.isZero() && !this.keyCodeBackspace())) {
+            this.isZero.set(false);
+            this.functionControls.get(type === 'lefthour' ? `${SideEnum.left}minute` : `${SideEnum.right}minute`)?.focus();
+            return;
+        }
+        if (Number(event) === 0 && !this.keyCodeBackspace()) {
+            this.isZero.set(true);
+            return;
+        }
+    }
+    handlerShowListDropdown(event, type) {
+        this.checkShowListDropdown.update((current) => {
+            current[type] = event;
+            return current;
+        });
+    }
+    convertItemMonth = (item) => {
+        if (!item) {
+            return '';
+        }
+        set(item, 'labelDisplay', this.translate.instant(item.label || ' ', { year: '' }));
+        return item;
+    };
+    convertItemYear = (item) => {
+        if (!item) {
+            return '';
+        }
+        item.labelDisplay = this.translate.instant('i18n_year_param', { year: item.label });
+        return item;
+    };
+    updateMonthsInView() {
+        if (this.endDate()) {
+            if (!this.isSingle() &&
+                this.leftCalendar().month &&
+                this.rightCalendar().month &&
+                ((this.leftCalendar() && this.startDate()?.format('YYYY-MM') === this.leftCalendar().month?.format('YYYY-MM')) || (this.rightCalendar() && this.startDate()?.format('YYYY-MM') === this.rightCalendar().month?.format('YYYY-MM'))) &&
+                (this.endDate()?.format('YYYY-MM') === this.leftCalendar().month?.format('YYYY-MM') || this.endDate()?.format('YYYY-MM') === this.rightCalendar().month?.format('YYYY-MM'))) {
+                return;
+            }
+            if (this.startDate()) {
+                this.leftCalendar.update((current) => {
+                    current.month = this.startDate()?.clone()?.date(2);
+                    return current;
+                });
+                if (this.endDate()?.month() !== this.startDate()?.month() || this.endDate()?.year() !== this.startDate()?.year()) {
+                    this.rightCalendar.update((current) => {
+                        current.month = this.endDate()?.clone()?.date(2);
+                        return current;
+                    });
+                    return;
+                }
+                this.rightCalendar.update((current) => {
+                    current.month = this.startDate()?.clone()?.date(2)?.add(1, 'month');
+                    return current;
+                });
+            }
+        }
+        if (this.startDate() &&
+            this.leftCalendar().month &&
+            this.rightCalendar().month &&
+            this.leftCalendar().month?.format('YYYY-MM') !== this.startDate()?.format('YYYY-MM') &&
+            this.rightCalendar().month?.format('YYYY-MM') !== this.startDate()?.format('YYYY-MM')) {
+            this.leftCalendar.update((current) => {
+                current.month = this.startDate()?.clone()?.date(2);
+                return current;
+            });
+            this.rightCalendar.update((current) => {
+                current.month = this.startDate()?.clone()?.date(2)?.add(1, 'month');
+                return current;
+            });
+        }
+    }
+    setTimeInput(side) {
+        const hour = parseInt(`${this.timepickerVariables()[side]().selectedHour}`);
+        const minute = parseInt(`${this.timepickerVariables()[side]().selectedMinute}`);
+        if (side === SideEnum.left && this.startDate()) {
+            let start = this.startDate()?.clone();
+            start = start?.hour(hour);
+            start = start?.minute(minute);
+            this.setStartDate(start);
+            if (this.isSingle()) {
+                this.endDate.set(this.startDate()?.clone());
+            }
+            if (this.endDate() && this.endDate()?.format('YYYY-MM-DD') === start?.format('YYYY-MM-DD') && this.endDate()?.isBefore(start)) {
+                this.setEndDate(start?.clone());
+            }
+            if (!this.endDate() && start && this.hasTimePicker()) {
+                const startClone = this.getDateWithTime(start, SideEnum.right);
+                if (startClone.isBefore(start)) {
+                    this.timepickerVariables()[SideEnum.right].update((current) => {
+                        current.selectedHour = hour;
+                        current.selectedMinute = minute;
+                        return current;
+                    });
+                }
+            }
+            return;
+        }
+        if (this.endDate()) {
+            let end = this.endDate()?.clone();
+            end = end?.hour(hour);
+            end = end?.minute(minute);
+            this.setEndDate(end);
+        }
+        this.updateCalendars();
+        this.renderTimePicker(SideEnum.left);
+        this.renderTimePicker(SideEnum.right);
+    }
+    updateCalendars() {
+        this.renderCalendar(SideEnum.left);
+        this.renderCalendar(SideEnum.right);
+        if (this.endDate() === null) {
+            return;
+        }
+        this.calculateSelectedLabel();
+    }
+    renderCalendar(side) {
+        // side enum
+        const mainCalendar = side === SideEnum.left ? this.leftCalendar() : this.rightCalendar();
+        if (!mainCalendar.month || this.dateOptions().firstDay === undefined || this.dateOptions().firstDay === undefined) {
+            return;
+        }
+        const month = mainCalendar.month.month();
+        const year = mainCalendar.month.year();
+        const hour = mainCalendar.month.hour();
+        const minute = mainCalendar.month.minute();
+        const second = mainCalendar.month.second();
+        const daysInMonth = getDayjs({ date: new Date(year, month) }).daysInMonth();
+        const firstDay = getDayjs({ date: new Date(year, month, 1) });
+        const lastDay = getDayjs({ date: new Date(year, month, daysInMonth) });
+        const lastMonth = getDayjs({ date: firstDay.subtract(1, 'month') }).month();
+        const lastYear = getDayjs({ date: firstDay.subtract(1, 'month') }).year();
+        const daysInLastMonth = getDayjs({ date: new Date(lastYear, lastMonth) }).daysInMonth();
+        const dayOfWeek = firstDay.day();
+        const calendar = {};
+        calendar.firstDay = firstDay;
+        calendar.lastDay = lastDay;
+        for (let i = 0; i < 6; i++) {
+            calendar[i] = [];
+        }
+        let startDay = daysInLastMonth - dayOfWeek + (this.dateOptions().firstDay ?? 1) + 1;
+        if (startDay > daysInLastMonth) {
+            startDay -= 7;
+        }
+        if (dayOfWeek === this.dateOptions().firstDay) {
+            startDay = daysInLastMonth - 6;
+        }
+        let curDate = getDayjs({ date: new Date(lastYear, lastMonth, startDay, 12, minute, second) });
+        for (let i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = getDayjs({ date: curDate }).add(24, 'hour')) {
+            if (i > 0 && col % 7 === 0) {
+                col = 0;
+                row++;
+            }
+            calendar[row][col] = curDate.clone().hour(hour).minute(minute).second(second);
+            curDate = curDate.hour(12);
+            const minDate = getDayjs({ date: this.minDate() });
+            const maxDate = getDayjs({ date: this.maxDate() });
+            if (minDate && calendar[row][col].format('YYYY-MM-DD') === minDate?.format('YYYY-MM-DD') && calendar[row][col].isBefore(minDate) && side === 'left') {
+                calendar[row][col] = minDate?.clone();
+            }
+            if (maxDate && calendar[row][col].format('YYYY-MM-DD') === maxDate?.format('YYYY-MM-DD') && calendar[row][col].isAfter(maxDate) && side === 'right') {
+                calendar[row][col] = maxDate?.clone();
+            }
+        }
+        if (side === SideEnum.left) {
+            this.leftCalendar.update((current) => {
+                current.calendar = calendar;
+                return current;
+            });
+        }
+        if (side === SideEnum.right) {
+            this.rightCalendar.update((current) => {
+                current.calendar = calendar;
+                return current;
+            });
+        }
+        const minDate = side === 'left' ? getDayjs({ date: this.minDate() }) : getDayjs({ date: this.startDate() });
+        const maxDate = getDayjs({ date: this.maxDate() });
+        this.calendarVariables()[side].set({
+            month: month,
+            year: year,
+            hour: hour,
+            minute: minute,
+            second: second,
+            daysInMonth: daysInMonth,
+            firstDay: firstDay,
+            lastDay: lastDay,
+            lastMonth: lastMonth,
+            lastYear: lastYear,
+            daysInLastMonth: daysInLastMonth,
+            dayOfWeek: dayOfWeek,
+            calRows: signal(Array.from(Array(6).keys())),
+            calCols: signal(Array.from(Array(7).keys())),
+            classes: {},
+            minDate: minDate,
+            maxDate: maxDate,
+            calendar: calendar,
+            dropdowns: signal({}),
+        });
+        if (this.showDropdownsSelect()) {
+            const currentMonth = calendar[1][1].month();
+            const currentYear = calendar[1][1].year();
+            const maxYear = maxDate?.year() ?? DEFAULT_MAX_YEAR;
+            const minYear = minDate?.year() ?? DEFAULT_MIN_YEAR;
+            const inMinYear = currentYear === minYear;
+            const inMaxYear = currentYear === maxYear;
+            const years = [];
+            for (let y = minYear; y <= maxYear; y++) {
+                years.push(y);
+            }
+            this.calendarVariables()[side]()
+                .dropdowns?.set({
+                currentMonth: currentMonth,
+                currentYear: currentYear,
+                maxYear: maxYear,
+                minYear: minYear,
+                inMinYear: inMinYear,
+                inMaxYear: inMaxYear,
+                monthArrays: signal(Array.from(Array(12).keys())),
+                yearArrays: signal(years),
+            });
+        }
+        this.buildCells(calendar, side);
+    }
+    buildCells(calendar, side) {
+        for (let row = 0; row < 6; row++) {
+            const classless = this.calendarVariables()[side]();
+            if (classless.classes) {
+                classless.classes[row] = {};
+            }
+            for (let col = 0; col < 7; col++) {
+                const classes = [];
+                const startDate = getDayjs({ date: this.startDate() });
+                const endDate = getDayjs({ date: this.endDate() });
+                const nowHoveredDate = this.nowHoveredDate();
+                if (calendar[row][col].isSame(new Date(), 'day')) {
+                    classes.push('today');
+                }
+                if (calendar[row][col].isoWeekday() > 5) {
+                    classes.push('weekend');
+                }
+                if (calendar[row][col].month() !== calendar[1][1].month()) {
+                    classes.push('off');
+                }
+                if (this.minDate() && calendar[row][col].isBefore(this.minDate(), 'day')) {
+                    classes.push('off', 'disabled');
+                }
+                if (this.calendarVariables()[side]().maxDate && calendar[row][col].isAfter(this.calendarVariables()[side]().maxDate, 'day')) {
+                    classes.push('off', 'disabled');
+                }
+                if (startDate && calendar[row][col].format('YYYY-MM-DD') === startDate?.format('YYYY-MM-DD')) {
+                    classes.push('active', 'start-date');
+                }
+                if (endDate !== null && calendar[row][col].format('YYYY-MM-DD') === endDate?.format('YYYY-MM-DD')) {
+                    classes.push('active', 'end-date');
+                }
+                if (startDate && calendar[row][col].format('YYYY-MM-DD') === startDate?.format('YYYY-MM-DD') && (!endDate || (endDate !== null && calendar[row][col].format('YYYY-MM-DD') === endDate?.format('YYYY-MM-DD')))) {
+                    classes.push('active', 'full-date');
+                }
+                if (startDate &&
+                    endDate &&
+                    ((nowHoveredDate !== null && this.pickingDate()) || endDate !== null) &&
+                    calendar[row][col] > startDate &&
+                    (calendar[row][col] < endDate || (nowHoveredDate && calendar[row][col] < nowHoveredDate && this.pickingDate()))) {
+                    classes.push(!classes.find((el) => el === 'off') ? 'in-range' : 'focus-off');
+                }
+                let cname = '', disabled = false;
+                for (let i = 0; i < classes.length; i++) {
+                    cname += classes[i] + ' ';
+                    if (classes[i] === 'disabled') {
+                        disabled = true;
+                    }
+                }
+                if (!disabled) {
+                    cname += 'available';
+                }
+                if (classless.classes) {
+                    classless.classes[row][col] = cname.replace(/^\s+|\s+$/g, '');
+                }
+            }
+        }
+    }
+    renderTimePicker(side) {
+        let selected = getDayjs(), minDate;
+        const maxDate = getDayjs({ date: this.maxDate() });
+        const startDate = getDayjs({ date: this.startDate() });
+        const endDate = getDayjs({ date: this.endDate() });
+        if (side === SideEnum.left && startDate) {
+            selected = startDate.clone();
+            minDate = this.maxDate();
+        }
+        if (side === SideEnum.right && endDate) {
+            selected = endDate.clone();
+            minDate = this.startDate();
+        }
+        if (side === SideEnum.right && !endDate) {
+            if (!startDate) {
+                return;
+            }
+            selected = getDayjs({ date: this.getDateWithTime(startDate, SideEnum.right) });
+            if (selected.isBefore(startDate)) {
+                selected = startDate.clone();
+            }
+            minDate = startDate;
+        }
+        const start = 0;
+        const end = 23;
+        this.timepickerVariables()[side].set({
+            hours: [],
+            minutes: [],
+            minutesLabel: [],
+            seconds: [],
+            secondsLabel: [],
+            disabledHours: [],
+            disabledMinutes: [],
+            disabledSeconds: [],
+            selectedHour: 0,
+            selectedMinute: 0,
+            selectedSecond: 0,
+        });
+        for (let i = start; i <= end; i++) {
+            const i_in_24 = i;
+            const time = selected.clone().hour(i_in_24);
+            let disabled = false;
+            if (minDate && time.minute(59).isBefore(minDate)) {
+                disabled = true;
+            }
+            if (maxDate && time.minute(0).isAfter(maxDate)) {
+                disabled = true;
+            }
+            this.timepickerVariables()[side].update((current) => {
+                current.hours?.push(i);
+                if (i_in_24 === selected.hour() && !disabled) {
+                    current.selectedHour = i;
+                }
+                if (disabled) {
+                    current.disabledHours?.push(i);
+                }
+                return current;
+            });
+        }
+        for (let i = 0; i < 60; i += this.timePickerIncrement()) {
+            const padded = i < 10 ? '0' + i : `${i}`;
+            const time = selected.clone().minute(i);
+            let disabled = false;
+            if (minDate && time.second(59).isBefore(minDate)) {
+                disabled = true;
+            }
+            if (maxDate && time.second(0).isAfter(maxDate)) {
+                disabled = true;
+            }
+            this.timepickerVariables()[side].update((current) => {
+                current.minutes?.push(i);
+                current.minutesLabel?.push(padded);
+                if (selected.minute() === i && !disabled) {
+                    current.selectedMinute = i;
+                }
+                if (disabled) {
+                    current.disabledMinutes?.push(i);
+                }
+                return current;
+            });
+        }
+        this.timepickerVariables()[side].update((current) => {
+            current.selected = selected;
+            return current;
+        });
+    }
+    updateElement() {
+        if (!this.startDate()) {
+            return;
+        }
+        if (this.isSingle()) {
+            this.selectedLabel.set(this.startDate()?.format('DD/MM/YYYY'));
+            return;
+        }
+        if (this.endDate()) {
+            // if we use ranges and should show range label on input
+            if (this.quickRangesArray().length && this.showRangeLabelOnInput() && this.selectedQuickRange() && this.dateOptions().customRangeLabel !== this.selectedQuickRange()) {
+                this.selectedLabel.set(this.selectedQuickRange());
+                return;
+            }
+            this.selectedLabel.set(`${this.startDate()?.format('DD/MM/YYYY')}${this.dateOptions().separator}${this.endDate()?.format('DD/MM/YYYY')}`);
+            return;
+        }
+        this.selectedLabel.set(`${this.startDate()?.format('DD/MM/YYYY')}${this.dateOptions().separator}${this.startDate()?.format('DD/MM/YYYY')}`);
+    }
+    updateView() {
+        if (this.hasTimePicker()) {
+            this.renderTimePicker(SideEnum.left);
+            this.renderTimePicker(SideEnum.right);
+        }
+        this.updateMonthsInView();
+        this.updateCalendars();
+    }
+    getDateWithTime(date, side) {
+        const hour = parseInt(`${this.timepickerVariables()[side]().selectedHour}`, 10);
+        const minute = parseInt(`${this.timepickerVariables()[side]().selectedMinute}`, 10);
+        const second = this.hasSecondPicker() && !isEmpty(this.timepickerVariables()[side]().selectedSecond) ? parseInt(`${this.timepickerVariables()[side]().selectedSecond}`, 10) : 0;
+        return date.clone().hour(hour).minute(minute).second(second);
+    }
+    transformMinMaxDate(value) {
+        if (isEmpty(value)) {
+            return undefined;
+        }
+        if (dayjs.isDayjs(value)) {
+            return value;
+        }
+        if (typeof value === 'string') {
+            return getDayjs({ date: value });
+        }
+        return undefined;
+    }
+    computedDisplayTime(side) {
+        let strHours = side.selectedHour;
+        let strMinute = side.selectedMinute;
+        if ((side.selectedHour || 0) < 10) {
+            strHours = `0${side.selectedHour ?? 0}`;
+        }
+        if ((side.selectedMinute || 0) < 10) {
+            strMinute = `0${side.selectedMinute ?? 0}`;
+        }
+        return `${strHours}:${strMinute}`;
+    }
+    computedDisplayTimeInput(side, timeType) {
+        const time = timeType === 'hour' ? (side === SideEnum.left ? this.timepickerValueItem().lefthour() : this.timepickerValueItem().righthour()) : side === SideEnum.left ? this.timepickerValueItem().leftminute() : this.timepickerValueItem().rightminute();
+        if (!time) {
+            return '00';
+        }
+        if (time < 10) {
+            return `0${time}`;
+        }
+        return time;
+    }
+    ngOnDestroy() {
+        return;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, isStandalone: true, selector: "libs_ui-components-datetime-picker-custom_ranges-calendar", inputs: { quickRangesArray: { classPropertyName: "quickRangesArray", publicName: "quickRangesArray", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, isSingle: { classPropertyName: "isSingle", publicName: "isSingle", isSignal: true, isRequired: false, transformFunction: null }, showDropdownsSelect: { classPropertyName: "showDropdownsSelect", publicName: "showDropdownsSelect", isSignal: true, isRequired: false, transformFunction: null }, hasTimePicker: { classPropertyName: "hasTimePicker", publicName: "hasTimePicker", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, hasSecondPicker: { classPropertyName: "hasSecondPicker", publicName: "hasSecondPicker", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabelOnInput: { classPropertyName: "showRangeLabelOnInput", publicName: "showRangeLabelOnInput", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, listYearHiddenInputSearch: { classPropertyName: "listYearHiddenInputSearch", publicName: "listYearHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange", outChangStageFlagMouse: "outChangStageFlagMouse", outPickerDate: "outPickerDate", outCancel: "outCancel", outUpdateWidth: "outUpdateWidth", outFunctionsControl: "outFunctionsControl" }, viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"libs-ui-component-custom_ranges-calendar test-class\">\n  <div class=\"relative flex\">\n    <div\n      class=\"libs-ui-component-custom_ranges-calendar\"\n      [class.right]=\"isSingle()\"\n      [class.left]=\"!isSingle()\">\n      <div class=\"rounded-[4px] bg-[#ffffff]\">\n        @if (calendarVariables(); as calendarVariables) {\n          <table>\n            <thead>\n              <tr>\n                <th\n                  colspan=\"7\"\n                  class=\"month\">\n                  @if (showDropdownsSelect() && calendarVariables.left().dropdowns?.()) {\n                    <div class=\"!flex mb-[10px] w-full\">\n                      <div class=\"w-3/4 flex items-center\">\n                        <div class=\"mr-[8px]\">\n                          <libs_ui-components-dropdown\n                            [isNgContent]=\"true\"\n                            [zIndex]=\"zIndex() + 1\"\n                            [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n                            [listMaxItemShow]=\"10\"\n                            [listClickExactly]=\"false\"\n                            [listKeysDisable]=\"disableMonth().left()\"\n                            [listHasButtonUnSelectOption]=\"false\"\n                            [convertItemSelected]=\"convertItemMonth\"\n                            [listConfig]=\"listMonthsConfig()\"\n                            [listKeySelected]=\"listKeyFromSelected().month\"\n                            [flagMouse]=\"flagMouse()\"\n                            [listHiddenInputSearch]=\"true\"\n                            [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n                            (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'month')\"\n                            (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'month')\"\n                            (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                            (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'month')\">\n                            <div\n                              class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                              [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n                              [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'month']\">\n                              <div\n                                class=\"libs-ui-font-h4m\"\n                                [style.fontWeight]=\"500\"\n                                [style.fontStyle]=\"'normal'\">\n                                {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n                              </div>\n                              <i\n                                class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n                                [style.fontWeight]=\"500\"\n                                [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'month'] ? '90deg' : '270deg'\"></i>\n                            </div>\n                          </libs_ui-components-dropdown>\n                        </div>\n                        <div>\n                          <libs_ui-components-dropdown\n                            [listMaxItemShow]=\"10\"\n                            [isNgContent]=\"true\"\n                            [zIndex]=\"zIndex() + 1\"\n                            [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n                            [listClickExactly]=\"false\"\n                            [listHasButtonUnSelectOption]=\"false\"\n                            [convertItemSelected]=\"convertItemYear\"\n                            [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n                            [listConfig]=\"listLeftYearConfig()\"\n                            [listKeySelected]=\"listKeyFromSelected().year\"\n                            [flagMouse]=\"flagMouse()\"\n                            [httpRequestDetailItemById]=\"leftYearHttpDetailConfig()\"\n                            (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                            (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'year')\"\n                            (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'year')\"\n                            (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'year')\">\n                            <div\n                              class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                              [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n                              [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'year']\">\n                              <div\n                                class=\"libs-ui-font-h4m\"\n                                [style.fontWeight]=\"500\"\n                                [style.fontStyle]=\"'normal'\">\n                                {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n                              </div>\n                              <i\n                                class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n                                [style.fontWeight]=\"500\"\n                                [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'year'] ? '90deg' : '270deg'\"></i>\n                            </div>\n                          </libs_ui-components-dropdown>\n                        </div>\n                      </div>\n\n                      <div class=\"w-1/4 flex items-center relative\">\n                        @if (!calendarVariables.left().minDate || calendarVariables.left().minDate?.isBefore(calendarVariables.left().calendar && calendarVariables.left().calendar?.firstDay)) {\n                          <div (click)=\"handlerClickPrev(sideEnum.left)\">\n                            <div class=\"flex items-center justify-center absolute left-0 top-[-3px]\">\n                              <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          </div>\n                        }\n                        @if ((!calendarVariables.left().maxDate || calendarVariables.left().maxDate?.isAfter(calendarVariables.left().calendar && calendarVariables.left().calendar?.lastDay)) && isSingle()) {\n                          <div (click)=\"handlerClickNext(sideEnum.left)\">\n                            <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                              <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                  @if (!showDropdownsSelect() || !calendarVariables.left().dropdowns) {\n                    {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n                    {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n                  }\n                </th>\n              </tr>\n              <tr class=\"week-days\">\n                @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n                  <th>\n                    <span\n                      class=\"libs-ui-font-h6m text-[#6a7383]\"\n                      [style.fontWeight]=\"500\"\n                      [style.fontStyle]=\"'normal'\">\n                      {{ dayofweek }}\n                    </span>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody class=\"drp-animate\">\n              @for (row of calendarVariables.left().calRows?.(); track row) {\n                <tr\n                  class=\"h-[32px]\"\n                  [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.classList\">\n                  @for (col of calendarVariables.left().calCols?.(); track col) {\n                    <td\n                      class=\"libs-ui-font-h5r\"\n                      [class.today]=\"\n                        calendarVariables.left().calendar &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.date() === today().date() &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.month() === today().month() &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.year() === today().year()\n                      \"\n                      [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.[col]\"\n                      (click)=\"handlerPickerDate($event, sideEnum.left, row, col)\"\n                      (mouseenter)=\"handlerHoverDate($event, sideEnum.left, row, col)\">\n                      <span class=\"libs-ui-font-h5r\">{{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[row]?.[col]?.date() }}</span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        }\n      </div>\n      @if (hasTimePicker()) {\n        <div>\n          <div class=\"flex justify-center column items-center pt-[12px]\">\n            <div\n              class=\"w-full flex justify-center items-center rounded-[4px] border\"\n              [class.border-[#e6e8ed]]=\"!timePickerError()\"\n              [class.border-[#ff5454]]=\"timePickerError()\">\n              <libs_ui-components-inputs-input\n                classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n                dataType=\"int\"\n                [focusTimeOut]=\"0\"\n                [blurTimeOut]=\"0\"\n                [autoAddZeroLessThan10InTypeInt]=\"true\"\n                [emitEmptyInDataTypeNumber]=\"true\"\n                [maxValueNumber]=\"23\"\n                [minValueNumber]=\"0\"\n                [maxLength]=\"2\"\n                [value]=\"timepickerValueItem().lefthour()\"\n                (outInputEvent)=\"handlerInputEvent($event, 'lefthour')\"\n                (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'hour')\"\n                (outChange)=\"handlerChangeTimeValue($event, 'lefthour')\"\n                (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'lefthour')\" />\n              <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n              <libs_ui-components-inputs-input\n                classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n                [autoAddZeroLessThan10InTypeInt]=\"true\"\n                [emitEmptyInDataTypeNumber]=\"true\"\n                dataType=\"int\"\n                [focusTimeOut]=\"0\"\n                [blurTimeOut]=\"0\"\n                [maxValueNumber]=\"59\"\n                [minValueNumber]=\"0\"\n                [maxLength]=\"2\"\n                [value]=\"timepickerValueItem().leftminute()\"\n                (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'minute')\"\n                (outInputEvent)=\"handlerInputEvent($event, 'leftminute')\"\n                (outChange)=\"handlerChangeTimeValue($event, 'leftminute')\"\n                (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'leftminute')\" />\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    @if (!isSingle()) {\n      <div class=\"libs-ui-component-custom_ranges-calendar right ml-[24px]\">\n        <div class=\"rounded-[4px] bg-[#ffffff]\">\n          @if (calendarVariables()) {\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    colspan=\"7\"\n                    class=\"month\">\n                    @if (showDropdownsSelect() && calendarVariables().left().dropdowns?.()) {\n                      <div class=\"!flex mb-[10px] w-full\">\n                        <div class=\"w-3/4 flex items-center\">\n                          <div class=\"mr-[8px]\">\n                            <libs_ui-components-dropdown\n                              [isNgContent]=\"true\"\n                              [zIndex]=\"zIndex() + 1\"\n                              [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n                              [listMaxItemShow]=\"10\"\n                              [listClickExactly]=\"false\"\n                              [listKeysDisable]=\"disableMonth().right()\"\n                              [listHasButtonUnSelectOption]=\"false\"\n                              [convertItemSelected]=\"convertItemMonth\"\n                              [listHiddenInputSearch]=\"true\"\n                              [listConfig]=\"listMonthsConfig()\"\n                              [listKeySelected]=\"listKeyToSelected().month\"\n                              [flagMouse]=\"flagMouse()\"\n                              [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n                              (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'month')\"\n                              (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'month')\"\n                              (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                              (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'month')\">\n                              <div\n                                class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n                                [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'month']\">\n                                <div\n                                  class=\"libs-ui-font-h4m\"\n                                  [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.fontStyle]=\"'normal'\">\n                                  {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n                                </div>\n                                <i\n                                  class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'month'] ? '90deg' : '270deg'\"></i>\n                              </div>\n                            </libs_ui-components-dropdown>\n                          </div>\n                          <div>\n                            <libs_ui-components-dropdown\n                              [listMaxItemShow]=\"10\"\n                              [zIndex]=\"zIndex() + 1\"\n                              [isNgContent]=\"true\"\n                              [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n                              [listClickExactly]=\"false\"\n                              [listHasButtonUnSelectOption]=\"false\"\n                              [convertItemSelected]=\"convertItemYear\"\n                              [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n                              [listConfig]=\"listRightYearConfig()\"\n                              [listKeySelected]=\"listKeyToSelected().year\"\n                              [flagMouse]=\"flagMouse()\"\n                              [httpRequestDetailItemById]=\"rightYearHttpDetailConfig()\"\n                              (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'year')\"\n                              (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'year')\"\n                              (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                              (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'year')\">\n                              <div\n                                class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n                                [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'year']\">\n                                <div\n                                  class=\"libs-ui-font-h4m\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.fontStyle]=\"'normal'\">\n                                  {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n                                </div>\n                                <i\n                                  class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                  [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'year'] ? '90deg' : '270deg'\"></i>\n                              </div>\n                            </libs_ui-components-dropdown>\n                          </div>\n                        </div>\n                        <div class=\"w-1/4 flex items-center relative\">\n                          @if (\n                            (listKeyFromSelected().year &&\n                              listKeyToSelected().year &&\n                              !(listKeyFromSelected().year + 1 === listKeyToSelected().year && listKeyFromSelected().month === 12 && listKeyToSelected().month === 1) &&\n                              listKeyFromSelected().year < listKeyToSelected().year) ||\n                            (listKeyFromSelected().month && listKeyToSelected().month && listKeyFromSelected().month + 1 < +listKeyToSelected().month)\n                          ) {\n                            <div\n                              class=\"flex items-center justify-center absolute left-0 top-[-3px]\"\n                              (click)=\"handlerClickPrev(sideEnum.right)\">\n                              <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          }\n                          @if (\n                            listKeyFromSelected().month &&\n                            listKeyToSelected().month &&\n                            listKeyFromSelected().month > listKeyToSelected().month &&\n                            listKeyFromSelected().year &&\n                            listKeyToSelected().year &&\n                            listKeyFromSelected().year === listKeyToSelected().year\n                          ) {\n                            <div class=\"bg-[#ffffff] w-[21px] h-[21px] cursor-none flex items-center justify-center rounded-[50px]\"></div>\n                          }\n                          @if (\n                            !calendarVariables().right().maxDate ||\n                            calendarVariables()\n                              .right()\n                              .maxDate?.isAfter(calendarVariables().right().calendar && calendarVariables().right().calendar?.lastDay)\n                          ) {\n                            <div (click)=\"handlerClickNext(sideEnum.right)\">\n                              <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                                <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                    @if (!showDropdownsSelect() || !calendarVariables().right().dropdowns) {\n                      {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n                      {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n                    }\n                  </th>\n                </tr>\n                <tr class=\"week-days\">\n                  @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n                    <th>\n                      <span\n                        class=\"libs-ui-font-h6m text-[#6a7383]\"\n                        [style.fontWeight]=\"500\"\n                        [style.fontStyle]=\"'normal'\">\n                        {{ dayofweek }}\n                      </span>\n                    </th>\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (row of calendarVariables().right().calRows?.(); track row) {\n                  <tr\n                    class=\"h-[32px]\"\n                    [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.classList\">\n                    @for (col of calendarVariables().right().calCols?.(); track col) {\n                      <td\n                        class=\"libs-ui-font-h5r\"\n                        [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.[col]\"\n                        [class.today]=\"\n                          calendarVariables().right().calendar &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.date() === today().date() &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.month() === today().month() &&\n                          calendarVariables().right().calendar &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.year() === today().year()\n                        \"\n                        (click)=\"handlerPickerDate($event, sideEnum.right, row, col)\"\n                        (mouseenter)=\"handlerHoverDate($event, sideEnum.right, row, col)\">\n                        <span>{{ calendarVariables().right().calendar?.[row]?.[col]?.date() }}</span>\n                      </td>\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          }\n        </div>\n        @if (hasTimePicker()) {\n          <div>\n            <div class=\"flex justify-center items-center pt-[12px]\">\n              <div\n                class=\"w-full flex justify-center items-center rounded-[4px] border\"\n                [class.border-[#e6e8ed]]=\"!timePickerError()\"\n                [class.border-[#ff5454]]=\"timePickerError()\">\n                <libs_ui-components-inputs-input\n                  classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n                  dataType=\"int\"\n                  [autoAddZeroLessThan10InTypeInt]=\"true\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [maxValueNumber]=\"23\"\n                  [minValueNumber]=\"0\"\n                  [focusTimeOut]=\"0\"\n                  [blurTimeOut]=\"0\"\n                  [maxLength]=\"2\"\n                  [value]=\"timepickerValueItem().righthour()\"\n                  (outChange)=\"handlerChangeTimeValue($event, 'righthour')\"\n                  (outInputEvent)=\"handlerInputEvent($event, 'righthour')\"\n                  (outFunctionsControl)=\"handlerFunctionControl($event, 'righthour')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'righthour')\" />\n                <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n                <libs_ui-components-inputs-input\n                  classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n                  dataType=\"int\"\n                  [autoAddZeroLessThan10InTypeInt]=\"true\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [maxValueNumber]=\"59\"\n                  [minValueNumber]=\"0\"\n                  [focusTimeOut]=\"0\"\n                  [blurTimeOut]=\"0\"\n                  [maxLength]=\"2\"\n                  [value]=\"timepickerValueItem().rightminute()\"\n                  (outInputEvent)=\"handlerInputEvent($event, 'rightminute')\"\n                  (outFunctionsControl)=\"handlerFunctionControl($event, 'rightminute')\"\n                  (outChange)=\"handlerChangeTimeValue($event, 'rightminute')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'rightminute')\" />\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <div>\n    <div class=\"flex w-full\">\n      @if (!isSingle() && hasTimePicker()) {\n        <div class=\"mt-[8px] libs-ui-font-h7r text-[#ff5454] h-[14px]\">\n          @if (timePickerError()) {\n            <span>{{ 'i18n_date_compare_start_end_message_error' | translate }}</span>\n          }\n        </div>\n      }\n    </div>\n    @if (!quickRangesArray().length || !isSingle()) {\n      <div class=\"flex w-full pt-[16px] justify-between\">\n        <div class=\"flex items-center\">\n          @if (!isSingle()) {\n            @if (!endDate()) {\n              <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeLeft() }}</span>\n                }\n                &hyphen;\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeRight() }}</span>\n                }\n              </div>\n            }\n            @if (endDate()) {\n              <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeLeft() }}</span>\n                }\n                &hyphen;\n                <span>{{ endDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeRight() }}</span>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <div class=\"flex\">\n          <libs_ui-components-buttons-button\n            class=\"mr-[12px]\"\n            label=\"i18n_cancel\"\n            type=\"button-third\"\n            (outClick)=\"handlerClickCancel($event)\" />\n          <libs_ui-components-buttons-button\n            label=\"i18n_select\"\n            (outClick)=\"handlerClickApply($event)\" />\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown{display:flex;align-items:center}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar table{border-collapse:inherit;border-spacing:0 2px}.libs-ui-component-custom_ranges-calendar th,.libs-ui-component-custom_ranges-calendar td{padding:0;text-align:center;min-width:32px}.libs-ui-component-custom_ranges-calendar th span,.libs-ui-component-custom_ranges-calendar td span{pointer-events:none}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:before{font-size:20px}.libs-ui-component-custom_ranges-calendar td,.libs-ui-component-custom_ranges-calendar th{cursor:pointer;height:2em;width:2em}.libs-ui-component-custom_ranges-calendar td.available:hover,.libs-ui-component-custom_ranges-calendar th.available:hover{background-color:#f8f5fe;border-color:transparent;border-radius:8px;color:inherit;background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}.libs-ui-component-custom_ranges-calendar td{margin:.25em 0;background-color:#fff;transition:background-color .2s ease;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms;color:#071631!important}.libs-ui-component-custom_ranges-calendar td:hover{color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.off,.libs-ui-component-custom_ranges-calendar td.off.in-range,.libs-ui-component-custom_ranges-calendar td.off.start-date,.libs-ui-component-custom_ranges-calendar td.off.end-date{background-color:#fff;border-color:transparent;color:#cdd0d6!important}.libs-ui-component-custom_ranges-calendar td.focus-off{background-color:#f8f5fe!important}.libs-ui-component-custom_ranges-calendar td.in-range{background-color:#f8f5fe;border-color:transparent;border-radius:0;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today{position:relative;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today:after{position:absolute;content:\"\";width:2px;height:2px;background-color:#8e61ee;left:49%;bottom:5px}.libs-ui-component-custom_ranges-calendar td.active{transition:background .3s ease-out;background:#0000001a}.libs-ui-component-custom_ranges-calendar td.active.today:after{position:absolute;content:\"\";background-color:#fff}.libs-ui-component-custom_ranges-calendar td.active.start-date{border-radius:8px 0 0 8px}.libs-ui-component-custom_ranges-calendar td.active.end-date{border-radius:0 8px 8px 0}.libs-ui-component-custom_ranges-calendar td.active.full-date{border-radius:8px}.libs-ui-component-custom_ranges-calendar td.active,.libs-ui-component-custom_ranges-calendar td.active:hover{background-color:#8e61ee;border-color:transparent;color:#fff!important}.libs-ui-component-custom_ranges-calendar th.month{width:auto}.libs-ui-component-custom_ranges-calendar td.disabled,.libs-ui-component-custom_ranges-calendar option.disabled{color:#999!important;cursor:not-allowed;text-decoration:line-through;background-color:#f4f5f7}.libs-ui-component-custom_ranges-calendar .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right}.libs-ui-component-custom_ranges-calendar th.month>div{position:relative;display:inline-block}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsInputsInputComponent, selector: "libs_ui-components-inputs-input", inputs: ["tagInput", "dataType", "typeInput", "modeInput", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "maxValueNumber", "minValueNumber", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "classInclude", "maxLength", "readonly", "disable", "noBorder", "backgroundNone", "borderError", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "value", "autoRemoveEmoji", "defaultHeight", "minHeightTextArea", "maxHeightTextArea", "focusTimeOut", "selectAllTimeOut", "blurTimeOut", "zIndexPopoverContent", "classContainerInput", "showCount", "ignoreStopPropagationEvent", "resize", "templateLeftBottomInput", "templateRightBottomInput", "classContainerBottomInput", "ignoreWidthInput100", "iframeTextareaCustomStyle", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "resetAutoCompletePassword", "acceptOnlyClickIcon", "setIconRightColorSameColorDisableReadOnly", "onlyAcceptNegativeValue", "maxLengthNumberCount", "focusInput"], outputs: ["maxValueNumberChange", "minValueNumberChange", "fixedFloatChange", "acceptNegativeValueChange", "maxLengthChange", "valueChange", "maxLengthNumberCountChange", "outHeightAreaChange", "outChange", "outFocusAndBlurEvent", "outEnterEvent", "outInputEvent", "outIconLeft", "outIconRight", "outFunctionsControl", "outFilesDrop", "outFileDrop", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-datetime-picker-custom_ranges-calendar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsDropdownComponent, LibsUiComponentsInputsInputComponent, LibsUiComponentsButtonsButtonComponent], template: "<div class=\"libs-ui-component-custom_ranges-calendar test-class\">\n  <div class=\"relative flex\">\n    <div\n      class=\"libs-ui-component-custom_ranges-calendar\"\n      [class.right]=\"isSingle()\"\n      [class.left]=\"!isSingle()\">\n      <div class=\"rounded-[4px] bg-[#ffffff]\">\n        @if (calendarVariables(); as calendarVariables) {\n          <table>\n            <thead>\n              <tr>\n                <th\n                  colspan=\"7\"\n                  class=\"month\">\n                  @if (showDropdownsSelect() && calendarVariables.left().dropdowns?.()) {\n                    <div class=\"!flex mb-[10px] w-full\">\n                      <div class=\"w-3/4 flex items-center\">\n                        <div class=\"mr-[8px]\">\n                          <libs_ui-components-dropdown\n                            [isNgContent]=\"true\"\n                            [zIndex]=\"zIndex() + 1\"\n                            [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n                            [listMaxItemShow]=\"10\"\n                            [listClickExactly]=\"false\"\n                            [listKeysDisable]=\"disableMonth().left()\"\n                            [listHasButtonUnSelectOption]=\"false\"\n                            [convertItemSelected]=\"convertItemMonth\"\n                            [listConfig]=\"listMonthsConfig()\"\n                            [listKeySelected]=\"listKeyFromSelected().month\"\n                            [flagMouse]=\"flagMouse()\"\n                            [listHiddenInputSearch]=\"true\"\n                            [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n                            (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'month')\"\n                            (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'month')\"\n                            (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                            (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'month')\">\n                            <div\n                              class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                              [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n                              [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'month']\">\n                              <div\n                                class=\"libs-ui-font-h4m\"\n                                [style.fontWeight]=\"500\"\n                                [style.fontStyle]=\"'normal'\">\n                                {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n                              </div>\n                              <i\n                                class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n                                [style.fontWeight]=\"500\"\n                                [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'month'] ? '90deg' : '270deg'\"></i>\n                            </div>\n                          </libs_ui-components-dropdown>\n                        </div>\n                        <div>\n                          <libs_ui-components-dropdown\n                            [listMaxItemShow]=\"10\"\n                            [isNgContent]=\"true\"\n                            [zIndex]=\"zIndex() + 1\"\n                            [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n                            [listClickExactly]=\"false\"\n                            [listHasButtonUnSelectOption]=\"false\"\n                            [convertItemSelected]=\"convertItemYear\"\n                            [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n                            [listConfig]=\"listLeftYearConfig()\"\n                            [listKeySelected]=\"listKeyFromSelected().year\"\n                            [flagMouse]=\"flagMouse()\"\n                            [httpRequestDetailItemById]=\"leftYearHttpDetailConfig()\"\n                            (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                            (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'year')\"\n                            (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'year')\"\n                            (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'year')\">\n                            <div\n                              class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                              [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n                              [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'year']\">\n                              <div\n                                class=\"libs-ui-font-h4m\"\n                                [style.fontWeight]=\"500\"\n                                [style.fontStyle]=\"'normal'\">\n                                {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n                              </div>\n                              <i\n                                class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n                                [style.fontWeight]=\"500\"\n                                [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'year'] ? '90deg' : '270deg'\"></i>\n                            </div>\n                          </libs_ui-components-dropdown>\n                        </div>\n                      </div>\n\n                      <div class=\"w-1/4 flex items-center relative\">\n                        @if (!calendarVariables.left().minDate || calendarVariables.left().minDate?.isBefore(calendarVariables.left().calendar && calendarVariables.left().calendar?.firstDay)) {\n                          <div (click)=\"handlerClickPrev(sideEnum.left)\">\n                            <div class=\"flex items-center justify-center absolute left-0 top-[-3px]\">\n                              <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          </div>\n                        }\n                        @if ((!calendarVariables.left().maxDate || calendarVariables.left().maxDate?.isAfter(calendarVariables.left().calendar && calendarVariables.left().calendar?.lastDay)) && isSingle()) {\n                          <div (click)=\"handlerClickNext(sideEnum.left)\">\n                            <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                              <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                  @if (!showDropdownsSelect() || !calendarVariables.left().dropdowns) {\n                    {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n                    {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n                  }\n                </th>\n              </tr>\n              <tr class=\"week-days\">\n                @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n                  <th>\n                    <span\n                      class=\"libs-ui-font-h6m text-[#6a7383]\"\n                      [style.fontWeight]=\"500\"\n                      [style.fontStyle]=\"'normal'\">\n                      {{ dayofweek }}\n                    </span>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody class=\"drp-animate\">\n              @for (row of calendarVariables.left().calRows?.(); track row) {\n                <tr\n                  class=\"h-[32px]\"\n                  [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.classList\">\n                  @for (col of calendarVariables.left().calCols?.(); track col) {\n                    <td\n                      class=\"libs-ui-font-h5r\"\n                      [class.today]=\"\n                        calendarVariables.left().calendar &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.date() === today().date() &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.month() === today().month() &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.year() === today().year()\n                      \"\n                      [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.[col]\"\n                      (click)=\"handlerPickerDate($event, sideEnum.left, row, col)\"\n                      (mouseenter)=\"handlerHoverDate($event, sideEnum.left, row, col)\">\n                      <span class=\"libs-ui-font-h5r\">{{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[row]?.[col]?.date() }}</span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        }\n      </div>\n      @if (hasTimePicker()) {\n        <div>\n          <div class=\"flex justify-center column items-center pt-[12px]\">\n            <div\n              class=\"w-full flex justify-center items-center rounded-[4px] border\"\n              [class.border-[#e6e8ed]]=\"!timePickerError()\"\n              [class.border-[#ff5454]]=\"timePickerError()\">\n              <libs_ui-components-inputs-input\n                classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n                dataType=\"int\"\n                [focusTimeOut]=\"0\"\n                [blurTimeOut]=\"0\"\n                [autoAddZeroLessThan10InTypeInt]=\"true\"\n                [emitEmptyInDataTypeNumber]=\"true\"\n                [maxValueNumber]=\"23\"\n                [minValueNumber]=\"0\"\n                [maxLength]=\"2\"\n                [value]=\"timepickerValueItem().lefthour()\"\n                (outInputEvent)=\"handlerInputEvent($event, 'lefthour')\"\n                (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'hour')\"\n                (outChange)=\"handlerChangeTimeValue($event, 'lefthour')\"\n                (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'lefthour')\" />\n              <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n              <libs_ui-components-inputs-input\n                classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n                [autoAddZeroLessThan10InTypeInt]=\"true\"\n                [emitEmptyInDataTypeNumber]=\"true\"\n                dataType=\"int\"\n                [focusTimeOut]=\"0\"\n                [blurTimeOut]=\"0\"\n                [maxValueNumber]=\"59\"\n                [minValueNumber]=\"0\"\n                [maxLength]=\"2\"\n                [value]=\"timepickerValueItem().leftminute()\"\n                (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'minute')\"\n                (outInputEvent)=\"handlerInputEvent($event, 'leftminute')\"\n                (outChange)=\"handlerChangeTimeValue($event, 'leftminute')\"\n                (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'leftminute')\" />\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    @if (!isSingle()) {\n      <div class=\"libs-ui-component-custom_ranges-calendar right ml-[24px]\">\n        <div class=\"rounded-[4px] bg-[#ffffff]\">\n          @if (calendarVariables()) {\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    colspan=\"7\"\n                    class=\"month\">\n                    @if (showDropdownsSelect() && calendarVariables().left().dropdowns?.()) {\n                      <div class=\"!flex mb-[10px] w-full\">\n                        <div class=\"w-3/4 flex items-center\">\n                          <div class=\"mr-[8px]\">\n                            <libs_ui-components-dropdown\n                              [isNgContent]=\"true\"\n                              [zIndex]=\"zIndex() + 1\"\n                              [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n                              [listMaxItemShow]=\"10\"\n                              [listClickExactly]=\"false\"\n                              [listKeysDisable]=\"disableMonth().right()\"\n                              [listHasButtonUnSelectOption]=\"false\"\n                              [convertItemSelected]=\"convertItemMonth\"\n                              [listHiddenInputSearch]=\"true\"\n                              [listConfig]=\"listMonthsConfig()\"\n                              [listKeySelected]=\"listKeyToSelected().month\"\n                              [flagMouse]=\"flagMouse()\"\n                              [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n                              (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'month')\"\n                              (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'month')\"\n                              (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                              (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'month')\">\n                              <div\n                                class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n                                [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'month']\">\n                                <div\n                                  class=\"libs-ui-font-h4m\"\n                                  [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.fontStyle]=\"'normal'\">\n                                  {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n                                </div>\n                                <i\n                                  class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'month'] ? '90deg' : '270deg'\"></i>\n                              </div>\n                            </libs_ui-components-dropdown>\n                          </div>\n                          <div>\n                            <libs_ui-components-dropdown\n                              [listMaxItemShow]=\"10\"\n                              [zIndex]=\"zIndex() + 1\"\n                              [isNgContent]=\"true\"\n                              [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n                              [listClickExactly]=\"false\"\n                              [listHasButtonUnSelectOption]=\"false\"\n                              [convertItemSelected]=\"convertItemYear\"\n                              [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n                              [listConfig]=\"listRightYearConfig()\"\n                              [listKeySelected]=\"listKeyToSelected().year\"\n                              [flagMouse]=\"flagMouse()\"\n                              [httpRequestDetailItemById]=\"rightYearHttpDetailConfig()\"\n                              (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'year')\"\n                              (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'year')\"\n                              (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                              (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'year')\">\n                              <div\n                                class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n                                [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'year']\">\n                                <div\n                                  class=\"libs-ui-font-h4m\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.fontStyle]=\"'normal'\">\n                                  {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n                                </div>\n                                <i\n                                  class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                  [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'year'] ? '90deg' : '270deg'\"></i>\n                              </div>\n                            </libs_ui-components-dropdown>\n                          </div>\n                        </div>\n                        <div class=\"w-1/4 flex items-center relative\">\n                          @if (\n                            (listKeyFromSelected().year &&\n                              listKeyToSelected().year &&\n                              !(listKeyFromSelected().year + 1 === listKeyToSelected().year && listKeyFromSelected().month === 12 && listKeyToSelected().month === 1) &&\n                              listKeyFromSelected().year < listKeyToSelected().year) ||\n                            (listKeyFromSelected().month && listKeyToSelected().month && listKeyFromSelected().month + 1 < +listKeyToSelected().month)\n                          ) {\n                            <div\n                              class=\"flex items-center justify-center absolute left-0 top-[-3px]\"\n                              (click)=\"handlerClickPrev(sideEnum.right)\">\n                              <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          }\n                          @if (\n                            listKeyFromSelected().month &&\n                            listKeyToSelected().month &&\n                            listKeyFromSelected().month > listKeyToSelected().month &&\n                            listKeyFromSelected().year &&\n                            listKeyToSelected().year &&\n                            listKeyFromSelected().year === listKeyToSelected().year\n                          ) {\n                            <div class=\"bg-[#ffffff] w-[21px] h-[21px] cursor-none flex items-center justify-center rounded-[50px]\"></div>\n                          }\n                          @if (\n                            !calendarVariables().right().maxDate ||\n                            calendarVariables()\n                              .right()\n                              .maxDate?.isAfter(calendarVariables().right().calendar && calendarVariables().right().calendar?.lastDay)\n                          ) {\n                            <div (click)=\"handlerClickNext(sideEnum.right)\">\n                              <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                                <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                    @if (!showDropdownsSelect() || !calendarVariables().right().dropdowns) {\n                      {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n                      {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n                    }\n                  </th>\n                </tr>\n                <tr class=\"week-days\">\n                  @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n                    <th>\n                      <span\n                        class=\"libs-ui-font-h6m text-[#6a7383]\"\n                        [style.fontWeight]=\"500\"\n                        [style.fontStyle]=\"'normal'\">\n                        {{ dayofweek }}\n                      </span>\n                    </th>\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (row of calendarVariables().right().calRows?.(); track row) {\n                  <tr\n                    class=\"h-[32px]\"\n                    [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.classList\">\n                    @for (col of calendarVariables().right().calCols?.(); track col) {\n                      <td\n                        class=\"libs-ui-font-h5r\"\n                        [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.[col]\"\n                        [class.today]=\"\n                          calendarVariables().right().calendar &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.date() === today().date() &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.month() === today().month() &&\n                          calendarVariables().right().calendar &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.year() === today().year()\n                        \"\n                        (click)=\"handlerPickerDate($event, sideEnum.right, row, col)\"\n                        (mouseenter)=\"handlerHoverDate($event, sideEnum.right, row, col)\">\n                        <span>{{ calendarVariables().right().calendar?.[row]?.[col]?.date() }}</span>\n                      </td>\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          }\n        </div>\n        @if (hasTimePicker()) {\n          <div>\n            <div class=\"flex justify-center items-center pt-[12px]\">\n              <div\n                class=\"w-full flex justify-center items-center rounded-[4px] border\"\n                [class.border-[#e6e8ed]]=\"!timePickerError()\"\n                [class.border-[#ff5454]]=\"timePickerError()\">\n                <libs_ui-components-inputs-input\n                  classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n                  dataType=\"int\"\n                  [autoAddZeroLessThan10InTypeInt]=\"true\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [maxValueNumber]=\"23\"\n                  [minValueNumber]=\"0\"\n                  [focusTimeOut]=\"0\"\n                  [blurTimeOut]=\"0\"\n                  [maxLength]=\"2\"\n                  [value]=\"timepickerValueItem().righthour()\"\n                  (outChange)=\"handlerChangeTimeValue($event, 'righthour')\"\n                  (outInputEvent)=\"handlerInputEvent($event, 'righthour')\"\n                  (outFunctionsControl)=\"handlerFunctionControl($event, 'righthour')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'righthour')\" />\n                <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n                <libs_ui-components-inputs-input\n                  classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n                  dataType=\"int\"\n                  [autoAddZeroLessThan10InTypeInt]=\"true\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [maxValueNumber]=\"59\"\n                  [minValueNumber]=\"0\"\n                  [focusTimeOut]=\"0\"\n                  [blurTimeOut]=\"0\"\n                  [maxLength]=\"2\"\n                  [value]=\"timepickerValueItem().rightminute()\"\n                  (outInputEvent)=\"handlerInputEvent($event, 'rightminute')\"\n                  (outFunctionsControl)=\"handlerFunctionControl($event, 'rightminute')\"\n                  (outChange)=\"handlerChangeTimeValue($event, 'rightminute')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'rightminute')\" />\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <div>\n    <div class=\"flex w-full\">\n      @if (!isSingle() && hasTimePicker()) {\n        <div class=\"mt-[8px] libs-ui-font-h7r text-[#ff5454] h-[14px]\">\n          @if (timePickerError()) {\n            <span>{{ 'i18n_date_compare_start_end_message_error' | translate }}</span>\n          }\n        </div>\n      }\n    </div>\n    @if (!quickRangesArray().length || !isSingle()) {\n      <div class=\"flex w-full pt-[16px] justify-between\">\n        <div class=\"flex items-center\">\n          @if (!isSingle()) {\n            @if (!endDate()) {\n              <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeLeft() }}</span>\n                }\n                &hyphen;\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeRight() }}</span>\n                }\n              </div>\n            }\n            @if (endDate()) {\n              <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeLeft() }}</span>\n                }\n                &hyphen;\n                <span>{{ endDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeRight() }}</span>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <div class=\"flex\">\n          <libs_ui-components-buttons-button\n            class=\"mr-[12px]\"\n            label=\"i18n_cancel\"\n            type=\"button-third\"\n            (outClick)=\"handlerClickCancel($event)\" />\n          <libs_ui-components-buttons-button\n            label=\"i18n_select\"\n            (outClick)=\"handlerClickApply($event)\" />\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown{display:flex;align-items:center}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar table{border-collapse:inherit;border-spacing:0 2px}.libs-ui-component-custom_ranges-calendar th,.libs-ui-component-custom_ranges-calendar td{padding:0;text-align:center;min-width:32px}.libs-ui-component-custom_ranges-calendar th span,.libs-ui-component-custom_ranges-calendar td span{pointer-events:none}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:before{font-size:20px}.libs-ui-component-custom_ranges-calendar td,.libs-ui-component-custom_ranges-calendar th{cursor:pointer;height:2em;width:2em}.libs-ui-component-custom_ranges-calendar td.available:hover,.libs-ui-component-custom_ranges-calendar th.available:hover{background-color:#f8f5fe;border-color:transparent;border-radius:8px;color:inherit;background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}.libs-ui-component-custom_ranges-calendar td{margin:.25em 0;background-color:#fff;transition:background-color .2s ease;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms;color:#071631!important}.libs-ui-component-custom_ranges-calendar td:hover{color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.off,.libs-ui-component-custom_ranges-calendar td.off.in-range,.libs-ui-component-custom_ranges-calendar td.off.start-date,.libs-ui-component-custom_ranges-calendar td.off.end-date{background-color:#fff;border-color:transparent;color:#cdd0d6!important}.libs-ui-component-custom_ranges-calendar td.focus-off{background-color:#f8f5fe!important}.libs-ui-component-custom_ranges-calendar td.in-range{background-color:#f8f5fe;border-color:transparent;border-radius:0;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today{position:relative;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today:after{position:absolute;content:\"\";width:2px;height:2px;background-color:#8e61ee;left:49%;bottom:5px}.libs-ui-component-custom_ranges-calendar td.active{transition:background .3s ease-out;background:#0000001a}.libs-ui-component-custom_ranges-calendar td.active.today:after{position:absolute;content:\"\";background-color:#fff}.libs-ui-component-custom_ranges-calendar td.active.start-date{border-radius:8px 0 0 8px}.libs-ui-component-custom_ranges-calendar td.active.end-date{border-radius:0 8px 8px 0}.libs-ui-component-custom_ranges-calendar td.active.full-date{border-radius:8px}.libs-ui-component-custom_ranges-calendar td.active,.libs-ui-component-custom_ranges-calendar td.active:hover{background-color:#8e61ee;border-color:transparent;color:#fff!important}.libs-ui-component-custom_ranges-calendar th.month{width:auto}.libs-ui-component-custom_ranges-calendar td.disabled,.libs-ui-component-custom_ranges-calendar option.disabled{color:#999!important;cursor:not-allowed;text-decoration:line-through;background-color:#f4f5f7}.libs-ui-component-custom_ranges-calendar .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right}.libs-ui-component-custom_ranges-calendar th.month>div{position:relative;display:inline-block}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"] }]
+        }], ctorParameters: () => [] });
+
+class LibsUiComponentsDatetimePickerCustomRangesComponent {
+    /** PROPERTY */
+    showCalTableInRanges = signal(false);
+    quickRangesArray = signal([]);
+    selectedQuickRange = signal(''); // quick range đã được lưu trước đó
+    chosenQuickRange = signal(undefined); // quick range đang được chọn
+    calendarShowing = signal(false);
+    timeouts = signal([]);
+    calendarFunctionControlEvent = signal(undefined);
+    chosenSingleDate = signal(undefined);
+    chosenDateRange = signal(undefined);
+    /** INPUT */
+    // readonly SelectedQuickRange = input<string>('');
+    zIndex = input(1200, { transform: (value) => value ?? 1200 });
+    classInclude = input('');
+    extendRanges = input([]);
+    widthByParent = input(false);
+    autoApply = input(false);
+    minDate = input();
+    maxDate = input();
+    listYearHiddenInputSearch = input(true, { transform: (value) => value ?? true });
+    positionQuickRanges = input('left', { transform: (value) => value ?? 'left' });
+    isSingle = input(false, { transform: (value) => value ?? false });
+    hasTimePicker = input(true);
+    flagMouse = input({ isMouseEnter: false, isMouseEnterContent: false });
+    dateOptions = input(getDateOptionsDefault());
+    alwaysShowCalendars = input(false);
+    startDate = model(getDayjs().startOf('day'));
+    endDate = model(getDayjs().endOf('day'));
+    showCustomRangeLabel = input(undefined);
+    keepCalendarOpeningWithRange = input(undefined);
+    singleDateSelected = input(undefined, {
+        transform: (value) => {
+            if (!value || !value.date) {
+                return;
+            }
+            let date = value.date;
+            if (typeof date === 'string') {
+                date = getDayjs({ date, returnDayjsIfConfigDateNotExist: true });
+            }
+            return {
+                ...value,
+                date,
+            };
+        },
+    });
+    dateRangeSelected = input(undefined, {
+        transform: (value) => {
+            if (!value) {
+                return;
+            }
+            let startDate = value.startDate;
+            let endDate = value.endDate;
+            if (typeof startDate === 'string') {
+                startDate = getDayjs({ date: startDate, returnDayjsIfConfigDateNotExist: true });
+            }
+            if (typeof endDate === 'string') {
+                endDate = getDayjs({ date: endDate, returnDayjsIfConfigDateNotExist: true });
+            }
+            return {
+                ...value,
+                startDate,
+                endDate,
+            };
+        },
+    });
+    /** OUTPUT */
+    outChangStageFlagMouse = output();
+    outUpdateWidth = output();
+    outCancel = output();
+    outSelectSingleDate = output();
+    outSelectDateRange = output();
+    outClickMenuRangeCustom = output();
+    constructor() {
+        effect(() => untracked(this.onAfterViewInit.bind(this)));
+    }
+    onAfterViewInit() {
+        if (!this.startDate()) {
+            this.startDate.set(getDayjs().startOf('day'));
+        }
+        if (!this.endDate()) {
+            this.endDate.set(getDayjs().endOf('day'));
+        }
+        const dateRangeSelected = this.dateRangeSelected();
+        const singleDateSelected = this.singleDateSelected();
+        const customRange = {
+            id: this.dateOptions()?.customRangeLabel || '',
+            label: this.dateOptions()?.customRangeLabel || '',
+        };
+        if (this.isSingle()) {
+            if (this.hasTimePicker()) {
+                const now = getDayjs();
+                this.startDate.update((current) => {
+                    if (current) {
+                        current.set('hour', 10).set('minute', 30);
+                        // current.hour(now.hour()).minute(now.minute());
+                    }
+                    return current;
+                });
+                this.endDate.update((current) => {
+                    if (current) {
+                        current.hour(now.hour()).minute(now.minute());
+                    }
+                    return current;
+                });
+            }
+            if (singleDateSelected?.date) {
+                this.startDate.set(getDayjs({ date: singleDateSelected.date }));
+                this.endDate.set(getDayjs({ date: singleDateSelected.date }));
+            }
+            this.renderRanges();
+            return;
+        }
+        if (dateRangeSelected) {
+            this.selectedQuickRange.set(dateRangeSelected.quickRangeId ? dateRangeSelected.quickRangeId : customRange.id);
+            this.chosenQuickRange.set(dateRangeSelected.quickRangeId ?? customRange.id);
+            this.startDate.set(getDayjs({ date: dateRangeSelected.startDate }));
+            this.endDate.set(getDayjs({ date: dateRangeSelected.endDate }));
+        }
+        if (this.hasTimePicker()) {
+            this.selectedQuickRange.set(customRange.id);
+            this.chosenQuickRange.set(customRange.id);
+        }
+        if (this.selectedQuickRange() === this.dateOptions()?.customRangeLabel) {
+            this.showCalTableInRanges.set(true);
+        }
+        this.renderRanges();
+    }
+    updateWidth() {
+        const timeoutId = setTimeout(() => {
+            this.outUpdateWidth.emit(1);
+        });
+        this.timeouts.update((ids) => [...ids, timeoutId]);
+    }
+    renderRanges() {
+        if (this.isSingle()) {
+            this.showCalTableInRanges.set(true);
+            return;
+        }
+        const rangesDefault = getDateRangeDefault();
+        const ranges = this.dateOptions()?.ranges;
+        this.quickRangesArray.set([]);
+        for (const key in ranges) {
+            const rangeValue = rangesDefault[key];
+            const start = getDayjs({ date: rangeValue[0], returnDayjsIfConfigDateNotExist: true });
+            const end = getDayjs({ date: rangeValue[1], returnDayjsIfConfigDateNotExist: true });
+            this.quickRangesArray.update((current) => {
+                current.push({
+                    id: key,
+                    label: ranges[key],
+                    values: [start, end],
+                });
+                return current;
+            });
+        }
+        if (this.showCustomRangeLabel() && this.dateOptions()?.customRangeLabel) {
+            this.quickRangesArray.update((current) => {
+                current.push({
+                    id: this.dateOptions()?.customRangeLabel || '',
+                    label: this.dateOptions()?.customRangeLabel || '',
+                });
+                return current;
+            });
+        }
+        if (this.extendRanges()) {
+            this.quickRangesArray.update((current) => {
+                current.unshift(...this.extendRanges());
+                return current;
+            });
+        }
+        if (!this.quickRangesArray().length) {
+            this.showCalTableInRanges.set(true);
+        }
+    }
+    handlerCancel() {
+        this.outCancel.emit('');
+    }
+    handlerPickerDate(event) {
+        this.chosenSingleDate.set({
+            displayLabel: event.displayLabel,
+            date: event.startDate,
+            values: event.detailDatePicker.start(),
+        });
+        if (!this.isSingle() && event.startDate && !event.endDate) {
+            const endTime = event.detailDatePicker.end();
+            event.endDate = event.startDate
+                .clone()
+                .hour(endTime.hour)
+                .minute(endTime.minute)
+                .second(59);
+        }
+        this.chosenDateRange.set({
+            quickRangeId: this.chosenQuickRange(),
+            ...event,
+        });
+        const chosenSingleDate = this.chosenSingleDate();
+        const chosenDateRange = this.chosenDateRange();
+        if (this.isSingle() && chosenSingleDate) {
+            this.outSelectSingleDate.emit(chosenSingleDate);
+            return;
+        }
+        if (!chosenDateRange || (!chosenDateRange.startDate && !chosenDateRange.endDate)) {
+            return;
+        }
+        this.outSelectDateRange.emit(chosenDateRange);
+    }
+    handlerClickRange(e, range) {
+        e.stopPropagation();
+        this.chosenQuickRange.set(range.id);
+        if (range.id === this.dateOptions()?.customRangeLabel) {
+            if (!this.calendarShowing() && !this.showCalTableInRanges()) {
+                this.calendarShowing.set(true);
+                this.showCalTableInRanges.set(true);
+                this.outClickMenuRangeCustom.emit(range);
+                this.updateWidth();
+            }
+            return;
+        }
+        this.updateWidth();
+        if (this.extendRanges()) {
+            const findExternalRange = this.extendRanges().find((item) => item.label === range.id);
+            if (findExternalRange && range.id === findExternalRange.label) {
+                if (findExternalRange.values) {
+                    this.outSelectDateRange.emit({ quickRangeId: findExternalRange.id, displayLabel: findExternalRange.label, startDate: findExternalRange.values[0], endDate: findExternalRange.values[1] });
+                    return;
+                }
+                this.outSelectDateRange.emit({ quickRangeId: findExternalRange.id, displayLabel: findExternalRange.label, startDate: undefined, endDate: undefined });
+                return;
+            }
+        }
+        // const dates = range.values ?? [];
+        // this.startDate.set(dates[0].clone().hour(0).minute(0).second(0));
+        // this.endDate.set(dates[1].clone().hour(23).minute(59).second(59));
+        // this.timeValue = { hour: 0, toHour: 0, minute: 23, toMinute: 59 };
+        // this.timepickerVariables.left.selectedHour = 0;
+        // this.timepickerVariables.left.selectedMinute = 0;
+        // this.timepickerVariables.right.selectedHour = 23;
+        // this.timepickerVariables.right.selectedMinute = 59;
+        // this.showRangeLabelOnInput && label !== this.localeDay.customRangeLabel ? this.chosenLabel = label : this.calculateChosenLabel();
+        // // this.autoApply.set(true);
+        // if (!this.hasTimePicker()) {
+        //   if(this.startDate()) {
+        //     this.startDate.set(this.startDate()?.startOf('day'));
+        //   }
+        //   if(this.endDate()) {
+        //     this.endDate.set(this.endDate()?.endOf('day'));
+        //   }
+        // }
+        // if (!this.alwaysShowCalendars()) {
+        //   this.calendarShowing.set(false);
+        // }
+        // this.outClickRange.emit(range);
+        if (!this.keepCalendarOpeningWithRange() || !this.alwaysShowCalendars()) {
+            this.outSelectDateRange.emit({ quickRangeId: range.id, displayLabel: range.label, startDate: range.values?.[0], endDate: range.values?.[1] });
+            return;
+        }
+        // if (this.timePicker) {
+        //   this.renderTimePicker(SideEnum.left);
+        //   this.renderTimePicker(SideEnum.right);
+        // }
+        // if (this.getMaxDate() && this.getMaxDate().isSame(dates[0], 'month')) {
+        //   this.rightCalendar.month = this.rightCalendar.month && this.rightCalendar.month.month(dates[0].month());
+        //   this.rightCalendar.month = this.rightCalendar.month && this.rightCalendar.month.year(dates[0].year());
+        //   this.leftCalendar.month = this.leftCalendar.month && this.leftCalendar.month.month(dates[0].month() - 1);
+        //   this.leftCalendar.month = this.leftCalendar.month && this.leftCalendar.month.year(dates[1].year());
+        //   return this.updateCalendars();
+        // }
+        // this.leftCalendar.month = this.leftCalendar.month && this.leftCalendar.month.month(dates[0].month());
+        // this.leftCalendar.month = this.leftCalendar.month && this.leftCalendar.month.year(dates[0].year());
+        // const nextMonth = dates[0].clone().add(1, 'month');
+        // this.rightCalendar.month = this.rightCalendar.month && this.rightCalendar.month.month(nextMonth.month());
+        // this.rightCalendar.month = this.rightCalendar.month && this.rightCalendar.month.year(nextMonth.year());
+        // this.updateCalendars();
+        return;
+    }
+    handlerClickCancel(event) {
+        event.stopPropagation();
+        // this.startDate.set(dayjs(0));
+        // this.endDate.set(dayjs(0));
+        this.outCancel.emit('');
+    }
+    handlerChangeFlagMouse(flagMouse) {
+        this.outChangStageFlagMouse.emit(flagMouse);
+    }
+    handlerFunctionsControl(event) {
+        this.calendarFunctionControlEvent.set(event);
+    }
+    ngOnDestroy() {
+        this.timeouts().forEach((item) => clearTimeout(item));
+        // this.onDestroy.next();
+        // this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimePickerCustomRangesComponent, isStandalone: true, selector: "libs_ui-components-datetime-picker-custom_ranges", inputs: { zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, extendRanges: { classPropertyName: "extendRanges", publicName: "extendRanges", isSignal: true, isRequired: false, transformFunction: null }, widthByParent: { classPropertyName: "widthByParent", publicName: "widthByParent", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, listYearHiddenInputSearch: { classPropertyName: "listYearHiddenInputSearch", publicName: "listYearHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null }, positionQuickRanges: { classPropertyName: "positionQuickRanges", publicName: "positionQuickRanges", isSignal: true, isRequired: false, transformFunction: null }, isSingle: { classPropertyName: "isSingle", publicName: "isSingle", isSignal: true, isRequired: false, transformFunction: null }, hasTimePicker: { classPropertyName: "hasTimePicker", publicName: "hasTimePicker", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowCalendars: { classPropertyName: "alwaysShowCalendars", publicName: "alwaysShowCalendars", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, keepCalendarOpeningWithRange: { classPropertyName: "keepCalendarOpeningWithRange", publicName: "keepCalendarOpeningWithRange", isSignal: true, isRequired: false, transformFunction: null }, singleDateSelected: { classPropertyName: "singleDateSelected", publicName: "singleDateSelected", isSignal: true, isRequired: false, transformFunction: null }, dateRangeSelected: { classPropertyName: "dateRangeSelected", publicName: "dateRangeSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange", outChangStageFlagMouse: "outChangStageFlagMouse", outUpdateWidth: "outUpdateWidth", outCancel: "outCancel", outSelectSingleDate: "outSelectSingleDate", outSelectDateRange: "outSelectDateRange", outClickMenuRangeCustom: "outClickMenuRangeCustom" }, ngImport: i0, template: "<div\n  #pickerContainer\n  class=\"libs-ui-component-custom_ranges flex rounded-[4px] bg-[#ffffff] z-[1000] overflow-hidden\"\n  [class.flex-row-reverse]=\"positionQuickRanges() === 'right'\">\n  @if (!isSingle()) {\n    <div\n      class=\"libs-ui-component-custom_ranges-ranges {{ classInclude() || '' }}\"\n      [class.border-l-[#e6e8ed]]=\"positionQuickRanges() === 'right' && showCalTableInRanges()\"\n      [class.border-l]=\"positionQuickRanges() === 'right' && showCalTableInRanges()\"\n      [class.border-r-[#e6e8ed]]=\"positionQuickRanges() === 'left' && showCalTableInRanges()\"\n      [class.border-r]=\"positionQuickRanges() === 'left' && showCalTableInRanges()\"\n      [class.!min-h-[260px]]=\"showCalTableInRanges() && !isSingle()\"\n      [class.!min-h-[300px]]=\"hasTimePicker() && !isSingle()\"\n      [class.!w-[160px]]=\"!widthByParent()\"\n      [class.!w-full]=\"widthByParent()\">\n      @for (range of quickRangesArray(); track range.id) {\n        <div\n          class=\"flex items-center hover:bg-[var(--libs-ui-color-light-3)] cursor-pointer px-[16px] py-[8px]\"\n          [class.libs-ui-selected-range]=\"range.id === chosenQuickRange() && showCustomRangeLabel()\"\n          [class.bg-[var(--libs-ui-color-light-3)]]=\"range.id === chosenQuickRange() || range.id === selectedQuickRange()\"\n          (click)=\"handlerClickRange($event, range)\">\n          <div class=\"libs-ui-font-h5r flex text-[#333333] min-w-0 w-full\">\n            <div\n              LibsUiComponentsPopoverDirective\n              [ignoreStopPropagationEvent]=\"true\"\n              type=\"text\"\n              [config]=\"{ maxWidth: 160, direction: 'top', zIndex: (zIndex() || 1000) + 1 }\"\n              [innerHTML]=\"range.label\"></div>\n          </div>\n          <i\n            class=\"text-[12px] ml-[16px]\"\n            [class.libs-ui-icon-check]=\"range.id === selectedQuickRange()\"\n            [class.text-[var(--libs-ui-color-default)]]=\"range.id === selectedQuickRange()\"></i>\n        </div>\n      }\n    </div>\n  }\n  @if (showCalTableInRanges()) {\n    <div class=\"m-[16px] w-full\">\n      <libs_ui-components-datetime-picker-custom_ranges-calendar\n        [isSingle]=\"isSingle()\"\n        [autoApply]=\"autoApply()\"\n        [zIndex]=\"zIndex()\"\n        [flagMouse]=\"flagMouse()\"\n        [dateOptions]=\"dateOptions()\"\n        [hasTimePicker]=\"hasTimePicker()\"\n        [quickRangesArray]=\"quickRangesArray()\"\n        [startDate]=\"startDate()\"\n        [endDate]=\"endDate()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [listYearHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n        [classInclude]=\"'w-full'\"\n        (outCancel)=\"handlerCancel()\"\n        (outPickerDate)=\"handlerPickerDate($event)\"\n        (outFunctionsControl)=\"handlerFunctionsControl($event)\"\n        (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\" />\n    </div>\n  }\n</div>\n", styles: [".libs-ui-component-custom_ranges{position:relative;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges{width:159px;flex-shrink:0}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges .libs-ui-selected-range{position:relative}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges .libs-ui-selected-range:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:2px;background-color:var(--libs-ui-color-default)!important}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, selector: "libs_ui-components-datetime-picker-custom_ranges-calendar", inputs: ["quickRangesArray", "zIndex", "classInclude", "isSingle", "showDropdownsSelect", "hasTimePicker", "flagMouse", "dateOptions", "autoApply", "hasSecondPicker", "showRangeLabelOnInput", "startDate", "endDate", "minDate", "maxDate", "listYearHiddenInputSearch"], outputs: ["startDateChange", "endDateChange", "outChangStageFlagMouse", "outPickerDate", "outCancel", "outUpdateWidth", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-datetime-picker-custom_ranges', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, LibsUiComponentsPopoverComponent], template: "<div\n  #pickerContainer\n  class=\"libs-ui-component-custom_ranges flex rounded-[4px] bg-[#ffffff] z-[1000] overflow-hidden\"\n  [class.flex-row-reverse]=\"positionQuickRanges() === 'right'\">\n  @if (!isSingle()) {\n    <div\n      class=\"libs-ui-component-custom_ranges-ranges {{ classInclude() || '' }}\"\n      [class.border-l-[#e6e8ed]]=\"positionQuickRanges() === 'right' && showCalTableInRanges()\"\n      [class.border-l]=\"positionQuickRanges() === 'right' && showCalTableInRanges()\"\n      [class.border-r-[#e6e8ed]]=\"positionQuickRanges() === 'left' && showCalTableInRanges()\"\n      [class.border-r]=\"positionQuickRanges() === 'left' && showCalTableInRanges()\"\n      [class.!min-h-[260px]]=\"showCalTableInRanges() && !isSingle()\"\n      [class.!min-h-[300px]]=\"hasTimePicker() && !isSingle()\"\n      [class.!w-[160px]]=\"!widthByParent()\"\n      [class.!w-full]=\"widthByParent()\">\n      @for (range of quickRangesArray(); track range.id) {\n        <div\n          class=\"flex items-center hover:bg-[var(--libs-ui-color-light-3)] cursor-pointer px-[16px] py-[8px]\"\n          [class.libs-ui-selected-range]=\"range.id === chosenQuickRange() && showCustomRangeLabel()\"\n          [class.bg-[var(--libs-ui-color-light-3)]]=\"range.id === chosenQuickRange() || range.id === selectedQuickRange()\"\n          (click)=\"handlerClickRange($event, range)\">\n          <div class=\"libs-ui-font-h5r flex text-[#333333] min-w-0 w-full\">\n            <div\n              LibsUiComponentsPopoverDirective\n              [ignoreStopPropagationEvent]=\"true\"\n              type=\"text\"\n              [config]=\"{ maxWidth: 160, direction: 'top', zIndex: (zIndex() || 1000) + 1 }\"\n              [innerHTML]=\"range.label\"></div>\n          </div>\n          <i\n            class=\"text-[12px] ml-[16px]\"\n            [class.libs-ui-icon-check]=\"range.id === selectedQuickRange()\"\n            [class.text-[var(--libs-ui-color-default)]]=\"range.id === selectedQuickRange()\"></i>\n        </div>\n      }\n    </div>\n  }\n  @if (showCalTableInRanges()) {\n    <div class=\"m-[16px] w-full\">\n      <libs_ui-components-datetime-picker-custom_ranges-calendar\n        [isSingle]=\"isSingle()\"\n        [autoApply]=\"autoApply()\"\n        [zIndex]=\"zIndex()\"\n        [flagMouse]=\"flagMouse()\"\n        [dateOptions]=\"dateOptions()\"\n        [hasTimePicker]=\"hasTimePicker()\"\n        [quickRangesArray]=\"quickRangesArray()\"\n        [startDate]=\"startDate()\"\n        [endDate]=\"endDate()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [listYearHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n        [classInclude]=\"'w-full'\"\n        (outCancel)=\"handlerCancel()\"\n        (outPickerDate)=\"handlerPickerDate($event)\"\n        (outFunctionsControl)=\"handlerFunctionsControl($event)\"\n        (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\" />\n    </div>\n  }\n</div>\n", styles: [".libs-ui-component-custom_ranges{position:relative;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges{width:159px;flex-shrink:0}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges .libs-ui-selected-range{position:relative}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges .libs-ui-selected-range:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:2px;background-color:var(--libs-ui-color-default)!important}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"] }]
+        }], ctorParameters: () => [] });
+
+class LibsUiComponentsDatetimePickerComponent {
+    /** PROPERTY */
+    ERROR_MESSAGE_EMPTY_VALID = ERROR_MESSAGE_EMPTY_VALID;
+    showRangesPopup = signal(false);
+    width = computed(this.computedWidth.bind(this));
+    singleError = signal({ message: undefined });
+    chosenDateFromRanges = signal({});
+    selectedDateFromCalendar;
+    displayRangeTitle = computed(() => {
+        const selectedLabel = this.chosenDateFromRanges().selectedLabel;
+        if (this.isSingle() || !selectedLabel) {
+            return;
+        }
+        return selectedLabel;
+    });
+    popoverFunctionControlEvent = signal(undefined);
+    /** INPUT */
+    dateOptions = input(getDateOptionsDefault(), { transform: (value) => value ?? getDateOptionsDefault() });
+    showCustomRangeLabel = input(true, { transform: (value) => value ?? true });
+    labelConfig = input();
+    disable = input(false);
+    readonly = input(false);
+    classInclude = input('');
+    classPickerInclude = input('');
+    classPickerContentInclude = input('');
+    ignoreBorderQuickRange = input(false);
+    useColorModeExist = input(false);
+    hasTimePicker = input(true);
+    allowReset = input(true);
+    widthByLabel = input(true, { transform: (value) => value ?? true });
+    directionPopover = input('bottom', { transform: (value) => value ?? 'bottom' });
+    defaultWidth = input(undefined);
+    isSingle = input(false);
+    extendRanges = input([]);
+    isBorderError = input(false);
+    minDate = input();
+    maxDate = input();
+    placeholder = input();
+    listYearHiddenInputSearch = input(false, { transform: (value) => value ?? false });
+    validRequired = input(undefined);
+    ignoreStopPropagationEvent = input(false);
+    flagMouse = model({ isMouseEnter: false, isMouseEnterContent: false });
+    widthByParent = input(false);
+    zIndex = input(1200, { transform: (value) => value ?? 1200 });
+    rangesPopoverPosition = input('start', { transform: (value) => value ?? 'start' });
+    rangesPopoverPositionDistance = input(0, { transform: (value) => value ?? 0 });
+    isNgContent = input(false);
+    classIncludeCustomRanges = input('');
+    autoApply = input(false);
+    positionQuickRanges = input('left'); // vị trí list chọn nhanh khoảng thời gian
+    trackDateRageUpdateLabel = input(false);
+    singleDateSelected = model();
+    dateRangeSelected = model();
+    /** OUTPUT */
+    outChangStageFlagMouse = output();
+    outReset = output();
+    outSelectSingleDate = output();
+    outSelectDateRange = output();
+    outFunctionsControl = output();
+    constructor() {
+        effect(() => {
+            const date = this.singleDateSelected()?.date;
+            if (date) {
+                untracked(() => {
+                    const formatDate = this.hasTimePicker() ? 'DD/MM/YYYY HH:mm' : 'DD/MM/YYYY';
+                    const startTime = getDayjs({ date }).format(formatDate);
+                    this.chosenDateFromRanges.set({ selectedLabel: startTime });
+                });
+            }
+        });
+        effect(() => {
+            if (this.trackDateRageUpdateLabel()) {
+                this.updateChosenDateFromRangesFromDateRangeSelected(this.dateRangeSelected());
+                return;
+            }
+            untracked(() => this.updateChosenDateFromRangesFromDateRangeSelected(this.dateRangeSelected()));
+        });
+    }
+    ngOnInit() {
+        this.outFunctionsControl.emit(this.FunctionsControl);
+    }
+    get FunctionsControl() {
+        return {
+            checkIsValid: this.checkIsValid.bind(this),
+            resetError: this.resetError.bind(this),
+            reset: this.reset.bind(this),
+        };
+    }
+    handlerSelectRanges(event) {
+        event.stopPropagation();
+    }
+    handlerChangStageFlagMouse(flagMouse) {
+        this.flagMouse.set(flagMouse);
+    }
+    handlerChangStagePopoverFlagMouse(flagMouse) {
+        if (this.flagMouse()?.isMouseEnterContent) {
+            flagMouse.isMouseEnterContent = true;
+        }
+        this.outChangStageFlagMouse.emit(flagMouse);
+    }
+    handlerFunctionControl(event) {
+        this.popoverFunctionControlEvent.set(event);
+    }
+    handlerPopoverEvent(event) {
+        if (event === 'remove') {
+            this.showRangesPopup.set(false);
+        }
+    }
+    async handlerPickerSingleDate(data) {
+        this.outSelectSingleDate.emit(data);
+        this.chosenDateFromRanges.set({ selectedLabel: data.displayLabel });
+        if (this.hasTimePicker()) {
+            const startTime = getDayjs({ date: data.date, returnDayjsIfConfigDateNotExist: true }).format('DD/MM/YYYY HH:mm');
+            this.chosenDateFromRanges.update((current) => {
+                current.selectedLabel = `${startTime}`;
+                return current;
+            });
+        }
+        this.singleDateSelected.set(data);
+        this.popoverFunctionControlEvent()?.removePopoverOverlay();
+        await this.checkIsValid();
+    }
+    async handlerPickerDateRange(data) {
+        if ((data.displayLabel?.indexOf('Invalid Date') ?? -1) > -1) {
+            return;
+        }
+        // this.selectedKey = data.selectedLabel;
+        this.chosenDateFromRanges.set({ selectedLabel: data.displayLabel });
+        // this.selected.start = getDayjs<Dayjs>({date:data.startDate});
+        // this.selected.end = getDayjs<Dayjs>({date:data.endDate});
+        if (this.hasTimePicker()) {
+            const startTime = getDayjs({ date: data.startDate, returnDayjsIfConfigDateNotExist: true }).format('DD/MM/YYYY HH:mm');
+            const endTime = getDayjs({ date: data.endDate, returnDayjsIfConfigDateNotExist: true }).format('DD/MM/YYYY HH:mm');
+            this.chosenDateFromRanges.update((current) => {
+                current.selectedLabel = `${startTime} - ${endTime}`;
+                return current;
+            });
+        }
+        // this.moDatePicker.emit(this.singleDatePicker ? { chosenLabel: this.dateValue.chosenLabel, singleDate: this.dateValue.startDate?.utc(), startDate: this.dateValue.startDate?.utc(), endDate: this.dateValue.endDate?.utc() } : { chosenLabel: this.dateValue.chosenLabel, startDate: this.dateValue.startDate?.utc(), endDate: this.dateValue.endDate?.utc() });
+        const showViewExternalRangeLabel = this.extendRanges()?.find((item) => item.id === this.chosenDateFromRanges().selectedLabel);
+        if (this.extendRanges() && showViewExternalRangeLabel) {
+            this.chosenDateFromRanges.update((current) => {
+                current.selectedLabel = showViewExternalRangeLabel && showViewExternalRangeLabel.label;
+                return current;
+            });
+        }
+        this.dateRangeSelected.set({ quickRangeId: data.quickRangeId, displayLabel: data.displayLabel, startDate: data.startDate, endDate: data.endDate });
+        this.outSelectDateRange.emit({ quickRangeId: data.quickRangeId, displayLabel: data.displayLabel, startDate: data.startDate, endDate: data.endDate });
+        this.popoverFunctionControlEvent()?.removePopoverOverlay();
+        await this.checkIsValid();
+    }
+    updateChosenDateFromRangesFromDateRangeSelected(dateRangeSelected) {
+        untracked(() => {
+            if (dateRangeSelected?.quickRangeId) {
+                const findKeyRange = Object.keys(this.dateOptions().ranges).find((key) => key === dateRangeSelected?.quickRangeId);
+                if (findKeyRange) {
+                    this.chosenDateFromRanges.set({ selectedLabel: this.dateOptions().ranges[findKeyRange] });
+                    return;
+                }
+            }
+            if (dateRangeSelected?.startDate && dateRangeSelected?.endDate) {
+                const formatDate = this.hasTimePicker() ? 'DD/MM/YYYY HH:mm' : 'DD/MM/YYYY';
+                const startTime = getDayjs({ date: dateRangeSelected?.startDate })?.format(formatDate);
+                const endTime = getDayjs({ date: dateRangeSelected?.endDate })?.format(formatDate);
+                this.chosenDateFromRanges.set({ selectedLabel: `${startTime} - ${endTime}` });
+            }
+        });
+    }
+    async handlerReset(event) {
+        event?.stopPropagation();
+        await this.reset(true);
+    }
+    async reset(checkIsValid, dateRangeReset, singleDateReset) {
+        this.chosenDateFromRanges.set({});
+        this.dateRangeSelected.set(dateRangeReset);
+        if (dateRangeReset) {
+            this.updateChosenDateFromRangesFromDateRangeSelected(dateRangeReset);
+        }
+        if (singleDateReset) {
+            this.singleDateSelected.set(singleDateReset);
+        }
+        this.outReset.emit(dateRangeReset || singleDateReset);
+        if (checkIsValid && this.validRequired()) {
+            await this.checkIsValid();
+        }
+    }
+    handlerUpdateWidth() {
+        this.popoverFunctionControlEvent()?.updatePopoverOverlayPosition();
+    }
+    handlerCancel() {
+        this.popoverFunctionControlEvent()?.removePopoverOverlay();
+    }
+    async checkIsValid() {
+        if (this.readonly() || this.disable()) {
+            return true;
+        }
+        await this.validate();
+        return this.singleError().message ? false : true;
+    }
+    async validate() {
+        this.singleError.set({ message: undefined });
+        if (!this.validRequired()) {
+            return;
+        }
+        if (this.validRequired() && !this.chosenDateFromRanges().selectedLabel) {
+            this.singleError.set({
+                message: this.validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID,
+                interpolateParams: this.validRequired()?.interpolateParams || {},
+            });
+            return;
+        }
+    }
+    async resetError(message, interpolateParams) {
+        this.singleError.set({ message, interpolateParams });
+    }
+    computedWidth() {
+        if (this.widthByLabel()) {
+            return;
+        }
+        if (this.defaultWidth()) {
+            return this.defaultWidth();
+        }
+        if (this.hasTimePicker()) {
+            return !this.isSingle() ? 322 : 190;
+        }
+        return !this.isSingle() ? 232 : 152;
+    }
+    ngOnDestroy() {
+        return;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimePickerComponent, isStandalone: true, selector: "libs_ui-components-datetime-picker", inputs: { dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, classPickerInclude: { classPropertyName: "classPickerInclude", publicName: "classPickerInclude", isSignal: true, isRequired: false, transformFunction: null }, classPickerContentInclude: { classPropertyName: "classPickerContentInclude", publicName: "classPickerContentInclude", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderQuickRange: { classPropertyName: "ignoreBorderQuickRange", publicName: "ignoreBorderQuickRange", isSignal: true, isRequired: false, transformFunction: null }, useColorModeExist: { classPropertyName: "useColorModeExist", publicName: "useColorModeExist", isSignal: true, isRequired: false, transformFunction: null }, hasTimePicker: { classPropertyName: "hasTimePicker", publicName: "hasTimePicker", isSignal: true, isRequired: false, transformFunction: null }, allowReset: { classPropertyName: "allowReset", publicName: "allowReset", isSignal: true, isRequired: false, transformFunction: null }, widthByLabel: { classPropertyName: "widthByLabel", publicName: "widthByLabel", isSignal: true, isRequired: false, transformFunction: null }, directionPopover: { classPropertyName: "directionPopover", publicName: "directionPopover", isSignal: true, isRequired: false, transformFunction: null }, defaultWidth: { classPropertyName: "defaultWidth", publicName: "defaultWidth", isSignal: true, isRequired: false, transformFunction: null }, isSingle: { classPropertyName: "isSingle", publicName: "isSingle", isSignal: true, isRequired: false, transformFunction: null }, extendRanges: { classPropertyName: "extendRanges", publicName: "extendRanges", isSignal: true, isRequired: false, transformFunction: null }, isBorderError: { classPropertyName: "isBorderError", publicName: "isBorderError", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, listYearHiddenInputSearch: { classPropertyName: "listYearHiddenInputSearch", publicName: "listYearHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, widthByParent: { classPropertyName: "widthByParent", publicName: "widthByParent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, rangesPopoverPosition: { classPropertyName: "rangesPopoverPosition", publicName: "rangesPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, rangesPopoverPositionDistance: { classPropertyName: "rangesPopoverPositionDistance", publicName: "rangesPopoverPositionDistance", isSignal: true, isRequired: false, transformFunction: null }, isNgContent: { classPropertyName: "isNgContent", publicName: "isNgContent", isSignal: true, isRequired: false, transformFunction: null }, classIncludeCustomRanges: { classPropertyName: "classIncludeCustomRanges", publicName: "classIncludeCustomRanges", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, positionQuickRanges: { classPropertyName: "positionQuickRanges", publicName: "positionQuickRanges", isSignal: true, isRequired: false, transformFunction: null }, trackDateRageUpdateLabel: { classPropertyName: "trackDateRageUpdateLabel", publicName: "trackDateRageUpdateLabel", isSignal: true, isRequired: false, transformFunction: null }, singleDateSelected: { classPropertyName: "singleDateSelected", publicName: "singleDateSelected", isSignal: true, isRequired: false, transformFunction: null }, dateRangeSelected: { classPropertyName: "dateRangeSelected", publicName: "dateRangeSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { flagMouse: "flagMouseChange", singleDateSelected: "singleDateSelectedChange", dateRangeSelected: "dateRangeSelectedChange", outChangStageFlagMouse: "outChangStageFlagMouse", outReset: "outReset", outSelectSingleDate: "outSelectSingleDate", outSelectDateRange: "outSelectDateRange", outFunctionsControl: "outFunctionsControl" }, ngImport: i0, template: "<div class=\"libs-ui-date-picker {{ classInclude() }}\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label\n      [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required\"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n  <div class=\"flex w-full\">\n    <libs_ui-components-popover\n      [class]=\"classPickerInclude()\"\n      [ignoreShowPopover]=\"disable() || readonly()\"\n      [mode]=\"'click'\"\n      [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n      [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n      [flagMouse]=\"flagMouse()\"\n      [config]=\"{\n        animationConfig: {},\n        maxWidth: 770,\n        maxHeight: 425,\n        directionDistance: 2,\n        template: customRangesRef,\n        widthByParent: widthByParent(),\n        whiteTheme: true,\n        ignoreArrow: true,\n        zIndex: zIndex(),\n        classInclude: 'rounded-[4px] ',\n        direction: directionPopover(),\n        position: { mode: rangesPopoverPosition(), distance: rangesPopoverPositionDistance() },\n      }\"\n      (outChangStageFlagMouse)=\"handlerChangStagePopoverFlagMouse($event)\"\n      (outFunctionsControl)=\"handlerFunctionControl($event)\"\n      (outEvent)=\"handlerPopoverEvent($event)\">\n      @if (!isNgContent()) {\n        <div\n          #containerRef\n          class=\"flex items-center px-[12px] h-[32px] rounded-[4px] bg-[#ffffff] cursor-pointer libs-ui-font-h5r {{ classPickerContentInclude() }}\"\n          [class.libs-ui-disable]=\"disable()\"\n          [class.libs-ui-disable-background]=\"disable()\"\n          [class.!border-none]=\"ignoreBorderQuickRange()\"\n          [class.libs-ui-border-general]=\"!singleError().message && !ignoreBorderQuickRange()\"\n          [class.libs-ui-border-error-general]=\"(singleError().message || isBorderError()) && !ignoreBorderQuickRange()\"\n          [class.min-w-[284px]]=\"!chosenDateFromRanges().selectedLabel && !isSingle() && hasTimePicker()\"\n          [class.!border]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n          [class.!border-[#4e8cf7]]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n          [class.libs-ui-readonly]=\"readonly()\"\n          [class.libs-ui-readonly-background]=\"readonly()\"\n          [style.width.px]=\"width()\"\n          (click)=\"handlerSelectRanges($event)\">\n          <div class=\"libs-ui-icon-calendar text-[#9ca2ad] text-[16px]\"></div>\n          <div\n            class=\"ml-[8px] libs-ui-date-picker-label\"\n            [class.!text-[#071631]]=\"!disable()\"\n            [class.!text-[#9ca2ad]]=\"disable()\">\n            @if (!chosenDateFromRanges().selectedLabel) {\n              @if (!isSingle()) {\n                @if (!placeholder()) {\n                  <span class=\"text-[#9ca2ad]\">\n                    dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                    - dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                  </span>\n                } @else {\n                  <span class=\"text-[#9ca2ad]\">\n                    @let constHtmlPlaceholder = placeholder() || ' ';\n                    {{ constHtmlPlaceholder | translate }}\n                  </span>\n                }\n              }\n              @if (isSingle()) {\n                @if (!placeholder()) {\n                  <span class=\"text-[#9ca2ad]\">\n                    dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                  </span>\n                } @else {\n                  <span class=\"text-[#9ca2ad]\">\n                    @let constHtmlPlaceholder = placeholder() || ' ';\n                    {{ constHtmlPlaceholder | translate }}\n                  </span>\n                }\n              }\n            }\n            @if (chosenDateFromRanges().selectedLabel && !isSingle()) {\n              {{ displayRangeTitle() }}\n            }\n            @if (chosenDateFromRanges().selectedLabel && isSingle()) {\n              <span [class.text-[#29c7cc]]=\"useColorModeExist() || false\">\n                {{ chosenDateFromRanges().selectedLabel }}\n              </span>\n            }\n          </div>\n          @if (chosenDateFromRanges().selectedLabel && allowReset() && !disable() && !readonly()) {\n            <div class=\"pl-[12px] ml-auto h-full flex items-center\">\n              <i\n                class=\"libs-ui-icon-close-circle-solid text-[16px] text-[#cdd0d6]\"\n                (click)=\"handlerReset($event)\"></i>\n            </div>\n          }\n        </div>\n      }\n      @if (isNgContent()) {\n        <div (click)=\"handlerSelectRanges($event)\">\n          <ng-content></ng-content>\n        </div>\n      }\n    </libs_ui-components-popover>\n  </div>\n  @if (singleError().message && !validRequired()?.ignoreMessage) {\n    @let constHtmlMessage = singleError().message || ERROR_MESSAGE_EMPTY_VALID;\n    <div\n      class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r libs-ui-text-error\"\n      [innerHTML]=\"constHtmlMessage | translate: validRequired()?.interpolateParams\"></div>\n  }\n</div>\n\n<ng-template #customRangesRef>\n  <libs_ui-components-datetime-picker-custom_ranges\n    [zIndex]=\"zIndex()\"\n    [classInclude]=\"classIncludeCustomRanges()\"\n    [widthByParent]=\"widthByParent()\"\n    [dateOptions]=\"dateOptions()\"\n    [positionQuickRanges]=\"positionQuickRanges()\"\n    [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n    [autoApply]=\"autoApply()\"\n    [isSingle]=\"isSingle()\"\n    [minDate]=\"minDate()\"\n    [maxDate]=\"maxDate()\"\n    [listYearHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n    [singleDateSelected]=\"singleDateSelected()\"\n    [dateRangeSelected]=\"dateRangeSelected()\"\n    [extendRanges]=\"extendRanges()\"\n    [hasTimePicker]=\"hasTimePicker()\"\n    (outUpdateWidth)=\"handlerUpdateWidth()\"\n    (outCancel)=\"handlerCancel()\"\n    (outSelectSingleDate)=\"handlerPickerSingleDate($event)\"\n    (outSelectDateRange)=\"handlerPickerDateRange($event)\"\n    (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n    (outClickMenuRangeCustom)=\"handlerUpdateWidth()\" />\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsDatetimePickerCustomRangesComponent, selector: "libs_ui-components-datetime-picker-custom_ranges", inputs: ["zIndex", "classInclude", "extendRanges", "widthByParent", "autoApply", "minDate", "maxDate", "listYearHiddenInputSearch", "positionQuickRanges", "isSingle", "hasTimePicker", "flagMouse", "dateOptions", "alwaysShowCalendars", "startDate", "endDate", "showCustomRangeLabel", "keepCalendarOpeningWithRange", "singleDateSelected", "dateRangeSelected"], outputs: ["startDateChange", "endDateChange", "outChangStageFlagMouse", "outUpdateWidth", "outCancel", "outSelectSingleDate", "outSelectDateRange", "outClickMenuRangeCustom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-datetime-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsLabelComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsDatetimePickerCustomRangesComponent], template: "<div class=\"libs-ui-date-picker {{ classInclude() }}\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label\n      [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required\"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n  <div class=\"flex w-full\">\n    <libs_ui-components-popover\n      [class]=\"classPickerInclude()\"\n      [ignoreShowPopover]=\"disable() || readonly()\"\n      [mode]=\"'click'\"\n      [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n      [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n      [flagMouse]=\"flagMouse()\"\n      [config]=\"{\n        animationConfig: {},\n        maxWidth: 770,\n        maxHeight: 425,\n        directionDistance: 2,\n        template: customRangesRef,\n        widthByParent: widthByParent(),\n        whiteTheme: true,\n        ignoreArrow: true,\n        zIndex: zIndex(),\n        classInclude: 'rounded-[4px] ',\n        direction: directionPopover(),\n        position: { mode: rangesPopoverPosition(), distance: rangesPopoverPositionDistance() },\n      }\"\n      (outChangStageFlagMouse)=\"handlerChangStagePopoverFlagMouse($event)\"\n      (outFunctionsControl)=\"handlerFunctionControl($event)\"\n      (outEvent)=\"handlerPopoverEvent($event)\">\n      @if (!isNgContent()) {\n        <div\n          #containerRef\n          class=\"flex items-center px-[12px] h-[32px] rounded-[4px] bg-[#ffffff] cursor-pointer libs-ui-font-h5r {{ classPickerContentInclude() }}\"\n          [class.libs-ui-disable]=\"disable()\"\n          [class.libs-ui-disable-background]=\"disable()\"\n          [class.!border-none]=\"ignoreBorderQuickRange()\"\n          [class.libs-ui-border-general]=\"!singleError().message && !ignoreBorderQuickRange()\"\n          [class.libs-ui-border-error-general]=\"(singleError().message || isBorderError()) && !ignoreBorderQuickRange()\"\n          [class.min-w-[284px]]=\"!chosenDateFromRanges().selectedLabel && !isSingle() && hasTimePicker()\"\n          [class.!border]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n          [class.!border-[#4e8cf7]]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n          [class.libs-ui-readonly]=\"readonly()\"\n          [class.libs-ui-readonly-background]=\"readonly()\"\n          [style.width.px]=\"width()\"\n          (click)=\"handlerSelectRanges($event)\">\n          <div class=\"libs-ui-icon-calendar text-[#9ca2ad] text-[16px]\"></div>\n          <div\n            class=\"ml-[8px] libs-ui-date-picker-label\"\n            [class.!text-[#071631]]=\"!disable()\"\n            [class.!text-[#9ca2ad]]=\"disable()\">\n            @if (!chosenDateFromRanges().selectedLabel) {\n              @if (!isSingle()) {\n                @if (!placeholder()) {\n                  <span class=\"text-[#9ca2ad]\">\n                    dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                    - dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                  </span>\n                } @else {\n                  <span class=\"text-[#9ca2ad]\">\n                    @let constHtmlPlaceholder = placeholder() || ' ';\n                    {{ constHtmlPlaceholder | translate }}\n                  </span>\n                }\n              }\n              @if (isSingle()) {\n                @if (!placeholder()) {\n                  <span class=\"text-[#9ca2ad]\">\n                    dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                  </span>\n                } @else {\n                  <span class=\"text-[#9ca2ad]\">\n                    @let constHtmlPlaceholder = placeholder() || ' ';\n                    {{ constHtmlPlaceholder | translate }}\n                  </span>\n                }\n              }\n            }\n            @if (chosenDateFromRanges().selectedLabel && !isSingle()) {\n              {{ displayRangeTitle() }}\n            }\n            @if (chosenDateFromRanges().selectedLabel && isSingle()) {\n              <span [class.text-[#29c7cc]]=\"useColorModeExist() || false\">\n                {{ chosenDateFromRanges().selectedLabel }}\n              </span>\n            }\n          </div>\n          @if (chosenDateFromRanges().selectedLabel && allowReset() && !disable() && !readonly()) {\n            <div class=\"pl-[12px] ml-auto h-full flex items-center\">\n              <i\n                class=\"libs-ui-icon-close-circle-solid text-[16px] text-[#cdd0d6]\"\n                (click)=\"handlerReset($event)\"></i>\n            </div>\n          }\n        </div>\n      }\n      @if (isNgContent()) {\n        <div (click)=\"handlerSelectRanges($event)\">\n          <ng-content></ng-content>\n        </div>\n      }\n    </libs_ui-components-popover>\n  </div>\n  @if (singleError().message && !validRequired()?.ignoreMessage) {\n    @let constHtmlMessage = singleError().message || ERROR_MESSAGE_EMPTY_VALID;\n    <div\n      class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r libs-ui-text-error\"\n      [innerHTML]=\"constHtmlMessage | translate: validRequired()?.interpolateParams\"></div>\n  }\n</div>\n\n<ng-template #customRangesRef>\n  <libs_ui-components-datetime-picker-custom_ranges\n    [zIndex]=\"zIndex()\"\n    [classInclude]=\"classIncludeCustomRanges()\"\n    [widthByParent]=\"widthByParent()\"\n    [dateOptions]=\"dateOptions()\"\n    [positionQuickRanges]=\"positionQuickRanges()\"\n    [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n    [autoApply]=\"autoApply()\"\n    [isSingle]=\"isSingle()\"\n    [minDate]=\"minDate()\"\n    [maxDate]=\"maxDate()\"\n    [listYearHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n    [singleDateSelected]=\"singleDateSelected()\"\n    [dateRangeSelected]=\"dateRangeSelected()\"\n    [extendRanges]=\"extendRanges()\"\n    [hasTimePicker]=\"hasTimePicker()\"\n    (outUpdateWidth)=\"handlerUpdateWidth()\"\n    (outCancel)=\"handlerCancel()\"\n    (outSelectSingleDate)=\"handlerPickerSingleDate($event)\"\n    (outSelectDateRange)=\"handlerPickerDateRange($event)\"\n    (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\"\n    (outClickMenuRangeCustom)=\"handlerUpdateWidth()\" />\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, LibsUiComponentsDatetimePickerComponent, SideEnum, defaultLocaleConfig, getDateOptions, getDateOptionsDefault, getDateRangeDefault };
+//# sourceMappingURL=libs-ui-components-datetime-picker.mjs.map