@tekus/design-system 5.22.1 → 5.24.0

package/fesm2022/tekus-design-system-components-input-number.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, model, input, signal, Component } from '@angular/core';
+import { inject, DestroyRef, model, input, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { NgControl, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { Subscription } from 'rxjs';
 import * as i2 from 'primeng/floatlabel';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { InputNumber } from 'primeng/inputnumber';
@@ -11,6 +11,7 @@ import { Message } from 'primeng/message';
 class InputNumberComponent {
     constructor() {
         this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.destroyRef = inject(DestroyRef);
         /**
          * @property {ModelSignal<number | null>} value
          * @description
@@ -59,7 +60,6 @@ class InputNumberComponent {
         this.onChange = () => { };
         this.onTouched = () => { };
         this.isWriting = false;
-        this.subscription = new Subscription();
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
@@ -73,20 +73,21 @@ class InputNumberComponent {
             this.value.set(control.value);
         }
         this.disabled.set(control?.disabled ?? false);
-        this.subscription.add(control?.valueChanges.subscribe(val => {
+        control?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(val => {
             if (this.isWriting)
                 return;
             if (val !== this.value()) {
                 this.value.set(val ?? null);
                 this.onChange(val);
             }
-        }));
-        this.subscription.add(control?.statusChanges.subscribe(() => {
+        });
+        control?.statusChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
             this.disabled.set(control?.disabled ?? false);
-        }));
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
+        });
     }
     /**
      * @method writeValue
@@ -148,17 +149,17 @@ class InputNumberComponent {
         this.effectiveControl?.markAsTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: InputNumberComponent, isStandalone: true, selector: "tk-input-number", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    <p-inputnumber\n      [inputId]=\"id()\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"onInput($event)\"\n      (onBlur)=\"onBlur()\"\n      [showButtons]=\"showButtons()\"\n      [disabled]=\"disabled()\"\n      mode=\"decimal\"\n      [useGrouping]=\"false\"\n      [class.ng-invalid]=\"effectiveControl?.invalid\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\"\n      [class.ng-touched]=\"effectiveControl?.touched\" />\n\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl?.invalid && (effectiveControl?.dirty ||\n    effectiveControl?.touched)) && errorMessage()) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n      errorMessage()\n    }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-inputnumber-input{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-inputnumber-input:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputnumber-input.ng-invalid.ng-dirty,:host ::ng-deep .p-inputnumber-input.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputnumber-input:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .p-inputnumber{display:flex}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.p-inputnumber-input.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputnumber-input.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-input-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: InputNumberComponent, isStandalone: true, selector: "tk-input-number", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    <p-inputnumber\n      [inputId]=\"id()\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"onInput($event)\"\n      (onBlur)=\"onBlur()\"\n      [showButtons]=\"showButtons()\"\n      [disabled]=\"disabled()\"\n      mode=\"decimal\"\n      [useGrouping]=\"false\"\n      [class.ng-invalid]=\"effectiveControl?.invalid\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\"\n      [class.ng-touched]=\"effectiveControl?.touched\" />\n\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl?.invalid && (effectiveControl?.dirty ||\n    effectiveControl?.touched)) && errorMessage()) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n      errorMessage()\n    }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-inputnumber-input{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-inputnumber-input:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputnumber-input.ng-invalid.ng-dirty,:host ::ng-deep .p-inputnumber-input.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputnumber-input:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .p-inputnumber{display:flex}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.p-inputnumber-input.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputnumber-input.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-input-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-input-number', standalone: true, imports: [
+            args: [{ selector: 'tk-input-number', imports: [
                         ReactiveFormsModule,
                         FormsModule,
                         InputNumber,
                         FloatLabelModule,
-                        Message
-                    ], template: "<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    <p-inputnumber\n      [inputId]=\"id()\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"onInput($event)\"\n      (onBlur)=\"onBlur()\"\n      [showButtons]=\"showButtons()\"\n      [disabled]=\"disabled()\"\n      mode=\"decimal\"\n      [useGrouping]=\"false\"\n      [class.ng-invalid]=\"effectiveControl?.invalid\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\"\n      [class.ng-touched]=\"effectiveControl?.touched\" />\n\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl?.invalid && (effectiveControl?.dirty ||\n    effectiveControl?.touched)) && errorMessage()) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n      errorMessage()\n    }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-inputnumber-input{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-inputnumber-input:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputnumber-input.ng-invalid.ng-dirty,:host ::ng-deep .p-inputnumber-input.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputnumber-input:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .p-inputnumber{display:flex}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.p-inputnumber-input.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputnumber-input.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-input-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\n"] }]
+                        Message,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    <p-inputnumber\n      [inputId]=\"id()\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"onInput($event)\"\n      (onBlur)=\"onBlur()\"\n      [showButtons]=\"showButtons()\"\n      [disabled]=\"disabled()\"\n      mode=\"decimal\"\n      [useGrouping]=\"false\"\n      [class.ng-invalid]=\"effectiveControl?.invalid\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\"\n      [class.ng-touched]=\"effectiveControl?.touched\" />\n\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl?.invalid && (effectiveControl?.dirty ||\n    effectiveControl?.touched)) && errorMessage()) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n      errorMessage()\n    }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-inputnumber-input{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-inputnumber-input:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputnumber-input.ng-invalid.ng-dirty,:host ::ng-deep .p-inputnumber-input.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputnumber-input:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .p-inputnumber{display:flex}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.p-inputnumber-input.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputnumber-input.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-input-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }] } });
 
 /**

package/fesm2022/tekus-design-system-components-input-number.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-input-number.mjs","sources":["../../../projects/design-system/components/input-number/src/input-number.component.ts","../../../projects/design-system/components/input-number/src/input-number.component.html","../../../projects/design-system/components/input-number/tekus-design-system-components-input-number.ts"],"sourcesContent":["\nimport {\n  Component,\n  input,\n  model,\n  signal,\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 { FloatLabelModule } from 'primeng/floatlabel';\nimport { InputNumber } from 'primeng/inputnumber';\nimport { Message } from 'primeng/message';\n\n@Component({\n  selector: 'tk-input-number',\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    FormsModule,\n    InputNumber,\n    FloatLabelModule,\n    Message\n],\n  templateUrl: './input-number.component.html',\n  styleUrl: './input-number.component.scss',\n})\nexport class InputNumberComponent\n  implements ControlValueAccessor, OnInit, OnDestroy\n{\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 {ModelSignal<number | null>} value\n   * @description\n   * The value of the input. Supports two-way binding via signals.\n   */\n  value = model<number | null>(null);\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the input value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>(new FormControl(null));\n\n  /**\n   * @property {InputSignal<string>} label\n   * @description\n   * Label displayed above the input.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} id\n   * @description\n   * HTML id attribute for the input.\n   * @default 'tk-input-number'\n   */\n  id = input<string>('tk-input-number');\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 {InputSignal<boolean>} showButtons\n   * @description\n   * Whether to display spinner buttons.\n   * @default false\n   */\n  showButtons = input<boolean>(false);\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Whether the input is disabled.\n   */\n  disabled = signal<boolean>(false);\n\n  get effectiveControl(): FormControl | null {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  onChange: (value: number | null) => void = () => {};\n  onTouched: () => void = () => {};\n  private isWriting = false;\n  private readonly subscription = new Subscription();\n\n  ngOnInit(): void {\n    const control = this.effectiveControl;\n    if (control?.value !== null && control?.value !== undefined) {\n      this.value.set(control.value);\n    }\n\n    this.disabled.set(control?.disabled ?? false);\n    this.subscription.add(\n      control?.valueChanges.subscribe(val => {\n        if (this.isWriting) return;\n        if (val !== this.value()) {\n          this.value.set(val ?? null);\n          this.onChange(val);\n        }\n      })\n    );\n\n    this.subscription.add(\n      control?.statusChanges.subscribe(() => {\n        this.disabled.set(control?.disabled ?? false);\n      })\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.subscription.unsubscribe();\n  }\n\n  /**\n   * @method writeValue\n   * @description\n   * Writes a new value to the element.\n   * @param value The new value.\n   */\n  writeValue(value: number | null): void {\n    this.value.set(value ?? null);\n  }\n\n  /**\n   * @method registerOnChange\n   * @description\n   * Registers a callback function that is called when the control's value changes in the UI.\n   * @param fn The callback function.\n   */\n  registerOnChange(fn: (value: number | null) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description\n   * Registers a callback function that is called by the forms API on initialization to update the form model on blur.\n   * @param fn The callback function.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description\n   * Function that is called by the forms API when the control status changes to or from 'DISABLED'.\n   * @param isDisabled The disabled status to set on the element.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n  }\n\n  /**\n   * @method onInput\n   * @description\n   * Handles input events to update the model and notify forms.\n   * @param value The new numeric value.\n   */\n  onInput(value: number | null): void {\n    this.isWriting = true;\n    this.value.set(value);\n    this.onChange(value);\n    this.effectiveControl?.setValue(value);\n    this.effectiveControl?.markAsDirty();\n    this.isWriting = false;\n  }\n\n  /**\n   * @method onBlur\n   * @description\n   * Handles blur events to mark the control as touched.\n   */\n  onBlur(): void {\n    this.onTouched();\n    this.effectiveControl?.markAsTouched();\n  }\n}\n","<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    <p-inputnumber\n      [inputId]=\"id()\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"onInput($event)\"\n      (onBlur)=\"onBlur()\"\n      [showButtons]=\"showButtons()\"\n      [disabled]=\"disabled()\"\n      mode=\"decimal\"\n      [useGrouping]=\"false\"\n      [class.ng-invalid]=\"effectiveControl?.invalid\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\"\n      [class.ng-touched]=\"effectiveControl?.touched\" />\n\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl?.invalid && (effectiveControl?.dirty ||\n    effectiveControl?.touched)) && errorMessage()) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n      errorMessage()\n    }}</p-message>\n    }\n  </div>\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-input-number.mjs","sources":["../../../projects/design-system/components/input-number/src/input-number.component.ts","../../../projects/design-system/components/input-number/src/input-number.component.html","../../../projects/design-system/components/input-number/tekus-design-system-components-input-number.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  input,\n  model,\n  signal,\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 { FloatLabelModule } from 'primeng/floatlabel';\nimport { InputNumber } from 'primeng/inputnumber';\nimport { Message } from 'primeng/message';\n\n@Component({\n  selector: 'tk-input-number',\n  imports: [\n    ReactiveFormsModule,\n    FormsModule,\n    InputNumber,\n    FloatLabelModule,\n    Message,\n  ],\n  templateUrl: './input-number.component.html',\n  styleUrl: './input-number.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputNumberComponent\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  /**\n   * @property {ModelSignal<number | null>} value\n   * @description\n   * The value of the input. Supports two-way binding via signals.\n   */\n  value = model<number | null>(null);\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the input value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>(new FormControl(null));\n\n  /**\n   * @property {InputSignal<string>} label\n   * @description\n   * Label displayed above the input.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} id\n   * @description\n   * HTML id attribute for the input.\n   * @default 'tk-input-number'\n   */\n  id = input<string>('tk-input-number');\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 {InputSignal<boolean>} showButtons\n   * @description\n   * Whether to display spinner buttons.\n   * @default false\n   */\n  showButtons = input<boolean>(false);\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Whether the input is disabled.\n   */\n  disabled = signal<boolean>(false);\n\n  get effectiveControl(): FormControl | null {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  onChange: (value: number | null) => void = () => {};\n  onTouched: () => void = () => {};\n  private isWriting = false;\n\n  ngOnInit(): void {\n    const control = this.effectiveControl;\n    if (control?.value !== null && control?.value !== undefined) {\n      this.value.set(control.value);\n    }\n\n    this.disabled.set(control?.disabled ?? false);\n\n    control?.valueChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(val => {\n        if (this.isWriting) return;\n        if (val !== this.value()) {\n          this.value.set(val ?? null);\n          this.onChange(val);\n        }\n      });\n\n    control?.statusChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.disabled.set(control?.disabled ?? false);\n      });\n  }\n\n  /**\n   * @method writeValue\n   * @description\n   * Writes a new value to the element.\n   * @param value The new value.\n   */\n  writeValue(value: number | null): void {\n    this.value.set(value ?? null);\n  }\n\n  /**\n   * @method registerOnChange\n   * @description\n   * Registers a callback function that is called when the control's value changes in the UI.\n   * @param fn The callback function.\n   */\n  registerOnChange(fn: (value: number | null) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description\n   * Registers a callback function that is called by the forms API on initialization to update the form model on blur.\n   * @param fn The callback function.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description\n   * Function that is called by the forms API when the control status changes to or from 'DISABLED'.\n   * @param isDisabled The disabled status to set on the element.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n  }\n\n  /**\n   * @method onInput\n   * @description\n   * Handles input events to update the model and notify forms.\n   * @param value The new numeric value.\n   */\n  onInput(value: number | null): void {\n    this.isWriting = true;\n    this.value.set(value);\n    this.onChange(value);\n    this.effectiveControl?.setValue(value);\n    this.effectiveControl?.markAsDirty();\n    this.isWriting = false;\n  }\n\n  /**\n   * @method onBlur\n   * @description\n   * Handles blur events to mark the control as touched.\n   */\n  onBlur(): void {\n    this.onTouched();\n    this.effectiveControl?.markAsTouched();\n  }\n}\n","<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    <p-inputnumber\n      [inputId]=\"id()\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"onInput($event)\"\n      (onBlur)=\"onBlur()\"\n      [showButtons]=\"showButtons()\"\n      [disabled]=\"disabled()\"\n      mode=\"decimal\"\n      [useGrouping]=\"false\"\n      [class.ng-invalid]=\"effectiveControl?.invalid\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\"\n      [class.ng-touched]=\"effectiveControl?.touched\" />\n\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl?.invalid && (effectiveControl?.dirty ||\n    effectiveControl?.touched)) && errorMessage()) {\n    <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n      errorMessage()\n    }}</p-message>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;MAmCa,oBAAoB,CAAA;AAM/B,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;;;;AAIG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,4EAAC;AAElC;;;;;AAKG;QACH,IAAA,CAAA,OAAO,GAAG,KAAK,CAAc,IAAI,WAAW,CAAC,IAAI,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;AAEnD;;;;AAIG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AAEzB;;;;;AAKG;AACH,QAAA,IAAA,CAAA,EAAE,GAAG,KAAK,CAAS,iBAAiB,yEAAC;AAErC;;;;AAIG;AACH,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAS,EAAE,mFAAC;AAEhC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,KAAK,kFAAC;AAEnC;;;;AAIG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAU,KAAK,+EAAC;AAMjC,QAAA,IAAA,CAAA,QAAQ,GAAmC,MAAK,EAAE,CAAC;AACnD,QAAA,IAAA,CAAA,SAAS,GAAe,MAAK,EAAE,CAAC;QACxB,IAAA,CAAA,SAAS,GAAG,KAAK;AA/DvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;QACrC;IACF;AAsDA,IAAA,IAAI,gBAAgB,GAAA;QAClB,OAAQ,IAAI,CAAC,SAAS,EAAE,OAAuB,IAAI,IAAI,CAAC,OAAO,EAAE;IACnE;IAMA,QAAQ,GAAA;AACN,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB;AACrC,QAAA,IAAI,OAAO,EAAE,KAAK,KAAK,IAAI,IAAI,OAAO,EAAE,KAAK,KAAK,SAAS,EAAE;YAC3D,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC;QAC/B;QAEA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,IAAI,KAAK,CAAC;AAE7C,QAAA,OAAO,EAAE;AACN,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,GAAG,IAAG;YACf,IAAI,IAAI,CAAC,SAAS;gBAAE;AACpB,YAAA,IAAI,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE,EAAE;gBACxB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,IAAI,CAAC;AAC3B,gBAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;YACpB;AACF,QAAA,CAAC,CAAC;AAEJ,QAAA,OAAO,EAAE;AACN,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,MAAK;YACd,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,IAAI,KAAK,CAAC;AAC/C,QAAA,CAAC,CAAC;IACN;AAEA;;;;;AAKG;AACH,IAAA,UAAU,CAAC,KAAoB,EAAA;QAC7B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,IAAI,CAAC;IAC/B;AAEA;;;;;AAKG;AACH,IAAA,gBAAgB,CAAC,EAAkC,EAAA;AACjD,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA;;;;;AAKG;AACH,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA;;;;;AAKG;AACH,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;IAC/B;AAEA;;;;;AAKG;AACH,IAAA,OAAO,CAAC,KAAoB,EAAA;AAC1B,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACpB,QAAA,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC;AACtC,QAAA,IAAI,CAAC,gBAAgB,EAAE,WAAW,EAAE;AACpC,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;IACxB;AAEA;;;;AAIG;IACH,MAAM,GAAA;QACJ,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,gBAAgB,EAAE,aAAa,EAAE;IACxC;8GAhKW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,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,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,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,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnCjC,04BA6BA,EAAA,MAAA,EAAA,CAAA,+mEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDJI,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACnB,WAAW,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,WAAA,EAAA,IAAA,EACX,WAAW,EAAA,QAAA,EAAA,8CAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,cAAA,EAAA,SAAA,EAAA,YAAA,EAAA,aAAA,EAAA,UAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,sBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,QAAA,EAAA,WAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACX,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,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,YAAA,EAAA,UAAA,EAAA,MAAA,EAAA,WAAA,EAAA,MAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,SAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAME,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAbhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,OAAA,EAClB;wBACP,mBAAmB;wBACnB,WAAW;wBACX,WAAW;wBACX,gBAAgB;wBAChB,OAAO;qBACR,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,04BAAA,EAAA,MAAA,EAAA,CAAA,+mEAAA,CAAA,EAAA;;;AEjCjD;;AAEG;;;;"}

package/fesm2022/tekus-design-system-components-input-text.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, model, input, signal, computed, Component } from '@angular/core';
+import { inject, DestroyRef, model, input, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgControl, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { Subscription } from 'rxjs';
 import * as i2 from 'primeng/floatlabel';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import * as i1 from 'primeng/inputtext';
@@ -13,6 +13,12 @@ import { IconComponent } from '@tekus/design-system/components/icon';
 class InputTextComponent {
     constructor() {
         this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.init = (() => {
+            if (this.ngControl) {
+                this.ngControl.valueAccessor = this;
+            }
+        })();
         /**
          * @property {ModelSignal<string>} value
          * @description
@@ -65,11 +71,6 @@ class InputTextComponent {
          * Message to display when the control is invalid and touched.
          */
         this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
-        /**
-         * @property {InputSignal<string>} hint
-         * @description
-         * Hint text to display below the input.
-         */
         /**
          * @property {InputSignal<string>} hint
          * @description
@@ -95,10 +96,6 @@ class InputTextComponent {
         this.onChange = () => { };
         this.onTouched = () => { };
         this.isWriting = false;
-        this.subscription = new Subscription();
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
     }
     get effectiveControl() {
         return this.ngControl?.control || this.control();
@@ -110,21 +107,22 @@ class InputTextComponent {
         }
         // Sync initial disabled state
         this.disabled.set(control.disabled);
-        this.subscription.add(control.valueChanges.subscribe(val => {
+        control.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(val => {
             if (this.isWriting)
                 return;
             if (val !== this.value()) {
                 this.value.set(val || '');
                 this.onChange(val);
             }
-        }));
+        });
         // Sync disabled state on status change
-        this.subscription.add(control.statusChanges.subscribe(() => {
+        control.statusChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
             this.disabled.set(control.disabled);
-        }));
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
+        });
     }
     /**
      * @method writeValue
@@ -206,12 +204,12 @@ class InputTextComponent {
         this.isWriting = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: InputTextComponent, isStandalone: true, selector: "tk-input-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    @if (icon()) {\n      <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n    }\n    <div class=\"tk-input-prefix\">\n      <ng-content select=\"[tk-prefix]\"></ng-content>\n    </div>\n    \n    <input \n      pInputText \n      [id]=\"id()\" \n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [type]=\"type()\" \n      [attr.maxlength]=\"maxLength()\"\n      [class.has-icon]=\"icon()\"\n      [class.has-clear]=\"clearable()\"\n      [disabled]=\"disabled()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"\n    />\n    \n    <label [for]=\"id()\">{{ label() }}</label>\n    \n    @if (clearable() && value()) {\n      <tk-icon \n        icon=\"xmark\" \n        class=\"tk-clear-icon\" \n        (click)=\"clear()\" \n        (keydown.enter)=\"clear()\" \n        (keydown.space)=\"clear()\">\n      </tk-icon>\n    }\n    <div class=\"tk-input-suffix\">\n      <ng-content select=\"[tk-suffix]\"></ng-content>\n    </div>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n      {{ counterText() }}\n    </p-message>\n  }\n</div>", styles: [":host ::ng-deep .p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputtext.ng-invalid.ng-dirty,:host ::ng-deep .p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputtext.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .tk-input-wrapper:has(.tk-input-suffix:not(:empty)) .p-inputtext{padding-right:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-input-wrapper:has(.tk-input-prefix:not(:empty)) .p-inputtext{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.tk-input-prefix:not(:empty)) label{left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-input-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--tk-color-base-surface-400, #cecdcd);pointer-events:none;z-index:1}:host ::ng-deep .tk-input-prefix{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-left:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-prefix:empty{display:none}:host ::ng-deep .tk-clear-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--tk-color-base-surface-700, #424243);z-index:1}:host ::ng-deep .tk-input-suffix{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-right:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-suffix:empty{display:none}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;align-self:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: InputTextComponent, isStandalone: true, selector: "tk-input-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    @if (icon()) {\n      <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n    }\n    <div class=\"tk-input-prefix\">\n      <ng-content select=\"[tk-prefix]\"></ng-content>\n    </div>\n    \n    <input \n      pInputText \n      [id]=\"id()\" \n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [type]=\"type()\" \n      [attr.maxlength]=\"maxLength()\"\n      [class.has-icon]=\"icon()\"\n      [class.has-clear]=\"clearable()\"\n      [disabled]=\"disabled()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"\n    />\n    \n    <label [for]=\"id()\">{{ label() }}</label>\n    \n    @if (clearable() && value()) {\n      <tk-icon \n        icon=\"xmark\" \n        class=\"tk-clear-icon\" \n        (click)=\"clear()\" \n        (keydown.enter)=\"clear()\" \n        (keydown.space)=\"clear()\">\n      </tk-icon>\n    }\n    <div class=\"tk-input-suffix\">\n      <ng-content select=\"[tk-suffix]\"></ng-content>\n    </div>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n      {{ counterText() }}\n    </p-message>\n  }\n</div>", styles: [":host ::ng-deep .p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputtext.ng-invalid.ng-dirty,:host ::ng-deep .p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputtext.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .tk-input-wrapper:has(.tk-input-suffix:not(:empty)) .p-inputtext{padding-right:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-input-wrapper:has(.tk-input-prefix:not(:empty)) .p-inputtext{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.tk-input-prefix:not(:empty)) label{left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-input-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--tk-color-base-surface-400, #cecdcd);pointer-events:none;z-index:1}:host ::ng-deep .tk-input-prefix{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-left:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-prefix:empty{display:none}:host ::ng-deep .tk-clear-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--tk-color-base-surface-700, #424243);z-index:1}:host ::ng-deep .tk-input-suffix{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-right:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-suffix:empty{display:none}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;align-self:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-input-text', imports: [ReactiveFormsModule, InputTextModule, FloatLabelModule, MessageModule, IconComponent], template: "<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    @if (icon()) {\n      <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n    }\n    <div class=\"tk-input-prefix\">\n      <ng-content select=\"[tk-prefix]\"></ng-content>\n    </div>\n    \n    <input \n      pInputText \n      [id]=\"id()\" \n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [type]=\"type()\" \n      [attr.maxlength]=\"maxLength()\"\n      [class.has-icon]=\"icon()\"\n      [class.has-clear]=\"clearable()\"\n      [disabled]=\"disabled()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"\n    />\n    \n    <label [for]=\"id()\">{{ label() }}</label>\n    \n    @if (clearable() && value()) {\n      <tk-icon \n        icon=\"xmark\" \n        class=\"tk-clear-icon\" \n        (click)=\"clear()\" \n        (keydown.enter)=\"clear()\" \n        (keydown.space)=\"clear()\">\n      </tk-icon>\n    }\n    <div class=\"tk-input-suffix\">\n      <ng-content select=\"[tk-suffix]\"></ng-content>\n    </div>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n      {{ counterText() }}\n    </p-message>\n  }\n</div>", styles: [":host ::ng-deep .p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputtext.ng-invalid.ng-dirty,:host ::ng-deep .p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputtext.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .tk-input-wrapper:has(.tk-input-suffix:not(:empty)) .p-inputtext{padding-right:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-input-wrapper:has(.tk-input-prefix:not(:empty)) .p-inputtext{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.tk-input-prefix:not(:empty)) label{left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-input-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--tk-color-base-surface-400, #cecdcd);pointer-events:none;z-index:1}:host ::ng-deep .tk-input-prefix{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-left:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-prefix:empty{display:none}:host ::ng-deep .tk-clear-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--tk-color-base-surface-700, #424243);z-index:1}:host ::ng-deep .tk-input-suffix{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-right:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-suffix:empty{display:none}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;align-self:flex-start}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }] } });
+            args: [{ selector: 'tk-input-text', imports: [ReactiveFormsModule, InputTextModule, FloatLabelModule, MessageModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    @if (icon()) {\n      <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n    }\n    <div class=\"tk-input-prefix\">\n      <ng-content select=\"[tk-prefix]\"></ng-content>\n    </div>\n    \n    <input \n      pInputText \n      [id]=\"id()\" \n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [type]=\"type()\" \n      [attr.maxlength]=\"maxLength()\"\n      [class.has-icon]=\"icon()\"\n      [class.has-clear]=\"clearable()\"\n      [disabled]=\"disabled()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"\n    />\n    \n    <label [for]=\"id()\">{{ label() }}</label>\n    \n    @if (clearable() && value()) {\n      <tk-icon \n        icon=\"xmark\" \n        class=\"tk-clear-icon\" \n        (click)=\"clear()\" \n        (keydown.enter)=\"clear()\" \n        (keydown.space)=\"clear()\">\n      </tk-icon>\n    }\n    <div class=\"tk-input-suffix\">\n      <ng-content select=\"[tk-suffix]\"></ng-content>\n    </div>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n      {{ counterText() }}\n    </p-message>\n  }\n</div>", styles: [":host ::ng-deep .p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputtext.ng-invalid.ng-dirty,:host ::ng-deep .p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputtext.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .tk-input-wrapper:has(.tk-input-suffix:not(:empty)) .p-inputtext{padding-right:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-input-wrapper:has(.tk-input-prefix:not(:empty)) .p-inputtext{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.tk-input-prefix:not(:empty)) label{left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-input-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--tk-color-base-surface-400, #cecdcd);pointer-events:none;z-index:1}:host ::ng-deep .tk-input-prefix{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-left:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-prefix:empty{display:none}:host ::ng-deep .tk-clear-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--tk-color-base-surface-700, #424243);z-index:1}:host ::ng-deep .tk-input-suffix{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-right:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-suffix:empty{display:none}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;align-self:flex-start}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/tekus-design-system-components-input-text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-input-text.mjs","sources":["../../../projects/design-system/components/input-text/src/input-text.component.ts","../../../projects/design-system/components/input-text/src/input-text.component.html","../../../projects/design-system/components/input-text/tekus-design-system-components-input-text.ts"],"sourcesContent":["\nimport { Component, input, model, signal, computed, OnInit, inject, OnDestroy } from '@angular/core';\nimport { ControlValueAccessor, FormControl, ReactiveFormsModule, NgControl } from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { InputTextModule } from 'primeng/inputtext';\nimport { MessageModule } from 'primeng/message';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n@Component({\n  selector: 'tk-input-text',\n  imports: [ReactiveFormsModule, InputTextModule, FloatLabelModule, MessageModule, IconComponent],\n  templateUrl: './input-text.component.html',\n  styleUrl: './input-text.component.scss',\n})\nexport class InputTextComponent implements ControlValueAccessor, OnInit, OnDestroy {\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 {ModelSignal<string>} value\n   * @description\n   * The value of the input. Supports two-way binding via signals.\n   */\n  value = model<string>('');\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the input value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>(new FormControl(''));\n\n  /**\n   * @property {InputSignal<string>} label\n   * @description\n   * Label displayed above the input.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} type\n   * @description\n   * Type of the input (text, password, email, etc.).\n   * @default 'text'\n   */\n  type = input<string>('text');\n\n  /**\n   * @property {InputSignal<string>} id\n   * @description\n   * HTML id attribute for the input.\n   * @default 'tk-input-text'\n   */\n  id = input<string>('tk-input-text');\n\n  /**\n   * @property {InputSignal<string>} icon\n   * @description\n   * Icon to display next to the input (e.g., 'pi pi-search').\n   */\n  icon = input<string>('');\n\n  /**\n   * @property {InputSignal<boolean>} clearable\n   * @description\n   * Whether to show a clear button when the input has a value.\n   * @default false\n   */\n  clearable = input<boolean>(false);\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 {InputSignal<string>} hint\n   * @description\n   * Hint text to display below the input.\n   */\n  /**\n   * @property {InputSignal<string>} hint\n   * @description\n   * Hint text to display below the input.\n   */\n  hint = input<string>('');\n\n  /**\n   * @property {InputSignal<number | null>} maxLength\n   * @description\n   * Maximum number of characters allowed in the input.\n   */\n  maxLength = input<number | null>(null);\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Whether the input is disabled.\n   */\n  disabled = signal<boolean>(false);\n\n  get effectiveControl(): FormControl {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  counterText = computed(() => {\n    const max = this.maxLength();\n    return max ? `${this.value().length}/${max}` : '';\n  });\n\n\n  onChange: (value: string) => void = () => {};\n  onTouched: () => void = () => {};\n  private isWriting = false;\n  private readonly subscription = new Subscription();\n\n  ngOnInit(): void {\n    const control = this.effectiveControl;\n    if (control.value) {\n      this.value.set(control.value);\n    }\n\n    // Sync initial disabled state\n    this.disabled.set(control.disabled);\n\n    this.subscription.add(\n      control.valueChanges.subscribe(val => {\n        if (this.isWriting) return;\n        if (val !== this.value()) {\n          this.value.set(val || '');\n          this.onChange(val);\n        }\n      })\n    );\n\n    // Sync disabled state on status change\n    this.subscription.add(\n      control.statusChanges.subscribe(() => {\n        this.disabled.set(control.disabled);\n      })\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.subscription.unsubscribe();\n  }\n\n  /**\n   * @method writeValue\n   * @description\n   * Writes a new value to the element.\n   * @param value The new value.\n   */\n  writeValue(value: string): void {\n    this.value.set(value || '');\n    this.control().setValue(value || '', { emitEvent: false });\n  }\n\n  /**\n   * @method registerOnChange\n   * @description\n   * Registers a callback function that is called when the control's value changes in the UI.\n   * @param fn The callback function.\n   */\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description\n   * Registers a callback function that is called by the forms API on initialization to update the form model on blur.\n   * @param fn The callback function.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description\n   * Function that is called by the forms API when the control status changes to or from 'DISABLED'.\n   * @param isDisabled The disabled status to set on the element.\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   * @method onInput\n   * @description\n   * Handles input events to update the model and notify forms.\n   * @param event The input event.\n   */\n  onInput(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.isWriting = true;\n    this.value.set(input.value);\n    this.onChange(input.value);\n    this.effectiveControl.setValue(input.value);\n    this.effectiveControl.markAsDirty();\n    this.isWriting = false;\n  }\n\n  /**\n   * @method onBlur\n   * @description\n   * Handles blur events to mark the control as touched.\n   */\n  onBlur(): void {\n    this.onTouched();\n    this.effectiveControl.markAsTouched();\n  }\n\n  /**\n   * @method clear\n   * @description\n   * Clears the input value.\n   */\n  clear(): void {\n    this.isWriting = true;\n    this.value.set('');\n    this.onChange('');\n    this.control().setValue('');\n    this.isWriting = false;\n  }\n}\n","<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    @if (icon()) {\n      <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n    }\n    <div class=\"tk-input-prefix\">\n      <ng-content select=\"[tk-prefix]\"></ng-content>\n    </div>\n    \n    <input \n      pInputText \n      [id]=\"id()\" \n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [type]=\"type()\" \n      [attr.maxlength]=\"maxLength()\"\n      [class.has-icon]=\"icon()\"\n      [class.has-clear]=\"clearable()\"\n      [disabled]=\"disabled()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"\n    />\n    \n    <label [for]=\"id()\">{{ label() }}</label>\n    \n    @if (clearable() && value()) {\n      <tk-icon \n        icon=\"xmark\" \n        class=\"tk-clear-icon\" \n        (click)=\"clear()\" \n        (keydown.enter)=\"clear()\" \n        (keydown.space)=\"clear()\">\n      </tk-icon>\n    }\n    <div class=\"tk-input-suffix\">\n      <ng-content select=\"[tk-suffix]\"></ng-content>\n    </div>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n      {{ counterText() }}\n    </p-message>\n  }\n</div>","/**\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-input-text.mjs","sources":["../../../projects/design-system/components/input-text/src/input-text.component.ts","../../../projects/design-system/components/input-text/src/input-text.component.html","../../../projects/design-system/components/input-text/tekus-design-system-components-input-text.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, DestroyRef, input, model, signal, computed, OnInit, inject } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, FormControl, ReactiveFormsModule, NgControl } from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { InputTextModule } from 'primeng/inputtext';\nimport { MessageModule } from 'primeng/message';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n@Component({\n  selector: 'tk-input-text',\n  imports: [ReactiveFormsModule, InputTextModule, FloatLabelModule, MessageModule, IconComponent],\n  templateUrl: './input-text.component.html',\n  styleUrl: './input-text.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputTextComponent implements ControlValueAccessor, OnInit {\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n\n  private readonly init = (() => {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  })();\n\n  /**\n   * @property {ModelSignal<string>} value\n   * @description\n   * The value of the input. Supports two-way binding via signals.\n   */\n  value = model<string>('');\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the input value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>(new FormControl(''));\n\n  /**\n   * @property {InputSignal<string>} label\n   * @description\n   * Label displayed above the input.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} type\n   * @description\n   * Type of the input (text, password, email, etc.).\n   * @default 'text'\n   */\n  type = input<string>('text');\n\n  /**\n   * @property {InputSignal<string>} id\n   * @description\n   * HTML id attribute for the input.\n   * @default 'tk-input-text'\n   */\n  id = input<string>('tk-input-text');\n\n  /**\n   * @property {InputSignal<string>} icon\n   * @description\n   * Icon to display next to the input (e.g., 'pi pi-search').\n   */\n  icon = input<string>('');\n\n  /**\n   * @property {InputSignal<boolean>} clearable\n   * @description\n   * Whether to show a clear button when the input has a value.\n   * @default false\n   */\n  clearable = input<boolean>(false);\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 {InputSignal<string>} hint\n   * @description\n   * Hint text to display below the input.\n   */\n  hint = input<string>('');\n\n  /**\n   * @property {InputSignal<number | null>} maxLength\n   * @description\n   * Maximum number of characters allowed in the input.\n   */\n  maxLength = input<number | null>(null);\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Whether the input is disabled.\n   */\n  disabled = signal<boolean>(false);\n\n  get effectiveControl(): FormControl {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  counterText = computed(() => {\n    const max = this.maxLength();\n    return max ? `${this.value().length}/${max}` : '';\n  });\n\n  onChange: (value: string) => void = () => {};\n  onTouched: () => void = () => {};\n  private isWriting = false;\n\n  ngOnInit(): void {\n    const control = this.effectiveControl;\n    if (control.value) {\n      this.value.set(control.value);\n    }\n\n    // Sync initial disabled state\n    this.disabled.set(control.disabled);\n\n    control.valueChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(val => {\n        if (this.isWriting) return;\n        if (val !== this.value()) {\n          this.value.set(val || '');\n          this.onChange(val);\n        }\n      });\n\n    // Sync disabled state on status change\n    control.statusChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.disabled.set(control.disabled);\n      });\n  }\n\n  /**\n   * @method writeValue\n   * @description\n   * Writes a new value to the element.\n   * @param value The new value.\n   */\n  writeValue(value: string): void {\n    this.value.set(value || '');\n    this.control().setValue(value || '', { emitEvent: false });\n  }\n\n  /**\n   * @method registerOnChange\n   * @description\n   * Registers a callback function that is called when the control's value changes in the UI.\n   * @param fn The callback function.\n   */\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description\n   * Registers a callback function that is called by the forms API on initialization to update the form model on blur.\n   * @param fn The callback function.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description\n   * Function that is called by the forms API when the control status changes to or from 'DISABLED'.\n   * @param isDisabled The disabled status to set on the element.\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   * @method onInput\n   * @description\n   * Handles input events to update the model and notify forms.\n   * @param event The input event.\n   */\n  onInput(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.isWriting = true;\n    this.value.set(input.value);\n    this.onChange(input.value);\n    this.effectiveControl.setValue(input.value);\n    this.effectiveControl.markAsDirty();\n    this.isWriting = false;\n  }\n\n  /**\n   * @method onBlur\n   * @description\n   * Handles blur events to mark the control as touched.\n   */\n  onBlur(): void {\n    this.onTouched();\n    this.effectiveControl.markAsTouched();\n  }\n\n  /**\n   * @method clear\n   * @description\n   * Clears the input value.\n   */\n  clear(): void {\n    this.isWriting = true;\n    this.value.set('');\n    this.onChange('');\n    this.control().setValue('');\n    this.isWriting = false;\n  }\n}\n","<p-floatlabel>\n  <div class=\"tk-input-wrapper\">\n    @if (icon()) {\n      <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n    }\n    <div class=\"tk-input-prefix\">\n      <ng-content select=\"[tk-prefix]\"></ng-content>\n    </div>\n    \n    <input \n      pInputText \n      [id]=\"id()\" \n      [value]=\"value()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      [type]=\"type()\" \n      [attr.maxlength]=\"maxLength()\"\n      [class.has-icon]=\"icon()\"\n      [class.has-clear]=\"clearable()\"\n      [disabled]=\"disabled()\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\"\n    />\n    \n    <label [for]=\"id()\">{{ label() }}</label>\n    \n    @if (clearable() && value()) {\n      <tk-icon \n        icon=\"xmark\" \n        class=\"tk-clear-icon\" \n        (click)=\"clear()\" \n        (keydown.enter)=\"clear()\" \n        (keydown.space)=\"clear()\">\n      </tk-icon>\n    }\n    <div class=\"tk-input-suffix\">\n      <ng-content select=\"[tk-suffix]\"></ng-content>\n    </div>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n  <div class=\"tk-input-messages\">\n    @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n    }\n  </div>\n\n  @if (maxLength()) {\n    <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n      {{ counterText() }}\n    </p-message>\n  }\n</div>","/**\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-modal.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, viewChild, ViewContainerRef, input, computed, model, EventEmitter, effect, untracked, afterEveryRender, Component, Injector, ApplicationRef, createComponent, Injectable } from '@angular/core';
+import { inject, ElementRef, viewChild, ViewContainerRef, input, computed, model, output, effect, untracked, afterEveryRender, ChangeDetectionStrategy, Component, Injector, ApplicationRef, createComponent, Injectable } from '@angular/core';
 import { ButtonComponent } from '@tekus/design-system/components/button';
 import * as i1 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i2 from 'primeng/api';
+import { outputToObservable } from '@angular/core/rxjs-interop';
 import { Subject } from 'rxjs';
 
 /**
@@ -52,7 +53,7 @@ class ModalComponent {
         this.hasScroll = false;
         // --- Internals ---
         /** Emits when the modal closes, passing the return value from footer buttons or null */
-        this.onClose = new EventEmitter();
+        this.closed = output();
         this.alreadyEmitted = false;
         this.returnValueOnClose = null;
         /** Computed: calculates modal max-width based on `size` */
@@ -195,7 +196,7 @@ class ModalComponent {
      */
     handleClose() {
         const valueToEmit = this.alreadyEmitted ? this.returnValueOnClose : null;
-        this.onClose.emit(valueToEmit);
+        this.closed.emit(valueToEmit);
         this.resetClosureState();
     }
     /**
@@ -221,14 +222,14 @@ class ModalComponent {
         this.returnValueOnClose = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ModalComponent, isStandalone: true, selector: "tk-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footerButtons: { classPropertyName: "footerButtons", publicName: "footerButtons", 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 }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", 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 }, responsive: { classPropertyName: "responsive", publicName: "responsive", 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-dialog\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [focusOnShow]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{\n    'max-width': modalMaxWidth(),\n    width: 'calc(100% - var(--tk-spacing-base-200))',\n  }\"\n  (onHide)=\"handleClose()\"\n  (onShow)=\"checkScroll()\"\n  class=\"tk-modal\">\n  <section class=\"tk-modal__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\n  <ng-template pTemplate=\"footer\">\n    @if (hasFooter()) {\n      <section\n        class=\"tk-modal__footer\"\n        [class.tk-modal__footer--with-content]=\"hasScroll\">\n        @for (btn of footerButtons()!; track $index) {\n          <tk-button\n            [label]=\"btn.label\"\n            [severity]=\"btn.severity\"\n            [variant]=\"btn.variant\"\n            (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.space)=\"handleAction(btn.action, btn.returnValue)\" />\n        }\n      </section>\n    }\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog{max-height:90vh;display:flex;flex-direction:column}:host ::ng-deep .p-dialog-content{overflow-y:auto}:host ::ng-deep .p-dialog-title{color:var(--tk-color-text-default, #212121)}:host ::ng-deep .p-dialog-close-button{color:var(--tk-surface-500, #8a8a8b)}:host ::ng-deep .p-dialog-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-surface-500, #8a8a8b)}.tk-modal__content{padding-bottom:var(--tk-spacing-paddingY-l, 1.25rem);color:var(--tk-surface-1000, #000000)}.tk-modal__footer{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-modal__footer--with-content{padding-right:var(--tk-spacing-paddingX-l, 1.25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { 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: ModalComponent, isStandalone: true, selector: "tk-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footerButtons: { classPropertyName: "footerButtons", publicName: "footerButtons", 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 }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", 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 }, responsive: { classPropertyName: "responsive", publicName: "responsive", 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-dialog\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [focusOnShow]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{\n    'max-width': modalMaxWidth(),\n    width: 'calc(100% - var(--tk-spacing-base-200))',\n  }\"\n  (onHide)=\"handleClose()\"\n  (onShow)=\"checkScroll()\"\n  class=\"tk-modal\">\n  <section class=\"tk-modal__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\n  <ng-template pTemplate=\"footer\">\n    @if (hasFooter()) {\n      <section\n        class=\"tk-modal__footer\"\n        [class.tk-modal__footer--with-content]=\"hasScroll\">\n        @for (btn of footerButtons()!; track $index) {\n          <tk-button\n            [label]=\"btn.label\"\n            [severity]=\"btn.severity\"\n            [variant]=\"btn.variant\"\n            (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.space)=\"handleAction(btn.action, btn.returnValue)\" />\n        }\n      </section>\n    }\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog{max-height:90vh;display:flex;flex-direction:column}:host ::ng-deep .p-dialog-content{overflow-y:auto}:host ::ng-deep .p-dialog-title{color:var(--tk-color-text-default, #212121)}:host ::ng-deep .p-dialog-close-button{color:var(--tk-surface-500, #8a8a8b)}:host ::ng-deep .p-dialog-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-surface-500, #8a8a8b)}.tk-modal__content{padding-bottom:var(--tk-spacing-paddingY-l, 1.25rem);color:var(--tk-surface-1000, #000000)}.tk-modal__footer{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-modal__footer--with-content{padding-right:var(--tk-spacing-paddingX-l, 1.25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { 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: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-modal', standalone: true, imports: [DialogModule, ButtonComponent], template: "<p-dialog\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [focusOnShow]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{\n    'max-width': modalMaxWidth(),\n    width: 'calc(100% - var(--tk-spacing-base-200))',\n  }\"\n  (onHide)=\"handleClose()\"\n  (onShow)=\"checkScroll()\"\n  class=\"tk-modal\">\n  <section class=\"tk-modal__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\n  <ng-template pTemplate=\"footer\">\n    @if (hasFooter()) {\n      <section\n        class=\"tk-modal__footer\"\n        [class.tk-modal__footer--with-content]=\"hasScroll\">\n        @for (btn of footerButtons()!; track $index) {\n          <tk-button\n            [label]=\"btn.label\"\n            [severity]=\"btn.severity\"\n            [variant]=\"btn.variant\"\n            (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.space)=\"handleAction(btn.action, btn.returnValue)\" />\n        }\n      </section>\n    }\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog{max-height:90vh;display:flex;flex-direction:column}:host ::ng-deep .p-dialog-content{overflow-y:auto}:host ::ng-deep .p-dialog-title{color:var(--tk-color-text-default, #212121)}:host ::ng-deep .p-dialog-close-button{color:var(--tk-surface-500, #8a8a8b)}:host ::ng-deep .p-dialog-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-surface-500, #8a8a8b)}.tk-modal__content{padding-bottom:var(--tk-spacing-paddingY-l, 1.25rem);color:var(--tk-surface-1000, #000000)}.tk-modal__footer{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-modal__footer--with-content{padding-right:var(--tk-spacing-paddingX-l, 1.25rem)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-modal', imports: [DialogModule, ButtonComponent], template: "<p-dialog\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [focusOnShow]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{\n    'max-width': modalMaxWidth(),\n    width: 'calc(100% - var(--tk-spacing-base-200))',\n  }\"\n  (onHide)=\"handleClose()\"\n  (onShow)=\"checkScroll()\"\n  class=\"tk-modal\">\n  <section class=\"tk-modal__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\n  <ng-template pTemplate=\"footer\">\n    @if (hasFooter()) {\n      <section\n        class=\"tk-modal__footer\"\n        [class.tk-modal__footer--with-content]=\"hasScroll\">\n        @for (btn of footerButtons()!; track $index) {\n          <tk-button\n            [label]=\"btn.label\"\n            [severity]=\"btn.severity\"\n            [variant]=\"btn.variant\"\n            (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.space)=\"handleAction(btn.action, btn.returnValue)\" />\n        }\n      </section>\n    }\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog{max-height:90vh;display:flex;flex-direction:column}:host ::ng-deep .p-dialog-content{overflow-y:auto}:host ::ng-deep .p-dialog-title{color:var(--tk-color-text-default, #212121)}:host ::ng-deep .p-dialog-close-button{color:var(--tk-surface-500, #8a8a8b)}:host ::ng-deep .p-dialog-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-surface-500, #8a8a8b)}.tk-modal__content{padding-bottom:var(--tk-spacing-paddingY-l, 1.25rem);color:var(--tk-surface-1000, #000000)}.tk-modal__footer{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-modal__footer--with-content{padding-right:var(--tk-spacing-paddingX-l, 1.25rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ['contentHost', { ...{
                             read: ViewContainerRef,
-                        }, isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], footerButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtons", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], interceptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "interceptor", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", 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: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], footerButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtons", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], interceptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "interceptor", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], isOpened: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpened", required: false }] }, { type: i0.Output, args: ["isOpenedChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
  * @service ModalService
@@ -259,7 +260,7 @@ class ModalService {
      */
     open(config) {
         if (this.modalRef) {
-            return this.modalRef.instance.onClose.asObservable();
+            return outputToObservable(this.modalRef.instance.closed);
         }
         const componentRef = createComponent(ModalComponent, {
             environmentInjector: this.appRef.injector,
@@ -276,7 +277,7 @@ class ModalService {
         componentRef.setInput('interceptor', config.interceptor);
         componentRef.setInput('data', config.data || {});
         const close$ = new Subject();
-        componentRef.instance.onClose.subscribe((value) => {
+        componentRef.instance.closed.subscribe((value) => {
             close$.next(value);
             close$.complete();
             this.appRef.detachView(componentRef.hostView);