@libs-ui/components-datetime-dropdown 0.1.1-1

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

@@ -0,0 +1,928 @@
+import * as i0 from '@angular/core';
+import { signal, inject, ElementRef, output, Directive, Pipe, computed, input, effect, untracked, Component, viewChild, ChangeDetectionStrategy } from '@angular/core';
+import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
+import * as i1 from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { Subject, timer, fromEvent, takeUntil } from 'rxjs';
+import { returnDetailObject, returnListObject } from '@libs-ui/services-http-request';
+import { UtilsHttpParamsRequest } from '@libs-ui/utils';
+import { DEFAULT_MIN_YEAR, DEFAULT_MAX_YEAR } from '@libs-ui/components-datetime-picker';
+import { LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';
+
+const convertGetValue = (type, item, translate) => {
+    switch (type) {
+        case 'day':
+            return translate.instant('i18n_day_param', { day: item.label });
+        case 'month':
+            return translate.instant(item.label || ' ', { year: '' });
+        case 'year':
+            return translate.instant('i18n_year_param', { year: item.label });
+        case 'quarter':
+            return translate.instant('i18n_quarter', { quarter: item.label });
+    }
+};
+const convertItemSelectedDefine = (type, item, translate, getItemYearDisplay, ignoreConvertYearSelected) => {
+    switch (type) {
+        case 'day':
+            return translate.instant('i18n_day_param', { day: item.label });
+        case 'month':
+            return translate.instant(item.label || ' ', { year: '' });
+        case 'year': {
+            let labelDisplay = ignoreConvertYearSelected ? item.label : translate.instant('i18n_year_param', { year: item.label });
+            if (getItemYearDisplay) {
+                labelDisplay = getItemYearDisplay(item.label);
+            }
+            return labelDisplay;
+        }
+        case 'quarter':
+            return translate.instant('i18n_quarter', { quarter: item.label });
+    }
+};
+const LIST_MONTHS_DEFAULT = () => {
+    return [
+        {
+            id: 1,
+            label: 'i18n_january',
+        },
+        {
+            id: 2,
+            label: 'i18n_february',
+        },
+        {
+            id: 3,
+            label: 'i18n_march',
+        },
+        {
+            id: 4,
+            label: 'i18n_april',
+        },
+        {
+            id: 5,
+            label: 'i18n_may',
+        },
+        {
+            id: 6,
+            label: 'i18n_june',
+        },
+        {
+            id: 7,
+            label: 'i18n_july',
+        },
+        {
+            id: 8,
+            label: 'i18n_august',
+        },
+        {
+            id: 9,
+            label: 'i18n_september',
+        },
+        {
+            id: 10,
+            label: 'i18n_october',
+        },
+        {
+            id: 11,
+            label: 'i18n_november',
+        },
+        {
+            id: 12,
+            label: 'i18n_december',
+        },
+    ];
+};
+const CompareDate = (dateCompare, ignoreAllowTimeSame) => {
+    const dateNumberOne = dateCompare[0];
+    if (dateCompare.length === 2) {
+        const dateNumberTow = dateCompare[1];
+        if (!dateNumberOne.from || !dateNumberOne.to || !dateNumberTow.from || !dateNumberTow.to) {
+            return false;
+        }
+        if (ignoreAllowTimeSame ? dateNumberOne.from > dateNumberOne.to : dateNumberOne.from >= dateNumberOne.to) {
+            return true;
+        }
+        if (dateNumberOne.from === dateNumberOne.to && (ignoreAllowTimeSame ? dateNumberTow.from > dateNumberTow.to : dateNumberTow.from >= dateNumberTow.to)) {
+            return true;
+        }
+        return false;
+    }
+    if (!dateNumberOne.from || !dateNumberOne.to) {
+        return false;
+    }
+    if (ignoreAllowTimeSame ? dateNumberOne.from > dateNumberOne.to : dateNumberOne.from >= dateNumberOne.to) {
+        return true;
+    }
+    return false;
+};
+const getConfigHttpRequestDetailDate = (data) => {
+    return {
+        objectInstance: returnDetailObject(new UtilsHttpParamsRequest({ fromObject: { fieldKey: 'id' } }), data),
+        functionName: 'detailByData',
+        argumentsValue: [],
+        guideAutoUpdateArgumentsValue: {
+            paging: {},
+            detailById: {
+                subFieldUpdate: 'id',
+                fieldUpdate: '[0]',
+                fieldGetValue: '',
+            },
+        },
+    };
+};
+const getConfigHttpRequestListDate = (data) => {
+    return {
+        objectInstance: returnListObject(data),
+        functionName: 'list',
+        argumentsValue: [],
+    };
+};
+const buildListDataByTypeDate = (type, dataYear, keyMonth) => {
+    switch (type) {
+        case 'day':
+            return convertDay(keyMonth);
+        case 'month':
+            return LIST_MONTHS_DEFAULT();
+        case 'year':
+            return convertYear(dataYear.minYear, dataYear.maxYear, dataYear.reverseYear);
+        case 'quarter': {
+            const listQuarter = [];
+            for (let i = 1; i <= 4; i++) {
+                listQuarter.push({
+                    id: i,
+                    label: `${i}`,
+                });
+            }
+            return listQuarter;
+        }
+    }
+};
+const defaultMonths = () => {
+    return [
+        {
+            id: 1,
+            label: 'i18n_january',
+            maxDays: 31,
+        },
+        {
+            id: 2,
+            label: 'i18n_february',
+            maxDays: 29,
+        },
+        {
+            id: 3,
+            label: 'i18n_march',
+            maxDays: 31,
+        },
+        {
+            id: 4,
+            label: 'i18n_april',
+            maxDays: 30,
+        },
+        {
+            id: 5,
+            label: 'i18n_may',
+            maxDays: 31,
+        },
+        {
+            id: 6,
+            label: 'i18n_june',
+            maxDays: 30,
+        },
+        {
+            id: 7,
+            label: 'i18n_july',
+            maxDays: 31,
+        },
+        {
+            id: 8,
+            label: 'i18n_august',
+            maxDays: 31,
+        },
+        {
+            id: 9,
+            label: 'i18n_september',
+            maxDays: 30,
+        },
+        {
+            id: 10,
+            label: 'i18n_october',
+            maxDays: 31,
+        },
+        {
+            id: 11,
+            label: 'i18n_november',
+            maxDays: 30,
+        },
+        {
+            id: 12,
+            label: 'i18n_december',
+            maxDays: 31,
+        },
+    ];
+};
+const convertYear = (minYear, maxYear, reverseYear) => {
+    const listYear = [];
+    const minYears = minYear ? minYear : DEFAULT_MIN_YEAR;
+    const maxYears = maxYear ? maxYear : DEFAULT_MAX_YEAR;
+    for (let i = minYears; i <= maxYears; i++) {
+        listYear.push({
+            id: i,
+            label: `${i}`,
+        });
+    }
+    if (reverseYear) {
+        listYear.reverse();
+    }
+    return listYear;
+};
+const convertDay = (key) => {
+    if (!key || isNaN(Number(key))) {
+        return [];
+    }
+    const dayDefault = defaultMonths().find((item) => Number(item.id) === Number(key));
+    if (!dayDefault) {
+        return [];
+    }
+    const listDay = [];
+    for (let i = 1; i <= dayDefault.maxDays; i++) {
+        listDay.push({
+            id: i,
+            label: `${i}`,
+        });
+    }
+    return listDay;
+};
+
+class LibsUiComponentsDatetimeDropdownDirective {
+    resizeObserver = signal(undefined);
+    elementRef = inject(ElementRef);
+    outChangeWidth = output();
+    ngOnInit() {
+        this.resizeObserver.set(new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target === this.elementRef.nativeElement) {
+                    this.outChangeWidth.emit(entry.contentRect.width);
+                }
+            }
+        }));
+        this.resizeObserver()?.observe(this.elementRef.nativeElement);
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver()) {
+            this.resizeObserver()?.disconnect();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LibsUiComponentsDatetimeDropdownDirective, isStandalone: true, selector: "[LibsUiComponentsDatetimeDropdownDirective]", outputs: { outChangeWidth: "outChangeWidth" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[LibsUiComponentsDatetimeDropdownDirective]',
+                    standalone: true,
+                }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsDatetimeDropdownBuildListByDateTypePipe {
+    transform(type, dataYear, keyMonth) {
+        return buildListDataByTypeDate(type, dataYear, keyMonth);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownBuildListByDateTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownBuildListByDateTypePipe, isStandalone: true, name: "LibsUiComponentsDatetimeDropdownBuildListByDateTypePipe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownBuildListByDateTypePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'LibsUiComponentsDatetimeDropdownBuildListByDateTypePipe',
+                    standalone: true,
+                }]
+        }] });
+
+class LibsUiComponentsDatetimeDropdownBuildWidthPipe {
+    transform(widthByElement, widthDropdown, first, multiDate) {
+        if (widthByElement) {
+            return first ? `${widthDropdown}px` : '100%';
+        }
+        if (multiDate) {
+            return first ? `${widthDropdown}px` : '100%';
+        }
+        return `${widthDropdown}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownBuildWidthPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownBuildWidthPipe, isStandalone: true, name: "LibsUiComponentsDatetimeDropdownBuildWidthPipe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownBuildWidthPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'LibsUiComponentsDatetimeDropdownBuildWidthPipe',
+                    standalone: true,
+                }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsDatetimeDropdownItemChildComponent {
+    // #region PROPERTY
+    httpRequestDetailItemById = signal(undefined);
+    listConfig = signal({
+        type: 'text',
+        configTemplateText: signal({
+            fieldKey: 'id',
+            autoScrollToItemSelected: true,
+        }),
+    });
+    textNoSelectDisplay = computed(this.computedTextNoSelectDisplay.bind(this));
+    usingWidth = computed(this.computedWidth.bind(this));
+    // #region INPUT
+    typeDate = input(undefined);
+    getItemYearDisplay = input();
+    listHasButtonUnSelectOption = input();
+    readonly = input(false, { transform: (value) => value ?? false });
+    disable = input(false, { transform: (value) => value ?? false });
+    listData = input([]);
+    showBorderError = input(undefined);
+    listMaxItemShow = input(6, { transform: (value) => value ?? 6 });
+    zIndex = input(1000, { transform: (value) => value ?? 1000 });
+    classIncludeTextDisplayWhenNoSelect = input('');
+    listKeySelected = input();
+    widthDropdown = input(136);
+    first = input(undefined);
+    isError = input();
+    widthByElement = input();
+    ignoreConvertYearSelected = input();
+    listKeysDisable = input(undefined);
+    validRequired = input();
+    // #region OUTPUT
+    outSelectedKey = output();
+    outFunctionControl = output();
+    outChangStageFlagMouse = output();
+    // #region INJECT
+    translate = inject(TranslateService);
+    constructor() {
+        effect(() => {
+            const listData = this.listData();
+            untracked(() => {
+                this.httpRequestDetailItemById.set(getConfigHttpRequestDetailDate(listData));
+                this.listConfig.update((current) => {
+                    if (!current.httpRequestData) {
+                        current.httpRequestData = signal(getConfigHttpRequestListDate(listData));
+                    }
+                    current.httpRequestData.set(getConfigHttpRequestListDate(listData));
+                    if (!current.configTemplateText) {
+                        current.configTemplateText = signal({
+                            fieldKey: 'id',
+                            autoScrollToItemSelected: true,
+                        });
+                    }
+                    current.configTemplateText.set({
+                        fieldKey: 'id',
+                        autoScrollToItemSelected: true,
+                        getValue: (item) => {
+                            return convertGetValue(this.typeDate() || 'month', item, this.translate);
+                        },
+                    });
+                    return current;
+                });
+            });
+        });
+    }
+    /* FUNCTIONS */
+    handlerChangeSelectedItem(event) {
+        if (this.listKeySelected() === event?.key) {
+            return;
+        }
+        if (!event || !event.key) {
+            this.outSelectedKey.emit(undefined);
+            return;
+        }
+        this.outSelectedKey.emit(event.key);
+    }
+    handlerFunctionControl(event) {
+        this.outFunctionControl.emit(event);
+    }
+    handlerChangFlagMouse(flagMouse) {
+        this.outChangStageFlagMouse.emit(flagMouse);
+    }
+    convertItemSelected = (item) => {
+        if (!item || !this.typeDate()) {
+            return;
+        }
+        item.labelDisplay = convertItemSelectedDefine(this.typeDate() ?? 'month', item, this.translate, this.getItemYearDisplay(), this.ignoreConvertYearSelected());
+        return item;
+    };
+    computedTextNoSelectDisplay() {
+        switch (this.typeDate()) {
+            case 'day':
+                return 'i18n_select_day';
+            case 'month':
+                return 'i18n_select_month';
+            case 'year':
+                return 'i18n_select_year';
+            case 'quarter':
+                return 'i18n_select_quarter';
+            default:
+                return 'month';
+        }
+    }
+    computedWidth() {
+        if (this.widthByElement()) {
+            return this.first() ? `${this.widthDropdown()}px` : '100%';
+        }
+        return `${this.widthDropdown()}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownItemChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimeDropdownItemChildComponent, isStandalone: true, selector: "libs_ui-components-datetime-dropdown-item-child", inputs: { typeDate: { classPropertyName: "typeDate", publicName: "typeDate", isSignal: true, isRequired: false, transformFunction: null }, getItemYearDisplay: { classPropertyName: "getItemYearDisplay", publicName: "getItemYearDisplay", isSignal: true, isRequired: false, transformFunction: null }, listHasButtonUnSelectOption: { classPropertyName: "listHasButtonUnSelectOption", publicName: "listHasButtonUnSelectOption", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, listData: { classPropertyName: "listData", publicName: "listData", isSignal: true, isRequired: false, transformFunction: null }, showBorderError: { classPropertyName: "showBorderError", publicName: "showBorderError", isSignal: true, isRequired: false, transformFunction: null }, listMaxItemShow: { classPropertyName: "listMaxItemShow", publicName: "listMaxItemShow", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTextDisplayWhenNoSelect: { classPropertyName: "classIncludeTextDisplayWhenNoSelect", publicName: "classIncludeTextDisplayWhenNoSelect", isSignal: true, isRequired: false, transformFunction: null }, listKeySelected: { classPropertyName: "listKeySelected", publicName: "listKeySelected", isSignal: true, isRequired: false, transformFunction: null }, widthDropdown: { classPropertyName: "widthDropdown", publicName: "widthDropdown", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, widthByElement: { classPropertyName: "widthByElement", publicName: "widthByElement", isSignal: true, isRequired: false, transformFunction: null }, ignoreConvertYearSelected: { classPropertyName: "ignoreConvertYearSelected", publicName: "ignoreConvertYearSelected", isSignal: true, isRequired: false, transformFunction: null }, listKeysDisable: { classPropertyName: "listKeysDisable", publicName: "listKeysDisable", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outSelectedKey: "outSelectedKey", outFunctionControl: "outFunctionControl", outChangStageFlagMouse: "outChangStageFlagMouse" }, ngImport: i0, template: "@if (typeDate() && httpRequestDetailItemById()) {\n  <div [style.width]=\"usingWidth()\">\n    <libs_ui-components-dropdown\n      [listHasButtonUnSelectOption]=\"listHasButtonUnSelectOption()\"\n      [readonly]=\"readonly()\"\n      [textDisplayWhenNoSelect]=\"textNoSelectDisplay()\"\n      [disable]=\"disable()\"\n      [showBorderError]=\"showBorderError()\"\n      [listMaxItemShow]=\"listMaxItemShow()\"\n      [listClickExactly]=\"false\"\n      [zIndex]=\"zIndex()\"\n      [labelPopoverConfig]=\"{ zIndex: zIndex() + 1 }\"\n      [listConfig]=\"listConfig()\"\n      [listKeysDisable]=\"listKeysDisable()\"\n      [convertItemSelected]=\"convertItemSelected\"\n      [onlyEmitDataWhenReset]=\"true\"\n      [classIncludeTextDisplayWhenNoSelect]=\"classIncludeTextDisplayWhenNoSelect()\"\n      [httpRequestDetailItemById]=\"httpRequestDetailItemById()\"\n      [listKeySelected]=\"listKeySelected()\"\n      (outSelectKey)=\"handlerChangeSelectedItem($event)\"\n      (outFunctionsControl)=\"handlerFunctionControl($event)\"\n      (outChangStageFlagMouse)=\"handlerChangFlagMouse($event)\" />\n  </div>\n}\n@if (isError()) {\n  <div class=\"flex items-center mt-[4px]\">\n    @let constHtmlMessage = validRequired()?.message || 'i18n_valid_empty_message';\n    <span\n      class=\"libs-ui-text-error libs-ui-font-h7r\"\n      [innerHtml]=\"constHtmlMessage | translate: validRequired()?.interpolateParams\"></span>\n  </div>\n}\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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownItemChildComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-datetime-dropdown-item-child', standalone: true, imports: [TranslateModule, LibsUiComponentsDropdownComponent], template: "@if (typeDate() && httpRequestDetailItemById()) {\n  <div [style.width]=\"usingWidth()\">\n    <libs_ui-components-dropdown\n      [listHasButtonUnSelectOption]=\"listHasButtonUnSelectOption()\"\n      [readonly]=\"readonly()\"\n      [textDisplayWhenNoSelect]=\"textNoSelectDisplay()\"\n      [disable]=\"disable()\"\n      [showBorderError]=\"showBorderError()\"\n      [listMaxItemShow]=\"listMaxItemShow()\"\n      [listClickExactly]=\"false\"\n      [zIndex]=\"zIndex()\"\n      [labelPopoverConfig]=\"{ zIndex: zIndex() + 1 }\"\n      [listConfig]=\"listConfig()\"\n      [listKeysDisable]=\"listKeysDisable()\"\n      [convertItemSelected]=\"convertItemSelected\"\n      [onlyEmitDataWhenReset]=\"true\"\n      [classIncludeTextDisplayWhenNoSelect]=\"classIncludeTextDisplayWhenNoSelect()\"\n      [httpRequestDetailItemById]=\"httpRequestDetailItemById()\"\n      [listKeySelected]=\"listKeySelected()\"\n      (outSelectKey)=\"handlerChangeSelectedItem($event)\"\n      (outFunctionsControl)=\"handlerFunctionControl($event)\"\n      (outChangStageFlagMouse)=\"handlerChangFlagMouse($event)\" />\n  </div>\n}\n@if (isError()) {\n  <div class=\"flex items-center mt-[4px]\">\n    @let constHtmlMessage = validRequired()?.message || 'i18n_valid_empty_message';\n    <span\n      class=\"libs-ui-text-error libs-ui-font-h7r\"\n      [innerHtml]=\"constHtmlMessage | translate: validRequired()?.interpolateParams\"></span>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsDatetimeDropdownItemComponent {
+    // #region PROPERTY
+    typeListDate = signal([]);
+    keyMonthResetDay = signal(undefined);
+    selectedSingle = signal({});
+    isError = signal(undefined);
+    // #region INPUT
+    typeDate = input(undefined);
+    disableSecond = input(undefined);
+    selectedDate = input(undefined);
+    widthDropdown = input(136, { transform: (value) => value ?? 136 });
+    widthByElement = input(undefined);
+    getItemYearDisplay = input(undefined);
+    listHasButtonUnSelectOption = input(undefined);
+    readonly = input(false);
+    disable = input(false);
+    zIndex = input(1200, { transform: (value) => value ?? 1200 });
+    isMultiple = input(undefined);
+    classIncludeTextDisplayWhenNoSelect = input(undefined);
+    isCheckErrorWhenSelectItem = input(undefined);
+    maxYear = input(undefined);
+    minYear = input(undefined);
+    reverseYear = input(true, { transform: (value) => value ?? true });
+    listKeysDisable = input(undefined);
+    ignoreConvertYearSelected = input(undefined);
+    validRequired = input(undefined);
+    isEmitSelectedDropDown = input(undefined);
+    listMaxItemShow = input(undefined);
+    // #region OUTPUT
+    outSelectedData = output();
+    outFunctionControl = output();
+    outChangStageFlagMouse = output();
+    constructor() {
+        effect(() => {
+            const typeDate = this.typeDate();
+            if (!typeDate) {
+                return;
+            }
+            untracked(() => {
+                const data = typeDate.split('-');
+                const results = data.map((item) => {
+                    return signal({ id: (item || 'month'), keySelected: undefined });
+                }) || [];
+                this.typeListDate.set(results);
+            });
+        });
+        effect(() => {
+            const selectedDate = this.selectedDate();
+            if (!selectedDate) {
+                return;
+            }
+            untracked(() => {
+                this.selectedSingle.set(selectedDate);
+                if (!this.typeListDate().length) {
+                    return;
+                }
+                if (this.typeDate() === 'month-day' && selectedDate.month) {
+                    this.keyMonthResetDay.set(selectedDate.month);
+                }
+                this.typeListDate().forEach((item, index) => {
+                    item.update((current) => {
+                        current.keySelected = selectedDate[current.id] ?? undefined;
+                        if ((this.disableSecond() && index !== 0 && !current.keySelected) || (!selectedDate['month'] && this.typeDate() === 'month-day' && item().id === 'day')) {
+                            current.disable = true;
+                        }
+                        return current;
+                    });
+                });
+            });
+        });
+    }
+    ngOnInit() {
+        this.outFunctionControl.emit(this.FunctionsControl);
+    }
+    /* FUNCTIONS */
+    get FunctionsControl() {
+        return {
+            checkIsValid: this.validate.bind(this),
+            resetDropdown: this.resetDropdown.bind(this),
+            resetError: this.resetError.bind(this),
+            setError: this.setError.bind(this),
+        };
+    }
+    handlerSelectedKey(event, typeDate, i) {
+        if (this.selectedSingle()[typeDate().id] === event && this.isEmitSelectedDropDown()) {
+            this.outSelectedData.emit(this.selectedSingle());
+            return;
+        }
+        typeDate.update((current) => {
+            current.keySelected = event;
+            return current;
+        });
+        if (this.selectedSingle()) {
+            this.selectedSingle.update((current) => {
+                current[typeDate().id] = event ? Number(event) : undefined;
+                return current;
+            });
+        }
+        if (this.disableSecond() || (this.typeDate() === 'month-day' && typeDate().id === 'month')) {
+            this.keyMonthResetDay.set(event);
+            this.typeListDate().forEach((item) => {
+                item.update((current) => {
+                    current.disable = false;
+                    return current;
+                });
+            });
+        }
+        this.typeListDate().forEach((item, index) => {
+            if (index === 1 && item().functionControl && i === 0) {
+                item().functionControl?.reset();
+            }
+        });
+        if (typeDate().keySelected && !this.isCheckErrorWhenSelectItem()) {
+            typeDate.update((current) => {
+                current.showBorderError = false;
+                current.isError = false;
+                return current;
+            });
+            this.checkError();
+        }
+        this.outSelectedData.emit(this.selectedSingle());
+    }
+    checkError() {
+        if (!this.isError) {
+            return;
+        }
+        let isError = false;
+        this.typeListDate().forEach((item) => {
+            if (item().showBorderError) {
+                isError = true;
+            }
+        });
+        if (!isError) {
+            this.isError.set(false);
+        }
+    }
+    handlerFunctionControl(event, item) {
+        item.update((current) => {
+            current.functionControl = event;
+            return current;
+        });
+    }
+    async resetDropdown() {
+        this.typeListDate().forEach((item) => {
+            this.selectedSingle.update((current) => {
+                current[item().id] = undefined;
+                return current;
+            });
+            item.update((current) => {
+                current.keySelected = undefined;
+                current.functionControl?.reset();
+                return current;
+            });
+        });
+        this.resetError();
+        this.outSelectedData.emit(this.selectedSingle());
+    }
+    async resetError() {
+        this.isError.set(false);
+        this.typeListDate().forEach((item) => {
+            item.update((current) => {
+                current.isError = false;
+                current.showBorderError = false;
+                return current;
+            });
+        });
+    }
+    async setError(error) {
+        this.typeListDate().forEach((item) => {
+            item.update((current) => {
+                current.showBorderError = error;
+                return current;
+            });
+        });
+    }
+    async validate() {
+        let valid = true;
+        this.isError.set(false);
+        this.typeListDate().forEach((item, index) => {
+            item.update((current) => {
+                current.showBorderError = false;
+                current.isError = false;
+                if (this.selectedSingle() && !this.selectedSingle()[current.id] && !current.disable) {
+                    valid = false;
+                    current.showBorderError = true;
+                    if (index === 0 && this.typeListDate().length === 2) {
+                        this.isError.set(true);
+                    }
+                    if (index === 1 && this.typeListDate().length === 2 && !this.isError()) {
+                        current.isError = true;
+                    }
+                }
+                return current;
+            });
+        });
+        return valid;
+    }
+    handlerChangFlagMouse(flagMouse) {
+        this.outChangStageFlagMouse.emit(flagMouse);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimeDropdownItemComponent, isStandalone: true, selector: "libs_ui-components-datetime-dropdown-item", inputs: { typeDate: { classPropertyName: "typeDate", publicName: "typeDate", isSignal: true, isRequired: false, transformFunction: null }, disableSecond: { classPropertyName: "disableSecond", publicName: "disableSecond", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, widthDropdown: { classPropertyName: "widthDropdown", publicName: "widthDropdown", isSignal: true, isRequired: false, transformFunction: null }, widthByElement: { classPropertyName: "widthByElement", publicName: "widthByElement", isSignal: true, isRequired: false, transformFunction: null }, getItemYearDisplay: { classPropertyName: "getItemYearDisplay", publicName: "getItemYearDisplay", isSignal: true, isRequired: false, transformFunction: null }, listHasButtonUnSelectOption: { classPropertyName: "listHasButtonUnSelectOption", publicName: "listHasButtonUnSelectOption", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTextDisplayWhenNoSelect: { classPropertyName: "classIncludeTextDisplayWhenNoSelect", publicName: "classIncludeTextDisplayWhenNoSelect", isSignal: true, isRequired: false, transformFunction: null }, isCheckErrorWhenSelectItem: { classPropertyName: "isCheckErrorWhenSelectItem", publicName: "isCheckErrorWhenSelectItem", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, reverseYear: { classPropertyName: "reverseYear", publicName: "reverseYear", isSignal: true, isRequired: false, transformFunction: null }, listKeysDisable: { classPropertyName: "listKeysDisable", publicName: "listKeysDisable", isSignal: true, isRequired: false, transformFunction: null }, ignoreConvertYearSelected: { classPropertyName: "ignoreConvertYearSelected", publicName: "ignoreConvertYearSelected", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, isEmitSelectedDropDown: { classPropertyName: "isEmitSelectedDropDown", publicName: "isEmitSelectedDropDown", isSignal: true, isRequired: false, transformFunction: null }, listMaxItemShow: { classPropertyName: "listMaxItemShow", publicName: "listMaxItemShow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outSelectedData: "outSelectedData", outFunctionControl: "outFunctionControl", outChangStageFlagMouse: "outChangStageFlagMouse" }, ngImport: i0, template: "<div class=\"\">\n  <div class=\"flex items-start\">\n    @if (typeListDate(); as typeListDate) {\n      @for (item of typeListDate; track item().id; let last = $last; let i = $index; let first = $first) {\n        <div\n          [style.width]=\"widthByElement() | LibsUiComponentsDatetimeDropdownBuildWidthPipe: widthDropdown() : first : isMultiple()\"\n          [class.mr-[8px]]=\"!last && typeListDate.length === 2\"\n          [style.minWidth.px]=\"widthDropdown()\">\n          <libs_ui-components-datetime-dropdown-item-child\n            [readonly]=\"readonly()\"\n            [typeDate]=\"item().id\"\n            [disable]=\"item().disable ?? disable()\"\n            [listKeySelected]=\"item().keySelected\"\n            [widthByElement]=\"widthByElement()\"\n            [first]=\"first\"\n            [widthDropdown]=\"widthDropdown()\"\n            [listKeysDisable]=\"listKeysDisable()?.[item().id]?.()\"\n            [listMaxItemShow]=\"listMaxItemShow()?.[item().id] ?? 6\"\n            [isError]=\"item().isError\"\n            [listHasButtonUnSelectOption]=\"listHasButtonUnSelectOption()\"\n            [zIndex]=\"zIndex()\"\n            [showBorderError]=\"item().showBorderError && !item().disable && !disable()\"\n            [listData]=\"item().id | LibsUiComponentsDatetimeDropdownBuildListByDateTypePipe: { minYear: minYear(), maxYear: maxYear(), reverseYear: reverseYear() } : keyMonthResetDay()\"\n            [classIncludeTextDisplayWhenNoSelect]=\"classIncludeTextDisplayWhenNoSelect() ?? ''\"\n            (outSelectedKey)=\"handlerSelectedKey($event, item, i)\"\n            (outFunctionControl)=\"handlerFunctionControl($event, item)\"\n            (outChangStageFlagMouse)=\"handlerChangFlagMouse($event)\" />\n        </div>\n      }\n    }\n  </div>\n\n  @if (isError()) {\n    <div class=\"flex items-center mt-[4px]\">\n      @let constHtmlMessage = validRequired()?.message || 'i18n_valid_empty_message';\n      <span\n        class=\"libs-ui-font-h7r libs-ui-text-error\"\n        [innerHtml]=\"constHtmlMessage | translate: validRequired()?.interpolateParams\"></span>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsDatetimeDropdownItemChildComponent, selector: "libs_ui-components-datetime-dropdown-item-child", inputs: ["typeDate", "getItemYearDisplay", "listHasButtonUnSelectOption", "readonly", "disable", "listData", "showBorderError", "listMaxItemShow", "zIndex", "classIncludeTextDisplayWhenNoSelect", "listKeySelected", "widthDropdown", "first", "isError", "widthByElement", "ignoreConvertYearSelected", "listKeysDisable", "validRequired"], outputs: ["outSelectedKey", "outFunctionControl", "outChangStageFlagMouse"] }, { kind: "pipe", type: LibsUiComponentsDatetimeDropdownBuildWidthPipe, name: "LibsUiComponentsDatetimeDropdownBuildWidthPipe" }, { kind: "pipe", type: LibsUiComponentsDatetimeDropdownBuildListByDateTypePipe, name: "LibsUiComponentsDatetimeDropdownBuildListByDateTypePipe" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-datetime-dropdown-item', standalone: true, imports: [TranslateModule, LibsUiComponentsDatetimeDropdownItemChildComponent, LibsUiComponentsDatetimeDropdownBuildWidthPipe, LibsUiComponentsDatetimeDropdownBuildListByDateTypePipe], template: "<div class=\"\">\n  <div class=\"flex items-start\">\n    @if (typeListDate(); as typeListDate) {\n      @for (item of typeListDate; track item().id; let last = $last; let i = $index; let first = $first) {\n        <div\n          [style.width]=\"widthByElement() | LibsUiComponentsDatetimeDropdownBuildWidthPipe: widthDropdown() : first : isMultiple()\"\n          [class.mr-[8px]]=\"!last && typeListDate.length === 2\"\n          [style.minWidth.px]=\"widthDropdown()\">\n          <libs_ui-components-datetime-dropdown-item-child\n            [readonly]=\"readonly()\"\n            [typeDate]=\"item().id\"\n            [disable]=\"item().disable ?? disable()\"\n            [listKeySelected]=\"item().keySelected\"\n            [widthByElement]=\"widthByElement()\"\n            [first]=\"first\"\n            [widthDropdown]=\"widthDropdown()\"\n            [listKeysDisable]=\"listKeysDisable()?.[item().id]?.()\"\n            [listMaxItemShow]=\"listMaxItemShow()?.[item().id] ?? 6\"\n            [isError]=\"item().isError\"\n            [listHasButtonUnSelectOption]=\"listHasButtonUnSelectOption()\"\n            [zIndex]=\"zIndex()\"\n            [showBorderError]=\"item().showBorderError && !item().disable && !disable()\"\n            [listData]=\"item().id | LibsUiComponentsDatetimeDropdownBuildListByDateTypePipe: { minYear: minYear(), maxYear: maxYear(), reverseYear: reverseYear() } : keyMonthResetDay()\"\n            [classIncludeTextDisplayWhenNoSelect]=\"classIncludeTextDisplayWhenNoSelect() ?? ''\"\n            (outSelectedKey)=\"handlerSelectedKey($event, item, i)\"\n            (outFunctionControl)=\"handlerFunctionControl($event, item)\"\n            (outChangStageFlagMouse)=\"handlerChangFlagMouse($event)\" />\n        </div>\n      }\n    }\n  </div>\n\n  @if (isError()) {\n    <div class=\"flex items-center mt-[4px]\">\n      @let constHtmlMessage = validRequired()?.message || 'i18n_valid_empty_message';\n      <span\n        class=\"libs-ui-font-h7r libs-ui-text-error\"\n        [innerHtml]=\"constHtmlMessage | translate: validRequired()?.interpolateParams\"></span>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+class LibsUiComponentsDatetimeDropdownComponent {
+    // #region PROPERTY
+    width = signal(0);
+    widthElement = signal(undefined);
+    widthLabel = signal(undefined);
+    widthLabelFrom = signal(0);
+    widthLabelTo = signal(0);
+    isErrorCompareDate = signal(undefined);
+    chooseDate = signal({ from: signal({}), to: signal({}) });
+    isResponsive = signal(undefined);
+    arrayFormat = computed(() => {
+        return this.typeFormat().split('-');
+    });
+    changeType = signal(undefined);
+    cacheWidthLabel = signal(undefined);
+    timeOut = signal(undefined);
+    onDestroy = new Subject();
+    functionsControl = new Map();
+    // #region INPUT
+    labelConfig = input(undefined);
+    widthDropdown = input(136, { transform: (value) => value ?? 136 });
+    zIndex = input(1200, { transform: (value) => value ?? 1200 });
+    maxYear = input(0);
+    minYear = input(0);
+    minWidth = input(undefined);
+    disable = input(false);
+    readonly = input(false);
+    isMultiple = input(false);
+    reverseYear = input(undefined);
+    isBorderError = input(false);
+    ignoreWidth100 = input(false);
+    widthByElement = input(false);
+    disableSecond = input(false);
+    typeFormat = input('month-day', { transform: (value) => value ?? 'month-day' });
+    fromAndToDateLabel = input({ from: 'i18n_label_from', to: 'i18n_to' });
+    listHasButtonUnSelectOption = input(false);
+    selectedDateTime = input(undefined);
+    isEmitAfterChanged = input(false); // dùng để emit mỗi lần chọn giá trị và lần đầu init
+    getItemYearDisplay = input();
+    ignoreFromAndToDateLabel = input(false);
+    classIncludeTextDisplayWhenNoSelect = input(undefined);
+    hiddenDate = input();
+    listMaxItemShow = input(undefined);
+    ignoreConvertYearSelected = input(false);
+    listKeysDisable = input(undefined);
+    ignoreAllowTimeEqual = input(true, { transform: (value) => value ?? true });
+    ignoreValidTimeCompare = input(false, { transform: (value) => value ?? false });
+    isCheckErrorWhenSelectItem = input(true, { transform: (value) => value ?? true });
+    ignoreRequiredValueSecondWhenNotValidRequired = input(false); // có validate giá trị thứ 2 khi validRequired không?
+    validRequired = input();
+    // #region OUTPUT
+    outFunctionsControl = output();
+    outSelectedDropdown = output(); // dùng cho trường hợp emit mỗi một lần chọn giá trị nên khi sử dụng phải check kĩ undefined
+    outChooseMultiDate = output();
+    outChooseSingleDate = output();
+    outChangStageFlagMouse = output();
+    /* VIEW CHILD */
+    containerRef = viewChild('parent');
+    labelFromRef = viewChild('labelFrom');
+    labelToRef = viewChild('labelTo');
+    // #region INJECT
+    translate = inject(TranslateService);
+    constructor() {
+        effect(() => {
+            const isMultiple = this.isMultiple();
+            if (!isMultiple) {
+                return;
+            }
+            untracked(() => {
+                this.changeType.set(true);
+                this.functionsControl.clear();
+                timer(0)
+                    .pipe()
+                    .subscribe(() => {
+                    this.checkResponsive();
+                    this.changeType.set(false);
+                });
+            });
+        });
+    }
+    ngOnInit() {
+        this.outFunctionsControl.emit(this.FunctionsControl);
+        if (this.selectedDateTime()) {
+            this.chooseDate.set(this.selectedDateTime());
+        }
+    }
+    ngAfterViewInit() {
+        fromEvent(window, 'resize').pipe(takeUntil(this.onDestroy)).subscribe(this.setWidthDate.bind(this));
+        this.widthLabel.set(undefined);
+        timer(0)
+            .pipe()
+            .subscribe(() => {
+            this.checkResponsive();
+        });
+    }
+    get FunctionsControl() {
+        return {
+            checkIsValid: this.validate.bind(this),
+            resetError: this.resetError.bind(this),
+            resetTime: this.resetDropdown.bind(this),
+        };
+    }
+    checkResponsive() {
+        this.isResponsive.set(false);
+        const widthElementParent = this.containerRef()?.nativeElement?.getBoundingClientRect().width || 0;
+        this.widthLabelFrom.set(this.labelFromRef()?.nativeElement?.getBoundingClientRect().width || 0);
+        this.widthLabelTo.set(this.labelToRef()?.nativeElement?.getBoundingClientRect().width || 0);
+        const spaceBetweenDate = this.arrayFormat().length * 2 + (this.fromAndToDateLabel().from ? 1 : 0);
+        const width = this.widthDropdown() * 4 + 8 * spaceBetweenDate + this.widthLabelFrom() + this.widthLabelTo();
+        if (widthElementParent < width) {
+            this.isResponsive.set(true);
+        }
+    }
+    handlerChangeSelectedKey(event, type) {
+        this.chooseDate.update((current) => {
+            if (current) {
+                current[type].set(event);
+            }
+            return current;
+        });
+        if (this.isEmitAfterChanged()) {
+            const dataEmit = this.isMultiple() ? this.chooseDate() : this.chooseDate()?.from();
+            if (dataEmit) {
+                this.outSelectedDropdown.emit(dataEmit);
+            }
+        }
+        this.applyDate();
+    }
+    async resetDropdown() {
+        this.functionsControl.forEach((control) => control.resetDropdown());
+    }
+    async resetError() {
+        this.functionsControl.forEach((control) => control.resetError());
+    }
+    setWidthDate() {
+        if (!this.containerRef() || !this.containerRef()?.nativeElement) {
+            return;
+        }
+        timer(0)
+            .pipe()
+            .subscribe(() => {
+            this.checkResponsive();
+        });
+    }
+    handlerFunctionControl(event, type) {
+        this.functionsControl.set(type, event);
+    }
+    async checkValid() {
+        let valid = true;
+        for (const control of this.functionsControl.values()) {
+            if (!(await control.checkIsValid())) {
+                valid = false;
+            }
+        }
+        if (this.compareDate()) {
+            valid = false;
+        }
+        return valid;
+    }
+    setError(error) {
+        this.functionsControl.forEach((control) => control.setError(error));
+    }
+    compareDate() {
+        const type = this.typeFormat().split('-');
+        const dateCompare = [];
+        type.forEach((item) => {
+            const from = this.chooseDate()?.from()[item];
+            const to = this.chooseDate()?.to()[item];
+            dateCompare.push({ from: from, to: to });
+        });
+        if (this.ignoreValidTimeCompare() || !this.checkCondition(true)) {
+            this.isErrorCompareDate.set(false);
+            return false;
+        }
+        if (CompareDate(dateCompare, this.ignoreAllowTimeEqual())) {
+            this.setError(true);
+            this.isErrorCompareDate.set(true);
+            return true;
+        }
+        this.isErrorCompareDate.set(false);
+        return false;
+    }
+    async validate() {
+        let valid = true;
+        if (!this.validRequired()) {
+            if (!this.checkCondition(false) && !this.ignoreRequiredValueSecondWhenNotValidRequired()) {
+                valid = await this.checkValid();
+            }
+            return valid;
+        }
+        return await this.checkValid();
+    }
+    checkCondition(hasValue) {
+        let checkValue = true;
+        const type = this.typeFormat().split('-');
+        type.forEach((item) => {
+            if (hasValue && (!this.chooseDate()?.from()[item] || !this.chooseDate()?.to()[item])) {
+                checkValue = false;
+            }
+            if (!hasValue && (this.chooseDate()?.from()[item] || this.chooseDate()?.to()[item])) {
+                checkValue = false;
+            }
+        });
+        return checkValue;
+    }
+    applyDate() {
+        this.setError(false);
+        this.isErrorCompareDate.set(false);
+        if (this.isCheckErrorWhenSelectItem() && !this.validate()) {
+            return;
+        }
+        const from = this.chooseDate()?.from;
+        const to = this.chooseDate()?.to;
+        if (this.isMultiple()) {
+            if (this.compareDate()) {
+                return;
+            }
+            let dataSelected = { from: signal({}), to: signal({}) };
+            this.arrayFormat().forEach((key) => {
+                if (!from?.()?.[key] || !to?.()?.[key]) {
+                    dataSelected = undefined;
+                }
+                if (dataSelected) {
+                    dataSelected.from.update((current) => {
+                        current[key] = Number(from?.()[key]);
+                        return current;
+                    });
+                    dataSelected.to.update((current) => {
+                        current[key] = Number(to?.()[key]);
+                        return current;
+                    });
+                }
+            });
+            if (dataSelected) {
+                this.outChooseMultiDate.emit(dataSelected);
+            }
+            return;
+        }
+        let dataSelected = {};
+        this.arrayFormat().forEach((key) => {
+            if (!from?.()?.[key]) {
+                dataSelected = undefined;
+            }
+            if (dataSelected) {
+                dataSelected[key] = Number(from?.()?.[key]);
+            }
+        });
+        if (dataSelected) {
+            this.outChooseSingleDate.emit(dataSelected);
+        }
+    }
+    handlerChangeWidthLabel(width) {
+        this.cacheWidthLabel.set(width < (this.cacheWidthLabel() || 0) ? this.cacheWidthLabel() : Math.ceil(width));
+        if (this.timeOut()) {
+            clearTimeout(this.timeOut());
+        }
+        this.timeOut.set(setTimeout(() => {
+            this.widthLabel.set(this.cacheWidthLabel());
+        }, 100));
+    }
+    handlerChangStageFlagMouse(flagMouse) {
+        this.outChangStageFlagMouse.emit(flagMouse);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDatetimeDropdownComponent, isStandalone: true, selector: "libs_ui-components-datetime-dropdown", inputs: { labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, widthDropdown: { classPropertyName: "widthDropdown", publicName: "widthDropdown", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", 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 }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, reverseYear: { classPropertyName: "reverseYear", publicName: "reverseYear", isSignal: true, isRequired: false, transformFunction: null }, isBorderError: { classPropertyName: "isBorderError", publicName: "isBorderError", isSignal: true, isRequired: false, transformFunction: null }, ignoreWidth100: { classPropertyName: "ignoreWidth100", publicName: "ignoreWidth100", isSignal: true, isRequired: false, transformFunction: null }, widthByElement: { classPropertyName: "widthByElement", publicName: "widthByElement", isSignal: true, isRequired: false, transformFunction: null }, disableSecond: { classPropertyName: "disableSecond", publicName: "disableSecond", isSignal: true, isRequired: false, transformFunction: null }, typeFormat: { classPropertyName: "typeFormat", publicName: "typeFormat", isSignal: true, isRequired: false, transformFunction: null }, fromAndToDateLabel: { classPropertyName: "fromAndToDateLabel", publicName: "fromAndToDateLabel", isSignal: true, isRequired: false, transformFunction: null }, listHasButtonUnSelectOption: { classPropertyName: "listHasButtonUnSelectOption", publicName: "listHasButtonUnSelectOption", isSignal: true, isRequired: false, transformFunction: null }, selectedDateTime: { classPropertyName: "selectedDateTime", publicName: "selectedDateTime", isSignal: true, isRequired: false, transformFunction: null }, isEmitAfterChanged: { classPropertyName: "isEmitAfterChanged", publicName: "isEmitAfterChanged", isSignal: true, isRequired: false, transformFunction: null }, getItemYearDisplay: { classPropertyName: "getItemYearDisplay", publicName: "getItemYearDisplay", isSignal: true, isRequired: false, transformFunction: null }, ignoreFromAndToDateLabel: { classPropertyName: "ignoreFromAndToDateLabel", publicName: "ignoreFromAndToDateLabel", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTextDisplayWhenNoSelect: { classPropertyName: "classIncludeTextDisplayWhenNoSelect", publicName: "classIncludeTextDisplayWhenNoSelect", isSignal: true, isRequired: false, transformFunction: null }, hiddenDate: { classPropertyName: "hiddenDate", publicName: "hiddenDate", isSignal: true, isRequired: false, transformFunction: null }, listMaxItemShow: { classPropertyName: "listMaxItemShow", publicName: "listMaxItemShow", isSignal: true, isRequired: false, transformFunction: null }, ignoreConvertYearSelected: { classPropertyName: "ignoreConvertYearSelected", publicName: "ignoreConvertYearSelected", isSignal: true, isRequired: false, transformFunction: null }, listKeysDisable: { classPropertyName: "listKeysDisable", publicName: "listKeysDisable", isSignal: true, isRequired: false, transformFunction: null }, ignoreAllowTimeEqual: { classPropertyName: "ignoreAllowTimeEqual", publicName: "ignoreAllowTimeEqual", isSignal: true, isRequired: false, transformFunction: null }, ignoreValidTimeCompare: { classPropertyName: "ignoreValidTimeCompare", publicName: "ignoreValidTimeCompare", isSignal: true, isRequired: false, transformFunction: null }, isCheckErrorWhenSelectItem: { classPropertyName: "isCheckErrorWhenSelectItem", publicName: "isCheckErrorWhenSelectItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreRequiredValueSecondWhenNotValidRequired: { classPropertyName: "ignoreRequiredValueSecondWhenNotValidRequired", publicName: "ignoreRequiredValueSecondWhenNotValidRequired", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outFunctionsControl: "outFunctionsControl", outSelectedDropdown: "outSelectedDropdown", outChooseMultiDate: "outChooseMultiDate", outChooseSingleDate: "outChooseSingleDate", outChangStageFlagMouse: "outChangStageFlagMouse" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["parent"], descendants: true, isSignal: true }, { propertyName: "labelFromRef", first: true, predicate: ["labelFrom"], descendants: true, isSignal: true }, { propertyName: "labelToRef", first: true, predicate: ["labelTo"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (labelConfig(); as labelConfig) {\n  <libs_ui-components-label\n    [classInclude]=\"labelConfig.classInclude\"\n    [labelLeft]=\"labelConfig.labelLeft\"\n    [labelLeftClass]=\"labelConfig.labelLeftClass\"\n    [required]=\"labelConfig.required\"\n    [description]=\"labelConfig.description\"\n    [labelRight]=\"labelConfig.labelRight\"\n    [labelRightClass]=\"labelConfig.labelRightClass\"\n    [onlyShowCount]=\"labelConfig.onlyShowCount\"\n    [buttonsLeft]=\"labelConfig.buttonsLeft\"\n    [buttonsRight]=\"labelConfig.buttonsRight\"\n    [buttonsDescription]=\"labelConfig.buttonsDescription\"\n    [descriptionClass]=\"labelConfig.descriptionClass\"\n    [disableButtonsLeft]=\"labelConfig.disableButtonsLeft\"\n    [disableButtonsRight]=\"labelConfig.disableButtonsRight\"\n    [hasToggle]=\"labelConfig.hasToggle\"\n    [toggleActive]=\"labelConfig.toggleActive\"\n    [toggleDisable]=\"labelConfig.toggleDisable || disable()\"\n    [popover]=\"labelConfig.popover\"\n    [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n    [limitLength]=\"labelConfig.limitLength\"\n    [count]=\"labelConfig.count\" />\n}\n<div\n  #parent\n  class=\"flex items-start\"\n  [class.!w-full]=\"widthByElement()\"\n  [class.!column]=\"isResponsive() && isMultiple()\">\n  <div\n    #childFrom\n    class=\"flex items-start\"\n    [class.w-[50%]]=\"widthByElement() && !isResponsive()\"\n    [class.!mb-[8px]]=\"isResponsive() && isMultiple()\"\n    [class.!mr-[8px]]=\"!isResponsive() && isMultiple()\"\n    [class.w-full]=\"(!isMultiple() && !widthByElement()) || isResponsive()\"\n    [style.width.px]=\"!widthByElement() && isMultiple() && !isResponsive() ? widthDropdown() * arrayFormat().length + 8 * arrayFormat().length + widthLabelFrom() : undefined\">\n    @if (isMultiple() && !ignoreFromAndToDateLabel() && fromAndToDateLabel().from) {\n      <div\n        class=\"mr-[8px] flex-shrink-0 h-[32px] flex items-center\"\n        [style.width.px]=\"isResponsive() ? widthLabel() || undefined : undefined\">\n        <span\n          #labelFrom\n          LibsUiComponentsDatetimeDropdownDirective\n          [class.!opacity-[0.5]]=\"disable()\"\n          class=\"libs-ui-font-h5r text-nowrap {{ fromAndToDateLabel().classLabelFrom || '' }}\"\n          (outChangeWidth)=\"handlerChangeWidthLabel($event)\">\n          @let constHtmlFrom = fromAndToDateLabel().from || ' ';\n          {{ constHtmlFrom | translate }}\n        </span>\n      </div>\n    }\n    <div\n      class=\"flex\"\n      [class.!w-full]=\"widthByElement()\">\n      @if (!changeType()) {\n        <libs_ui-components-datetime-dropdown-item\n          [class.!w-full]=\"widthByElement()\"\n          [disableSecond]=\"disableSecond()\"\n          [typeDate]=\"typeFormat()\"\n          [zIndex]=\"zIndex()\"\n          [maxYear]=\"maxYear()\"\n          [disable]=\"disable()\"\n          [minYear]=\"minYear()\"\n          [readonly]=\"readonly()\"\n          [isMultiple]=\"isMultiple() ? (isResponsive() ? true : false) : true\"\n          [reverseYear]=\"reverseYear()\"\n          [selectedDate]=\"selectedDateTime()?.from() || {}\"\n          [widthDropdown]=\"widthDropdown()\"\n          [widthByElement]=\"widthByElement()\"\n          [getItemYearDisplay]=\"getItemYearDisplay()\"\n          [listMaxItemShow]=\"listMaxItemShow()\"\n          [listKeysDisable]=\"listKeysDisable()?.from()\"\n          [listHasButtonUnSelectOption]=\"listHasButtonUnSelectOption()\"\n          [isEmitSelectedDropDown]=\"isEmitAfterChanged()\"\n          [classIncludeTextDisplayWhenNoSelect]=\"'libs-ui-font-h5r ' + classIncludeTextDisplayWhenNoSelect()\"\n          (outSelectedData)=\"handlerChangeSelectedKey($event, 'from')\"\n          (outFunctionControl)=\"handlerFunctionControl($event, 'from')\"\n          (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\" />\n      }\n    </div>\n  </div>\n  @if (isMultiple()) {\n    <div\n      #childTo\n      [class.!w-[50%]]=\"widthByElement()\"\n      [class.!w-full]=\"!widthByElement() || isResponsive()\"\n      class=\"flex items-start\">\n      <div\n        class=\"mr-[8px] h-[32px] flex-shrink-0 flex items-center\"\n        [style.width.px]=\"isResponsive() ? widthLabel() : undefined\">\n        @if (!ignoreFromAndToDateLabel()) {\n          <span\n            #labelTo\n            LibsUiComponentsDatetimeDropdownDirective\n            [class.!opacity-[0.5]]=\"disable()\"\n            class=\"libs-ui-font-h5r text-nowrap {{ fromAndToDateLabel().classLabelTo || '' }}\"\n            (outChangeWidth)=\"handlerChangeWidthLabel($event)\">\n            @let constHtmlTo = fromAndToDateLabel().to || ' ';\n            {{ constHtmlTo | translate }}\n          </span>\n        }\n        @if (ignoreFromAndToDateLabel()) {\n          <span\n            [class.!opacity-[0.5]]=\"disable()\"\n            class=\"libs-ui-font-h5r\">\n            -\n          </span>\n        }\n      </div>\n      <div\n        class=\"flex\"\n        [class.!w-full]=\"widthByElement()\">\n        @if (!changeType()) {\n          <libs_ui-components-datetime-dropdown-item\n            [class.w-full]=\"widthByElement()\"\n            [disableSecond]=\"disableSecond()\"\n            [typeDate]=\"typeFormat()\"\n            [zIndex]=\"zIndex()\"\n            [maxYear]=\"maxYear()\"\n            [disable]=\"disable()\"\n            [minYear]=\"minYear()\"\n            [readonly]=\"readonly()\"\n            [isMultiple]=\"isMultiple()\"\n            [reverseYear]=\"reverseYear()\"\n            [selectedDate]=\"selectedDateTime()?.to() || {}\"\n            [widthDropdown]=\"widthDropdown()\"\n            [widthByElement]=\"widthByElement()\"\n            [getItemYearDisplay]=\"getItemYearDisplay()\"\n            [listMaxItemShow]=\"listMaxItemShow()\"\n            [listKeysDisable]=\"listKeysDisable()?.to()\"\n            [listHasButtonUnSelectOption]=\"listHasButtonUnSelectOption()\"\n            [classIncludeTextDisplayWhenNoSelect]=\"'libs-ui-font-h5r ' + classIncludeTextDisplayWhenNoSelect\"\n            [isEmitSelectedDropDown]=\"isEmitAfterChanged()\"\n            (outSelectedData)=\"handlerChangeSelectedKey($event, 'to')\"\n            (outFunctionControl)=\"handlerFunctionControl($event, 'to')\"\n            (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\" />\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isErrorCompareDate()) {\n  <div class=\"flex items-center mt-[4px]\">\n    <span class=\"libs-ui-message-error libs-ui-font-h7r libs-ui-text-error\">\n      @let constHtmlMessage = validRequired()?.messageValidCompareTime || 'i18n_invalid_end_date_selected';\n      {{ constHtmlMessage | translate: validRequired()?.interpolateParamsCompareTime }}\n    </span>\n  </div>\n}\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: "directive", type: LibsUiComponentsDatetimeDropdownDirective, selector: "[LibsUiComponentsDatetimeDropdownDirective]", outputs: ["outChangeWidth"] }, { kind: "component", type: LibsUiComponentsDatetimeDropdownItemComponent, selector: "libs_ui-components-datetime-dropdown-item", inputs: ["typeDate", "disableSecond", "selectedDate", "widthDropdown", "widthByElement", "getItemYearDisplay", "listHasButtonUnSelectOption", "readonly", "disable", "zIndex", "isMultiple", "classIncludeTextDisplayWhenNoSelect", "isCheckErrorWhenSelectItem", "maxYear", "minYear", "reverseYear", "listKeysDisable", "ignoreConvertYearSelected", "validRequired", "isEmitSelectedDropDown", "listMaxItemShow"], outputs: ["outSelectedData", "outFunctionControl", "outChangStageFlagMouse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDatetimeDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-datetime-dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsLabelComponent, LibsUiComponentsDatetimeDropdownDirective, LibsUiComponentsDatetimeDropdownItemComponent], template: "@if (labelConfig(); as labelConfig) {\n  <libs_ui-components-label\n    [classInclude]=\"labelConfig.classInclude\"\n    [labelLeft]=\"labelConfig.labelLeft\"\n    [labelLeftClass]=\"labelConfig.labelLeftClass\"\n    [required]=\"labelConfig.required\"\n    [description]=\"labelConfig.description\"\n    [labelRight]=\"labelConfig.labelRight\"\n    [labelRightClass]=\"labelConfig.labelRightClass\"\n    [onlyShowCount]=\"labelConfig.onlyShowCount\"\n    [buttonsLeft]=\"labelConfig.buttonsLeft\"\n    [buttonsRight]=\"labelConfig.buttonsRight\"\n    [buttonsDescription]=\"labelConfig.buttonsDescription\"\n    [descriptionClass]=\"labelConfig.descriptionClass\"\n    [disableButtonsLeft]=\"labelConfig.disableButtonsLeft\"\n    [disableButtonsRight]=\"labelConfig.disableButtonsRight\"\n    [hasToggle]=\"labelConfig.hasToggle\"\n    [toggleActive]=\"labelConfig.toggleActive\"\n    [toggleDisable]=\"labelConfig.toggleDisable || disable()\"\n    [popover]=\"labelConfig.popover\"\n    [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n    [limitLength]=\"labelConfig.limitLength\"\n    [count]=\"labelConfig.count\" />\n}\n<div\n  #parent\n  class=\"flex items-start\"\n  [class.!w-full]=\"widthByElement()\"\n  [class.!column]=\"isResponsive() && isMultiple()\">\n  <div\n    #childFrom\n    class=\"flex items-start\"\n    [class.w-[50%]]=\"widthByElement() && !isResponsive()\"\n    [class.!mb-[8px]]=\"isResponsive() && isMultiple()\"\n    [class.!mr-[8px]]=\"!isResponsive() && isMultiple()\"\n    [class.w-full]=\"(!isMultiple() && !widthByElement()) || isResponsive()\"\n    [style.width.px]=\"!widthByElement() && isMultiple() && !isResponsive() ? widthDropdown() * arrayFormat().length + 8 * arrayFormat().length + widthLabelFrom() : undefined\">\n    @if (isMultiple() && !ignoreFromAndToDateLabel() && fromAndToDateLabel().from) {\n      <div\n        class=\"mr-[8px] flex-shrink-0 h-[32px] flex items-center\"\n        [style.width.px]=\"isResponsive() ? widthLabel() || undefined : undefined\">\n        <span\n          #labelFrom\n          LibsUiComponentsDatetimeDropdownDirective\n          [class.!opacity-[0.5]]=\"disable()\"\n          class=\"libs-ui-font-h5r text-nowrap {{ fromAndToDateLabel().classLabelFrom || '' }}\"\n          (outChangeWidth)=\"handlerChangeWidthLabel($event)\">\n          @let constHtmlFrom = fromAndToDateLabel().from || ' ';\n          {{ constHtmlFrom | translate }}\n        </span>\n      </div>\n    }\n    <div\n      class=\"flex\"\n      [class.!w-full]=\"widthByElement()\">\n      @if (!changeType()) {\n        <libs_ui-components-datetime-dropdown-item\n          [class.!w-full]=\"widthByElement()\"\n          [disableSecond]=\"disableSecond()\"\n          [typeDate]=\"typeFormat()\"\n          [zIndex]=\"zIndex()\"\n          [maxYear]=\"maxYear()\"\n          [disable]=\"disable()\"\n          [minYear]=\"minYear()\"\n          [readonly]=\"readonly()\"\n          [isMultiple]=\"isMultiple() ? (isResponsive() ? true : false) : true\"\n          [reverseYear]=\"reverseYear()\"\n          [selectedDate]=\"selectedDateTime()?.from() || {}\"\n          [widthDropdown]=\"widthDropdown()\"\n          [widthByElement]=\"widthByElement()\"\n          [getItemYearDisplay]=\"getItemYearDisplay()\"\n          [listMaxItemShow]=\"listMaxItemShow()\"\n          [listKeysDisable]=\"listKeysDisable()?.from()\"\n          [listHasButtonUnSelectOption]=\"listHasButtonUnSelectOption()\"\n          [isEmitSelectedDropDown]=\"isEmitAfterChanged()\"\n          [classIncludeTextDisplayWhenNoSelect]=\"'libs-ui-font-h5r ' + classIncludeTextDisplayWhenNoSelect()\"\n          (outSelectedData)=\"handlerChangeSelectedKey($event, 'from')\"\n          (outFunctionControl)=\"handlerFunctionControl($event, 'from')\"\n          (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\" />\n      }\n    </div>\n  </div>\n  @if (isMultiple()) {\n    <div\n      #childTo\n      [class.!w-[50%]]=\"widthByElement()\"\n      [class.!w-full]=\"!widthByElement() || isResponsive()\"\n      class=\"flex items-start\">\n      <div\n        class=\"mr-[8px] h-[32px] flex-shrink-0 flex items-center\"\n        [style.width.px]=\"isResponsive() ? widthLabel() : undefined\">\n        @if (!ignoreFromAndToDateLabel()) {\n          <span\n            #labelTo\n            LibsUiComponentsDatetimeDropdownDirective\n            [class.!opacity-[0.5]]=\"disable()\"\n            class=\"libs-ui-font-h5r text-nowrap {{ fromAndToDateLabel().classLabelTo || '' }}\"\n            (outChangeWidth)=\"handlerChangeWidthLabel($event)\">\n            @let constHtmlTo = fromAndToDateLabel().to || ' ';\n            {{ constHtmlTo | translate }}\n          </span>\n        }\n        @if (ignoreFromAndToDateLabel()) {\n          <span\n            [class.!opacity-[0.5]]=\"disable()\"\n            class=\"libs-ui-font-h5r\">\n            -\n          </span>\n        }\n      </div>\n      <div\n        class=\"flex\"\n        [class.!w-full]=\"widthByElement()\">\n        @if (!changeType()) {\n          <libs_ui-components-datetime-dropdown-item\n            [class.w-full]=\"widthByElement()\"\n            [disableSecond]=\"disableSecond()\"\n            [typeDate]=\"typeFormat()\"\n            [zIndex]=\"zIndex()\"\n            [maxYear]=\"maxYear()\"\n            [disable]=\"disable()\"\n            [minYear]=\"minYear()\"\n            [readonly]=\"readonly()\"\n            [isMultiple]=\"isMultiple()\"\n            [reverseYear]=\"reverseYear()\"\n            [selectedDate]=\"selectedDateTime()?.to() || {}\"\n            [widthDropdown]=\"widthDropdown()\"\n            [widthByElement]=\"widthByElement()\"\n            [getItemYearDisplay]=\"getItemYearDisplay()\"\n            [listMaxItemShow]=\"listMaxItemShow()\"\n            [listKeysDisable]=\"listKeysDisable()?.to()\"\n            [listHasButtonUnSelectOption]=\"listHasButtonUnSelectOption()\"\n            [classIncludeTextDisplayWhenNoSelect]=\"'libs-ui-font-h5r ' + classIncludeTextDisplayWhenNoSelect\"\n            [isEmitSelectedDropDown]=\"isEmitAfterChanged()\"\n            (outSelectedData)=\"handlerChangeSelectedKey($event, 'to')\"\n            (outFunctionControl)=\"handlerFunctionControl($event, 'to')\"\n            (outChangStageFlagMouse)=\"handlerChangStageFlagMouse($event)\" />\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isErrorCompareDate()) {\n  <div class=\"flex items-center mt-[4px]\">\n    <span class=\"libs-ui-message-error libs-ui-font-h7r libs-ui-text-error\">\n      @let constHtmlMessage = validRequired()?.messageValidCompareTime || 'i18n_invalid_end_date_selected';\n      {{ constHtmlMessage | translate: validRequired()?.interpolateParamsCompareTime }}\n    </span>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsDatetimeDropdownComponent };
+//# sourceMappingURL=libs-ui-components-datetime-dropdown.mjs.map