@tekus/design-system 5.30.0 → 5.32.0

package/fesm2022/tekus-design-system-components-date-picker.mjs

@@ -1,299 +1,382 @@
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, input, model, output, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { inject, DestroyRef, input, model, output, signal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { switchMap } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { NgControl, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
 import * as i3 from 'primeng/floatlabel';
 import { FloatLabelModule } from 'primeng/floatlabel';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { faCalendarDay, faClock } from '@fortawesome/pro-regular-svg-icons';
+import { IconComponent } from '@tekus/design-system/components/icon';
 
+let _datePickerUid = 0;
 /**
- * @component DatePickerComponent
  * @description
- * A wrapper around PrimeNG's DatePicker component with support for single-date,
- * range selection, and time-only modes. It uses Angular Signals for reactivity
- * and strictly implements the ControlValueAccessor interface via NgControl.
+ * Wrapper around PrimeNG's DatePicker with support for single-date, date-range,
+ * and combined date+time modes. Implements `ControlValueAccessor` and `Validator`
+ * so it works transparently with reactive forms (`[formControl]`, `[control]`)
+ * and template-driven forms (`[(ngModel)]`). A signal model (`[(modelValue)]`)
+ * is also available for standalone usage without Angular forms.
+ *
+ * For time-only selection use `tk-time-picker` instead.
+ *
+ * @example
+ * <!-- Date range with reactive form -->
+ * <tk-date-picker
+ *   [control]="form.controls.stayRange"
+ *   selectionMode="range"
+ *   labelText="Stay dates"
+ *   [showClear]="true">
+ * </tk-date-picker>
+ *
+ * @example
+ * <!-- Combined date + time -->
+ * <tk-date-picker
+ *   [showTime]="true"
+ *   hourFormat="24"
+ *   [(modelValue)]="appointmentDateTime"
+ *   labelText="Appointment">
+ * </tk-date-picker>
  */
 class DatePickerComponent {
     constructor() {
-        /** Internal references and injections */
+        /** @internal */
         this.ngControl = inject(NgControl, { self: true, optional: true });
+        /** @internal */
         this.destroyRef = inject(DestroyRef);
         /**
-         * @property {InputSignal<'date' | 'time' | 'both'>} variant
          * @description
-         * Defines the visual and functional mode:
-         * - `'date'`: standard date/range picker
-         * - `'time'`: time-only picker
-         * - `'both'`: date and time picker
-         * @default 'date'
+         * Marks the field as required. When `true`, the component returns a
+         * `{ required: true }` validation error when no date is selected.
+         *
+         * @default false
+         *
+         * @example
+         * <tk-date-picker [required]="true" errorMessage="Date is required" />
          */
-        this.variant = input('date', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<'single' | 'range'>} selectionMode
          * @description
-         * Defines how the datepicker behaves:
-         * - `'single'`: select one date
-         * - `'range'`: select a pair of dates [start, end]
+         * Selection behaviour for the date calendar.
+         * - `'single'` — one date.
+         * - `'range'` — a pair of dates `[start, end]`.
+         *
          * @default 'range'
+         *
+         * @example
+         * <tk-date-picker selectionMode="single" />
          */
         this.selectionMode = input('range', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<boolean>} readonlyInput
-         * @description
-         * Disables manual typing in the input and forces the user to select via the calendar.
-         * @default true
-         */
-        this.readonlyInput = input(true, ...(ngDevMode ? [{ debugName: "readonlyInput" }] : /* istanbul ignore next */ []));
-        /**
-         * @property {InputSignal<boolean>} showClear
          * @description
-         * Displays a clear button that resets the datepicker value.
+         * Shows a clear (×) button that resets the value to `null`.
+         *
          * @default true
+         *
+         * @example
+         * <tk-date-picker [showClear]="false" />
          */
         this.showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<boolean>} showIcon
          * @description
-         * Shows the calendar or clock icon inside the input.
+         * Shows the calendar icon inside the input field.
+         * When `false`, the overlay can only be opened by clicking the input itself.
+         *
          * @default true
+         *
+         * @example
+         * <tk-date-picker [showIcon]="false" />
          */
         this.showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<string>} dateFormat
          * @description
-         * Format used by PrimeNG for displaying dates.
+         * Date display format forwarded to PrimeNG (e.g. `'dd/mm/yy'`, `'yy-mm-dd'`).
+         *
          * @default 'dd/mm/yy'
+         *
+         * @example
+         * <tk-date-picker dateFormat="yy-mm-dd" />
          */
         this.dateFormat = input('dd/mm/yy', ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<string>} timeFormat
-         * @description
-         * Format used by PrimeNG for displaying times.
-         * @default 'HH:mm'
-         */
-        this.timeFormat = input('HH:mm', ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
-        /**
-         * @property {InputSignal<number>} stepHour
-         * @description
-         * Hours to skip when clicking up/down.
+         * @description Hour increment/decrement step for the time spinner (used when `showTime=true`).
          * @default 1
          */
         this.stepHour = input(1, ...(ngDevMode ? [{ debugName: "stepHour" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<number>} stepMinute
-         * @description
-         * Minutes to skip when clicking up/down.
+         * @description Minute increment/decrement step for the time spinner (used when `showTime=true`).
          * @default 1
          */
         this.stepMinute = input(1, ...(ngDevMode ? [{ debugName: "stepMinute" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<number>} stepSecond
-         * @description
-         * Seconds to skip when clicking up/down.
+         * @description Second increment/decrement step for the time spinner (used when `showTime=true`).
          * @default 1
          */
         this.stepSecond = input(1, ...(ngDevMode ? [{ debugName: "stepSecond" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<boolean>} showSeconds
          * @description
-         * Whether to show seconds in the time picker.
-         * Only applicable when hourFormat is '24'.
+         * Whether to show the seconds segment in the time spinner.
+         * Only active when `showTime=true` and `hourFormat="24"`.
+         *
          * @default false
          */
         this.showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<boolean>} disabled
          * @description
-         * Whether the component is disabled.
+         * Disables the entire component. Can also be controlled through the bound
+         * form control via `control.disable()` / `control.enable()`.
+         *
          * @default false
+         *
+         * @example
+         * <tk-date-picker [disabled]="isReadonly()" />
          */
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<boolean>} inline
          * @description
-         * Whether to display the datepicker inline.
+         * Renders the calendar inline (always visible) instead of in a dropdown overlay.
+         *
          * @default false
+         *
+         * @example
+         * <tk-date-picker [inline]="true" selectionMode="single" />
          */
         this.inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<boolean>} showTime
          * @description
-         * Whether to show the time picker along with the date picker.
+         * Adds a time spinner alongside the date calendar.
+         *
          * @default false
+         *
+         * @example
+         * <tk-date-picker [showTime]="true" hourFormat="24" />
          */
         this.showTime = input(false, ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<'12' | '24'>} hourFormat
          * @description
-         * Format of the hours: '12' or '24'.
+         * Hour format for the time spinner (only relevant when `showTime=true`).
+         * - `'24'` — 0–23 hours.
+         * - `'12'` — 1–12 hours with AM/PM toggle.
+         *
          * @default '24'
+         *
+         * @example
+         * <tk-date-picker [showTime]="true" hourFormat="12" />
          */
         this.hourFormat = input('24', ...(ngDevMode ? [{ debugName: "hourFormat" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<string | HTMLElement | null | undefined>} appendTo
          * @description
-         * Target element to attach the overlay to.
-         * @default 'null'
+         * Target element or CSS selector to which the overlay panel is appended.
+         * Use `'body'` to escape `overflow:hidden` parent containers (e.g. modals).
+         *
+         * @default 'body'
+         *
+         * @example
+         * <tk-date-picker appendTo="body" />
          */
         this.appendTo = input('body', ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<number>} baseZIndex
-         * @description
-         * Base z-index value for the overlay.
+         * @description Base z-index applied to the overlay panel.
          * @default 10000
          */
         this.baseZIndex = input(10000, ...(ngDevMode ? [{ debugName: "baseZIndex" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<Date | null>} maxDate
          * @description
-         * Maximum selectable date.
+         * Latest selectable date. Enforced both by PrimeNG (disables calendar days)
+         * and by Angular form validation.
+         *
          * @default null
+         *
+         * @example
+         * <tk-date-picker [maxDate]="today" errorMessage="Date cannot be in the future" />
          */
         this.maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<Date | null>} minDate
          * @description
-         * Minimum selectable date.
+         * Earliest selectable date. Enforced both by PrimeNG (disables calendar days)
+         * and by Angular form validation.
+         *
          * @default null
+         *
+         * @example
+         * <tk-date-picker [minDate]="today" errorMessage="Date must be today or later" />
          */
         this.minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<string>} labelText
-         * @description
-         * Label shown by the float-label wrapper.
+         * @description Floating label text shown above the input field.
+         * @default 'Select a date'
+         * @example
+         * <tk-date-picker labelText="Check-in date" />
          */
         this.labelText = input('Select a date', ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
         /**
-         * @property {InputSignal<FormControl>} control
          * @description
-         * External FormControl used to read/set the datepicker value.
-         * If not provided, an internal FormControl is created.
+         * Validation error message rendered beneath the field when the bound control
+         * is invalid and the field has been dirtied or touched.
+         *
+         * @default null
+         *
+         * @example
+         * <tk-date-picker [minDate]="minDate" errorMessage="Date is required" />
+         */
+        this.errorMessage = input(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        /**
+         * @description
+         * Optional external `FormControl` to bind when not using the standard
+         * `formControl` / `formControlName` / `ngModel` directives.
+         *
+         * @example
+         * <tk-date-picker [control]="form.controls.startDate" />
          */
         this.control = input(undefined, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
         /**
-         * @property {ModelSignal<DateValue>} modelValue
          * @description
-         * The value of the datepicker model. Supports two-way binding.
+         * Two-way signal binding for the selected value.
+         * Accepts `Date` (single), `[Date, Date]` (range), or `null` (cleared).
+         *
+         * @example
+         * <tk-date-picker [(modelValue)]="selectedDate" />
          */
         this.modelValue = model(null, ...(ngDevMode ? [{ debugName: "modelValue" }] : /* istanbul ignore next */ []));
         /**
-         * @property {OutputRef<DateValue>} handleSelect
          * @description
-         * Emitted when a value is selected.
+         * Emits the selected value whenever a complete selection is made.
+         * In range mode, fires only when both start and end dates are chosen.
+         *
+         * @example
+         * <tk-date-picker (handleSelect)="onDateSelected($event)" />
          */
         this.handleSelect = output();
         /**
-         * @property {OutputRef<void>} handleClear
-         * @description
-         * Emitted when the value is cleared.
+         * @description Emits when the user clears the field via the clear button.
+         * @example
+         * <tk-date-picker (handleClear)="onCleared()" />
          */
         this.handleClear = output();
-        /**
-         * @property {WritableSignal<boolean>} disabledStatus
-         * @description
-         * Internal signal to track disabled state.
-         */
+        /** @internal */
         this.disabledStatus = signal(false, ...(ngDevMode ? [{ debugName: "disabledStatus" }] : /* istanbul ignore next */ []));
-        /**
-         * @property {Signal<boolean>} effectiveDisabled
-         * @description
-         * Returns true if either the [disabled] input is true OR the FormControl is disabled.
-         */
+        /** @internal */
         this.effectiveDisabled = computed(() => this.disabled() || this.disabledStatus(), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
-        /** Computed properties */
-        /**
-         * @property {Signal<'single' | 'range'>} effectiveSelectionMode
-         * @description
-         * Returns 'single' automatically if variant is 'time', otherwise returns the user-provided selectionMode.
-         */
-        this.effectiveSelectionMode = computed(() => {
-            return this.variant() === 'time' ? 'single' : this.selectionMode();
-        }, ...(ngDevMode ? [{ debugName: "effectiveSelectionMode" }] : /* istanbul ignore next */ []));
-        /**
-         * @property {Signal<string>} effectiveDateFormat
-         * @description
-         * Returns the user-provided dateFormat or timeFormat based on the variant.
-         */
-        this.effectiveDateFormat = computed(() => {
-            return this.variant() === 'time' ? this.timeFormat() : this.dateFormat();
-        }, ...(ngDevMode ? [{ debugName: "effectiveDateFormat" }] : /* istanbul ignore next */ []));
-        /**
-         * @property {Signal<boolean>} effectiveShowSeconds
-         * @description
-         * Returns whether seconds should be shown, restricted to 24h format.
-         */
-        this.effectiveShowSeconds = computed(() => {
-            return ((this.effectiveShowTime() || this.variant() === 'time') &&
-                this.hourFormat() === '24' &&
-                this.showSeconds());
-        }, ...(ngDevMode ? [{ debugName: "effectiveShowSeconds" }] : /* istanbul ignore next */ []));
-        /**
-         * @property {Signal<boolean>} effectiveShowTime
-         * @description
-         * Returns whether the time picker should be shown.
-         */
-        this.effectiveShowTime = computed(() => {
-            return this.variant() === 'both' || this.showTime();
-        }, ...(ngDevMode ? [{ debugName: "effectiveShowTime" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.effectiveMinDate = computed(() => this.minDate(), ...(ngDevMode ? [{ debugName: "effectiveMinDate" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.effectiveMaxDate = computed(() => this.maxDate(), ...(ngDevMode ? [{ debugName: "effectiveMaxDate" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.effectiveSelectionMode = computed(() => this.selectionMode(), ...(ngDevMode ? [{ debugName: "effectiveSelectionMode" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.effectiveHourFormat = computed(() => this.hourFormat(), ...(ngDevMode ? [{ debugName: "effectiveHourFormat" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.effectiveDateFormat = computed(() => this.dateFormat(), ...(ngDevMode ? [{ debugName: "effectiveDateFormat" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.effectiveShowSeconds = computed(() => this.showTime() && this.hourFormat() === '24' && this.showSeconds(), ...(ngDevMode ? [{ debugName: "effectiveShowSeconds" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.effectiveShowTime = computed(() => this.showTime(), ...(ngDevMode ? [{ debugName: "effectiveShowTime" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.internalControl = new FormControl(null);
         /**
-         * @property {Signal<FormControl>} effectiveControl
          * @description
-         * Returns the external FormControl from NgControl or a local fallback.
+         * Memoised signal returning the active `FormControl` in priority order:
+         * `NgControl` (reactive forms) → `control` input → internal fallback control.
          */
-        this.internalControl = new FormControl(null);
-        /** Icons */
-        this.faCalendarDay = faCalendarDay;
-        this.faClock = faClock;
-        /** CVA Logic */
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        this.lastValue = null;
-        this.isWriting = false;
+        this.effectiveControl = computed(() => this.ngControl?.control ?? this.control() ?? this.internalControl, ...(ngDevMode ? [{ debugName: "effectiveControl" }] : /* istanbul ignore next */ []));
+        /** @internal Unique DOM id used for `inputId` / `for` binding on every instance. */
+        this.uid = `tk-datepicker-${++_datePickerUid}`;
+        /** @internal */ this.onChange = () => { };
+        /** @internal */ this.onTouched = () => { };
+        /** @internal */ this.onValidatorChange = () => { };
+        /** @internal */ this.lastValue = null;
+        /** @internal */ this.boundValidate = this.validate.bind(this);
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
+        toObservable(this.effectiveControl)
+            .pipe(switchMap(ctrl => {
+            this.disabledStatus.set(ctrl.disabled);
+            return ctrl.statusChanges;
+        }), takeUntilDestroyed())
+            .subscribe(() => {
+            this.disabledStatus.set(this.effectiveControl().disabled);
+        });
+        effect(() => {
+            this.required();
+            this.minDate();
+            this.maxDate();
+            untracked(() => {
+                this.onValidatorChange();
+                this.effectiveControl().updateValueAndValidity({ emitEvent: false });
+            });
+        });
     }
-    get effectiveControl() {
-        return (this.ngControl?.control ||
-            this.control() ||
-            this.internalControl);
-    }
+    /** @inheritdoc */
     ngOnInit() {
-        const control = this.effectiveControl;
-        // Synchronize initial disabled state
+        const control = this.effectiveControl();
         this.disabledStatus.set(control.disabled);
-        // Watch for status changes (to support [control].disable() etc. from outside)
-        control.statusChanges
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.disabledStatus.set(control.disabled);
-        });
-        // Synchronize signal model with initial control value
         const initialValue = control.value;
         if (initialValue !== null && initialValue !== undefined) {
             this.modelValue.set(initialValue);
             this.lastValue = initialValue;
         }
+        if (!this.ngControl) {
+            const currentModel = this.modelValue();
+            if (currentModel !== null && currentModel !== undefined) {
+                this.handleSelect.emit(currentModel);
+                this.onChange(currentModel);
+            }
+        }
+        control.addValidators(this.boundValidate);
+        control.updateValueAndValidity({ emitEvent: false });
+        this.destroyRef.onDestroy(() => {
+            control.removeValidators(this.boundValidate);
+        });
     }
+    /** @inheritdoc */
     writeValue(value) {
-        this.isWriting = true;
         this.modelValue.set(value);
         this.lastValue = value;
-        this.isWriting = false;
     }
+    /** @inheritdoc */
     registerOnChange(fn) {
         this.onChange = fn;
     }
+    /** @inheritdoc */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /** @inheritdoc */
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    /** @inheritdoc */
+    validate() {
+        const value = this.modelValue();
+        if (!value)
+            return this.required() ? { required: true } : null;
+        const min = this.minDate();
+        const max = this.maxDate();
+        if (value instanceof Date)
+            return this.validateBounds(value, min, max);
+        if (!Array.isArray(value))
+            return null;
+        const [start, end] = value;
+        if (start instanceof Date) {
+            const err = this.validateBounds(start, min, max);
+            if (err)
+                return err;
+        }
+        return end instanceof Date ? this.validateBounds(end, min, max) : null;
+    }
+    validateBounds(date, min, max) {
+        if (min && date < min)
+            return { minDate: { min, actual: date } };
+        if (max && date > max)
+            return { maxDate: { max, actual: date } };
+        return null;
+    }
+    /** @inheritdoc */
     setDisabledState(isDisabled) {
         this.disabledStatus.set(isDisabled);
-        const control = this.effectiveControl;
+        const control = this.effectiveControl();
         if (isDisabled && control.enabled) {
             control.disable({ emitEvent: false });
         }
@@ -301,58 +384,57 @@ class DatePickerComponent {
             control.enable({ emitEvent: false });
         }
     }
-    /**
-     * @method onModelChange
-     * @description
-     * Called when the PrimeNG DatePicker template updates the value.
-     */
+    /** @description Central change handler for PrimeNG's `ngModelChange`. */
     onModelChange(value) {
-        if (this.isWriting) {
-            return;
-        }
         let finalValue = value;
-        // Time cascading logic (single mode only)
-        if (this.selectionMode() === 'single' &&
+        if (this.effectiveSelectionMode() === 'single' &&
             finalValue instanceof Date &&
-            this.lastValue instanceof Date) {
+            this.lastValue instanceof Date &&
+            finalValue.toDateString() === this.lastValue.toDateString()) {
             finalValue = this.applyTimeCascading(this.lastValue, finalValue);
         }
         this.lastValue = finalValue;
         this.modelValue.set(finalValue);
         this.onChange(finalValue);
-        this.effectiveControl.setValue(finalValue, { emitEvent: false });
-        this.effectiveControl.markAsDirty();
+        this.effectiveControl().setValue(finalValue, { emitEvent: false });
+        if (finalValue !== null) {
+            this.effectiveControl().markAsDirty();
+        }
         if (finalValue === null) {
             this.handleClear.emit();
         }
-        else if (this.selectionMode() === 'range') {
-            if (Array.isArray(finalValue)) {
-                const [start, end] = finalValue;
-                if (start instanceof Date && end instanceof Date) {
-                    this.handleSelect.emit(finalValue);
-                }
-            }
-        }
-        else if (finalValue instanceof Date) {
+        else if (finalValue instanceof Date ||
+            (Array.isArray(finalValue) && finalValue[0] instanceof Date && finalValue[1] instanceof Date)) {
             this.handleSelect.emit(finalValue);
         }
     }
+    /** @description Marks the control as touched when the user leaves the field. */
+    onBlur() {
+        this.onTouched();
+        this.effectiveControl().markAsTouched();
+    }
+    /**
+     * @description Programmatically clears the selected value, resetting it to `null`.
+     *
+     * @example
+     * <tk-date-picker #picker />
+     * <button (click)="picker.clear()">Reset</button>
+     */
+    clear() {
+        this.onModelChange(null);
+    }
     /**
-     * @method applyTimeCascading
-     * @private
      * @description
-     * Adjusts the date when minutes or seconds wrap around.
+     * Adjusts hours or minutes when the spinner rolls over a unit boundary.
      */
     applyTimeCascading(prev, curr) {
         const updated = new Date(curr);
-        // Cascade seconds to minutes
         if (prev.getSeconds() === 59 && updated.getSeconds() === 0) {
             updated.setMinutes(updated.getMinutes() + 1);
         }
         else if (prev.getSeconds() === 0 && updated.getSeconds() === 59) {
             updated.setMinutes(updated.getMinutes() - 1);
         }
-        // Cascade minutes to hours
         if (prev.getMinutes() === 59 && updated.getMinutes() === 0) {
             updated.setHours(updated.getHours() + 1);
         }
@@ -361,25 +443,8 @@ class DatePickerComponent {
         }
         return updated;
     }
-    /**
-     * @method onBlur
-     * @description
-     * Triggered when the component loses focus.
-     */
-    onBlur() {
-        this.onTouched();
-        this.effectiveControl.markAsTouched();
-    }
-    /**
-     * @method clear
-     * @description
-     * Programmatically clears the value.
-     */
-    clear() {
-        this.onModelChange(null);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DatePickerComponent, isStandalone: true, selector: "tk-date-picker", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: true, isRequired: false, transformFunction: null }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: true, isRequired: false, transformFunction: null }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelValue: "modelValueChange", handleSelect: "handleSelect", handleClear: "handleClear" }, ngImport: i0, template: "<div class=\"datepicker-container\" [class.inline]=\"inline()\">\n  @if (inline()) {\n    <p-datepicker\n      inputId=\"datepicker\"\n      [ngModel]=\"modelValue()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      (onBlur)=\"onBlur()\"\n      [selectionMode]=\"effectiveSelectionMode()\"\n      [readonlyInput]=\"readonlyInput()\"\n      [showClear]=\"showClear()\"\n      [showIcon]=\"showIcon()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabled]=\"effectiveDisabled()\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"variant() === 'time'\"\n      [inline]=\"true\"\n      [showTime]=\"effectiveShowTime()\"\n      [hourFormat]=\"hourFormat()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"effectiveShowSeconds()\">\n    </p-datepicker>\n  } @else {\n    <p-floatlabel>\n      <p-datepicker\n        inputId=\"datepicker\"\n        iconDisplay=\"input\"\n        [ngModel]=\"modelValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (onBlur)=\"onBlur()\"\n        [selectionMode]=\"effectiveSelectionMode()\"\n        [readonlyInput]=\"readonlyInput()\"\n        [showClear]=\"showClear()\"\n        [showIcon]=\"showIcon()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"effectiveDisabled()\"\n        [dateFormat]=\"effectiveDateFormat()\"\n        [timeOnly]=\"variant() === 'time'\"\n        [showTime]=\"effectiveShowTime()\"\n        [hourFormat]=\"hourFormat()\"\n        [appendTo]=\"appendTo()\"\n        [baseZIndex]=\"baseZIndex()\"\n        [stepHour]=\"stepHour()\"\n        [stepMinute]=\"stepMinute()\"\n        [stepSecond]=\"stepSecond()\"\n        [showSeconds]=\"effectiveShowSeconds()\">\n        <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n          <fa-icon\n            tabindex=\"0\"\n            [icon]=\"variant() === 'time' ? faClock : faCalendarDay\"\n            (keydown.enter)=\"clickCallBack($event)\"\n            (keydown.space)=\"clickCallBack($event)\"\n            (click)=\"clickCallBack($event)\">\n          </fa-icon>\n        </ng-template>\n      </p-datepicker>\n\n      <label for=\"datepicker\">{{ labelText() }}</label>\n    </p-floatlabel>\n  }\n</div>\n", styles: [":host ::ng-deep .p-datepicker{width:100%}:host ::ng-deep .p-datepicker-input{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-datepicker-input:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-datepicker-decade{color:var(--tk-color-text-default, #121214)}:host ::ng-deep .p-datepicker-clear-icon{color:var(--tk-surface-700, #424243);inset-inline-end:2.5rem!important}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-datepicker-day-selected-range{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .p-datepicker-panel{min-width:0!important;max-width:300px!important;width:100%!important}.datepicker-container{margin-top:var(--tk-spacing-base-200, 2rem)}.datepicker-container.inline{margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DatePickerComponent, isStandalone: true, selector: "tk-date-picker", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: true, isRequired: false, transformFunction: null }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: true, isRequired: false, transformFunction: null }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelValue: "modelValueChange", handleSelect: "handleSelect", handleClear: "handleClear" }, ngImport: i0, template: "<div class=\"datepicker-container\" [class.inline]=\"inline()\">\n  @if (inline()) {\n    <p-datepicker\n      [inputId]=\"uid\"\n      [ngModel]=\"modelValue()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      (onBlur)=\"onBlur()\"\n      [selectionMode]=\"effectiveSelectionMode()\"\n      [readonlyInput]=\"true\"\n      [showClear]=\"showClear()\"\n      [showIcon]=\"showIcon()\"\n      [minDate]=\"effectiveMinDate()\"\n      [maxDate]=\"effectiveMaxDate()\"\n      [disabled]=\"effectiveDisabled()\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"false\"\n      [inline]=\"true\"\n      [showTime]=\"effectiveShowTime()\"\n      [hourFormat]=\"effectiveHourFormat()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"effectiveShowSeconds()\">\n    </p-datepicker>\n  } @else {\n    <p-floatlabel>\n      <p-datepicker\n        [inputId]=\"uid\"\n        iconDisplay=\"input\"\n        [ngModel]=\"modelValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (onBlur)=\"onBlur()\"\n        [selectionMode]=\"effectiveSelectionMode()\"\n        [readonlyInput]=\"true\"\n        [showClear]=\"showClear()\"\n        [showIcon]=\"showIcon()\"\n        [minDate]=\"effectiveMinDate()\"\n        [maxDate]=\"effectiveMaxDate()\"\n        [disabled]=\"effectiveDisabled()\"\n        [dateFormat]=\"effectiveDateFormat()\"\n        [timeOnly]=\"false\"\n        [showTime]=\"effectiveShowTime()\"\n        [hourFormat]=\"effectiveHourFormat()\"\n        [appendTo]=\"appendTo()\"\n        [baseZIndex]=\"baseZIndex()\"\n        [stepHour]=\"stepHour()\"\n        [stepMinute]=\"stepMinute()\"\n        [stepSecond]=\"stepSecond()\"\n        [showSeconds]=\"effectiveShowSeconds()\">\n        <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n          <tk-icon\n            icon=\"calendar-day\"\n            tabindex=\"0\"\n            (keydown.enter)=\"clickCallBack($event)\"\n            (keydown.space)=\"clickCallBack($event)\"\n            (click)=\"clickCallBack($event)\">\n          </tk-icon>\n        </ng-template>\n      </p-datepicker>\n      <label [for]=\"uid\">{{ labelText() }}</label>\n    </p-floatlabel>\n  }\n  @if (errorMessage() && effectiveControl().invalid && (effectiveControl().dirty || effectiveControl().touched)) {\n    <small class=\"p-error\">{{ errorMessage() }}</small>\n  }\n</div>\n", styles: [":host ::ng-deep .p-datepicker{width:100%}:host ::ng-deep .p-datepicker-input{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-datepicker-input:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-datepicker.p-disabled{opacity:1!important}:host ::ng-deep .p-datepicker.p-disabled .p-datepicker-input{background-color:var(--tk-color-base-surface-200, #e4e4e4)!important;color:var(--tk-color-base-surface-500, #8a8a8b);border-bottom-color:var(--tk-color-base-surface-300, #d2d2d2);cursor:not-allowed}:host ::ng-deep .p-datepicker.p-disabled .p-datepicker-input-icon-container{color:var(--tk-color-base-surface-500, #8a8a8b);pointer-events:none}:host ::ng-deep .p-floatlabel:has(.p-disabled) label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-datepicker-decade{color:var(--tk-color-text-default, #121214)}:host ::ng-deep .p-datepicker-clear-icon{color:var(--tk-surface-700, #424243);inset-inline-end:2.5rem!important}:host ::ng-deep .p-floatlabel{position:relative}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-datepicker-day-selected-range{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .p-datepicker-panel{min-width:0!important;max-width:300px!important;width:100%!important}:host ::ng-deep .p-inputtext:disabled{background:var(--tk-color-base-surface-200, #e4e4e4)!important}.datepicker-container{margin-top:var(--tk-spacing-base-200, 2rem)}.datepicker-container.inline{margin-top:0}small.p-error{display:block;margin-top:var(--tk-spacing-base-25, .25rem);color:var(--tk-color-base-red-700, #cf2604);font-size:var(--tk-font-size-xs, .75rem)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -388,9 +453,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                         ReactiveFormsModule,
                         DatePickerModule,
                         FloatLabelModule,
-                        FaIconComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"datepicker-container\" [class.inline]=\"inline()\">\n  @if (inline()) {\n    <p-datepicker\n      inputId=\"datepicker\"\n      [ngModel]=\"modelValue()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      (onBlur)=\"onBlur()\"\n      [selectionMode]=\"effectiveSelectionMode()\"\n      [readonlyInput]=\"readonlyInput()\"\n      [showClear]=\"showClear()\"\n      [showIcon]=\"showIcon()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabled]=\"effectiveDisabled()\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"variant() === 'time'\"\n      [inline]=\"true\"\n      [showTime]=\"effectiveShowTime()\"\n      [hourFormat]=\"hourFormat()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"effectiveShowSeconds()\">\n    </p-datepicker>\n  } @else {\n    <p-floatlabel>\n      <p-datepicker\n        inputId=\"datepicker\"\n        iconDisplay=\"input\"\n        [ngModel]=\"modelValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (onBlur)=\"onBlur()\"\n        [selectionMode]=\"effectiveSelectionMode()\"\n        [readonlyInput]=\"readonlyInput()\"\n        [showClear]=\"showClear()\"\n        [showIcon]=\"showIcon()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"effectiveDisabled()\"\n        [dateFormat]=\"effectiveDateFormat()\"\n        [timeOnly]=\"variant() === 'time'\"\n        [showTime]=\"effectiveShowTime()\"\n        [hourFormat]=\"hourFormat()\"\n        [appendTo]=\"appendTo()\"\n        [baseZIndex]=\"baseZIndex()\"\n        [stepHour]=\"stepHour()\"\n        [stepMinute]=\"stepMinute()\"\n        [stepSecond]=\"stepSecond()\"\n        [showSeconds]=\"effectiveShowSeconds()\">\n        <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n          <fa-icon\n            tabindex=\"0\"\n            [icon]=\"variant() === 'time' ? faClock : faCalendarDay\"\n            (keydown.enter)=\"clickCallBack($event)\"\n            (keydown.space)=\"clickCallBack($event)\"\n            (click)=\"clickCallBack($event)\">\n          </fa-icon>\n        </ng-template>\n      </p-datepicker>\n\n      <label for=\"datepicker\">{{ labelText() }}</label>\n    </p-floatlabel>\n  }\n</div>\n", styles: [":host ::ng-deep .p-datepicker{width:100%}:host ::ng-deep .p-datepicker-input{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-datepicker-input:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-datepicker-decade{color:var(--tk-color-text-default, #121214)}:host ::ng-deep .p-datepicker-clear-icon{color:var(--tk-surface-700, #424243);inset-inline-end:2.5rem!important}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-datepicker-day-selected-range{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .p-datepicker-panel{min-width:0!important;max-width:300px!important;width:100%!important}.datepicker-container{margin-top:var(--tk-spacing-base-200, 2rem)}.datepicker-container.inline{margin-top:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], stepHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepHour", required: false }] }], stepMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinute", required: false }] }], stepSecond: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepSecond", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelValue", required: false }] }, { type: i0.Output, args: ["modelValueChange"] }], handleSelect: [{ type: i0.Output, args: ["handleSelect"] }], handleClear: [{ type: i0.Output, args: ["handleClear"] }] } });
+                        IconComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"datepicker-container\" [class.inline]=\"inline()\">\n  @if (inline()) {\n    <p-datepicker\n      [inputId]=\"uid\"\n      [ngModel]=\"modelValue()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      (onBlur)=\"onBlur()\"\n      [selectionMode]=\"effectiveSelectionMode()\"\n      [readonlyInput]=\"true\"\n      [showClear]=\"showClear()\"\n      [showIcon]=\"showIcon()\"\n      [minDate]=\"effectiveMinDate()\"\n      [maxDate]=\"effectiveMaxDate()\"\n      [disabled]=\"effectiveDisabled()\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"false\"\n      [inline]=\"true\"\n      [showTime]=\"effectiveShowTime()\"\n      [hourFormat]=\"effectiveHourFormat()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"effectiveShowSeconds()\">\n    </p-datepicker>\n  } @else {\n    <p-floatlabel>\n      <p-datepicker\n        [inputId]=\"uid\"\n        iconDisplay=\"input\"\n        [ngModel]=\"modelValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (onBlur)=\"onBlur()\"\n        [selectionMode]=\"effectiveSelectionMode()\"\n        [readonlyInput]=\"true\"\n        [showClear]=\"showClear()\"\n        [showIcon]=\"showIcon()\"\n        [minDate]=\"effectiveMinDate()\"\n        [maxDate]=\"effectiveMaxDate()\"\n        [disabled]=\"effectiveDisabled()\"\n        [dateFormat]=\"effectiveDateFormat()\"\n        [timeOnly]=\"false\"\n        [showTime]=\"effectiveShowTime()\"\n        [hourFormat]=\"effectiveHourFormat()\"\n        [appendTo]=\"appendTo()\"\n        [baseZIndex]=\"baseZIndex()\"\n        [stepHour]=\"stepHour()\"\n        [stepMinute]=\"stepMinute()\"\n        [stepSecond]=\"stepSecond()\"\n        [showSeconds]=\"effectiveShowSeconds()\">\n        <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n          <tk-icon\n            icon=\"calendar-day\"\n            tabindex=\"0\"\n            (keydown.enter)=\"clickCallBack($event)\"\n            (keydown.space)=\"clickCallBack($event)\"\n            (click)=\"clickCallBack($event)\">\n          </tk-icon>\n        </ng-template>\n      </p-datepicker>\n      <label [for]=\"uid\">{{ labelText() }}</label>\n    </p-floatlabel>\n  }\n  @if (errorMessage() && effectiveControl().invalid && (effectiveControl().dirty || effectiveControl().touched)) {\n    <small class=\"p-error\">{{ errorMessage() }}</small>\n  }\n</div>\n", styles: [":host ::ng-deep .p-datepicker{width:100%}:host ::ng-deep .p-datepicker-input{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-datepicker-input:focus{border-color:var(--tk-color-primary-default, #16006f)}:host ::ng-deep .p-datepicker.p-disabled{opacity:1!important}:host ::ng-deep .p-datepicker.p-disabled .p-datepicker-input{background-color:var(--tk-color-base-surface-200, #e4e4e4)!important;color:var(--tk-color-base-surface-500, #8a8a8b);border-bottom-color:var(--tk-color-base-surface-300, #d2d2d2);cursor:not-allowed}:host ::ng-deep .p-datepicker.p-disabled .p-datepicker-input-icon-container{color:var(--tk-color-base-surface-500, #8a8a8b);pointer-events:none}:host ::ng-deep .p-floatlabel:has(.p-disabled) label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-datepicker-decade{color:var(--tk-color-text-default, #121214)}:host ::ng-deep .p-datepicker-clear-icon{color:var(--tk-surface-700, #424243);inset-inline-end:2.5rem!important}:host ::ng-deep .p-floatlabel{position:relative}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-datepicker-day-selected-range{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .p-datepicker-panel{min-width:0!important;max-width:300px!important;width:100%!important}:host ::ng-deep .p-inputtext:disabled{background:var(--tk-color-base-surface-200, #e4e4e4)!important}.datepicker-container{margin-top:var(--tk-spacing-base-200, 2rem)}.datepicker-container.inline{margin-top:0}small.p-error{display:block;margin-top:var(--tk-spacing-base-25, .25rem);color:var(--tk-color-base-red-700, #cf2604);font-size:var(--tk-font-size-xs, .75rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], stepHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepHour", required: false }] }], stepMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinute", required: false }] }], stepSecond: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepSecond", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelValue", required: false }] }, { type: i0.Output, args: ["modelValueChange"] }], handleSelect: [{ type: i0.Output, args: ["handleSelect"] }], handleClear: [{ type: i0.Output, args: ["handleClear"] }] } });
 
 /**
  * Generated bundle index. Do not edit.