@libs-ui/components-datetime-picker 0.2.335-0 → 0.2.336-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/custom-ranges/calendar/calendar.component.d.ts +2 -1
  2. package/esm2022/custom-ranges/calendar/calendar.component.mjs +9 -6
  3. package/fesm2022/libs-ui-components-datetime-picker.mjs +8 -5
  4. package/fesm2022/libs-ui-components-datetime-picker.mjs.map +1 -1
  5. package/package.json +10 -10
package/fesm2022/libs-ui-components-datetime-picker.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { signal, computed, input, model, output, inject, viewChild, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
2
+ import { signal, computed, input, model, output, inject, viewChild, viewChildren, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
3
3
  import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
4
4
  import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
5
5
  import { UtilsLanguageConstants, get, UtilsCache, getDayjs, UtilsHttpParamsRequestInstance, isEmpty, set, ERROR_MESSAGE_EMPTY_VALID } from '@libs-ui/utils';
@@ -267,16 +267,14 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
267
267
  listYearHiddenInputSearch = input(true, { transform: (value) => value ?? true });
268
268
  /** OUTPUT */
269
269
  outChangStageFlagMouse = output();
270
- // readonly outStartDateChanged = output<{ startDate: Dayjs | undefined }>();
271
- // readonly outEndDateChanged = output<{ endDate: Dayjs | undefined }>();
272
270
  outPickerDate = output();
273
- // readonly outRangeClicked: EventEmitter<IRangesClicked> = new EventEmitter();
274
271
  outCancel = output();
275
272
  outUpdateWidth = output();
276
273
  outFunctionsControl = output();
277
274
  /** INJECTION */
278
275
  translate = inject(TranslateService);
279
276
  pickerContainer = viewChild('pickerContainer');
277
+ inputTimeHours = viewChildren(LibsUiComponentsInputsInputComponent);
280
278
  constructor() {
281
279
  this.listMonthsConfig.set(getMonthsListConfig(this.translate));
282
280
  effect(() => {
@@ -335,6 +333,11 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
335
333
  leftminute: signal(this.timepickerVariables().left().selectedMinute),
336
334
  rightminute: signal(this.timepickerVariables().right().selectedMinute),
337
335
  });
336
+ setTimeout(() => {
337
+ this.inputTimeHours()?.forEach((input) => {
338
+ input.FunctionsControl.blur(true);
339
+ });
340
+ }, 0);
338
341
  // this.outFunctionsControl.emit({ buildDefaultRange: this.buildDefaultRange.bind(this), applyToSelect: this.applyToSelect.bind(this) })
339
342
  }
340
343
  buildConfigYear(side, startYear) {
@@ -1471,7 +1474,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
1471
1474
  return;
1472
1475
  }
1473
1476
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1474
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, isStandalone: true, selector: "libs_ui-components-datetime-picker-custom_ranges-calendar", inputs: { quickRangesArray: { classPropertyName: "quickRangesArray", publicName: "quickRangesArray", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, isSingle: { classPropertyName: "isSingle", publicName: "isSingle", isSignal: true, isRequired: false, transformFunction: null }, showDropdownsSelect: { classPropertyName: "showDropdownsSelect", publicName: "showDropdownsSelect", isSignal: true, isRequired: false, transformFunction: null }, hasTimePicker: { classPropertyName: "hasTimePicker", publicName: "hasTimePicker", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, hasSecondPicker: { classPropertyName: "hasSecondPicker", publicName: "hasSecondPicker", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabelOnInput: { classPropertyName: "showRangeLabelOnInput", publicName: "showRangeLabelOnInput", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, listYearHiddenInputSearch: { classPropertyName: "listYearHiddenInputSearch", publicName: "listYearHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange", outChangStageFlagMouse: "outChangStageFlagMouse", outPickerDate: "outPickerDate", outCancel: "outCancel", outUpdateWidth: "outUpdateWidth", outFunctionsControl: "outFunctionsControl" }, viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"libs-ui-component-custom_ranges-calendar test-class\">\n <div class=\"relative flex\">\n <div\n class=\"libs-ui-component-custom_ranges-calendar\"\n [class.right]=\"isSingle()\"\n [class.left]=\"!isSingle()\">\n <div class=\"rounded-[4px] bg-[#ffffff]\">\n @if (calendarVariables(); as calendarVariables) {\n <table>\n <thead>\n <tr>\n <th\n colspan=\"7\"\n class=\"month\">\n @if (showDropdownsSelect() && calendarVariables.left().dropdowns?.()) {\n <div class=\"!flex mb-[10px] w-full\">\n <div class=\"w-3/4 flex items-center\">\n <div class=\"mr-[8px]\">\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [zIndex]=\"zIndex() + 1\"\n [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n [listMaxItemShow]=\"10\"\n [listClickExactly]=\"false\"\n [listKeysDisable]=\"disableMonth().left()\"\n [listHasButtonUnSelectOption]=\"false\"\n [convertItemSelected]=\"convertItemMonth\"\n [listConfig]=\"listMonthsConfig()\"\n [listKeySelected]=\"listKeyFromSelected().month\"\n [flagMouse]=\"flagMouse()\"\n [listHiddenInputSearch]=\"true\"\n [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'month')\"\n (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'month')\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'month')\">\n <div\n class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'month']\">\n <div\n class=\"libs-ui-font-h4m\"\n [style.fontWeight]=\"500\"\n [style.fontStyle]=\"'normal'\">\n {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n </div>\n <i\n class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n [style.fontWeight]=\"500\"\n [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'month'] ? '90deg' : '270deg'\"></i>\n </div>\n </libs_ui-components-dropdown>\n </div>\n <div>\n <libs_ui-components-dropdown\n [listMaxItemShow]=\"10\"\n [isNgContent]=\"true\"\n [zIndex]=\"zIndex() + 1\"\n [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n [listClickExactly]=\"false\"\n [listHasButtonUnSelectOption]=\"false\"\n [convertItemSelected]=\"convertItemYear\"\n [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n [listConfig]=\"listLeftYearConfig()\"\n [listKeySelected]=\"listKeyFromSelected().year\"\n [flagMouse]=\"flagMouse()\"\n [httpRequestDetailItemById]=\"leftYearHttpDetailConfig()\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'year')\"\n (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'year')\"\n (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'year')\">\n <div\n class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'year']\">\n <div\n class=\"libs-ui-font-h4m\"\n [style.fontWeight]=\"500\"\n [style.fontStyle]=\"'normal'\">\n {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n </div>\n <i\n class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n [style.fontWeight]=\"500\"\n [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'year'] ? '90deg' : '270deg'\"></i>\n </div>\n </libs_ui-components-dropdown>\n </div>\n </div>\n\n <div class=\"w-1/4 flex items-center relative\">\n @if (!calendarVariables.left().minDate || calendarVariables.left().minDate?.isBefore(calendarVariables.left().calendar && calendarVariables.left().calendar?.firstDay)) {\n <div (click)=\"handlerClickPrev(sideEnum.left)\">\n <div class=\"flex items-center justify-center absolute left-0 top-[-3px]\">\n <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n </div>\n </div>\n }\n @if ((!calendarVariables.left().maxDate || calendarVariables.left().maxDate?.isAfter(calendarVariables.left().calendar && calendarVariables.left().calendar?.lastDay)) && isSingle()) {\n <div (click)=\"handlerClickNext(sideEnum.left)\">\n <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @if (!showDropdownsSelect() || !calendarVariables.left().dropdowns) {\n {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n }\n </th>\n </tr>\n <tr class=\"week-days\">\n @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n <th>\n <span\n class=\"libs-ui-font-h6m text-[#6a7383]\"\n [style.fontWeight]=\"500\"\n [style.fontStyle]=\"'normal'\">\n {{ dayofweek }}\n </span>\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"drp-animate\">\n @for (row of calendarVariables.left().calRows?.(); track row) {\n <tr\n class=\"h-[32px]\"\n [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.classList\">\n @for (col of calendarVariables.left().calCols?.(); track col) {\n <td\n class=\"libs-ui-font-h5r\"\n [class.today]=\"\n calendarVariables.left().calendar &&\n calendarVariables.left().calendar?.[row]?.[col]?.date() === today().date() &&\n calendarVariables.left().calendar?.[row]?.[col]?.month() === today().month() &&\n calendarVariables.left().calendar?.[row]?.[col]?.year() === today().year()\n \"\n [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.[col]\"\n (click)=\"handlerPickerDate($event, sideEnum.left, row, col)\"\n (mouseenter)=\"handlerHoverDate($event, sideEnum.left, row, col)\">\n <span class=\"libs-ui-font-h5r\">{{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[row]?.[col]?.date() }}</span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n }\n </div>\n @if (hasTimePicker()) {\n <div>\n <div class=\"flex justify-center column items-center pt-[12px]\">\n <div\n class=\"w-full flex justify-center items-center rounded-[4px] border\"\n [class.border-[#e6e8ed]]=\"!timePickerError()\"\n [class.border-[#ff5454]]=\"timePickerError()\">\n <libs_ui-components-inputs-input\n classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n dataType=\"int\"\n [focusTimeOut]=\"0\"\n [blurTimeOut]=\"0\"\n [autoAddZeroLessThan10InTypeInt]=\"true\"\n [emitEmptyInDataTypeNumber]=\"true\"\n [maxValueNumber]=\"23\"\n [minValueNumber]=\"0\"\n [maxLength]=\"2\"\n [value]=\"timepickerValueItem().lefthour()\"\n (outInputEvent)=\"handlerInputEvent($event, 'lefthour')\"\n (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'hour')\"\n (outChange)=\"handlerChangeTimeValue($event, 'lefthour')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'lefthour')\" />\n <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n <libs_ui-components-inputs-input\n classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n [autoAddZeroLessThan10InTypeInt]=\"true\"\n [emitEmptyInDataTypeNumber]=\"true\"\n dataType=\"int\"\n [focusTimeOut]=\"0\"\n [blurTimeOut]=\"0\"\n [maxValueNumber]=\"59\"\n [minValueNumber]=\"0\"\n [maxLength]=\"2\"\n [value]=\"timepickerValueItem().leftminute()\"\n (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'minute')\"\n (outInputEvent)=\"handlerInputEvent($event, 'leftminute')\"\n (outChange)=\"handlerChangeTimeValue($event, 'leftminute')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'leftminute')\" />\n </div>\n </div>\n </div>\n }\n </div>\n\n @if (!isSingle()) {\n <div class=\"libs-ui-component-custom_ranges-calendar right ml-[24px]\">\n <div class=\"rounded-[4px] bg-[#ffffff]\">\n @if (calendarVariables()) {\n <table>\n <thead>\n <tr>\n <th\n colspan=\"7\"\n class=\"month\">\n @if (showDropdownsSelect() && calendarVariables().left().dropdowns?.()) {\n <div class=\"!flex mb-[10px] w-full\">\n <div class=\"w-3/4 flex items-center\">\n <div class=\"mr-[8px]\">\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [zIndex]=\"zIndex() + 1\"\n [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n [listMaxItemShow]=\"10\"\n [listClickExactly]=\"false\"\n [listKeysDisable]=\"disableMonth().right()\"\n [listHasButtonUnSelectOption]=\"false\"\n [convertItemSelected]=\"convertItemMonth\"\n [listHiddenInputSearch]=\"true\"\n [listConfig]=\"listMonthsConfig()\"\n [listKeySelected]=\"listKeyToSelected().month\"\n [flagMouse]=\"flagMouse()\"\n [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'month')\"\n (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'month')\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'month')\">\n <div\n class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'month']\">\n <div\n class=\"libs-ui-font-h4m\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n [style.fontWeight]=\"500\"\n [style.fontStyle]=\"'normal'\">\n {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n </div>\n <i\n class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n [style.fontWeight]=\"500\"\n [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'month'] ? '90deg' : '270deg'\"></i>\n </div>\n </libs_ui-components-dropdown>\n </div>\n <div>\n <libs_ui-components-dropdown\n [listMaxItemShow]=\"10\"\n [zIndex]=\"zIndex() + 1\"\n [isNgContent]=\"true\"\n [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n [listClickExactly]=\"false\"\n [listHasButtonUnSelectOption]=\"false\"\n [convertItemSelected]=\"convertItemYear\"\n [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n [listConfig]=\"listRightYearConfig()\"\n [listKeySelected]=\"listKeyToSelected().year\"\n [flagMouse]=\"flagMouse()\"\n [httpRequestDetailItemById]=\"rightYearHttpDetailConfig()\"\n (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'year')\"\n (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'year')\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'year')\">\n <div\n class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'year']\">\n <div\n class=\"libs-ui-font-h4m\"\n [style.fontWeight]=\"500\"\n [style.fontStyle]=\"'normal'\">\n {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n </div>\n <i\n class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n [style.fontWeight]=\"500\"\n [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'year'] ? '90deg' : '270deg'\"></i>\n </div>\n </libs_ui-components-dropdown>\n </div>\n </div>\n <div class=\"w-1/4 flex items-center relative\">\n @if (\n (listKeyFromSelected().year &&\n listKeyToSelected().year &&\n !(listKeyFromSelected().year + 1 === listKeyToSelected().year && listKeyFromSelected().month === 12 && listKeyToSelected().month === 1) &&\n listKeyFromSelected().year < listKeyToSelected().year) ||\n (listKeyFromSelected().month && listKeyToSelected().month && listKeyFromSelected().month + 1 < +listKeyToSelected().month)\n ) {\n <div\n class=\"flex items-center justify-center absolute left-0 top-[-3px]\"\n (click)=\"handlerClickPrev(sideEnum.right)\">\n <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n </div>\n }\n @if (\n listKeyFromSelected().month &&\n listKeyToSelected().month &&\n listKeyFromSelected().month > listKeyToSelected().month &&\n listKeyFromSelected().year &&\n listKeyToSelected().year &&\n listKeyFromSelected().year === listKeyToSelected().year\n ) {\n <div class=\"bg-[#ffffff] w-[21px] h-[21px] cursor-none flex items-center justify-center rounded-[50px]\"></div>\n }\n @if (\n !calendarVariables().right().maxDate ||\n calendarVariables()\n .right()\n .maxDate?.isAfter(calendarVariables().right().calendar && calendarVariables().right().calendar?.lastDay)\n ) {\n <div (click)=\"handlerClickNext(sideEnum.right)\">\n <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @if (!showDropdownsSelect() || !calendarVariables().right().dropdowns) {\n {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n }\n </th>\n </tr>\n <tr class=\"week-days\">\n @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n <th>\n <span\n class=\"libs-ui-font-h6m text-[#6a7383]\"\n [style.fontWeight]=\"500\"\n [style.fontStyle]=\"'normal'\">\n {{ dayofweek }}\n </span>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of calendarVariables().right().calRows?.(); track row) {\n <tr\n class=\"h-[32px]\"\n [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.classList\">\n @for (col of calendarVariables().right().calCols?.(); track col) {\n <td\n class=\"libs-ui-font-h5r\"\n [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.[col]\"\n [class.today]=\"\n calendarVariables().right().calendar &&\n calendarVariables().right().calendar?.[row]?.[col]?.date() === today().date() &&\n calendarVariables().right().calendar?.[row]?.[col]?.month() === today().month() &&\n calendarVariables().right().calendar &&\n calendarVariables().right().calendar?.[row]?.[col]?.year() === today().year()\n \"\n (click)=\"handlerPickerDate($event, sideEnum.right, row, col)\"\n (mouseenter)=\"handlerHoverDate($event, sideEnum.right, row, col)\">\n <span>{{ calendarVariables().right().calendar?.[row]?.[col]?.date() }}</span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n }\n </div>\n @if (hasTimePicker()) {\n <div>\n <div class=\"flex justify-center items-center pt-[12px]\">\n <div\n class=\"w-full flex justify-center items-center rounded-[4px] border\"\n [class.border-[#e6e8ed]]=\"!timePickerError()\"\n [class.border-[#ff5454]]=\"timePickerError()\">\n <libs_ui-components-inputs-input\n classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n dataType=\"int\"\n [autoAddZeroLessThan10InTypeInt]=\"true\"\n [emitEmptyInDataTypeNumber]=\"true\"\n [maxValueNumber]=\"23\"\n [minValueNumber]=\"0\"\n [focusTimeOut]=\"0\"\n [blurTimeOut]=\"0\"\n [maxLength]=\"2\"\n [value]=\"timepickerValueItem().righthour()\"\n (outChange)=\"handlerChangeTimeValue($event, 'righthour')\"\n (outInputEvent)=\"handlerInputEvent($event, 'righthour')\"\n (outFunctionsControl)=\"handlerFunctionControl($event, 'righthour')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'righthour')\" />\n <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n <libs_ui-components-inputs-input\n classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n dataType=\"int\"\n [autoAddZeroLessThan10InTypeInt]=\"true\"\n [emitEmptyInDataTypeNumber]=\"true\"\n [maxValueNumber]=\"59\"\n [minValueNumber]=\"0\"\n [focusTimeOut]=\"0\"\n [blurTimeOut]=\"0\"\n [maxLength]=\"2\"\n [value]=\"timepickerValueItem().rightminute()\"\n (outInputEvent)=\"handlerInputEvent($event, 'rightminute')\"\n (outFunctionsControl)=\"handlerFunctionControl($event, 'rightminute')\"\n (outChange)=\"handlerChangeTimeValue($event, 'rightminute')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'rightminute')\" />\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n <div>\n <div class=\"flex w-full\">\n @if (!isSingle() && hasTimePicker()) {\n <div class=\"mt-[8px] libs-ui-font-h7r text-[#ff5454] h-[14px]\">\n @if (timePickerError()) {\n <span>{{ 'i18n_date_compare_start_end_message_error' | translate }}</span>\n }\n </div>\n }\n </div>\n @if (!quickRangesArray().length || !isSingle()) {\n <div class=\"flex w-full pt-[16px] justify-between\">\n <div class=\"flex items-center\">\n @if (!isSingle()) {\n @if (!endDate()) {\n <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n @if (hasTimePicker()) {\n <span>{{ computedDisplayTimeLeft() }}</span>\n }\n &hyphen;\n <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n @if (hasTimePicker()) {\n <span>{{ computedDisplayTimeRight() }}</span>\n }\n </div>\n }\n @if (endDate()) {\n <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n @if (hasTimePicker()) {\n <span>{{ computedDisplayTimeLeft() }}</span>\n }\n &hyphen;\n <span>{{ endDate()?.format('DD/MM/YYYY') }}</span>\n @if (hasTimePicker()) {\n <span>{{ computedDisplayTimeRight() }}</span>\n }\n </div>\n }\n }\n </div>\n\n <div class=\"flex\">\n <libs_ui-components-buttons-button\n class=\"mr-[12px]\"\n label=\"i18n_cancel\"\n type=\"button-third\"\n (outClick)=\"handlerClickCancel($event)\" />\n <libs_ui-components-buttons-button\n label=\"i18n_select\"\n (outClick)=\"handlerClickApply($event)\" />\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [".libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown{display:flex;align-items:center}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar table{border-collapse:inherit;border-spacing:0 2px}.libs-ui-component-custom_ranges-calendar th,.libs-ui-component-custom_ranges-calendar td{padding:0;text-align:center;min-width:32px}.libs-ui-component-custom_ranges-calendar th span,.libs-ui-component-custom_ranges-calendar td span{pointer-events:none}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:before{font-size:20px}.libs-ui-component-custom_ranges-calendar td,.libs-ui-component-custom_ranges-calendar th{cursor:pointer;height:2em;width:2em}.libs-ui-component-custom_ranges-calendar td.available:hover,.libs-ui-component-custom_ranges-calendar th.available:hover{background-color:#f8f5fe;border-color:transparent;border-radius:8px;color:inherit;background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}.libs-ui-component-custom_ranges-calendar td{margin:.25em 0;background-color:#fff;transition:background-color .2s ease;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms;color:#071631!important}.libs-ui-component-custom_ranges-calendar td:hover{color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.off,.libs-ui-component-custom_ranges-calendar td.off.in-range,.libs-ui-component-custom_ranges-calendar td.off.start-date,.libs-ui-component-custom_ranges-calendar td.off.end-date{background-color:#fff;border-color:transparent;color:#cdd0d6!important}.libs-ui-component-custom_ranges-calendar td.focus-off{background-color:#f8f5fe!important}.libs-ui-component-custom_ranges-calendar td.in-range{background-color:#f8f5fe;border-color:transparent;border-radius:0;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today{position:relative;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today:after{position:absolute;content:\"\";width:2px;height:2px;background-color:#8e61ee;left:49%;bottom:5px}.libs-ui-component-custom_ranges-calendar td.active{transition:background .3s ease-out;background:#0000001a}.libs-ui-component-custom_ranges-calendar td.active.today:after{position:absolute;content:\"\";background-color:#fff}.libs-ui-component-custom_ranges-calendar td.active.start-date{border-radius:8px 0 0 8px}.libs-ui-component-custom_ranges-calendar td.active.end-date{border-radius:0 8px 8px 0}.libs-ui-component-custom_ranges-calendar td.active.full-date{border-radius:8px}.libs-ui-component-custom_ranges-calendar td.active,.libs-ui-component-custom_ranges-calendar td.active:hover{background-color:#8e61ee;border-color:transparent;color:#fff!important}.libs-ui-component-custom_ranges-calendar th.month{width:auto}.libs-ui-component-custom_ranges-calendar td.disabled,.libs-ui-component-custom_ranges-calendar option.disabled{color:#999!important;cursor:not-allowed;text-decoration:line-through;background-color:#f4f5f7}.libs-ui-component-custom_ranges-calendar .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right}.libs-ui-component-custom_ranges-calendar th.month>div{position:relative;display:inline-block}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsInputsInputComponent, selector: "libs_ui-components-inputs-input", inputs: ["tagInput", "dataType", "typeInput", "modeInput", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "maxValueNumber", "minValueNumber", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "classInclude", "maxLength", "readonly", "disable", "noBorder", "backgroundNone", "borderError", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "value", "autoRemoveEmoji", "defaultHeight", "minHeightTextArea", "maxHeightTextArea", "focusTimeOut", "selectAllTimeOut", "blurTimeOut", "zIndexPopoverContent", "classContainerInput", "showCount", "ignoreStopPropagationEvent", "resize", "templateLeftBottomInput", "templateRightBottomInput", "classContainerBottomInput", "ignoreWidthInput100", "iframeTextareaCustomStyle", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "resetAutoCompletePassword", "acceptOnlyClickIcon", "setIconRightColorSameColorDisableReadOnly", "onlyAcceptNegativeValue", "maxLengthNumberCount", "focusInput"], outputs: ["maxValueNumberChange", "minValueNumberChange", "fixedFloatChange", "acceptNegativeValueChange", "maxLengthChange", "valueChange", "maxLengthNumberCountChange", "outHeightAreaChange", "outChange", "outFocusAndBlurEvent", "outEnterEvent", "outInputEvent", "outIconLeft", "outIconRight", "outFunctionsControl", "outFilesDrop", "outFileDrop", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1477
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, isStandalone: true, selector: "libs_ui-components-datetime-picker-custom_ranges-calendar", inputs: { quickRangesArray: { classPropertyName: "quickRangesArray", publicName: "quickRangesArray", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, isSingle: { classPropertyName: "isSingle", publicName: "isSingle", isSignal: true, isRequired: false, transformFunction: null }, showDropdownsSelect: { classPropertyName: "showDropdownsSelect", publicName: "showDropdownsSelect", isSignal: true, isRequired: false, transformFunction: null }, hasTimePicker: { classPropertyName: "hasTimePicker", publicName: "hasTimePicker", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, hasSecondPicker: { classPropertyName: "hasSecondPicker", publicName: "hasSecondPicker", isSignal: true, isRequired: false, transformFunction: null }, showRangeLabelOnInput: { classPropertyName: "showRangeLabelOnInput", publicName: "showRangeLabelOnInput", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, listYearHiddenInputSearch: { classPropertyName: "listYearHiddenInputSearch", publicName: "listYearHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange", outChangStageFlagMouse: "outChangStageFlagMouse", outPickerDate: "outPickerDate", outCancel: "outCancel", outUpdateWidth: "outUpdateWidth", outFunctionsControl: "outFunctionsControl" }, viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true, isSignal: true }, { propertyName: "inputTimeHours", predicate: LibsUiComponentsInputsInputComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"libs-ui-component-custom_ranges-calendar test-class\">\n <div class=\"relative flex\">\n <div\n class=\"libs-ui-component-custom_ranges-calendar\"\n [class.right]=\"isSingle()\"\n [class.left]=\"!isSingle()\">\n <div class=\"rounded-[4px] bg-[#ffffff]\">\n @if (calendarVariables(); as calendarVariables) {\n <table>\n <thead>\n <tr>\n <th\n colspan=\"7\"\n class=\"month\">\n @if (showDropdownsSelect() && calendarVariables.left().dropdowns?.()) {\n <div class=\"!flex mb-[10px] w-full\">\n <div class=\"w-3/4 flex items-center\">\n <div class=\"mr-[8px]\">\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [zIndex]=\"zIndex() + 1\"\n [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n [listMaxItemShow]=\"10\"\n [listClickExactly]=\"false\"\n [listKeysDisable]=\"disableMonth().left()\"\n [listHasButtonUnSelectOption]=\"false\"\n [convertItemSelected]=\"convertItemMonth\"\n [listConfig]=\"listMonthsConfig()\"\n [listKeySelected]=\"listKeyFromSelected().month\"\n [flagMouse]=\"flagMouse()\"\n [listHiddenInputSearch]=\"true\"\n [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'month')\"\n (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'month')\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'month')\">\n <div\n class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'month']\">\n <div\n class=\"libs-ui-font-h4m\"\n [style.fontWeight]=\"500\"\n [style.fontStyle]=\"'normal'\">\n {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n </div>\n <i\n class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'month']\"\n [style.fontWeight]=\"500\"\n [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'month'] ? '90deg' : '270deg'\"></i>\n </div>\n </libs_ui-components-dropdown>\n </div>\n <div>\n <libs_ui-components-dropdown\n [listMaxItemShow]=\"10\"\n [isNgContent]=\"true\"\n [zIndex]=\"zIndex() + 1\"\n [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n [listClickExactly]=\"false\"\n [listHasButtonUnSelectOption]=\"false\"\n [convertItemSelected]=\"convertItemYear\"\n [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n [listConfig]=\"listLeftYearConfig()\"\n [listKeySelected]=\"listKeyFromSelected().year\"\n [flagMouse]=\"flagMouse()\"\n [httpRequestDetailItemById]=\"leftYearHttpDetailConfig()\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n (outShowList)=\"handlerShowListDropdown($event, sideEnum.left + 'year')\"\n (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.left + 'year')\"\n (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'year')\">\n <div\n class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.left + 'year']\">\n <div\n class=\"libs-ui-font-h4m\"\n [style.fontWeight]=\"500\"\n [style.fontStyle]=\"'normal'\">\n {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n </div>\n <i\n class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.left + 'year']\"\n [style.fontWeight]=\"500\"\n [style.rotate]=\"!checkShowListDropdown()[sideEnum.left + 'year'] ? '90deg' : '270deg'\"></i>\n </div>\n </libs_ui-components-dropdown>\n </div>\n </div>\n\n <div class=\"w-1/4 flex items-center relative\">\n @if (!calendarVariables.left().minDate || calendarVariables.left().minDate?.isBefore(calendarVariables.left().calendar && calendarVariables.left().calendar?.firstDay)) {\n <div (click)=\"handlerClickPrev(sideEnum.left)\">\n <div class=\"flex items-center justify-center absolute left-0 top-[-3px]\">\n <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n </div>\n </div>\n }\n @if ((!calendarVariables.left().maxDate || calendarVariables.left().maxDate?.isAfter(calendarVariables.left().calendar && calendarVariables.left().calendar?.lastDay)) && isSingle()) {\n <div (click)=\"handlerClickNext(sideEnum.left)\">\n <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @if (!showDropdownsSelect() || !calendarVariables.left().dropdowns) {\n {{ dateOptions().monthNames && calendarVariables.left().calendar && dateOptions().monthNames[calendarVariables.left().calendar?.[1]?.[1]?.month() ?? -1] }}\n {{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(' YYYY') }}\n }\n </th>\n </tr>\n <tr class=\"week-days\">\n @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n <th>\n <span\n class=\"libs-ui-font-h6m text-[#6a7383]\"\n [style.fontWeight]=\"500\"\n [style.fontStyle]=\"'normal'\">\n {{ dayofweek }}\n </span>\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"drp-animate\">\n @for (row of calendarVariables.left().calRows?.(); track row) {\n <tr\n class=\"h-[32px]\"\n [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.classList\">\n @for (col of calendarVariables.left().calCols?.(); track col) {\n <td\n class=\"libs-ui-font-h5r\"\n [class.today]=\"\n calendarVariables.left().calendar &&\n calendarVariables.left().calendar?.[row]?.[col]?.date() === today().date() &&\n calendarVariables.left().calendar?.[row]?.[col]?.month() === today().month() &&\n calendarVariables.left().calendar?.[row]?.[col]?.year() === today().year()\n \"\n [class]=\"calendarVariables.left().classes && calendarVariables.left().classes?.[row]?.[col]\"\n (click)=\"handlerPickerDate($event, sideEnum.left, row, col)\"\n (mouseenter)=\"handlerHoverDate($event, sideEnum.left, row, col)\">\n <span class=\"libs-ui-font-h5r\">{{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[row]?.[col]?.date() }}</span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n }\n </div>\n @if (hasTimePicker()) {\n <div>\n <div class=\"flex justify-center column items-center pt-[12px]\">\n <div\n class=\"w-full flex justify-center items-center rounded-[4px] border\"\n [class.border-[#e6e8ed]]=\"!timePickerError()\"\n [class.border-[#ff5454]]=\"timePickerError()\">\n <libs_ui-components-inputs-input\n classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n dataType=\"int\"\n [focusTimeOut]=\"0\"\n [blurTimeOut]=\"0\"\n [autoAddZeroLessThan10InTypeInt]=\"true\"\n [emitEmptyInDataTypeNumber]=\"true\"\n [maxValueNumber]=\"23\"\n [minValueNumber]=\"0\"\n [maxLength]=\"2\"\n [value]=\"timepickerValueItem().lefthour()\"\n (outInputEvent)=\"handlerInputEvent($event, 'lefthour')\"\n (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'hour')\"\n (outChange)=\"handlerChangeTimeValue($event, 'lefthour')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'lefthour')\" />\n <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n <libs_ui-components-inputs-input\n classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n [autoAddZeroLessThan10InTypeInt]=\"true\"\n [emitEmptyInDataTypeNumber]=\"true\"\n dataType=\"int\"\n [focusTimeOut]=\"0\"\n [blurTimeOut]=\"0\"\n [maxValueNumber]=\"59\"\n [minValueNumber]=\"0\"\n [maxLength]=\"2\"\n [value]=\"timepickerValueItem().leftminute()\"\n (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.left + 'minute')\"\n (outInputEvent)=\"handlerInputEvent($event, 'leftminute')\"\n (outChange)=\"handlerChangeTimeValue($event, 'leftminute')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'leftminute')\" />\n </div>\n </div>\n </div>\n }\n </div>\n\n @if (!isSingle()) {\n <div class=\"libs-ui-component-custom_ranges-calendar right ml-[24px]\">\n <div class=\"rounded-[4px] bg-[#ffffff]\">\n @if (calendarVariables()) {\n <table>\n <thead>\n <tr>\n <th\n colspan=\"7\"\n class=\"month\">\n @if (showDropdownsSelect() && calendarVariables().left().dropdowns?.()) {\n <div class=\"!flex mb-[10px] w-full\">\n <div class=\"w-3/4 flex items-center\">\n <div class=\"mr-[8px]\">\n <libs_ui-components-dropdown\n [isNgContent]=\"true\"\n [zIndex]=\"zIndex() + 1\"\n [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[130px]', position: { mode: 'center', distance: 0 } }\"\n [listMaxItemShow]=\"10\"\n [listClickExactly]=\"false\"\n [listKeysDisable]=\"disableMonth().right()\"\n [listHasButtonUnSelectOption]=\"false\"\n [convertItemSelected]=\"convertItemMonth\"\n [listHiddenInputSearch]=\"true\"\n [listConfig]=\"listMonthsConfig()\"\n [listKeySelected]=\"listKeyToSelected().month\"\n [flagMouse]=\"flagMouse()\"\n [httpRequestDetailItemById]=\"monthHttpDetailConfig()\"\n (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'month')\"\n (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'month')\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'month')\">\n <div\n class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'month']\">\n <div\n class=\"libs-ui-font-h4m\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'month']\"\n [style.fontWeight]=\"500\"\n [style.fontStyle]=\"'normal'\">\n {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n </div>\n <i\n class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n [style.fontWeight]=\"500\"\n [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'month'] ? '90deg' : '270deg'\"></i>\n </div>\n </libs_ui-components-dropdown>\n </div>\n <div>\n <libs_ui-components-dropdown\n [listMaxItemShow]=\"10\"\n [zIndex]=\"zIndex() + 1\"\n [isNgContent]=\"true\"\n [popoverCustomConfig]=\"{ widthByParent: false, ignoreArrow: true, paddingLeftItem: true, classInclude: '!w-[110px]', position: { mode: 'center', distance: 0 } }\"\n [listClickExactly]=\"false\"\n [listHasButtonUnSelectOption]=\"false\"\n [convertItemSelected]=\"convertItemYear\"\n [listHiddenInputSearch]=\"listYearHiddenInputSearch()\"\n [listConfig]=\"listRightYearConfig()\"\n [listKeySelected]=\"listKeyToSelected().year\"\n [flagMouse]=\"flagMouse()\"\n [httpRequestDetailItemById]=\"rightYearHttpDetailConfig()\"\n (outSelectKey)=\"handlerSelectedDropdown($event, sideEnum.right + 'year')\"\n (outFunctionsControl)=\"handlerFunctionControl($event, sideEnum.right + 'year')\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\"\n (outShowList)=\"handlerShowListDropdown($event, sideEnum.right + 'year')\">\n <div\n class=\"libs-ui-component-custom_ranges-calendar-dropdown\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n [class.text-[#6a7383]]=\"!checkShowListDropdown()[sideEnum.right + 'year']\">\n <div\n class=\"libs-ui-font-h4m\"\n [style.fontWeight]=\"500\"\n [style.fontStyle]=\"'normal'\">\n {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n </div>\n <i\n class=\"libs-ui-icon-chevron-right text-[13px] text-[#6a7383]\"\n [class.text-[var(--libs-ui-color-dark)]]=\"checkShowListDropdown()[sideEnum.right + 'year']\"\n [style.fontWeight]=\"500\"\n [style.rotate]=\"!checkShowListDropdown()[sideEnum.right + 'year'] ? '90deg' : '270deg'\"></i>\n </div>\n </libs_ui-components-dropdown>\n </div>\n </div>\n <div class=\"w-1/4 flex items-center relative\">\n @if (\n (listKeyFromSelected().year &&\n listKeyToSelected().year &&\n !(listKeyFromSelected().year + 1 === listKeyToSelected().year && listKeyFromSelected().month === 12 && listKeyToSelected().month === 1) &&\n listKeyFromSelected().year < listKeyToSelected().year) ||\n (listKeyFromSelected().month && listKeyToSelected().month && listKeyFromSelected().month + 1 < +listKeyToSelected().month)\n ) {\n <div\n class=\"flex items-center justify-center absolute left-0 top-[-3px]\"\n (click)=\"handlerClickPrev(sideEnum.right)\">\n <i class=\"libs-ui-icon-chevron-right rotate-[180deg] text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n </div>\n }\n @if (\n listKeyFromSelected().month &&\n listKeyToSelected().month &&\n listKeyFromSelected().month > listKeyToSelected().month &&\n listKeyFromSelected().year &&\n listKeyToSelected().year &&\n listKeyFromSelected().year === listKeyToSelected().year\n ) {\n <div class=\"bg-[#ffffff] w-[21px] h-[21px] cursor-none flex items-center justify-center rounded-[50px]\"></div>\n }\n @if (\n !calendarVariables().right().maxDate ||\n calendarVariables()\n .right()\n .maxDate?.isAfter(calendarVariables().right().calendar && calendarVariables().right().calendar?.lastDay)\n ) {\n <div (click)=\"handlerClickNext(sideEnum.right)\">\n <div class=\"flex items-center justify-center ml-[12px] absolute right-0 top-[-3px]\">\n <i class=\"libs-ui-icon-chevron-right text-[#6a7383] cursor-pointer libs-ui-component-custom_ranges-calendar-icon\"></i>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @if (!showDropdownsSelect() || !calendarVariables().right().dropdowns) {\n {{ dateOptions().monthNames && calendarVariables().right().calendar && dateOptions().monthNames[calendarVariables().right().calendar?.[1]?.[1]?.month() ?? -1] }}\n {{ calendarVariables().right().calendar && calendarVariables().right().calendar?.[1]?.[1]?.format('YYYY') }}\n }\n </th>\n </tr>\n <tr class=\"week-days\">\n @for (dayofweek of dateOptions().daysOfWeek; track dayofweek) {\n <th>\n <span\n class=\"libs-ui-font-h6m text-[#6a7383]\"\n [style.fontWeight]=\"500\"\n [style.fontStyle]=\"'normal'\">\n {{ dayofweek }}\n </span>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of calendarVariables().right().calRows?.(); track row) {\n <tr\n class=\"h-[32px]\"\n [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.classList\">\n @for (col of calendarVariables().right().calCols?.(); track col) {\n <td\n class=\"libs-ui-font-h5r\"\n [class]=\"calendarVariables().right().classes && calendarVariables().right().classes?.[row]?.[col]\"\n [class.today]=\"\n calendarVariables().right().calendar &&\n calendarVariables().right().calendar?.[row]?.[col]?.date() === today().date() &&\n calendarVariables().right().calendar?.[row]?.[col]?.month() === today().month() &&\n calendarVariables().right().calendar &&\n calendarVariables().right().calendar?.[row]?.[col]?.year() === today().year()\n \"\n (click)=\"handlerPickerDate($event, sideEnum.right, row, col)\"\n (mouseenter)=\"handlerHoverDate($event, sideEnum.right, row, col)\">\n <span>{{ calendarVariables().right().calendar?.[row]?.[col]?.date() }}</span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n }\n </div>\n @if (hasTimePicker()) {\n <div>\n <div class=\"flex justify-center items-center pt-[12px]\">\n <div\n class=\"w-full flex justify-center items-center rounded-[4px] border\"\n [class.border-[#e6e8ed]]=\"!timePickerError()\"\n [class.border-[#ff5454]]=\"timePickerError()\">\n <libs_ui-components-inputs-input\n classInclude=\"!w-[30px] !p-0 !border-none !text-center !libs-ui-font-h4s !text-[#071631]\"\n dataType=\"int\"\n [autoAddZeroLessThan10InTypeInt]=\"true\"\n [emitEmptyInDataTypeNumber]=\"true\"\n [maxValueNumber]=\"23\"\n [minValueNumber]=\"0\"\n [focusTimeOut]=\"0\"\n [blurTimeOut]=\"0\"\n [maxLength]=\"2\"\n [value]=\"timepickerValueItem().righthour()\"\n (outChange)=\"handlerChangeTimeValue($event, 'righthour')\"\n (outInputEvent)=\"handlerInputEvent($event, 'righthour')\"\n (outFunctionsControl)=\"handlerFunctionControl($event, 'righthour')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'righthour')\" />\n <span class=\"libs-ui-font-h3s text-[#333333]\">:</span>\n <libs_ui-components-inputs-input\n classInclude=\"!w-[30px] !p-0 !border-none !text-center libs-ui-font-h4s !text-[#071631]\"\n dataType=\"int\"\n [autoAddZeroLessThan10InTypeInt]=\"true\"\n [emitEmptyInDataTypeNumber]=\"true\"\n [maxValueNumber]=\"59\"\n [minValueNumber]=\"0\"\n [focusTimeOut]=\"0\"\n [blurTimeOut]=\"0\"\n [maxLength]=\"2\"\n [value]=\"timepickerValueItem().rightminute()\"\n (outInputEvent)=\"handlerInputEvent($event, 'rightminute')\"\n (outFunctionsControl)=\"handlerFunctionControl($event, 'rightminute')\"\n (outChange)=\"handlerChangeTimeValue($event, 'rightminute')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlurTime($event, 'rightminute')\" />\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n <div>\n <div class=\"flex w-full\">\n @if (!isSingle() && hasTimePicker()) {\n <div class=\"mt-[8px] libs-ui-font-h7r text-[#ff5454] h-[14px]\">\n @if (timePickerError()) {\n <span>{{ 'i18n_date_compare_start_end_message_error' | translate }}</span>\n }\n </div>\n }\n </div>\n @if (!quickRangesArray().length || !isSingle()) {\n <div class=\"flex w-full pt-[16px] justify-between\">\n <div class=\"flex items-center\">\n @if (!isSingle()) {\n @if (!endDate()) {\n <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n @if (hasTimePicker()) {\n <span>{{ computedDisplayTimeLeft() }}</span>\n }\n &hyphen;\n <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n @if (hasTimePicker()) {\n <span>{{ computedDisplayTimeRight() }}</span>\n }\n </div>\n }\n @if (endDate()) {\n <div class=\"text-[#cdd0d6] libs-ui-font-h6r\">\n <span>{{ startDate()?.format('DD/MM/YYYY') }}</span>\n @if (hasTimePicker()) {\n <span>{{ computedDisplayTimeLeft() }}</span>\n }\n &hyphen;\n <span>{{ endDate()?.format('DD/MM/YYYY') }}</span>\n @if (hasTimePicker()) {\n <span>{{ computedDisplayTimeRight() }}</span>\n }\n </div>\n }\n }\n </div>\n\n <div class=\"flex\">\n <libs_ui-components-buttons-button\n class=\"mr-[12px]\"\n label=\"i18n_cancel\"\n type=\"button-third\"\n (outClick)=\"handlerClickCancel($event)\" />\n <libs_ui-components-buttons-button\n label=\"i18n_select\"\n (outClick)=\"handlerClickApply($event)\" />\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [".libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown{display:flex;align-items:center}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-dropdown:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar table{border-collapse:inherit;border-spacing:0 2px}.libs-ui-component-custom_ranges-calendar th,.libs-ui-component-custom_ranges-calendar td{padding:0;text-align:center;min-width:32px}.libs-ui-component-custom_ranges-calendar th span,.libs-ui-component-custom_ranges-calendar td span{pointer-events:none}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover{color:var(--libs-ui-color-light-1)}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:before,.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:hover i:after{color:var(--libs-ui-color-light-1)!important}.libs-ui-component-custom_ranges-calendar .libs-ui-component-custom_ranges-calendar-icon:before{font-size:20px}.libs-ui-component-custom_ranges-calendar td,.libs-ui-component-custom_ranges-calendar th{cursor:pointer;height:2em;width:2em}.libs-ui-component-custom_ranges-calendar td.available:hover,.libs-ui-component-custom_ranges-calendar th.available:hover{background-color:#f8f5fe;border-color:transparent;border-radius:8px;color:inherit;background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms}.libs-ui-component-custom_ranges-calendar td{margin:.25em 0;background-color:#fff;transition:background-color .2s ease;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0ms;color:#071631!important}.libs-ui-component-custom_ranges-calendar td:hover{color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.off,.libs-ui-component-custom_ranges-calendar td.off.in-range,.libs-ui-component-custom_ranges-calendar td.off.start-date,.libs-ui-component-custom_ranges-calendar td.off.end-date{background-color:#fff;border-color:transparent;color:#cdd0d6!important}.libs-ui-component-custom_ranges-calendar td.focus-off{background-color:#f8f5fe!important}.libs-ui-component-custom_ranges-calendar td.in-range{background-color:#f8f5fe;border-color:transparent;border-radius:0;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today{position:relative;color:#8e61ee!important}.libs-ui-component-custom_ranges-calendar td.today:after{position:absolute;content:\"\";width:2px;height:2px;background-color:#8e61ee;left:49%;bottom:5px}.libs-ui-component-custom_ranges-calendar td.active{transition:background .3s ease-out;background:#0000001a}.libs-ui-component-custom_ranges-calendar td.active.today:after{position:absolute;content:\"\";background-color:#fff}.libs-ui-component-custom_ranges-calendar td.active.start-date{border-radius:8px 0 0 8px}.libs-ui-component-custom_ranges-calendar td.active.end-date{border-radius:0 8px 8px 0}.libs-ui-component-custom_ranges-calendar td.active.full-date{border-radius:8px}.libs-ui-component-custom_ranges-calendar td.active,.libs-ui-component-custom_ranges-calendar td.active:hover{background-color:#8e61ee;border-color:transparent;color:#fff!important}.libs-ui-component-custom_ranges-calendar th.month{width:auto}.libs-ui-component-custom_ranges-calendar td.disabled,.libs-ui-component-custom_ranges-calendar option.disabled{color:#999!important;cursor:not-allowed;text-decoration:line-through;background-color:#f4f5f7}.libs-ui-component-custom_ranges-calendar .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right}.libs-ui-component-custom_ranges-calendar th.month>div{position:relative;display:inline-block}@media (min-width: 564px){.libs-ui-component-custom_ranges{width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsInputsInputComponent, selector: "libs_ui-components-inputs-input", inputs: ["tagInput", "dataType", "typeInput", "modeInput", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "maxValueNumber", "minValueNumber", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "classInclude", "maxLength", "readonly", "disable", "noBorder", "backgroundNone", "borderError", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "value", "autoRemoveEmoji", "defaultHeight", "minHeightTextArea", "maxHeightTextArea", "focusTimeOut", "selectAllTimeOut", "blurTimeOut", "zIndexPopoverContent", "classContainerInput", "showCount", "ignoreStopPropagationEvent", "resize", "templateLeftBottomInput", "templateRightBottomInput", "classContainerBottomInput", "ignoreWidthInput100", "iframeTextareaCustomStyle", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "resetAutoCompletePassword", "acceptOnlyClickIcon", "setIconRightColorSameColorDisableReadOnly", "onlyAcceptNegativeValue", "maxLengthNumberCount", "focusInput"], outputs: ["maxValueNumberChange", "minValueNumberChange", "fixedFloatChange", "acceptNegativeValueChange", "maxLengthChange", "valueChange", "maxLengthNumberCountChange", "outHeightAreaChange", "outChange", "outFocusAndBlurEvent", "outEnterEvent", "outInputEvent", "outIconLeft", "outIconRight", "outFunctionsControl", "outFilesDrop", "outFileDrop", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1475
1478
  }
1476
1479
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, decorators: [{
1477
1480
  type: Component,