npm - @tekus/design-system - Versions diffs - 5.20.0 → 5.21.0 - Mend

@tekus/design-system 5.20.0 → 5.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/components/date-picker/src/date-picker.component.d.ts CHANGED Viewed

@@ -1,163 +1,188 @@
-import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
-import { FormControl, ControlValueAccessor } from '@angular/forms';
+import { OnInit, OnDestroy } from '@angular/core';
+import { FormControl, ControlValueAccessor, NgControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export type DateValue = Date | [Date, Date] | null;
 export declare class DatePickerComponent implements OnInit, OnDestroy, ControlValueAccessor {
+    /** Internal references and injections */
+    readonly ngControl: NgControl | null;
+    constructor();
     /**
-     * @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'
+     */
+    variant: import("@angular/core").InputSignal<"date" | "time">;
+    /**
+     * @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'
      */
-    selectionMode: 'single' | 'range';
+    selectionMode: import("@angular/core").InputSignal<"single" | "range">;
     /**
-     * @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
      */
-    readonlyInput: boolean;
-    /**
-     * @property {boolean} disabled
-     * @description
-     * Disables component.
-     * @default false
-     */
-    disabled: boolean;
+    readonlyInput: import("@angular/core").InputSignal<boolean>;
     /**
-     * @property {boolean} showClear
+     * @property {InputSignal<boolean>} showClear
      * @description
      * Displays a clear button that resets the datepicker value.
      * @default true
      */
-    showClear: boolean;
+    showClear: import("@angular/core").InputSignal<boolean>;
     /**
-     * @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
      */
-    showIcon: boolean;
+    showIcon: import("@angular/core").InputSignal<boolean>;
     /**
-     * @property {string} dateFormat
+     * @property {InputSignal<string>} dateFormat
      * @description
      * Format used by PrimeNG for displaying dates.
      * @default 'mm/dd/yy'
      */
-    dateFormat: string;
+    dateFormat: import("@angular/core").InputSignal<string>;
     /**
-     * @property {Date | null} maxDate
+     * @property {InputSignal<string>} timeFormat
      * @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.
-     * @default null
+     * Format used by PrimeNG for displaying times.
+     * @default 'HH:mm'
      */
-    maxDate: Date | null;
+    timeFormat: import("@angular/core").InputSignal<string>;
     /**
-     * @property {Date | null} minDate
+     * @property {InputSignal<number>} stepHour
      * @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.
-     * @default null
+     * Hours to skip when clicking up/down.
+     * @default 1
      */
-    minDate: Date | null;
+    stepHour: import("@angular/core").InputSignal<number>;
     /**
-     * @property {string} labelText
+     * @property {InputSignal<number>} stepMinute
      * @description
-     * Label shown by the float-label wrapper.
-     * @default 'Select a date'
+     * Minutes to skip when clicking up/down.
+     * @default 1
      */
-    labelText: string;
+    stepMinute: import("@angular/core").InputSignal<number>;
     /**
-     * @private
-     * @property {FormControl<DateValue>} internalControl
+     * @property {InputSignal<number>} stepSecond
      * @description
-     * The internal FormControl used in the template. It handles value synchronization
-     * for both CVA and the optional external control input.
+     * Seconds to skip when clicking up/down.
+     * @default 1
      */
-    internalControl: FormControl<DateValue>;
+    stepSecond: import("@angular/core").InputSignal<number>;
     /**
-     * @private
-     * @property {Subscription} sub
-     * @description Subscription to the valueChanges observable.
+     * @property {InputSignal<boolean>} showSeconds
+     * @description
+     * Whether to show seconds in the time picker.
+     * @default false
      */
-    private sub;
-    private onChange;
-    private onTouched;
+    showSeconds: import("@angular/core").InputSignal<boolean>;
     /**
-     * @property {FormControl<DateValue> | null} control
+     * @property {InputSignal<Date | null>} maxDate
      * @description
-     * Allows passing an external FormControl (traditional Reactive Forms usage).
-     * If provided, it overrides the internal control.
+     * Maximum selectable date.
+     * @default null
      */
-    set control(ctrl: FormControl<DateValue> | null);
-    get control(): FormControl<DateValue>;
+    maxDate: import("@angular/core").InputSignal<Date | null>;
     /**
-     * @event handleSelect
+     * @property {InputSignal<Date | null>} minDate
      * @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)
+     * Minimum selectable date.
+     * @default null
      */
-    handleSelect: EventEmitter<DateValue>;
+    minDate: import("@angular/core").InputSignal<Date | null>;
     /**
-     * @event handleClear
+     * @property {InputSignal<string>} labelText
      * @description
-     * Emitted when the control's value becomes `null`.
+     * Label shown by the float-label wrapper.
      */
-    handleClear: EventEmitter<void>;
+    labelText: import("@angular/core").InputSignal<string>;
     /**
-     * @property faCalendarDay
+     * @property {InputSignal<FormControl>} control
      * @description
-     * Icon displayed inside the datepicker input.
+     * External FormControl used to read/set the datepicker value.
+     * If not provided, an internal FormControl is created.
      */
-    faCalendarDay: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    control: import("@angular/core").InputSignal<FormControl<any> | undefined>;
     /**
-     * @method writeValue
-     * @description Writes a new value from the form model (ngModel or formControl) into the component.
+     * @property {ModelSignal<DateValue>} modelValue
+     * @description
+     * The value of the datepicker model. Supports two-way binding.
      */
-    writeValue(value: DateValue): void;
+    modelValue: import("@angular/core").ModelSignal<DateValue>;
+    /**
+     * @property {OutputRef<DateValue>} handleSelect
+     * @description
+     * Emitted when a value is selected.
+     */
+    handleSelect: import("@angular/core").OutputEmitterRef<DateValue>;
     /**
-     * @method registerOnChange
-     * @description Registers a callback function to be called when the control's value changes.
+     * @property {OutputRef<void>} handleClear
+     * @description
+     * Emitted when the value is cleared.
      */
-    registerOnChange(fn: (value: DateValue) => void): void;
+    handleClear: import("@angular/core").OutputEmitterRef<void>;
+    /** Computed properties */
     /**
-     * @method registerOnTouched
-     * @description Registers a callback function to be called when the control receives a blur event (is touched).
+     * @property {Signal<'single' | 'range'>} effectiveSelectionMode
+     * @description
+     * Returns 'single' automatically if variant is 'time', otherwise returns the user-provided selectionMode.
      */
-    registerOnTouched(fn: () => void): void;
+    effectiveSelectionMode: import("@angular/core").Signal<"single" | "range">;
     /**
-     * @method setDisabledState
-     * @description Called when the control should be disabled or enabled.
+     * @property {Signal<string>} effectiveDateFormat
+     * @description
+     * Returns the user-provided dateFormat or timeFormat based on the variant.
      */
-    setDisabledState(isDisabled: boolean): void;
+    effectiveDateFormat: import("@angular/core").Signal<string>;
     /**
-     * @method ngOnInit
+     * @property {Signal<FormControl>} effectiveControl
      * @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`.
+     * Returns the external FormControl from NgControl or a local fallback.
      */
+    internalControl: FormControl<DateValue>;
+    get effectiveControl(): FormControl;
+    /** Icons */
+    faCalendarDay: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    faClock: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    /** CVA Logic */
+    onChange: (value: DateValue) => void;
+    onTouched: () => void;
+    private readonly sub;
     ngOnInit(): void;
+    ngOnDestroy(): void;
+    writeValue(value: DateValue): void;
+    registerOnChange(fn: (value: DateValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
     /**
-     * @method ngOnDestroy
-     * @description Cleans up the internal subscription when the component is destroyed.
+     * @method onModelChange
+     * @description
+     * Called when the PrimeNG DatePicker template updates the value.
      */
-    ngOnDestroy(): void;
+    onModelChange(value: DateValue): void;
+    /**
+     * @method onBlur
+     * @description
+     * Triggered when the component loses focus.
+     */
+    onBlur(): void;
     /**
      * @method clear
      * @description
-     * Programmatically clears the control's value,
-     * which automatically triggers `handleClear`.
+     * Programmatically clears the value.
      */
     clear(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "tk-date-picker", never, { "selectionMode": { "alias": "selectionMode"; "required": false; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, { "handleSelect": "handleSelect"; "handleClear": "handleClear"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "tk-date-picker", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "stepHour": { "alias": "stepHour"; "required": false; "isSignal": true; }; "stepMinute": { "alias": "stepMinute"; "required": false; "isSignal": true; }; "stepSecond": { "alias": "stepSecond"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "labelText": { "alias": "labelText"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "modelValue": { "alias": "modelValue"; "required": false; "isSignal": true; }; }, { "modelValue": "modelValueChange"; "handleSelect": "handleSelect"; "handleClear": "handleClear"; }, never, never, true, never>;
 }

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

@@ -1,236 +1,259 @@
 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');
+        /**
+         * @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');
         /**
-         * @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;
+        this.readonlyInput = input(true);
         /**
-         * @property {boolean} disabled
-         * @description
-         * Disables component.
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * @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);
         /**
-         * @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);
         /**
-         * @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');
         /**
-         * @property {Date | null} maxDate
+         * @property {InputSignal<string>} timeFormat
          * @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.
+         * Format used by PrimeNG for displaying times.
+         * @default 'HH:mm'
+         */
+        this.timeFormat = input('HH:mm');
+        /**
+         * @property {InputSignal<number>} stepHour
+         * @description
+         * Hours to skip when clicking up/down.
+         * @default 1
+         */
+        this.stepHour = input(1);
+        /**
+         * @property {InputSignal<number>} stepMinute
+         * @description
+         * Minutes to skip when clicking up/down.
+         * @default 1
+         */
+        this.stepMinute = input(1);
+        /**
+         * @property {InputSignal<number>} stepSecond
+         * @description
+         * Seconds to skip when clicking up/down.
+         * @default 1
+         */
+        this.stepSecond = input(1);
+        /**
+         * @property {InputSignal<boolean>} showSeconds
+         * @description
+         * Whether to show seconds in the time picker.
+         * @default false
+         */
+        this.showSeconds = input(false);
+        /**
+         * @property {InputSignal<Date | null>} maxDate
+         * @description
+         * Maximum selectable date.
          * @default null
          */
-        this.maxDate = null;
+        this.maxDate = input(null);
         /**
-         * @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);
         /**
-         * @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');
         /**
-         * @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);
+        /**
+         * @property {ModelSignal<DateValue>} modelValue
+         * @description
+         * The value of the datepicker model. Supports two-way binding.
+         */
+        this.modelValue = model(null);
+        /**
+         * @property {OutputRef<DateValue>} handleSelect
+         * @description
+         * Emitted when a value is selected.
+         */
+        this.handleSelect = output();
+        /**
+         * @property {OutputRef<void>} handleClear
+         * @description
+         * Emitted when the value is cleared.
+         */
+        this.handleClear = output();
+        /** Computed properties */
         /**
-         * @event handleSelect
+         * @property {Signal<'single' | 'range'>} effectiveSelectionMode
          * @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)
+         * Returns 'single' automatically if variant is 'time', otherwise returns the user-provided selectionMode.
          */
-        this.handleSelect = new EventEmitter();
+        this.effectiveSelectionMode = computed(() => {
+            return this.variant() === 'time' ? 'single' : this.selectionMode();
+        });
         /**
-         * @event handleClear
+         * @property {Signal<string>} effectiveDateFormat
          * @description
-         * Emitted when the control's value becomes `null`.
+         * Returns the user-provided dateFormat or timeFormat based on the variant.
          */
-        this.handleClear = new EventEmitter();
+        this.effectiveDateFormat = computed(() => {
+            return this.variant() === 'time' ? this.timeFormat() : this.dateFormat();
+        });
         /**
-         * @property faCalendarDay
+         * @property {Signal<FormControl>} effectiveControl
          * @description
-         * Icon displayed inside the datepicker input.
+         * 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", 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", "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -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: () => [] });
 /**
  * Generated bundle index. Do not edit.

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

	@@ -1 +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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"}
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 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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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@tekus/design-system",
   "description": "Tekus design system library",
-  "version": "5.20.0",
+  "version": "5.21.0",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^19.2.15",
@@ -39,6 +39,10 @@
       "types": "./core/index.d.ts",
       "default": "./fesm2022/tekus-design-system-core.mjs"
     },
+    "./core/types": {
+      "types": "./core/types/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-core-types.mjs"
+    },
     "./components/autocomplete": {
       "types": "./components/autocomplete/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-autocomplete.mjs"
@@ -59,14 +63,14 @@
       "types": "./components/date-picker/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-date-picker.mjs"
     },
-    "./components/drawer": {
-      "types": "./components/drawer/index.d.ts",
-      "default": "./fesm2022/tekus-design-system-components-drawer.mjs"
-    },
     "./components/fallback-view": {
       "types": "./components/fallback-view/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-fallback-view.mjs"
     },
+    "./components/drawer": {
+      "types": "./components/drawer/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-drawer.mjs"
+    },
     "./components/icon": {
       "types": "./components/icon/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-icon.mjs"
@@ -131,10 +135,6 @@
       "types": "./components/topbar/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-topbar.mjs"
     },
-    "./core/types": {
-      "types": "./core/types/index.d.ts",
-      "default": "./fesm2022/tekus-design-system-core-types.mjs"
-    },
     "./directives/gird-item": {
       "types": "./directives/gird-item/index.d.ts",
       "default": "./fesm2022/tekus-design-system-directives-gird-item.mjs"