@libs-ui/components-datetime-picker 0.2.113 → 0.2.114
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.
- package/esm2022/custom-ranges/calendar/calendar.component.mjs +2 -4
- package/esm2022/custom-ranges/custom-ranges.component.mjs +4 -7
- package/esm2022/picker.component.mjs +6 -5
- package/fesm2022/libs-ui-components-datetime-picker.mjs +9 -13
- package/fesm2022/libs-ui-components-datetime-picker.mjs.map +1 -1
- package/package.json +1 -1
- package/picker.component.d.ts +2 -1
|
@@ -288,7 +288,6 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
|
|
|
288
288
|
ngOnInit() {
|
|
289
289
|
const startDate = this.startDate()?.clone();
|
|
290
290
|
const endDate = this.endDate()?.clone();
|
|
291
|
-
console.log(startDate, endDate);
|
|
292
291
|
this.splitPickerDate.update(current => {
|
|
293
292
|
current.start.update(sideCurrent => {
|
|
294
293
|
sideCurrent.day = (startDate ?? dayjs().startOf('day')).date();
|
|
@@ -431,7 +430,6 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
|
|
|
431
430
|
if (!this.hasTimePicker() || !this.timePickerIncrement()) {
|
|
432
431
|
return;
|
|
433
432
|
}
|
|
434
|
-
console.log('vao day');
|
|
435
433
|
this.startDate.update((current) => {
|
|
436
434
|
if (!current) {
|
|
437
435
|
return;
|
|
@@ -1434,7 +1432,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
|
|
|
1434
1432
|
return time;
|
|
1435
1433
|
}
|
|
1436
1434
|
ngOnDestroy() {
|
|
1437
|
-
|
|
1435
|
+
return;
|
|
1438
1436
|
}
|
|
1439
1437
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDatetimePickerCustomRangesCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1440
1438
|
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 } }, 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]=\"true\"\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'\">{{ calendarVariables.left().calendar && calendarVariables.left().calendar?.[1]?.[1]?.format(\" YYYY\") }}</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 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 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 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 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 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]=\"true\"\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 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 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 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 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 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 ‐\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 ‐\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", "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", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "hiddenContent", "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", "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 });
|
|
@@ -1481,7 +1479,7 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
|
|
|
1481
1479
|
keepCalendarOpeningWithRange = input(undefined);
|
|
1482
1480
|
singleDateSelected = input(undefined, {
|
|
1483
1481
|
transform: (value) => {
|
|
1484
|
-
if (!value) {
|
|
1482
|
+
if (!value || !value.date) {
|
|
1485
1483
|
return;
|
|
1486
1484
|
}
|
|
1487
1485
|
let date = value.date;
|
|
@@ -1545,7 +1543,6 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
|
|
|
1545
1543
|
current.set('hour', 10).set('minute', 30);
|
|
1546
1544
|
// current.hour(now.hour()).minute(now.minute());
|
|
1547
1545
|
}
|
|
1548
|
-
console.log('current', current, now, now.hour(), now.minute());
|
|
1549
1546
|
return current;
|
|
1550
1547
|
});
|
|
1551
1548
|
this.endDate.update(current => {
|
|
@@ -1554,9 +1551,8 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
|
|
|
1554
1551
|
}
|
|
1555
1552
|
return current;
|
|
1556
1553
|
});
|
|
1557
|
-
console.log(this.startDate(), this.endDate());
|
|
1558
1554
|
}
|
|
1559
|
-
if (singleDateSelected) {
|
|
1555
|
+
if (singleDateSelected?.date) {
|
|
1560
1556
|
this.startDate.set(singleDateSelected.date);
|
|
1561
1557
|
this.endDate.set(singleDateSelected.date);
|
|
1562
1558
|
}
|
|
@@ -1628,7 +1624,6 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
|
|
|
1628
1624
|
this.outCancel.emit('');
|
|
1629
1625
|
}
|
|
1630
1626
|
handlerPickerDate(event) {
|
|
1631
|
-
console.log('handlerPickerDate', event);
|
|
1632
1627
|
this.chosenSingleDate.set({
|
|
1633
1628
|
displayLabel: event.displayLabel,
|
|
1634
1629
|
date: event.startDate,
|
|
@@ -1673,7 +1668,7 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
|
|
|
1673
1668
|
return;
|
|
1674
1669
|
}
|
|
1675
1670
|
}
|
|
1676
|
-
const dates = range.values ?? [];
|
|
1671
|
+
// const dates = range.values ?? [];
|
|
1677
1672
|
// this.startDate.set(dates[0].clone().hour(0).minute(0).second(0));
|
|
1678
1673
|
// this.endDate.set(dates[1].clone().hour(23).minute(59).second(59));
|
|
1679
1674
|
// this.timeValue = { hour: 0, toHour: 0, minute: 23, toMinute: 59 };
|
|
@@ -1783,6 +1778,7 @@ class LibsUiComponentsDatetimePickerComponent {
|
|
|
1783
1778
|
isBorderError = input(false);
|
|
1784
1779
|
minDate = input();
|
|
1785
1780
|
maxDate = input();
|
|
1781
|
+
placeholder = input();
|
|
1786
1782
|
validRequired = input(undefined);
|
|
1787
1783
|
ignoreStopPropagationEvent = input(false);
|
|
1788
1784
|
flagMouse = model({ isMouseEnter: false, isMouseEnterContent: false });
|
|
@@ -1803,7 +1799,7 @@ class LibsUiComponentsDatetimePickerComponent {
|
|
|
1803
1799
|
outFunctionsControl = output();
|
|
1804
1800
|
constructor() {
|
|
1805
1801
|
effect(() => untracked(() => {
|
|
1806
|
-
if (this.singleDateSelected()) {
|
|
1802
|
+
if (this.singleDateSelected()?.date) {
|
|
1807
1803
|
const startTime = dayjs(this.singleDateSelected()?.date).format(this.hasTimePicker() ? 'DD/MM/YYYY HH:mm' : 'DD/MM/YYYY');
|
|
1808
1804
|
this.chosenDateFromRanges.set({ selectedLabel: startTime });
|
|
1809
1805
|
}
|
|
@@ -1919,10 +1915,10 @@ class LibsUiComponentsDatetimePickerComponent {
|
|
|
1919
1915
|
return !this.isSingle() ? 232 : 152;
|
|
1920
1916
|
}
|
|
1921
1917
|
ngOnDestroy() {
|
|
1922
|
-
|
|
1918
|
+
return;
|
|
1923
1919
|
}
|
|
1924
1920
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1925
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsDatetimePickerComponent, isStandalone: true, selector: "libs_ui-components-datetime-picker", inputs: { showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, classPickerInclude: { classPropertyName: "classPickerInclude", publicName: "classPickerInclude", isSignal: true, isRequired: false, transformFunction: null }, classPickerContentInclude: { classPropertyName: "classPickerContentInclude", publicName: "classPickerContentInclude", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderQuickRange: { classPropertyName: "ignoreBorderQuickRange", publicName: "ignoreBorderQuickRange", isSignal: true, isRequired: false, transformFunction: null }, useColorModeExist: { classPropertyName: "useColorModeExist", publicName: "useColorModeExist", isSignal: true, isRequired: false, transformFunction: null }, hasTimePicker: { classPropertyName: "hasTimePicker", publicName: "hasTimePicker", isSignal: true, isRequired: false, transformFunction: null }, allowReset: { classPropertyName: "allowReset", publicName: "allowReset", isSignal: true, isRequired: false, transformFunction: null }, widthByLabel: { classPropertyName: "widthByLabel", publicName: "widthByLabel", isSignal: true, isRequired: false, transformFunction: null }, defaultWidth: { classPropertyName: "defaultWidth", publicName: "defaultWidth", isSignal: true, isRequired: false, transformFunction: null }, isSingle: { classPropertyName: "isSingle", publicName: "isSingle", isSignal: true, isRequired: false, transformFunction: null }, extendRanges: { classPropertyName: "extendRanges", publicName: "extendRanges", isSignal: true, isRequired: false, transformFunction: null }, isBorderError: { classPropertyName: "isBorderError", publicName: "isBorderError", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, widthByParent: { classPropertyName: "widthByParent", publicName: "widthByParent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, rangesPopoverPosition: { classPropertyName: "rangesPopoverPosition", publicName: "rangesPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, isNgContent: { classPropertyName: "isNgContent", publicName: "isNgContent", isSignal: true, isRequired: false, transformFunction: null }, classIncludeCustomRanges: { classPropertyName: "classIncludeCustomRanges", publicName: "classIncludeCustomRanges", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, positionQuickRanges: { classPropertyName: "positionQuickRanges", publicName: "positionQuickRanges", isSignal: true, isRequired: false, transformFunction: null }, singleDateSelected: { classPropertyName: "singleDateSelected", publicName: "singleDateSelected", isSignal: true, isRequired: false, transformFunction: null }, dateRangeSelected: { classPropertyName: "dateRangeSelected", publicName: "dateRangeSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { flagMouse: "flagMouseChange", singleDateSelected: "singleDateSelectedChange", dateRangeSelected: "dateRangeSelectedChange", outChangStageFlagMouse: "outChangStageFlagMouse", outReset: "outReset", outSelectSingleDate: "outSelectSingleDate", outSelectDateRange: "outSelectDateRange", outFunctionsControl: "outFunctionsControl" }, ngImport: i0, template: "<div class=\"{{ classInclude() }}\">\n @if (labelConfig(); as labelConfig) {\n <libs_ui-components-label [classInclude]=\"labelConfig.classInclude\"\n [labelLeft]=\"labelConfig.labelLeft\"\n [labelLeftClass]=\"labelConfig.labelLeftClass\"\n [required]=\"labelConfig.required \"\n [description]=\"labelConfig.description\"\n [descriptionClass]=\"labelConfig.descriptionClass\"\n [labelRight]=\"labelConfig.labelRight\"\n [labelRightClass]=\"labelConfig.labelRightClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [buttonsLeft]=\"labelConfig.buttonsLeft\"\n [buttonsRight]=\"labelConfig.buttonsRight\"\n [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n [hasToggle]=\"labelConfig.hasToggle\"\n [toggleActive]=\"labelConfig.toggleActive\"\n [toggleDisable]=\"labelConfig.toggleDisable || disable()\"\n [popover]=\"labelConfig.popover\"\n [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [limitLength]=\"labelConfig.limitLength\"\n [buttonsDescription]=\"labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"labelConfig.count\" />\n }\n <div class=\"flex w-full\">\n <libs_ui-components-popover [classInclude]=\"classPickerInclude()\"\n [ignoreShowPopover]=\"disable() || readonly()\"\n [mode]=\"'click'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n [flagMouse]=\"flagMouse()\"\n [config]=\"{\n animationConfig:{},\n maxWidth: 770,\n maxHeight: 420,\n directionDistance:2,\n template: customRangesRef,\n widthByParent: widthByParent(),\n whiteTheme: true,\n ignoreArrow: true,\n zIndex: zIndex(),\n classInclude: 'rounded-[4px] ',\n position: {mode: rangesPopoverPosition(),distance: 0}}\"\n (outChangStageFlagMouse)=\"handlerChangStagePopoverFlagMouse($event)\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\"\n (outEvent)=\"handlerPopoverEvent($event)\">\n @if (!isNgContent()) {\n <div #containerRef\n class=\"flex items-center px-[12px] h-[32px] rounded-[4px] bg-[#ffffff] cursor-pointer libs-ui-font-h5r {{ classPickerContentInclude() }}\"\n [class.libs-ui-disable]=\"disable()\"\n [class.!border-none]=\"ignoreBorderQuickRange()\"\n [class.libs-ui-border-general]=\"!singleError().message && !ignoreBorderQuickRange()\"\n [class.libs-ui-border-error-general]=\"(singleError().message || isBorderError()) && !ignoreBorderQuickRange()\"\n [class.min-w-[284px]]=\"!chosenDateFromRanges().selectedLabel && !isSingle() && hasTimePicker()\"\n [class.!border]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n [class.!border-[#4e8cf7]]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n [class.libs-ui-readonly]=\"readonly() || false\"\n [style.width.px]=\"width()\"\n (click)=\"handlerSelectRanges($event)\">\n <div class=\"libs-ui-icon-calendar text-[#9ca2ad] text-[16px]\"></div>\n <div class=\"ml-[8px]\"\n [class.!text-[#071631]]=\"!disable()\"\n [class.!text-[#9ca2ad]]=\"disable()\">\n @if (!chosenDateFromRanges().selectedLabel) {\n @if (!isSingle()) {\n <span class=\"text-[#9ca2ad]\">dd/mm/yyyy@if (hasTimePicker()) {<span> hh:mm</span>} - dd/mm/yyyy@if (hasTimePicker()) {<span> hh:mm</span>}</span>\n }\n @if (isSingle()) {\n <span class=\"text-[#9ca2ad]\">dd/mm/yyyy@if (hasTimePicker()) {<span> hh:mm</span>}</span>\n }\n }\n @if (chosenDateFromRanges().selectedLabel && !isSingle()) {\n {{ displayRangeTitle() }}\n }\n @if (chosenDateFromRanges().selectedLabel && isSingle()) {\n <span [class.text-[#29c7cc]]=\"useColorModeExist() || false\">\n {{ chosenDateFromRanges().selectedLabel }}\n </span>\n }\n </div>\n @if (chosenDateFromRanges().selectedLabel && allowReset() && !disable() && !readonly()) {\n <div class=\"pl-[12px] ml-auto h-full flex items-center\">\n <i class=\"libs-ui-icon-close-circle-solid text-[16px] text-[#cdd0d6]\"\n (click)=\"handlerReset($event)\"></i>\n </div>\n }\n </div>\n }\n @if (isNgContent()) {\n <div (click)=\"handlerSelectRanges($event)\">\n <ng-content></ng-content>\n </div>\n }\n </libs_ui-components-popover>\n </div>\n @if (singleError().message && !validRequired()?.ignoreMessage) {\n <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r libs-ui-text-error\"\n [innerHTML]=\"(singleError().message || ERROR_MESSAGE_EMPTY_VALID)| translate:validRequired()?.interpolateParams\"></div>\n }\n</div>\n\n<ng-template #customRangesRef>\n <libs_ui-components-datetime-picker-custom_ranges [zIndex]=\"zIndex()\"\n [classInclude]=\"classIncludeCustomRanges()\"\n [widthByParent]=\"widthByParent()\"\n [dateOptions]=\"dateOptions()\"\n [positionQuickRanges]=\"positionQuickRanges()\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n [autoApply]=\"autoApply()\"\n [isSingle]=\"isSingle()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [singleDateSelected]=\"singleDateSelected()\"\n [dateRangeSelected]=\"dateRangeSelected()\"\n [extendRanges]=\"extendRanges()\"\n [hasTimePicker]=\"hasTimePicker()\"\n (outUpdateWidth)=\"handlerUpdateWidth()\"\n (outCancel)=\"handlerCancel()\"\n (outSelectSingleDate)=\"handlerPickerSingleDate($event)\"\n (outSelectDateRange)=\"handlerPickerDateRange($event)\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\" />\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsDatetimePickerCustomRangesComponent, selector: "libs_ui-components-datetime-picker-custom_ranges", inputs: ["zIndex", "classInclude", "extendRanges", "widthByParent", "autoApply", "minDate", "maxDate", "positionQuickRanges", "isSingle", "hasTimePicker", "flagMouse", "dateOptions", "alwaysShowCalendars", "startDate", "endDate", "showCustomRangeLabel", "keepCalendarOpeningWithRange", "singleDateSelected", "dateRangeSelected"], outputs: ["startDateChange", "endDateChange", "outChangStageFlagMouse", "outUpdateWidth", "outCancel", "outSelectSingleDate", "outSelectDateRange", "outClickRange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1921
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsDatetimePickerComponent, isStandalone: true, selector: "libs_ui-components-datetime-picker", inputs: { showCustomRangeLabel: { classPropertyName: "showCustomRangeLabel", publicName: "showCustomRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, classPickerInclude: { classPropertyName: "classPickerInclude", publicName: "classPickerInclude", isSignal: true, isRequired: false, transformFunction: null }, classPickerContentInclude: { classPropertyName: "classPickerContentInclude", publicName: "classPickerContentInclude", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderQuickRange: { classPropertyName: "ignoreBorderQuickRange", publicName: "ignoreBorderQuickRange", isSignal: true, isRequired: false, transformFunction: null }, useColorModeExist: { classPropertyName: "useColorModeExist", publicName: "useColorModeExist", isSignal: true, isRequired: false, transformFunction: null }, hasTimePicker: { classPropertyName: "hasTimePicker", publicName: "hasTimePicker", isSignal: true, isRequired: false, transformFunction: null }, allowReset: { classPropertyName: "allowReset", publicName: "allowReset", isSignal: true, isRequired: false, transformFunction: null }, widthByLabel: { classPropertyName: "widthByLabel", publicName: "widthByLabel", isSignal: true, isRequired: false, transformFunction: null }, defaultWidth: { classPropertyName: "defaultWidth", publicName: "defaultWidth", isSignal: true, isRequired: false, transformFunction: null }, isSingle: { classPropertyName: "isSingle", publicName: "isSingle", isSignal: true, isRequired: false, transformFunction: null }, extendRanges: { classPropertyName: "extendRanges", publicName: "extendRanges", isSignal: true, isRequired: false, transformFunction: null }, isBorderError: { classPropertyName: "isBorderError", publicName: "isBorderError", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, widthByParent: { classPropertyName: "widthByParent", publicName: "widthByParent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, rangesPopoverPosition: { classPropertyName: "rangesPopoverPosition", publicName: "rangesPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, isNgContent: { classPropertyName: "isNgContent", publicName: "isNgContent", isSignal: true, isRequired: false, transformFunction: null }, classIncludeCustomRanges: { classPropertyName: "classIncludeCustomRanges", publicName: "classIncludeCustomRanges", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, positionQuickRanges: { classPropertyName: "positionQuickRanges", publicName: "positionQuickRanges", isSignal: true, isRequired: false, transformFunction: null }, singleDateSelected: { classPropertyName: "singleDateSelected", publicName: "singleDateSelected", isSignal: true, isRequired: false, transformFunction: null }, dateRangeSelected: { classPropertyName: "dateRangeSelected", publicName: "dateRangeSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { flagMouse: "flagMouseChange", singleDateSelected: "singleDateSelectedChange", dateRangeSelected: "dateRangeSelectedChange", outChangStageFlagMouse: "outChangStageFlagMouse", outReset: "outReset", outSelectSingleDate: "outSelectSingleDate", outSelectDateRange: "outSelectDateRange", outFunctionsControl: "outFunctionsControl" }, ngImport: i0, template: "<div class=\"libs-ui-date-picker {{ classInclude() }}\">\n @if (labelConfig(); as labelConfig) {\n <libs_ui-components-label [classInclude]=\"labelConfig.classInclude\"\n [labelLeft]=\"labelConfig.labelLeft\"\n [labelLeftClass]=\"labelConfig.labelLeftClass\"\n [required]=\"labelConfig.required \"\n [description]=\"labelConfig.description\"\n [descriptionClass]=\"labelConfig.descriptionClass\"\n [labelRight]=\"labelConfig.labelRight\"\n [labelRightClass]=\"labelConfig.labelRightClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [buttonsLeft]=\"labelConfig.buttonsLeft\"\n [buttonsRight]=\"labelConfig.buttonsRight\"\n [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n [hasToggle]=\"labelConfig.hasToggle\"\n [toggleActive]=\"labelConfig.toggleActive\"\n [toggleDisable]=\"labelConfig.toggleDisable || disable()\"\n [popover]=\"labelConfig.popover\"\n [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [limitLength]=\"labelConfig.limitLength\"\n [buttonsDescription]=\"labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"labelConfig.count\" />\n }\n <div class=\"flex w-full\">\n <libs_ui-components-popover [classInclude]=\"classPickerInclude()\"\n [ignoreShowPopover]=\"disable() || readonly()\"\n [mode]=\"'click'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n [flagMouse]=\"flagMouse()\"\n [config]=\"{\n animationConfig:{},\n maxWidth: 770,\n maxHeight: 420,\n directionDistance:2,\n template: customRangesRef,\n widthByParent: widthByParent(),\n whiteTheme: true,\n ignoreArrow: true,\n zIndex: zIndex(),\n classInclude: 'rounded-[4px] ',\n position: {mode: rangesPopoverPosition(),distance: 0}}\"\n (outChangStageFlagMouse)=\"handlerChangStagePopoverFlagMouse($event)\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\"\n (outEvent)=\"handlerPopoverEvent($event)\">\n @if (!isNgContent()) {\n <div #containerRef\n class=\"flex items-center px-[12px] h-[32px] rounded-[4px] bg-[#ffffff] cursor-pointer libs-ui-font-h5r {{ classPickerContentInclude() }}\"\n [class.libs-ui-disable]=\"disable()\"\n [class.!border-none]=\"ignoreBorderQuickRange()\"\n [class.libs-ui-border-general]=\"!singleError().message && !ignoreBorderQuickRange()\"\n [class.libs-ui-border-error-general]=\"(singleError().message || isBorderError()) && !ignoreBorderQuickRange()\"\n [class.min-w-[284px]]=\"!chosenDateFromRanges().selectedLabel && !isSingle() && hasTimePicker()\"\n [class.!border]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n [class.!border-[#4e8cf7]]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n [class.libs-ui-readonly]=\"readonly() || false\"\n [style.width.px]=\"width()\"\n (click)=\"handlerSelectRanges($event)\">\n <div class=\"libs-ui-icon-calendar text-[#9ca2ad] text-[16px]\"></div>\n <div class=\"ml-[8px] libs-ui-date-picker-label\"\n [class.!text-[#071631]]=\"!disable()\"\n [class.!text-[#9ca2ad]]=\"disable()\">\n @if (!chosenDateFromRanges().selectedLabel) {\n @if (!isSingle()) {\n @if (!placeholder()) {\n <span class=\"text-[#9ca2ad]\">dd/mm/yyyy@if (hasTimePicker()) {<span> hh:mm</span>} - dd/mm/yyyy@if (hasTimePicker()) {<span> hh:mm</span>}</span>\n } @else {\n <span class=\"text-[#9ca2ad]\">{{ (placeholder() || ' ') |translate }} </span>\n }\n }\n @if (isSingle()) {\n @if (!placeholder()) {\n <span class=\"text-[#9ca2ad]\">dd/mm/yyyy@if (hasTimePicker()) {<span> hh:mm</span>}</span>\n } @else {\n <span class=\"text-[#9ca2ad]\">{{ (placeholder() || ' ') |translate }} </span>\n }\n\n }\n }\n @if (chosenDateFromRanges().selectedLabel && !isSingle()) {\n {{ displayRangeTitle() }}\n }\n @if (chosenDateFromRanges().selectedLabel && isSingle()) {\n <span [class.text-[#29c7cc]]=\"useColorModeExist() || false\">\n {{ chosenDateFromRanges().selectedLabel }}\n </span>\n }\n </div>\n @if (chosenDateFromRanges().selectedLabel && allowReset() && !disable() && !readonly()) {\n <div class=\"pl-[12px] ml-auto h-full flex items-center\">\n <i class=\"libs-ui-icon-close-circle-solid text-[16px] text-[#cdd0d6]\"\n (click)=\"handlerReset($event)\"></i>\n </div>\n }\n </div>\n }\n @if (isNgContent()) {\n <div (click)=\"handlerSelectRanges($event)\">\n <ng-content></ng-content>\n </div>\n }\n </libs_ui-components-popover>\n </div>\n @if (singleError().message && !validRequired()?.ignoreMessage) {\n <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r libs-ui-text-error\"\n [innerHTML]=\"(singleError().message || ERROR_MESSAGE_EMPTY_VALID)| translate:validRequired()?.interpolateParams\"></div>\n }\n</div>\n\n<ng-template #customRangesRef>\n <libs_ui-components-datetime-picker-custom_ranges [zIndex]=\"zIndex()\"\n [classInclude]=\"classIncludeCustomRanges()\"\n [widthByParent]=\"widthByParent()\"\n [dateOptions]=\"dateOptions()\"\n [positionQuickRanges]=\"positionQuickRanges()\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n [autoApply]=\"autoApply()\"\n [isSingle]=\"isSingle()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [singleDateSelected]=\"singleDateSelected()\"\n [dateRangeSelected]=\"dateRangeSelected()\"\n [extendRanges]=\"extendRanges()\"\n [hasTimePicker]=\"hasTimePicker()\"\n (outUpdateWidth)=\"handlerUpdateWidth()\"\n (outCancel)=\"handlerCancel()\"\n (outSelectSingleDate)=\"handlerPickerSingleDate($event)\"\n (outSelectDateRange)=\"handlerPickerDateRange($event)\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\" />\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsDatetimePickerCustomRangesComponent, selector: "libs_ui-components-datetime-picker-custom_ranges", inputs: ["zIndex", "classInclude", "extendRanges", "widthByParent", "autoApply", "minDate", "maxDate", "positionQuickRanges", "isSingle", "hasTimePicker", "flagMouse", "dateOptions", "alwaysShowCalendars", "startDate", "endDate", "showCustomRangeLabel", "keepCalendarOpeningWithRange", "singleDateSelected", "dateRangeSelected"], outputs: ["startDateChange", "endDateChange", "outChangStageFlagMouse", "outUpdateWidth", "outCancel", "outSelectSingleDate", "outSelectDateRange", "outClickRange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1926
1922
|
}
|
|
1927
1923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDatetimePickerComponent, decorators: [{
|
|
1928
1924
|
type: Component,
|
|
@@ -1931,7 +1927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1931
1927
|
LibsUiComponentsLabelComponent,
|
|
1932
1928
|
LibsUiComponentsPopoverComponent,
|
|
1933
1929
|
LibsUiComponentsDatetimePickerCustomRangesComponent
|
|
1934
|
-
], template: "<div class=\"{{ classInclude() }}\">\n @if (labelConfig(); as labelConfig) {\n <libs_ui-components-label [classInclude]=\"labelConfig.classInclude\"\n [labelLeft]=\"labelConfig.labelLeft\"\n [labelLeftClass]=\"labelConfig.labelLeftClass\"\n [required]=\"labelConfig.required \"\n [description]=\"labelConfig.description\"\n [descriptionClass]=\"labelConfig.descriptionClass\"\n [labelRight]=\"labelConfig.labelRight\"\n [labelRightClass]=\"labelConfig.labelRightClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [buttonsLeft]=\"labelConfig.buttonsLeft\"\n [buttonsRight]=\"labelConfig.buttonsRight\"\n [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n [hasToggle]=\"labelConfig.hasToggle\"\n [toggleActive]=\"labelConfig.toggleActive\"\n [toggleDisable]=\"labelConfig.toggleDisable || disable()\"\n [popover]=\"labelConfig.popover\"\n [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [limitLength]=\"labelConfig.limitLength\"\n [buttonsDescription]=\"labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"labelConfig.count\" />\n }\n <div class=\"flex w-full\">\n <libs_ui-components-popover [classInclude]=\"classPickerInclude()\"\n [ignoreShowPopover]=\"disable() || readonly()\"\n [mode]=\"'click'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n [flagMouse]=\"flagMouse()\"\n [config]=\"{\n animationConfig:{},\n maxWidth: 770,\n maxHeight: 420,\n directionDistance:2,\n template: customRangesRef,\n widthByParent: widthByParent(),\n whiteTheme: true,\n ignoreArrow: true,\n zIndex: zIndex(),\n classInclude: 'rounded-[4px] ',\n position: {mode: rangesPopoverPosition(),distance: 0}}\"\n (outChangStageFlagMouse)=\"handlerChangStagePopoverFlagMouse($event)\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\"\n (outEvent)=\"handlerPopoverEvent($event)\">\n @if (!isNgContent()) {\n <div #containerRef\n class=\"flex items-center px-[12px] h-[32px] rounded-[4px] bg-[#ffffff] cursor-pointer libs-ui-font-h5r {{ classPickerContentInclude() }}\"\n [class.libs-ui-disable]=\"disable()\"\n [class.!border-none]=\"ignoreBorderQuickRange()\"\n [class.libs-ui-border-general]=\"!singleError().message && !ignoreBorderQuickRange()\"\n [class.libs-ui-border-error-general]=\"(singleError().message || isBorderError()) && !ignoreBorderQuickRange()\"\n [class.min-w-[284px]]=\"!chosenDateFromRanges().selectedLabel && !isSingle() && hasTimePicker()\"\n [class.!border]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n [class.!border-[#4e8cf7]]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n [class.libs-ui-readonly]=\"readonly() || false\"\n [style.width.px]=\"width()\"\n (click)=\"handlerSelectRanges($event)\">\n <div class=\"libs-ui-icon-calendar text-[#9ca2ad] text-[16px]\"></div>\n <div class=\"ml-[8px]\"\n [class.!text-[#071631]]=\"!disable()\"\n [class.!text-[#9ca2ad]]=\"disable()\">\n @if (!chosenDateFromRanges().selectedLabel) {\n @if (!isSingle()) {\n <span class=\"text-[#9ca2ad]\">dd/mm/yyyy@if (hasTimePicker()) {<span> hh:mm</span>} - dd/mm/yyyy@if (hasTimePicker()) {<span> hh:mm</span>}</span>\n }\n @if (isSingle()) {\n <span class=\"text-[#9ca2ad]\">dd/mm/yyyy@if (hasTimePicker()) {<span> hh:mm</span>}</span>\n }\n }\n @if (chosenDateFromRanges().selectedLabel && !isSingle()) {\n {{ displayRangeTitle() }}\n }\n @if (chosenDateFromRanges().selectedLabel && isSingle()) {\n <span [class.text-[#29c7cc]]=\"useColorModeExist() || false\">\n {{ chosenDateFromRanges().selectedLabel }}\n </span>\n }\n </div>\n @if (chosenDateFromRanges().selectedLabel && allowReset() && !disable() && !readonly()) {\n <div class=\"pl-[12px] ml-auto h-full flex items-center\">\n <i class=\"libs-ui-icon-close-circle-solid text-[16px] text-[#cdd0d6]\"\n (click)=\"handlerReset($event)\"></i>\n </div>\n }\n </div>\n }\n @if (isNgContent()) {\n <div (click)=\"handlerSelectRanges($event)\">\n <ng-content></ng-content>\n </div>\n }\n </libs_ui-components-popover>\n </div>\n @if (singleError().message && !validRequired()?.ignoreMessage) {\n <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r libs-ui-text-error\"\n [innerHTML]=\"(singleError().message || ERROR_MESSAGE_EMPTY_VALID)| translate:validRequired()?.interpolateParams\"></div>\n }\n</div>\n\n<ng-template #customRangesRef>\n <libs_ui-components-datetime-picker-custom_ranges [zIndex]=\"zIndex()\"\n [classInclude]=\"classIncludeCustomRanges()\"\n [widthByParent]=\"widthByParent()\"\n [dateOptions]=\"dateOptions()\"\n [positionQuickRanges]=\"positionQuickRanges()\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n [autoApply]=\"autoApply()\"\n [isSingle]=\"isSingle()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [singleDateSelected]=\"singleDateSelected()\"\n [dateRangeSelected]=\"dateRangeSelected()\"\n [extendRanges]=\"extendRanges()\"\n [hasTimePicker]=\"hasTimePicker()\"\n (outUpdateWidth)=\"handlerUpdateWidth()\"\n (outCancel)=\"handlerCancel()\"\n (outSelectSingleDate)=\"handlerPickerSingleDate($event)\"\n (outSelectDateRange)=\"handlerPickerDateRange($event)\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\" />\n</ng-template>\n" }]
|
|
1930
|
+
], template: "<div class=\"libs-ui-date-picker {{ classInclude() }}\">\n @if (labelConfig(); as labelConfig) {\n <libs_ui-components-label [classInclude]=\"labelConfig.classInclude\"\n [labelLeft]=\"labelConfig.labelLeft\"\n [labelLeftClass]=\"labelConfig.labelLeftClass\"\n [required]=\"labelConfig.required \"\n [description]=\"labelConfig.description\"\n [descriptionClass]=\"labelConfig.descriptionClass\"\n [labelRight]=\"labelConfig.labelRight\"\n [labelRightClass]=\"labelConfig.labelRightClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [buttonsLeft]=\"labelConfig.buttonsLeft\"\n [buttonsRight]=\"labelConfig.buttonsRight\"\n [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable()\"\n [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable()\"\n [hasToggle]=\"labelConfig.hasToggle\"\n [toggleActive]=\"labelConfig.toggleActive\"\n [toggleDisable]=\"labelConfig.toggleDisable || disable()\"\n [popover]=\"labelConfig.popover\"\n [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [limitLength]=\"labelConfig.limitLength\"\n [buttonsDescription]=\"labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"labelConfig.count\" />\n }\n <div class=\"flex w-full\">\n <libs_ui-components-popover [classInclude]=\"classPickerInclude()\"\n [ignoreShowPopover]=\"disable() || readonly()\"\n [mode]=\"'click'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n [flagMouse]=\"flagMouse()\"\n [config]=\"{\n animationConfig:{},\n maxWidth: 770,\n maxHeight: 420,\n directionDistance:2,\n template: customRangesRef,\n widthByParent: widthByParent(),\n whiteTheme: true,\n ignoreArrow: true,\n zIndex: zIndex(),\n classInclude: 'rounded-[4px] ',\n position: {mode: rangesPopoverPosition(),distance: 0}}\"\n (outChangStageFlagMouse)=\"handlerChangStagePopoverFlagMouse($event)\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\"\n (outEvent)=\"handlerPopoverEvent($event)\">\n @if (!isNgContent()) {\n <div #containerRef\n class=\"flex items-center px-[12px] h-[32px] rounded-[4px] bg-[#ffffff] cursor-pointer libs-ui-font-h5r {{ classPickerContentInclude() }}\"\n [class.libs-ui-disable]=\"disable()\"\n [class.!border-none]=\"ignoreBorderQuickRange()\"\n [class.libs-ui-border-general]=\"!singleError().message && !ignoreBorderQuickRange()\"\n [class.libs-ui-border-error-general]=\"(singleError().message || isBorderError()) && !ignoreBorderQuickRange()\"\n [class.min-w-[284px]]=\"!chosenDateFromRanges().selectedLabel && !isSingle() && hasTimePicker()\"\n [class.!border]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n [class.!border-[#4e8cf7]]=\"showRangesPopup() && !ignoreBorderQuickRange() && !readonly()\"\n [class.libs-ui-readonly]=\"readonly() || false\"\n [style.width.px]=\"width()\"\n (click)=\"handlerSelectRanges($event)\">\n <div class=\"libs-ui-icon-calendar text-[#9ca2ad] text-[16px]\"></div>\n <div class=\"ml-[8px] libs-ui-date-picker-label\"\n [class.!text-[#071631]]=\"!disable()\"\n [class.!text-[#9ca2ad]]=\"disable()\">\n @if (!chosenDateFromRanges().selectedLabel) {\n @if (!isSingle()) {\n @if (!placeholder()) {\n <span class=\"text-[#9ca2ad]\">dd/mm/yyyy@if (hasTimePicker()) {<span> hh:mm</span>} - dd/mm/yyyy@if (hasTimePicker()) {<span> hh:mm</span>}</span>\n } @else {\n <span class=\"text-[#9ca2ad]\">{{ (placeholder() || ' ') |translate }} </span>\n }\n }\n @if (isSingle()) {\n @if (!placeholder()) {\n <span class=\"text-[#9ca2ad]\">dd/mm/yyyy@if (hasTimePicker()) {<span> hh:mm</span>}</span>\n } @else {\n <span class=\"text-[#9ca2ad]\">{{ (placeholder() || ' ') |translate }} </span>\n }\n\n }\n }\n @if (chosenDateFromRanges().selectedLabel && !isSingle()) {\n {{ displayRangeTitle() }}\n }\n @if (chosenDateFromRanges().selectedLabel && isSingle()) {\n <span [class.text-[#29c7cc]]=\"useColorModeExist() || false\">\n {{ chosenDateFromRanges().selectedLabel }}\n </span>\n }\n </div>\n @if (chosenDateFromRanges().selectedLabel && allowReset() && !disable() && !readonly()) {\n <div class=\"pl-[12px] ml-auto h-full flex items-center\">\n <i class=\"libs-ui-icon-close-circle-solid text-[16px] text-[#cdd0d6]\"\n (click)=\"handlerReset($event)\"></i>\n </div>\n }\n </div>\n }\n @if (isNgContent()) {\n <div (click)=\"handlerSelectRanges($event)\">\n <ng-content></ng-content>\n </div>\n }\n </libs_ui-components-popover>\n </div>\n @if (singleError().message && !validRequired()?.ignoreMessage) {\n <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r libs-ui-text-error\"\n [innerHTML]=\"(singleError().message || ERROR_MESSAGE_EMPTY_VALID)| translate:validRequired()?.interpolateParams\"></div>\n }\n</div>\n\n<ng-template #customRangesRef>\n <libs_ui-components-datetime-picker-custom_ranges [zIndex]=\"zIndex()\"\n [classInclude]=\"classIncludeCustomRanges()\"\n [widthByParent]=\"widthByParent()\"\n [dateOptions]=\"dateOptions()\"\n [positionQuickRanges]=\"positionQuickRanges()\"\n [showCustomRangeLabel]=\"showCustomRangeLabel()\"\n [autoApply]=\"autoApply()\"\n [isSingle]=\"isSingle()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [singleDateSelected]=\"singleDateSelected()\"\n [dateRangeSelected]=\"dateRangeSelected()\"\n [extendRanges]=\"extendRanges()\"\n [hasTimePicker]=\"hasTimePicker()\"\n (outUpdateWidth)=\"handlerUpdateWidth()\"\n (outCancel)=\"handlerCancel()\"\n (outSelectSingleDate)=\"handlerPickerSingleDate($event)\"\n (outSelectDateRange)=\"handlerPickerDateRange($event)\"\n (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\" />\n</ng-template>\n" }]
|
|
1935
1931
|
}], ctorParameters: () => [] });
|
|
1936
1932
|
|
|
1937
1933
|
;
|