@tekus/design-system 5.19.0 → 5.21.0

package/components/checkbox/src/checkbox.component.d.ts

@@ -2,8 +2,13 @@ import { OnInit, OnDestroy } from '@angular/core';
 import { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class CheckboxComponent implements ControlValueAccessor, OnInit, OnDestroy {
+    /** Internal references and injections */
     readonly ngControl: NgControl | null;
+    /**
+     * Initialize the component and register it as a ControlValueAccessor.
+     */
     constructor();
+    /** Properties and Signals */
     /**
      * @property {ModelSignal<any>} model
      * @description
@@ -68,17 +73,36 @@ export declare class CheckboxComponent implements ControlValueAccessor, OnInit,
      * Whether the checkbox is disabled.
      */
     disabled: import("@angular/core").ModelSignal<boolean>;
+    /** Component Methods */
     get effectiveControl(): FormControl;
     onChange: (value: unknown) => void;
     onTouched: () => void;
     private readonly subscription;
     ngOnInit(): void;
     ngOnDestroy(): void;
+    /**
+     * Implementation of ControlValueAccessor: Writes a new value from the form.
+     */
     writeValue(value: unknown): void;
+    /**
+     * Implementation of ControlValueAccessor: Registers a callback for change events.
+     */
     registerOnChange(fn: (value: unknown) => void): void;
+    /**
+     * Implementation of ControlValueAccessor: Registers a callback for touched events.
+     */
     registerOnTouched(fn: () => void): void;
+    /**
+     * Implementation of ControlValueAccessor: Sets the disabled state.
+     */
     setDisabledState?(isDisabled: boolean): void;
+    /**
+     * Handle model change events from the template.
+     */
     onModelChange(value: unknown): void;
+    /**
+     * Handle blur events to trigger onTouched.
+     */
     onBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "tk-checkbox", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "binary": { "alias": "binary"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "indeterminate": "indeterminateChange"; "disabled": "disabledChange"; }, never, never, true, never>;

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

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

package/components/drawer/src/drawer.component.d.ts

@@ -1,5 +1,6 @@
-import { EventEmitter, Type, ElementRef } from '@angular/core';
+import { EventEmitter, Type, ElementRef, OnDestroy } from '@angular/core';
 import { DrawerHeaderAction, DrawerSizeType } from './drawer.types';
+import { TkCloseInterceptor } from '@tekus/design-system/core/types';
 import * as i0 from "@angular/core";
 /**
  * @component DrawerComponent
@@ -33,14 +34,16 @@ import * as i0 from "@angular/core";
  *   console.log('Drawer closed with value:', result);
  * });
  * ```
+ * Modernized for Angular 19 with 100% synchronous Signal-based closing interception.
  */
-export declare class DrawerComponent {
+export declare class DrawerComponent<T = unknown> implements OnDestroy {
     private readonly elementRef;
-    constructor(elementRef: ElementRef);
+    private readonly contentHost;
+    private componentRef?;
     /** The required title displayed at the top left of the drawer header */
     title: import("@angular/core").InputSignal<string>;
-    /** The main content of the drawer */
-    content: import("@angular/core").InputSignal<string | Type<unknown> | null>;
+    /** The main content of the drawer. Can be a string or a Component Type. */
+    content: import("@angular/core").InputSignal<string | Type<T> | null>;
     /** Optional header action button (displayed before close button) */
     headerAction: import("@angular/core").InputSignal<DrawerHeaderAction | null>;
     /** Drawer size: 'small' (500px), 'large' (1024px) */
@@ -49,6 +52,10 @@ export declare class DrawerComponent {
     closable: import("@angular/core").InputSignal<boolean>;
     /** Whether clicking the mask closes the drawer */
     dismissible: import("@angular/core").InputSignal<boolean>;
+    /** Optional data to be passed as inputs to the dynamic component. */
+    data: import("@angular/core").InputSignal<Partial<T>>;
+    /** Optional interceptor called before the drawer closes. */
+    interceptor: import("@angular/core").InputSignal<TkCloseInterceptor | undefined>;
     isContentString: import("@angular/core").Signal<boolean>;
     hasHeaderAction: import("@angular/core").Signal<boolean>;
     /** Computed: drawer width (responsive) and max-width based on `size`. Always right position. */
@@ -58,21 +65,41 @@ export declare class DrawerComponent {
     }>;
     /** Visibility flag. Use model for two-way binding when using drawer in template. */
     isOpened: import("@angular/core").ModelSignal<boolean>;
+    /** Whether the drawer content has a scrollbar */
+    hasScroll: boolean;
     /** Emits when the drawer closes, passing the return value from header action or null */
     readonly onClose: EventEmitter<unknown>;
     private alreadyEmitted;
     private returnValueOnClose;
+    constructor(elementRef: ElementRef);
+    ngOnDestroy(): void;
+    private attachDynamicContent;
+    private syncDynamicInputs;
+    private detachDynamicContent;
+    /**
+     * Checks if the drawer content has a scrollbar and updates `hasScroll` state.
+     */
+    checkScroll(): void;
     /** Opens the drawer */
     open(): void;
+    /**
+     * @summary Main entry point for closure requests.
+     * @returns true if closure was executed.
+     */
+    tryClose(returnValue?: unknown): boolean;
+    private canExecuteClosure;
+    private executeClosure;
+    /** Handles external visibility changes (from p-drawer close button or mask) */
+    onVisibleChange(visible: boolean): void;
     /** Closes the drawer and emits onClose */
     handleClose(): void;
-    /** Closes the drawer without emitting an event */
+    /** Forcefully closes the drawer without checks */
     close(): void;
     /**
      * Handles header action button click.
-     * Executes the action callback, emits onClose with the provided returnValue, then closes the drawer.
      */
     handleHeaderAction(action: (() => void) | undefined, returnValue: unknown): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DrawerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DrawerComponent, "tk-drawer", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "headerAction": { "alias": "headerAction"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "isOpened": "isOpenedChange"; }, never, never, true, never>;
+    private resetClosureState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DrawerComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DrawerComponent<any>, "tk-drawer", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "headerAction": { "alias": "headerAction"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "interceptor": { "alias": "interceptor"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "isOpened": "isOpenedChange"; }, never, never, true, never>;
 }

package/components/drawer/src/drawer.types.d.ts

@@ -1,6 +1,7 @@
 import { Type } from '@angular/core';
 import { Variant } from '@tekus/design-system/components/button';
 import { SeverityType } from '@tekus/design-system/components/modal';
+import { TkCloseInterceptor } from '@tekus/design-system/core/types';
 export type DrawerSizeType = 'small' | 'large';
 export interface DrawerHeaderAction {
     label: string;
@@ -9,11 +10,13 @@ export interface DrawerHeaderAction {
     returnValue?: unknown;
     variant?: Variant;
 }
-export interface DrawerConfig {
+export interface DrawerConfig<T = unknown> {
     title: string;
-    content?: string | Type<unknown>;
+    content?: string | Type<T>;
     headerAction?: DrawerHeaderAction;
     size?: DrawerSizeType;
     closable?: boolean;
     dismissible?: boolean;
+    data?: Partial<T>;
+    interceptor?: TkCloseInterceptor;
 }

package/components/drawer/src/services/drawer.service.d.ts

@@ -7,8 +7,8 @@ export declare class DrawerService {
     private readonly appRef;
     private drawerRef;
     constructor(appRef: ApplicationRef);
-    get _drawerRefForTesting(): ComponentRef<DrawerComponent> | null;
-    set _drawerRefForTesting(ref: ComponentRef<DrawerComponent> | null);
+    get _drawerRefForTesting(): ComponentRef<DrawerComponent<unknown>> | null;
+    set _drawerRefForTesting(ref: ComponentRef<DrawerComponent<unknown>> | null);
     open(config: DrawerConfig): Observable<unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DrawerService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DrawerService>;

package/components/modal/src/modal.component.d.ts

@@ -1,99 +1,118 @@
-import { EventEmitter, Type, ElementRef } from '@angular/core';
+import { EventEmitter, Type, ElementRef, OnDestroy } from '@angular/core';
 import { ModalFooterButton, ModalSizeType } from './modal.types';
+import { TkCloseInterceptor } from '@tekus/design-system/core/types';
 import * as i0 from "@angular/core";
 /**
  * @component ModalComponent
  * @description
- * A programmatically controlled modal dialog used for displaying dynamic content, titles, and footer actions.
- * The modal is not instantiated via template bindings, but rather opened through a service with a configuration object.
- *
- * This component supports:
- * - Configurable title and content.
- * - Optional footer buttons with callbacks and return values.
- * - Multiple sizes: `'small' | 'large' | 'full'`.
- * - Closable modal and outside-click behavior.
- * - Passing arbitrary data to the modal instance.
- *
- * @usage
- * ### Open a modal from TypeScript using the modal service
- * ```ts
- * this.modalService.open({
- *   title: 'Demo Modal',
- *   content: 'This modal is opened from TypeScript using the service.',
- *   footerButtons: [
- *     {
- *       label: 'Accept',
- *       severity: 'secondary',
- *       action: () => console.log('Accept clicked'),
- *       returnValue: true,
- *     },
- *     {
- *       label: 'Cancel',
- *       severity: 'danger',
- *       action: () => console.log('Cancel clicked'),
- *       returnValue: false,
- *     },
- *   ],
- *   size: 'small',
- *   closable: true,
- *   closeOnOutsideClick: false,
- * }).subscribe((result) => {
- *   console.log('Modal closed with value:', result);
- * });
- * ```
+ * A programmatically controlled modal dialog used for displaying dynamic content.
+ * Modernized for Angular 19 with 100% synchronous Signal-based closing interception.
  */
-export declare class ModalComponent {
+export declare class ModalComponent<T = unknown> implements OnDestroy {
     private readonly elementRef;
-    constructor(elementRef: ElementRef);
+    private readonly contentHost;
+    private componentRef?;
     /** The title displayed at the top of the modal */
     title: import("@angular/core").InputSignal<string>;
-    /** The main content of the modal */
-    content: import("@angular/core").InputSignal<string | Type<unknown> | null>;
+    /** The main content of the modal. Can be a string or a Component Type. */
+    content: import("@angular/core").InputSignal<string | Type<T> | null>;
     /** Array of footer buttons with label, callback, and return value */
     footerButtons: import("@angular/core").InputSignal<ModalFooterButton[]>;
-    /** Modal size: 'small', 'large', or 'full' */
+    /** Modal size: 'small', 'large', 'medium' or 'full' */
     size: import("@angular/core").InputSignal<ModalSizeType>;
-    /** Whether the modal can be closed by the user */
+    /** Whether the modal can be closed by the user via close button */
     closable: import("@angular/core").InputSignal<boolean>;
-    /** Whether clicking outside closes the modal */
+    /** Whether clicking outside the modal mask closes the modal */
     closeOnOutsideClick: import("@angular/core").InputSignal<boolean>;
-    isContentString: import("@angular/core").Signal<boolean>;
-    /** Computed: whether the modal has footer buttons */
-    hasFooter: import("@angular/core").Signal<boolean>;
     /**
-     * Whether the modal should be responsive on mobile screens.
-     * If true, the modal width will adapt based on breakpoints.
-     * @default true
+     * Optional data to be passed as inputs to the dynamic component.
+     */
+    data: import("@angular/core").InputSignal<Partial<T>>;
+    /**
+     * Optional interceptor called before the modal closes.
+     * MUST be synchronous. Returns true to allow closing.
      */
+    interceptor: import("@angular/core").InputSignal<TkCloseInterceptor | undefined>;
+    /** Computed: whether the content is a simple string */
+    isContentString: import("@angular/core").Signal<boolean>;
+    /** Computed: whether the modal has footer buttons to display */
+    hasFooter: import("@angular/core").Signal<boolean>;
+    /** Whether the modal should be responsive on mobile screens */
     responsive: import("@angular/core").InputSignal<boolean>;
-    /** Computed: calculates modal max-width based on `size` */
-    modalMaxWidth: import("@angular/core").Signal<"67.5rem" | "35rem" | "98vw" | "25rem">;
+    /** Visibility flag as Model Signal (allows two-way binding) */
+    isOpened: import("@angular/core").ModelSignal<boolean>;
     /** Whether the modal content has a scrollbar */
     hasScroll: boolean;
-    /** Visibility flag */
-    isOpened: boolean;
     /** Emits when the modal closes, passing the return value from footer buttons or null */
     readonly onClose: EventEmitter<unknown>;
     private alreadyEmitted;
     private returnValueOnClose;
-    /** Opens the modal */
-    open(): void;
+    constructor(elementRef: ElementRef);
+    /** Computed: calculates modal max-width based on `size` */
+    modalMaxWidth: import("@angular/core").Signal<"67.5rem" | "35rem" | "98vw" | "25rem">;
+    ngOnDestroy(): void;
+    /**
+     * @summary Orchestrates dynamic rendering and destruction based on visibility.
+     * @private
+     */
+    private attachDynamicContent;
+    /**
+     * @summary Synchronizes incoming data record with the dynamic instance @Inputs.
+     * @private
+     */
+    private syncDynamicInputs;
+    /**
+     * @summary Safely destroys the dynamic component and clears references.
+     * @private
+     */
+    private detachDynamicContent;
     /**
      * Checks if the modal content has a scrollbar and updates `hasScroll` state.
-     * This is called when the modal is shown.
      */
     checkScroll(): void;
-    /** Closes the modal and emits onClose with null */
+    /**
+     * Opens the modal dialog.
+     */
+    open(): void;
+    /**
+     * @summary Main entry point for closure requests.
+     * Evaluation is 100% synchronous based on current Signal state.
+     * @param returnValue (Optional) Value to emit on close.
+     */
+    tryClose(returnValue?: unknown): void;
+    /**
+     * @summary Synchronous evaluator of hierarchical guards.
+     * @returns true if closure is allowed.
+     * @private
+     */
+    private canExecuteClosure;
+    /**
+     * @summary Unified logic to execute the final closure state change.
+     * @private
+     */
+    private executeClosure;
+    /**
+     * @summary Handles external visibility changes (from p-dialog 'X' or Escape).
+     * Ensures the reactive guard is respected before allowing closure.
+     */
+    onVisibleChange(visible: boolean): void;
+    /**
+     * Handles the close event from the underlying dialog component.
+     */
     handleClose(): void;
-    /** Closes the modal without emitting an event */
-    close(): void;
     /**
-     * Handles footer button actions.
-     * Executes the action callback, emits `onClose` with the provided returnValue, then closes the modal.
-     * @param action Callback to execute when the button is clicked
-     * @param returnValue Value emitted on modal close
+     * @summary Handles actions triggered by footer buttons.
      */
     handleAction(action: (() => void) | undefined, returnValue: unknown): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "tk-modal", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "footerButtons": { "alias": "footerButtons"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    /**
+     * @summary Safely closes the modal forcefully without checks.
+     */
+    close(): void;
+    /**
+     * @private
+     * Encapsulates state cleanup to avoid repetitive assignments
+     */
+    private resetClosureState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent<any>, "tk-modal", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "footerButtons": { "alias": "footerButtons"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "interceptor": { "alias": "interceptor"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "isOpened": "isOpenedChange"; }, never, never, true, never>;
 }