npm - @libs-ui/components-datetime-picker - Versions diffs - 0.2.320-0 → 0.2.322-0 - Mend

@libs-ui/components-datetime-picker 0.2.320-0 → 0.2.322-0

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 (6) 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: () => [] });