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

@tekus/design-system 5.18.0 → 5.20.0

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

Files changed (51) hide show

package/fesm2022/tekus-design-system-components-radio-button.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, model, input, signal, Component } from '@angular/core';
+import { inject, model, input, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NgControl, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { Subscription } from 'rxjs';
@@ -10,6 +10,9 @@ import * as i3 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
 class RadioButtonComponent {
+    /**
+     * Initialize the component and register it as a ControlValueAccessor.
+     */
     constructor() {
         this.ngControl = inject(NgControl, { self: true, optional: true });
         /**
@@ -57,11 +60,11 @@ class RadioButtonComponent {
          */
         this.errorMessage = input('');
         /**
-         * @property {boolean} disabled
+         * @property {ModelSignal<boolean>} disabled
          * @description
          * Whether the radio button is disabled.
          */
-        this.disabled = signal(false);
+        this.disabled = model(false);
         this.onChange = () => { };
         this.onTouched = () => { };
         this.subscription = new Subscription();
@@ -69,49 +72,72 @@ class RadioButtonComponent {
             this.ngControl.valueAccessor = this;
         }
     }
+    /**
+     * Returns the control currently in use, either from NgControl or the standalone Input.
+     */
     get effectiveControl() {
         return this.ngControl?.control || this.control();
     }
+    /**
+     * Configure synchronization between the form control and component state.
+     */
     ngOnInit() {
         const control = this.effectiveControl;
-        if (control.value !== undefined) {
+        if (control.value !== undefined && control.value !== null) {
             this.model.set(control.value);
         }
-        // Sync initial disabled state
-        this.disabled.set(control.disabled);
-        this.subscription.add(control.valueChanges.subscribe(val => {
-            if (val !== this.model()) {
-                this.model.set(val);
-                this.onChange(val);
-            }
-        }));
-        // Sync disabled state on status change
+        if (this.control() === control && this.disabled()) {
+            control.disable({ emitEvent: false });
+        }
+        else {
+            this.disabled.set(control.disabled);
+        }
         this.subscription.add(control.statusChanges.subscribe(() => {
             this.disabled.set(control.disabled);
         }));
+        this.subscription.add(control.valueChanges.subscribe(value => {
+            this.model.set(value);
+        }));
     }
+    /**
+     * Clean up subscriptions.
+     */
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
+    /**
+     * Implementation of ControlValueAccessor: Writes a new value from the form.
+     */
     writeValue(value) {
         this.model.set(value);
-        this.control().setValue(value, { emitEvent: false });
     }
+    /**
+     * Implementation of ControlValueAccessor: Registers a callback for change events.
+     */
     registerOnChange(fn) {
         this.onChange = fn;
     }
+    /**
+     * Implementation of ControlValueAccessor: Registers a callback for touched events.
+     */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /**
+     * Implementation of ControlValueAccessor: Sets the disabled state.
+     */
     setDisabledState(isDisabled) {
         this.disabled.set(isDisabled);
         if (isDisabled) {
-            this.control().disable({ emitEvent: false });
+            this.control().disable();
         }
         else {
-            this.control().enable({ emitEvent: false });
+            this.control().enable();
         }
     }
+    /**
+     * Handle model change events from the template.
+     */
     onModelChange(value) {
         this.model.set(value);
         this.onChange(value);
@@ -119,16 +145,25 @@ class RadioButtonComponent {
         this.effectiveControl.markAsDirty();
         this.onTouched();
     }
+    /**
+     * Handle blur events to trigger onTouched.
+     */
     onBlur() {
         this.onTouched();
         this.effectiveControl.markAsTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: RadioButtonComponent, isStandalone: true, selector: "tk-radio-button", 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 }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange" }, ngImport: i0, template: "<div class=\"tk-radio-button-wrapper\">\n  <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n    <p-radioButton\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\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-radioButton>\n    @if(label()){\n        <label [for]=\"inputId()\" class=\"tk-radio-button-label\"> {{ label() }} </label>\n    }\n  </div>\n  \n  <div class=\"tk-input-bottom\">\n    <div class=\"tk-input-messages\">\n      @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep .tk-radio-button-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-radio-button-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-radio-button-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-radio-button-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-radio-button-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 .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-radiobutton.p-disabled .p-radiobutton-box{border-color:var(--tk-color-base-surface-300, #d2d2d2);background-color:var(--tk-color-base-surface-100, #fcfcfc)}:host ::ng-deep .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon{background-color:var(--tk-color-base-surface-300, #d2d2d2)}:host ::ng-deep p-radiobutton.ng-invalid.ng-touched .p-radiobutton-box,:host ::ng-deep p-radiobutton.ng-invalid.ng-dirty .p-radiobutton-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: RadioButtonModule }, { kind: "component", type: i2.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "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"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: RadioButtonComponent, isStandalone: true, selector: "tk-radio-button", 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 }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", disabled: "disabledChange" }, ngImport: i0, template: "<div class=\"tk-radio-button-wrapper\">\n  <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n    <p-radioButton\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\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-radioButton>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-radio-button-label\">\n        {{ label() }}\n      </label>\n    }\n  </div>\n\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-radio-button-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-radio-button-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-radio-button-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-radio-button-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-radio-button-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 .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-radiobutton.p-disabled .p-radiobutton-box{border-color:var(--tk-color-base-surface-300, #d2d2d2);background-color:var(--tk-color-base-surface-100, #fcfcfc)}:host ::ng-deep .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon{background-color:var(--tk-color-base-surface-300, #d2d2d2)}:host ::ng-deep p-radiobutton.ng-invalid.ng-touched .p-radiobutton-box,:host ::ng-deep p-radiobutton.ng-invalid.ng-dirty .p-radiobutton-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: RadioButtonModule }, { kind: "component", type: i2.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "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"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-radio-button', imports: [CommonModule, ReactiveFormsModule, FormsModule, RadioButtonModule, MessageModule], template: "<div class=\"tk-radio-button-wrapper\">\n  <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n    <p-radioButton\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\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-radioButton>\n    @if(label()){\n        <label [for]=\"inputId()\" class=\"tk-radio-button-label\"> {{ label() }} </label>\n    }\n  </div>\n  \n  <div class=\"tk-input-bottom\">\n    <div class=\"tk-input-messages\">\n      @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep .tk-radio-button-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-radio-button-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-radio-button-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-radio-button-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-radio-button-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 .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-radiobutton.p-disabled .p-radiobutton-box{border-color:var(--tk-color-base-surface-300, #d2d2d2);background-color:var(--tk-color-base-surface-100, #fcfcfc)}:host ::ng-deep .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon{background-color:var(--tk-color-base-surface-300, #d2d2d2)}:host ::ng-deep p-radiobutton.ng-invalid.ng-touched .p-radiobutton-box,:host ::ng-deep p-radiobutton.ng-invalid.ng-dirty .p-radiobutton-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"] }]
+            args: [{ selector: 'tk-radio-button', imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        RadioButtonModule,
+                        MessageModule,
+                    ], template: "<div class=\"tk-radio-button-wrapper\">\n  <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n    <p-radioButton\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\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-radioButton>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-radio-button-label\">\n        {{ label() }}\n      </label>\n    }\n  </div>\n\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-radio-button-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-radio-button-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-radio-button-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-radio-button-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-radio-button-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 .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-radiobutton.p-disabled .p-radiobutton-box{border-color:var(--tk-color-base-surface-300, #d2d2d2);background-color:var(--tk-color-base-surface-100, #fcfcfc)}:host ::ng-deep .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon{background-color:var(--tk-color-base-surface-300, #d2d2d2)}:host ::ng-deep p-radiobutton.ng-invalid.ng-touched .p-radiobutton-box,:host ::ng-deep p-radiobutton.ng-invalid.ng-dirty .p-radiobutton-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"] }]
         }], ctorParameters: () => [] });
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tekus-design-system-components-radio-button.mjs","sources":["../../../projects/design-system/components/radio-button/src/radio-button.component.ts","../../../projects/design-system/components/radio-button/src/radio-button.component.html","../../../projects/design-system/components/radio-button/tekus-design-system-components-radio-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, input, model, signal, OnInit, inject, OnDestroy } from '@angular/core';\nimport { ControlValueAccessor, FormControl, ReactiveFormsModule, NgControl, FormsModule } from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { RadioButtonModule } from 'primeng/radiobutton';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n selector: 'tk-radio-button',\n imports: [CommonModule, ReactiveFormsModule, FormsModule, RadioButtonModule, MessageModule],\n templateUrl: './radio-button.component.html',\n styleUrl: './radio-button.component.scss'\n})\nexport class RadioButtonComponent implements ControlValueAccessor, OnInit, OnDestroy {\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n /*\n @property {ModelSignal<any>} model\n * @description\n * The value of the radio button model (checked state).\n * Supports two-way binding via signals.\n /\n model = model<unknown>();\n\n /\n @property {InputSignal<any>} value\n * @description\n * The value of the radio button itself (used when part of a group).\n /\n value = input<unknown>();\n\n /\n @property {InputSignal<string>} label\n * @description\n * Label displayed next to the radio button.\n /\n label = input<string>('');\n\n /\n @property {InputSignal<string>} name\n * @description\n * Name attribute for the radio button.\n /\n name = input<string>('');\n\n /\n @property {InputSignal<string>} inputId\n * @description\n * HTML id attribute for the radio button input.\n /\n inputId = input<string>('');\n\n /\n @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the radio button value.\n * If not provided, an internal FormControl is created.\n /\n control = input<FormControl>(new FormControl());\n\n /\n @property {InputSignal<string>} errorMessage\n * @description\n * Message to display when the control is invalid and touched.\n /\n errorMessage = input<string>('');\n\n /\n @property {boolean} disabled\n * @description\n * Whether the radio button is disabled.\n /\n disabled = signal<boolean>(false);\n\n get effectiveControl(): FormControl {\n return (this.ngControl?.control as FormControl) \|\| this.control();\n }\n\n onChange: (value: unknown) => void = () => {};\n onTouched: () => void = () => {};\n private readonly subscription = new Subscription();\n\n ngOnInit(): void {\n const control = this.effectiveControl;\n if (control.value !== undefined) {\n this.model.set(control.value);\n }\n\n // Sync initial disabled state\n this.disabled.set(control.disabled);\n\n this.subscription.add(\n control.valueChanges.subscribe(val => {\n if (val !== this.model()) {\n this.model.set(val);\n this.onChange(val);\n }\n })\n );\n\n // Sync disabled state on status change\n this.subscription.add(\n control.statusChanges.subscribe(() => {\n this.disabled.set(control.disabled);\n })\n );\n }\n\n ngOnDestroy(): void {\n this.subscription.unsubscribe();\n }\n\n writeValue(value: unknown): void {\n this.model.set(value);\n this.control().setValue(value, { emitEvent: false });\n }\n\n registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState?(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n if (isDisabled) {\n this.control().disable({ emitEvent: false });\n } else {\n this.control().enable({ emitEvent: false });\n }\n }\n\n onModelChange(value: unknown): void {\n this.model.set(value);\n this.onChange(value);\n this.effectiveControl.setValue(value);\n this.effectiveControl.markAsDirty();\n this.onTouched();\n }\n\n onBlur(): void {\n this.onTouched();\n this.effectiveControl.markAsTouched();\n }\n}\n","<div class=\"tk-radio-button-wrapper\">\n <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n <p-radioButton\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\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-radioButton>\n @if(label()){\n <label [for]=\"inputId()\" class=\"tk-radio-button-label\"> {{ label() }} </label>\n }\n </div>\n \n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl.invalid && (effectiveControl.dirty \|\| effectiveControl.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n }\n </div>\n </div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"tekus-design-system-components-radio-button.mjs","sources":["../../../projects/design-system/components/radio-button/src/radio-button.component.ts","../../../projects/design-system/components/radio-button/src/radio-button.component.html","../../../projects/design-system/components/radio-button/tekus-design-system-components-radio-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n Component,\n input,\n model,\n OnInit,\n inject,\n OnDestroy,\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n FormControl,\n ReactiveFormsModule,\n NgControl,\n FormsModule,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { RadioButtonModule } from 'primeng/radiobutton';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n selector: 'tk-radio-button',\n imports: [\n CommonModule,\n ReactiveFormsModule,\n FormsModule,\n RadioButtonModule,\n MessageModule,\n ],\n templateUrl: './radio-button.component.html',\n styleUrl: './radio-button.component.scss',\n})\nexport class RadioButtonComponent\n implements ControlValueAccessor, OnInit, OnDestroy\n{\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n /*\n Initialize the component and register it as a ControlValueAccessor.\n /\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n /\n @property {ModelSignal<any>} model\n * @description\n * The value of the radio button model (checked state).\n * Supports two-way binding via signals.\n /\n model = model<unknown>();\n\n /\n @property {InputSignal<any>} value\n * @description\n * The value of the radio button itself (used when part of a group).\n /\n value = input<unknown>();\n\n /\n @property {InputSignal<string>} label\n * @description\n * Label displayed next to the radio button.\n /\n label = input<string>('');\n\n /\n @property {InputSignal<string>} name\n * @description\n * Name attribute for the radio button.\n /\n name = input<string>('');\n\n /\n @property {InputSignal<string>} inputId\n * @description\n * HTML id attribute for the radio button input.\n /\n inputId = input<string>('');\n\n /\n @property {InputSignal<FormControl>} control\n * @description\n * External FormControl used to read/set the radio button value.\n * If not provided, an internal FormControl is created.\n /\n control = input<FormControl>(new FormControl());\n\n /\n @property {InputSignal<string>} errorMessage\n * @description\n * Message to display when the control is invalid and touched.\n /\n errorMessage = input<string>('');\n\n /\n @property {ModelSignal<boolean>} disabled\n * @description\n * Whether the radio button is disabled.\n /\n disabled = model<boolean>(false);\n\n /\n Returns the control currently in use, either from NgControl or the standalone Input.\n /\n get effectiveControl(): FormControl {\n return (this.ngControl?.control as FormControl) \|\| this.control();\n }\n\n onChange: (value: unknown) => void = () => {};\n onTouched: () => void = () => {};\n private readonly subscription = new Subscription();\n\n /\n Configure synchronization between the form control and component state.\n /\n ngOnInit(): void {\n const control = this.effectiveControl;\n\n if (control.value !== undefined && control.value !== null) {\n this.model.set(control.value);\n }\n\n if (this.control() === control && this.disabled()) {\n control.disable({ emitEvent: false });\n } else {\n this.disabled.set(control.disabled);\n }\n\n this.subscription.add(\n control.statusChanges.subscribe(() => {\n this.disabled.set(control.disabled);\n })\n );\n\n this.subscription.add(\n control.valueChanges.subscribe(value => {\n this.model.set(value);\n })\n );\n }\n\n /\n Clean up subscriptions.\n /\n ngOnDestroy(): void {\n this.subscription.unsubscribe();\n }\n\n /\n Implementation of ControlValueAccessor: Writes a new value from the form.\n /\n writeValue(value: unknown): void {\n this.model.set(value);\n }\n\n /\n Implementation of ControlValueAccessor: Registers a callback for change events.\n /\n registerOnChange(fn: (value: unknown) => void): void {\n this.onChange = fn;\n }\n\n /\n Implementation of ControlValueAccessor: Registers a callback for touched events.\n /\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /\n Implementation of ControlValueAccessor: Sets the disabled state.\n /\n setDisabledState?(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n if (isDisabled) {\n this.control().disable();\n } else {\n this.control().enable();\n }\n }\n\n /\n Handle model change events from the template.\n /\n onModelChange(value: unknown): void {\n this.model.set(value);\n this.onChange(value);\n this.effectiveControl.setValue(value);\n this.effectiveControl.markAsDirty();\n this.onTouched();\n }\n\n /\n Handle blur events to trigger onTouched.\n /\n onBlur(): void {\n this.onTouched();\n this.effectiveControl.markAsTouched();\n }\n}\n","<div class=\"tk-radio-button-wrapper\">\n <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n <p-radioButton\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\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-radioButton>\n @if (label()) {\n <label [for]=\"inputId()\" class=\"tk-radio-button-label\">\n {{ label() }}\n </label>\n }\n </div>\n\n @if (\n effectiveControl.invalid &&\n (effectiveControl.dirty \|\| effectiveControl.touched) &&\n errorMessage()\n ) {\n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n </div>\n </div>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -180,16 +180,11 @@ class SelectComponent {
      */
     handleChange(event) {
         const value = event.value ?? null;
-        // Update internal state
         this.value = value;
-        // 1. Update Angular Forms
         this.onChangeFn(value);
         this.onTouchedFn();
-        // 2. Update signals
         this.model.set(value);
-        // 3. Notify external listeners
         this.modelChange.emit(value);
-        // 4. Explicitly update effective control to ensure UI consistency (matches input-text)
         if (this.effectiveControl) {
             this.effectiveControl.setValue(value);
             this.effectiveControl.markAsDirty();
@@ -197,14 +192,14 @@ class SelectComponent {
         }
     }
     get effectiveControl() {
-        return this.ngControl?.control || this.control();
+        return this.ngControl?.control || null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SelectComponent, isStandalone: true, selector: "tk-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", modelChange: "modelChange" }, ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"options()\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"value\"\n    [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onChange)=\"handleChange($event)\" />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-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-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-label{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-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}: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-select-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-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\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: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "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"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SelectComponent, isStandalone: true, selector: "tk-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", modelChange: "modelChange" }, ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"options()\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"value\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onChange)=\"handleChange($event)\" />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-label{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-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}: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-select-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-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\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: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "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"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-select', imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule], template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"options()\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"value\"\n    [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onChange)=\"handleChange($event)\" />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-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-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-label{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-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}: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-select-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-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\n"] }]
+            args: [{ selector: 'tk-select', imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule], template: "<p-floatlabel class=\"w-full\">\n  <p-select\n    [id]=\"id()\"\n    class=\"w-full\"\n    [options]=\"options()\"\n    [optionLabel]=\"optionLabel()\"\n    [showClear]=\"showClear()\"\n    [disabled]=\"disabled()\"\n    [ngModel]=\"value\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onChange)=\"handleChange($event)\" />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-label{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-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}: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-select-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-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\n"] }]
         }], ctorParameters: () => [] });
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tekus-design-system-components-select.mjs","sources":["../../../projects/design-system/components/select/src/select.component.ts","../../../projects/design-system/components/select/src/select.component.html","../../../projects/design-system/components/select/tekus-design-system-components-select.ts"],"sourcesContent":["import {\n Component,\n effect,\n model,\n\n input,\n output,\n signal,\n inject\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n FormsModule,\n NgControl, \n FormControl, \n ReactiveFormsModule\n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { Select } from 'primeng/select';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n selector: 'tk-select',\n imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule],\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n\n})\nexport class SelectComponent<T = unknown> implements ControlValueAccessor {\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n /*\n @property {string} id\n * @description\n * HTML id attribute for the multiselect input.\n \n @default 'select'\n /\n id = input<string>('select');\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 {T[]} options\n * @description\n * Array of available options displayed in the dropdown.\n /\n options = input<T[]>([]);\n\n /\n @property {string} optionLabel\n * @description\n * Name of the property used to display the text of each option.\n \n @default 'label'\n /\n optionLabel = input<string>('label');\n\n /\n @property {string} label\n * @description\n * Floating label displayed above the select input.\n /\n label = input<string>('');\n\n /\n @property {boolean} showClear\n * @description\n * Enables the clear button to remove the current selection.\n \n @default true\n /\n showClear = input<boolean>(true);\n\n /\n @property {T \| null} value\n * @description\n * Internal selected value. Synced with Angular forms and the model signal.\n \n @internal\n /\n value: T \| null = null;\n\n /\n @property {boolean} disabled\n * @description\n * Determines whether the select field is disabled.\n \n @default false\n /\n disabled = input<boolean>(false);\n internalDisabled = signal(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 {Signal<T \| null>} model\n * @description\n * Two-way binding model using Angular signals.\n * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n /\n model = model<T \| null>();\n\n /\n @event modelChange\n * @description\n * Emits whenever the value changes.\n * Payload: the selected item of type `T` or `null`.\n \n @example\n * <tk-select (modelChange)=\"onChange($event)\"></tk-select>\n /\n modelChange = output<T \| null>();\n\n // CVA callbacks\n private onChangeFn: (value: T \| null) => void = () => {};\n private onTouchedFn = () => {};\n\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n /\n @effect disabled → internalDisabled\n * @description\n * Synchronizes the disabled input signal with the internal disabled state.\n /\n effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n\n /\n @effect model → internal value\n * @description\n * Synchronizes changes coming from the Signal `model()` back into the internal value.\n * Ensures consistency between Angular Forms, PrimeNG UI events, and Signals.\n /\n effect(() => {\n const v = this.model();\n if (v !== this.value) {\n this.value = v ?? null;\n this.onChangeFn(v ?? null);\n }\n });\n }\n\n // -----------------------------------\n // CONTROL VALUE ACCESSOR (Forms API)\n // -----------------------------------\n\n /\n @method writeValue\n * @description\n * Receives value updates from Angular Forms and writes them into the component.\n \n @param {T \| null} value - New value from the forms API.\n /\n writeValue(value: T \| null): 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: T \| null) => 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 select 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 // UI EVENTS\n // -----------------------------------\n\n /\n @method handleChange\n * @description\n * Handles the selection event emitted by the PrimeNG Select component.\n * Updates Angular Forms, Signals, and emits the modelChange event.\n \n @param event - Event containing the `value` of the selected option.\n /\n handleChange(event: { value: T \| null }) {\n const value = event.value ?? null;\n\n // Update internal state\n this.value = value;\n\n // 1. Update Angular Forms\n this.onChangeFn(value);\n this.onTouchedFn();\n\n // 2. Update signals\n this.model.set(value);\n\n // 3. Notify external listeners\n this.modelChange.emit(value);\n\n // 4. Explicitly update effective control to ensure UI consistency (matches input-text)\n if (this.effectiveControl) {\n this.effectiveControl.setValue(value);\n this.effectiveControl.markAsDirty();\n this.effectiveControl.markAsTouched();\n }\n }\n get effectiveControl() {\n return (this.ngControl?.control as FormControl) \|\| this.control();\n }\n}\n\n","<p-floatlabel class=\"w-full\">\n <p-select\n [id]=\"id()\"\n class=\"w-full\"\n [options]=\"options()\"\n [optionLabel]=\"optionLabel()\"\n [showClear]=\"showClear()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value\"\n [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty \|\| effectiveControl?.touched)\"\n [class.ng-dirty]=\"effectiveControl?.dirty\"\n [class.ng-touched]=\"effectiveControl?.touched\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n <div class=\"tk-select-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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"}
1	+ {"version":3,"file":"tekus-design-system-components-select.mjs","sources":["../../../projects/design-system/components/select/src/select.component.ts","../../../projects/design-system/components/select/src/select.component.html","../../../projects/design-system/components/select/tekus-design-system-components-select.ts"],"sourcesContent":["import {\n Component,\n effect,\n model,\n\n input,\n output,\n signal,\n inject\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n FormsModule,\n NgControl,\n FormControl,\n ReactiveFormsModule\n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { Select } from 'primeng/select';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n selector: 'tk-select',\n imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule],\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n\n})\nexport class SelectComponent<T = unknown> implements ControlValueAccessor {\n readonly ngControl = inject(NgControl, { self: true, optional: true });\n /*\n @property {string} id\n * @description\n * HTML id attribute for the multiselect input.\n \n @default 'select'\n /\n id = input<string>('select');\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 {T[]} options\n * @description\n * Array of available options displayed in the dropdown.\n /\n options = input<T[]>([]);\n\n /\n @property {string} optionLabel\n * @description\n * Name of the property used to display the text of each option.\n \n @default 'label'\n /\n optionLabel = input<string>('label');\n\n /\n @property {string} label\n * @description\n * Floating label displayed above the select input.\n /\n label = input<string>('');\n\n /\n @property {boolean} showClear\n * @description\n * Enables the clear button to remove the current selection.\n \n @default true\n /\n showClear = input<boolean>(true);\n\n /\n @property {T \| null} value\n * @description\n * Internal selected value. Synced with Angular forms and the model signal.\n \n @internal\n /\n value: T \| null = null;\n\n /\n @property {boolean} disabled\n * @description\n * Determines whether the select field is disabled.\n \n @default false\n /\n disabled = input<boolean>(false);\n internalDisabled = signal(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 {Signal<T \| null>} model\n * @description\n * Two-way binding model using Angular signals.\n * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n /\n model = model<T \| null>();\n\n /\n @event modelChange\n * @description\n * Emits whenever the value changes.\n * Payload: the selected item of type `T` or `null`.\n \n @example\n * <tk-select (modelChange)=\"onChange($event)\"></tk-select>\n /\n modelChange = output<T \| null>();\n\n // CVA callbacks\n private onChangeFn: (value: T \| null) => void = () => {};\n private onTouchedFn = () => {};\n\n constructor() {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n /\n @effect disabled → internalDisabled\n * @description\n * Synchronizes the disabled input signal with the internal disabled state.\n /\n effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n\n /\n @effect model → internal value\n * @description\n * Synchronizes changes coming from the Signal `model()` back into the internal value.\n * Ensures consistency between Angular Forms, PrimeNG UI events, and Signals.\n /\n effect(() => {\n const v = this.model();\n if (v !== this.value) {\n this.value = v ?? null;\n this.onChangeFn(v ?? null);\n }\n });\n }\n\n // -----------------------------------\n // CONTROL VALUE ACCESSOR (Forms API)\n // -----------------------------------\n\n /\n @method writeValue\n * @description\n * Receives value updates from Angular Forms and writes them into the component.\n \n @param {T \| null} value - New value from the forms API.\n /\n writeValue(value: T \| null): 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: T \| null) => 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 select 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 // UI EVENTS\n // -----------------------------------\n\n /\n @method handleChange\n * @description\n * Handles the selection event emitted by the PrimeNG Select component.\n * Updates Angular Forms, Signals, and emits the modelChange event.\n \n @param event - Event containing the `value` of the selected option.\n /\n handleChange(event: { value: T \| null }) {\n const value = event.value ?? null;\n\n this.value = value;\n\n this.onChangeFn(value);\n this.onTouchedFn();\n\n this.model.set(value);\n\n this.modelChange.emit(value);\n\n if (this.effectiveControl) {\n this.effectiveControl.setValue(value);\n this.effectiveControl.markAsDirty();\n this.effectiveControl.markAsTouched();\n }\n }\n get effectiveControl() {\n return (this.ngControl?.control as FormControl) \|\| null;\n }\n}\n\n","<p-floatlabel class=\"w-full\">\n <p-select\n [id]=\"id()\"\n class=\"w-full\"\n [options]=\"options()\"\n [optionLabel]=\"optionLabel()\"\n [showClear]=\"showClear()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value\"\n [class.ng-invalid]=\"\n effectiveControl?.invalid &&\n (effectiveControl?.dirty \|\| effectiveControl?.touched)\n \"\n [class.ng-dirty]=\"effectiveControl?.dirty\"\n [class.ng-touched]=\"effectiveControl?.touched\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n <div class=\"tk-select-messages\">\n @if (\n effectiveControl?.invalid &&\n (effectiveControl?.dirty \|\| effectiveControl?.touched) &&\n errorMessage()\n ) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n hint()\n }}</p-message>\n }\n </div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { input, effect, ViewChild, Component } from '@angular/core';
+import { input, model, computed, effect, ViewChild, Component } from '@angular/core';
 import * as i1 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import { TagModule } from 'primeng/tag';
 import { ButtonModule } from 'primeng/button';
 import { TagComponent } from '@tekus/design-system/components/tag';
-import { IconComponent } from '@tekus/design-system/components/icon';
 import { ButtonComponent } from '@tekus/design-system/components/button';
+import { CheckboxComponent } from '@tekus/design-system/components/checkbox';
 import * as i2 from 'primeng/api';
 /**
@@ -53,9 +53,53 @@ class TableComponent {
          * ]"
          */
         this.columns = input([]);
+        /**
+         * @property {InputSignal<'single' | 'multiple' | undefined>} selectionMode
+         * @description
+         * Selection mode of the table.
+         */
+        this.selectionMode = input(undefined);
+        /**
+         * @property {ModelSignal<any[]>} selection
+         * @description
+         * Selected row(s) in the table.
+         */
+        this.selection = model([]);
+        /**
+         * @property {InputSignal<string | undefined>} dataKey
+         * @description
+         * Property name to uniquely identify a row.
+         */
+        this.dataKey = input(undefined);
         this.initialData = [...this.data()];
         this.internalData = [];
         this.isSorted = null;
+        /**
+         * @computed isAllSelected
+         * @description
+         * Returns true if all visible rows are selected.
+         */
+        this.isAllSelected = computed(() => {
+            const data = this.internalData;
+            const selected = this.selection();
+            if (data.length === 0 || selected.length === 0)
+                return false;
+            // We strictly use full objects for selection now.
+            return data.every(row => selected.includes(row));
+        });
+        /**
+         * @computed isPartiallySelected
+         * @description
+         * Returns true if some but not all rows are selected.
+         */
+        this.isPartiallySelected = computed(() => {
+            const data = this.internalData;
+            const selected = this.selection();
+            if (data.length === 0 || selected.length === 0)
+                return false;
+            const allSelected = this.isAllSelected();
+            return !allSelected && selected.length > 0;
+        });
         /**
          * @effect data → initialData sync
          * @description
@@ -66,6 +110,29 @@ class TableComponent {
             this.initialData = [...this.data()];
         });
     }
+    /**
+     * @method toggleAll
+     * @description
+     * Toggles selection of all visible rows using full objects.
+     * @param checked {unknown}
+     */
+    toggleAll(checked) {
+        if (checked) {
+            this.selection.set([...this.internalData]);
+        }
+        else {
+            this.selection.set([]);
+        }
+    }
+    /**
+     * @method updateSelection
+     * @description
+     * Updates row selection state from checkbox interaction.
+     * @param value {any[]}
+     */
+    updateSelection(value) {
+        this.selection.set([...value]);
+    }
     customSort(event) {
         if (this.isSorted === null || this.isSorted === undefined) {
             this.isSorted = true;
@@ -109,7 +176,7 @@ class TableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TableComponent, isStandalone: true, selector: "tk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true }], ngImport: i0, template: "<p-table\n  #tableRef\n  [value]=\"internalData\"\n  [customSort]=\"true\"\n  (sortFunction)=\"customSort($event)\"\n  [tableStyle]=\"{ 'min-width': '60rem' }\"\n  responsiveLayout=\"scroll\">\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <tr>\n      @for (col of columns(); track col.header) {\n      <th\n        [id]=\"col.field\"\n        [style.width]=\"col.width\"\n        [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n        <div>\n          {{ col.header }}\n          @if (col.sortable) {\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n          }\n        </div>\n      </th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- BODY -->\n  <ng-template pTemplate=\"body\" let-row>\n    <tr>\n      @for (col of columns(); track col.header) {\n\n      <!-- TEXT (default) -->\n      @if (!col.type || col.type === 'text') {\n      <td>{{ row[col.field!] }}</td>\n      }\n\n      <!-- TAG -->\n      @if (col.type === 'tag') {\n      <td>\n        <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n      </td>\n      }\n\n      <!-- ACTIONS -->\n      @if (col.type === 'actions') {\n      <td>\n        <div class=\"tk-table__actions\">\n          @for (action of col.actions!; track action.icon) {\n          <tk-button\n            [icon]=\"'eye'\"\n            severity=\"secondary\"\n            (clicked)=\"action?.action(row)\"></tk-button>\n          }\n        </div>\n      </td>\n      } }\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-s, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TableComponent, isStandalone: true, selector: "tk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true }], ngImport: i0, template: "<p-table\n  #tableRef\n  [selection]=\"selection()\"\n  (selectionChange)=\"updateSelection($any($event))\"\n  [selectionMode]=\"selectionMode()\"\n  [dataKey]=\"dataKey()\"\n  [value]=\"internalData\"\n  [customSort]=\"true\"\n  (sortFunction)=\"customSort($event)\"\n  [tableStyle]=\"{ 'min-width': '60rem' }\"\n  responsiveLayout=\"scroll\">\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <tr>\n      @for (col of columns(); track col.header) {\n        <th\n          [id]=\"col.field\"\n          [style.width]=\"col.width\"\n          [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n          <div class=\"tk-table__header-content\">\n            @if (col.type === 'selection' && selectionMode() === 'multiple') {\n              <div class=\"tk-table__actions hide-validation-messages\" >\n                <tk-checkbox\n                  [binary]=\"true\"\n                  [model]=\"isAllSelected()\"\n                  [indeterminate]=\"isPartiallySelected()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keypress)=\"$event.stopPropagation()\"\n                  (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n              </div>\n            } @else if (col.type !== 'selection') {\n              {{ col.header }}\n              @if (col.sortable) {\n                <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n              }\n            }\n          </div>\n        </th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- BODY -->\n  <ng-template pTemplate=\"body\" let-row>\n    <tr [pSelectableRow]=\"row\">\n      @for (col of columns(); track col.header) {\n        <!-- SELECTION -->\n        @if (col.type === 'selection') {\n          <td>\n            @if (selectionMode() === 'multiple') {\n              <tk-checkbox\n                [model]=\"selection()\"\n                [value]=\"row\"\n                (click)=\"$event.stopPropagation()\"\n                (keypress)=\"$event.stopPropagation()\"\n                (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n            }\n          </td>\n        }\n\n        <!-- CHECKBOX (Boolean field) -->\n        @if (col.type === 'checkbox') {\n          <td>\n            <tk-checkbox\n              [binary]=\"true\"\n              [(model)]=\"row[col.field!]\"\n              (click)=\"$event.stopPropagation()\"\n              (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n          </td>\n        }\n\n        <!-- TEXT (default) -->\n        @if (!col.type || col.type === 'text') {\n          <td>{{ row[col.field!] }}</td>\n        }\n\n        <!-- TAG -->\n        @if (col.type === 'tag') {\n          <td>\n            <tk-tag\n              [value]=\"row[col.field!]\"\n              [severity]=\"col.tagSeverity!(row)\" />\n          </td>\n        }\n\n        <!-- ACTIONS -->\n        @if (col.type === 'actions') {\n          <td>\n            <div class=\"tk-table__actions\">\n              @for (action of col.actions!; track action.icon) {\n                <tk-button\n                  [icon]=\"action.icon\"\n                  severity=\"secondary\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keypress)=\"$event.stopPropagation()\"\n                  (clicked)=\"action?.action(row)\"></tk-button>\n              }\n            </div>\n          </td>\n        }\n      }\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-s, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -118,9 +185,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         TagModule,
                         ButtonModule,
                         TagComponent,
-                        IconComponent,
                         ButtonComponent,
-                    ], template: "<p-table\n  #tableRef\n  [value]=\"internalData\"\n  [customSort]=\"true\"\n  (sortFunction)=\"customSort($event)\"\n  [tableStyle]=\"{ 'min-width': '60rem' }\"\n  responsiveLayout=\"scroll\">\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <tr>\n      @for (col of columns(); track col.header) {\n      <th\n        [id]=\"col.field\"\n        [style.width]=\"col.width\"\n        [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n        <div>\n          {{ col.header }}\n          @if (col.sortable) {\n          <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n          }\n        </div>\n      </th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- BODY -->\n  <ng-template pTemplate=\"body\" let-row>\n    <tr>\n      @for (col of columns(); track col.header) {\n\n      <!-- TEXT (default) -->\n      @if (!col.type || col.type === 'text') {\n      <td>{{ row[col.field!] }}</td>\n      }\n\n      <!-- TAG -->\n      @if (col.type === 'tag') {\n      <td>\n        <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n      </td>\n      }\n\n      <!-- ACTIONS -->\n      @if (col.type === 'actions') {\n      <td>\n        <div class=\"tk-table__actions\">\n          @for (action of col.actions!; track action.icon) {\n          <tk-button\n            [icon]=\"'eye'\"\n            severity=\"secondary\"\n            (clicked)=\"action?.action(row)\"></tk-button>\n          }\n        </div>\n      </td>\n      } }\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-s, .25rem)}\n"] }]
+                        CheckboxComponent,
+                    ], template: "<p-table\n  #tableRef\n  [selection]=\"selection()\"\n  (selectionChange)=\"updateSelection($any($event))\"\n  [selectionMode]=\"selectionMode()\"\n  [dataKey]=\"dataKey()\"\n  [value]=\"internalData\"\n  [customSort]=\"true\"\n  (sortFunction)=\"customSort($event)\"\n  [tableStyle]=\"{ 'min-width': '60rem' }\"\n  responsiveLayout=\"scroll\">\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <tr>\n      @for (col of columns(); track col.header) {\n        <th\n          [id]=\"col.field\"\n          [style.width]=\"col.width\"\n          [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n          <div class=\"tk-table__header-content\">\n            @if (col.type === 'selection' && selectionMode() === 'multiple') {\n              <div class=\"tk-table__actions hide-validation-messages\" >\n                <tk-checkbox\n                  [binary]=\"true\"\n                  [model]=\"isAllSelected()\"\n                  [indeterminate]=\"isPartiallySelected()\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keypress)=\"$event.stopPropagation()\"\n                  (modelChange)=\"toggleAll($event)\"></tk-checkbox>\n              </div>\n            } @else if (col.type !== 'selection') {\n              {{ col.header }}\n              @if (col.sortable) {\n                <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n              }\n            }\n          </div>\n        </th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- BODY -->\n  <ng-template pTemplate=\"body\" let-row>\n    <tr [pSelectableRow]=\"row\">\n      @for (col of columns(); track col.header) {\n        <!-- SELECTION -->\n        @if (col.type === 'selection') {\n          <td>\n            @if (selectionMode() === 'multiple') {\n              <tk-checkbox\n                [model]=\"selection()\"\n                [value]=\"row\"\n                (click)=\"$event.stopPropagation()\"\n                (keypress)=\"$event.stopPropagation()\"\n                (modelChange)=\"updateSelection($any($event))\"></tk-checkbox>\n            }\n          </td>\n        }\n\n        <!-- CHECKBOX (Boolean field) -->\n        @if (col.type === 'checkbox') {\n          <td>\n            <tk-checkbox\n              [binary]=\"true\"\n              [(model)]=\"row[col.field!]\"\n              (click)=\"$event.stopPropagation()\"\n              (keypress)=\"$event.stopPropagation()\"></tk-checkbox>\n          </td>\n        }\n\n        <!-- TEXT (default) -->\n        @if (!col.type || col.type === 'text') {\n          <td>{{ row[col.field!] }}</td>\n        }\n\n        <!-- TAG -->\n        @if (col.type === 'tag') {\n          <td>\n            <tk-tag\n              [value]=\"row[col.field!]\"\n              [severity]=\"col.tagSeverity!(row)\" />\n          </td>\n        }\n\n        <!-- ACTIONS -->\n        @if (col.type === 'actions') {\n          <td>\n            <div class=\"tk-table__actions\">\n              @for (action of col.actions!; track action.icon) {\n                <tk-button\n                  [icon]=\"action.icon\"\n                  severity=\"secondary\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keypress)=\"$event.stopPropagation()\"\n                  (clicked)=\"action?.action(row)\"></tk-button>\n              }\n            </div>\n          </td>\n        }\n      }\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-s, .25rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tableRef: [{
                 type: ViewChild,
                 args: ['tableRef']