@libs-ui/components-datetime-picker 0.2.306-4 → 0.2.306-6

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

@@ -15,25 +15,25 @@ import { returnListObject, returnDetailObject } from '@libs-ui/services-http-req
 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"
+            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"
-        }
+            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());
 };
@@ -48,7 +48,7 @@ const defaultLocaleConfig = () => {
         customRangeLabel: 'customRangeLabel',
         daysOfWeek: [],
         monthNames: [],
-        firstDay: 1
+        firstDay: 1,
     };
 };
 const getDateRangeDefault = () => {
@@ -69,63 +69,63 @@ const getMonthsDefault = () => {
         {
             id: 1,
             label: 'i18n_january',
-            maxDays: 31
+            maxDays: 31,
         },
         {
             id: 2,
             label: 'i18n_february',
-            maxDays: 29
+            maxDays: 29,
         },
         {
             id: 3,
             label: 'i18n_march',
-            maxDays: 31
+            maxDays: 31,
         },
         {
             id: 4,
             label: 'i18n_april',
-            maxDays: 30
+            maxDays: 30,
         },
         {
             id: 5,
             label: 'i18n_may',
-            maxDays: 31
+            maxDays: 31,
         },
         {
             id: 6,
             label: 'i18n_june',
-            maxDays: 30
+            maxDays: 30,
         },
         {
             id: 7,
             label: 'i18n_july',
-            maxDays: 31
+            maxDays: 31,
         },
         {
             id: 8,
             label: 'i18n_august',
-            maxDays: 31
+            maxDays: 31,
         },
         {
             id: 9,
             label: 'i18n_september',
-            maxDays: 30
+            maxDays: 30,
         },
         {
             id: 10,
             label: 'i18n_october',
-            maxDays: 31
+            maxDays: 31,
         },
         {
             id: 11,
             label: 'i18n_november',
-            maxDays: 30
+            maxDays: 30,
         },
         {
             id: 12,
             label: 'i18n_december',
-            maxDays: 31
-        }
+            maxDays: 31,
+        },
     ];
 };
 const getMonthsListConfig = (translate) => {
@@ -134,7 +134,7 @@ const getMonthsListConfig = (translate) => {
         httpRequestData: signal({
             serviceOther: returnListObject(getMonthsDefault()),
             functionName: 'list',
-            argumentsValue: []
+            argumentsValue: [],
         }),
         configTemplateText: signal({
             fieldKey: 'id',
@@ -143,8 +143,8 @@ const getMonthsListConfig = (translate) => {
                 const label = translate.instant(item.label || ' ', { year: ' ' });
                 return label.substring(0, UtilsCache.getLang() === UtilsLanguageConstants.VI ? label.length : 3);
             },
-            getClassIncludePopover: () => 'libs-ui-font-h5r'
-        })
+            getClassIncludePopover: () => 'libs-ui-font-h5r',
+        }),
     };
 };
 const getMonthsDetailById = () => {
@@ -157,9 +157,9 @@ const getMonthsDetailById = () => {
             detailById: {
                 fieldUpdate: '[0]',
                 fieldGetValue: '',
-                subFieldUpdate: 'keys'
-            }
-        }
+                subFieldUpdate: 'keys',
+            },
+        },
     };
 };
 const getYearsListConfig = (listOfYears = []) => {
@@ -168,7 +168,7 @@ const getYearsListConfig = (listOfYears = []) => {
         httpRequestData: signal({
             serviceOther: returnListObject(listOfYears),
             functionName: 'list',
-            argumentsValue: []
+            argumentsValue: [],
         }),
         configTemplateText: signal({
             fieldKey: 'id',
@@ -176,8 +176,8 @@ const getYearsListConfig = (listOfYears = []) => {
             getValue: (item) => {
                 return item.label;
             },
-            getClassIncludeTooltip: () => 'libs-ui-font-h5r'
-        })
+            getClassIncludeTooltip: () => 'libs-ui-font-h5r',
+        }),
     };
 };
 const getYearsDetailById = (listOfYears = []) => {
@@ -190,9 +190,9 @@ const getYearsDetailById = (listOfYears = []) => {
             detailById: {
                 fieldUpdate: '[0]',
                 fieldGetValue: '',
-                subFieldUpdate: 'keys'
-            }
-        }
+                subFieldUpdate: 'keys',
+            },
+        },
     };
 };
 
@@ -290,12 +290,12 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     ngOnInit() {
         const startDate = getDayjs({ date: this.startDate()?.clone() });
         const endDate = getDayjs({ date: this.endDate()?.clone() });
-        this.splitPickerDate.update(current => {
-            current.start.update(sideCurrent => {
+        this.splitPickerDate.update((current) => {
+            current.start.update((sideCurrent) => {
                 sideCurrent.day = (startDate ?? getDayjs().startOf('day')).date();
                 return sideCurrent;
             });
-            current.end.update(sideCurrent => {
+            current.end.update((sideCurrent) => {
                 sideCurrent.day = (endDate ?? getDayjs().endOf('day')).date();
                 return sideCurrent;
             });
@@ -333,7 +333,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             lefthour: signal(this.timepickerVariables().left().selectedHour),
             righthour: signal(this.timepickerVariables().right().selectedHour),
             leftminute: signal(this.timepickerVariables().left().selectedMinute),
-            rightminute: signal(this.timepickerVariables().right().selectedMinute)
+            rightminute: signal(this.timepickerVariables().right().selectedMinute),
         });
         // this.outFunctionsControl.emit({ buildDefaultRange: this.buildDefaultRange.bind(this), applyToSelect: this.applyToSelect.bind(this) })
     }
@@ -348,7 +348,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             for (let i = start; i >= end; i--) {
                 listLeftYear.push({
                     id: i,
-                    label: `${i}`
+                    label: `${i}`,
                 });
             }
             this.listLeftYearConfig.set(getYearsListConfig(listLeftYear));
@@ -360,7 +360,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         for (let i = start; i >= end; i--) {
             listRightYear.push({
                 id: i,
-                label: `${i}`
+                label: `${i}`,
             });
         }
         this.listRightYearConfig.set(getYearsListConfig(listRightYear));
@@ -371,7 +371,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     }
     updateStartEndDate(date) {
         date = getDayjs({ date });
-        if ((this.endDate() || date.isBefore(getDayjs({ date: this.startDate() }), 'day'))) {
+        if (this.endDate() || date.isBefore(getDayjs({ date: this.startDate() }), 'day')) {
             if (this.hasTimePicker()) {
                 date = this.getDateWithTime(date, SideEnum.left);
             }
@@ -398,7 +398,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     }
     formatMonthYear() {
         const month = (this.calendarVariables().left().dropdowns?.()?.currentMonth ?? 0) + 1;
-        this.listKeyFromSelected.update(current => {
+        this.listKeyFromSelected.update((current) => {
             current.month = month;
             current.year = this.calendarVariables().left().dropdowns?.()?.currentYear;
             return current;
@@ -408,7 +408,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             return;
         }
         const rightMonth = (this.calendarVariables().right().dropdowns?.()?.currentMonth ?? 0) + 1;
-        this.listKeyToSelected.update(current => {
+        this.listKeyToSelected.update((current) => {
             current.month = rightMonth;
             current.year = this.calendarVariables().right().dropdowns?.()?.currentYear;
             return current;
@@ -485,7 +485,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             this.endDate.set(this.startDate()?.clone());
         }
         if (this.maxDate() && this.endDate()?.isAfter(this.maxDate())) {
-            this.endDate.set(getDayjs({ date: (this.maxDate()) })?.clone());
+            this.endDate.set(getDayjs({ date: this.maxDate() })?.clone());
         }
         // this.outEndDateChanged.emit({ endDate: this.endDate() });
         this.updateMonthsInView();
@@ -506,17 +506,17 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         const maxDate = getDayjs({ date: this.maxDate() });
         if (type === 'left') {
             this.disableMonth().left.set([]);
-            if (minDate?.year() === this.listKeyFromSelected().year) {
-                for (let i = 1; i < (minDate?.month() + 1); i++) {
-                    this.disableMonth().left.update(current => {
+            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?.year() === this.listKeyFromSelected().year) {
+            if (maxDate && maxDate?.year() === this.listKeyFromSelected().year) {
                 for (let i = maxDate?.month() + 2; i < 13; i++) {
-                    this.disableMonth().left.update(current => {
+                    this.disableMonth().left.update((current) => {
                         current.push(i);
                         return current;
                     });
@@ -525,25 +525,25 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             return;
         }
         this.disableMonth().right.set([]);
-        if (minDate?.year() === this.listKeyToSelected().year) {
-            for (let i = 1; i < (minDate?.month() + 1); i++) {
-                this.disableMonth().right.update(current => {
+        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?.year() === this.listKeyToSelected().year) {
+        if (maxDate && maxDate?.year() === this.listKeyToSelected().year) {
             for (let i = maxDate?.month() + 2; i < 13; i++) {
-                this.disableMonth().right.update(current => {
+                this.disableMonth().right.update((current) => {
                     current.push(i);
                     return current;
                 });
             }
         }
-        if ((Number(this.listKeyFromSelected().year) === Number(this.listKeyToSelected().year))) {
+        if (Number(this.listKeyFromSelected().year) === Number(this.listKeyToSelected().year)) {
             for (let i = 1; i <= Number(this.listKeyFromSelected().month); i++) {
-                this.disableMonth().right.update(current => {
+                this.disableMonth().right.update((current) => {
                     current.push(i);
                     return current;
                 });
@@ -552,22 +552,22 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     }
     handlerClickPrev(side) {
         if (side === SideEnum.left && this.leftCalendar().month) {
-            this.leftCalendar.update(current => {
+            this.leftCalendar.update((current) => {
                 current.month = current.month?.subtract(1, 'month');
                 return current;
             });
-            this.listKeyFromSelected.update(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 => {
+        this.rightCalendar.update((current) => {
             current.month = current.month?.subtract(1, 'month');
             return current;
         });
-        this.listKeyToSelected.update(current => {
+        this.listKeyToSelected.update((current) => {
             current.month = (this.rightCalendar().month?.month() ?? 0) + 1;
             current.year = this.rightCalendar().month?.year();
             return current;
@@ -577,21 +577,21 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     }
     handlerClickNext(side) {
         if (side === SideEnum.left) {
-            this.leftCalendar.update(current => {
+            this.leftCalendar.update((current) => {
                 current.month = current.month?.add(1, 'month');
                 return current;
             });
-            this.listKeyFromSelected.update(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 => {
+            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 => {
+                this.listKeyToSelected.update((current) => {
                     current.month = (this.rightCalendar().month?.month() ?? 0) + 1;
                     current.year = this.rightCalendar().month?.year();
                     return current;
@@ -600,11 +600,11 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             this.getDisable('right');
             return this.updateCalendars();
         }
-        this.rightCalendar.update(current => {
+        this.rightCalendar.update((current) => {
             current.month = current.month?.add(1, 'month');
             return current;
         });
-        this.listKeyToSelected.update(current => {
+        this.listKeyToSelected.update((current) => {
             current.month = (this.rightCalendar().month?.month() ?? 0) + 1;
             current.year = this.rightCalendar().month?.year();
             return current;
@@ -633,8 +633,8 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         if (!date) {
             return;
         }
-        this.splitPickerDate.update(current => {
-            current[side === SideEnum.left ? 'start' : 'end'].update(sideCurrent => {
+        this.splitPickerDate.update((current) => {
+            current[side === SideEnum.left ? 'start' : 'end'].update((sideCurrent) => {
                 sideCurrent.day = date.date();
                 return sideCurrent;
             });
@@ -681,7 +681,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         this.outChangStageFlagMouse.emit({
             isMouseEnter: false,
             isMouseEnterContent: false,
-            isContainerHasScroll: false
+            isContainerHasScroll: false,
         });
         if (!event) {
             return;
@@ -698,9 +698,9 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             default:
                 break;
         }
-        this.splitPickerDate.update(current => {
+        this.splitPickerDate.update((current) => {
             if (type === `${SideEnum.left}month` || type === `${SideEnum.left}year`) {
-                current.start.update(start => {
+                current.start.update((start) => {
                     if (type === `${SideEnum.left}month`) {
                         start.month = event.key;
                     }
@@ -711,7 +711,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
                 });
                 return current;
             }
-            current.end.update(end => {
+            current.end.update((end) => {
                 if (type === `${SideEnum.right}month`) {
                     end.month = event.key;
                 }
@@ -729,26 +729,26 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         const month = Number(event.key) - 1;
         if (side === SideEnum.left) {
             if (this.isSelectedData().leftmonth) {
-                this.isSelectedData.update(current => {
+                this.isSelectedData.update((current) => {
                     current.leftmonth = false;
                     return current;
                 });
                 this.getDisable('right');
                 return;
             }
-            this.listKeyFromSelected.update(current => {
+            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) >= Number(this.listKeyFromSelected().month) && Number(this.listKeyFromSelected().year) === Number(this.listKeyToSelected().year)) {
                 if (Number(event.key) <= 11) {
-                    this.listKeyToSelected.update(current => {
+                    this.listKeyToSelected.update((current) => {
                         current.month = Number(event.key) + 1;
                         return current;
                     });
                 }
                 if (Number(event.key) === 12) {
-                    this.listKeyToSelected.update(current => {
+                    this.listKeyToSelected.update((current) => {
                         current.month = 1;
                         current.year += 1;
                         return current;
@@ -758,14 +758,14 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         }
         if (side === SideEnum.right) {
             if (this.isSelectedData().rightmonth) {
-                this.isSelectedData.update(current => {
+                this.isSelectedData.update((current) => {
                     current.rightmonth = false;
                     return current;
                 });
                 this.getDisable('right');
                 return;
             }
-            this.listKeyToSelected.update(current => {
+            this.listKeyToSelected.update((current) => {
                 current.month = event.key;
                 return current;
             });
@@ -778,7 +778,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         const side = type.includes(SideEnum.left) ? SideEnum.left : SideEnum.right;
         if (side === SideEnum.left) {
             if (this.isSelectedData()?.leftyear) {
-                this.isSelectedData.update(current => {
+                this.isSelectedData.update((current) => {
                     current.leftyear = false;
                     return current;
                 });
@@ -787,23 +787,23 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
                 this.functionControls.get(type)?.removeList();
                 return;
             }
-            this.listKeyFromSelected.update(current => {
+            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 => {
+            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 => {
+                    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 => {
+                    this.listKeyToSelected.update((current) => {
                         current.month = Number(this.listKeyFromSelected().month);
                         return current;
                     });
@@ -815,26 +815,26 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         }
         if (side === SideEnum.right) {
             if (this.isSelectedData().rightyear) {
-                this.isSelectedData.update(current => {
+                this.isSelectedData.update((current) => {
                     current.rightyear = false;
                     return current;
                 });
                 this.getDisable('right');
                 return;
             }
-            this.listKeyToSelected.update(current => {
+            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().year && this.listKeyToSelected().year && this.listKeyFromSelected().year >= this.listKeyToSelected().year) {
                 if (this.listKeyFromSelected().month && Number(this.listKeyFromSelected().month) <= 11) {
-                    this.listKeyToSelected.update(current => {
+                    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 => {
+                    this.listKeyToSelected.update((current) => {
                         current.month = Number(this.listKeyFromSelected().month);
                         return current;
                     });
@@ -866,27 +866,27 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         }
         const dropdowns = this.calendarVariables()[side]().dropdowns;
         if (dropdowns?.()) {
-            dropdowns.update(current => {
+            dropdowns.update((current) => {
                 current.currentYear = year;
                 current.currentMonth = month;
                 return current;
             });
         }
         if (isLeft && this.leftCalendar().month) {
-            this.leftCalendar.update(current => {
+            this.leftCalendar.update((current) => {
                 current.month = current.month?.month(month).year(year);
                 return current;
             });
             return this.updateCalendars();
         }
         if (month === 12) {
-            this.rightCalendar.update(current => {
+            this.rightCalendar.update((current) => {
                 current.month = current.month?.clone().add(1, 'month');
                 return current;
             });
             return this.updateCalendars();
         }
-        this.rightCalendar.update(current => {
+        this.rightCalendar.update((current) => {
             current.month = current.month?.month(month).year(year);
             return current;
         });
@@ -894,10 +894,11 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     }
     handlerInputEvent(event, type) {
         if (event.keyCode !== 8) {
-            event.keyCode && this.checkBackspaceFocus.update(current => {
-                current[type].set(1);
-                return current;
-            });
+            event.keyCode &&
+                this.checkBackspaceFocus.update((current) => {
+                    current[type].set(1);
+                    return current;
+                });
             this.keyCodeBackspace.set(false);
             return;
         }
@@ -906,13 +907,13 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             case 'leftminute':
                 if (isEmpty(this.timepickerValueItem().leftminute())) {
                     if (this.checkBackspaceFocus()[type]() === 1) {
-                        this.checkBackspaceFocus.update(current => {
+                        this.checkBackspaceFocus.update((current) => {
                             current[type].set(current[type]() + 1);
                             return current;
                         });
                         return;
                     }
-                    this.checkBackspaceFocus.update(current => {
+                    this.checkBackspaceFocus.update((current) => {
                         current[type].set(1);
                         return current;
                     });
@@ -922,13 +923,13 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             case 'rightminute':
                 if (isEmpty(this.timepickerValueItem().rightminute())) {
                     if (this.checkBackspaceFocus()[type]() === 1) {
-                        this.checkBackspaceFocus.update(current => {
+                        this.checkBackspaceFocus.update((current) => {
                             current[type].set(current[type]() + 1);
                             return current;
                         });
                         return;
                     }
-                    this.checkBackspaceFocus.update(current => {
+                    this.checkBackspaceFocus.update((current) => {
                         current[type].set(1);
                         return current;
                     });
@@ -945,12 +946,12 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         const target = eventInput.target;
         switch (type) {
             case 'lefthour':
-                this.timepickerVariables().left.update(current => {
+                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 => {
+                if (Number(this.timepickerValueItem().lefthour()) === 0 || isEmpty(this.timepickerValueItem().lefthour())) {
+                    this.timepickerValueItem.update((current) => {
                         current.lefthour.set(0);
                         return current;
                     });
@@ -962,12 +963,12 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
                 }
                 break;
             case 'righthour':
-                this.timepickerVariables().right.update(current => {
+                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 => {
+                if (Number(this.timepickerValueItem().righthour()) === 0 || isEmpty(this.timepickerValueItem().righthour())) {
+                    this.timepickerValueItem.update((current) => {
                         current.righthour.set(0);
                         return current;
                     });
@@ -979,12 +980,12 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
                 }
                 break;
             case 'leftminute':
-                this.timepickerVariables().left.update(current => {
+                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 => {
+                if (Number(this.timepickerValueItem().leftminute()) === 0 || isEmpty(this.timepickerValueItem().leftminute())) {
+                    this.timepickerValueItem.update((current) => {
                         current.leftminute.set(0);
                         return current;
                     });
@@ -996,12 +997,12 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
                 }
                 break;
             case 'rightminute':
-                this.timepickerVariables().right.update(current => {
+                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 => {
+                if (Number(this.timepickerValueItem().rightminute()) === 0 || isEmpty(this.timepickerValueItem().rightminute())) {
+                    this.timepickerValueItem.update((current) => {
                         current.rightminute.set(0);
                         return current;
                     });
@@ -1015,14 +1016,14 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         }
     }
     handlerChangeTimeValue(event, type) {
-        this.timepickerValueItem.update(current => {
+        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 => {
+        this.splitPickerDate.update((current) => {
+            current[side === SideEnum.left ? 'start' : 'end'].update((sideCurrent) => {
                 sideCurrent[attr] = event;
                 return sideCurrent;
             });
@@ -1032,7 +1033,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             this.isZero.set(false);
             return;
         }
-        if ((`${event}`.length === 2) || (Number(event) > 2) || (Number(event) <= 2 && Number(event) > 0 && this.isZero()) || (this.isZero() && !this.keyCodeBackspace())) {
+        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;
@@ -1064,35 +1065,41 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     };
     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'))) {
+            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 => {
+                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 => {
+                    this.rightCalendar.update((current) => {
                         current.month = this.endDate()?.clone()?.date(2);
                         return current;
                     });
                     return;
                 }
-                this.rightCalendar.update(current => {
+                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 => {
+        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 => {
+            this.rightCalendar.update((current) => {
                 current.month = this.startDate()?.clone()?.date(2)?.add(1, 'month');
                 return current;
             });
@@ -1115,7 +1122,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             if (!this.endDate() && start && this.hasTimePicker()) {
                 const startClone = this.getDateWithTime(start, SideEnum.right);
                 if (startClone.isBefore(start)) {
-                    this.timepickerVariables()[SideEnum.right].update(current => {
+                    this.timepickerVariables()[SideEnum.right].update((current) => {
                         current.selectedHour = hour;
                         current.selectedMinute = minute;
                         return current;
@@ -1143,8 +1150,9 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         this.calculateSelectedLabel();
     }
     renderCalendar(side) {
-        const mainCalendar = (side === SideEnum.left) ? this.leftCalendar() : this.rightCalendar();
-        if (!mainCalendar.month || (this.dateOptions().firstDay === undefined || this.dateOptions().firstDay === undefined)) {
+        // 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();
@@ -1190,13 +1198,13 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             }
         }
         if (side === SideEnum.left) {
-            this.leftCalendar.update(current => {
+            this.leftCalendar.update((current) => {
                 current.calendar = calendar;
                 return current;
             });
         }
         if (side === SideEnum.right) {
-            this.rightCalendar.update(current => {
+            this.rightCalendar.update((current) => {
                 current.calendar = calendar;
                 return current;
             });
@@ -1222,7 +1230,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             minDate: minDate,
             maxDate: maxDate,
             calendar: calendar,
-            dropdowns: signal({})
+            dropdowns: signal({}),
         });
         if (this.showDropdownsSelect()) {
             const currentMonth = calendar[1][1].month();
@@ -1235,7 +1243,8 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             for (let y = minYear; y <= maxYear; y++) {
                 years.push(y);
             }
-            this.calendarVariables()[side]().dropdowns?.set({
+            this.calendarVariables()[side]()
+                .dropdowns?.set({
                 currentMonth: currentMonth,
                 currentYear: currentYear,
                 maxYear: maxYear,
@@ -1243,7 +1252,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
                 inMinYear: inMinYear,
                 inMaxYear: inMaxYear,
                 monthArrays: signal(Array.from(Array(12).keys())),
-                yearArrays: signal(years)
+                yearArrays: signal(years),
             });
         }
         this.buildCells(calendar, side);
@@ -1280,11 +1289,15 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
                 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'))) {
+                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');
+                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++) {
@@ -1292,7 +1305,6 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
                     if (classes[i] === 'disabled') {
                         disabled = true;
                     }
-                    ;
                 }
                 if (!disabled) {
                     cname += 'available';
@@ -1351,7 +1363,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             if (maxDate && time.minute(0).isAfter(maxDate)) {
                 disabled = true;
             }
-            this.timepickerVariables()[side].update(current => {
+            this.timepickerVariables()[side].update((current) => {
                 current.hours?.push(i);
                 if (i_in_24 === selected.hour() && !disabled) {
                     current.selectedHour = i;
@@ -1372,7 +1384,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             if (maxDate && time.second(0).isAfter(maxDate)) {
                 disabled = true;
             }
-            this.timepickerVariables()[side].update(current => {
+            this.timepickerVariables()[side].update((current) => {
                 current.minutes?.push(i);
                 current.minutesLabel?.push(padded);
                 if (selected.minute() === i && !disabled) {
@@ -1384,24 +1396,29 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
                 return current;
             });
         }
-        this.timepickerVariables()[side].update(current => {
+        this.timepickerVariables()[side].update((current) => {
             current.selected = selected;
             return current;
         });
     }
     updateElement() {
-        if (this.isSingle() && this.startDate()) {
+        if (!this.startDate()) {
+            return;
+        }
+        if (this.isSingle()) {
             this.selectedLabel.set(this.startDate()?.format('DD/MM/YYYY'));
             return;
         }
-        if (this.startDate() && this.endDate()) {
+        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()) {
@@ -1441,7 +1458,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         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());
+        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';
         }
@@ -1454,16 +1471,11 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         return;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 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 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 [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 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 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 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 [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 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 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 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\n                                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\n                                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 class=\"libs-ui-font-h6m text-[#6a7383]\"\n                      [style.fontWeight]=\"500\"\n                      [style.fontStyle]=\"'normal'\">{{ dayofweek }}</span>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody class=\"drp-animate\">\n              @for (row of calendarVariables.left().calRows?.(); track row) {\n                <tr class=\"h-[32px]\"\n                  [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.classList\">\n                  @for (col of calendarVariables.left().calCols?.(); track col) {\n                    <td class=\"libs-ui-font-h5r\"\n                      [class.today]=\"calendarVariables.left().calendar && calendarVariables.left().calendar?.[row]?.[col]?.date() === today().date() && calendarVariables.left().calendar?.[row]?.[col]?.month() === today().month() && calendarVariables.left().calendar?.[row]?.[col]?.year() === today().year()\"\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\n                        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 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 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 [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 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 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 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 [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 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 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 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 (listKeyFromSelected().year && listKeyToSelected().year && !(((listKeyFromSelected().year  +1) === listKeyToSelected().year) && (listKeyFromSelected().month === 12) && listKeyToSelected().month === 1)&& (listKeyFromSelected().year < listKeyToSelected().year) || listKeyFromSelected().month && listKeyToSelected().month && ((listKeyFromSelected().month + 1) < +listKeyToSelected().month)) {\n                            <div class=\"flex items-center justify-center absolute left-0 top-[-3px]\"\n                              (click)=\"handlerClickPrev(sideEnum.right)\">\n                              <i\n                                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 (listKeyFromSelected().month && listKeyToSelected().month && (listKeyFromSelected().month > listKeyToSelected().month) && listKeyFromSelected().year && listKeyToSelected().year && (listKeyFromSelected().year === listKeyToSelected().year )) {\n                            <div\n                              class=\"bg-[#ffffff] w-[21px] h-[21px] cursor-none flex items-center justify-center rounded-[50px]\">\n                            </div>\n                          }\n                          @if (!calendarVariables().right().maxDate || (calendarVariables().right().maxDate?.isAfter(calendarVariables().right().calendar && calendarVariables().right().calendar?.lastDay))) {\n                            <div (click)=\"handlerClickNext(sideEnum.right)\">\n                              <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                                <i\n                                  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 class=\"libs-ui-font-h6m text-[#6a7383]\"\n                        [style.fontWeight]=\"500\"\n                        [style.fontStyle]=\"'normal'\">{{ dayofweek }}</span>\n                    </th>\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (row of calendarVariables().right().calRows?.(); track row) {\n                  <tr class=\"h-[32px]\"\n                    [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.classList\">\n                    @for (col of calendarVariables().right().calCols?.(); track col) {\n                      <td class=\"libs-ui-font-h5r\"\n                        [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.[col]\"\n                        [class.today]=\"calendarVariables().right().calendar && calendarVariables().right().calendar?.[row]?.[col]?.date() === today().date() && calendarVariables().right().calendar?.[row]?.[col]?.month() === today().month() && calendarVariables().right().calendar &&calendarVariables().right().calendar?.[row]?.[col]?.year() === today().year()\"\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 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\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 class=\"mr-[12px]\"\n            label=\"i18n_cancel\"\n            type=\"button-third\"\n            (outClick)=\"handlerClickCancel($event)\" />\n          <libs_ui-components-buttons-button 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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.13", 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 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 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 [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 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 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 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 [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 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 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 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\n                                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\n                                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 class=\"libs-ui-font-h6m text-[#6a7383]\"\n                      [style.fontWeight]=\"500\"\n                      [style.fontStyle]=\"'normal'\">{{ dayofweek }}</span>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody class=\"drp-animate\">\n              @for (row of calendarVariables.left().calRows?.(); track row) {\n                <tr class=\"h-[32px]\"\n                  [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.classList\">\n                  @for (col of calendarVariables.left().calCols?.(); track col) {\n                    <td class=\"libs-ui-font-h5r\"\n                      [class.today]=\"calendarVariables.left().calendar && calendarVariables.left().calendar?.[row]?.[col]?.date() === today().date() && calendarVariables.left().calendar?.[row]?.[col]?.month() === today().month() && calendarVariables.left().calendar?.[row]?.[col]?.year() === today().year()\"\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\n                        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 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 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 [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 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 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 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 [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 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 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 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 (listKeyFromSelected().year && listKeyToSelected().year && !(((listKeyFromSelected().year  +1) === listKeyToSelected().year) && (listKeyFromSelected().month === 12) && listKeyToSelected().month === 1)&& (listKeyFromSelected().year < listKeyToSelected().year) || listKeyFromSelected().month && listKeyToSelected().month && ((listKeyFromSelected().month + 1) < +listKeyToSelected().month)) {\n                            <div class=\"flex items-center justify-center absolute left-0 top-[-3px]\"\n                              (click)=\"handlerClickPrev(sideEnum.right)\">\n                              <i\n                                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 (listKeyFromSelected().month && listKeyToSelected().month && (listKeyFromSelected().month > listKeyToSelected().month) && listKeyFromSelected().year && listKeyToSelected().year && (listKeyFromSelected().year === listKeyToSelected().year )) {\n                            <div\n                              class=\"bg-[#ffffff] w-[21px] h-[21px] cursor-none flex items-center justify-center rounded-[50px]\">\n                            </div>\n                          }\n                          @if (!calendarVariables().right().maxDate || (calendarVariables().right().maxDate?.isAfter(calendarVariables().right().calendar && calendarVariables().right().calendar?.lastDay))) {\n                            <div (click)=\"handlerClickNext(sideEnum.right)\">\n                              <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                                <i\n                                  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 class=\"libs-ui-font-h6m text-[#6a7383]\"\n                        [style.fontWeight]=\"500\"\n                        [style.fontStyle]=\"'normal'\">{{ dayofweek }}</span>\n                    </th>\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (row of calendarVariables().right().calRows?.(); track row) {\n                  <tr class=\"h-[32px]\"\n                    [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.classList\">\n                    @for (col of calendarVariables().right().calCols?.(); track col) {\n                      <td class=\"libs-ui-font-h5r\"\n                        [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.[col]\"\n                        [class.today]=\"calendarVariables().right().calendar && calendarVariables().right().calendar?.[row]?.[col]?.date() === today().date() && calendarVariables().right().calendar?.[row]?.[col]?.month() === today().month() && calendarVariables().right().calendar &&calendarVariables().right().calendar?.[row]?.[col]?.year() === today().year()\"\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 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\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 class=\"mr-[12px]\"\n            label=\"i18n_cancel\"\n            type=\"button-third\"\n            (outClick)=\"handlerClickCancel($event)\" />\n          <libs_ui-components-buttons-button 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"] }]
+            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 {
@@ -1508,9 +1520,9 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
             }
             return {
                 ...value,
-                date
+                date,
             };
-        }
+        },
     });
     dateRangeSelected = input(undefined, {
         transform: (value) => {
@@ -1528,9 +1540,9 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
             return {
                 ...value,
                 startDate,
-                endDate
+                endDate,
             };
-        }
+        },
     });
     /** OUTPUT */
     outChangStageFlagMouse = output();
@@ -1553,19 +1565,19 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
         const singleDateSelected = this.singleDateSelected();
         const customRange = {
             id: this.dateOptions()?.customRangeLabel || '',
-            label: this.dateOptions()?.customRangeLabel || ''
+            label: this.dateOptions()?.customRangeLabel || '',
         };
         if (this.isSingle()) {
             if (this.hasTimePicker()) {
                 const now = getDayjs();
-                this.startDate.update(current => {
+                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 => {
+                this.endDate.update((current) => {
                     if (current) {
                         current.hour(now.hour()).minute(now.minute());
                     }
@@ -1598,7 +1610,7 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
         const timeoutId = setTimeout(() => {
             this.outUpdateWidth.emit(1);
         });
-        this.timeouts.update(ids => [...ids, timeoutId]);
+        this.timeouts.update((ids) => [...ids, timeoutId]);
     }
     renderRanges() {
         if (this.isSingle()) {
@@ -1612,26 +1624,26 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
             const rangeValue = rangesDefault[key];
             const start = getDayjs({ date: rangeValue[0], returnDayjsIfConfigDateNotExist: true });
             const end = getDayjs({ date: rangeValue[1], returnDayjsIfConfigDateNotExist: true });
-            this.quickRangesArray.update(current => {
+            this.quickRangesArray.update((current) => {
                 current.push({
                     id: key,
                     label: ranges[key],
-                    values: [start, end]
+                    values: [start, end],
                 });
                 return current;
             });
         }
         if (this.showCustomRangeLabel() && this.dateOptions()?.customRangeLabel) {
-            this.quickRangesArray.update(current => {
+            this.quickRangesArray.update((current) => {
                 current.push({
                     id: this.dateOptions()?.customRangeLabel || '',
-                    label: this.dateOptions()?.customRangeLabel || ''
+                    label: this.dateOptions()?.customRangeLabel || '',
                 });
                 return current;
             });
         }
         if (this.extendRanges()) {
-            this.quickRangesArray.update(current => {
+            this.quickRangesArray.update((current) => {
                 current.unshift(...this.extendRanges());
                 return current;
             });
@@ -1647,15 +1659,19 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
         this.chosenSingleDate.set({
             displayLabel: event.displayLabel,
             date: event.startDate,
-            values: event.detailDatePicker.start()
+            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);
+            event.endDate = event.startDate
+                .clone()
+                .hour(endTime.hour)
+                .minute(endTime.minute)
+                .second(59);
         }
         this.chosenDateRange.set({
             quickRangeId: this.chosenQuickRange(),
-            ...event
+            ...event,
         });
         const chosenSingleDate = this.chosenSingleDate();
         const chosenDateRange = this.chosenDateRange();
@@ -1682,7 +1698,7 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
         }
         this.updateWidth();
         if (this.extendRanges()) {
-            const findExternalRange = this.extendRanges().find(item => item.label === range.id);
+            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] });
@@ -1750,20 +1766,16 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
         this.calendarFunctionControlEvent.set(event);
     }
     ngOnDestroy() {
-        this.timeouts().forEach(item => clearTimeout(item));
+        this.timeouts().forEach((item) => clearTimeout(item));
         // this.onDestroy.next();
         // this.onDestroy.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 #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 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 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 LibsUiComponentsPopoverDirective\n              [ignoreStopPropagationEvent]=\"true\"\n              type=\"text\"\n              [config]=\"{maxWidth:160,direction:'top',zIndex:(zIndex() ||1000) + 1}\"\n              [innerHTML]=\"range.label\">\n            </div>\n          </div>\n          <i 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 [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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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.13", 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 #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 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 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 LibsUiComponentsPopoverDirective\n              [ignoreStopPropagationEvent]=\"true\"\n              type=\"text\"\n              [config]=\"{maxWidth:160,direction:'top',zIndex:(zIndex() ||1000) + 1}\"\n              [innerHTML]=\"range.label\">\n            </div>\n          </div>\n          <i 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 [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"] }]
+            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 {
@@ -1796,7 +1808,7 @@ class LibsUiComponentsDatetimePickerComponent {
     hasTimePicker = input(true);
     allowReset = input(true);
     widthByLabel = input(true, { transform: (value) => value ?? true });
-    directionPopover = input('bottom', { transform: value => value ?? 'bottom' });
+    directionPopover = input('bottom', { transform: (value) => value ?? 'bottom' });
     defaultWidth = input(undefined);
     isSingle = input(false);
     extendRanges = input([]);
@@ -1827,10 +1839,11 @@ class LibsUiComponentsDatetimePickerComponent {
     outFunctionsControl = output();
     constructor() {
         effect(() => {
-            if (this.singleDateSelected()?.date) {
+            const date = this.singleDateSelected()?.date;
+            if (date) {
                 untracked(() => {
                     const formatDate = this.hasTimePicker() ? 'DD/MM/YYYY HH:mm' : 'DD/MM/YYYY';
-                    const startTime = getDayjs({ date: this.singleDateSelected()?.date })?.format(formatDate);
+                    const startTime = getDayjs({ date }).format(formatDate);
                     this.chosenDateFromRanges.set({ selectedLabel: startTime });
                 });
             }
@@ -1844,11 +1857,14 @@ class LibsUiComponentsDatetimePickerComponent {
         });
     }
     ngOnInit() {
-        this.outFunctionsControl.emit({
+        this.outFunctionsControl.emit(this.FunctionsControl);
+    }
+    get FunctionsControl() {
+        return {
             checkIsValid: this.checkIsValid.bind(this),
             resetError: this.resetError.bind(this),
-            reset: this.reset.bind(this)
-        });
+            reset: this.reset.bind(this),
+        };
     }
     handlerSelectRanges(event) {
         event.stopPropagation();
@@ -1875,7 +1891,7 @@ class LibsUiComponentsDatetimePickerComponent {
         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 => {
+            this.chosenDateFromRanges.update((current) => {
                 current.selectedLabel = `${startTime}`;
                 return current;
             });
@@ -1895,15 +1911,15 @@ class LibsUiComponentsDatetimePickerComponent {
         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 => {
+            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);
+        const showViewExternalRangeLabel = this.extendRanges()?.find((item) => item.id === this.chosenDateFromRanges().selectedLabel);
         if (this.extendRanges() && showViewExternalRangeLabel) {
-            this.chosenDateFromRanges.update(current => {
+            this.chosenDateFromRanges.update((current) => {
                 current.selectedLabel = showViewExternalRangeLabel && showViewExternalRangeLabel.label;
                 return current;
             });
@@ -1916,7 +1932,7 @@ class LibsUiComponentsDatetimePickerComponent {
     updateChosenDateFromRangesFromDateRangeSelected(dateRangeSelected) {
         untracked(() => {
             if (dateRangeSelected?.quickRangeId) {
-                const findKeyRange = Object.keys(this.dateOptions().ranges).find(key => key === 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;
@@ -1969,7 +1985,7 @@ class LibsUiComponentsDatetimePickerComponent {
         if (this.validRequired() && !this.chosenDateFromRanges().selectedLabel) {
             this.singleError.set({
                 message: this.validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID,
-                interpolateParams: this.validRequired()?.interpolateParams || {}
+                interpolateParams: this.validRequired()?.interpolateParams || {},
             });
             return;
         }
@@ -1993,21 +2009,13 @@ class LibsUiComponentsDatetimePickerComponent {
         return;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 [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 [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      (outChangStageFlagMouse)=\"handlerChangStagePopoverFlagMouse($event)\"\n      (outFunctionsControl)=\"handlerFunctionControl($event)\"\n      (outEvent)=\"handlerPopoverEvent($event)\">\n      @if (!isNgContent()) {\n        <div #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 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]\">dd/mm/yyyy@if (hasTimePicker()) {<span>&nbsp;hh:mm</span>} -\n                  dd/mm/yyyy@if (hasTimePicker()) {<span>&nbsp;hh:mm</span>}</span>\n                } @else {\n                  <span class=\"text-[#9ca2ad]\">{{ (placeholder() || ' ') |translate }} </span>\n                }\n              }\n              @if (isSingle()) {\n                @if (!placeholder()) {\n                  <span class=\"text-[#9ca2ad]\">dd/mm/yyyy@if (hasTimePicker()) {<span>&nbsp;hh:mm</span>}</span>\n                } @else {\n                  <span class=\"text-[#9ca2ad]\">{{ (placeholder() || ' ') |translate }} </span>\n                }\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 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    <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r libs-ui-text-error\"\n      [innerHTML]=\"(singleError().message || ERROR_MESSAGE_EMPTY_VALID)| translate:validRequired()?.interpolateParams\">\n    </div>\n  }\n</div>\n\n<ng-template #customRangesRef>\n  <libs_ui-components-datetime-picker-custom_ranges [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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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]\">{{ placeholder() || ' ' | translate }}</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]\">{{ placeholder() || ' ' | translate }}</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    <div\n      class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r libs-ui-text-error\"\n      [innerHTML]=\"singleError().message || ERROR_MESSAGE_EMPTY_VALID | 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.13", 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 [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 [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      (outChangStageFlagMouse)=\"handlerChangStagePopoverFlagMouse($event)\"\n      (outFunctionsControl)=\"handlerFunctionControl($event)\"\n      (outEvent)=\"handlerPopoverEvent($event)\">\n      @if (!isNgContent()) {\n        <div #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 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]\">dd/mm/yyyy@if (hasTimePicker()) {<span>&nbsp;hh:mm</span>} -\n                  dd/mm/yyyy@if (hasTimePicker()) {<span>&nbsp;hh:mm</span>}</span>\n                } @else {\n                  <span class=\"text-[#9ca2ad]\">{{ (placeholder() || ' ') |translate }} </span>\n                }\n              }\n              @if (isSingle()) {\n                @if (!placeholder()) {\n                  <span class=\"text-[#9ca2ad]\">dd/mm/yyyy@if (hasTimePicker()) {<span>&nbsp;hh:mm</span>}</span>\n                } @else {\n                  <span class=\"text-[#9ca2ad]\">{{ (placeholder() || ' ') |translate }} </span>\n                }\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 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    <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r libs-ui-text-error\"\n      [innerHTML]=\"(singleError().message || ERROR_MESSAGE_EMPTY_VALID)| translate:validRequired()?.interpolateParams\">\n    </div>\n  }\n</div>\n\n<ng-template #customRangesRef>\n  <libs_ui-components-datetime-picker-custom_ranges [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" }]
+            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]\">{{ placeholder() || ' ' | translate }}</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]\">{{ placeholder() || ' ' | translate }}</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    <div\n      class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r libs-ui-text-error\"\n      [innerHTML]=\"singleError().message || ERROR_MESSAGE_EMPTY_VALID | 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.
  */