@tekus/design-system 5.20.0 → 5.22.0

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

@@ -1,238 +1,261 @@
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, Output, Input, Component } from '@angular/core';
+import { inject, input, model, output, computed, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgControl, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Subscription } from 'rxjs';
 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 } from '@fortawesome/pro-regular-svg-icons';
+import { faCalendarDay, faClock } from '@fortawesome/pro-regular-svg-icons';
 
-const TK_DATE_PICKER_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => DatePickerComponent),
-    multi: true,
-};
 /**
  * @component DatePickerComponent
  * @description
- * A wrapper around PrimeNG's DatePicker component with support for single-date
- * and range selection modes. It is compatible with both Reactive Forms (formControlName, [control])
- * and Template-Driven Forms ([(ngModel)]).
- *
- * The component emits:
- * - `handleSelect` when a valid single date or a completed date range is selected.
- * - `handleClear` when the control is cleared (value becomes `null`).
+ * 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.
  */
 class DatePickerComponent {
     constructor() {
+        /** Internal references and injections */
+        this.ngControl = inject(NgControl, { self: true, optional: true });
         /**
-         * @property {'single' | 'range'} selectionMode
+         * @property {InputSignal<'date' | 'time'>} variant
+         * @description
+         * Defines the visual and functional mode:
+         * - `'date'`: standard date/range picker
+         * - `'time'`: time-only picker
+         * @default 'date'
+         */
+        this.variant = input('date', ...(ngDevMode ? [{ debugName: "variant" }] : /* 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]
          * @default 'range'
          */
-        this.selectionMode = 'range';
+        this.selectionMode = input('range', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
         /**
-         * @property {boolean} readonlyInput
+         * @property {InputSignal<boolean>} readonlyInput
          * @description
          * Disables manual typing in the input and forces the user to select via the calendar.
          * @default true
          */
-        this.readonlyInput = true;
-        /**
-         * @property {boolean} disabled
-         * @description
-         * Disables component.
-         * @default false
-         */
-        this.disabled = false;
+        this.readonlyInput = input(true, ...(ngDevMode ? [{ debugName: "readonlyInput" }] : /* istanbul ignore next */ []));
         /**
-         * @property {boolean} showClear
+         * @property {InputSignal<boolean>} showClear
          * @description
          * Displays a clear button that resets the datepicker value.
          * @default true
          */
-        this.showClear = true;
+        this.showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
         /**
-         * @property {boolean} showIcon
+         * @property {InputSignal<boolean>} showIcon
          * @description
-         * Shows the calendar icon inside the input.
+         * Shows the calendar or clock icon inside the input.
          * @default true
          */
-        this.showIcon = true;
+        this.showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
         /**
-         * @property {string} dateFormat
+         * @property {InputSignal<string>} dateFormat
          * @description
          * Format used by PrimeNG for displaying dates.
          * @default 'mm/dd/yy'
          */
-        this.dateFormat = 'mm/dd/yy';
+        this.dateFormat = input('mm/dd/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.
+         * @default 1
+         */
+        this.stepHour = input(1, ...(ngDevMode ? [{ debugName: "stepHour" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {InputSignal<number>} stepMinute
+         * @description
+         * Minutes to skip when clicking up/down.
+         * @default 1
+         */
+        this.stepMinute = input(1, ...(ngDevMode ? [{ debugName: "stepMinute" }] : /* istanbul ignore next */ []));
         /**
-         * @property {Date | null} maxDate
+         * @property {InputSignal<number>} stepSecond
          * @description
-         * Maximum selectable date. When set, the calendar will prevent selecting dates after this value.
-         * Provide a JavaScript Date object. Use `null` to allow any future date.
+         * Seconds to skip when clicking up/down.
+         * @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.
+         * @default false
+         */
+        this.showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {InputSignal<Date | null>} maxDate
+         * @description
+         * Maximum selectable date.
          * @default null
          */
-        this.maxDate = null;
+        this.maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
         /**
-         * @property {Date | null} minDate
+         * @property {InputSignal<Date | null>} minDate
          * @description
-         * Minimum selectable date. When set, the calendar will prevent selecting dates before this value.
-         * Provide a JavaScript Date object. Use `null` to allow any past date.
+         * Minimum selectable date.
          * @default null
          */
-        this.minDate = null;
+        this.minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
         /**
-         * @property {string} labelText
+         * @property {InputSignal<string>} labelText
          * @description
          * Label shown by the float-label wrapper.
-         * @default 'Select a date'
          */
-        this.labelText = 'Select a date';
+        this.labelText = input('Select a date', ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
         /**
-         * @private
-         * @property {FormControl<DateValue>} internalControl
+         * @property {InputSignal<FormControl>} control
          * @description
-         * The internal FormControl used in the template. It handles value synchronization
-         * for both CVA and the optional external control input.
+         * External FormControl used to read/set the datepicker value.
+         * If not provided, an internal FormControl is created.
          */
-        this.internalControl = new FormControl(null);
-        // Functions registered by ControlValueAccessor to communicate with the outside form
-        this.onChange = () => { };
-        this.onTouched = () => { };
+        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.
+         */
+        this.modelValue = model(null, ...(ngDevMode ? [{ debugName: "modelValue" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {OutputRef<DateValue>} handleSelect
+         * @description
+         * Emitted when a value is selected.
+         */
+        this.handleSelect = output();
         /**
-         * @event handleSelect
+         * @property {OutputRef<void>} handleClear
          * @description
-         * Emitted when:
-         * - single mode → a valid Date is selected
-         * - range mode → both start and end dates are selected
-         *
-         * Payload:
-         * - Date (single mode)
-         * - [Date, Date] (completed range)
+         * Emitted when the value is cleared.
          */
-        this.handleSelect = new EventEmitter();
+        this.handleClear = output();
+        /** Computed properties */
         /**
-         * @event handleClear
+         * @property {Signal<'single' | 'range'>} effectiveSelectionMode
          * @description
-         * Emitted when the control's value becomes `null`.
+         * Returns 'single' automatically if variant is 'time', otherwise returns the user-provided selectionMode.
          */
-        this.handleClear = new EventEmitter();
+        this.effectiveSelectionMode = computed(() => {
+            return this.variant() === 'time' ? 'single' : this.selectionMode();
+        }, ...(ngDevMode ? [{ debugName: "effectiveSelectionMode" }] : /* istanbul ignore next */ []));
         /**
-         * @property faCalendarDay
+         * @property {Signal<string>} effectiveDateFormat
          * @description
-         * Icon displayed inside the datepicker input.
+         * 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<FormControl>} effectiveControl
+         * @description
+         * Returns the external FormControl from NgControl or a local fallback.
+         */
+        this.internalControl = new FormControl(null);
+        /** Icons */
         this.faCalendarDay = faCalendarDay;
-    }
-    /**
-     * @property {FormControl<DateValue> | null} control
-     * @description
-     * Allows passing an external FormControl (traditional Reactive Forms usage).
-     * If provided, it overrides the internal control.
-     */
-    set control(ctrl) {
-        // If the user provides a control, we use that control for everything.
-        if (ctrl) {
-            this.internalControl = ctrl;
+        this.faClock = faClock;
+        /** CVA Logic */
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this.sub = new Subscription();
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
         }
     }
-    get control() {
-        return this.internalControl;
+    get effectiveControl() {
+        return (this.ngControl?.control ||
+            this.control() ||
+            this.internalControl);
+    }
+    ngOnInit() {
+        const control = this.effectiveControl;
+        // Synchronize signal model with control value
+        this.modelValue.set(control.value);
+        this.sub.add(control.valueChanges.subscribe(value => {
+            this.modelValue.set(value);
+        }));
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
     }
-    /**
-     * @method writeValue
-     * @description Writes a new value from the form model (ngModel or formControl) into the component.
-     */
     writeValue(value) {
-        if (value !== undefined) {
-            // Use { emitEvent: false } to prevent an unnecessary valueChanges loop.
-            this.internalControl.setValue(value, { emitEvent: false });
-        }
+        this.modelValue.set(value);
     }
-    /**
-     * @method registerOnChange
-     * @description Registers a callback function to be called when the control's value changes.
-     */
     registerOnChange(fn) {
         this.onChange = fn;
     }
-    /**
-     * @method registerOnTouched
-     * @description Registers a callback function to be called when the control receives a blur event (is touched).
-     */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    /**
-     * @method setDisabledState
-     * @description Called when the control should be disabled or enabled.
-     */
     setDisabledState(isDisabled) {
-        const actionMap = {
-            true: () => this.internalControl.disable(),
-            false: () => this.internalControl.enable(),
-        };
-        actionMap[String(isDisabled)]();
+        const action = isDisabled ? 'disable' : 'enable';
+        this.effectiveControl[action]({ emitEvent: false });
     }
     /**
-     * @method ngOnInit
+     * @method onModelChange
      * @description
-     * Subscribes to the internal control's valueChanges:
-     * 1. Notifies the external form (CVA) via `this.onChange()`.
-     * 2. Emits the semantic events `handleSelect` or `handleClear`.
+     * Called when the PrimeNG DatePicker template updates the value.
      */
-    ngOnInit() {
-        this.sub = this.internalControl.valueChanges.subscribe(value => {
-            // Notify the CVA / External Form
-            this.onChange(value);
-            this.onTouched();
-            if (value === null) {
-                this.handleClear.emit();
-                return;
-            }
-            // RANGE MODE
-            if (this.selectionMode === 'range') {
-                if (Array.isArray(value)) {
-                    const [start, end] = value;
-                    // Emit ONLY when both dates exist
-                    if (start instanceof Date && end instanceof Date) {
-                        this.handleSelect.emit([start, end]);
-                    }
+    onModelChange(value) {
+        this.modelValue.set(value);
+        this.onChange(value);
+        this.effectiveControl.setValue(value, { emitEvent: false });
+        this.effectiveControl.markAsDirty();
+        if (value === null) {
+            this.handleClear.emit();
+        }
+        else if (this.selectionMode() === 'range') {
+            if (Array.isArray(value)) {
+                const [start, end] = value;
+                if (start instanceof Date && end instanceof Date) {
+                    this.handleSelect.emit(value);
                 }
-                return;
             }
-            // SINGLE MODE
-            if (this.selectionMode === 'single' && value instanceof Date) {
-                this.handleSelect.emit(value);
-            }
-        });
+        }
+        else if (value instanceof Date) {
+            this.handleSelect.emit(value);
+        }
     }
     /**
-     * @method ngOnDestroy
-     * @description Cleans up the internal subscription when the component is destroyed.
+     * @method onBlur
+     * @description
+     * Triggered when the component loses focus.
      */
-    ngOnDestroy() {
-        this.sub?.unsubscribe();
+    onBlur() {
+        this.onTouched();
+        this.effectiveControl.markAsTouched();
     }
     /**
      * @method clear
      * @description
-     * Programmatically clears the control's value,
-     * which automatically triggers `handleClear`.
+     * Programmatically clears the value.
      */
     clear() {
-        this.internalControl.setValue(null);
+        this.onModelChange(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: DatePickerComponent, isStandalone: true, selector: "tk-date-picker", inputs: { selectionMode: "selectionMode", readonlyInput: "readonlyInput", disabled: "disabled", showClear: "showClear", showIcon: "showIcon", dateFormat: "dateFormat", maxDate: "maxDate", minDate: "minDate", labelText: "labelText", control: "control" }, outputs: { handleSelect: "handleSelect", handleClear: "handleClear" }, providers: [TK_DATE_PICKER_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"datepicker-container\">\n  <p-floatlabel>\n    <p-datepicker\n      inputId=\"datepicker\"\n      iconDisplay=\"input\"\n      [formControl]=\"internalControl\"\n      [selectionMode]=\"selectionMode\"\n      [readonlyInput]=\"readonlyInput\"\n      [showClear]=\"showClear\"\n      [showIcon]=\"showIcon\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [disabled]=\"disabled\"\n      [dateFormat]=\"dateFormat\">\n      <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n        <fa-icon\n          tabindex=\"0\"\n          [icon]=\"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</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-accent-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)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], 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"] }] }); }
+    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.1.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 }, 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\">\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]=\"effectiveControl.disabled\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"variant() === 'time'\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"showSeconds()\">\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</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-accent-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)}\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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tk-date-picker', standalone: true, imports: [
                         FormsModule,
@@ -240,32 +263,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         DatePickerModule,
                         FloatLabelModule,
                         FaIconComponent,
-                    ], providers: [TK_DATE_PICKER_VALUE_ACCESSOR], template: "<div class=\"datepicker-container\">\n  <p-floatlabel>\n    <p-datepicker\n      inputId=\"datepicker\"\n      iconDisplay=\"input\"\n      [formControl]=\"internalControl\"\n      [selectionMode]=\"selectionMode\"\n      [readonlyInput]=\"readonlyInput\"\n      [showClear]=\"showClear\"\n      [showIcon]=\"showIcon\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [disabled]=\"disabled\"\n      [dateFormat]=\"dateFormat\">\n      <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n        <fa-icon\n          tabindex=\"0\"\n          [icon]=\"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</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-accent-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)}\n"] }]
-        }], propDecorators: { selectionMode: [{
-                type: Input
-            }], readonlyInput: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], showClear: [{
-                type: Input
-            }], showIcon: [{
-                type: Input
-            }], dateFormat: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], labelText: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], handleSelect: [{
-                type: Output
-            }], handleClear: [{
-                type: Output
-            }] } });
+                    ], template: "<div class=\"datepicker-container\">\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]=\"effectiveControl.disabled\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"variant() === 'time'\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"showSeconds()\">\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</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-accent-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)}\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 }] }], 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"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-date-picker.mjs","sources":["../../../projects/design-system/components/date-picker/src/date-picker.component.ts","../../../projects/design-system/components/date-picker/src/date-picker.component.html","../../../projects/design-system/components/date-picker/tekus-design-system-components-date-picker.ts"],"sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  OnInit,\n  OnDestroy,\n  forwardRef,\n} from '@angular/core';\nimport {\n  FormsModule,\n  ReactiveFormsModule,\n  FormControl,\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\nimport { DatePickerModule } from 'primeng/datepicker';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faCalendarDay } from '@fortawesome/pro-regular-svg-icons';\n\nconst TK_DATE_PICKER_VALUE_ACCESSOR = {\n  provide: NG_VALUE_ACCESSOR,\n  useExisting: forwardRef(() => DatePickerComponent),\n  multi: true,\n};\n\nexport type DateValue = Date | [Date, Date] | null;\n@Component({\n  selector: 'tk-date-picker',\n  standalone: true,\n  imports: [\n    FormsModule,\n    ReactiveFormsModule,\n    DatePickerModule,\n    FloatLabelModule,\n    FaIconComponent,\n  ],\n  providers: [TK_DATE_PICKER_VALUE_ACCESSOR],\n  templateUrl: './date-picker.component.html',\n  styleUrls: ['./date-picker.component.scss'],\n})\n/**\n * @component DatePickerComponent\n * @description\n * A wrapper around PrimeNG's DatePicker component with support for single-date\n * and range selection modes. It is compatible with both Reactive Forms (formControlName, [control])\n * and Template-Driven Forms ([(ngModel)]).\n *\n * The component emits:\n * - `handleSelect` when a valid single date or a completed date range is selected.\n * - `handleClear` when the control is cleared (value becomes `null`).\n */\nexport class DatePickerComponent\n  implements OnInit, OnDestroy, ControlValueAccessor\n{\n  /**\n   * @property {'single' | 'range'} selectionMode\n   * @description\n   * Defines how the datepicker behaves:\n   * - `'single'`: select one date\n   * - `'range'`: select a pair of dates [start, end]\n   * @default 'range'\n   */\n  @Input() selectionMode: 'single' | 'range' = 'range';\n\n  /**\n   * @property {boolean} readonlyInput\n   * @description\n   * Disables manual typing in the input and forces the user to select via the calendar.\n   * @default true\n   */\n  @Input() readonlyInput = true;\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Disables component.\n   * @default false\n   */\n  @Input() disabled = false;\n\n  /**\n   * @property {boolean} showClear\n   * @description\n   * Displays a clear button that resets the datepicker value.\n   * @default true\n   */\n  @Input() showClear = true;\n\n  /**\n   * @property {boolean} showIcon\n   * @description\n   * Shows the calendar icon inside the input.\n   * @default true\n   */\n  @Input() showIcon = true;\n\n  /**\n   * @property {string} dateFormat\n   * @description\n   * Format used by PrimeNG for displaying dates.\n   * @default 'mm/dd/yy'\n   */\n  @Input() dateFormat = 'mm/dd/yy';\n\n  /**\n   * @property {Date | null} maxDate\n   * @description\n   * Maximum selectable date. When set, the calendar will prevent selecting dates after this value.\n   * Provide a JavaScript Date object. Use `null` to allow any future date.\n   * @default null\n   */\n  @Input() maxDate: Date | null = null;\n\n  /**\n   * @property {Date | null} minDate\n   * @description\n   * Minimum selectable date. When set, the calendar will prevent selecting dates before this value.\n   * Provide a JavaScript Date object. Use `null` to allow any past date.\n   * @default null\n   */\n  @Input() minDate: Date | null = null;\n\n  /**\n   * @property {string} labelText\n   * @description\n   * Label shown by the float-label wrapper.\n   * @default 'Select a date'\n   */\n  @Input() labelText = 'Select a date';\n\n  /**\n   * @private\n   * @property {FormControl<DateValue>} internalControl\n   * @description\n   * The internal FormControl used in the template. It handles value synchronization\n   * for both CVA and the optional external control input.\n   */\n  internalControl = new FormControl<DateValue>(null);\n\n  /**\n   * @private\n   * @property {Subscription} sub\n   * @description Subscription to the valueChanges observable.\n   */\n  private sub!: Subscription;\n\n  // Functions registered by ControlValueAccessor to communicate with the outside form\n  private onChange: (value: DateValue) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  /**\n   * @property {FormControl<DateValue> | null} control\n   * @description\n   * Allows passing an external FormControl (traditional Reactive Forms usage).\n   * If provided, it overrides the internal control.\n   */\n  @Input() set control(ctrl: FormControl<DateValue> | null) {\n    // If the user provides a control, we use that control for everything.\n    if (ctrl) {\n      this.internalControl = ctrl;\n    }\n  }\n  get control(): FormControl<DateValue> {\n    return this.internalControl;\n  }\n\n  /**\n   * @event handleSelect\n   * @description\n   * Emitted when:\n   * - single mode → a valid Date is selected\n   * - range mode → both start and end dates are selected\n   *\n   * Payload:\n   * - Date (single mode)\n   * - [Date, Date] (completed range)\n   */\n  @Output() handleSelect = new EventEmitter<DateValue>();\n\n  /**\n   * @event handleClear\n   * @description\n   * Emitted when the control's value becomes `null`.\n   */\n  @Output() handleClear = new EventEmitter<void>();\n\n  /**\n   * @property faCalendarDay\n   * @description\n   * Icon displayed inside the datepicker input.\n   */\n  faCalendarDay = faCalendarDay;\n\n  /**\n   * @method writeValue\n   * @description Writes a new value from the form model (ngModel or formControl) into the component.\n   */\n  writeValue(value: DateValue): void {\n    if (value !== undefined) {\n      // Use { emitEvent: false } to prevent an unnecessary valueChanges loop.\n      this.internalControl.setValue(value, { emitEvent: false });\n    }\n  }\n\n  /**\n   * @method registerOnChange\n   * @description Registers a callback function to be called when the control's value changes.\n   */\n  registerOnChange(fn: (value: DateValue) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description Registers a callback function to be called when the control receives a blur event (is touched).\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description Called when the control should be disabled or enabled.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    const actionMap: { [key: string]: () => void } = {\n      true: () => this.internalControl.disable(),\n      false: () => this.internalControl.enable(),\n    };\n    actionMap[String(isDisabled)]();\n  }\n\n  /**\n   * @method ngOnInit\n   * @description\n   * Subscribes to the internal control's valueChanges:\n   * 1. Notifies the external form (CVA) via `this.onChange()`.\n   * 2. Emits the semantic events `handleSelect` or `handleClear`.\n   */\n  ngOnInit(): void {\n    this.sub = this.internalControl.valueChanges.subscribe(value => {\n      // Notify the CVA / External Form\n      this.onChange(value);\n      this.onTouched();\n\n      if (value === null) {\n        this.handleClear.emit();\n        return;\n      }\n      // RANGE MODE\n      if (this.selectionMode === 'range') {\n        if (Array.isArray(value)) {\n          const [start, end] = value;\n          // Emit ONLY when both dates exist\n          if (start instanceof Date && end instanceof Date) {\n            this.handleSelect.emit([start, end]);\n          }\n        }\n        return;\n      }\n      // SINGLE MODE\n      if (this.selectionMode === 'single' && value instanceof Date) {\n        this.handleSelect.emit(value);\n      }\n    });\n  }\n\n  /**\n   * @method ngOnDestroy\n   * @description Cleans up the internal subscription when the component is destroyed.\n   */\n  ngOnDestroy(): void {\n    this.sub?.unsubscribe();\n  }\n\n  /**\n   * @method clear\n   * @description\n   * Programmatically clears the control's value,\n   * which automatically triggers `handleClear`.\n   */\n  clear() {\n    this.internalControl.setValue(null);\n  }\n}\n","<div class=\"datepicker-container\">\n  <p-floatlabel>\n    <p-datepicker\n      inputId=\"datepicker\"\n      iconDisplay=\"input\"\n      [formControl]=\"internalControl\"\n      [selectionMode]=\"selectionMode\"\n      [readonlyInput]=\"readonlyInput\"\n      [showClear]=\"showClear\"\n      [showIcon]=\"showIcon\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [disabled]=\"disabled\"\n      [dateFormat]=\"dateFormat\">\n      <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n        <fa-icon\n          tabindex=\"0\"\n          [icon]=\"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</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-date-picker.mjs","sources":["../../../projects/design-system/components/date-picker/src/date-picker.component.ts","../../../projects/design-system/components/date-picker/src/date-picker.component.html","../../../projects/design-system/components/date-picker/tekus-design-system-components-date-picker.ts"],"sourcesContent":["import {\n  Component,\n  OnInit,\n  OnDestroy,\n  inject,\n  input,\n  model,\n  computed,\n  output,\n} from '@angular/core';\nimport {\n  FormsModule,\n  ReactiveFormsModule,\n  FormControl,\n  ControlValueAccessor,\n  NgControl,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\nimport { DatePickerModule } from 'primeng/datepicker';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faCalendarDay, faClock } from '@fortawesome/pro-regular-svg-icons';\n\nexport type DateValue = Date | [Date, Date] | null;\n\n@Component({\n  selector: 'tk-date-picker',\n  standalone: true,\n  imports: [\n    FormsModule,\n    ReactiveFormsModule,\n    DatePickerModule,\n    FloatLabelModule,\n    FaIconComponent,\n  ],\n  templateUrl: './date-picker.component.html',\n  styleUrls: ['./date-picker.component.scss'],\n})\n/**\n * @component DatePickerComponent\n * @description\n * A wrapper around PrimeNG's DatePicker component with support for single-date,\n * range selection, and time-only modes. It uses Angular Signals for reactivity\n * and strictly implements the ControlValueAccessor interface via NgControl.\n */\nexport class DatePickerComponent\n  implements OnInit, OnDestroy, ControlValueAccessor\n{\n  /** Internal references and injections */\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  /**\n   * @property {InputSignal<'date' | 'time'>} variant\n   * @description\n   * Defines the visual and functional mode:\n   * - `'date'`: standard date/range picker\n   * - `'time'`: time-only picker\n   * @default 'date'\n   */\n  variant = input<'date' | 'time'>('date');\n\n  /**\n   * @property {InputSignal<'single' | 'range'>} selectionMode\n   * @description\n   * Defines how the datepicker behaves:\n   * - `'single'`: select one date\n   * - `'range'`: select a pair of dates [start, end]\n   * @default 'range'\n   */\n  selectionMode = input<'single' | 'range'>('range');\n\n  /**\n   * @property {InputSignal<boolean>} readonlyInput\n   * @description\n   * Disables manual typing in the input and forces the user to select via the calendar.\n   * @default true\n   */\n  readonlyInput = input<boolean>(true);\n\n  /**\n   * @property {InputSignal<boolean>} showClear\n   * @description\n   * Displays a clear button that resets the datepicker value.\n   * @default true\n   */\n  showClear = input<boolean>(true);\n\n  /**\n   * @property {InputSignal<boolean>} showIcon\n   * @description\n   * Shows the calendar or clock icon inside the input.\n   * @default true\n   */\n  showIcon = input<boolean>(true);\n\n  /**\n   * @property {InputSignal<string>} dateFormat\n   * @description\n   * Format used by PrimeNG for displaying dates.\n   * @default 'mm/dd/yy'\n   */\n  dateFormat = input<string>('mm/dd/yy');\n\n  /**\n   * @property {InputSignal<string>} timeFormat\n   * @description\n   * Format used by PrimeNG for displaying times.\n   * @default 'HH:mm'\n   */\n  timeFormat = input<string>('HH:mm');\n\n  /**\n   * @property {InputSignal<number>} stepHour\n   * @description\n   * Hours to skip when clicking up/down.\n   * @default 1\n   */\n  stepHour = input<number>(1);\n\n  /**\n   * @property {InputSignal<number>} stepMinute\n   * @description\n   * Minutes to skip when clicking up/down.\n   * @default 1\n   */\n  stepMinute = input<number>(1);\n\n  /**\n   * @property {InputSignal<number>} stepSecond\n   * @description\n   * Seconds to skip when clicking up/down.\n   * @default 1\n   */\n  stepSecond = input<number>(1);\n\n  /**\n   * @property {InputSignal<boolean>} showSeconds\n   * @description\n   * Whether to show seconds in the time picker.\n   * @default false\n   */\n  showSeconds = input<boolean>(false);\n\n  /**\n   * @property {InputSignal<Date | null>} maxDate\n   * @description\n   * Maximum selectable date.\n   * @default null\n   */\n  maxDate = input<Date | null>(null);\n\n  /**\n   * @property {InputSignal<Date | null>} minDate\n   * @description\n   * Minimum selectable date.\n   * @default null\n   */\n  minDate = input<Date | null>(null);\n\n  /**\n   * @property {InputSignal<string>} labelText\n   * @description\n   * Label shown by the float-label wrapper.\n   */\n  labelText = input<string>('Select a date');\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the datepicker value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl | undefined>(undefined);\n\n  /**\n   * @property {ModelSignal<DateValue>} modelValue\n   * @description\n   * The value of the datepicker model. Supports two-way binding.\n   */\n  modelValue = model<DateValue>(null);\n\n  /**\n   * @property {OutputRef<DateValue>} handleSelect\n   * @description\n   * Emitted when a value is selected.\n   */\n  handleSelect = output<DateValue>();\n\n  /**\n   * @property {OutputRef<void>} handleClear\n   * @description\n   * Emitted when the value is cleared.\n   */\n  handleClear = output<void>();\n\n  /** Computed properties */\n\n  /**\n   * @property {Signal<'single' | 'range'>} effectiveSelectionMode\n   * @description\n   * Returns 'single' automatically if variant is 'time', otherwise returns the user-provided selectionMode.\n   */\n  effectiveSelectionMode = computed(() => {\n    return this.variant() === 'time' ? 'single' : this.selectionMode();\n  });\n\n  /**\n   * @property {Signal<string>} effectiveDateFormat\n   * @description\n   * Returns the user-provided dateFormat or timeFormat based on the variant.\n   */\n  effectiveDateFormat = computed(() => {\n    return this.variant() === 'time' ? this.timeFormat() : this.dateFormat();\n  });\n\n  /**\n   * @property {Signal<FormControl>} effectiveControl\n   * @description\n   * Returns the external FormControl from NgControl or a local fallback.\n   */\n  internalControl = new FormControl<DateValue>(null);\n  get effectiveControl(): FormControl {\n    return (\n      (this.ngControl?.control as FormControl) ||\n      this.control() ||\n      this.internalControl\n    );\n  }\n\n  /** Icons */\n  faCalendarDay = faCalendarDay;\n  faClock = faClock;\n\n  /** CVA Logic */\n  onChange: (value: DateValue) => void = () => {};\n  onTouched: () => void = () => {};\n  private readonly sub = new Subscription();\n\n  ngOnInit(): void {\n    const control = this.effectiveControl;\n\n    // Synchronize signal model with control value\n    this.modelValue.set(control.value);\n\n    this.sub.add(\n      control.valueChanges.subscribe(value => {\n        this.modelValue.set(value);\n      })\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.sub.unsubscribe();\n  }\n\n  writeValue(value: DateValue): void {\n    this.modelValue.set(value);\n  }\n\n  registerOnChange(fn: (value: DateValue) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    const action = isDisabled ? 'disable' : 'enable';\n    this.effectiveControl[action]({ emitEvent: false });\n  }\n\n  /**\n   * @method onModelChange\n   * @description\n   * Called when the PrimeNG DatePicker template updates the value.\n   */\n  onModelChange(value: DateValue): void {\n    this.modelValue.set(value);\n    this.onChange(value);\n    this.effectiveControl.setValue(value, { emitEvent: false });\n    this.effectiveControl.markAsDirty();\n\n    if (value === null) {\n      this.handleClear.emit();\n    } else if (this.selectionMode() === 'range') {\n      if (Array.isArray(value)) {\n        const [start, end] = value;\n        if (start instanceof Date && end instanceof Date) {\n          this.handleSelect.emit(value);\n        }\n      }\n    } else if (value instanceof Date) {\n      this.handleSelect.emit(value);\n    }\n  }\n\n  /**\n   * @method onBlur\n   * @description\n   * Triggered when the component loses focus.\n   */\n  onBlur(): void {\n    this.onTouched();\n    this.effectiveControl.markAsTouched();\n  }\n\n  /**\n   * @method clear\n   * @description\n   * Programmatically clears the value.\n   */\n  clear() {\n    this.onModelChange(null);\n  }\n}\n","<div class=\"datepicker-container\">\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]=\"effectiveControl.disabled\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"variant() === 'time'\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"showSeconds()\">\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</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}