quang 20.5.2-0 → 21.0.0

package/fesm2022/quang-components-date.mjs

@@ -1,6 +1,6 @@
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, viewChild, computed, signal, inject, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, NgZone, ChangeDetectorRef, ApplicationRef, input, viewChild, computed, signal, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TranslocoPipe } from '@jsverse/transloco';
@@ -29,6 +29,10 @@ import { QuangBaseComponent } from 'quang/components/shared';
 class QuangDateComponent extends QuangBaseComponent {
     constructor() {
         super();
+        this._ngZone = inject(NgZone);
+        this._cdr = inject(ChangeDetectorRef);
+        this._appRef = inject(ApplicationRef);
+        this._tickScheduled = false;
         /**
          * Format to use to show on the input field.
          * The format is based on the standard {@link https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table}
@@ -85,6 +89,9 @@ class QuangDateComponent extends QuangBaseComponent {
             return navigator.language;
         }, ...(ngDevMode ? [{ debugName: "_activeLanguage" }] : []));
         this._airDatepickerInstance = signal(undefined, ...(ngDevMode ? [{ debugName: "_airDatepickerInstance" }] : []));
+        // AirDatepicker doesn't reliably support toggling `inline` at runtime via `update()`.
+        // Track the mode used to create the current instance and recreate when it changes.
+        this._airDatepickerInlineMode = signal(null, ...(ngDevMode ? [{ debugName: "_airDatepickerInlineMode" }] : []));
         this.searchTextDebounce = input(500, ...(ngDevMode ? [{ debugName: "searchTextDebounce" }] : []));
         this.targetPosition = signal('bottom left', ...(ngDevMode ? [{ debugName: "targetPosition" }] : []));
         this._generateAirDatepickerEffect = effect(() => {
@@ -107,122 +114,147 @@ class QuangDateComponent extends QuangBaseComponent {
         });
     }
     setupCalendar() {
-        if (this._inputForDate()?.nativeElement) {
-            let currentValue = this._value();
-            let targetDate;
-            if (currentValue && typeof currentValue === 'string') {
-                if (!this.showTimepicker()) {
-                    currentValue = currentValue.split('T')[0];
-                }
-                targetDate = [currentValue];
+        if (!this._inputForDate()?.nativeElement)
+            return;
+        const desiredInlineMode = this.showInline();
+        const existingInstance = this._airDatepickerInstance();
+        const existingInlineMode = this._airDatepickerInlineMode();
+        if (existingInstance && existingInlineMode !== null && existingInlineMode !== desiredInlineMode) {
+            const maybeDestroy = existingInstance;
+            maybeDestroy.destroy?.();
+            this._airDatepickerInstance.set(undefined);
+        }
+        let currentValue = this._value();
+        let targetDate;
+        if (currentValue && typeof currentValue === 'string') {
+            if (!this.showTimepicker()) {
+                currentValue = currentValue.split('T')[0];
             }
-            else if (currentValue && typeof currentValue === 'object') {
-                targetDate = [];
-                if (currentValue.dateFrom) {
-                    let targetDateFrom = currentValue.dateFrom;
-                    if (!this.showTimepicker()) {
-                        targetDateFrom = currentValue.dateFrom.split('T')[0];
-                    }
-                    targetDate.push(targetDateFrom);
-                }
-                if (currentValue.dateTo) {
-                    let targetDateTo = currentValue.dateTo;
-                    if (!this.showTimepicker()) {
-                        targetDateTo = currentValue.dateTo.split('T')[0];
-                    }
-                    targetDate.push(targetDateTo);
-                }
+            targetDate = [currentValue];
+        }
+        else if (currentValue && typeof currentValue === 'object') {
+            targetDate = [];
+            if (currentValue.dateFrom) {
+                const targetDateFrom = this.showTimepicker()
+                    ? currentValue.dateFrom
+                    : currentValue.dateFrom.split('T')[0];
+                targetDate.push(targetDateFrom);
+            }
+            if (currentValue.dateTo) {
+                const targetDateTo = this.showTimepicker() ? currentValue.dateTo : currentValue.dateTo.split('T')[0];
+                targetDate.push(targetDateTo);
             }
-            this.setCalendarPosition();
-            const airDatepickerOpts = {
-                autoClose: true,
-                showEvent: 'click',
-                classes: this.calendarClasses(),
-                dateFormat: this.dateFormat(),
-                inline: this.showInline(),
-                isMobile: false,
-                multipleDatesSeparator: this.multipleDatesSeparator(),
-                range: this.rangeSelection(),
-                timepicker: this.showTimepicker(),
-                onlyTimepicker: this.showOnlyTimepicker(),
-                timeFormat: this.timeFormat(),
-                minHours: this.minHour(),
-                maxHours: this.maxHour(),
-                minMinutes: this.minMinute(),
-                maxMinutes: this.maxMinute(),
-                minDate: this.minDate(),
-                maxDate: this.maxDate(),
-                toggleSelected: false,
-                multipleDates: false,
-                selectedDates: targetDate,
-                position: this.targetPosition(),
-                locale: this.getLocale(),
-                onSelect: ({ date }) => {
+        }
+        this.setCalendarPosition();
+        const userDatepickerOptions = this.datepickerOptions() ?? {};
+        const userOnSelect = userDatepickerOptions.onSelect;
+        const userOnHide = userDatepickerOptions.onHide;
+        const userOnShow = userDatepickerOptions.onShow;
+        const airDatepickerOpts = {
+            ...userDatepickerOptions,
+            autoClose: !this.showInline(),
+            showEvent: 'click',
+            classes: this.calendarClasses(),
+            dateFormat: this.dateFormat(),
+            inline: this.showInline(),
+            isMobile: false,
+            multipleDatesSeparator: this.multipleDatesSeparator(),
+            range: this.rangeSelection(),
+            timepicker: this.showTimepicker(),
+            onlyTimepicker: this.showOnlyTimepicker(),
+            timeFormat: this.timeFormat(),
+            minHours: this.minHour(),
+            maxHours: this.maxHour(),
+            minMinutes: this.minMinute(),
+            maxMinutes: this.maxMinute(),
+            minDate: this.minDate(),
+            maxDate: this.maxDate(),
+            toggleSelected: false,
+            multipleDates: false,
+            selectedDates: targetDate,
+            position: this.targetPosition(),
+            locale: this.getLocale(),
+            onSelect: (args) => {
+                const { date } = args;
+                // AirDatepicker callbacks may fire outside Angular's zone in some app setups.
+                // Ensure CVA propagation happens inside the zone so the connected FormControl updates reliably.
+                this._ngZone.run(() => {
                     this._shouldRefocusInputOnHide.set(true);
-                    if (!Array.isArray(date)) {
-                        let selectTargetDate = date;
-                        if (!this.showTimepicker()) {
-                            selectTargetDate = this.dateToUtc(date);
+                    if (Array.isArray(date)) {
+                        // Range selection: AirDatepicker emits partial selections too (only start date).
+                        // Committing `_value` for partial selections can trigger `setupCalendar()` re-sync and
+                        // break the second click. Only commit once the range is complete.
+                        const [from, to] = date;
+                        if (!from || !to) {
+                            return;
                         }
+                        const value = {
+                            dateFrom: (this.showTimepicker() ? from : this.dateToUtc(from)).toISOString(),
+                            dateTo: (this.showTimepicker() ? to : this.dateToUtc(to)).toISOString(),
+                        };
+                        this.onChangedHandler(value);
+                    }
+                    else if (date) {
+                        const selectTargetDate = this.showTimepicker() ? date : this.dateToUtc(date);
                         this.onChangedHandler(selectTargetDate.toISOString());
                     }
                     if (this.showInline()) {
-                        this.onHideCalendar();
-                    }
-                },
-                onHide: (isAnimationComplete) => {
-                    if (isAnimationComplete) {
-                        this.onHideCalendar();
-                    }
-                },
-                ...(this.datepickerOptions() ?? {}),
-                onShow: (isAnimationComplete) => {
-                    const datepicker = this._airDatepickerInstance()?.$datepicker;
-                    if (datepicker) {
-                        datepicker.onmouseenter = () => {
-                            this.isMouseInsideCalendar.set(true);
-                        };
-                        datepicker.onmouseleave = () => {
-                            this.isMouseInsideCalendar.set(false);
-                        };
-                        datepicker.onkeydown = (evt) => {
-                            if (evt.key !== 'Enter' || this.showInline()) {
-                                return;
-                            }
-                            // Air-datepicker keyboard selection doesn't always auto-close reliably.
-                            // Close on Enter to keep behavior consistent with autoClose and focus expectations.
-                            this._shouldRefocusInputOnHide.set(true);
-                            setTimeout(() => this._airDatepickerInstance()?.hide(), 0);
-                        };
+                        // Inline mode should update the connected control immediately.
+                        // Do not rely on `onHideCalendar()` because inline never hides and the input may be visually hidden.
+                        this.propagateValueToControl();
                     }
-                    if (isAnimationComplete || !this.showTimepicker()) {
-                        return;
-                    }
-                    this.setupTimepicker();
-                },
-            };
-            if (this._airDatepickerInstance()) {
-                if (this._airDatepickerInstance()?.visible) {
-                    this._airDatepickerInstance()?.update(airDatepickerOpts);
-                }
-                else {
-                    this._airDatepickerInstance()?.update(airDatepickerOpts, { silent: true });
+                });
+                userOnSelect?.(args);
+            },
+            onHide: (isAnimationComplete) => {
+                if (isAnimationComplete) {
+                    this.onHideCalendar();
                 }
-                if (!targetDate) {
-                    this._airDatepickerInstance()?.setFocusDate(false);
-                    this._airDatepickerInstance()?.clear({ silent: true });
+                userOnHide?.(isAnimationComplete);
+            },
+            onShow: (isAnimationComplete) => {
+                const datepicker = this._airDatepickerInstance()?.$datepicker;
+                if (datepicker) {
+                    datepicker.onmouseenter = () => {
+                        this.isMouseInsideCalendar.set(true);
+                    };
+                    datepicker.onmouseleave = () => {
+                        this.isMouseInsideCalendar.set(false);
+                    };
                 }
-                else {
-                    this._airDatepickerInstance()?.selectDate(targetDate, { updateTime: true });
+                if (isAnimationComplete || !this.showTimepicker()) {
+                    return;
                 }
+                this.setupTimepicker();
+                userOnShow?.(isAnimationComplete);
+            },
+        };
+        if (this._airDatepickerInstance()) {
+            if (this._airDatepickerInstance()?.visible) {
+                this._airDatepickerInstance()?.update(airDatepickerOpts);
             }
             else {
-                this._airDatepickerInstance.set(new AirDatepicker(this._inputForDate()?.nativeElement, airDatepickerOpts));
+                this._airDatepickerInstance()?.update(airDatepickerOpts, { silent: true });
             }
-            if (this.showInline()) {
-                this.setupTimepicker();
+            if (targetDate) {
+                this._airDatepickerInstance()?.selectDate(targetDate, { updateTime: true, silent: true });
+            }
+            else {
+                this._airDatepickerInstance()?.setFocusDate(false);
+                this._airDatepickerInstance()?.clear({ silent: true });
             }
         }
+        else {
+            this._airDatepickerInstance.set(new AirDatepicker(this._inputForDate()?.nativeElement, airDatepickerOpts));
+        }
+        this._airDatepickerInlineMode.set(desiredInlineMode);
+        if (desiredInlineMode) {
+            // Ensure inline calendar is visible after re-creation/update.
+            this._airDatepickerInstance()?.show?.();
+        }
+        if (this.showInline()) {
+            this.setupTimepicker();
+        }
     }
     onChangeText($event) {
         const value = $event.target?.value;
@@ -230,14 +262,23 @@ class QuangDateComponent extends QuangBaseComponent {
             // TODO: check format for DateRange
             if (value.length === this.valueFormat().length && isMatch(value, this.valueFormat())) {
                 this.onChangedHandler(this.setupInputStringToDate(value).toISOString());
+                if (this.showInline()) {
+                    this.propagateValueToControl();
+                }
             }
         }
         else {
             this.onChangedHandler(value);
+            if (this.showInline()) {
+                this.propagateValueToControl();
+            }
         }
     }
     onBlurHandler() {
         super.onBlurHandler();
+        if (this.showInline()) {
+            return;
+        }
         if (this.isMouseOutsideCalendar() && this._airDatepickerInstance()?.visible) {
             this._airDatepickerInstance()?.hide();
         }
@@ -247,9 +288,9 @@ class QuangDateComponent extends QuangBaseComponent {
         if (value.length !== targetValueFormat.length) {
             targetValueFormat = targetValueFormat.replace('yyyy', 'yy');
         }
-        let targetDate = parse(value, targetValueFormat, new Date());
+        const targetDate = parse(value, targetValueFormat, new Date());
         if (!this.showTimepicker()) {
-            targetDate = this.dateToUtc(targetDate);
+            return this.dateToUtc(targetDate);
         }
         return targetDate;
     }
@@ -288,6 +329,42 @@ class QuangDateComponent extends QuangBaseComponent {
         }
         this._value.set(targetDate);
     }
+    propagateValueToControl() {
+        if (this.formControl()?.getRawValue() !== this._value()) {
+            super.onChangedHandler(this._value());
+        }
+        else if (this.onTouched) {
+            this.onTouched();
+        }
+        this.requestRender();
+    }
+    requestRender() {
+        // Inline datepicker interactions can happen outside Angular-managed events.
+        // Marking the view dirty is not always enough in zoneless/event-coalesced setups,
+        // so we coalesce a manual tick.
+        this._cdr.markForCheck();
+        if (this._tickScheduled) {
+            return;
+        }
+        this._tickScheduled = true;
+        queueMicrotask(() => {
+            this._tickScheduled = false;
+            this._appRef.tick();
+        });
+    }
+    syncValueFromDatepickerSelection() {
+        if (!this.showInline()) {
+            return;
+        }
+        const datepickerInstance = this._airDatepickerInstance();
+        const selectedDate = datepickerInstance?.selectedDates?.[0];
+        if (!(selectedDate instanceof Date)) {
+            return;
+        }
+        const targetDate = this.showTimepicker() ? selectedDate : this.dateToUtc(selectedDate);
+        this.onChangedHandler(targetDate.toISOString());
+        this.propagateValueToControl();
+    }
     onHideCalendar() {
         const valueInput = this._inputForDate()?.nativeElement.value;
         let value = valueInput;
@@ -296,18 +373,14 @@ class QuangDateComponent extends QuangBaseComponent {
             const [dateFrom, dateTo] = valueInput.split(this.multipleDatesSeparator());
             value.dateFrom = dateFrom ?? '';
             value.dateTo = dateTo ?? '';
-            if (!value.dateFrom || !this.checkDateMatch(value.dateFrom)) {
-                value.dateFrom = null;
-            }
-            else {
-                value.dateFrom = this.setupInputStringToDate(value.dateFrom).toISOString();
-            }
-            if (!value.dateTo || !this.checkDateMatch(value.dateTo)) {
-                value.dateTo = null;
-            }
-            else {
-                value.dateTo = this.setupInputStringToDate(value.dateTo).toISOString();
-            }
+            value.dateFrom =
+                !value.dateFrom || !this.checkDateMatch(value.dateFrom)
+                    ? null
+                    : this.setupInputStringToDate(value.dateFrom).toISOString();
+            value.dateTo =
+                !value.dateTo || !this.checkDateMatch(value.dateTo)
+                    ? null
+                    : this.setupInputStringToDate(value.dateTo).toISOString();
             this.onChangedHandler(value);
         }
         else if (this.checkDateMatch(value)) {
@@ -316,11 +389,9 @@ class QuangDateComponent extends QuangBaseComponent {
         else {
             this.onChangedHandler(null);
         }
-        if (this.formControl()?.getRawValue() !== this._value()) {
-            super.onChangedHandler(this._value());
-        }
-        else if (this.onTouched) {
-            this.onTouched();
+        this.propagateValueToControl();
+        if (this.showInline()) {
+            return;
         }
         // Only focus the input when the user actually interacted with the calendar.
         // Avoids infinite focus loop when tabbing between multiple datepickers.
@@ -340,6 +411,9 @@ class QuangDateComponent extends QuangBaseComponent {
             return format(val, this.valueFormat());
         }
         if (val && typeof val === 'object') {
+            if (!val.dateFrom && !val.dateTo) {
+                return '';
+            }
             let dateFromFormat = '';
             let dateToFormat = '';
             if (val.dateFrom) {
@@ -367,10 +441,10 @@ class QuangDateComponent extends QuangBaseComponent {
         if (this._isDisabled()) {
             return;
         }
-        const dp = this._airDatepickerInstance();
-        if (event.key === 'Escape' && dp?.visible) {
+        const datepickerInstance = this._airDatepickerInstance();
+        if (event.key === 'Escape' && datepickerInstance?.visible) {
             event.preventDefault();
-            dp.hide();
+            datepickerInstance.hide();
             return;
         }
         if (event.key === 'Enter' || event.key === 'ArrowDown') {
@@ -414,10 +488,6 @@ class QuangDateComponent extends QuangBaseComponent {
         // convert to UTC time removing the timezone
         return new Date(date.getTime() - date.getTimezoneOffset() * 60000);
     }
-    dateToLocal(date) {
-        // convert to local time adding the timezone
-        return new Date(date.getTime() + date.getTimezoneOffset() * 60000);
-    }
     setCalendarPosition() {
         const windowInnerHeight = window.innerHeight;
         const inputBoundingClientRect = this._inputForDate()?.nativeElement.getBoundingClientRect();
@@ -430,8 +500,23 @@ class QuangDateComponent extends QuangBaseComponent {
         }
     }
     setupTimepicker() {
-        const timepicker = document.getElementsByClassName('air-datepicker-time')?.[0];
-        if (timepicker) {
+        const datepickerRoot = this._airDatepickerInstance()?.$datepicker;
+        if (!datepickerRoot) {
+            return;
+        }
+        // AirDatepicker may re-render time inputs; use delegated listeners so we don't lose handlers.
+        if (!datepickerRoot.dataset['quangTimepickerListeners']) {
+            datepickerRoot.dataset['quangTimepickerListeners'] = 'true';
+            datepickerRoot.addEventListener('input', () => {
+                if (!this.showInline()) {
+                    return;
+                }
+                // Let AirDatepicker update its internal selection first.
+                setTimeout(() => this._ngZone.run(() => this.syncValueFromDatepickerSelection()), 0);
+            }, { capture: true });
+        }
+        const timepickers = datepickerRoot.getElementsByClassName('air-datepicker-time');
+        for (const timepicker of Array.from(timepickers)) {
             const inputs = timepicker.getElementsByTagName('input');
             for (const input of Array.from(inputs)) {
                 input.setAttribute('type', 'number');
@@ -441,7 +526,7 @@ class QuangDateComponent extends QuangBaseComponent {
                     evt.stopImmediatePropagation();
                 };
                 input.onblur = () => {
-                    if (this.isMouseOutsideCalendar()) {
+                    if (!this.showInline() && this.isMouseOutsideCalendar()) {
                         this._airDatepickerInstance()?.hide();
                     }
                 };
@@ -451,12 +536,12 @@ class QuangDateComponent extends QuangBaseComponent {
     checkDateMatch(date) {
         return isMatch(date, this.valueFormat()) || isMatch(date, this.valueFormat().replace('yyyy', 'yy'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: QuangDateComponent, isStandalone: true, selector: "quang-date", inputs: { dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, activeLanguageOverride: { classPropertyName: "activeLanguageOverride", publicName: "activeLanguageOverride", isSignal: true, isRequired: false, transformFunction: null }, timepicker: { classPropertyName: "timepicker", publicName: "timepicker", isSignal: true, isRequired: false, transformFunction: null }, invalidDateMessage: { classPropertyName: "invalidDateMessage", publicName: "invalidDateMessage", isSignal: true, isRequired: false, transformFunction: null }, showOnlyTimepicker: { classPropertyName: "showOnlyTimepicker", publicName: "showOnlyTimepicker", isSignal: true, isRequired: false, transformFunction: null }, minHour: { classPropertyName: "minHour", publicName: "minHour", isSignal: true, isRequired: false, transformFunction: null }, maxHour: { classPropertyName: "maxHour", publicName: "maxHour", isSignal: true, isRequired: false, transformFunction: null }, minMinute: { classPropertyName: "minMinute", publicName: "minMinute", isSignal: true, isRequired: false, transformFunction: null }, maxMinute: { classPropertyName: "maxMinute", publicName: "maxMinute", 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 }, showInline: { classPropertyName: "showInline", publicName: "showInline", isSignal: true, isRequired: false, transformFunction: null }, calendarClasses: { classPropertyName: "calendarClasses", publicName: "calendarClasses", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, datepickerOptions: { classPropertyName: "datepickerOptions", publicName: "datepickerOptions", isSignal: true, isRequired: false, transformFunction: null }, multipleDatesSeparator: { classPropertyName: "multipleDatesSeparator", publicName: "multipleDatesSeparator", isSignal: true, isRequired: false, transformFunction: null }, rangeSelection: { classPropertyName: "rangeSelection", publicName: "rangeSelection", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuangDateComponent), multi: true }], viewQueries: [{ propertyName: "_inputForDate", first: true, predicate: ["inputForDate"], descendants: true, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: ["calendarButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mb-3\">\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    class=\"input-date-container\"\n  >\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [autocomplete]=\"'off'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [class.with-button-calendar]=\"!hasNoContent()\"\n      [disabled]=\"_isDisabled()\"\n      [hidden]=\"showInline()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"inputValueString()\"\n      (blur)=\"onBlurHandler()\"\n      (focus)=\"interceptInputInteraction($event)\"\n      (input)=\"onChangeText($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (mouseenter)=\"isMouseInsideCalendar.set(true)\"\n      (mouseleave)=\"isMouseInsideCalendar.set(false)\"\n      (search)=\"onCancel()\"\n      #inputForDate\n      class=\"form-control\"\n      type=\"search\"\n    />\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.border-danger]=\"_showErrors()\"\n      [class.border-success]=\"_showSuccess()\"\n      [hidden]=\"showInline() || hasNoContent() || _isDisabled()\"\n      [ngClass]=\"buttonClass()\"\n      (click)=\"_ngControl()?.disabled ? null : openDatePicker()\"\n      #calendarButton\n      aria-label=\"calendar-button\"\n      class=\"btn btn-outline-secondary btn-outline-calendar\"\n      type=\"button\"\n    >\n      <ng-content></ng-content>\n    </button>\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}::ng-deep .air-datepicker{z-index:99999}::ng-deep .air-datepicker.-inline-{z-index:unset}::ng-deep .air-datepicker .air-datepicker--pointer{display:none}::ng-deep .air-datepicker .air-datepicker-time{display:block}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--current{display:none}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders{display:flex;justify-content:center;padding-top:.25rem;gap:1rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row{width:100%;position:relative}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row:first-child:after{content:\":\";display:inline;font-size:1rem;position:absolute;right:-.65rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row input{width:100%;text-align:center;padding:0;padding-left:1rem;border-color:var(--bs-border-color)}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row .form-control:focus{box-shadow:unset!important}::ng-deep .air-datepicker.-inline-.-only-timepicker-{border:0}::ng-deep .air-datepicker.-inline-.-only-timepicker- .air-datepicker--time{border:0}:host{display:block}:host .input-date-container{display:flex}:host input{flex:1}:host input.with-button-calendar{border-top-right-radius:0;border-bottom-right-radius:0}:host input:disabled{border-radius:var(--bs-border-radius)}:host .btn-outline-calendar{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}:host .border-danger{border-color:var(--bs-form-invalid-border-color)}:host .border-success{border-color:var(--bs-form-valid-border-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: QuangDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: QuangDateComponent, isStandalone: true, selector: "quang-date", inputs: { dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, activeLanguageOverride: { classPropertyName: "activeLanguageOverride", publicName: "activeLanguageOverride", isSignal: true, isRequired: false, transformFunction: null }, timepicker: { classPropertyName: "timepicker", publicName: "timepicker", isSignal: true, isRequired: false, transformFunction: null }, invalidDateMessage: { classPropertyName: "invalidDateMessage", publicName: "invalidDateMessage", isSignal: true, isRequired: false, transformFunction: null }, showOnlyTimepicker: { classPropertyName: "showOnlyTimepicker", publicName: "showOnlyTimepicker", isSignal: true, isRequired: false, transformFunction: null }, minHour: { classPropertyName: "minHour", publicName: "minHour", isSignal: true, isRequired: false, transformFunction: null }, maxHour: { classPropertyName: "maxHour", publicName: "maxHour", isSignal: true, isRequired: false, transformFunction: null }, minMinute: { classPropertyName: "minMinute", publicName: "minMinute", isSignal: true, isRequired: false, transformFunction: null }, maxMinute: { classPropertyName: "maxMinute", publicName: "maxMinute", 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 }, showInline: { classPropertyName: "showInline", publicName: "showInline", isSignal: true, isRequired: false, transformFunction: null }, calendarClasses: { classPropertyName: "calendarClasses", publicName: "calendarClasses", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, datepickerOptions: { classPropertyName: "datepickerOptions", publicName: "datepickerOptions", isSignal: true, isRequired: false, transformFunction: null }, multipleDatesSeparator: { classPropertyName: "multipleDatesSeparator", publicName: "multipleDatesSeparator", isSignal: true, isRequired: false, transformFunction: null }, rangeSelection: { classPropertyName: "rangeSelection", publicName: "rangeSelection", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuangDateComponent), multi: true }], viewQueries: [{ propertyName: "_inputForDate", first: true, predicate: ["inputForDate"], descendants: true, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: ["calendarButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mb-3\">\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    class=\"input-date-container\"\n  >\n    <input\n      [attr.aria-hidden]=\"showInline() ? 'true' : null\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [autocomplete]=\"'off'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [class.quang-date-inline-hidden]=\"showInline()\"\n      [class.with-button-calendar]=\"!hasNoContent()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"inputValueString()\"\n      (blur)=\"onBlurHandler()\"\n      (focus)=\"interceptInputInteraction($event)\"\n      (input)=\"onChangeText($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (mouseenter)=\"isMouseInsideCalendar.set(true)\"\n      (mouseleave)=\"isMouseInsideCalendar.set(false)\"\n      (search)=\"onCancel()\"\n      #inputForDate\n      class=\"form-control\"\n      type=\"search\"\n    />\n    <button\n      [attr.aria-hidden]=\"showInline() ? 'true' : null\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.border-danger]=\"_showErrors()\"\n      [class.border-success]=\"_showSuccess()\"\n      [class.quang-date-inline-hidden]=\"showInline()\"\n      [hidden]=\"hasNoContent() || _isDisabled()\"\n      [ngClass]=\"buttonClass()\"\n      (click)=\"_ngControl()?.disabled ? null : openDatePicker()\"\n      #calendarButton\n      aria-label=\"calendar-button\"\n      class=\"btn btn-outline-secondary btn-outline-calendar\"\n      type=\"button\"\n    >\n      <ng-content></ng-content>\n    </button>\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}::ng-deep .air-datepicker{z-index:99999}::ng-deep .air-datepicker.-inline-{z-index:unset}::ng-deep .air-datepicker .air-datepicker--pointer{display:none}::ng-deep .air-datepicker .air-datepicker-time{display:block}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--current{display:none}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders{display:flex;justify-content:center;padding-top:.25rem;gap:1rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row{width:100%;position:relative}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row:first-child:after{content:\":\";display:inline;font-size:1rem;position:absolute;right:-.65rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row input{width:100%;text-align:center;padding:0;padding-left:1rem;border-color:var(--bs-border-color)}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row .form-control:focus{box-shadow:unset!important}::ng-deep .air-datepicker.-inline-.-only-timepicker-{border:0;padding:0!important}::ng-deep .air-datepicker.-inline-.-only-timepicker- .air-datepicker--time{border:0;padding:0!important}::ng-deep .air-datepicker.-inline-.-only-timepicker- .air-datepicker-time{padding:0!important}:host{display:block}:host .quang-date-inline-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}:host .input-date-container{display:flex}:host input{flex:1}:host input.with-button-calendar{border-top-right-radius:0;border-bottom-right-radius:0}:host input:disabled{border-radius:var(--bs-border-radius)}:host .btn-outline-calendar{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}:host .border-danger{border-color:var(--bs-form-invalid-border-color)}:host .border-success{border-color:var(--bs-form-valid-border-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: QuangDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'quang-date', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuangDateComponent), multi: true }], imports: [TranslocoPipe, NgClass, QuangTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-3\">\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    class=\"input-date-container\"\n  >\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [autocomplete]=\"'off'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [class.with-button-calendar]=\"!hasNoContent()\"\n      [disabled]=\"_isDisabled()\"\n      [hidden]=\"showInline()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"inputValueString()\"\n      (blur)=\"onBlurHandler()\"\n      (focus)=\"interceptInputInteraction($event)\"\n      (input)=\"onChangeText($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (mouseenter)=\"isMouseInsideCalendar.set(true)\"\n      (mouseleave)=\"isMouseInsideCalendar.set(false)\"\n      (search)=\"onCancel()\"\n      #inputForDate\n      class=\"form-control\"\n      type=\"search\"\n    />\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.border-danger]=\"_showErrors()\"\n      [class.border-success]=\"_showSuccess()\"\n      [hidden]=\"showInline() || hasNoContent() || _isDisabled()\"\n      [ngClass]=\"buttonClass()\"\n      (click)=\"_ngControl()?.disabled ? null : openDatePicker()\"\n      #calendarButton\n      aria-label=\"calendar-button\"\n      class=\"btn btn-outline-secondary btn-outline-calendar\"\n      type=\"button\"\n    >\n      <ng-content></ng-content>\n    </button>\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}::ng-deep .air-datepicker{z-index:99999}::ng-deep .air-datepicker.-inline-{z-index:unset}::ng-deep .air-datepicker .air-datepicker--pointer{display:none}::ng-deep .air-datepicker .air-datepicker-time{display:block}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--current{display:none}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders{display:flex;justify-content:center;padding-top:.25rem;gap:1rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row{width:100%;position:relative}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row:first-child:after{content:\":\";display:inline;font-size:1rem;position:absolute;right:-.65rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row input{width:100%;text-align:center;padding:0;padding-left:1rem;border-color:var(--bs-border-color)}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row .form-control:focus{box-shadow:unset!important}::ng-deep .air-datepicker.-inline-.-only-timepicker-{border:0}::ng-deep .air-datepicker.-inline-.-only-timepicker- .air-datepicker--time{border:0}:host{display:block}:host .input-date-container{display:flex}:host input{flex:1}:host input.with-button-calendar{border-top-right-radius:0;border-bottom-right-radius:0}:host input:disabled{border-radius:var(--bs-border-radius)}:host .btn-outline-calendar{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}:host .border-danger{border-color:var(--bs-form-invalid-border-color)}:host .border-success{border-color:var(--bs-form-valid-border-color)}\n"] }]
+            args: [{ selector: 'quang-date', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuangDateComponent), multi: true }], imports: [TranslocoPipe, NgClass, QuangTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-3\">\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    class=\"input-date-container\"\n  >\n    <input\n      [attr.aria-hidden]=\"showInline() ? 'true' : null\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [autocomplete]=\"'off'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [class.quang-date-inline-hidden]=\"showInline()\"\n      [class.with-button-calendar]=\"!hasNoContent()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"inputValueString()\"\n      (blur)=\"onBlurHandler()\"\n      (focus)=\"interceptInputInteraction($event)\"\n      (input)=\"onChangeText($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (mouseenter)=\"isMouseInsideCalendar.set(true)\"\n      (mouseleave)=\"isMouseInsideCalendar.set(false)\"\n      (search)=\"onCancel()\"\n      #inputForDate\n      class=\"form-control\"\n      type=\"search\"\n    />\n    <button\n      [attr.aria-hidden]=\"showInline() ? 'true' : null\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.border-danger]=\"_showErrors()\"\n      [class.border-success]=\"_showSuccess()\"\n      [class.quang-date-inline-hidden]=\"showInline()\"\n      [hidden]=\"hasNoContent() || _isDisabled()\"\n      [ngClass]=\"buttonClass()\"\n      (click)=\"_ngControl()?.disabled ? null : openDatePicker()\"\n      #calendarButton\n      aria-label=\"calendar-button\"\n      class=\"btn btn-outline-secondary btn-outline-calendar\"\n      type=\"button\"\n    >\n      <ng-content></ng-content>\n    </button>\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}::ng-deep .air-datepicker{z-index:99999}::ng-deep .air-datepicker.-inline-{z-index:unset}::ng-deep .air-datepicker .air-datepicker--pointer{display:none}::ng-deep .air-datepicker .air-datepicker-time{display:block}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--current{display:none}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders{display:flex;justify-content:center;padding-top:.25rem;gap:1rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row{width:100%;position:relative}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row:first-child:after{content:\":\";display:inline;font-size:1rem;position:absolute;right:-.65rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row input{width:100%;text-align:center;padding:0;padding-left:1rem;border-color:var(--bs-border-color)}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row .form-control:focus{box-shadow:unset!important}::ng-deep .air-datepicker.-inline-.-only-timepicker-{border:0;padding:0!important}::ng-deep .air-datepicker.-inline-.-only-timepicker- .air-datepicker--time{border:0;padding:0!important}::ng-deep .air-datepicker.-inline-.-only-timepicker- .air-datepicker-time{padding:0!important}:host{display:block}:host .quang-date-inline-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}:host .input-date-container{display:flex}:host input{flex:1}:host input.with-button-calendar{border-top-right-radius:0;border-bottom-right-radius:0}:host input:disabled{border-radius:var(--bs-border-radius)}:host .btn-outline-calendar{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}:host .border-danger{border-color:var(--bs-form-invalid-border-color)}:host .border-success{border-color:var(--bs-form-valid-border-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], activeLanguageOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeLanguageOverride", required: false }] }], timepicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "timepicker", required: false }] }], invalidDateMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidDateMessage", required: false }] }], showOnlyTimepicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnlyTimepicker", required: false }] }], minHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHour", required: false }] }], maxHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHour", required: false }] }], minMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMinute", required: false }] }], maxMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxMinute", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], showInline: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInline", required: false }] }], calendarClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarClasses", required: false }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }], datepickerOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "datepickerOptions", required: false }] }], _inputForDate: [{ type: i0.ViewChild, args: ['inputForDate', { isSignal: true }] }], contentTemplate: [{ type: i0.ViewChild, args: ['calendarButton', { isSignal: true }] }], multipleDatesSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleDatesSeparator", required: false }] }], rangeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSelection", required: false }] }], searchTextDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTextDebounce", required: false }] }] } });
 
 /**