@tekus/design-system 5.23.0 → 5.24.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, signal, model, output, effect, forwardRef, ViewChild, Component } from '@angular/core';
+import { inject, input, signal, model, output, effect, viewChild, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NgControl, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2 from 'primeng/floatlabel';
@@ -90,25 +90,34 @@ class AutocompleteComponent {
         // -----------------------------------
         this.onChangeFn = () => { };
         this.onTouchedFn = () => { };
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
+        this.init = (() => {
+            if (this.ngControl) {
+                this.ngControl.valueAccessor = this;
+            }
+        })();
         /**
          * disabled → internalDisabled
          */
-        effect(() => {
+        this.syncDisabled = effect(() => {
             this.internalDisabled.set(this.disabled());
-        });
+        }, ...(ngDevMode ? [{ debugName: "syncDisabled" }] : /* istanbul ignore next */ []));
         /**
          * model → internal value + forms
          */
-        effect(() => {
+        this.syncModel = effect(() => {
             const v = this.model();
             if (v !== this.value) {
                 this.value = v ?? null;
                 this.onChangeFn(this.value);
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "syncModel" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {AutoComplete} autoComplete
+         * @description
+         * Reference to the underlying PrimeNG AutoComplete component.
+         * Used to access the native input element for chip creation on blur.
+         */
+        this.autoComplete = viewChild(AutoComplete, ...(ngDevMode ? [{ debugName: "autoComplete" }] : /* istanbul ignore next */ []));
     }
     /**
      * @method writeValue
@@ -171,14 +180,15 @@ class AutocompleteComponent {
      * This ensures that typing text and clicking away behaves similarly to pressing "Enter".
      */
     handleBlur() {
-        if (this.autoComplete?.inputEL) {
-            const inputValue = this.autoComplete.inputEL.nativeElement.value;
+        const ac = this.autoComplete();
+        if (ac?.inputEL) {
+            const inputValue = ac.inputEL.nativeElement.value;
             if (inputValue && inputValue.trim() !== '') {
                 const newValue = inputValue.trim();
                 const currentValues = Array.isArray(this.value) ? [...this.value] : [];
                 currentValues.push(newValue);
                 this.handleChange(currentValues);
-                this.autoComplete.inputEL.nativeElement.value = '';
+                ac.inputEL.nativeElement.value = '';
             }
         }
     }
@@ -199,21 +209,18 @@ class AutocompleteComponent {
                 useExisting: forwardRef(() => AutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "autoComplete", first: true, predicate: AutoComplete, descendants: true }], ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <div class=\"tk-autocomplete-wrapper\">\n    @if (icon()) {\n    <tk-icon [icon]=\"icon()\" class=\"tk-autocomplete-icon\"></tk-icon>\n    }\n    <p-autocomplete [ngModel]=\"value\" (ngModelChange)=\"handleChange($event)\" [disabled]=\"disabled()\" [inputId]=\"id()\"\n      [typeahead]=\"false\" multiple fluid (onBlur)=\"handleBlur()\"\n      [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\" />\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-autocomplete-bottom\">\n  <div class=\"tk-autocomplete-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</div>", styles: [":host ::ng-deep .p-autocomplete-input-multiple{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-autocomplete-input-multiple:focus{border-color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep p-autocomplete{flex:1;width:100%}:host ::ng-deep .tk-autocomplete-wrapper:has(.tk-autocomplete-icon) .p-autocomplete-input-multiple{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-multiple,:host ::ng-deep p-autocomplete.ng-invalid.ng-touched .p-autocomplete-input-multiple{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-floatlabel .tk-autocomplete-wrapper:has(.tk-autocomplete-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(p-autocomplete.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(p-autocomplete.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)!important}:host ::ng-deep .p-autocomplete-chip-icon{display:flex;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-autocomplete-chip{border-radius:var(--tk-borderRadius-full, 999px)!important;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-autocomplete-input-multiple-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep p-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-autocomplete-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-autocomplete-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-autocomplete-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-autocomplete-icon{position:absolute;left:0;top:50%;transform:translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { 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"] }] }); }
+        ], viewQueries: [{ propertyName: "autoComplete", first: true, predicate: AutoComplete, descendants: true, isSignal: true }], ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <div class=\"tk-autocomplete-wrapper\">\n    @if (icon()) {\n    <tk-icon [icon]=\"icon()\" class=\"tk-autocomplete-icon\"></tk-icon>\n    }\n    <p-autocomplete [ngModel]=\"value\" (ngModelChange)=\"handleChange($event)\" [disabled]=\"disabled()\" [inputId]=\"id()\"\n      [typeahead]=\"false\" multiple fluid (onBlur)=\"handleBlur()\"\n      [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\" />\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-autocomplete-bottom\">\n  <div class=\"tk-autocomplete-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</div>", styles: [":host ::ng-deep .p-autocomplete-input-multiple{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-autocomplete-input-multiple:focus{border-color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep p-autocomplete{flex:1;width:100%}:host ::ng-deep .tk-autocomplete-wrapper:has(.tk-autocomplete-icon) .p-autocomplete-input-multiple{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-multiple,:host ::ng-deep p-autocomplete.ng-invalid.ng-touched .p-autocomplete-input-multiple{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-floatlabel .tk-autocomplete-wrapper:has(.tk-autocomplete-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(p-autocomplete.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(p-autocomplete.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)!important}:host ::ng-deep .p-autocomplete-chip-icon{display:flex;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-autocomplete-chip{border-radius:var(--tk-borderRadius-full, 999px)!important;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-autocomplete-input-multiple-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep p-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-autocomplete-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-autocomplete-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-autocomplete-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-autocomplete-icon{position:absolute;left:0;top:50%;transform:translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { 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: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-autocomplete', standalone: true, imports: [FormsModule, AutoComplete, FloatLabelModule, MessageModule, IconComponent], providers: [
+            args: [{ selector: 'tk-autocomplete', imports: [FormsModule, AutoComplete, FloatLabelModule, MessageModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => AutocompleteComponent),
                             multi: true,
                         },
                     ], template: "<p-floatlabel class=\"w-full\">\n  <div class=\"tk-autocomplete-wrapper\">\n    @if (icon()) {\n    <tk-icon [icon]=\"icon()\" class=\"tk-autocomplete-icon\"></tk-icon>\n    }\n    <p-autocomplete [ngModel]=\"value\" (ngModelChange)=\"handleChange($event)\" [disabled]=\"disabled()\" [inputId]=\"id()\"\n      [typeahead]=\"false\" multiple fluid (onBlur)=\"handleBlur()\"\n      [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\" />\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-autocomplete-bottom\">\n  <div class=\"tk-autocomplete-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</div>", styles: [":host ::ng-deep .p-autocomplete-input-multiple{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-autocomplete-input-multiple:focus{border-color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep p-autocomplete{flex:1;width:100%}:host ::ng-deep .tk-autocomplete-wrapper:has(.tk-autocomplete-icon) .p-autocomplete-input-multiple{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-multiple,:host ::ng-deep p-autocomplete.ng-invalid.ng-touched .p-autocomplete-input-multiple{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-floatlabel .tk-autocomplete-wrapper:has(.tk-autocomplete-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(p-autocomplete.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(p-autocomplete.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)!important}:host ::ng-deep .p-autocomplete-chip-icon{display:flex;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-autocomplete-chip{border-radius:var(--tk-borderRadius-full, 999px)!important;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-autocomplete-input-multiple-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep p-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-autocomplete-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-autocomplete-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-autocomplete-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-autocomplete-icon{position:absolute;left:0;top:50%;transform:translateY(-50%)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }], autoComplete: [{
-                type: ViewChild,
-                args: [AutoComplete]
-            }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }], autoComplete: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AutoComplete), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-autocomplete.mjs","sources":["../../../projects/design-system/components/autocomplete/src/autocomplete.component.ts","../../../projects/design-system/components/autocomplete/src/autocomplete.component.html","../../../projects/design-system/components/autocomplete/tekus-design-system-components-autocomplete.ts"],"sourcesContent":["import {\n  Component,\n  effect,\n  model,\n  forwardRef,\n  input,\n  output,\n  signal,\n  inject,\n  ViewChild,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n  FormsModule, \n  NgControl, \n  FormControl \n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { AutoComplete } from 'primeng/autocomplete';\nimport { MessageModule } from 'primeng/message';\nimport { IconComponent } from '@tekus/design-system/components/icon';\ntype AutocompleteValue<T = unknown> = T | T[] | null;\n\n@Component({\n  selector: 'tk-autocomplete',\n  standalone: true,\n  imports: [FormsModule, AutoComplete, FloatLabelModule, MessageModule, IconComponent],\n  templateUrl: './autocomplete.component.html',\n  styleUrl: './autocomplete.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AutocompleteComponent),\n      multi: true,\n    },\n  ],\n})\nexport class AutocompleteComponent<T = unknown>\n  implements ControlValueAccessor\n{\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  /**\n   * @property {string} id\n   * @description\n   * HTML id attribute for the autocomplete input.\n   *\n   * @default 'autocomplete'\n   */\n  id = input<string>('autocomplete');\n\n  /**\n   * @property {InputSignal<string>} icon\n   * @description\n   * Icon to display next to the input (e.g., 'magnifying-glass').\n   */\n  icon = input<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>();\n\n  /**\n   * @property {string} label\n   * @description\n   * Floating label displayed above the autocomplete input.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Determines whether the autocomplete field is disabled.\n   *\n   * @default false\n   */\n  disabled = 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 {AutocompleteValue<T>} value\n   * @description\n   * Internal selected value. Synced with Angular forms and the model signal.\n   *\n   * @internal\n   */\n  value: AutocompleteValue<T> = null;\n\n  internalDisabled = signal(false);\n\n  /**\n   * @property {Signal<AutocompleteValue<T>>} model\n   * @description\n   * Two-way binding model using Angular signals.\n   * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n   */\n  model = model<AutocompleteValue<T>>();\n\n  /**\n   * @event modelChange\n   * @description\n   * Emits whenever the value changes.\n   * Payload: the selected item(s) of type `AutocompleteValue<T>`.\n   *\n   * @example\n   * <tk-autocomplete (modelChange)=\"onChange($event)\"></tk-autocomplete>\n   */\n  modelChange = output<AutocompleteValue<T>>();\n\n  // -----------------------------------\n  // CVA CALLBACKS\n  // -----------------------------------\n\n  private onChangeFn: (value: AutocompleteValue<T>) => void = () => {};\n  private onTouchedFn = () => {};\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n    /**\n     * disabled → internalDisabled\n     */\n    effect(() => {\n      this.internalDisabled.set(this.disabled());\n    });\n\n    /**\n     * model → internal value + forms\n     */\n    effect(() => {\n      const v = this.model();\n      if (v !== this.value) {\n        this.value = v ?? null;\n        this.onChangeFn(this.value);\n      }\n    });\n  }\n\n  /**\n   * @method writeValue\n   * @description\n   * Receives value updates from Angular Forms and writes them into the component.\n   *\n   * @param {AutocompleteValue<T>} value - New value from the forms API.\n   */\n  writeValue(value: AutocompleteValue<T>): void {\n    this.model.set(value);\n  }\n\n  /**\n   * @method registerOnChange\n   * @description\n   * Registers a callback that is invoked when the component's value changes.\n   */\n  registerOnChange(fn: (value: AutocompleteValue<T>) => void): void {\n    this.onChangeFn = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description\n   * Registers a callback invoked when the component is touched.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouchedFn = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description\n   * Updates the disabled state of the autocomplete control.\n   *\n   * @param {boolean} isDisabled - Whether the component should be disabled.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.internalDisabled.set(isDisabled);\n  }\n\n  /**\n   * @method handleChange\n   * @description\n   * Handles value changes from the autocomplete component.\n   * Updates Angular Forms, Signals, and emits the modelChange event.\n   *\n   * @param {AutocompleteValue<T>} value - The new selected value(s).\n   */\n  handleChange(value: AutocompleteValue<T>) {\n    this.value = value;\n    this.onChangeFn(value);\n    this.onTouchedFn();\n    this.model.set(value);\n    this.modelChange.emit(value);\n    this.effectiveControl?.setValue(value);\n    this.effectiveControl?.markAsDirty();\n  }\n\n  /**\n   * @property {AutoComplete} autoComplete\n   * @description\n   * Reference to the underlying PrimeNG AutoComplete component.\n   * Used to access the native input element for chip creation on blur.\n   */\n  @ViewChild(AutoComplete) autoComplete!: AutoComplete;\n\n  /**\n   * @method handleBlur\n   * @description\n   * Handles the blur event of the autocomplete input.\n   * Captures any pending text in the input field and converts it into a chip/value.\n   * This ensures that typing text and clicking away behaves similarly to pressing \"Enter\".\n   */\n  handleBlur() {\n    if (this.autoComplete?.inputEL) {\n      const inputValue = this.autoComplete.inputEL.nativeElement.value;\n      if (inputValue && inputValue.trim() !== '') {\n        const newValue = inputValue.trim();\n        const currentValues = Array.isArray(this.value) ? [...this.value] : [];\n        currentValues.push(newValue);\n        \n        this.handleChange(currentValues as unknown as AutocompleteValue<T>);\n\n        this.autoComplete.inputEL.nativeElement.value = '';\n      }\n    }\n  }\n\n  /**\n   * @method effectiveControl\n   * @description\n   * Gets the active FormControl for the component.\n   * Returns the injected NgControl's control if available, otherwise falls back to the local `control` input.\n   * This getter is crucial for unifying validation status checks in the template.\n   */\n  get effectiveControl(): FormControl | undefined {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n}\n","<p-floatlabel class=\"w-full\">\n  <div class=\"tk-autocomplete-wrapper\">\n    @if (icon()) {\n    <tk-icon [icon]=\"icon()\" class=\"tk-autocomplete-icon\"></tk-icon>\n    }\n    <p-autocomplete [ngModel]=\"value\" (ngModelChange)=\"handleChange($event)\" [disabled]=\"disabled()\" [inputId]=\"id()\"\n      [typeahead]=\"false\" multiple fluid (onBlur)=\"handleBlur()\"\n      [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\" />\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-autocomplete-bottom\">\n  <div class=\"tk-autocomplete-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</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-autocomplete.mjs","sources":["../../../projects/design-system/components/autocomplete/src/autocomplete.component.ts","../../../projects/design-system/components/autocomplete/src/autocomplete.component.html","../../../projects/design-system/components/autocomplete/tekus-design-system-components-autocomplete.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  model,\n  forwardRef,\n  input,\n  output,\n  signal,\n  inject,\n  viewChild,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n  FormsModule, \n  NgControl, \n  FormControl \n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { AutoComplete } from 'primeng/autocomplete';\nimport { MessageModule } from 'primeng/message';\nimport { IconComponent } from '@tekus/design-system/components/icon';\ntype AutocompleteValue<T = unknown> = T | T[] | null;\n\n@Component({\n  selector: 'tk-autocomplete',\n  imports: [FormsModule, AutoComplete, FloatLabelModule, MessageModule, IconComponent],\n  templateUrl: './autocomplete.component.html',\n  styleUrl: './autocomplete.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AutocompleteComponent),\n      multi: true,\n    },\n  ],\n})\nexport class AutocompleteComponent<T = unknown>\n  implements ControlValueAccessor\n{\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  /**\n   * @property {string} id\n   * @description\n   * HTML id attribute for the autocomplete input.\n   *\n   * @default 'autocomplete'\n   */\n  id = input<string>('autocomplete');\n\n  /**\n   * @property {InputSignal<string>} icon\n   * @description\n   * Icon to display next to the input (e.g., 'magnifying-glass').\n   */\n  icon = input<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>();\n\n  /**\n   * @property {string} label\n   * @description\n   * Floating label displayed above the autocomplete input.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Determines whether the autocomplete field is disabled.\n   *\n   * @default false\n   */\n  disabled = 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 {AutocompleteValue<T>} value\n   * @description\n   * Internal selected value. Synced with Angular forms and the model signal.\n   *\n   * @internal\n   */\n  value: AutocompleteValue<T> = null;\n\n  internalDisabled = signal(false);\n\n  /**\n   * @property {Signal<AutocompleteValue<T>>} model\n   * @description\n   * Two-way binding model using Angular signals.\n   * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n   */\n  model = model<AutocompleteValue<T>>();\n\n  /**\n   * @event modelChange\n   * @description\n   * Emits whenever the value changes.\n   * Payload: the selected item(s) of type `AutocompleteValue<T>`.\n   *\n   * @example\n   * <tk-autocomplete (modelChange)=\"onChange($event)\"></tk-autocomplete>\n   */\n  modelChange = output<AutocompleteValue<T>>();\n\n  // -----------------------------------\n  // CVA CALLBACKS\n  // -----------------------------------\n\n  private onChangeFn: (value: AutocompleteValue<T>) => void = () => {};\n  private onTouchedFn = () => {};\n\n  private readonly init = (() => {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  })();\n\n  /**\n   * disabled → internalDisabled\n   */\n  private readonly syncDisabled = effect(() => {\n    this.internalDisabled.set(this.disabled());\n  });\n\n  /**\n   * model → internal value + forms\n   */\n  private readonly syncModel = effect(() => {\n    const v = this.model();\n    if (v !== this.value) {\n      this.value = v ?? null;\n      this.onChangeFn(this.value);\n    }\n  });\n\n  /**\n   * @method writeValue\n   * @description\n   * Receives value updates from Angular Forms and writes them into the component.\n   *\n   * @param {AutocompleteValue<T>} value - New value from the forms API.\n   */\n  writeValue(value: AutocompleteValue<T>): void {\n    this.model.set(value);\n  }\n\n  /**\n   * @method registerOnChange\n   * @description\n   * Registers a callback that is invoked when the component's value changes.\n   */\n  registerOnChange(fn: (value: AutocompleteValue<T>) => void): void {\n    this.onChangeFn = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description\n   * Registers a callback invoked when the component is touched.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouchedFn = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description\n   * Updates the disabled state of the autocomplete control.\n   *\n   * @param {boolean} isDisabled - Whether the component should be disabled.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.internalDisabled.set(isDisabled);\n  }\n\n  /**\n   * @method handleChange\n   * @description\n   * Handles value changes from the autocomplete component.\n   * Updates Angular Forms, Signals, and emits the modelChange event.\n   *\n   * @param {AutocompleteValue<T>} value - The new selected value(s).\n   */\n  handleChange(value: AutocompleteValue<T>) {\n    this.value = value;\n    this.onChangeFn(value);\n    this.onTouchedFn();\n    this.model.set(value);\n    this.modelChange.emit(value);\n    this.effectiveControl?.setValue(value);\n    this.effectiveControl?.markAsDirty();\n  }\n\n  /**\n   * @property {AutoComplete} autoComplete\n   * @description\n   * Reference to the underlying PrimeNG AutoComplete component.\n   * Used to access the native input element for chip creation on blur.\n   */\n  autoComplete = viewChild<AutoComplete>(AutoComplete);\n\n  /**\n   * @method handleBlur\n   * @description\n   * Handles the blur event of the autocomplete input.\n   * Captures any pending text in the input field and converts it into a chip/value.\n   * This ensures that typing text and clicking away behaves similarly to pressing \"Enter\".\n   */\n  handleBlur() {\n    const ac = this.autoComplete();\n    if (ac?.inputEL) {\n      const inputValue = ac.inputEL.nativeElement.value;\n      if (inputValue && inputValue.trim() !== '') {\n        const newValue = inputValue.trim();\n        const currentValues = Array.isArray(this.value) ? [...this.value] : [];\n        currentValues.push(newValue);\n\n        this.handleChange(currentValues as unknown as AutocompleteValue<T>);\n\n        ac.inputEL.nativeElement.value = '';\n      }\n    }\n  }\n\n  /**\n   * @method effectiveControl\n   * @description\n   * Gets the active FormControl for the component.\n   * Returns the injected NgControl's control if available, otherwise falls back to the local `control` input.\n   * This getter is crucial for unifying validation status checks in the template.\n   */\n  get effectiveControl(): FormControl | undefined {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n}\n","<p-floatlabel class=\"w-full\">\n  <div class=\"tk-autocomplete-wrapper\">\n    @if (icon()) {\n    <tk-icon [icon]=\"icon()\" class=\"tk-autocomplete-icon\"></tk-icon>\n    }\n    <p-autocomplete [ngModel]=\"value\" (ngModelChange)=\"handleChange($event)\" [disabled]=\"disabled()\" [inputId]=\"id()\"\n      [typeahead]=\"false\" multiple fluid (onBlur)=\"handleBlur()\"\n      [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\" [class.ng-touched]=\"effectiveControl?.touched\" />\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-autocomplete-bottom\">\n  <div class=\"tk-autocomplete-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</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-badge.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
 
@@ -42,11 +42,11 @@ class BadgeComponent {
         }, ...(ngDevMode ? [{ debugName: "primeSeverity" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", type: BadgeComponent, isStandalone: true, selector: "tk-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n", styles: [":host{display:inline-flex}:host ::ng-deep .p-badge{font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-legal-s, .625rem);border-radius:var(--tk-borderRadius-full, 50%)}:host ::ng-deep .p-badge-success{background-color:var(--tk-color-base-primary-500);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .p-badge-secondary{background-color:var(--tk-color-base-surface-300, #d2d2d2);color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .p-badge-contrast{background-color:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}\n"], dependencies: [{ kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i1.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", type: BadgeComponent, isStandalone: true, selector: "tk-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n", styles: [":host{display:inline-flex}:host ::ng-deep .p-badge{font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-legal-s, .625rem);border-radius:var(--tk-borderRadius-full, 50%)}:host ::ng-deep .p-badge-success{background-color:var(--tk-color-base-primary-500);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .p-badge-secondary{background-color:var(--tk-color-base-surface-300, #d2d2d2);color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .p-badge-contrast{background-color:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}\n"], dependencies: [{ kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i1.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-badge', standalone: true, imports: [BadgeModule], template: "<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n", styles: [":host{display:inline-flex}:host ::ng-deep .p-badge{font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-legal-s, .625rem);border-radius:var(--tk-borderRadius-full, 50%)}:host ::ng-deep .p-badge-success{background-color:var(--tk-color-base-primary-500);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .p-badge-secondary{background-color:var(--tk-color-base-surface-300, #d2d2d2);color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .p-badge-contrast{background-color:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-badge', imports: [BadgeModule], template: "<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n", styles: [":host{display:inline-flex}:host ::ng-deep .p-badge{font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-legal-s, .625rem);border-radius:var(--tk-borderRadius-full, 50%)}:host ::ng-deep .p-badge-success{background-color:var(--tk-color-base-primary-500);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .p-badge-secondary{background-color:var(--tk-color-base-surface-300, #d2d2d2);color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .p-badge-contrast{background-color:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-badge.mjs","sources":["../../../projects/design-system/components/badge/src/badge.component.ts","../../../projects/design-system/components/badge/src/badge.component.html","../../../projects/design-system/components/badge/tekus-design-system-components-badge.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { BadgeModule } from 'primeng/badge';\n\nexport type BadgeSeverity = 'secondary' | 'primary' | 'contrast';\n/**\n * @component BadgeComponent\n * @description\n * A component used to display numerical or textual badges.\n * It wraps PrimeNG's `p-badge` component with custom styling and behavior.\n *\n * This component supports:\n * - `value`: The text content to be displayed in the badge\n * - `severity`: The color scheme of the badge. Options: `'primary' | 'secondary' | 'contrast'`\n * - Automatically maps severity values to PrimeNG's badge styles\n *\n * @usage\n * ### Basic Usage\n * ```html\n * <tk-badge value=\"5\" severity=\"primary\"></tk-badge>\n * */\n@Component({\n  selector: 'tk-badge',\n  standalone: true,\n  imports: [BadgeModule],\n  templateUrl: './badge.component.html',\n  styleUrl: './badge.component.scss',\n})\nexport class BadgeComponent {\n  /** The text content to be displayed in the badge. */\n  value = input.required<string>();\n\n  /**\n   * The severity level of the badge, which determines its color and styling.\n   * @default 'primary'\n   */\n  severity = input<BadgeSeverity>('primary');\n\n  /**\n   * Computed property that maps the custom `BadgeSeverity` to the underlying PrimeNG `severity`.\n   * Returns `undefined` for 'primary' as it uses the default style, and maps others accordingly.\n   */\n  primeSeverity = computed((): 'success' | 'secondary' | 'contrast' => {\n    const severityMap: Record<\n      BadgeSeverity,\n      'success' | 'secondary' | 'contrast'\n    > = {\n      secondary: 'secondary',\n      primary: 'success',\n      contrast: 'contrast',\n    };\n    return severityMap[this.severity()];\n  });\n}\n","<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAIA;;;;;;;;;;;;;;;AAeK;MAQQ,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAEhC;;;AAGG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAgB,SAAS,+EAAC;AAE1C;;;AAGG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAA2C;AAClE,YAAA,MAAM,WAAW,GAGb;AACF,gBAAA,SAAS,EAAE,WAAW;AACtB,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,QAAQ,EAAE,UAAU;aACrB;AACD,YAAA,OAAO,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACrC,QAAA,CAAC,oFAAC;AACH,IAAA;8GAzBY,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3B3B,kEACA,EAAA,MAAA,EAAA,CAAA,0lBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDsBY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIV,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,UAAA,EACR,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,CAAC,EAAA,QAAA,EAAA,kEAAA,EAAA,MAAA,EAAA,CAAA,0lBAAA,CAAA,EAAA;;;AEvBxB;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-badge.mjs","sources":["../../../projects/design-system/components/badge/src/badge.component.ts","../../../projects/design-system/components/badge/src/badge.component.html","../../../projects/design-system/components/badge/tekus-design-system-components-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { BadgeModule } from 'primeng/badge';\n\nexport type BadgeSeverity = 'secondary' | 'primary' | 'contrast';\n/**\n * @component BadgeComponent\n * @description\n * A component used to display numerical or textual badges.\n * It wraps PrimeNG's `p-badge` component with custom styling and behavior.\n *\n * This component supports:\n * - `value`: The text content to be displayed in the badge\n * - `severity`: The color scheme of the badge. Options: `'primary' | 'secondary' | 'contrast'`\n * - Automatically maps severity values to PrimeNG's badge styles\n *\n * @usage\n * ### Basic Usage\n * ```html\n * <tk-badge value=\"5\" severity=\"primary\"></tk-badge>\n * */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-badge',\n  imports: [BadgeModule],\n  templateUrl: './badge.component.html',\n  styleUrl: './badge.component.scss',\n})\nexport class BadgeComponent {\n  /** The text content to be displayed in the badge. */\n  value = input.required<string>();\n\n  /**\n   * The severity level of the badge, which determines its color and styling.\n   * @default 'primary'\n   */\n  severity = input<BadgeSeverity>('primary');\n\n  /**\n   * Computed property that maps the custom `BadgeSeverity` to the underlying PrimeNG `severity`.\n   * Returns `undefined` for 'primary' as it uses the default style, and maps others accordingly.\n   */\n  primeSeverity = computed((): 'success' | 'secondary' | 'contrast' => {\n    const severityMap: Record<\n      BadgeSeverity,\n      'success' | 'secondary' | 'contrast'\n    > = {\n      secondary: 'secondary',\n      primary: 'success',\n      contrast: 'contrast',\n    };\n    return severityMap[this.severity()];\n  });\n}\n","<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAIA;;;;;;;;;;;;;;;AAeK;MAQQ,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAEhC;;;AAGG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAgB,SAAS,+EAAC;AAE1C;;;AAGG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAA2C;AAClE,YAAA,MAAM,WAAW,GAGb;AACF,gBAAA,SAAS,EAAE,WAAW;AACtB,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,QAAQ,EAAE,UAAU;aACrB;AACD,YAAA,OAAO,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACrC,QAAA,CAAC,oFAAC;AACH,IAAA;8GAzBY,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3B3B,kEACA,EAAA,MAAA,EAAA,CAAA,0lBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDsBY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAIV,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACS,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,UAAU,EAAA,OAAA,EACX,CAAC,WAAW,CAAC,EAAA,QAAA,EAAA,kEAAA,EAAA,MAAA,EAAA,CAAA,0lBAAA,CAAA,EAAA;;;AEvBxB;;AAEG;;;;"}

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Input, Output, Component } from '@angular/core';
+import { input, output, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { IconComponent } from '@tekus/design-system/components/icon';
@@ -10,7 +10,7 @@ import { Tooltip } from 'primeng/tooltip';
  * @description
  * Atomic button component that provides a reusable and customizable button element
  * across the application.
- * It uses PrimeNG’s `ButtonModule` under the hood and allows setting different visual
+ * It uses PrimeNG's `ButtonModule` under the hood and allows setting different visual
  * variants (severity), button types, and disabled states.
  *
  * This component ensures consistent design and behavior in all button interactions.
@@ -34,6 +34,14 @@ import { Tooltip } from 'primeng/tooltip';
  */
 class ButtonComponent {
     constructor() {
+        /**
+         * @property {string} label
+         * @description
+         * Text displayed inside the button.
+         *
+         * @default `undefined`
+         */
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
         /**
          * @property {boolean} disabled
          * @description
@@ -42,17 +50,17 @@ class ButtonComponent {
          *
          * @default `false`
          */
-        this.disabled = false;
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /**
          * @property {'button' | 'submit'} type
          * @description
-         * Defines the button’s HTML type attribute.
+         * Defines the button's HTML type attribute.
          * - `'button'`: Standard clickable button (default).
          * - `'submit'`: Used to submit forms.
          *
          * @default `'button'`
          */
-        this.type = 'button';
+        this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         /**
          * @property {ButtonSeverity} severity
          * @description
@@ -61,9 +69,19 @@ class ButtonComponent {
          * - `'secondary'`: Secondary option.
          * - `'danger'`: Destructive or warning actions.
          *
-         * @default `'secondary'`
+         * @default `'primary'`
+         */
+        this.severity = input('primary', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {'text' | 'outlined'} variant
+         * @description
+         * Defines the variant of the button.
+         * - `'text'`: Text-only button.
+         * - `'outlined'`: Outlined button.
+         *
+         * @default `undefined`
          */
-        this.severity = 'primary';
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
         /**
          * @property {boolean} link
          * @description
@@ -71,7 +89,16 @@ class ButtonComponent {
          *
          * @default false
          */
-        this.link = false;
+        this.link = input(false, ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {string} icon
+         * @description
+         * - If `label` is provided, the icon is displayed to the left.
+         * - If `label` is empty, the button is rendered as an icon-only button.
+         *
+         * @default `undefined`
+         */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
         /**
          * @event clicked
          * @description
@@ -83,7 +110,15 @@ class ButtonComponent {
          * <tk-button label="Click me" (clicked)="handleClick()"></tk-button>
          * ```
          */
-        this.clicked = new EventEmitter();
+        this.clicked = output();
+        /**
+         * @property {string} tooltipText
+         * @description
+         * Tooltip text to be displayed when the user hovers over the button.
+         *
+         * @default `undefined`
+         */
+        this.tooltipText = input(...(ngDevMode ? [undefined, { debugName: "tooltipText" }] : /* istanbul ignore next */ []));
     }
     /**
      * @method onButtonClick
@@ -92,34 +127,16 @@ class ButtonComponent {
      * is not disabled.
      */
     onButtonClick() {
-        if (!this.disabled)
+        if (!this.disabled())
             this.clicked.emit('mouse');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ButtonComponent, isStandalone: true, selector: "tk-button", inputs: { label: "label", disabled: "disabled", type: "type", severity: "severity", variant: "variant", link: "link", icon: "icon", tooltipText: "tooltipText" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<p-button\n  class=\"tk-button\"\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [type]=\"type\"\n  [severity]=\"link ? null : severity\"\n  [variant]=\"variant\"\n  [link]=\"link\"\n  [pTooltip]=\"tooltipText\"\n  tooltipPosition=\"top\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon) {\n   <tk-icon [icon]=\"icon\"></tk-icon>\n  }\n</p-button>\n", styles: [":host ::ng-deep .p-button{min-width:var(--tk-size-base-250, 2.5rem)}:host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep .p-button-label{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ButtonComponent, isStandalone: true, selector: "tk-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<p-button\n  class=\"tk-button\"\n  [label]=\"label()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [severity]=\"link() ? undefined : severity()\"\n  [variant]=\"variant()\"\n  [link]=\"link()\"\n  [pTooltip]=\"tooltipText()\"\n  tooltipPosition=\"top\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon()) {\n   <tk-icon [icon]=\"icon()!\"></tk-icon>\n  }\n</p-button>\n", styles: [":host ::ng-deep .p-button{min-width:var(--tk-size-base-250, 2.5rem)}:host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep .p-button-label{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-button', standalone: true, imports: [ButtonModule, IconComponent, Tooltip], template: "<p-button\n  class=\"tk-button\"\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [type]=\"type\"\n  [severity]=\"link ? null : severity\"\n  [variant]=\"variant\"\n  [link]=\"link\"\n  [pTooltip]=\"tooltipText\"\n  tooltipPosition=\"top\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon) {\n   <tk-icon [icon]=\"icon\"></tk-icon>\n  }\n</p-button>\n", styles: [":host ::ng-deep .p-button{min-width:var(--tk-size-base-250, 2.5rem)}:host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep .p-button-label{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], severity: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], link: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }], tooltipText: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'tk-button', imports: [ButtonModule, IconComponent, Tooltip], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-button\n  class=\"tk-button\"\n  [label]=\"label()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [severity]=\"link() ? undefined : severity()\"\n  [variant]=\"variant()\"\n  [link]=\"link()\"\n  [pTooltip]=\"tooltipText()\"\n  tooltipPosition=\"top\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon()) {\n   <tk-icon [icon]=\"icon()!\"></tk-icon>\n  }\n</p-button>\n", styles: [":host ::ng-deep .p-button{min-width:var(--tk-size-base-250, 2.5rem)}:host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep .p-button-label{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-button.mjs","sources":["../../../projects/design-system/components/button/src/button.component.ts","../../../projects/design-system/components/button/src/button.component.html","../../../projects/design-system/components/button/tekus-design-system-components-button.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { ButtonModule } from 'primeng/button';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { Tooltip } from 'primeng/tooltip';\n\n\nexport type ButtonSeverity = 'primary' | 'secondary' | 'danger';\nexport type Variant = 'text' | 'outlined';\n/**\n * @component ButtonComponent\n * @description\n * Atomic button component that provides a reusable and customizable button element\n * across the application.\n * It uses PrimeNG’s `ButtonModule` under the hood and allows setting different visual\n * variants (severity), button types, and disabled states.\n *\n * This component ensures consistent design and behavior in all button interactions.\n * It is accessible via both mouse clicks and keyboard actions (Enter/Space).\n *\n * @usage\n * ```html\n * <tk-button\n * label=\"Save\"\n * [severity]=\"'primary'\"\n * [type]=\"'submit'\"\n * (clicked)=\"handleSave()\">\n * </tk-button>\n *\n * <tk-button\n * label=\"Cancel\"\n * [severity]=\"'secondary'\"\n * [disabled]=\"true\">\n * </tk-button>\n * ```\n */\n@Component({\n  selector: 'tk-button',\n  standalone: true,\n  imports: [ButtonModule, IconComponent, Tooltip],\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n})\nexport class ButtonComponent {\n  /**\n   * @property {string} label\n   * @description\n   * Text displayed inside the button.\n   *\n   * @description\n   * Text displayed inside the button.\n   *\n   * @default `undefined`\n   */\n  @Input() label?: string;\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Disables the button, preventing user interaction and applying a visual style\n   * that indicates the inactive state.\n   *\n   * @default `false`\n   */\n  @Input() disabled = false;\n\n  /**\n   * @property {'button' | 'submit'} type\n   * @description\n   * Defines the button’s HTML type attribute.\n   * - `'button'`: Standard clickable button (default).\n   * - `'submit'`: Used to submit forms.\n   *\n   * @default `'button'`\n   */\n  @Input() type: 'button' | 'submit' = 'button';\n\n  /**\n   * @property {ButtonSeverity} severity\n   * @description\n   * Defines the visual importance or style of the button.\n   * - `'primary'`:  Default, neutral action.\n   * - `'secondary'`: Secondary option.\n   * - `'danger'`: Destructive or warning actions.\n   *\n   * @default `'secondary'`\n   */\n  @Input() severity: ButtonSeverity = 'primary';\n\n  /**\n   * @property {'text' | 'outlined'} variant\n   * @description\n   * Defines the variant of the button.\n   * - `'text'`: Text-only button.\n   * - `'outlined'`: Outlined button.\n   *\n   * @default `undefined`\n   */\n  @Input() variant?: Variant;\n\n  /**\n   * @property {boolean} link\n   * @description\n   * When true, the button will be styled as a link (text only with underline).\n   *\n   * @default false\n   */\n  @Input() link = false;\n\n  /**\n   * @property {string} icon\n   * @description\n   * - If `label` is provided, the icon is displayed to the left.\n   * - If `label` is empty, the button is rendered as an icon-only button.\n   *\n   * @default `undefined`\n   */\n  @Input() icon?: string;\n\n  /**\n   * @event clicked\n   * @description\n   * Emits when the button is activated via click or keyboard (Enter/Space),\n   * unless the button is disabled.\n   *\n   * @example\n   * ```html\n   * <tk-button label=\"Click me\" (clicked)=\"handleClick()\"></tk-button>\n   * ```\n   */\n  @Output() clicked = new EventEmitter<'mouse' | 'keyboard'>();\n\n  /**\n   * @property {string} tooltipText\n   * @description\n   * Tooltip text to be displayed when the user hovers over the button.\n   *\n   * @default `undefined`\n   */\n  @Input() tooltipText?: string;\n\n  /**\n   * @method onButtonClick\n   * @description\n   * Handles the native click event. Emits the `clicked` event if the button\n   * is not disabled.\n   */\n  onButtonClick(): void {\n    if (!this.disabled) this.clicked.emit('mouse');\n  }\n}\n","<p-button\n  class=\"tk-button\"\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [type]=\"type\"\n  [severity]=\"link ? null : severity\"\n  [variant]=\"variant\"\n  [link]=\"link\"\n  [pTooltip]=\"tooltipText\"\n  tooltipPosition=\"top\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon) {\n   <tk-icon [icon]=\"icon\"></tk-icon>\n  }\n</p-button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BG;MAQU,eAAe,CAAA;AAP5B,IAAA,WAAA,GAAA;AAoBE;;;;;;;AAOG;QACM,IAAA,CAAA,QAAQ,GAAG,KAAK;AAEzB;;;;;;;;AAQG;QACM,IAAA,CAAA,IAAI,GAAwB,QAAQ;AAE7C;;;;;;;;;AASG;QACM,IAAA,CAAA,QAAQ,GAAmB,SAAS;AAa7C;;;;;;AAMG;QACM,IAAA,CAAA,IAAI,GAAG,KAAK;AAYrB;;;;;;;;;;AAUG;AACO,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,YAAY,EAAwB;AAoB7D,IAAA;AATC;;;;;AAKG;IACH,aAAa,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;IAChD;8GA1GW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,wQC1C5B,+aAkBA,EAAA,MAAA,EAAA,CAAA,+/BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDoBY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,SAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,eAAA,EAAA,WAAA,EAAA,WAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,2MAAE,OAAO,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,cAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,QAAA,EAAA,WAAA,EAAA,WAAA,EAAA,MAAA,EAAA,aAAA,EAAA,cAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,WAAA,EAAA,YAAA,EAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAInC,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;+BACE,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,aAAa,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,+aAAA,EAAA,MAAA,EAAA,CAAA,+/BAAA,CAAA,EAAA;;sBAe9C;;sBAUA;;sBAWA;;sBAYA;;sBAWA;;sBASA;;sBAUA;;sBAaA;;sBASA;;;AE1IH;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-button.mjs","sources":["../../../projects/design-system/components/button/src/button.component.ts","../../../projects/design-system/components/button/src/button.component.html","../../../projects/design-system/components/button/tekus-design-system-components-button.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\nimport { ButtonModule } from 'primeng/button';\nimport { IconComponent } from '@tekus/design-system/components/icon';\nimport { Tooltip } from 'primeng/tooltip';\n\n\nexport type ButtonSeverity = 'primary' | 'secondary' | 'danger';\nexport type Variant = 'text' | 'outlined';\n/**\n * @component ButtonComponent\n * @description\n * Atomic button component that provides a reusable and customizable button element\n * across the application.\n * It uses PrimeNG's `ButtonModule` under the hood and allows setting different visual\n * variants (severity), button types, and disabled states.\n *\n * This component ensures consistent design and behavior in all button interactions.\n * It is accessible via both mouse clicks and keyboard actions (Enter/Space).\n *\n * @usage\n * ```html\n * <tk-button\n * label=\"Save\"\n * [severity]=\"'primary'\"\n * [type]=\"'submit'\"\n * (clicked)=\"handleSave()\">\n * </tk-button>\n *\n * <tk-button\n * label=\"Cancel\"\n * [severity]=\"'secondary'\"\n * [disabled]=\"true\">\n * </tk-button>\n * ```\n */\n@Component({\n  selector: 'tk-button',\n  imports: [ButtonModule, IconComponent, Tooltip],\n  templateUrl: './button.component.html',\n  styleUrl: './button.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent {\n  /**\n   * @property {string} label\n   * @description\n   * Text displayed inside the button.\n   *\n   * @default `undefined`\n   */\n  label = input<string>();\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Disables the button, preventing user interaction and applying a visual style\n   * that indicates the inactive state.\n   *\n   * @default `false`\n   */\n  disabled = input<boolean>(false);\n\n  /**\n   * @property {'button' | 'submit'} type\n   * @description\n   * Defines the button's HTML type attribute.\n   * - `'button'`: Standard clickable button (default).\n   * - `'submit'`: Used to submit forms.\n   *\n   * @default `'button'`\n   */\n  type = input<'button' | 'submit'>('button');\n\n  /**\n   * @property {ButtonSeverity} severity\n   * @description\n   * Defines the visual importance or style of the button.\n   * - `'primary'`:  Default, neutral action.\n   * - `'secondary'`: Secondary option.\n   * - `'danger'`: Destructive or warning actions.\n   *\n   * @default `'primary'`\n   */\n  severity = input<ButtonSeverity>('primary');\n\n  /**\n   * @property {'text' | 'outlined'} variant\n   * @description\n   * Defines the variant of the button.\n   * - `'text'`: Text-only button.\n   * - `'outlined'`: Outlined button.\n   *\n   * @default `undefined`\n   */\n  variant = input<Variant>();\n\n  /**\n   * @property {boolean} link\n   * @description\n   * When true, the button will be styled as a link (text only with underline).\n   *\n   * @default false\n   */\n  link = input<boolean>(false);\n\n  /**\n   * @property {string} icon\n   * @description\n   * - If `label` is provided, the icon is displayed to the left.\n   * - If `label` is empty, the button is rendered as an icon-only button.\n   *\n   * @default `undefined`\n   */\n  icon = input<string>();\n\n  /**\n   * @event clicked\n   * @description\n   * Emits when the button is activated via click or keyboard (Enter/Space),\n   * unless the button is disabled.\n   *\n   * @example\n   * ```html\n   * <tk-button label=\"Click me\" (clicked)=\"handleClick()\"></tk-button>\n   * ```\n   */\n  clicked = output<'mouse' | 'keyboard'>();\n\n  /**\n   * @property {string} tooltipText\n   * @description\n   * Tooltip text to be displayed when the user hovers over the button.\n   *\n   * @default `undefined`\n   */\n  tooltipText = input<string>();\n\n  /**\n   * @method onButtonClick\n   * @description\n   * Handles the native click event. Emits the `clicked` event if the button\n   * is not disabled.\n   */\n  onButtonClick(): void {\n    if (!this.disabled()) this.clicked.emit('mouse');\n  }\n}\n","<p-button\n  class=\"tk-button\"\n  [label]=\"label()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [severity]=\"link() ? undefined : severity()\"\n  [variant]=\"variant()\"\n  [link]=\"link()\"\n  [pTooltip]=\"tooltipText()\"\n  tooltipPosition=\"top\"\n  (click)=\"onButtonClick()\"\n  (keydown.enter)=\"onButtonClick()\"\n  (keydown.space)=\"onButtonClick()\">\n\n  @if (icon()) {\n   <tk-icon [icon]=\"icon()!\"></tk-icon>\n  }\n</p-button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,20 +1,17 @@
 import * as i0 from '@angular/core';
-import { inject, model, input, Component } from '@angular/core';
+import { inject, DestroyRef, model, input, 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/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import * as i3 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
 
 class CheckboxComponent {
-    /**
-     * Initialize the component and register it as a ControlValueAccessor.
-     */
     constructor() {
-        /** Internal references and injections */
         this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.destroyRef = inject(DestroyRef);
         /** Properties and Signals */
         /**
          * @property {ModelSignal<any>} model
@@ -82,7 +79,6 @@ class CheckboxComponent {
         this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouched = () => { };
-        this.subscription = new Subscription();
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
@@ -102,15 +98,16 @@ class CheckboxComponent {
         else {
             this.disabled.set(control.disabled);
         }
-        this.subscription.add(control.statusChanges.subscribe(() => {
+        control.statusChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
             this.disabled.set(control.disabled);
-        }));
-        this.subscription.add(control.valueChanges.subscribe(value => {
+        });
+        control.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(value => {
             this.model.set(value);
-        }));
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
+        });
     }
     /**
      * Implementation of ControlValueAccessor: Writes a new value from the form.
@@ -160,7 +157,7 @@ class CheckboxComponent {
         this.effectiveControl.markAsTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: CheckboxComponent, isStandalone: true, selector: "tk-checkbox", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", indeterminate: "indeterminateChange", disabled: "disabledChange" }, ngImport: i0, template: "<div class=\"tk-checkbox-wrapper\">\n  <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n    <p-checkbox\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [binary]=\"binary()\"\n      [disabled]=\"disabled()\"\n      [indeterminate]=\"indeterminate()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-checkbox>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .tk-checkbox-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-checkbox-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-checkbox-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-checkbox-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-checkbox-label{margin-top:var(--tk-spacing-base-25, .25rem)}: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 .p-checkbox.p-disabled .p-checkbox-icon{color:var(--tk-color-base-surface-300, #d2d2d2)!important}:host ::ng-deep p-checkbox.ng-invalid.ng-touched .p-checkbox-box,:host ::ng-deep p-checkbox.ng-invalid.ng-dirty .p-checkbox-box{border-color:var(--tk-color-base-red-700, #cf2604)}\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: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: CheckboxComponent, isStandalone: true, selector: "tk-checkbox", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", indeterminate: "indeterminateChange", disabled: "disabledChange" }, ngImport: i0, template: "<div class=\"tk-checkbox-wrapper\">\n  <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n    <p-checkbox\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [binary]=\"binary()\"\n      [disabled]=\"disabled()\"\n      [indeterminate]=\"indeterminate()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-checkbox>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .tk-checkbox-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-checkbox-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-checkbox-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-checkbox-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-checkbox-label{margin-top:var(--tk-spacing-base-25, .25rem)}: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 .p-checkbox.p-disabled .p-checkbox-icon{color:var(--tk-color-base-surface-300, #d2d2d2)!important}:host ::ng-deep p-checkbox.ng-invalid.ng-touched .p-checkbox-box,:host ::ng-deep p-checkbox.ng-invalid.ng-dirty .p-checkbox-box{border-color:var(--tk-color-base-red-700, #cf2604)}\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: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -169,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                         FormsModule,
                         CheckboxModule,
                         MessageModule,
-                    ], template: "<div class=\"tk-checkbox-wrapper\">\n  <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n    <p-checkbox\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [binary]=\"binary()\"\n      [disabled]=\"disabled()\"\n      [indeterminate]=\"indeterminate()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-checkbox>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .tk-checkbox-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-checkbox-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-checkbox-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-checkbox-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-checkbox-label{margin-top:var(--tk-spacing-base-25, .25rem)}: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 .p-checkbox.p-disabled .p-checkbox-icon{color:var(--tk-color-base-surface-300, #d2d2d2)!important}:host ::ng-deep p-checkbox.ng-invalid.ng-touched .p-checkbox-box,:host ::ng-deep p-checkbox.ng-invalid.ng-dirty .p-checkbox-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tk-checkbox-wrapper\">\n  <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n    <p-checkbox\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [binary]=\"binary()\"\n      [disabled]=\"disabled()\"\n      [indeterminate]=\"indeterminate()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-checkbox>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .tk-checkbox-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-checkbox-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-checkbox-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-checkbox-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-checkbox-label{margin-top:var(--tk-spacing-base-25, .25rem)}: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 .p-checkbox.p-disabled .p-checkbox-icon{color:var(--tk-color-base-surface-300, #d2d2d2)!important}:host ::ng-deep p-checkbox.ng-invalid.ng-touched .p-checkbox-box,:host ::ng-deep p-checkbox.ng-invalid.ng-dirty .p-checkbox-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], binary: [{ type: i0.Input, args: [{ isSignal: true, alias: "binary", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }] } });
 
 /**