@tekus/design-system 5.22.1 → 5.24.0

package/fesm2022/tekus-design-system-components-checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-checkbox.mjs","sources":["../../../projects/design-system/components/checkbox/src/checkbox.component.ts","../../../projects/design-system/components/checkbox/src/checkbox.component.html","../../../projects/design-system/components/checkbox/tekus-design-system-components-checkbox.ts"],"sourcesContent":["import {\n  Component,\n  input,\n  model,\n  OnInit,\n  inject,\n  OnDestroy,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  ReactiveFormsModule,\n  NgControl,\n  FormsModule,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { CheckboxModule } from 'primeng/checkbox';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n  selector: 'tk-checkbox',\n  imports: [\n    ReactiveFormsModule,\n    FormsModule,\n    CheckboxModule,\n    MessageModule,\n  ],\n  templateUrl: './checkbox.component.html',\n  styleUrl: './checkbox.component.scss',\n})\nexport class CheckboxComponent\n  implements ControlValueAccessor, OnInit, OnDestroy\n{\n  /** Internal references and injections */\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n  /**\n   * Initialize the component and register it as a ControlValueAccessor.\n   */\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  /** Properties and Signals */\n\n  /**\n   * @property {ModelSignal<any>} model\n   * @description\n   * The value of the checkbox model (checked state or array of values).\n   * Supports two-way binding via signals.\n   */\n  model = model<unknown>();\n\n  /**\n   * @property {InputSignal<any>} value\n   * @description\n   * The value of the checkbox itself (used when part of a group).\n   */\n  value = input<unknown>();\n\n  /**\n   * @property {InputSignal<string>} label\n   * @description\n   * Label displayed next to the checkbox.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} name\n   * @description\n   * Name attribute for the checkbox.\n   */\n  name = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} inputId\n   * @description\n   * HTML id attribute for the checkbox input.\n   */\n  inputId = input<string>('');\n\n  /**\n   * @property {InputSignal<boolean>} binary\n   * @description\n   * Boolean property to indicate if the checkbox is a binary toggle.\n   * @default false\n   */\n  binary = input<boolean>(false);\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the checkbox value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>(new FormControl());\n\n  /**\n   * @property {InputSignal<string>} errorMessage\n   * @description\n   * Message to display when the control is invalid and touched.\n   */\n  errorMessage = input<string>('');\n\n  /**\n   * @property {ModelSignal<boolean>} indeterminate\n   * @description\n   * Indeterminate state of the checkbox (reactive).\n   * Useful for parent checkboxes in lists with partial selection.\n   */\n  indeterminate = model<boolean>(false);\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Whether the checkbox is disabled.\n   */\n  disabled = model<boolean>(false);\n\n  /** Component Methods */\n\n  get effectiveControl(): FormControl {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  onChange: (value: unknown) => void = () => {};\n  onTouched: () => void = () => {};\n  private readonly subscription = new Subscription();\n\n  ngOnInit(): void {\n    const control = this.effectiveControl;\n\n    if (control.value !== undefined && control.value !== null) {\n      this.model.set(control.value);\n    }\n\n    if (this.control() === control && this.disabled()) {\n      control.disable({ emitEvent: false });\n    } else {\n      this.disabled.set(control.disabled);\n    }\n\n    this.subscription.add(\n      control.statusChanges.subscribe(() => {\n        this.disabled.set(control.disabled);\n      })\n    );\n\n    this.subscription.add(\n      control.valueChanges.subscribe(value => {\n        this.model.set(value);\n      })\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.subscription.unsubscribe();\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Writes a new value from the form.\n   */\n  writeValue(value: unknown): void {\n    this.model.set(value);\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Registers a callback for change events.\n   */\n  registerOnChange(fn: (value: unknown) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Registers a callback for touched events.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Sets the disabled state.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n    if (isDisabled) {\n      this.control().disable({ emitEvent: false });\n    } else {\n      this.control().enable({ emitEvent: false });\n    }\n  }\n\n  /**\n   * Handle model change events from the template.\n   */\n  onModelChange(value: unknown): void {\n    this.model.set(value);\n    this.onChange(value);\n    this.effectiveControl.setValue(value, { emitEvent: false });\n    this.effectiveControl.markAsDirty();\n    this.onTouched();\n  }\n\n  /**\n   * Handle blur events to trigger onTouched.\n   */\n  onBlur(): void {\n    this.onTouched();\n    this.effectiveControl.markAsTouched();\n  }\n}\n","<div class=\"tk-checkbox-wrapper\">\n  <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n    <p-checkbox\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [binary]=\"binary()\"\n      [disabled]=\"disabled()\"\n      [indeterminate]=\"indeterminate()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-checkbox>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\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-checkbox.mjs","sources":["../../../projects/design-system/components/checkbox/src/checkbox.component.ts","../../../projects/design-system/components/checkbox/src/checkbox.component.html","../../../projects/design-system/components/checkbox/tekus-design-system-components-checkbox.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  input,\n  model,\n  OnInit,\n  inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  ReactiveFormsModule,\n  NgControl,\n  FormsModule,\n} from '@angular/forms';\nimport { CheckboxModule } from 'primeng/checkbox';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n  selector: 'tk-checkbox',\n  imports: [\n    ReactiveFormsModule,\n    FormsModule,\n    CheckboxModule,\n    MessageModule,\n  ],\n  templateUrl: './checkbox.component.html',\n  styleUrl: './checkbox.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CheckboxComponent\n  implements ControlValueAccessor, OnInit\n{\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  /** Properties and Signals */\n\n  /**\n   * @property {ModelSignal<any>} model\n   * @description\n   * The value of the checkbox model (checked state or array of values).\n   * Supports two-way binding via signals.\n   */\n  model = model<unknown>();\n\n  /**\n   * @property {InputSignal<any>} value\n   * @description\n   * The value of the checkbox itself (used when part of a group).\n   */\n  value = input<unknown>();\n\n  /**\n   * @property {InputSignal<string>} label\n   * @description\n   * Label displayed next to the checkbox.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} name\n   * @description\n   * Name attribute for the checkbox.\n   */\n  name = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} inputId\n   * @description\n   * HTML id attribute for the checkbox input.\n   */\n  inputId = input<string>('');\n\n  /**\n   * @property {InputSignal<boolean>} binary\n   * @description\n   * Boolean property to indicate if the checkbox is a binary toggle.\n   * @default false\n   */\n  binary = input<boolean>(false);\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the checkbox value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>(new FormControl());\n\n  /**\n   * @property {InputSignal<string>} errorMessage\n   * @description\n   * Message to display when the control is invalid and touched.\n   */\n  errorMessage = input<string>('');\n\n  /**\n   * @property {ModelSignal<boolean>} indeterminate\n   * @description\n   * Indeterminate state of the checkbox (reactive).\n   * Useful for parent checkboxes in lists with partial selection.\n   */\n  indeterminate = model<boolean>(false);\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Whether the checkbox is disabled.\n   */\n  disabled = model<boolean>(false);\n\n  /** Component Methods */\n\n  get effectiveControl(): FormControl {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  onChange: (value: unknown) => void = () => {};\n  onTouched: () => void = () => {};\n\n  ngOnInit(): void {\n    const control = this.effectiveControl;\n\n    if (control.value !== undefined && control.value !== null) {\n      this.model.set(control.value);\n    }\n\n    if (this.control() === control && this.disabled()) {\n      control.disable({ emitEvent: false });\n    } else {\n      this.disabled.set(control.disabled);\n    }\n\n    control.statusChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.disabled.set(control.disabled);\n      });\n\n    control.valueChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(value => {\n        this.model.set(value);\n      });\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Writes a new value from the form.\n   */\n  writeValue(value: unknown): void {\n    this.model.set(value);\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Registers a callback for change events.\n   */\n  registerOnChange(fn: (value: unknown) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Registers a callback for touched events.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Sets the disabled state.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n    if (isDisabled) {\n      this.control().disable({ emitEvent: false });\n    } else {\n      this.control().enable({ emitEvent: false });\n    }\n  }\n\n  /**\n   * Handle model change events from the template.\n   */\n  onModelChange(value: unknown): void {\n    this.model.set(value);\n    this.onChange(value);\n    this.effectiveControl.setValue(value, { emitEvent: false });\n    this.effectiveControl.markAsDirty();\n    this.onTouched();\n  }\n\n  /**\n   * Handle blur events to trigger onTouched.\n   */\n  onBlur(): void {\n    this.onTouched();\n    this.effectiveControl.markAsTouched();\n  }\n}\n","<div class=\"tk-checkbox-wrapper\">\n  <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n    <p-checkbox\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [binary]=\"binary()\"\n      [disabled]=\"disabled()\"\n      [indeterminate]=\"indeterminate()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-checkbox>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,14 +1,15 @@
 import * as i0 from '@angular/core';
-import { inject, input, model, output, computed, Component } from '@angular/core';
+import { inject, DestroyRef, input, model, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 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, faClock } from '@fortawesome/pro-regular-svg-icons';
+import { Subscription } from 'rxjs';
 
 /**
  * @component DatePickerComponent
@@ -21,12 +22,14 @@ class DatePickerComponent {
     constructor() {
         /** Internal references and injections */
         this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.destroyRef = inject(DestroyRef);
         /**
-         * @property {InputSignal<'date' | 'time'>} variant
+         * @property {InputSignal<'date' | 'time' | 'both'>} variant
          * @description
          * Defines the visual and functional mode:
          * - `'date'`: standard date/range picker
          * - `'time'`: time-only picker
+         * - `'both'`: date and time picker
          * @default 'date'
          */
         this.variant = input('date', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -64,9 +67,9 @@ class DatePickerComponent {
          * @property {InputSignal<string>} dateFormat
          * @description
          * Format used by PrimeNG for displaying dates.
-         * @default 'mm/dd/yy'
+         * @default 'dd/mm/yy'
          */
-        this.dateFormat = input('mm/dd/yy', ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+        this.dateFormat = input('dd/mm/yy', ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<string>} timeFormat
          * @description
@@ -99,9 +102,45 @@ class DatePickerComponent {
          * @property {InputSignal<boolean>} showSeconds
          * @description
          * Whether to show seconds in the time picker.
+         * Only applicable when hourFormat is '24'.
          * @default false
          */
         this.showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {InputSignal<boolean>} inline
+         * @description
+         * Whether to display the datepicker inline.
+         * @default false
+         */
+        this.inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {InputSignal<boolean>} showTime
+         * @description
+         * Whether to show the time picker along with the date picker.
+         * @default false
+         */
+        this.showTime = input(false, ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {InputSignal<'12' | '24'>} hourFormat
+         * @description
+         * Format of the hours: '12' or '24'.
+         * @default '24'
+         */
+        this.hourFormat = input('24', ...(ngDevMode ? [{ debugName: "hourFormat" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {InputSignal<string | HTMLElement | null | undefined>} appendTo
+         * @description
+         * Target element to attach the overlay to.
+         * @default 'null'
+         */
+        this.appendTo = input(null, ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {InputSignal<number>} baseZIndex
+         * @description
+         * Base z-index value for the overlay.
+         * @default 10000
+         */
+        this.baseZIndex = input(10000, ...(ngDevMode ? [{ debugName: "baseZIndex" }] : /* istanbul ignore next */ []));
         /**
          * @property {InputSignal<Date | null>} maxDate
          * @description
@@ -164,6 +203,24 @@ class DatePickerComponent {
         this.effectiveDateFormat = computed(() => {
             return this.variant() === 'time' ? this.timeFormat() : this.dateFormat();
         }, ...(ngDevMode ? [{ debugName: "effectiveDateFormat" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {Signal<boolean>} effectiveShowSeconds
+         * @description
+         * Returns whether seconds should be shown, restricted to 24h format.
+         */
+        this.effectiveShowSeconds = computed(() => {
+            return ((this.effectiveShowTime() || this.variant() === 'time') &&
+                this.hourFormat() === '24' &&
+                this.showSeconds());
+        }, ...(ngDevMode ? [{ debugName: "effectiveShowSeconds" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {Signal<boolean>} effectiveShowTime
+         * @description
+         * Returns whether the time picker should be shown.
+         */
+        this.effectiveShowTime = computed(() => {
+            return this.variant() === 'both' || this.showTime();
+        }, ...(ngDevMode ? [{ debugName: "effectiveShowTime" }] : /* istanbul ignore next */ []));
         /**
          * @property {Signal<FormControl>} effectiveControl
          * @description
@@ -177,6 +234,7 @@ class DatePickerComponent {
         this.onChange = () => { };
         this.onTouched = () => { };
         this.sub = new Subscription();
+        this.lastValue = null;
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
@@ -189,16 +247,22 @@ class DatePickerComponent {
     ngOnInit() {
         const control = this.effectiveControl;
         // Synchronize signal model with control value
-        this.modelValue.set(control.value);
-        this.sub.add(control.valueChanges.subscribe(value => {
+        const initialValue = control.value;
+        this.modelValue.set(initialValue);
+        this.lastValue = initialValue;
+        control.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(value => {
             this.modelValue.set(value);
-        }));
+            this.lastValue = value;
+        });
     }
     ngOnDestroy() {
         this.sub.unsubscribe();
     }
     writeValue(value) {
         this.modelValue.set(value);
+        this.lastValue = value;
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -216,24 +280,56 @@ class DatePickerComponent {
      * Called when the PrimeNG DatePicker template updates the value.
      */
     onModelChange(value) {
-        this.modelValue.set(value);
-        this.onChange(value);
-        this.effectiveControl.setValue(value, { emitEvent: false });
+        let finalValue = value;
+        // Time cascading logic (single mode only)
+        if (this.selectionMode() === 'single' &&
+            finalValue instanceof Date &&
+            this.lastValue instanceof Date) {
+            finalValue = this.applyTimeCascading(this.lastValue, finalValue);
+        }
+        this.lastValue = finalValue;
+        this.modelValue.set(finalValue);
+        this.onChange(finalValue);
+        this.effectiveControl.setValue(finalValue, { emitEvent: false });
         this.effectiveControl.markAsDirty();
-        if (value === null) {
+        if (finalValue === null) {
             this.handleClear.emit();
         }
         else if (this.selectionMode() === 'range') {
-            if (Array.isArray(value)) {
-                const [start, end] = value;
+            if (Array.isArray(finalValue)) {
+                const [start, end] = finalValue;
                 if (start instanceof Date && end instanceof Date) {
-                    this.handleSelect.emit(value);
+                    this.handleSelect.emit(finalValue);
                 }
             }
         }
-        else if (value instanceof Date) {
-            this.handleSelect.emit(value);
+        else if (finalValue instanceof Date) {
+            this.handleSelect.emit(finalValue);
+        }
+    }
+    /**
+     * @method applyTimeCascading
+     * @private
+     * @description
+     * Adjusts the date when minutes or seconds wrap around.
+     */
+    applyTimeCascading(prev, curr) {
+        const updated = new Date(curr);
+        // Cascade seconds to minutes
+        if (prev.getSeconds() === 59 && updated.getSeconds() === 0) {
+            updated.setMinutes(updated.getMinutes() + 1);
+        }
+        else if (prev.getSeconds() === 0 && updated.getSeconds() === 59) {
+            updated.setMinutes(updated.getMinutes() - 1);
+        }
+        // Cascade minutes to hours
+        if (prev.getMinutes() === 59 && updated.getMinutes() === 0) {
+            updated.setHours(updated.getHours() + 1);
+        }
+        else if (prev.getMinutes() === 0 && updated.getMinutes() === 59) {
+            updated.setHours(updated.getHours() - 1);
         }
+        return updated;
     }
     /**
      * @method onBlur
@@ -253,18 +349,18 @@ class DatePickerComponent {
         this.onModelChange(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DatePickerComponent, isStandalone: true, selector: "tk-date-picker", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, stepHour: { classPropertyName: "stepHour", publicName: "stepHour", isSignal: true, isRequired: false, transformFunction: null }, stepMinute: { classPropertyName: "stepMinute", publicName: "stepMinute", isSignal: true, isRequired: false, transformFunction: null }, stepSecond: { classPropertyName: "stepSecond", publicName: "stepSecond", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelValue: "modelValueChange", handleSelect: "handleSelect", handleClear: "handleClear" }, ngImport: i0, template: "<div class=\"datepicker-container\" [class.inline]=\"inline()\">\n  @if (inline()) {\n    <p-datepicker\n      inputId=\"datepicker\"\n      [ngModel]=\"modelValue()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      (onBlur)=\"onBlur()\"\n      [selectionMode]=\"effectiveSelectionMode()\"\n      [readonlyInput]=\"readonlyInput()\"\n      [showClear]=\"showClear()\"\n      [showIcon]=\"showIcon()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabled]=\"effectiveControl.disabled\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"variant() === 'time'\"\n      [inline]=\"true\"\n      [showTime]=\"effectiveShowTime()\"\n      [hourFormat]=\"hourFormat()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"effectiveShowSeconds()\">\n    </p-datepicker>\n  } @else {\n    <p-floatlabel>\n      <p-datepicker\n        inputId=\"datepicker\"\n        iconDisplay=\"input\"\n        [ngModel]=\"modelValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (onBlur)=\"onBlur()\"\n        [selectionMode]=\"effectiveSelectionMode()\"\n        [readonlyInput]=\"readonlyInput()\"\n        [showClear]=\"showClear()\"\n        [showIcon]=\"showIcon()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"effectiveControl.disabled\"\n        [dateFormat]=\"effectiveDateFormat()\"\n        [timeOnly]=\"variant() === 'time'\"\n        [showTime]=\"effectiveShowTime()\"\n        [hourFormat]=\"hourFormat()\"\n        [appendTo]=\"appendTo()\"\n        [baseZIndex]=\"baseZIndex()\"\n        [stepHour]=\"stepHour()\"\n        [stepMinute]=\"stepMinute()\"\n        [stepSecond]=\"stepSecond()\"\n        [showSeconds]=\"effectiveShowSeconds()\">\n        <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n          <fa-icon\n            tabindex=\"0\"\n            [icon]=\"variant() === 'time' ? faClock : faCalendarDay\"\n            (keydown.enter)=\"clickCallBack($event)\"\n            (keydown.space)=\"clickCallBack($event)\"\n            (click)=\"clickCallBack($event)\">\n          </fa-icon>\n        </ng-template>\n      </p-datepicker>\n\n      <label for=\"datepicker\">{{ labelText() }}</label>\n    </p-floatlabel>\n  }\n</div>\n", styles: [":host ::ng-deep .p-datepicker{width:100%}:host ::ng-deep .p-datepicker-input{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-datepicker-input:focus{border-color:var(--tk-color-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)}.datepicker-container.inline{margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 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: [
+            args: [{ selector: 'tk-date-picker', imports: [
                         FormsModule,
                         ReactiveFormsModule,
                         DatePickerModule,
                         FloatLabelModule,
                         FaIconComponent,
-                    ], 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"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"datepicker-container\" [class.inline]=\"inline()\">\n  @if (inline()) {\n    <p-datepicker\n      inputId=\"datepicker\"\n      [ngModel]=\"modelValue()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      (onBlur)=\"onBlur()\"\n      [selectionMode]=\"effectiveSelectionMode()\"\n      [readonlyInput]=\"readonlyInput()\"\n      [showClear]=\"showClear()\"\n      [showIcon]=\"showIcon()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabled]=\"effectiveControl.disabled\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"variant() === 'time'\"\n      [inline]=\"true\"\n      [showTime]=\"effectiveShowTime()\"\n      [hourFormat]=\"hourFormat()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"effectiveShowSeconds()\">\n    </p-datepicker>\n  } @else {\n    <p-floatlabel>\n      <p-datepicker\n        inputId=\"datepicker\"\n        iconDisplay=\"input\"\n        [ngModel]=\"modelValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (onBlur)=\"onBlur()\"\n        [selectionMode]=\"effectiveSelectionMode()\"\n        [readonlyInput]=\"readonlyInput()\"\n        [showClear]=\"showClear()\"\n        [showIcon]=\"showIcon()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"effectiveControl.disabled\"\n        [dateFormat]=\"effectiveDateFormat()\"\n        [timeOnly]=\"variant() === 'time'\"\n        [showTime]=\"effectiveShowTime()\"\n        [hourFormat]=\"hourFormat()\"\n        [appendTo]=\"appendTo()\"\n        [baseZIndex]=\"baseZIndex()\"\n        [stepHour]=\"stepHour()\"\n        [stepMinute]=\"stepMinute()\"\n        [stepSecond]=\"stepSecond()\"\n        [showSeconds]=\"effectiveShowSeconds()\">\n        <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n          <fa-icon\n            tabindex=\"0\"\n            [icon]=\"variant() === 'time' ? faClock : faCalendarDay\"\n            (keydown.enter)=\"clickCallBack($event)\"\n            (keydown.space)=\"clickCallBack($event)\"\n            (click)=\"clickCallBack($event)\">\n          </fa-icon>\n        </ng-template>\n      </p-datepicker>\n\n      <label for=\"datepicker\">{{ labelText() }}</label>\n    </p-floatlabel>\n  }\n</div>\n", styles: [":host ::ng-deep .p-datepicker{width:100%}:host ::ng-deep .p-datepicker-input{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-datepicker-input:focus{border-color:var(--tk-color-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)}.datepicker-container.inline{margin-top:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], stepHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepHour", required: false }] }], stepMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinute", required: false }] }], stepSecond: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepSecond", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelValue", required: false }] }, { type: i0.Output, args: ["modelValueChange"] }], handleSelect: [{ type: i0.Output, args: ["handleSelect"] }], handleClear: [{ type: i0.Output, args: ["handleClear"] }] } });
 
 /**
  * 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  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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"}
+{"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  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  OnInit,\n  inject,\n  input,\n  model,\n  computed,\n  output,\n  OnDestroy,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  FormsModule,\n  ReactiveFormsModule,\n  FormControl,\n  ControlValueAccessor,\n  NgControl,\n} from '@angular/forms';\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';\nimport { Subscription } from 'rxjs';\n\nexport type DateValue = Date | [Date, Date] | null;\n\n@Component({\n  selector: 'tk-date-picker',\n  imports: [\n    FormsModule,\n    ReactiveFormsModule,\n    DatePickerModule,\n    FloatLabelModule,\n    FaIconComponent,\n  ],\n  templateUrl: './date-picker.component.html',\n  styleUrl: './date-picker.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\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, ControlValueAccessor, OnDestroy\n{\n  /** Internal references and injections */\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  /**\n   * @property {InputSignal<'date' | 'time' | 'both'>} variant\n   * @description\n   * Defines the visual and functional mode:\n   * - `'date'`: standard date/range picker\n   * - `'time'`: time-only picker\n   * - `'both'`: date and time picker\n   * @default 'date'\n   */\n  variant = input<'date' | 'time' | 'both'>('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 'dd/mm/yy'\n   */\n  dateFormat = input<string>('dd/mm/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   * Only applicable when hourFormat is '24'.\n   * @default false\n   */\n  showSeconds = input<boolean>(false);\n\n  /**\n   * @property {InputSignal<boolean>} inline\n   * @description\n   * Whether to display the datepicker inline.\n   * @default false\n   */\n  inline = input<boolean>(false);\n\n  /**\n   * @property {InputSignal<boolean>} showTime\n   * @description\n   * Whether to show the time picker along with the date picker.\n   * @default false\n   */\n  showTime = input<boolean>(false);\n\n  /**\n   * @property {InputSignal<'12' | '24'>} hourFormat\n   * @description\n   * Format of the hours: '12' or '24'.\n   * @default '24'\n   */\n  hourFormat = input<'12' | '24'>('24');\n\n  /**\n   * @property {InputSignal<string | HTMLElement | null | undefined>} appendTo\n   * @description\n   * Target element to attach the overlay to.\n   * @default 'null'\n   */\n  appendTo = input<string | HTMLElement | null | undefined>(null);\n\n  /**\n   * @property {InputSignal<number>} baseZIndex\n   * @description\n   * Base z-index value for the overlay.\n   * @default 10000\n   */\n  baseZIndex = input<number>(10000);\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<boolean>} effectiveShowSeconds\n   * @description\n   * Returns whether seconds should be shown, restricted to 24h format.\n   */\n  effectiveShowSeconds = computed(() => {\n    return (\n      (this.effectiveShowTime() || this.variant() === 'time') &&\n      this.hourFormat() === '24' &&\n      this.showSeconds()\n    );\n  });\n\n  /**\n   * @property {Signal<boolean>} effectiveShowTime\n   * @description\n   * Returns whether the time picker should be shown.\n   */\n  effectiveShowTime = computed(() => {\n    return this.variant() === 'both' || this.showTime();\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  private lastValue: DateValue = null;\n\n  ngOnInit(): void {\n    const control = this.effectiveControl;\n\n    // Synchronize signal model with control value\n    const initialValue = control.value;\n    this.modelValue.set(initialValue);\n    this.lastValue = initialValue;\n\n    control.valueChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(value => {\n        this.modelValue.set(value);\n        this.lastValue = value;\n      });\n  }\n\n  ngOnDestroy(): void {\n    this.sub.unsubscribe();\n  }\n\n  writeValue(value: DateValue): void {\n    this.modelValue.set(value);\n    this.lastValue = 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    let finalValue = value;\n\n    // Time cascading logic (single mode only)\n    if (\n      this.selectionMode() === 'single' &&\n      finalValue instanceof Date &&\n      this.lastValue instanceof Date\n    ) {\n      finalValue = this.applyTimeCascading(this.lastValue, finalValue);\n    }\n\n    this.lastValue = finalValue;\n    this.modelValue.set(finalValue);\n    this.onChange(finalValue);\n    this.effectiveControl.setValue(finalValue, { emitEvent: false });\n    this.effectiveControl.markAsDirty();\n\n    if (finalValue === null) {\n      this.handleClear.emit();\n    } else if (this.selectionMode() === 'range') {\n      if (Array.isArray(finalValue)) {\n        const [start, end] = finalValue;\n        if (start instanceof Date && end instanceof Date) {\n          this.handleSelect.emit(finalValue);\n        }\n      }\n    } else if (finalValue instanceof Date) {\n      this.handleSelect.emit(finalValue);\n    }\n  }\n\n  /**\n   * @method applyTimeCascading\n   * @private\n   * @description\n   * Adjusts the date when minutes or seconds wrap around.\n   */\n  private applyTimeCascading(prev: Date, curr: Date): Date {\n    const updated = new Date(curr);\n\n    // Cascade seconds to minutes\n    if (prev.getSeconds() === 59 && updated.getSeconds() === 0) {\n      updated.setMinutes(updated.getMinutes() + 1);\n    } else if (prev.getSeconds() === 0 && updated.getSeconds() === 59) {\n      updated.setMinutes(updated.getMinutes() - 1);\n    }\n\n    // Cascade minutes to hours\n    if (prev.getMinutes() === 59 && updated.getMinutes() === 0) {\n      updated.setHours(updated.getHours() + 1);\n    } else if (prev.getMinutes() === 0 && updated.getMinutes() === 59) {\n      updated.setHours(updated.getHours() - 1);\n    }\n\n    return updated;\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\" [class.inline]=\"inline()\">\n  @if (inline()) {\n    <p-datepicker\n      inputId=\"datepicker\"\n      [ngModel]=\"modelValue()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      (onBlur)=\"onBlur()\"\n      [selectionMode]=\"effectiveSelectionMode()\"\n      [readonlyInput]=\"readonlyInput()\"\n      [showClear]=\"showClear()\"\n      [showIcon]=\"showIcon()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabled]=\"effectiveControl.disabled\"\n      [dateFormat]=\"effectiveDateFormat()\"\n      [timeOnly]=\"variant() === 'time'\"\n      [inline]=\"true\"\n      [showTime]=\"effectiveShowTime()\"\n      [hourFormat]=\"hourFormat()\"\n      [stepHour]=\"stepHour()\"\n      [stepMinute]=\"stepMinute()\"\n      [stepSecond]=\"stepSecond()\"\n      [showSeconds]=\"effectiveShowSeconds()\">\n    </p-datepicker>\n  } @else {\n    <p-floatlabel>\n      <p-datepicker\n        inputId=\"datepicker\"\n        iconDisplay=\"input\"\n        [ngModel]=\"modelValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (onBlur)=\"onBlur()\"\n        [selectionMode]=\"effectiveSelectionMode()\"\n        [readonlyInput]=\"readonlyInput()\"\n        [showClear]=\"showClear()\"\n        [showIcon]=\"showIcon()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabled]=\"effectiveControl.disabled\"\n        [dateFormat]=\"effectiveDateFormat()\"\n        [timeOnly]=\"variant() === 'time'\"\n        [showTime]=\"effectiveShowTime()\"\n        [hourFormat]=\"hourFormat()\"\n        [appendTo]=\"appendTo()\"\n        [baseZIndex]=\"baseZIndex()\"\n        [stepHour]=\"stepHour()\"\n        [stepMinute]=\"stepMinute()\"\n        [stepSecond]=\"stepSecond()\"\n        [showSeconds]=\"effectiveShowSeconds()\">\n        <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n          <fa-icon\n            tabindex=\"0\"\n            [icon]=\"variant() === 'time' ? faClock : faCalendarDay\"\n            (keydown.enter)=\"clickCallBack($event)\"\n            (keydown.space)=\"clickCallBack($event)\"\n            (click)=\"clickCallBack($event)\">\n          </fa-icon>\n        </ng-template>\n      </p-datepicker>\n\n      <label for=\"datepicker\">{{ labelText() }}</label>\n    </p-floatlabel>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;AA0CA;;;;;;AAMG;MACU,mBAAmB,CAAA;AAO9B,IAAA,WAAA,GAAA;;AAHS,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACrD,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAQhD;;;;;;;;AAQG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAA2B,MAAM,8EAAC;AAEjD;;;;;;;AAOG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAqB,OAAO,oFAAC;AAElD;;;;;AAKG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAU,IAAI,oFAAC;AAEpC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,IAAI,gFAAC;AAEhC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,IAAI,+EAAC;AAE/B;;;;;AAKG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,UAAU,iFAAC;AAEtC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,OAAO,iFAAC;AAEnC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,CAAC,+EAAC;AAE3B;;;;;AAKG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,CAAC,iFAAC;AAE7B;;;;;AAKG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,CAAC,iFAAC;AAE7B;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,KAAK,kFAAC;AAEnC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAU,KAAK,6EAAC;AAE9B;;;;;AAKG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAEhC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAc,IAAI,iFAAC;AAErC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAA0C,IAAI,+EAAC;AAE/D;;;;;AAKG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,KAAK,iFAAC;AAEjC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAc,IAAI,8EAAC;AAElC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAc,IAAI,8EAAC;AAElC;;;;AAIG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAS,eAAe,gFAAC;AAE1C;;;;;AAKG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAA0B,SAAS,8EAAC;AAEnD;;;;AAIG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAY,IAAI,iFAAC;AAEnC;;;;AAIG;QACH,IAAA,CAAA,YAAY,GAAG,MAAM,EAAa;AAElC;;;;AAIG;QACH,IAAA,CAAA,WAAW,GAAG,MAAM,EAAQ;;AAI5B;;;;AAIG;AACH,QAAA,IAAA,CAAA,sBAAsB,GAAG,QAAQ,CAAC,MAAK;AACrC,YAAA,OAAO,IAAI,CAAC,OAAO,EAAE,KAAK,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE;AACpE,QAAA,CAAC,6FAAC;AAEF;;;;AAIG;AACH,QAAA,IAAA,CAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAK;YAClC,OAAO,IAAI,CAAC,OAAO,EAAE,KAAK,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AAC1E,QAAA,CAAC,0FAAC;AAEF;;;;AAIG;AACH,QAAA,IAAA,CAAA,oBAAoB,GAAG,QAAQ,CAAC,MAAK;AACnC,YAAA,QACE,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,MAAM;AACtD,gBAAA,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI;AAC1B,gBAAA,IAAI,CAAC,WAAW,EAAE;AAEtB,QAAA,CAAC,2FAAC;AAEF;;;;AAIG;AACH,QAAA,IAAA,CAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAK;YAChC,OAAO,IAAI,CAAC,OAAO,EAAE,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,EAAE;AACrD,QAAA,CAAC,wFAAC;AAEF;;;;AAIG;AACH,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,WAAW,CAAY,IAAI,CAAC;;QAUlD,IAAA,CAAA,aAAa,GAAG,aAAa;QAC7B,IAAA,CAAA,OAAO,GAAG,OAAO;;AAGjB,QAAA,IAAA,CAAA,QAAQ,GAA+B,MAAK,EAAE,CAAC;AAC/C,QAAA,IAAA,CAAA,SAAS,GAAe,MAAK,EAAE,CAAC;AACf,QAAA,IAAA,CAAA,GAAG,GAAG,IAAI,YAAY,EAAE;QACjC,IAAA,CAAA,SAAS,GAAc,IAAI;AA/PjC,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;QACrC;IACF;AA4OA,IAAA,IAAI,gBAAgB,GAAA;AAClB,QAAA,QACG,IAAI,CAAC,SAAS,EAAE,OAAuB;YACxC,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,eAAe;IAExB;IAYA,QAAQ,GAAA;AACN,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB;;AAGrC,QAAA,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK;AAClC,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,YAAY,CAAC;AACjC,QAAA,IAAI,CAAC,SAAS,GAAG,YAAY;AAE7B,QAAA,OAAO,CAAC;AACL,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,KAAK,IAAG;AACjB,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;AAC1B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,QAAA,CAAC,CAAC;IACN;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE;IACxB;AAEA,IAAA,UAAU,CAAC,KAAgB,EAAA;AACzB,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;AAC1B,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;IACxB;AAEA,IAAA,gBAAgB,CAAC,EAA8B,EAAA;AAC7C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;QAClC,MAAM,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ;AAChD,QAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;IACrD;AAEA;;;;AAIG;AACH,IAAA,aAAa,CAAC,KAAgB,EAAA;QAC5B,IAAI,UAAU,GAAG,KAAK;;AAGtB,QAAA,IACE,IAAI,CAAC,aAAa,EAAE,KAAK,QAAQ;AACjC,YAAA,UAAU,YAAY,IAAI;AAC1B,YAAA,IAAI,CAAC,SAAS,YAAY,IAAI,EAC9B;YACA,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;QAClE;AAEA,QAAA,IAAI,CAAC,SAAS,GAAG,UAAU;AAC3B,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC;AAC/B,QAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;AACzB,QAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AAChE,QAAA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE;AAEnC,QAAA,IAAI,UAAU,KAAK,IAAI,EAAE;AACvB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;QACzB;AAAO,aAAA,IAAI,IAAI,CAAC,aAAa,EAAE,KAAK,OAAO,EAAE;AAC3C,YAAA,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;AAC7B,gBAAA,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,UAAU;gBAC/B,IAAI,KAAK,YAAY,IAAI,IAAI,GAAG,YAAY,IAAI,EAAE;AAChD,oBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;gBACpC;YACF;QACF;AAAO,aAAA,IAAI,UAAU,YAAY,IAAI,EAAE;AACrC,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;QACpC;IACF;AAEA;;;;;AAKG;IACK,kBAAkB,CAAC,IAAU,EAAE,IAAU,EAAA;AAC/C,QAAA,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC;;AAG9B,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE;YAC1D,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAC9C;AAAO,aAAA,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,OAAO,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE;YACjE,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAC9C;;AAGA,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE;YAC1D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QAC1C;AAAO,aAAA,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,OAAO,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE;YACjE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QAC1C;AAEA,QAAA,OAAO,OAAO;IAChB;AAEA;;;;AAIG;IACH,MAAM,GAAA;QACJ,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE;IACvC;AAEA;;;;AAIG;IACH,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;IAC1B;8GA/XW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjDhC,myEAgEA,EAAA,MAAA,EAAA,CAAA,02CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDhCI,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACX,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACnB,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,YAAA,EAAA,YAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,eAAA,EAAA,YAAA,EAAA,mBAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,MAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,YAAA,EAAA,aAAA,EAAA,aAAA,EAAA,UAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,UAAA,EAAA,eAAA,EAAA,cAAA,EAAA,eAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,SAAA,EAAA,eAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,UAAA,EAAA,SAAA,EAAA,SAAA,EAAA,eAAA,EAAA,cAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,aAAA,EAAA,UAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,SAAA,EAAA,cAAA,EAAA,cAAA,EAAA,eAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAChB,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,aAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,cAAA,EAAA,eAAA,EAAA,cAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAaN,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBApB/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,OAAA,EACjB;wBACP,WAAW;wBACX,mBAAmB;wBACnB,gBAAgB;wBAChB,gBAAgB;wBAChB,eAAe;qBAChB,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,myEAAA,EAAA,MAAA,EAAA,CAAA,02CAAA,CAAA,EAAA;;;AExCjD;;AAEG;;;;"}

package/fesm2022/tekus-design-system-components-drawer.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, viewChild, ViewContainerRef, input, computed, model, EventEmitter, effect, untracked, afterEveryRender, Component, ApplicationRef, createComponent, Injectable } from '@angular/core';
+import { inject, ElementRef, viewChild, ViewContainerRef, input, computed, model, output, effect, untracked, afterEveryRender, ChangeDetectionStrategy, Component, ApplicationRef, createComponent, Injectable } from '@angular/core';
 import { ButtonComponent } from '@tekus/design-system/components/button';
 import * as i1 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
@@ -76,7 +76,7 @@ class DrawerComponent {
         /** Whether the drawer content has a scrollbar */
         this.hasScroll = false;
         /** Emits when the drawer closes, passing the return value from header action or null */
-        this.onClose = new EventEmitter();
+        this.closed = output();
         this.alreadyEmitted = false;
         this.returnValueOnClose = null;
         /**
@@ -188,7 +188,7 @@ class DrawerComponent {
             return;
         }
         const valueToEmit = this.alreadyEmitted ? this.returnValueOnClose : null;
-        this.onClose.emit(valueToEmit);
+        this.closed.emit(valueToEmit);
         this.resetClosureState();
     }
     /** Forcefully closes the drawer without checks */
@@ -208,14 +208,14 @@ class DrawerComponent {
         this.returnValueOnClose = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DrawerComponent, isStandalone: true, selector: "tk-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, headerAction: { classPropertyName: "headerAction", publicName: "headerAction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, interceptor: { classPropertyName: "interceptor", publicName: "interceptor", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  (onHide)=\"handleClose()\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-drawer__header\">\n      <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n      @if (hasHeaderAction()) {\n        <div class=\"tk-drawer__actions\">\n          <tk-button\n            [label]=\"headerAction()!.label\"\n            [severity]=\"headerAction()!.severity\"\n            [variant]=\"headerAction()!.variant\"\n            (clicked)=\"\n              handleHeaderAction(\n                headerAction()!.action,\n                headerAction()!.returnValue\n              )\n            \" />\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-paddingX-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-paddingX-xs, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DrawerComponent, isStandalone: true, selector: "tk-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, headerAction: { classPropertyName: "headerAction", publicName: "headerAction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, interceptor: { classPropertyName: "interceptor", publicName: "interceptor", isSignal: true, isRequired: false, transformFunction: null }, isOpened: { classPropertyName: "isOpened", publicName: "isOpened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpened: "isOpenedChange", closed: "closed" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  (onHide)=\"handleClose()\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-drawer__header\">\n      <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n      @if (hasHeaderAction()) {\n        <div class=\"tk-drawer__actions\">\n          <tk-button\n            [label]=\"headerAction()!.label\"\n            [severity]=\"headerAction()!.severity\"\n            [variant]=\"headerAction()!.variant\"\n            (clicked)=\"\n              handleHeaderAction(\n                headerAction()!.action,\n                headerAction()!.returnValue\n              )\n            \" />\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-paddingX-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-paddingX-xs, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-drawer', standalone: true, imports: [DrawerModule, ButtonComponent], template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  (onHide)=\"handleClose()\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-drawer__header\">\n      <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n      @if (hasHeaderAction()) {\n        <div class=\"tk-drawer__actions\">\n          <tk-button\n            [label]=\"headerAction()!.label\"\n            [severity]=\"headerAction()!.severity\"\n            [variant]=\"headerAction()!.variant\"\n            (clicked)=\"\n              handleHeaderAction(\n                headerAction()!.action,\n                headerAction()!.returnValue\n              )\n            \" />\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-paddingX-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-paddingX-xs, .25rem)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-drawer', imports: [DrawerModule, ButtonComponent], template: "<p-drawer\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissible]=\"dismissible()\"\n  [closeOnEscape]=\"true\"\n  position=\"right\"\n  [style]=\"drawerStyle()\"\n  [styleClass]=\"'tk-drawer'\"\n  [class.tk-drawer--has-scroll]=\"hasScroll\"\n  (onHide)=\"handleClose()\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"tk-drawer__header\">\n      <h2 class=\"tk-drawer__title\" [title]=\"title()\">{{ title() }}</h2>\n      @if (hasHeaderAction()) {\n        <div class=\"tk-drawer__actions\">\n          <tk-button\n            [label]=\"headerAction()!.label\"\n            [severity]=\"headerAction()!.severity\"\n            [variant]=\"headerAction()!.variant\"\n            (clicked)=\"\n              handleHeaderAction(\n                headerAction()!.action,\n                headerAction()!.returnValue\n              )\n            \" />\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <section class=\"tk-drawer__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n</p-drawer>\n", styles: [":host ::ng-deep .tk-drawer{max-height:100vh;display:flex;flex-direction:column}:host ::ng-deep .tk-drawer__content{flex:1;overflow-y:auto;padding:var(--tk-spacing-paddingX-m, 1.5rem)}:host ::ng-deep .p-drawer-content{overflow-y:auto;display:flex;flex-direction:column;flex:1}:host ::ng-deep .p-drawer-close-button{color:var(--tk-color-base-surface-500, #8a8a8b)}:host ::ng-deep .p-drawer-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-color-base-surface-500, #8a8a8b)}.tk-drawer--has-scroll .p-drawer-header{border-bottom:1px solid var(--tk-color-base-surface-200, #e2e8f0);box-shadow:0 2px 4px #00000005}.tk-drawer__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--tk-spacing-base-100, 1rem);flex-shrink:0;width:calc(100% - var(--tk-spacing-base-250, 2.5rem))}.tk-drawer__title{margin:0;font-size:var(--tk-font-size-headers-s, 1.125rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #212121);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.tk-drawer__actions{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-base-50, .5rem);flex-shrink:0;padding-right:var(--tk-spacing-paddingX-xs, .25rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ['contentHost', { ...{
                             read: ViewContainerRef,
-                        }, isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], headerAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], interceptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "interceptor", required: false }] }], isOpened: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpened", required: false }] }, { type: i0.Output, args: ["isOpenedChange"] }] } });
+                        }, isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], headerAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], interceptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "interceptor", required: false }] }], isOpened: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpened", required: false }] }, { type: i0.Output, args: ["isOpenedChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 class DrawerService {
     constructor() {
@@ -251,7 +251,7 @@ class DrawerService {
         componentRef.setInput('data', config.data ?? {});
         componentRef.setInput('interceptor', config.interceptor ?? undefined);
         const close$ = new Subject();
-        componentRef.instance.onClose.subscribe(value => {
+        componentRef.instance.closed.subscribe(value => {
             close$.next(value);
             close$.complete();
             this.appRef.detachView(componentRef.hostView);