npm - @libs-ui/components-datetime-picker - Versions diffs - 0.2.312-0 → 0.2.312-2 - Mend

@libs-ui/components-datetime-picker 0.2.312-0 → 0.2.312-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/esm2022/custom-ranges/calendar/calendar.component.mjs CHANGED Viewed

@@ -1277,10 +1277,10 @@ export class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     ngOnDestroy() {
         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\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, isStandalone: true, selector: "libs_ui-components-datetime-picker-custom_ranges-calendar", inputs: { quickRangesArray: { classPropertyName: "quickRangesArray", publicName: "quickRangesArray", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, isSingle: { classPropertyName: "isSingle", publicName: "isSingle", isSignal: true, isRequired: false, transformFunction: null }, showDropdownsSelect: { classPropertyName: "showDropdownsSelect", publicName: "showDropdownsSelect", isSignal: true, isRequired: false, transformFunction: null }, hasTimePicker: { classPropertyName: "hasTimePicker", publicName: "hasTimePicker", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, hasSecondPicker: { classPropertyName: "hasSecondPicker", publicName: "hasSecondPicker", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabelOnInput: { classPropertyName: "showRangeLabelOnInput", publicName: "showRangeLabelOnInput", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, listYearHiddenInputSearch: { classPropertyName: "listYearHiddenInputSearch", publicName: "listYearHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange", outChangStageFlagMouse: "outChangStageFlagMouse", outPickerDate: "outPickerDate", outCancel: "outCancel", outUpdateWidth: "outUpdateWidth", outFunctionsControl: "outFunctionsControl" }, viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"libs-ui-component-custom_ranges-calendar test-class\">\n  <div class=\"relative flex\">\n    <div\n      class=\"libs-ui-component-custom_ranges-calendar\"\n      [class.right]=\"isSingle()\"\n      [class.left]=\"!isSingle()\">\n      <div class=\"rounded-[4px] bg-[#ffffff]\">\n        @if (calendarVariables(); as calendarVariables) {\n          <table>\n            <thead>\n              <tr>\n                <th\n                  colspan=\"7\"\n                  class=\"month\">\n                  @if (showDropdownsSelect() && calendarVariables.left().dropdowns?.()) {\n                    <div class=\"!flex mb-[10px] w-full\">\n                      <div class=\"w-3/4 flex items-center\">\n                        <div class=\"mr-[8px]\">\n                          <libs_ui-components-dropdown\n                            [isNgContent]=\"true\"\n                            [zIndex]=\"zIndex() + 1\"\n                            [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n                            [listMaxItemShow]=\"10\"\n                            [listClickExactly]=\"false\"\n                            [listKeysDisable]=\"disableMonth().left()\"\n                            [listHasButtonUnSelectOption]=\"false\"\n                            [convertItemSelected]=\"convertItemMonth\"\n                            [listConfig]=\"listMonthsConfig()\"\n                            [listKeySelected]=\"listKeyFromSelected().month\"\n                            [flagMouse]=\"flagMouse()\"\n                            [listHiddenInputSearch]=\"true\"\n                            [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n                            (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'month')\"\n                            (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'month')\"\n                            (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                            (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'month')\">\n                            <div\n                              class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                              [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n                              [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'month']\">\n                              <div\n                                class=\"libs-ui-font-h4m\"\n                                [style.fontWeight]=\"500\"\n                                [style.fontStyle]=\"'normal'\">\n                                {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n                              </div>\n                              <i\n                                class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n                                [style.fontWeight]=\"500\"\n                                [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'month'] ? '90deg' : '270deg'\"></i>\n                            </div>\n                          </libs_ui-components-dropdown>\n                        </div>\n                        <div>\n                          <libs_ui-components-dropdown\n                            [listMaxItemShow]=\"10\"\n                            [isNgContent]=\"true\"\n                            [zIndex]=\"zIndex() + 1\"\n                            [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n                            [listClickExactly]=\"false\"\n                            [listHasButtonUnSelectOption]=\"false\"\n                            [convertItemSelected]=\"convertItemYear\"\n                            [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n                            [listConfig]=\"listLeftYearConfig()\"\n                            [listKeySelected]=\"listKeyFromSelected().year\"\n                            [flagMouse]=\"flagMouse()\"\n                            [httpRequestDetailItemById]=\"leftYearHttpDetailConfig()\"\n                            (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                            (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'year')\"\n                            (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'year')\"\n                            (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'year')\">\n                            <div\n                              class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                              [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n                              [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'year']\">\n                              <div\n                                class=\"libs-ui-font-h4m\"\n                                [style.fontWeight]=\"500\"\n                                [style.fontStyle]=\"'normal'\">\n                                {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n                              </div>\n                              <i\n                                class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n                                [style.fontWeight]=\"500\"\n                                [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'year'] ? '90deg' : '270deg'\"></i>\n                            </div>\n                          </libs_ui-components-dropdown>\n                        </div>\n                      </div>\n\n                      <div class=\"w-1/4 flex items-center relative\">\n                        @if (!calendarVariables.left().minDate || calendarVariables.left().minDate?.isBefore(calendarVariables.left().calendar && calendarVariables.left().calendar?.firstDay)) {\n                          <div (click)=\"handlerClickPrev(sideEnum.left)\">\n                            <div class=\"flex items-center justify-center absolute left-0 top-[-3px]\">\n                              <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          </div>\n                        }\n                        @if ((!calendarVariables.left().maxDate || calendarVariables.left().maxDate?.isAfter(calendarVariables.left().calendar && calendarVariables.left().calendar?.lastDay)) && isSingle()) {\n                          <div (click)=\"handlerClickNext(sideEnum.left)\">\n                            <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                              <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                  @if (!showDropdownsSelect() || !calendarVariables.left().dropdowns) {\n                    {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n                    {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n                  }\n                </th>\n              </tr>\n              <tr class=\"week-days\">\n                @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n                  <th>\n                    <span\n                      class=\"libs-ui-font-h6m text-[#6a7383]\"\n                      [style.fontWeight]=\"500\"\n                      [style.fontStyle]=\"'normal'\">\n                      {{ dayofweek }}\n                    </span>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody class=\"drp-animate\">\n              @for (row of calendarVariables.left().calRows?.(); track row) {\n                <tr\n                  class=\"h-[32px]\"\n                  [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.classList\">\n                  @for (col of calendarVariables.left().calCols?.(); track col) {\n                    <td\n                      class=\"libs-ui-font-h5r\"\n                      [class.today]=\"\n                        calendarVariables.left().calendar &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.date() === today().date() &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.month() === today().month() &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.year() === today().year()\n                      \"\n                      [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.[col]\"\n                      (click)=\"handlerPickerDate($event, sideEnum.left, row, col)\"\n                      (mouseenter)=\"handlerHoverDate($event, sideEnum.left, row, col)\">\n                      <span class=\"libs-ui-font-h5r\">{{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[row]?.[col]?.date() }}</span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        }\n      </div>\n      @if (hasTimePicker()) {\n        <div>\n          <div class=\"flex justify-center column items-center pt-[12px]\">\n            <div\n              class=\"w-full flex justify-center items-center rounded-[4px] border\"\n              [class.border-[#e6e8ed]]=\"!timePickerError()\"\n              [class.border-[#ff5454]]=\"timePickerError()\">\n              <libs_ui-components-inputs-input\n                classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n                dataType=\"int\"\n                [focusTimeOut]=\"0\"\n                [blurTimeOut]=\"0\"\n                [autoAddZeroLessThan10InTypeInt]=\"true\"\n                [emitEmptyInDataTypeNumber]=\"true\"\n                [maxValueNumber]=\"23\"\n                [minValueNumber]=\"0\"\n                [maxLength]=\"2\"\n                [value]=\"timepickerValueItem().lefthour()\"\n                (outInputEvent)=\"handlerInputEvent($event, 'lefthour')\"\n                (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'hour')\"\n                (outChange)=\"handlerChangeTimeValue($event, 'lefthour')\"\n                (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'lefthour')\" />\n              <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n              <libs_ui-components-inputs-input\n                classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n                [autoAddZeroLessThan10InTypeInt]=\"true\"\n                [emitEmptyInDataTypeNumber]=\"true\"\n                dataType=\"int\"\n                [focusTimeOut]=\"0\"\n                [blurTimeOut]=\"0\"\n                [maxValueNumber]=\"59\"\n                [minValueNumber]=\"0\"\n                [maxLength]=\"2\"\n                [value]=\"timepickerValueItem().leftminute()\"\n                (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'minute')\"\n                (outInputEvent)=\"handlerInputEvent($event, 'leftminute')\"\n                (outChange)=\"handlerChangeTimeValue($event, 'leftminute')\"\n                (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'leftminute')\" />\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    @if (!isSingle()) {\n      <div class=\"libs-ui-component-custom_ranges-calendar right ml-[24px]\">\n        <div class=\"rounded-[4px] bg-[#ffffff]\">\n          @if (calendarVariables()) {\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    colspan=\"7\"\n                    class=\"month\">\n                    @if (showDropdownsSelect() && calendarVariables().left().dropdowns?.()) {\n                      <div class=\"!flex mb-[10px] w-full\">\n                        <div class=\"w-3/4 flex items-center\">\n                          <div class=\"mr-[8px]\">\n                            <libs_ui-components-dropdown\n                              [isNgContent]=\"true\"\n                              [zIndex]=\"zIndex() + 1\"\n                              [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n                              [listMaxItemShow]=\"10\"\n                              [listClickExactly]=\"false\"\n                              [listKeysDisable]=\"disableMonth().right()\"\n                              [listHasButtonUnSelectOption]=\"false\"\n                              [convertItemSelected]=\"convertItemMonth\"\n                              [listHiddenInputSearch]=\"true\"\n                              [listConfig]=\"listMonthsConfig()\"\n                              [listKeySelected]=\"listKeyToSelected().month\"\n                              [flagMouse]=\"flagMouse()\"\n                              [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n                              (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'month')\"\n                              (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'month')\"\n                              (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                              (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'month')\">\n                              <div\n                                class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n                                [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'month']\">\n                                <div\n                                  class=\"libs-ui-font-h4m\"\n                                  [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.fontStyle]=\"'normal'\">\n                                  {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n                                </div>\n                                <i\n                                  class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'month'] ? '90deg' : '270deg'\"></i>\n                              </div>\n                            </libs_ui-components-dropdown>\n                          </div>\n                          <div>\n                            <libs_ui-components-dropdown\n                              [listMaxItemShow]=\"10\"\n                              [zIndex]=\"zIndex() + 1\"\n                              [isNgContent]=\"true\"\n                              [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n                              [listClickExactly]=\"false\"\n                              [listHasButtonUnSelectOption]=\"false\"\n                              [convertItemSelected]=\"convertItemYear\"\n                              [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n                              [listConfig]=\"listRightYearConfig()\"\n                              [listKeySelected]=\"listKeyToSelected().year\"\n                              [flagMouse]=\"flagMouse()\"\n                              [httpRequestDetailItemById]=\"rightYearHttpDetailConfig()\"\n                              (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'year')\"\n                              (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'year')\"\n                              (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                              (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'year')\">\n                              <div\n                                class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n                                [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'year']\">\n                                <div\n                                  class=\"libs-ui-font-h4m\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.fontStyle]=\"'normal'\">\n                                  {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n                                </div>\n                                <i\n                                  class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                  [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'year'] ? '90deg' : '270deg'\"></i>\n                              </div>\n                            </libs_ui-components-dropdown>\n                          </div>\n                        </div>\n                        <div class=\"w-1/4 flex items-center relative\">\n                          @if (\n                            (listKeyFromSelected().year &&\n                              listKeyToSelected().year &&\n                              !(listKeyFromSelected().year + 1 === listKeyToSelected().year && listKeyFromSelected().month === 12 && listKeyToSelected().month === 1) &&\n                              listKeyFromSelected().year < listKeyToSelected().year) ||\n                            (listKeyFromSelected().month && listKeyToSelected().month && listKeyFromSelected().month + 1 < +listKeyToSelected().month)\n                          ) {\n                            <div\n                              class=\"flex items-center justify-center absolute left-0 top-[-3px]\"\n                              (click)=\"handlerClickPrev(sideEnum.right)\">\n                              <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          }\n                          @if (\n                            listKeyFromSelected().month &&\n                            listKeyToSelected().month &&\n                            listKeyFromSelected().month > listKeyToSelected().month &&\n                            listKeyFromSelected().year &&\n                            listKeyToSelected().year &&\n                            listKeyFromSelected().year === listKeyToSelected().year\n                          ) {\n                            <div class=\"bg-[#ffffff] w-[21px] h-[21px] cursor-none flex items-center justify-center rounded-[50px]\"></div>\n                          }\n                          @if (\n                            !calendarVariables().right().maxDate ||\n                            calendarVariables()\n                              .right()\n                              .maxDate?.isAfter(calendarVariables().right().calendar && calendarVariables().right().calendar?.lastDay)\n                          ) {\n                            <div (click)=\"handlerClickNext(sideEnum.right)\">\n                              <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                                <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                    @if (!showDropdownsSelect() || !calendarVariables().right().dropdowns) {\n                      {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n                      {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n                    }\n                  </th>\n                </tr>\n                <tr class=\"week-days\">\n                  @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n                    <th>\n                      <span\n                        class=\"libs-ui-font-h6m text-[#6a7383]\"\n                        [style.fontWeight]=\"500\"\n                        [style.fontStyle]=\"'normal'\">\n                        {{ dayofweek }}\n                      </span>\n                    </th>\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (row of calendarVariables().right().calRows?.(); track row) {\n                  <tr\n                    class=\"h-[32px]\"\n                    [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.classList\">\n                    @for (col of calendarVariables().right().calCols?.(); track col) {\n                      <td\n                        class=\"libs-ui-font-h5r\"\n                        [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.[col]\"\n                        [class.today]=\"\n                          calendarVariables().right().calendar &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.date() === today().date() &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.month() === today().month() &&\n                          calendarVariables().right().calendar &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.year() === today().year()\n                        \"\n                        (click)=\"handlerPickerDate($event, sideEnum.right, row, col)\"\n                        (mouseenter)=\"handlerHoverDate($event, sideEnum.right, row, col)\">\n                        <span>{{ calendarVariables().right().calendar?.[row]?.[col]?.date() }}</span>\n                      </td>\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          }\n        </div>\n        @if (hasTimePicker()) {\n          <div>\n            <div class=\"flex justify-center items-center pt-[12px]\">\n              <div\n                class=\"w-full flex justify-center items-center rounded-[4px] border\"\n                [class.border-[#e6e8ed]]=\"!timePickerError()\"\n                [class.border-[#ff5454]]=\"timePickerError()\">\n                <libs_ui-components-inputs-input\n                  classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n                  dataType=\"int\"\n                  [autoAddZeroLessThan10InTypeInt]=\"true\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [maxValueNumber]=\"23\"\n                  [minValueNumber]=\"0\"\n                  [focusTimeOut]=\"0\"\n                  [blurTimeOut]=\"0\"\n                  [maxLength]=\"2\"\n                  [value]=\"timepickerValueItem().righthour()\"\n                  (outChange)=\"handlerChangeTimeValue($event, 'righthour')\"\n                  (outInputEvent)=\"handlerInputEvent($event, 'righthour')\"\n                  (outFunctionsControl)=\"handlerFunctionControl($event, 'righthour')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'righthour')\" />\n                <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n                <libs_ui-components-inputs-input\n                  classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n                  dataType=\"int\"\n                  [autoAddZeroLessThan10InTypeInt]=\"true\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [maxValueNumber]=\"59\"\n                  [minValueNumber]=\"0\"\n                  [focusTimeOut]=\"0\"\n                  [blurTimeOut]=\"0\"\n                  [maxLength]=\"2\"\n                  [value]=\"timepickerValueItem().rightminute()\"\n                  (outInputEvent)=\"handlerInputEvent($event, 'rightminute')\"\n                  (outFunctionsControl)=\"handlerFunctionControl($event, 'rightminute')\"\n                  (outChange)=\"handlerChangeTimeValue($event, 'rightminute')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'rightminute')\" />\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <div>\n    <div class=\"flex w-full\">\n      @if (!isSingle() && hasTimePicker()) {\n        <div class=\"mt-[8px] libs-ui-font-h7r text-[#ff5454] h-[14px]\">\n          @if (timePickerError()) {\n            <span>{{ 'i18n_date_compare_start_end_message_error' | translate }}</span>\n          }\n        </div>\n      }\n    </div>\n    @if (!quickRangesArray().length || !isSingle()) {\n      <div class=\"flex w-full pt-[16px] justify-between\">\n        <div class=\"flex items-center\">\n          @if (!isSingle()) {\n            @if (!endDate()) {\n              <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeLeft() }}</span>\n                }\n                &hyphen;\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeRight() }}</span>\n                }\n              </div>\n            }\n            @if (endDate()) {\n              <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeLeft() }}</span>\n                }\n                &hyphen;\n                <span>{{ endDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeRight() }}</span>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <div class=\"flex\">\n          <libs_ui-components-buttons-button\n            class=\"mr-[12px]\"\n            label=\"i18n_cancel\"\n            type=\"button-third\"\n            (outClick)=\"handlerClickCancel($event)\" />\n          <libs_ui-components-buttons-button\n            label=\"i18n_select\"\n            (outClick)=\"handlerClickApply($event)\" />\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown{display:flex;align-items:center}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar table{border-collapse:inherit;border-spacing:0 2px}.libs-ui-component-custom_ranges-calendar th,.libs-ui-component-custom_ranges-calendar td{padding:0;text-align:center;min-width:32px}.libs-ui-component-custom_ranges-calendar th span,.libs-ui-component-custom_ranges-calendar td span{pointer-events:none}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:before{font-size:20px}.libs-ui-component-custom_ranges-calendar td,.libs-ui-component-custom_ranges-calendar th{cursor:pointer;height:2em;width:2em}.libs-ui-component-custom_ranges-calendar td.available:hover,.libs-ui-component-custom_ranges-calendar th.available:hover{background-color:#f8f5fe;border-color:transparent;border-radius:8px;color:inherit;background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}.libs-ui-component-custom_ranges-calendar td{margin:.25em 0;background-color:#fff;transition:background-color .2s ease;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms;color:#071631!important}.libs-ui-component-custom_ranges-calendar td:hover{color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.off,.libs-ui-component-custom_ranges-calendar td.off.in-range,.libs-ui-component-custom_ranges-calendar td.off.start-date,.libs-ui-component-custom_ranges-calendar td.off.end-date{background-color:#fff;border-color:transparent;color:#cdd0d6!important}.libs-ui-component-custom_ranges-calendar td.focus-off{background-color:#f8f5fe!important}.libs-ui-component-custom_ranges-calendar td.in-range{background-color:#f8f5fe;border-color:transparent;border-radius:0;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today{position:relative;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today:after{position:absolute;content:\"\";width:2px;height:2px;background-color:#8e61ee;left:49%;bottom:5px}.libs-ui-component-custom_ranges-calendar td.active{transition:background .3s ease-out;background:#0000001a}.libs-ui-component-custom_ranges-calendar td.active.today:after{position:absolute;content:\"\";background-color:#fff}.libs-ui-component-custom_ranges-calendar td.active.start-date{border-radius:8px 0 0 8px}.libs-ui-component-custom_ranges-calendar td.active.end-date{border-radius:0 8px 8px 0}.libs-ui-component-custom_ranges-calendar td.active.full-date{border-radius:8px}.libs-ui-component-custom_ranges-calendar td.active,.libs-ui-component-custom_ranges-calendar td.active:hover{background-color:#8e61ee;border-color:transparent;color:#fff!important}.libs-ui-component-custom_ranges-calendar th.month{width:auto}.libs-ui-component-custom_ranges-calendar td.disabled,.libs-ui-component-custom_ranges-calendar option.disabled{color:#999!important;cursor:not-allowed;text-decoration:line-through;background-color:#f4f5f7}.libs-ui-component-custom_ranges-calendar .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right}.libs-ui-component-custom_ranges-calendar th.month>div{position:relative;display:inline-block}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsInputsInputComponent, selector: "libs_ui-components-inputs-input", inputs: ["tagInput", "dataType", "typeInput", "modeInput", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "maxValueNumber", "minValueNumber", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "classInclude", "maxLength", "readonly", "disable", "noBorder", "backgroundNone", "borderError", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "value", "autoRemoveEmoji", "defaultHeight", "minHeightTextArea", "maxHeightTextArea", "focusTimeOut", "selectAllTimeOut", "blurTimeOut", "zIndexPopoverContent", "classContainerInput", "showCount", "ignoreStopPropagationEvent", "resize", "templateLeftBottomInput", "templateRightBottomInput", "classContainerBottomInput", "ignoreWidthInput100", "iframeTextareaCustomStyle", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "resetAutoCompletePassword", "acceptOnlyClickIcon", "setIconRightColorSameColorDisableReadOnly", "onlyAcceptNegativeValue", "maxLengthNumberCount", "focusInput"], outputs: ["maxValueNumberChange", "minValueNumberChange", "fixedFloatChange", "acceptNegativeValueChange", "maxLengthChange", "valueChange", "maxLengthNumberCountChange", "outHeightAreaChange", "outChange", "outFocusAndBlurEvent", "outEnterEvent", "outInputEvent", "outIconLeft", "outIconRight", "outFunctionsControl", "outFilesDrop", "outFileDrop", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-datetime-picker-custom_ranges-calendar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsDropdownComponent, LibsUiComponentsInputsInputComponent, LibsUiComponentsButtonsButtonComponent], template: "<div class=\"libs-ui-component-custom_ranges-calendar test-class\">\n  <div class=\"relative flex\">\n    <div\n      class=\"libs-ui-component-custom_ranges-calendar\"\n      [class.right]=\"isSingle()\"\n      [class.left]=\"!isSingle()\">\n      <div class=\"rounded-[4px] bg-[#ffffff]\">\n        @if (calendarVariables(); as calendarVariables) {\n          <table>\n            <thead>\n              <tr>\n                <th\n                  colspan=\"7\"\n                  class=\"month\">\n                  @if (showDropdownsSelect() && calendarVariables.left().dropdowns?.()) {\n                    <div class=\"!flex mb-[10px] w-full\">\n                      <div class=\"w-3/4 flex items-center\">\n                        <div class=\"mr-[8px]\">\n                          <libs_ui-components-dropdown\n                            [isNgContent]=\"true\"\n                            [zIndex]=\"zIndex() + 1\"\n                            [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n                            [listMaxItemShow]=\"10\"\n                            [listClickExactly]=\"false\"\n                            [listKeysDisable]=\"disableMonth().left()\"\n                            [listHasButtonUnSelectOption]=\"false\"\n                            [convertItemSelected]=\"convertItemMonth\"\n                            [listConfig]=\"listMonthsConfig()\"\n                            [listKeySelected]=\"listKeyFromSelected().month\"\n                            [flagMouse]=\"flagMouse()\"\n                            [listHiddenInputSearch]=\"true\"\n                            [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n                            (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'month')\"\n                            (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'month')\"\n                            (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                            (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'month')\">\n                            <div\n                              class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                              [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n                              [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'month']\">\n                              <div\n                                class=\"libs-ui-font-h4m\"\n                                [style.fontWeight]=\"500\"\n                                [style.fontStyle]=\"'normal'\">\n                                {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n                              </div>\n                              <i\n                                class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n                                [style.fontWeight]=\"500\"\n                                [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'month'] ? '90deg' : '270deg'\"></i>\n                            </div>\n                          </libs_ui-components-dropdown>\n                        </div>\n                        <div>\n                          <libs_ui-components-dropdown\n                            [listMaxItemShow]=\"10\"\n                            [isNgContent]=\"true\"\n                            [zIndex]=\"zIndex() + 1\"\n                            [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n                            [listClickExactly]=\"false\"\n                            [listHasButtonUnSelectOption]=\"false\"\n                            [convertItemSelected]=\"convertItemYear\"\n                            [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n                            [listConfig]=\"listLeftYearConfig()\"\n                            [listKeySelected]=\"listKeyFromSelected().year\"\n                            [flagMouse]=\"flagMouse()\"\n                            [httpRequestDetailItemById]=\"leftYearHttpDetailConfig()\"\n                            (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                            (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'year')\"\n                            (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'year')\"\n                            (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'year')\">\n                            <div\n                              class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                              [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n                              [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'year']\">\n                              <div\n                                class=\"libs-ui-font-h4m\"\n                                [style.fontWeight]=\"500\"\n                                [style.fontStyle]=\"'normal'\">\n                                {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n                              </div>\n                              <i\n                                class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n                                [style.fontWeight]=\"500\"\n                                [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'year'] ? '90deg' : '270deg'\"></i>\n                            </div>\n                          </libs_ui-components-dropdown>\n                        </div>\n                      </div>\n\n                      <div class=\"w-1/4 flex items-center relative\">\n                        @if (!calendarVariables.left().minDate || calendarVariables.left().minDate?.isBefore(calendarVariables.left().calendar && calendarVariables.left().calendar?.firstDay)) {\n                          <div (click)=\"handlerClickPrev(sideEnum.left)\">\n                            <div class=\"flex items-center justify-center absolute left-0 top-[-3px]\">\n                              <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          </div>\n                        }\n                        @if ((!calendarVariables.left().maxDate || calendarVariables.left().maxDate?.isAfter(calendarVariables.left().calendar && calendarVariables.left().calendar?.lastDay)) && isSingle()) {\n                          <div (click)=\"handlerClickNext(sideEnum.left)\">\n                            <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                              <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                  @if (!showDropdownsSelect() || !calendarVariables.left().dropdowns) {\n                    {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n                    {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n                  }\n                </th>\n              </tr>\n              <tr class=\"week-days\">\n                @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n                  <th>\n                    <span\n                      class=\"libs-ui-font-h6m text-[#6a7383]\"\n                      [style.fontWeight]=\"500\"\n                      [style.fontStyle]=\"'normal'\">\n                      {{ dayofweek }}\n                    </span>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody class=\"drp-animate\">\n              @for (row of calendarVariables.left().calRows?.(); track row) {\n                <tr\n                  class=\"h-[32px]\"\n                  [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.classList\">\n                  @for (col of calendarVariables.left().calCols?.(); track col) {\n                    <td\n                      class=\"libs-ui-font-h5r\"\n                      [class.today]=\"\n                        calendarVariables.left().calendar &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.date() === today().date() &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.month() === today().month() &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.year() === today().year()\n                      \"\n                      [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.[col]\"\n                      (click)=\"handlerPickerDate($event, sideEnum.left, row, col)\"\n                      (mouseenter)=\"handlerHoverDate($event, sideEnum.left, row, col)\">\n                      <span class=\"libs-ui-font-h5r\">{{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[row]?.[col]?.date() }}</span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        }\n      </div>\n      @if (hasTimePicker()) {\n        <div>\n          <div class=\"flex justify-center column items-center pt-[12px]\">\n            <div\n              class=\"w-full flex justify-center items-center rounded-[4px] border\"\n              [class.border-[#e6e8ed]]=\"!timePickerError()\"\n              [class.border-[#ff5454]]=\"timePickerError()\">\n              <libs_ui-components-inputs-input\n                classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n                dataType=\"int\"\n                [focusTimeOut]=\"0\"\n                [blurTimeOut]=\"0\"\n                [autoAddZeroLessThan10InTypeInt]=\"true\"\n                [emitEmptyInDataTypeNumber]=\"true\"\n                [maxValueNumber]=\"23\"\n                [minValueNumber]=\"0\"\n                [maxLength]=\"2\"\n                [value]=\"timepickerValueItem().lefthour()\"\n                (outInputEvent)=\"handlerInputEvent($event, 'lefthour')\"\n                (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'hour')\"\n                (outChange)=\"handlerChangeTimeValue($event, 'lefthour')\"\n                (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'lefthour')\" />\n              <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n              <libs_ui-components-inputs-input\n                classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n                [autoAddZeroLessThan10InTypeInt]=\"true\"\n                [emitEmptyInDataTypeNumber]=\"true\"\n                dataType=\"int\"\n                [focusTimeOut]=\"0\"\n                [blurTimeOut]=\"0\"\n                [maxValueNumber]=\"59\"\n                [minValueNumber]=\"0\"\n                [maxLength]=\"2\"\n                [value]=\"timepickerValueItem().leftminute()\"\n                (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'minute')\"\n                (outInputEvent)=\"handlerInputEvent($event, 'leftminute')\"\n                (outChange)=\"handlerChangeTimeValue($event, 'leftminute')\"\n                (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'leftminute')\" />\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    @if (!isSingle()) {\n      <div class=\"libs-ui-component-custom_ranges-calendar right ml-[24px]\">\n        <div class=\"rounded-[4px] bg-[#ffffff]\">\n          @if (calendarVariables()) {\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    colspan=\"7\"\n                    class=\"month\">\n                    @if (showDropdownsSelect() && calendarVariables().left().dropdowns?.()) {\n                      <div class=\"!flex mb-[10px] w-full\">\n                        <div class=\"w-3/4 flex items-center\">\n                          <div class=\"mr-[8px]\">\n                            <libs_ui-components-dropdown\n                              [isNgContent]=\"true\"\n                              [zIndex]=\"zIndex() + 1\"\n                              [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n                              [listMaxItemShow]=\"10\"\n                              [listClickExactly]=\"false\"\n                              [listKeysDisable]=\"disableMonth().right()\"\n                              [listHasButtonUnSelectOption]=\"false\"\n                              [convertItemSelected]=\"convertItemMonth\"\n                              [listHiddenInputSearch]=\"true\"\n                              [listConfig]=\"listMonthsConfig()\"\n                              [listKeySelected]=\"listKeyToSelected().month\"\n                              [flagMouse]=\"flagMouse()\"\n                              [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n                              (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'month')\"\n                              (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'month')\"\n                              (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                              (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'month')\">\n                              <div\n                                class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n                                [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'month']\">\n                                <div\n                                  class=\"libs-ui-font-h4m\"\n                                  [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.fontStyle]=\"'normal'\">\n                                  {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n                                </div>\n                                <i\n                                  class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'month'] ? '90deg' : '270deg'\"></i>\n                              </div>\n                            </libs_ui-components-dropdown>\n                          </div>\n                          <div>\n                            <libs_ui-components-dropdown\n                              [listMaxItemShow]=\"10\"\n                              [zIndex]=\"zIndex() + 1\"\n                              [isNgContent]=\"true\"\n                              [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n                              [listClickExactly]=\"false\"\n                              [listHasButtonUnSelectOption]=\"false\"\n                              [convertItemSelected]=\"convertItemYear\"\n                              [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n                              [listConfig]=\"listRightYearConfig()\"\n                              [listKeySelected]=\"listKeyToSelected().year\"\n                              [flagMouse]=\"flagMouse()\"\n                              [httpRequestDetailItemById]=\"rightYearHttpDetailConfig()\"\n                              (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'year')\"\n                              (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'year')\"\n                              (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                              (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'year')\">\n                              <div\n                                class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n                                [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'year']\">\n                                <div\n                                  class=\"libs-ui-font-h4m\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.fontStyle]=\"'normal'\">\n                                  {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n                                </div>\n                                <i\n                                  class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                  [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'year'] ? '90deg' : '270deg'\"></i>\n                              </div>\n                            </libs_ui-components-dropdown>\n                          </div>\n                        </div>\n                        <div class=\"w-1/4 flex items-center relative\">\n                          @if (\n                            (listKeyFromSelected().year &&\n                              listKeyToSelected().year &&\n                              !(listKeyFromSelected().year + 1 === listKeyToSelected().year && listKeyFromSelected().month === 12 && listKeyToSelected().month === 1) &&\n                              listKeyFromSelected().year < listKeyToSelected().year) ||\n                            (listKeyFromSelected().month && listKeyToSelected().month && listKeyFromSelected().month + 1 < +listKeyToSelected().month)\n                          ) {\n                            <div\n                              class=\"flex items-center justify-center absolute left-0 top-[-3px]\"\n                              (click)=\"handlerClickPrev(sideEnum.right)\">\n                              <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          }\n                          @if (\n                            listKeyFromSelected().month &&\n                            listKeyToSelected().month &&\n                            listKeyFromSelected().month > listKeyToSelected().month &&\n                            listKeyFromSelected().year &&\n                            listKeyToSelected().year &&\n                            listKeyFromSelected().year === listKeyToSelected().year\n                          ) {\n                            <div class=\"bg-[#ffffff] w-[21px] h-[21px] cursor-none flex items-center justify-center rounded-[50px]\"></div>\n                          }\n                          @if (\n                            !calendarVariables().right().maxDate ||\n                            calendarVariables()\n                              .right()\n                              .maxDate?.isAfter(calendarVariables().right().calendar && calendarVariables().right().calendar?.lastDay)\n                          ) {\n                            <div (click)=\"handlerClickNext(sideEnum.right)\">\n                              <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                                <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                    @if (!showDropdownsSelect() || !calendarVariables().right().dropdowns) {\n                      {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n                      {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n                    }\n                  </th>\n                </tr>\n                <tr class=\"week-days\">\n                  @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n                    <th>\n                      <span\n                        class=\"libs-ui-font-h6m text-[#6a7383]\"\n                        [style.fontWeight]=\"500\"\n                        [style.fontStyle]=\"'normal'\">\n                        {{ dayofweek }}\n                      </span>\n                    </th>\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (row of calendarVariables().right().calRows?.(); track row) {\n                  <tr\n                    class=\"h-[32px]\"\n                    [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.classList\">\n                    @for (col of calendarVariables().right().calCols?.(); track col) {\n                      <td\n                        class=\"libs-ui-font-h5r\"\n                        [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.[col]\"\n                        [class.today]=\"\n                          calendarVariables().right().calendar &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.date() === today().date() &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.month() === today().month() &&\n                          calendarVariables().right().calendar &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.year() === today().year()\n                        \"\n                        (click)=\"handlerPickerDate($event, sideEnum.right, row, col)\"\n                        (mouseenter)=\"handlerHoverDate($event, sideEnum.right, row, col)\">\n                        <span>{{ calendarVariables().right().calendar?.[row]?.[col]?.date() }}</span>\n                      </td>\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          }\n        </div>\n        @if (hasTimePicker()) {\n          <div>\n            <div class=\"flex justify-center items-center pt-[12px]\">\n              <div\n                class=\"w-full flex justify-center items-center rounded-[4px] border\"\n                [class.border-[#e6e8ed]]=\"!timePickerError()\"\n                [class.border-[#ff5454]]=\"timePickerError()\">\n                <libs_ui-components-inputs-input\n                  classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n                  dataType=\"int\"\n                  [autoAddZeroLessThan10InTypeInt]=\"true\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [maxValueNumber]=\"23\"\n                  [minValueNumber]=\"0\"\n                  [focusTimeOut]=\"0\"\n                  [blurTimeOut]=\"0\"\n                  [maxLength]=\"2\"\n                  [value]=\"timepickerValueItem().righthour()\"\n                  (outChange)=\"handlerChangeTimeValue($event, 'righthour')\"\n                  (outInputEvent)=\"handlerInputEvent($event, 'righthour')\"\n                  (outFunctionsControl)=\"handlerFunctionControl($event, 'righthour')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'righthour')\" />\n                <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n                <libs_ui-components-inputs-input\n                  classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n                  dataType=\"int\"\n                  [autoAddZeroLessThan10InTypeInt]=\"true\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [maxValueNumber]=\"59\"\n                  [minValueNumber]=\"0\"\n                  [focusTimeOut]=\"0\"\n                  [blurTimeOut]=\"0\"\n                  [maxLength]=\"2\"\n                  [value]=\"timepickerValueItem().rightminute()\"\n                  (outInputEvent)=\"handlerInputEvent($event, 'rightminute')\"\n                  (outFunctionsControl)=\"handlerFunctionControl($event, 'rightminute')\"\n                  (outChange)=\"handlerChangeTimeValue($event, 'rightminute')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'rightminute')\" />\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <div>\n    <div class=\"flex w-full\">\n      @if (!isSingle() && hasTimePicker()) {\n        <div class=\"mt-[8px] libs-ui-font-h7r text-[#ff5454] h-[14px]\">\n          @if (timePickerError()) {\n            <span>{{ 'i18n_date_compare_start_end_message_error' | translate }}</span>\n          }\n        </div>\n      }\n    </div>\n    @if (!quickRangesArray().length || !isSingle()) {\n      <div class=\"flex w-full pt-[16px] justify-between\">\n        <div class=\"flex items-center\">\n          @if (!isSingle()) {\n            @if (!endDate()) {\n              <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeLeft() }}</span>\n                }\n                &hyphen;\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeRight() }}</span>\n                }\n              </div>\n            }\n            @if (endDate()) {\n              <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeLeft() }}</span>\n                }\n                &hyphen;\n                <span>{{ endDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeRight() }}</span>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <div class=\"flex\">\n          <libs_ui-components-buttons-button\n            class=\"mr-[12px]\"\n            label=\"i18n_cancel\"\n            type=\"button-third\"\n            (outClick)=\"handlerClickCancel($event)\" />\n          <libs_ui-components-buttons-button\n            label=\"i18n_select\"\n            (outClick)=\"handlerClickApply($event)\" />\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown{display:flex;align-items:center}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar table{border-collapse:inherit;border-spacing:0 2px}.libs-ui-component-custom_ranges-calendar th,.libs-ui-component-custom_ranges-calendar td{padding:0;text-align:center;min-width:32px}.libs-ui-component-custom_ranges-calendar th span,.libs-ui-component-custom_ranges-calendar td span{pointer-events:none}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:before{font-size:20px}.libs-ui-component-custom_ranges-calendar td,.libs-ui-component-custom_ranges-calendar th{cursor:pointer;height:2em;width:2em}.libs-ui-component-custom_ranges-calendar td.available:hover,.libs-ui-component-custom_ranges-calendar th.available:hover{background-color:#f8f5fe;border-color:transparent;border-radius:8px;color:inherit;background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}.libs-ui-component-custom_ranges-calendar td{margin:.25em 0;background-color:#fff;transition:background-color .2s ease;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms;color:#071631!important}.libs-ui-component-custom_ranges-calendar td:hover{color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.off,.libs-ui-component-custom_ranges-calendar td.off.in-range,.libs-ui-component-custom_ranges-calendar td.off.start-date,.libs-ui-component-custom_ranges-calendar td.off.end-date{background-color:#fff;border-color:transparent;color:#cdd0d6!important}.libs-ui-component-custom_ranges-calendar td.focus-off{background-color:#f8f5fe!important}.libs-ui-component-custom_ranges-calendar td.in-range{background-color:#f8f5fe;border-color:transparent;border-radius:0;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today{position:relative;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today:after{position:absolute;content:\"\";width:2px;height:2px;background-color:#8e61ee;left:49%;bottom:5px}.libs-ui-component-custom_ranges-calendar td.active{transition:background .3s ease-out;background:#0000001a}.libs-ui-component-custom_ranges-calendar td.active.today:after{position:absolute;content:\"\";background-color:#fff}.libs-ui-component-custom_ranges-calendar td.active.start-date{border-radius:8px 0 0 8px}.libs-ui-component-custom_ranges-calendar td.active.end-date{border-radius:0 8px 8px 0}.libs-ui-component-custom_ranges-calendar td.active.full-date{border-radius:8px}.libs-ui-component-custom_ranges-calendar td.active,.libs-ui-component-custom_ranges-calendar td.active:hover{background-color:#8e61ee;border-color:transparent;color:#fff!important}.libs-ui-component-custom_ranges-calendar th.month{width:auto}.libs-ui-component-custom_ranges-calendar td.disabled,.libs-ui-component-custom_ranges-calendar option.disabled{color:#999!important;cursor:not-allowed;text-decoration:line-through;background-color:#f4f5f7}.libs-ui-component-custom_ranges-calendar .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right}.libs-ui-component-custom_ranges-calendar th.month>div{position:relative;display:inline-block}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"] }]
         }], ctorParameters: () => [] });

package/esm2022/custom-ranges/custom-ranges.component.mjs CHANGED Viewed

@@ -297,10 +297,10 @@ export class LibsUiComponentsDatetimePickerCustomRangesComponent {
         // 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\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimePickerCustomRangesComponent, isStandalone: true, selector: "libs_ui-components-datetime-picker-custom_ranges", inputs: { zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, extendRanges: { classPropertyName: "extendRanges", publicName: "extendRanges", isSignal: true, isRequired: false, transformFunction: null }, widthByParent: { classPropertyName: "widthByParent", publicName: "widthByParent", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, listYearHiddenInputSearch: { classPropertyName: "listYearHiddenInputSearch", publicName: "listYearHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null }, positionQuickRanges: { classPropertyName: "positionQuickRanges", publicName: "positionQuickRanges", isSignal: true, isRequired: false, transformFunction: null }, isSingle: { classPropertyName: "isSingle", publicName: "isSingle", isSignal: true, isRequired: false, transformFunction: null }, hasTimePicker: { classPropertyName: "hasTimePicker", publicName: "hasTimePicker", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowCalendars: { classPropertyName: "alwaysShowCalendars", publicName: "alwaysShowCalendars", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, keepCalendarOpeningWithRange: { classPropertyName: "keepCalendarOpeningWithRange", publicName: "keepCalendarOpeningWithRange", isSignal: true, isRequired: false, transformFunction: null }, singleDateSelected: { classPropertyName: "singleDateSelected", publicName: "singleDateSelected", isSignal: true, isRequired: false, transformFunction: null }, dateRangeSelected: { classPropertyName: "dateRangeSelected", publicName: "dateRangeSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange", outChangStageFlagMouse: "outChangStageFlagMouse", outUpdateWidth: "outUpdateWidth", outCancel: "outCancel", outSelectSingleDate: "outSelectSingleDate", outSelectDateRange: "outSelectDateRange", outClickMenuRangeCustom: "outClickMenuRangeCustom" }, ngImport: i0, template: "<div\n  #pickerContainer\n  class=\"libs-ui-component-custom_ranges flex rounded-[4px] bg-[#ffffff] z-[1000] overflow-hidden\"\n  [class.flex-row-reverse]=\"positionQuickRanges() === 'right'\">\n  @if (!isSingle()) {\n    <div\n      class=\"libs-ui-component-custom_ranges-ranges {{ classInclude() || '' }}\"\n      [class.border-l-[#e6e8ed]]=\"positionQuickRanges() === 'right' && showCalTableInRanges()\"\n      [class.border-l]=\"positionQuickRanges() === 'right' && showCalTableInRanges()\"\n      [class.border-r-[#e6e8ed]]=\"positionQuickRanges() === 'left' && showCalTableInRanges()\"\n      [class.border-r]=\"positionQuickRanges() === 'left' && showCalTableInRanges()\"\n      [class.!min-h-[260px]]=\"showCalTableInRanges() && !isSingle()\"\n      [class.!min-h-[300px]]=\"hasTimePicker() && !isSingle()\"\n      [class.!w-[160px]]=\"!widthByParent()\"\n      [class.!w-full]=\"widthByParent()\">\n      @for (range of quickRangesArray(); track range.id) {\n        <div\n          class=\"flex items-center hover:bg-[var(--libs-ui-color-light-3)] cursor-pointer px-[16px] py-[8px]\"\n          [class.libs-ui-selected-range]=\"range.id === chosenQuickRange() && showCustomRangeLabel()\"\n          [class.bg-[var(--libs-ui-color-light-3)]]=\"range.id === chosenQuickRange() || range.id === selectedQuickRange()\"\n          (click)=\"handlerClickRange($event, range)\">\n          <div class=\"libs-ui-font-h5r flex text-[#333333] min-w-0 w-full\">\n            <div\n              LibsUiComponentsPopoverDirective\n              [ignoreStopPropagationEvent]=\"true\"\n              type=\"text\"\n              [config]=\"{ maxWidth: 160, direction: 'top', zIndex: (zIndex() || 1000) + 1 }\"\n              [innerHTML]=\"range.label\"></div>\n          </div>\n          <i\n            class=\"text-[12px] ml-[16px]\"\n            [class.libs-ui-icon-check]=\"range.id === selectedQuickRange()\"\n            [class.text-[var(--libs-ui-color-default)]]=\"range.id === selectedQuickRange()\"></i>\n        </div>\n      }\n    </div>\n  }\n  @if (showCalTableInRanges()) {\n    <div class=\"m-[16px] w-full\">\n      <libs_ui-components-datetime-picker-custom_ranges-calendar\n        [isSingle]=\"isSingle()\"\n        [autoApply]=\"autoApply()\"\n        [zIndex]=\"zIndex()\"\n        [flagMouse]=\"flagMouse()\"\n        [dateOptions]=\"dateOptions()\"\n        [hasTimePicker]=\"hasTimePicker()\"\n        [quickRangesArray]=\"quickRangesArray()\"\n        [startDate]=\"startDate()\"\n        [endDate]=\"endDate()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [listYearHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n        [classInclude]=\"'w-full'\"\n        (outCancel)=\"handlerCancel()\"\n        (outPickerDate)=\"handlerPickerDate($event)\"\n        (outFunctionsControl)=\"handlerFunctionsControl($event)\"\n        (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\" />\n    </div>\n  }\n</div>\n", styles: [".libs-ui-component-custom_ranges{position:relative;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges{width:159px;flex-shrink:0}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges .libs-ui-selected-range{position:relative}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges .libs-ui-selected-range:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:2px;background-color:var(--libs-ui-color-default)!important}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, selector: "libs_ui-components-datetime-picker-custom_ranges-calendar", inputs: ["quickRangesArray", "zIndex", "classInclude", "isSingle", "showDropdownsSelect", "hasTimePicker", "flagMouse", "dateOptions", "autoApply", "hasSecondPicker", "showRangeLabelOnInput", "startDate", "endDate", "minDate", "maxDate", "listYearHiddenInputSearch"], outputs: ["startDateChange", "endDateChange", "outChangStageFlagMouse", "outPickerDate", "outCancel", "outUpdateWidth", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-datetime-picker-custom_ranges', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, LibsUiComponentsPopoverComponent], template: "<div\n  #pickerContainer\n  class=\"libs-ui-component-custom_ranges flex rounded-[4px] bg-[#ffffff] z-[1000] overflow-hidden\"\n  [class.flex-row-reverse]=\"positionQuickRanges() === 'right'\">\n  @if (!isSingle()) {\n    <div\n      class=\"libs-ui-component-custom_ranges-ranges {{ classInclude() || '' }}\"\n      [class.border-l-[#e6e8ed]]=\"positionQuickRanges() === 'right' && showCalTableInRanges()\"\n      [class.border-l]=\"positionQuickRanges() === 'right' && showCalTableInRanges()\"\n      [class.border-r-[#e6e8ed]]=\"positionQuickRanges() === 'left' && showCalTableInRanges()\"\n      [class.border-r]=\"positionQuickRanges() === 'left' && showCalTableInRanges()\"\n      [class.!min-h-[260px]]=\"showCalTableInRanges() && !isSingle()\"\n      [class.!min-h-[300px]]=\"hasTimePicker() && !isSingle()\"\n      [class.!w-[160px]]=\"!widthByParent()\"\n      [class.!w-full]=\"widthByParent()\">\n      @for (range of quickRangesArray(); track range.id) {\n        <div\n          class=\"flex items-center hover:bg-[var(--libs-ui-color-light-3)] cursor-pointer px-[16px] py-[8px]\"\n          [class.libs-ui-selected-range]=\"range.id === chosenQuickRange() && showCustomRangeLabel()\"\n          [class.bg-[var(--libs-ui-color-light-3)]]=\"range.id === chosenQuickRange() || range.id === selectedQuickRange()\"\n          (click)=\"handlerClickRange($event, range)\">\n          <div class=\"libs-ui-font-h5r flex text-[#333333] min-w-0 w-full\">\n            <div\n              LibsUiComponentsPopoverDirective\n              [ignoreStopPropagationEvent]=\"true\"\n              type=\"text\"\n              [config]=\"{ maxWidth: 160, direction: 'top', zIndex: (zIndex() || 1000) + 1 }\"\n              [innerHTML]=\"range.label\"></div>\n          </div>\n          <i\n            class=\"text-[12px] ml-[16px]\"\n            [class.libs-ui-icon-check]=\"range.id === selectedQuickRange()\"\n            [class.text-[var(--libs-ui-color-default)]]=\"range.id === selectedQuickRange()\"></i>\n        </div>\n      }\n    </div>\n  }\n  @if (showCalTableInRanges()) {\n    <div class=\"m-[16px] w-full\">\n      <libs_ui-components-datetime-picker-custom_ranges-calendar\n        [isSingle]=\"isSingle()\"\n        [autoApply]=\"autoApply()\"\n        [zIndex]=\"zIndex()\"\n        [flagMouse]=\"flagMouse()\"\n        [dateOptions]=\"dateOptions()\"\n        [hasTimePicker]=\"hasTimePicker()\"\n        [quickRangesArray]=\"quickRangesArray()\"\n        [startDate]=\"startDate()\"\n        [endDate]=\"endDate()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [listYearHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n        [classInclude]=\"'w-full'\"\n        (outCancel)=\"handlerCancel()\"\n        (outPickerDate)=\"handlerPickerDate($event)\"\n        (outFunctionsControl)=\"handlerFunctionsControl($event)\"\n        (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\" />\n    </div>\n  }\n</div>\n", styles: [".libs-ui-component-custom_ranges{position:relative;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges{width:159px;flex-shrink:0}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges .libs-ui-selected-range{position:relative}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges .libs-ui-selected-range:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:2px;background-color:var(--libs-ui-color-default)!important}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"] }]
         }], ctorParameters: () => [] });

package/esm2022/picker.component.mjs CHANGED Viewed

@@ -236,10 +236,10 @@ export class LibsUiComponentsDatetimePickerComponent {
     ngOnDestroy() {
         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\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimePickerComponent, isStandalone: true, selector: "libs_ui-components-datetime-picker", inputs: { dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, classPickerInclude: { classPropertyName: "classPickerInclude", publicName: "classPickerInclude", isSignal: true, isRequired: false, transformFunction: null }, classPickerContentInclude: { classPropertyName: "classPickerContentInclude", publicName: "classPickerContentInclude", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderQuickRange: { classPropertyName: "ignoreBorderQuickRange", publicName: "ignoreBorderQuickRange", isSignal: true, isRequired: false, transformFunction: null }, useColorModeExist: { classPropertyName: "useColorModeExist", publicName: "useColorModeExist", isSignal: true, isRequired: false, transformFunction: null }, hasTimePicker: { classPropertyName: "hasTimePicker", publicName: "hasTimePicker", isSignal: true, isRequired: false, transformFunction: null }, allowReset: { classPropertyName: "allowReset", publicName: "allowReset", isSignal: true, isRequired: false, transformFunction: null }, widthByLabel: { classPropertyName: "widthByLabel", publicName: "widthByLabel", isSignal: true, isRequired: false, transformFunction: null }, directionPopover: { classPropertyName: "directionPopover", publicName: "directionPopover", isSignal: true, isRequired: false, transformFunction: null }, defaultWidth: { classPropertyName: "defaultWidth", publicName: "defaultWidth", isSignal: true, isRequired: false, transformFunction: null }, isSingle: { classPropertyName: "isSingle", publicName: "isSingle", isSignal: true, isRequired: false, transformFunction: null }, extendRanges: { classPropertyName: "extendRanges", publicName: "extendRanges", isSignal: true, isRequired: false, transformFunction: null }, isBorderError: { classPropertyName: "isBorderError", publicName: "isBorderError", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, listYearHiddenInputSearch: { classPropertyName: "listYearHiddenInputSearch", publicName: "listYearHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, widthByParent: { classPropertyName: "widthByParent", publicName: "widthByParent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, rangesPopoverPosition: { classPropertyName: "rangesPopoverPosition", publicName: "rangesPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, rangesPopoverPositionDistance: { classPropertyName: "rangesPopoverPositionDistance", publicName: "rangesPopoverPositionDistance", isSignal: true, isRequired: false, transformFunction: null }, isNgContent: { classPropertyName: "isNgContent", publicName: "isNgContent", isSignal: true, isRequired: false, transformFunction: null }, classIncludeCustomRanges: { classPropertyName: "classIncludeCustomRanges", publicName: "classIncludeCustomRanges", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, positionQuickRanges: { classPropertyName: "positionQuickRanges", publicName: "positionQuickRanges", isSignal: true, isRequired: false, transformFunction: null }, trackDateRageUpdateLabel: { classPropertyName: "trackDateRageUpdateLabel", publicName: "trackDateRageUpdateLabel", isSignal: true, isRequired: false, transformFunction: null }, singleDateSelected: { classPropertyName: "singleDateSelected", publicName: "singleDateSelected", isSignal: true, isRequired: false, transformFunction: null }, dateRangeSelected: { classPropertyName: "dateRangeSelected", publicName: "dateRangeSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { flagMouse: "flagMouseChange", singleDateSelected: "singleDateSelectedChange", dateRangeSelected: "dateRangeSelectedChange", outChangStageFlagMouse: "outChangStageFlagMouse", outReset: "outReset", outSelectSingleDate: "outSelectSingleDate", outSelectDateRange: "outSelectDateRange", outFunctionsControl: "outFunctionsControl" }, ngImport: i0, template: "<div class=\"libs-ui-date-picker {{ classInclude() }}\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label\n      [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required\"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n  <div class=\"flex w-full\">\n    <libs_ui-components-popover\n      [class]=\"classPickerInclude()\"\n      [ignoreShowPopover]=\"disable() || readonly()\"\n      [mode]=\"'click'\"\n      [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n      [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n      [flagMouse]=\"flagMouse()\"\n      [config]=\"{\n        animationConfig: {},\n        maxWidth: 770,\n        maxHeight: 425,\n        directionDistance: 2,\n        template: customRangesRef,\n        widthByParent: widthByParent(),\n        whiteTheme: true,\n        ignoreArrow: true,\n        zIndex: zIndex(),\n        classInclude: 'rounded-[4px] ',\n        direction: directionPopover(),\n        position: { mode: rangesPopoverPosition(), distance: rangesPopoverPositionDistance() },\n      }\"\n      (outChangStageFlagMouse)=\"handlerChangStagePopoverFlagMouse($event)\"\n      (outFunctionsControl)=\"handlerFunctionControl($event)\"\n      (outEvent)=\"handlerPopoverEvent($event)\">\n      @if (!isNgContent()) {\n        <div\n          #containerRef\n          class=\"flex items-center px-[12px] h-[32px] rounded-[4px] bg-[#ffffff] cursor-pointer libs-ui-font-h5r {{ classPickerContentInclude() }}\"\n          [class.libs-ui-disable]=\"disable()\"\n          [class.libs-ui-disable-background]=\"disable()\"\n          [class.!border-none]=\"ignoreBorderQuickRange()\"\n          [class.libs-ui-border-general]=\"!singleError().message && !ignoreBorderQuickRange()\"\n          [class.libs-ui-border-error-general]=\"(singleError().message || isBorderError()) && !ignoreBorderQuickRange()\"\n          [class.min-w-[284px]]=\"!chosenDateFromRanges().selectedLabel && !isSingle() && hasTimePicker()\"\n          [class.!border]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n          [class.!border-[#4e8cf7]]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n          [class.libs-ui-readonly]=\"readonly()\"\n          [class.libs-ui-readonly-background]=\"readonly()\"\n          [style.width.px]=\"width()\"\n          (click)=\"handlerSelectRanges($event)\">\n          <div class=\"libs-ui-icon-calendar text-[#9ca2ad] text-[16px]\"></div>\n          <div\n            class=\"ml-[8px] libs-ui-date-picker-label\"\n            [class.!text-[#071631]]=\"!disable()\"\n            [class.!text-[#9ca2ad]]=\"disable()\">\n            @if (!chosenDateFromRanges().selectedLabel) {\n              @if (!isSingle()) {\n                @if (!placeholder()) {\n                  <span class=\"text-[#9ca2ad]\">\n                    dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                    - dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                  </span>\n                } @else {\n                  <span class=\"text-[#9ca2ad]\">{{ 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-datetime-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsLabelComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsDatetimePickerCustomRangesComponent], template: "<div class=\"libs-ui-date-picker {{ classInclude() }}\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label\n      [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required\"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n  <div class=\"flex w-full\">\n    <libs_ui-components-popover\n      [class]=\"classPickerInclude()\"\n      [ignoreShowPopover]=\"disable() || readonly()\"\n      [mode]=\"'click'\"\n      [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n      [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n      [flagMouse]=\"flagMouse()\"\n      [config]=\"{\n        animationConfig: {},\n        maxWidth: 770,\n        maxHeight: 425,\n        directionDistance: 2,\n        template: customRangesRef,\n        widthByParent: widthByParent(),\n        whiteTheme: true,\n        ignoreArrow: true,\n        zIndex: zIndex(),\n        classInclude: 'rounded-[4px] ',\n        direction: directionPopover(),\n        position: { mode: rangesPopoverPosition(), distance: rangesPopoverPositionDistance() },\n      }\"\n      (outChangStageFlagMouse)=\"handlerChangStagePopoverFlagMouse($event)\"\n      (outFunctionsControl)=\"handlerFunctionControl($event)\"\n      (outEvent)=\"handlerPopoverEvent($event)\">\n      @if (!isNgContent()) {\n        <div\n          #containerRef\n          class=\"flex items-center px-[12px] h-[32px] rounded-[4px] bg-[#ffffff] cursor-pointer libs-ui-font-h5r {{ classPickerContentInclude() }}\"\n          [class.libs-ui-disable]=\"disable()\"\n          [class.libs-ui-disable-background]=\"disable()\"\n          [class.!border-none]=\"ignoreBorderQuickRange()\"\n          [class.libs-ui-border-general]=\"!singleError().message && !ignoreBorderQuickRange()\"\n          [class.libs-ui-border-error-general]=\"(singleError().message || isBorderError()) && !ignoreBorderQuickRange()\"\n          [class.min-w-[284px]]=\"!chosenDateFromRanges().selectedLabel && !isSingle() && hasTimePicker()\"\n          [class.!border]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n          [class.!border-[#4e8cf7]]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n          [class.libs-ui-readonly]=\"readonly()\"\n          [class.libs-ui-readonly-background]=\"readonly()\"\n          [style.width.px]=\"width()\"\n          (click)=\"handlerSelectRanges($event)\">\n          <div class=\"libs-ui-icon-calendar text-[#9ca2ad] text-[16px]\"></div>\n          <div\n            class=\"ml-[8px] libs-ui-date-picker-label\"\n            [class.!text-[#071631]]=\"!disable()\"\n            [class.!text-[#9ca2ad]]=\"disable()\">\n            @if (!chosenDateFromRanges().selectedLabel) {\n              @if (!isSingle()) {\n                @if (!placeholder()) {\n                  <span class=\"text-[#9ca2ad]\">\n                    dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                    - dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                  </span>\n                } @else {\n                  <span class=\"text-[#9ca2ad]\">{{ 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: () => [] });

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

@@ -1470,10 +1470,10 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     ngOnDestroy() {
         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\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, isStandalone: true, selector: "libs_ui-components-datetime-picker-custom_ranges-calendar", inputs: { quickRangesArray: { classPropertyName: "quickRangesArray", publicName: "quickRangesArray", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, isSingle: { classPropertyName: "isSingle", publicName: "isSingle", isSignal: true, isRequired: false, transformFunction: null }, showDropdownsSelect: { classPropertyName: "showDropdownsSelect", publicName: "showDropdownsSelect", isSignal: true, isRequired: false, transformFunction: null }, hasTimePicker: { classPropertyName: "hasTimePicker", publicName: "hasTimePicker", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, hasSecondPicker: { classPropertyName: "hasSecondPicker", publicName: "hasSecondPicker", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabelOnInput: { classPropertyName: "showRangeLabelOnInput", publicName: "showRangeLabelOnInput", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, listYearHiddenInputSearch: { classPropertyName: "listYearHiddenInputSearch", publicName: "listYearHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange", outChangStageFlagMouse: "outChangStageFlagMouse", outPickerDate: "outPickerDate", outCancel: "outCancel", outUpdateWidth: "outUpdateWidth", outFunctionsControl: "outFunctionsControl" }, viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"libs-ui-component-custom_ranges-calendar test-class\">\n  <div class=\"relative flex\">\n    <div\n      class=\"libs-ui-component-custom_ranges-calendar\"\n      [class.right]=\"isSingle()\"\n      [class.left]=\"!isSingle()\">\n      <div class=\"rounded-[4px] bg-[#ffffff]\">\n        @if (calendarVariables(); as calendarVariables) {\n          <table>\n            <thead>\n              <tr>\n                <th\n                  colspan=\"7\"\n                  class=\"month\">\n                  @if (showDropdownsSelect() && calendarVariables.left().dropdowns?.()) {\n                    <div class=\"!flex mb-[10px] w-full\">\n                      <div class=\"w-3/4 flex items-center\">\n                        <div class=\"mr-[8px]\">\n                          <libs_ui-components-dropdown\n                            [isNgContent]=\"true\"\n                            [zIndex]=\"zIndex() + 1\"\n                            [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n                            [listMaxItemShow]=\"10\"\n                            [listClickExactly]=\"false\"\n                            [listKeysDisable]=\"disableMonth().left()\"\n                            [listHasButtonUnSelectOption]=\"false\"\n                            [convertItemSelected]=\"convertItemMonth\"\n                            [listConfig]=\"listMonthsConfig()\"\n                            [listKeySelected]=\"listKeyFromSelected().month\"\n                            [flagMouse]=\"flagMouse()\"\n                            [listHiddenInputSearch]=\"true\"\n                            [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n                            (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'month')\"\n                            (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'month')\"\n                            (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                            (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'month')\">\n                            <div\n                              class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                              [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n                              [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'month']\">\n                              <div\n                                class=\"libs-ui-font-h4m\"\n                                [style.fontWeight]=\"500\"\n                                [style.fontStyle]=\"'normal'\">\n                                {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n                              </div>\n                              <i\n                                class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n                                [style.fontWeight]=\"500\"\n                                [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'month'] ? '90deg' : '270deg'\"></i>\n                            </div>\n                          </libs_ui-components-dropdown>\n                        </div>\n                        <div>\n                          <libs_ui-components-dropdown\n                            [listMaxItemShow]=\"10\"\n                            [isNgContent]=\"true\"\n                            [zIndex]=\"zIndex() + 1\"\n                            [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n                            [listClickExactly]=\"false\"\n                            [listHasButtonUnSelectOption]=\"false\"\n                            [convertItemSelected]=\"convertItemYear\"\n                            [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n                            [listConfig]=\"listLeftYearConfig()\"\n                            [listKeySelected]=\"listKeyFromSelected().year\"\n                            [flagMouse]=\"flagMouse()\"\n                            [httpRequestDetailItemById]=\"leftYearHttpDetailConfig()\"\n                            (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                            (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'year')\"\n                            (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'year')\"\n                            (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'year')\">\n                            <div\n                              class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                              [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n                              [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'year']\">\n                              <div\n                                class=\"libs-ui-font-h4m\"\n                                [style.fontWeight]=\"500\"\n                                [style.fontStyle]=\"'normal'\">\n                                {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n                              </div>\n                              <i\n                                class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n                                [style.fontWeight]=\"500\"\n                                [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'year'] ? '90deg' : '270deg'\"></i>\n                            </div>\n                          </libs_ui-components-dropdown>\n                        </div>\n                      </div>\n\n                      <div class=\"w-1/4 flex items-center relative\">\n                        @if (!calendarVariables.left().minDate || calendarVariables.left().minDate?.isBefore(calendarVariables.left().calendar && calendarVariables.left().calendar?.firstDay)) {\n                          <div (click)=\"handlerClickPrev(sideEnum.left)\">\n                            <div class=\"flex items-center justify-center absolute left-0 top-[-3px]\">\n                              <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          </div>\n                        }\n                        @if ((!calendarVariables.left().maxDate || calendarVariables.left().maxDate?.isAfter(calendarVariables.left().calendar && calendarVariables.left().calendar?.lastDay)) && isSingle()) {\n                          <div (click)=\"handlerClickNext(sideEnum.left)\">\n                            <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                              <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                  @if (!showDropdownsSelect() || !calendarVariables.left().dropdowns) {\n                    {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n                    {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n                  }\n                </th>\n              </tr>\n              <tr class=\"week-days\">\n                @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n                  <th>\n                    <span\n                      class=\"libs-ui-font-h6m text-[#6a7383]\"\n                      [style.fontWeight]=\"500\"\n                      [style.fontStyle]=\"'normal'\">\n                      {{ dayofweek }}\n                    </span>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody class=\"drp-animate\">\n              @for (row of calendarVariables.left().calRows?.(); track row) {\n                <tr\n                  class=\"h-[32px]\"\n                  [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.classList\">\n                  @for (col of calendarVariables.left().calCols?.(); track col) {\n                    <td\n                      class=\"libs-ui-font-h5r\"\n                      [class.today]=\"\n                        calendarVariables.left().calendar &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.date() === today().date() &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.month() === today().month() &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.year() === today().year()\n                      \"\n                      [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.[col]\"\n                      (click)=\"handlerPickerDate($event, sideEnum.left, row, col)\"\n                      (mouseenter)=\"handlerHoverDate($event, sideEnum.left, row, col)\">\n                      <span class=\"libs-ui-font-h5r\">{{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[row]?.[col]?.date() }}</span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        }\n      </div>\n      @if (hasTimePicker()) {\n        <div>\n          <div class=\"flex justify-center column items-center pt-[12px]\">\n            <div\n              class=\"w-full flex justify-center items-center rounded-[4px] border\"\n              [class.border-[#e6e8ed]]=\"!timePickerError()\"\n              [class.border-[#ff5454]]=\"timePickerError()\">\n              <libs_ui-components-inputs-input\n                classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n                dataType=\"int\"\n                [focusTimeOut]=\"0\"\n                [blurTimeOut]=\"0\"\n                [autoAddZeroLessThan10InTypeInt]=\"true\"\n                [emitEmptyInDataTypeNumber]=\"true\"\n                [maxValueNumber]=\"23\"\n                [minValueNumber]=\"0\"\n                [maxLength]=\"2\"\n                [value]=\"timepickerValueItem().lefthour()\"\n                (outInputEvent)=\"handlerInputEvent($event, 'lefthour')\"\n                (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'hour')\"\n                (outChange)=\"handlerChangeTimeValue($event, 'lefthour')\"\n                (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'lefthour')\" />\n              <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n              <libs_ui-components-inputs-input\n                classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n                [autoAddZeroLessThan10InTypeInt]=\"true\"\n                [emitEmptyInDataTypeNumber]=\"true\"\n                dataType=\"int\"\n                [focusTimeOut]=\"0\"\n                [blurTimeOut]=\"0\"\n                [maxValueNumber]=\"59\"\n                [minValueNumber]=\"0\"\n                [maxLength]=\"2\"\n                [value]=\"timepickerValueItem().leftminute()\"\n                (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'minute')\"\n                (outInputEvent)=\"handlerInputEvent($event, 'leftminute')\"\n                (outChange)=\"handlerChangeTimeValue($event, 'leftminute')\"\n                (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'leftminute')\" />\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    @if (!isSingle()) {\n      <div class=\"libs-ui-component-custom_ranges-calendar right ml-[24px]\">\n        <div class=\"rounded-[4px] bg-[#ffffff]\">\n          @if (calendarVariables()) {\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    colspan=\"7\"\n                    class=\"month\">\n                    @if (showDropdownsSelect() && calendarVariables().left().dropdowns?.()) {\n                      <div class=\"!flex mb-[10px] w-full\">\n                        <div class=\"w-3/4 flex items-center\">\n                          <div class=\"mr-[8px]\">\n                            <libs_ui-components-dropdown\n                              [isNgContent]=\"true\"\n                              [zIndex]=\"zIndex() + 1\"\n                              [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n                              [listMaxItemShow]=\"10\"\n                              [listClickExactly]=\"false\"\n                              [listKeysDisable]=\"disableMonth().right()\"\n                              [listHasButtonUnSelectOption]=\"false\"\n                              [convertItemSelected]=\"convertItemMonth\"\n                              [listHiddenInputSearch]=\"true\"\n                              [listConfig]=\"listMonthsConfig()\"\n                              [listKeySelected]=\"listKeyToSelected().month\"\n                              [flagMouse]=\"flagMouse()\"\n                              [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n                              (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'month')\"\n                              (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'month')\"\n                              (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                              (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'month')\">\n                              <div\n                                class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n                                [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'month']\">\n                                <div\n                                  class=\"libs-ui-font-h4m\"\n                                  [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.fontStyle]=\"'normal'\">\n                                  {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n                                </div>\n                                <i\n                                  class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'month'] ? '90deg' : '270deg'\"></i>\n                              </div>\n                            </libs_ui-components-dropdown>\n                          </div>\n                          <div>\n                            <libs_ui-components-dropdown\n                              [listMaxItemShow]=\"10\"\n                              [zIndex]=\"zIndex() + 1\"\n                              [isNgContent]=\"true\"\n                              [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n                              [listClickExactly]=\"false\"\n                              [listHasButtonUnSelectOption]=\"false\"\n                              [convertItemSelected]=\"convertItemYear\"\n                              [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n                              [listConfig]=\"listRightYearConfig()\"\n                              [listKeySelected]=\"listKeyToSelected().year\"\n                              [flagMouse]=\"flagMouse()\"\n                              [httpRequestDetailItemById]=\"rightYearHttpDetailConfig()\"\n                              (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'year')\"\n                              (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'year')\"\n                              (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                              (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'year')\">\n                              <div\n                                class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n                                [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'year']\">\n                                <div\n                                  class=\"libs-ui-font-h4m\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.fontStyle]=\"'normal'\">\n                                  {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n                                </div>\n                                <i\n                                  class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                  [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'year'] ? '90deg' : '270deg'\"></i>\n                              </div>\n                            </libs_ui-components-dropdown>\n                          </div>\n                        </div>\n                        <div class=\"w-1/4 flex items-center relative\">\n                          @if (\n                            (listKeyFromSelected().year &&\n                              listKeyToSelected().year &&\n                              !(listKeyFromSelected().year + 1 === listKeyToSelected().year && listKeyFromSelected().month === 12 && listKeyToSelected().month === 1) &&\n                              listKeyFromSelected().year < listKeyToSelected().year) ||\n                            (listKeyFromSelected().month && listKeyToSelected().month && listKeyFromSelected().month + 1 < +listKeyToSelected().month)\n                          ) {\n                            <div\n                              class=\"flex items-center justify-center absolute left-0 top-[-3px]\"\n                              (click)=\"handlerClickPrev(sideEnum.right)\">\n                              <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          }\n                          @if (\n                            listKeyFromSelected().month &&\n                            listKeyToSelected().month &&\n                            listKeyFromSelected().month > listKeyToSelected().month &&\n                            listKeyFromSelected().year &&\n                            listKeyToSelected().year &&\n                            listKeyFromSelected().year === listKeyToSelected().year\n                          ) {\n                            <div class=\"bg-[#ffffff] w-[21px] h-[21px] cursor-none flex items-center justify-center rounded-[50px]\"></div>\n                          }\n                          @if (\n                            !calendarVariables().right().maxDate ||\n                            calendarVariables()\n                              .right()\n                              .maxDate?.isAfter(calendarVariables().right().calendar && calendarVariables().right().calendar?.lastDay)\n                          ) {\n                            <div (click)=\"handlerClickNext(sideEnum.right)\">\n                              <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                                <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                    @if (!showDropdownsSelect() || !calendarVariables().right().dropdowns) {\n                      {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n                      {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n                    }\n                  </th>\n                </tr>\n                <tr class=\"week-days\">\n                  @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n                    <th>\n                      <span\n                        class=\"libs-ui-font-h6m text-[#6a7383]\"\n                        [style.fontWeight]=\"500\"\n                        [style.fontStyle]=\"'normal'\">\n                        {{ dayofweek }}\n                      </span>\n                    </th>\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (row of calendarVariables().right().calRows?.(); track row) {\n                  <tr\n                    class=\"h-[32px]\"\n                    [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.classList\">\n                    @for (col of calendarVariables().right().calCols?.(); track col) {\n                      <td\n                        class=\"libs-ui-font-h5r\"\n                        [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.[col]\"\n                        [class.today]=\"\n                          calendarVariables().right().calendar &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.date() === today().date() &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.month() === today().month() &&\n                          calendarVariables().right().calendar &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.year() === today().year()\n                        \"\n                        (click)=\"handlerPickerDate($event, sideEnum.right, row, col)\"\n                        (mouseenter)=\"handlerHoverDate($event, sideEnum.right, row, col)\">\n                        <span>{{ calendarVariables().right().calendar?.[row]?.[col]?.date() }}</span>\n                      </td>\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          }\n        </div>\n        @if (hasTimePicker()) {\n          <div>\n            <div class=\"flex justify-center items-center pt-[12px]\">\n              <div\n                class=\"w-full flex justify-center items-center rounded-[4px] border\"\n                [class.border-[#e6e8ed]]=\"!timePickerError()\"\n                [class.border-[#ff5454]]=\"timePickerError()\">\n                <libs_ui-components-inputs-input\n                  classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n                  dataType=\"int\"\n                  [autoAddZeroLessThan10InTypeInt]=\"true\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [maxValueNumber]=\"23\"\n                  [minValueNumber]=\"0\"\n                  [focusTimeOut]=\"0\"\n                  [blurTimeOut]=\"0\"\n                  [maxLength]=\"2\"\n                  [value]=\"timepickerValueItem().righthour()\"\n                  (outChange)=\"handlerChangeTimeValue($event, 'righthour')\"\n                  (outInputEvent)=\"handlerInputEvent($event, 'righthour')\"\n                  (outFunctionsControl)=\"handlerFunctionControl($event, 'righthour')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'righthour')\" />\n                <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n                <libs_ui-components-inputs-input\n                  classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n                  dataType=\"int\"\n                  [autoAddZeroLessThan10InTypeInt]=\"true\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [maxValueNumber]=\"59\"\n                  [minValueNumber]=\"0\"\n                  [focusTimeOut]=\"0\"\n                  [blurTimeOut]=\"0\"\n                  [maxLength]=\"2\"\n                  [value]=\"timepickerValueItem().rightminute()\"\n                  (outInputEvent)=\"handlerInputEvent($event, 'rightminute')\"\n                  (outFunctionsControl)=\"handlerFunctionControl($event, 'rightminute')\"\n                  (outChange)=\"handlerChangeTimeValue($event, 'rightminute')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'rightminute')\" />\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <div>\n    <div class=\"flex w-full\">\n      @if (!isSingle() && hasTimePicker()) {\n        <div class=\"mt-[8px] libs-ui-font-h7r text-[#ff5454] h-[14px]\">\n          @if (timePickerError()) {\n            <span>{{ 'i18n_date_compare_start_end_message_error' | translate }}</span>\n          }\n        </div>\n      }\n    </div>\n    @if (!quickRangesArray().length || !isSingle()) {\n      <div class=\"flex w-full pt-[16px] justify-between\">\n        <div class=\"flex items-center\">\n          @if (!isSingle()) {\n            @if (!endDate()) {\n              <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeLeft() }}</span>\n                }\n                &hyphen;\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeRight() }}</span>\n                }\n              </div>\n            }\n            @if (endDate()) {\n              <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeLeft() }}</span>\n                }\n                &hyphen;\n                <span>{{ endDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeRight() }}</span>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <div class=\"flex\">\n          <libs_ui-components-buttons-button\n            class=\"mr-[12px]\"\n            label=\"i18n_cancel\"\n            type=\"button-third\"\n            (outClick)=\"handlerClickCancel($event)\" />\n          <libs_ui-components-buttons-button\n            label=\"i18n_select\"\n            (outClick)=\"handlerClickApply($event)\" />\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown{display:flex;align-items:center}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar table{border-collapse:inherit;border-spacing:0 2px}.libs-ui-component-custom_ranges-calendar th,.libs-ui-component-custom_ranges-calendar td{padding:0;text-align:center;min-width:32px}.libs-ui-component-custom_ranges-calendar th span,.libs-ui-component-custom_ranges-calendar td span{pointer-events:none}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:before{font-size:20px}.libs-ui-component-custom_ranges-calendar td,.libs-ui-component-custom_ranges-calendar th{cursor:pointer;height:2em;width:2em}.libs-ui-component-custom_ranges-calendar td.available:hover,.libs-ui-component-custom_ranges-calendar th.available:hover{background-color:#f8f5fe;border-color:transparent;border-radius:8px;color:inherit;background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}.libs-ui-component-custom_ranges-calendar td{margin:.25em 0;background-color:#fff;transition:background-color .2s ease;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms;color:#071631!important}.libs-ui-component-custom_ranges-calendar td:hover{color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.off,.libs-ui-component-custom_ranges-calendar td.off.in-range,.libs-ui-component-custom_ranges-calendar td.off.start-date,.libs-ui-component-custom_ranges-calendar td.off.end-date{background-color:#fff;border-color:transparent;color:#cdd0d6!important}.libs-ui-component-custom_ranges-calendar td.focus-off{background-color:#f8f5fe!important}.libs-ui-component-custom_ranges-calendar td.in-range{background-color:#f8f5fe;border-color:transparent;border-radius:0;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today{position:relative;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today:after{position:absolute;content:\"\";width:2px;height:2px;background-color:#8e61ee;left:49%;bottom:5px}.libs-ui-component-custom_ranges-calendar td.active{transition:background .3s ease-out;background:#0000001a}.libs-ui-component-custom_ranges-calendar td.active.today:after{position:absolute;content:\"\";background-color:#fff}.libs-ui-component-custom_ranges-calendar td.active.start-date{border-radius:8px 0 0 8px}.libs-ui-component-custom_ranges-calendar td.active.end-date{border-radius:0 8px 8px 0}.libs-ui-component-custom_ranges-calendar td.active.full-date{border-radius:8px}.libs-ui-component-custom_ranges-calendar td.active,.libs-ui-component-custom_ranges-calendar td.active:hover{background-color:#8e61ee;border-color:transparent;color:#fff!important}.libs-ui-component-custom_ranges-calendar th.month{width:auto}.libs-ui-component-custom_ranges-calendar td.disabled,.libs-ui-component-custom_ranges-calendar option.disabled{color:#999!important;cursor:not-allowed;text-decoration:line-through;background-color:#f4f5f7}.libs-ui-component-custom_ranges-calendar .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right}.libs-ui-component-custom_ranges-calendar th.month>div{position:relative;display:inline-block}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsInputsInputComponent, selector: "libs_ui-components-inputs-input", inputs: ["tagInput", "dataType", "typeInput", "modeInput", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "maxValueNumber", "minValueNumber", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "classInclude", "maxLength", "readonly", "disable", "noBorder", "backgroundNone", "borderError", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "value", "autoRemoveEmoji", "defaultHeight", "minHeightTextArea", "maxHeightTextArea", "focusTimeOut", "selectAllTimeOut", "blurTimeOut", "zIndexPopoverContent", "classContainerInput", "showCount", "ignoreStopPropagationEvent", "resize", "templateLeftBottomInput", "templateRightBottomInput", "classContainerBottomInput", "ignoreWidthInput100", "iframeTextareaCustomStyle", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "resetAutoCompletePassword", "acceptOnlyClickIcon", "setIconRightColorSameColorDisableReadOnly", "onlyAcceptNegativeValue", "maxLengthNumberCount", "focusInput"], outputs: ["maxValueNumberChange", "minValueNumberChange", "fixedFloatChange", "acceptNegativeValueChange", "maxLengthChange", "valueChange", "maxLengthNumberCountChange", "outHeightAreaChange", "outChange", "outFocusAndBlurEvent", "outEnterEvent", "outInputEvent", "outIconLeft", "outIconRight", "outFunctionsControl", "outFilesDrop", "outFileDrop", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-datetime-picker-custom_ranges-calendar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsDropdownComponent, LibsUiComponentsInputsInputComponent, LibsUiComponentsButtonsButtonComponent], template: "<div class=\"libs-ui-component-custom_ranges-calendar test-class\">\n  <div class=\"relative flex\">\n    <div\n      class=\"libs-ui-component-custom_ranges-calendar\"\n      [class.right]=\"isSingle()\"\n      [class.left]=\"!isSingle()\">\n      <div class=\"rounded-[4px] bg-[#ffffff]\">\n        @if (calendarVariables(); as calendarVariables) {\n          <table>\n            <thead>\n              <tr>\n                <th\n                  colspan=\"7\"\n                  class=\"month\">\n                  @if (showDropdownsSelect() && calendarVariables.left().dropdowns?.()) {\n                    <div class=\"!flex mb-[10px] w-full\">\n                      <div class=\"w-3/4 flex items-center\">\n                        <div class=\"mr-[8px]\">\n                          <libs_ui-components-dropdown\n                            [isNgContent]=\"true\"\n                            [zIndex]=\"zIndex() + 1\"\n                            [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n                            [listMaxItemShow]=\"10\"\n                            [listClickExactly]=\"false\"\n                            [listKeysDisable]=\"disableMonth().left()\"\n                            [listHasButtonUnSelectOption]=\"false\"\n                            [convertItemSelected]=\"convertItemMonth\"\n                            [listConfig]=\"listMonthsConfig()\"\n                            [listKeySelected]=\"listKeyFromSelected().month\"\n                            [flagMouse]=\"flagMouse()\"\n                            [listHiddenInputSearch]=\"true\"\n                            [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n                            (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'month')\"\n                            (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'month')\"\n                            (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                            (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'month')\">\n                            <div\n                              class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                              [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n                              [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'month']\">\n                              <div\n                                class=\"libs-ui-font-h4m\"\n                                [style.fontWeight]=\"500\"\n                                [style.fontStyle]=\"'normal'\">\n                                {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n                              </div>\n                              <i\n                                class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n                                [style.fontWeight]=\"500\"\n                                [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'month'] ? '90deg' : '270deg'\"></i>\n                            </div>\n                          </libs_ui-components-dropdown>\n                        </div>\n                        <div>\n                          <libs_ui-components-dropdown\n                            [listMaxItemShow]=\"10\"\n                            [isNgContent]=\"true\"\n                            [zIndex]=\"zIndex() + 1\"\n                            [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n                            [listClickExactly]=\"false\"\n                            [listHasButtonUnSelectOption]=\"false\"\n                            [convertItemSelected]=\"convertItemYear\"\n                            [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n                            [listConfig]=\"listLeftYearConfig()\"\n                            [listKeySelected]=\"listKeyFromSelected().year\"\n                            [flagMouse]=\"flagMouse()\"\n                            [httpRequestDetailItemById]=\"leftYearHttpDetailConfig()\"\n                            (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                            (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'year')\"\n                            (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'year')\"\n                            (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'year')\">\n                            <div\n                              class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                              [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n                              [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'year']\">\n                              <div\n                                class=\"libs-ui-font-h4m\"\n                                [style.fontWeight]=\"500\"\n                                [style.fontStyle]=\"'normal'\">\n                                {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n                              </div>\n                              <i\n                                class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n                                [style.fontWeight]=\"500\"\n                                [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'year'] ? '90deg' : '270deg'\"></i>\n                            </div>\n                          </libs_ui-components-dropdown>\n                        </div>\n                      </div>\n\n                      <div class=\"w-1/4 flex items-center relative\">\n                        @if (!calendarVariables.left().minDate || calendarVariables.left().minDate?.isBefore(calendarVariables.left().calendar && calendarVariables.left().calendar?.firstDay)) {\n                          <div (click)=\"handlerClickPrev(sideEnum.left)\">\n                            <div class=\"flex items-center justify-center absolute left-0 top-[-3px]\">\n                              <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          </div>\n                        }\n                        @if ((!calendarVariables.left().maxDate || calendarVariables.left().maxDate?.isAfter(calendarVariables.left().calendar && calendarVariables.left().calendar?.lastDay)) && isSingle()) {\n                          <div (click)=\"handlerClickNext(sideEnum.left)\">\n                            <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                              <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                  @if (!showDropdownsSelect() || !calendarVariables.left().dropdowns) {\n                    {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n                    {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n                  }\n                </th>\n              </tr>\n              <tr class=\"week-days\">\n                @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n                  <th>\n                    <span\n                      class=\"libs-ui-font-h6m text-[#6a7383]\"\n                      [style.fontWeight]=\"500\"\n                      [style.fontStyle]=\"'normal'\">\n                      {{ dayofweek }}\n                    </span>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody class=\"drp-animate\">\n              @for (row of calendarVariables.left().calRows?.(); track row) {\n                <tr\n                  class=\"h-[32px]\"\n                  [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.classList\">\n                  @for (col of calendarVariables.left().calCols?.(); track col) {\n                    <td\n                      class=\"libs-ui-font-h5r\"\n                      [class.today]=\"\n                        calendarVariables.left().calendar &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.date() === today().date() &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.month() === today().month() &&\n                        calendarVariables.left().calendar?.[row]?.[col]?.year() === today().year()\n                      \"\n                      [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.[col]\"\n                      (click)=\"handlerPickerDate($event, sideEnum.left, row, col)\"\n                      (mouseenter)=\"handlerHoverDate($event, sideEnum.left, row, col)\">\n                      <span class=\"libs-ui-font-h5r\">{{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[row]?.[col]?.date() }}</span>\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        }\n      </div>\n      @if (hasTimePicker()) {\n        <div>\n          <div class=\"flex justify-center column items-center pt-[12px]\">\n            <div\n              class=\"w-full flex justify-center items-center rounded-[4px] border\"\n              [class.border-[#e6e8ed]]=\"!timePickerError()\"\n              [class.border-[#ff5454]]=\"timePickerError()\">\n              <libs_ui-components-inputs-input\n                classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n                dataType=\"int\"\n                [focusTimeOut]=\"0\"\n                [blurTimeOut]=\"0\"\n                [autoAddZeroLessThan10InTypeInt]=\"true\"\n                [emitEmptyInDataTypeNumber]=\"true\"\n                [maxValueNumber]=\"23\"\n                [minValueNumber]=\"0\"\n                [maxLength]=\"2\"\n                [value]=\"timepickerValueItem().lefthour()\"\n                (outInputEvent)=\"handlerInputEvent($event, 'lefthour')\"\n                (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'hour')\"\n                (outChange)=\"handlerChangeTimeValue($event, 'lefthour')\"\n                (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'lefthour')\" />\n              <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n              <libs_ui-components-inputs-input\n                classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n                [autoAddZeroLessThan10InTypeInt]=\"true\"\n                [emitEmptyInDataTypeNumber]=\"true\"\n                dataType=\"int\"\n                [focusTimeOut]=\"0\"\n                [blurTimeOut]=\"0\"\n                [maxValueNumber]=\"59\"\n                [minValueNumber]=\"0\"\n                [maxLength]=\"2\"\n                [value]=\"timepickerValueItem().leftminute()\"\n                (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'minute')\"\n                (outInputEvent)=\"handlerInputEvent($event, 'leftminute')\"\n                (outChange)=\"handlerChangeTimeValue($event, 'leftminute')\"\n                (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'leftminute')\" />\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    @if (!isSingle()) {\n      <div class=\"libs-ui-component-custom_ranges-calendar right ml-[24px]\">\n        <div class=\"rounded-[4px] bg-[#ffffff]\">\n          @if (calendarVariables()) {\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    colspan=\"7\"\n                    class=\"month\">\n                    @if (showDropdownsSelect() && calendarVariables().left().dropdowns?.()) {\n                      <div class=\"!flex mb-[10px] w-full\">\n                        <div class=\"w-3/4 flex items-center\">\n                          <div class=\"mr-[8px]\">\n                            <libs_ui-components-dropdown\n                              [isNgContent]=\"true\"\n                              [zIndex]=\"zIndex() + 1\"\n                              [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n                              [listMaxItemShow]=\"10\"\n                              [listClickExactly]=\"false\"\n                              [listKeysDisable]=\"disableMonth().right()\"\n                              [listHasButtonUnSelectOption]=\"false\"\n                              [convertItemSelected]=\"convertItemMonth\"\n                              [listHiddenInputSearch]=\"true\"\n                              [listConfig]=\"listMonthsConfig()\"\n                              [listKeySelected]=\"listKeyToSelected().month\"\n                              [flagMouse]=\"flagMouse()\"\n                              [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n                              (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'month')\"\n                              (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'month')\"\n                              (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                              (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'month')\">\n                              <div\n                                class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n                                [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'month']\">\n                                <div\n                                  class=\"libs-ui-font-h4m\"\n                                  [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.fontStyle]=\"'normal'\">\n                                  {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n                                </div>\n                                <i\n                                  class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'month'] ? '90deg' : '270deg'\"></i>\n                              </div>\n                            </libs_ui-components-dropdown>\n                          </div>\n                          <div>\n                            <libs_ui-components-dropdown\n                              [listMaxItemShow]=\"10\"\n                              [zIndex]=\"zIndex() + 1\"\n                              [isNgContent]=\"true\"\n                              [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n                              [listClickExactly]=\"false\"\n                              [listHasButtonUnSelectOption]=\"false\"\n                              [convertItemSelected]=\"convertItemYear\"\n                              [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n                              [listConfig]=\"listRightYearConfig()\"\n                              [listKeySelected]=\"listKeyToSelected().year\"\n                              [flagMouse]=\"flagMouse()\"\n                              [httpRequestDetailItemById]=\"rightYearHttpDetailConfig()\"\n                              (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'year')\"\n                              (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'year')\"\n                              (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n                              (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'year')\">\n                              <div\n                                class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n                                [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n                                [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'year']\">\n                                <div\n                                  class=\"libs-ui-font-h4m\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.fontStyle]=\"'normal'\">\n                                  {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n                                </div>\n                                <i\n                                  class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n                                  [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n                                  [style.fontWeight]=\"500\"\n                                  [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'year'] ? '90deg' : '270deg'\"></i>\n                              </div>\n                            </libs_ui-components-dropdown>\n                          </div>\n                        </div>\n                        <div class=\"w-1/4 flex items-center relative\">\n                          @if (\n                            (listKeyFromSelected().year &&\n                              listKeyToSelected().year &&\n                              !(listKeyFromSelected().year + 1 === listKeyToSelected().year && listKeyFromSelected().month === 12 && listKeyToSelected().month === 1) &&\n                              listKeyFromSelected().year < listKeyToSelected().year) ||\n                            (listKeyFromSelected().month && listKeyToSelected().month && listKeyFromSelected().month + 1 < +listKeyToSelected().month)\n                          ) {\n                            <div\n                              class=\"flex items-center justify-center absolute left-0 top-[-3px]\"\n                              (click)=\"handlerClickPrev(sideEnum.right)\">\n                              <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                            </div>\n                          }\n                          @if (\n                            listKeyFromSelected().month &&\n                            listKeyToSelected().month &&\n                            listKeyFromSelected().month > listKeyToSelected().month &&\n                            listKeyFromSelected().year &&\n                            listKeyToSelected().year &&\n                            listKeyFromSelected().year === listKeyToSelected().year\n                          ) {\n                            <div class=\"bg-[#ffffff] w-[21px] h-[21px] cursor-none flex items-center justify-center rounded-[50px]\"></div>\n                          }\n                          @if (\n                            !calendarVariables().right().maxDate ||\n                            calendarVariables()\n                              .right()\n                              .maxDate?.isAfter(calendarVariables().right().calendar && calendarVariables().right().calendar?.lastDay)\n                          ) {\n                            <div (click)=\"handlerClickNext(sideEnum.right)\">\n                              <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n                                <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                    @if (!showDropdownsSelect() || !calendarVariables().right().dropdowns) {\n                      {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n                      {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n                    }\n                  </th>\n                </tr>\n                <tr class=\"week-days\">\n                  @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n                    <th>\n                      <span\n                        class=\"libs-ui-font-h6m text-[#6a7383]\"\n                        [style.fontWeight]=\"500\"\n                        [style.fontStyle]=\"'normal'\">\n                        {{ dayofweek }}\n                      </span>\n                    </th>\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (row of calendarVariables().right().calRows?.(); track row) {\n                  <tr\n                    class=\"h-[32px]\"\n                    [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.classList\">\n                    @for (col of calendarVariables().right().calCols?.(); track col) {\n                      <td\n                        class=\"libs-ui-font-h5r\"\n                        [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.[col]\"\n                        [class.today]=\"\n                          calendarVariables().right().calendar &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.date() === today().date() &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.month() === today().month() &&\n                          calendarVariables().right().calendar &&\n                          calendarVariables().right().calendar?.[row]?.[col]?.year() === today().year()\n                        \"\n                        (click)=\"handlerPickerDate($event, sideEnum.right, row, col)\"\n                        (mouseenter)=\"handlerHoverDate($event, sideEnum.right, row, col)\">\n                        <span>{{ calendarVariables().right().calendar?.[row]?.[col]?.date() }}</span>\n                      </td>\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          }\n        </div>\n        @if (hasTimePicker()) {\n          <div>\n            <div class=\"flex justify-center items-center pt-[12px]\">\n              <div\n                class=\"w-full flex justify-center items-center rounded-[4px] border\"\n                [class.border-[#e6e8ed]]=\"!timePickerError()\"\n                [class.border-[#ff5454]]=\"timePickerError()\">\n                <libs_ui-components-inputs-input\n                  classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n                  dataType=\"int\"\n                  [autoAddZeroLessThan10InTypeInt]=\"true\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [maxValueNumber]=\"23\"\n                  [minValueNumber]=\"0\"\n                  [focusTimeOut]=\"0\"\n                  [blurTimeOut]=\"0\"\n                  [maxLength]=\"2\"\n                  [value]=\"timepickerValueItem().righthour()\"\n                  (outChange)=\"handlerChangeTimeValue($event, 'righthour')\"\n                  (outInputEvent)=\"handlerInputEvent($event, 'righthour')\"\n                  (outFunctionsControl)=\"handlerFunctionControl($event, 'righthour')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'righthour')\" />\n                <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n                <libs_ui-components-inputs-input\n                  classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n                  dataType=\"int\"\n                  [autoAddZeroLessThan10InTypeInt]=\"true\"\n                  [emitEmptyInDataTypeNumber]=\"true\"\n                  [maxValueNumber]=\"59\"\n                  [minValueNumber]=\"0\"\n                  [focusTimeOut]=\"0\"\n                  [blurTimeOut]=\"0\"\n                  [maxLength]=\"2\"\n                  [value]=\"timepickerValueItem().rightminute()\"\n                  (outInputEvent)=\"handlerInputEvent($event, 'rightminute')\"\n                  (outFunctionsControl)=\"handlerFunctionControl($event, 'rightminute')\"\n                  (outChange)=\"handlerChangeTimeValue($event, 'rightminute')\"\n                  (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'rightminute')\" />\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <div>\n    <div class=\"flex w-full\">\n      @if (!isSingle() && hasTimePicker()) {\n        <div class=\"mt-[8px] libs-ui-font-h7r text-[#ff5454] h-[14px]\">\n          @if (timePickerError()) {\n            <span>{{ 'i18n_date_compare_start_end_message_error' | translate }}</span>\n          }\n        </div>\n      }\n    </div>\n    @if (!quickRangesArray().length || !isSingle()) {\n      <div class=\"flex w-full pt-[16px] justify-between\">\n        <div class=\"flex items-center\">\n          @if (!isSingle()) {\n            @if (!endDate()) {\n              <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeLeft() }}</span>\n                }\n                &hyphen;\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeRight() }}</span>\n                }\n              </div>\n            }\n            @if (endDate()) {\n              <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n                <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeLeft() }}</span>\n                }\n                &hyphen;\n                <span>{{ endDate()?.format('DD/MM/YYYY') }}</span>\n                @if (hasTimePicker()) {\n                  <span>{{ computedDisplayTimeRight() }}</span>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <div class=\"flex\">\n          <libs_ui-components-buttons-button\n            class=\"mr-[12px]\"\n            label=\"i18n_cancel\"\n            type=\"button-third\"\n            (outClick)=\"handlerClickCancel($event)\" />\n          <libs_ui-components-buttons-button\n            label=\"i18n_select\"\n            (outClick)=\"handlerClickApply($event)\" />\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown{display:flex;align-items:center}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar table{border-collapse:inherit;border-spacing:0 2px}.libs-ui-component-custom_ranges-calendar th,.libs-ui-component-custom_ranges-calendar td{padding:0;text-align:center;min-width:32px}.libs-ui-component-custom_ranges-calendar th span,.libs-ui-component-custom_ranges-calendar td span{pointer-events:none}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:before{font-size:20px}.libs-ui-component-custom_ranges-calendar td,.libs-ui-component-custom_ranges-calendar th{cursor:pointer;height:2em;width:2em}.libs-ui-component-custom_ranges-calendar td.available:hover,.libs-ui-component-custom_ranges-calendar th.available:hover{background-color:#f8f5fe;border-color:transparent;border-radius:8px;color:inherit;background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}.libs-ui-component-custom_ranges-calendar td{margin:.25em 0;background-color:#fff;transition:background-color .2s ease;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms;color:#071631!important}.libs-ui-component-custom_ranges-calendar td:hover{color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.off,.libs-ui-component-custom_ranges-calendar td.off.in-range,.libs-ui-component-custom_ranges-calendar td.off.start-date,.libs-ui-component-custom_ranges-calendar td.off.end-date{background-color:#fff;border-color:transparent;color:#cdd0d6!important}.libs-ui-component-custom_ranges-calendar td.focus-off{background-color:#f8f5fe!important}.libs-ui-component-custom_ranges-calendar td.in-range{background-color:#f8f5fe;border-color:transparent;border-radius:0;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today{position:relative;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today:after{position:absolute;content:\"\";width:2px;height:2px;background-color:#8e61ee;left:49%;bottom:5px}.libs-ui-component-custom_ranges-calendar td.active{transition:background .3s ease-out;background:#0000001a}.libs-ui-component-custom_ranges-calendar td.active.today:after{position:absolute;content:\"\";background-color:#fff}.libs-ui-component-custom_ranges-calendar td.active.start-date{border-radius:8px 0 0 8px}.libs-ui-component-custom_ranges-calendar td.active.end-date{border-radius:0 8px 8px 0}.libs-ui-component-custom_ranges-calendar td.active.full-date{border-radius:8px}.libs-ui-component-custom_ranges-calendar td.active,.libs-ui-component-custom_ranges-calendar td.active:hover{background-color:#8e61ee;border-color:transparent;color:#fff!important}.libs-ui-component-custom_ranges-calendar th.month{width:auto}.libs-ui-component-custom_ranges-calendar td.disabled,.libs-ui-component-custom_ranges-calendar option.disabled{color:#999!important;cursor:not-allowed;text-decoration:line-through;background-color:#f4f5f7}.libs-ui-component-custom_ranges-calendar .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right}.libs-ui-component-custom_ranges-calendar th.month>div{position:relative;display:inline-block}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"] }]
         }], ctorParameters: () => [] });
@@ -1770,10 +1770,10 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
         // 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\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimePickerCustomRangesComponent, isStandalone: true, selector: "libs_ui-components-datetime-picker-custom_ranges", inputs: { zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, extendRanges: { classPropertyName: "extendRanges", publicName: "extendRanges", isSignal: true, isRequired: false, transformFunction: null }, widthByParent: { classPropertyName: "widthByParent", publicName: "widthByParent", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, listYearHiddenInputSearch: { classPropertyName: "listYearHiddenInputSearch", publicName: "listYearHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null }, positionQuickRanges: { classPropertyName: "positionQuickRanges", publicName: "positionQuickRanges", isSignal: true, isRequired: false, transformFunction: null }, isSingle: { classPropertyName: "isSingle", publicName: "isSingle", isSignal: true, isRequired: false, transformFunction: null }, hasTimePicker: { classPropertyName: "hasTimePicker", publicName: "hasTimePicker", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowCalendars: { classPropertyName: "alwaysShowCalendars", publicName: "alwaysShowCalendars", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, keepCalendarOpeningWithRange: { classPropertyName: "keepCalendarOpeningWithRange", publicName: "keepCalendarOpeningWithRange", isSignal: true, isRequired: false, transformFunction: null }, singleDateSelected: { classPropertyName: "singleDateSelected", publicName: "singleDateSelected", isSignal: true, isRequired: false, transformFunction: null }, dateRangeSelected: { classPropertyName: "dateRangeSelected", publicName: "dateRangeSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange", outChangStageFlagMouse: "outChangStageFlagMouse", outUpdateWidth: "outUpdateWidth", outCancel: "outCancel", outSelectSingleDate: "outSelectSingleDate", outSelectDateRange: "outSelectDateRange", outClickMenuRangeCustom: "outClickMenuRangeCustom" }, ngImport: i0, template: "<div\n  #pickerContainer\n  class=\"libs-ui-component-custom_ranges flex rounded-[4px] bg-[#ffffff] z-[1000] overflow-hidden\"\n  [class.flex-row-reverse]=\"positionQuickRanges() === 'right'\">\n  @if (!isSingle()) {\n    <div\n      class=\"libs-ui-component-custom_ranges-ranges {{ classInclude() || '' }}\"\n      [class.border-l-[#e6e8ed]]=\"positionQuickRanges() === 'right' && showCalTableInRanges()\"\n      [class.border-l]=\"positionQuickRanges() === 'right' && showCalTableInRanges()\"\n      [class.border-r-[#e6e8ed]]=\"positionQuickRanges() === 'left' && showCalTableInRanges()\"\n      [class.border-r]=\"positionQuickRanges() === 'left' && showCalTableInRanges()\"\n      [class.!min-h-[260px]]=\"showCalTableInRanges() && !isSingle()\"\n      [class.!min-h-[300px]]=\"hasTimePicker() && !isSingle()\"\n      [class.!w-[160px]]=\"!widthByParent()\"\n      [class.!w-full]=\"widthByParent()\">\n      @for (range of quickRangesArray(); track range.id) {\n        <div\n          class=\"flex items-center hover:bg-[var(--libs-ui-color-light-3)] cursor-pointer px-[16px] py-[8px]\"\n          [class.libs-ui-selected-range]=\"range.id === chosenQuickRange() && showCustomRangeLabel()\"\n          [class.bg-[var(--libs-ui-color-light-3)]]=\"range.id === chosenQuickRange() || range.id === selectedQuickRange()\"\n          (click)=\"handlerClickRange($event, range)\">\n          <div class=\"libs-ui-font-h5r flex text-[#333333] min-w-0 w-full\">\n            <div\n              LibsUiComponentsPopoverDirective\n              [ignoreStopPropagationEvent]=\"true\"\n              type=\"text\"\n              [config]=\"{ maxWidth: 160, direction: 'top', zIndex: (zIndex() || 1000) + 1 }\"\n              [innerHTML]=\"range.label\"></div>\n          </div>\n          <i\n            class=\"text-[12px] ml-[16px]\"\n            [class.libs-ui-icon-check]=\"range.id === selectedQuickRange()\"\n            [class.text-[var(--libs-ui-color-default)]]=\"range.id === selectedQuickRange()\"></i>\n        </div>\n      }\n    </div>\n  }\n  @if (showCalTableInRanges()) {\n    <div class=\"m-[16px] w-full\">\n      <libs_ui-components-datetime-picker-custom_ranges-calendar\n        [isSingle]=\"isSingle()\"\n        [autoApply]=\"autoApply()\"\n        [zIndex]=\"zIndex()\"\n        [flagMouse]=\"flagMouse()\"\n        [dateOptions]=\"dateOptions()\"\n        [hasTimePicker]=\"hasTimePicker()\"\n        [quickRangesArray]=\"quickRangesArray()\"\n        [startDate]=\"startDate()\"\n        [endDate]=\"endDate()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [listYearHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n        [classInclude]=\"'w-full'\"\n        (outCancel)=\"handlerCancel()\"\n        (outPickerDate)=\"handlerPickerDate($event)\"\n        (outFunctionsControl)=\"handlerFunctionsControl($event)\"\n        (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\" />\n    </div>\n  }\n</div>\n", styles: [".libs-ui-component-custom_ranges{position:relative;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges{width:159px;flex-shrink:0}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges .libs-ui-selected-range{position:relative}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges .libs-ui-selected-range:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:2px;background-color:var(--libs-ui-color-default)!important}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, selector: "libs_ui-components-datetime-picker-custom_ranges-calendar", inputs: ["quickRangesArray", "zIndex", "classInclude", "isSingle", "showDropdownsSelect", "hasTimePicker", "flagMouse", "dateOptions", "autoApply", "hasSecondPicker", "showRangeLabelOnInput", "startDate", "endDate", "minDate", "maxDate", "listYearHiddenInputSearch"], outputs: ["startDateChange", "endDateChange", "outChangStageFlagMouse", "outPickerDate", "outCancel", "outUpdateWidth", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-datetime-picker-custom_ranges', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, LibsUiComponentsPopoverComponent], template: "<div\n  #pickerContainer\n  class=\"libs-ui-component-custom_ranges flex rounded-[4px] bg-[#ffffff] z-[1000] overflow-hidden\"\n  [class.flex-row-reverse]=\"positionQuickRanges() === 'right'\">\n  @if (!isSingle()) {\n    <div\n      class=\"libs-ui-component-custom_ranges-ranges {{ classInclude() || '' }}\"\n      [class.border-l-[#e6e8ed]]=\"positionQuickRanges() === 'right' && showCalTableInRanges()\"\n      [class.border-l]=\"positionQuickRanges() === 'right' && showCalTableInRanges()\"\n      [class.border-r-[#e6e8ed]]=\"positionQuickRanges() === 'left' && showCalTableInRanges()\"\n      [class.border-r]=\"positionQuickRanges() === 'left' && showCalTableInRanges()\"\n      [class.!min-h-[260px]]=\"showCalTableInRanges() && !isSingle()\"\n      [class.!min-h-[300px]]=\"hasTimePicker() && !isSingle()\"\n      [class.!w-[160px]]=\"!widthByParent()\"\n      [class.!w-full]=\"widthByParent()\">\n      @for (range of quickRangesArray(); track range.id) {\n        <div\n          class=\"flex items-center hover:bg-[var(--libs-ui-color-light-3)] cursor-pointer px-[16px] py-[8px]\"\n          [class.libs-ui-selected-range]=\"range.id === chosenQuickRange() && showCustomRangeLabel()\"\n          [class.bg-[var(--libs-ui-color-light-3)]]=\"range.id === chosenQuickRange() || range.id === selectedQuickRange()\"\n          (click)=\"handlerClickRange($event, range)\">\n          <div class=\"libs-ui-font-h5r flex text-[#333333] min-w-0 w-full\">\n            <div\n              LibsUiComponentsPopoverDirective\n              [ignoreStopPropagationEvent]=\"true\"\n              type=\"text\"\n              [config]=\"{ maxWidth: 160, direction: 'top', zIndex: (zIndex() || 1000) + 1 }\"\n              [innerHTML]=\"range.label\"></div>\n          </div>\n          <i\n            class=\"text-[12px] ml-[16px]\"\n            [class.libs-ui-icon-check]=\"range.id === selectedQuickRange()\"\n            [class.text-[var(--libs-ui-color-default)]]=\"range.id === selectedQuickRange()\"></i>\n        </div>\n      }\n    </div>\n  }\n  @if (showCalTableInRanges()) {\n    <div class=\"m-[16px] w-full\">\n      <libs_ui-components-datetime-picker-custom_ranges-calendar\n        [isSingle]=\"isSingle()\"\n        [autoApply]=\"autoApply()\"\n        [zIndex]=\"zIndex()\"\n        [flagMouse]=\"flagMouse()\"\n        [dateOptions]=\"dateOptions()\"\n        [hasTimePicker]=\"hasTimePicker()\"\n        [quickRangesArray]=\"quickRangesArray()\"\n        [startDate]=\"startDate()\"\n        [endDate]=\"endDate()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [listYearHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n        [classInclude]=\"'w-full'\"\n        (outCancel)=\"handlerCancel()\"\n        (outPickerDate)=\"handlerPickerDate($event)\"\n        (outFunctionsControl)=\"handlerFunctionsControl($event)\"\n        (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\" />\n    </div>\n  }\n</div>\n", styles: [".libs-ui-component-custom_ranges{position:relative;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges{width:159px;flex-shrink:0}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges .libs-ui-selected-range{position:relative}.libs-ui-component-custom_ranges .libs-ui-component-custom_ranges-ranges .libs-ui-selected-range:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:2px;background-color:var(--libs-ui-color-default)!important}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"] }]
         }], ctorParameters: () => [] });
@@ -2007,10 +2007,10 @@ class LibsUiComponentsDatetimePickerComponent {
     ngOnDestroy() {
         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\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimePickerComponent, isStandalone: true, selector: "libs_ui-components-datetime-picker", inputs: { dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, classPickerInclude: { classPropertyName: "classPickerInclude", publicName: "classPickerInclude", isSignal: true, isRequired: false, transformFunction: null }, classPickerContentInclude: { classPropertyName: "classPickerContentInclude", publicName: "classPickerContentInclude", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderQuickRange: { classPropertyName: "ignoreBorderQuickRange", publicName: "ignoreBorderQuickRange", isSignal: true, isRequired: false, transformFunction: null }, useColorModeExist: { classPropertyName: "useColorModeExist", publicName: "useColorModeExist", isSignal: true, isRequired: false, transformFunction: null }, hasTimePicker: { classPropertyName: "hasTimePicker", publicName: "hasTimePicker", isSignal: true, isRequired: false, transformFunction: null }, allowReset: { classPropertyName: "allowReset", publicName: "allowReset", isSignal: true, isRequired: false, transformFunction: null }, widthByLabel: { classPropertyName: "widthByLabel", publicName: "widthByLabel", isSignal: true, isRequired: false, transformFunction: null }, directionPopover: { classPropertyName: "directionPopover", publicName: "directionPopover", isSignal: true, isRequired: false, transformFunction: null }, defaultWidth: { classPropertyName: "defaultWidth", publicName: "defaultWidth", isSignal: true, isRequired: false, transformFunction: null }, isSingle: { classPropertyName: "isSingle", publicName: "isSingle", isSignal: true, isRequired: false, transformFunction: null }, extendRanges: { classPropertyName: "extendRanges", publicName: "extendRanges", isSignal: true, isRequired: false, transformFunction: null }, isBorderError: { classPropertyName: "isBorderError", publicName: "isBorderError", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, listYearHiddenInputSearch: { classPropertyName: "listYearHiddenInputSearch", publicName: "listYearHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, widthByParent: { classPropertyName: "widthByParent", publicName: "widthByParent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, rangesPopoverPosition: { classPropertyName: "rangesPopoverPosition", publicName: "rangesPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, rangesPopoverPositionDistance: { classPropertyName: "rangesPopoverPositionDistance", publicName: "rangesPopoverPositionDistance", isSignal: true, isRequired: false, transformFunction: null }, isNgContent: { classPropertyName: "isNgContent", publicName: "isNgContent", isSignal: true, isRequired: false, transformFunction: null }, classIncludeCustomRanges: { classPropertyName: "classIncludeCustomRanges", publicName: "classIncludeCustomRanges", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, positionQuickRanges: { classPropertyName: "positionQuickRanges", publicName: "positionQuickRanges", isSignal: true, isRequired: false, transformFunction: null }, trackDateRageUpdateLabel: { classPropertyName: "trackDateRageUpdateLabel", publicName: "trackDateRageUpdateLabel", isSignal: true, isRequired: false, transformFunction: null }, singleDateSelected: { classPropertyName: "singleDateSelected", publicName: "singleDateSelected", isSignal: true, isRequired: false, transformFunction: null }, dateRangeSelected: { classPropertyName: "dateRangeSelected", publicName: "dateRangeSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { flagMouse: "flagMouseChange", singleDateSelected: "singleDateSelectedChange", dateRangeSelected: "dateRangeSelectedChange", outChangStageFlagMouse: "outChangStageFlagMouse", outReset: "outReset", outSelectSingleDate: "outSelectSingleDate", outSelectDateRange: "outSelectDateRange", outFunctionsControl: "outFunctionsControl" }, ngImport: i0, template: "<div class=\"libs-ui-date-picker {{ classInclude() }}\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label\n      [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required\"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n  <div class=\"flex w-full\">\n    <libs_ui-components-popover\n      [class]=\"classPickerInclude()\"\n      [ignoreShowPopover]=\"disable() || readonly()\"\n      [mode]=\"'click'\"\n      [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n      [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n      [flagMouse]=\"flagMouse()\"\n      [config]=\"{\n        animationConfig: {},\n        maxWidth: 770,\n        maxHeight: 425,\n        directionDistance: 2,\n        template: customRangesRef,\n        widthByParent: widthByParent(),\n        whiteTheme: true,\n        ignoreArrow: true,\n        zIndex: zIndex(),\n        classInclude: 'rounded-[4px] ',\n        direction: directionPopover(),\n        position: { mode: rangesPopoverPosition(), distance: rangesPopoverPositionDistance() },\n      }\"\n      (outChangStageFlagMouse)=\"handlerChangStagePopoverFlagMouse($event)\"\n      (outFunctionsControl)=\"handlerFunctionControl($event)\"\n      (outEvent)=\"handlerPopoverEvent($event)\">\n      @if (!isNgContent()) {\n        <div\n          #containerRef\n          class=\"flex items-center px-[12px] h-[32px] rounded-[4px] bg-[#ffffff] cursor-pointer libs-ui-font-h5r {{ classPickerContentInclude() }}\"\n          [class.libs-ui-disable]=\"disable()\"\n          [class.libs-ui-disable-background]=\"disable()\"\n          [class.!border-none]=\"ignoreBorderQuickRange()\"\n          [class.libs-ui-border-general]=\"!singleError().message && !ignoreBorderQuickRange()\"\n          [class.libs-ui-border-error-general]=\"(singleError().message || isBorderError()) && !ignoreBorderQuickRange()\"\n          [class.min-w-[284px]]=\"!chosenDateFromRanges().selectedLabel && !isSingle() && hasTimePicker()\"\n          [class.!border]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n          [class.!border-[#4e8cf7]]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n          [class.libs-ui-readonly]=\"readonly()\"\n          [class.libs-ui-readonly-background]=\"readonly()\"\n          [style.width.px]=\"width()\"\n          (click)=\"handlerSelectRanges($event)\">\n          <div class=\"libs-ui-icon-calendar text-[#9ca2ad] text-[16px]\"></div>\n          <div\n            class=\"ml-[8px] libs-ui-date-picker-label\"\n            [class.!text-[#071631]]=\"!disable()\"\n            [class.!text-[#9ca2ad]]=\"disable()\">\n            @if (!chosenDateFromRanges().selectedLabel) {\n              @if (!isSingle()) {\n                @if (!placeholder()) {\n                  <span class=\"text-[#9ca2ad]\">\n                    dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                    - dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                  </span>\n                } @else {\n                  <span class=\"text-[#9ca2ad]\">{{ 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-datetime-picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsLabelComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsDatetimePickerCustomRangesComponent], template: "<div class=\"libs-ui-date-picker {{ classInclude() }}\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label\n      [classInclude]=\"labelConfig.classInclude\"\n      [labelLeft]=\"labelConfig.labelLeft\"\n      [labelLeftClass]=\"labelConfig.labelLeftClass\"\n      [required]=\"labelConfig.required\"\n      [description]=\"labelConfig.description\"\n      [descriptionClass]=\"labelConfig.descriptionClass\"\n      [labelRight]=\"labelConfig.labelRight\"\n      [labelRightClass]=\"labelConfig.labelRightClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [buttonsLeft]=\"labelConfig.buttonsLeft\"\n      [buttonsRight]=\"labelConfig.buttonsRight\"\n      [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n      [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n      [hasToggle]=\"labelConfig.hasToggle\"\n      [toggleActive]=\"labelConfig.toggleActive\"\n      [toggleDisable]=\"labelConfig.toggleDisable || disable()\"\n      [popover]=\"labelConfig.popover\"\n      [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n      [onlyShowCount]=\"labelConfig.onlyShowCount\"\n      [limitLength]=\"labelConfig.limitLength\"\n      [buttonsDescription]=\"labelConfig.buttonsDescription\"\n      [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n      [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n      [count]=\"labelConfig.count\" />\n  }\n  <div class=\"flex w-full\">\n    <libs_ui-components-popover\n      [class]=\"classPickerInclude()\"\n      [ignoreShowPopover]=\"disable() || readonly()\"\n      [mode]=\"'click'\"\n      [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n      [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n      [flagMouse]=\"flagMouse()\"\n      [config]=\"{\n        animationConfig: {},\n        maxWidth: 770,\n        maxHeight: 425,\n        directionDistance: 2,\n        template: customRangesRef,\n        widthByParent: widthByParent(),\n        whiteTheme: true,\n        ignoreArrow: true,\n        zIndex: zIndex(),\n        classInclude: 'rounded-[4px] ',\n        direction: directionPopover(),\n        position: { mode: rangesPopoverPosition(), distance: rangesPopoverPositionDistance() },\n      }\"\n      (outChangStageFlagMouse)=\"handlerChangStagePopoverFlagMouse($event)\"\n      (outFunctionsControl)=\"handlerFunctionControl($event)\"\n      (outEvent)=\"handlerPopoverEvent($event)\">\n      @if (!isNgContent()) {\n        <div\n          #containerRef\n          class=\"flex items-center px-[12px] h-[32px] rounded-[4px] bg-[#ffffff] cursor-pointer libs-ui-font-h5r {{ classPickerContentInclude() }}\"\n          [class.libs-ui-disable]=\"disable()\"\n          [class.libs-ui-disable-background]=\"disable()\"\n          [class.!border-none]=\"ignoreBorderQuickRange()\"\n          [class.libs-ui-border-general]=\"!singleError().message && !ignoreBorderQuickRange()\"\n          [class.libs-ui-border-error-general]=\"(singleError().message || isBorderError()) && !ignoreBorderQuickRange()\"\n          [class.min-w-[284px]]=\"!chosenDateFromRanges().selectedLabel && !isSingle() && hasTimePicker()\"\n          [class.!border]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n          [class.!border-[#4e8cf7]]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n          [class.libs-ui-readonly]=\"readonly()\"\n          [class.libs-ui-readonly-background]=\"readonly()\"\n          [style.width.px]=\"width()\"\n          (click)=\"handlerSelectRanges($event)\">\n          <div class=\"libs-ui-icon-calendar text-[#9ca2ad] text-[16px]\"></div>\n          <div\n            class=\"ml-[8px] libs-ui-date-picker-label\"\n            [class.!text-[#071631]]=\"!disable()\"\n            [class.!text-[#9ca2ad]]=\"disable()\">\n            @if (!chosenDateFromRanges().selectedLabel) {\n              @if (!isSingle()) {\n                @if (!placeholder()) {\n                  <span class=\"text-[#9ca2ad]\">\n                    dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                    - dd/mm/yyyy\n                    @if (hasTimePicker()) {\n                      <span>&nbsp;hh:mm</span>\n                    }\n                  </span>\n                } @else {\n                  <span class=\"text-[#9ca2ad]\">{{ 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: () => [] });

package/package.json CHANGED Viewed

@@ -1,19 +1,19 @@
 {
   "name": "@libs-ui/components-datetime-picker",
-  "version": "0.2.312-0",
+  "version": "0.2.312-2",
   "peerDependencies": {
     "@angular/core": ">=18.0.0",
-    "@libs-ui/components-buttons-button": "0.2.312-0",
-    "@libs-ui/components-dropdown": "0.2.312-0",
-    "@libs-ui/components-inputs-input": "0.2.312-0",
-    "@libs-ui/components-list": "0.2.312-0",
-    "@libs-ui/components-popover": "0.2.312-0",
-    "@libs-ui/interfaces-types": "0.2.312-0",
-    "@libs-ui/services-http-request": "0.2.312-0",
-    "@libs-ui/utils": "0.2.312-0",
+    "@libs-ui/components-buttons-button": "0.2.312-2",
+    "@libs-ui/components-dropdown": "0.2.312-2",
+    "@libs-ui/components-inputs-input": "0.2.312-2",
+    "@libs-ui/components-list": "0.2.312-2",
+    "@libs-ui/components-popover": "0.2.312-2",
+    "@libs-ui/interfaces-types": "0.2.312-2",
+    "@libs-ui/services-http-request": "0.2.312-2",
+    "@libs-ui/utils": "0.2.312-2",
     "@ngx-translate/core": "^15.0.0",
     "dayjs": "1.11.5",
-    "@libs-ui/components-label": "0.2.312-0"
+    "@libs-ui/components-label": "0.2.312-2"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-datetime-picker.mjs",