@libs-ui/components-datetime-picker 0.2.186 → 0.2.188

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

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

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

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