@tekus/design-system 5.8.0 → 5.8.2

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

@@ -1,7 +1,9 @@
-import { ControlValueAccessor } from '@angular/forms';
+import { ControlValueAccessor, NgControl, FormControl } from '@angular/forms';
+import { AutoComplete } from 'primeng/autocomplete';
 import * as i0 from "@angular/core";
 type AutocompleteValue<T = unknown> = T | T[] | null;
 export declare class AutocompleteComponent<T = unknown> implements ControlValueAccessor {
+    readonly ngControl: NgControl | null;
     /**
      * @property {string} id
      * @description
@@ -10,6 +12,19 @@ export declare class AutocompleteComponent<T = unknown> implements ControlValueA
      * @default 'autocomplete'
      */
     id: import("@angular/core").InputSignal<string>;
+    /**
+     * @property {InputSignal<string>} icon
+     * @description
+     * Icon to display next to the input (e.g., 'magnifying-glass').
+     */
+    icon: import("@angular/core").InputSignal<string>;
+    /**
+     * @property {InputSignal<FormControl>} control
+     * @description
+     * External FormControl used to read/set the input value.
+     * If not provided, an internal FormControl is created.
+     */
+    control: import("@angular/core").InputSignal<FormControl<any> | undefined>;
     /**
      * @property {string} label
      * @description
@@ -24,6 +39,18 @@ export declare class AutocompleteComponent<T = unknown> implements ControlValueA
      * @default false
      */
     disabled: import("@angular/core").InputSignal<boolean>;
+    /**
+    * @property {InputSignal<string>} errorMessage
+    * @description
+    * Message to display when the control is invalid and touched.
+    */
+    errorMessage: import("@angular/core").InputSignal<string>;
+    /**
+     * @property {InputSignal<string>} hint
+     * @description
+     * Hint text to display below the input.
+     */
+    hint: import("@angular/core").InputSignal<string>;
     /**
      * @property {AutocompleteValue<T>} value
      * @description
@@ -90,7 +117,30 @@ export declare class AutocompleteComponent<T = unknown> implements ControlValueA
      * @param {AutocompleteValue<T>} value - The new selected value(s).
      */
     handleChange(value: AutocompleteValue<T>): void;
+    /**
+     * @property {AutoComplete} autoComplete
+     * @description
+     * Reference to the underlying PrimeNG AutoComplete component.
+     * Used to access the native input element for chip creation on blur.
+     */
+    autoComplete: AutoComplete;
+    /**
+     * @method handleBlur
+     * @description
+     * Handles the blur event of the autocomplete input.
+     * Captures any pending text in the input field and converts it into a chip/value.
+     * This ensures that typing text and clicking away behaves similarly to pressing "Enter".
+     */
+    handleBlur(): void;
+    /**
+     * @method effectiveControl
+     * @description
+     * Gets the active FormControl for the component.
+     * Returns the injected NgControl's control if available, otherwise falls back to the local `control` input.
+     * This getter is crucial for unifying validation status checks in the template.
+     */
+    get effectiveControl(): FormControl<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteComponent<any>, "tk-autocomplete", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "modelChange": "modelChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteComponent<any>, "tk-autocomplete", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "modelChange": "modelChange"; }, never, never, true, never>;
 }
 export {};

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

@@ -1,6 +1,7 @@
-import { ControlValueAccessor } from '@angular/forms';
+import { ControlValueAccessor, NgControl, FormControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class SelectComponent<T = unknown> implements ControlValueAccessor {
+    readonly ngControl: NgControl | null;
     /**
      * @property {string} id
      * @description
@@ -9,6 +10,13 @@ export declare class SelectComponent<T = unknown> implements ControlValueAccesso
      * @default 'select'
      */
     id: import("@angular/core").InputSignal<string>;
+    /**
+     * @property {InputSignal<FormControl>} control
+     * @description
+     * External FormControl used to read/set the input value.
+     * If not provided, an internal FormControl is created.
+     */
+    control: import("@angular/core").InputSignal<FormControl<any> | undefined>;
     /**
      * @property {T[]} options
      * @description
@@ -54,6 +62,18 @@ export declare class SelectComponent<T = unknown> implements ControlValueAccesso
      */
     disabled: import("@angular/core").InputSignal<boolean>;
     internalDisabled: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * @property {InputSignal<string>} errorMessage
+     * @description
+     * Message to display when the control is invalid and touched.
+     */
+    errorMessage: import("@angular/core").InputSignal<string>;
+    /**
+     * @property {InputSignal<string>} hint
+     * @description
+     * Hint text to display below the input.
+     */
+    hint: import("@angular/core").InputSignal<string>;
     /**
      * @property {Signal<T | null>} model
      * @description
@@ -113,6 +133,7 @@ export declare class SelectComponent<T = unknown> implements ControlValueAccesso
     handleChange(event: {
         value: T | null;
     }): void;
+    get effectiveControl(): FormControl<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent<any>, "tk-select", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "modelChange": "modelChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent<any>, "tk-select", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "modelChange": "modelChange"; }, never, never, true, never>;
 }

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

@@ -1,13 +1,17 @@
 import * as i0 from '@angular/core';
-import { input, signal, model, output, effect, forwardRef, Component } from '@angular/core';
+import { inject, input, signal, model, output, effect, forwardRef, ViewChild, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgControl, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2 from 'primeng/floatlabel';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { AutoComplete } from 'primeng/autocomplete';
+import * as i3 from 'primeng/message';
+import { MessageModule } from 'primeng/message';
+import { IconComponent } from '@tekus/design-system/components/icon';
 
 class AutocompleteComponent {
     constructor() {
+        this.ngControl = inject(NgControl, { self: true, optional: true });
         /**
          * @property {string} id
          * @description
@@ -16,6 +20,19 @@ class AutocompleteComponent {
          * @default 'autocomplete'
          */
         this.id = input('autocomplete');
+        /**
+         * @property {InputSignal<string>} icon
+         * @description
+         * Icon to display next to the input (e.g., 'magnifying-glass').
+         */
+        this.icon = input('');
+        /**
+         * @property {InputSignal<FormControl>} control
+         * @description
+         * External FormControl used to read/set the input value.
+         * If not provided, an internal FormControl is created.
+         */
+        this.control = input();
         /**
          * @property {string} label
          * @description
@@ -30,6 +47,18 @@ class AutocompleteComponent {
          * @default false
          */
         this.disabled = input(false);
+        /**
+        * @property {InputSignal<string>} errorMessage
+        * @description
+        * Message to display when the control is invalid and touched.
+        */
+        this.errorMessage = input('');
+        /**
+         * @property {InputSignal<string>} hint
+         * @description
+         * Hint text to display below the input.
+         */
+        this.hint = input('');
         /**
          * @property {AutocompleteValue<T>} value
          * @description
@@ -61,6 +90,9 @@ class AutocompleteComponent {
         // -----------------------------------
         this.onChangeFn = () => { };
         this.onTouchedFn = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
         /**
          * disabled → internalDisabled
          */
@@ -128,26 +160,60 @@ class AutocompleteComponent {
         this.onTouchedFn();
         this.model.set(value);
         this.modelChange.emit(value);
+        this.effectiveControl?.setValue(value);
+        this.effectiveControl?.markAsDirty();
+    }
+    /**
+     * @method handleBlur
+     * @description
+     * Handles the blur event of the autocomplete input.
+     * Captures any pending text in the input field and converts it into a chip/value.
+     * This ensures that typing text and clicking away behaves similarly to pressing "Enter".
+     */
+    handleBlur() {
+        if (this.autoComplete?.inputEL) {
+            const inputValue = this.autoComplete.inputEL.nativeElement.value;
+            if (inputValue && inputValue.trim() !== '') {
+                const newValue = inputValue.trim();
+                const currentValues = Array.isArray(this.value) ? [...this.value] : [];
+                currentValues.push(newValue);
+                this.handleChange(currentValues);
+                this.autoComplete.inputEL.nativeElement.value = '';
+            }
+        }
+    }
+    /**
+     * @method effectiveControl
+     * @description
+     * Gets the active FormControl for the component.
+     * Returns the injected NgControl's control if available, otherwise falls back to the local `control` input.
+     * This getter is crucial for unifying validation status checks in the template.
+     */
+    get effectiveControl() {
+        return this.ngControl?.control || this.control();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: AutocompleteComponent, isStandalone: true, selector: "tk-autocomplete", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", modelChange: "modelChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AutocompleteComponent, isStandalone: true, selector: "tk-autocomplete", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, 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" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AutocompleteComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <p-autocomplete\n    [ngModel]=\"value\"\n    (ngModelChange)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [inputId]=\"id()\"\n    [typeahead]=\"false\"\n    multiple\n    fluid />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-autocomplete-input-multiple{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-autocomplete-input-multiple:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-autocomplete-chip-icon{display:flex;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-autocomplete-chip{border-radius:var(--tk-borderRadius-full, 999px)!important;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-autocomplete-input-multiple-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] }); }
+        ], viewQueries: [{ propertyName: "autoComplete", first: true, predicate: AutoComplete, descendants: true }], ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n  <div class=\"tk-autocomplete-wrapper\">\n    @if (icon()) {\n      <tk-icon [icon]=\"icon()\" class=\"tk-autocomplete-icon\"></tk-icon>\n    }\n    <p-autocomplete\n      [ngModel]=\"value\"\n      (ngModelChange)=\"handleChange($event)\"\n      [disabled]=\"disabled()\"\n      [inputId]=\"id()\"\n      [typeahead]=\"false\"\n      multiple\n      fluid\n      (onBlur)=\"handleBlur()\"\n      [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\"\n      [class.ng-touched]=\"effectiveControl?.touched\" />\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-autocomplete-bottom\">\n  <div class=\"tk-autocomplete-messages\">\n    @if ((effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)) && errorMessage()) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-autocomplete-input-multiple{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-autocomplete-input-multiple:focus{border-color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep p-autocomplete{flex:1;width:100%}:host ::ng-deep .tk-autocomplete-wrapper:has(.tk-autocomplete-icon) .p-autocomplete-input-multiple{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-multiple,:host ::ng-deep p-autocomplete.ng-invalid.ng-touched .p-autocomplete-input-multiple{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-floatlabel .tk-autocomplete-wrapper:has(.tk-autocomplete-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(p-autocomplete.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(p-autocomplete.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)!important}:host ::ng-deep .p-autocomplete-chip-icon{display:flex;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-autocomplete-chip{border-radius:var(--tk-borderRadius-full, 999px)!important;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-autocomplete-input-multiple-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-autocomplete-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-autocomplete-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-autocomplete-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-autocomplete-icon{position:absolute;left:0;top:50%;transform:translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-autocomplete', standalone: true, imports: [FormsModule, AutoComplete, FloatLabelModule], providers: [
+            args: [{ selector: 'tk-autocomplete', standalone: true, imports: [FormsModule, AutoComplete, FloatLabelModule, MessageModule, IconComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => AutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<p-floatlabel class=\"w-full\">\n  <p-autocomplete\n    [ngModel]=\"value\"\n    (ngModelChange)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [inputId]=\"id()\"\n    [typeahead]=\"false\"\n    multiple\n    fluid />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-autocomplete-input-multiple{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-autocomplete-input-multiple:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-autocomplete-chip-icon{display:flex;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-autocomplete-chip{border-radius:var(--tk-borderRadius-full, 999px)!important;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-autocomplete-input-multiple-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], template: "<p-floatlabel class=\"w-full\">\n  <div class=\"tk-autocomplete-wrapper\">\n    @if (icon()) {\n      <tk-icon [icon]=\"icon()\" class=\"tk-autocomplete-icon\"></tk-icon>\n    }\n    <p-autocomplete\n      [ngModel]=\"value\"\n      (ngModelChange)=\"handleChange($event)\"\n      [disabled]=\"disabled()\"\n      [inputId]=\"id()\"\n      [typeahead]=\"false\"\n      multiple\n      fluid\n      (onBlur)=\"handleBlur()\"\n      [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\"\n      [class.ng-touched]=\"effectiveControl?.touched\" />\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-autocomplete-bottom\">\n  <div class=\"tk-autocomplete-messages\">\n    @if ((effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)) && errorMessage()) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-autocomplete-input-multiple{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-autocomplete-input-multiple:focus{border-color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep p-autocomplete{flex:1;width:100%}:host ::ng-deep .tk-autocomplete-wrapper:has(.tk-autocomplete-icon) .p-autocomplete-input-multiple{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-multiple,:host ::ng-deep p-autocomplete.ng-invalid.ng-touched .p-autocomplete-input-multiple{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-floatlabel .tk-autocomplete-wrapper:has(.tk-autocomplete-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(p-autocomplete.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(p-autocomplete.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)!important}:host ::ng-deep .p-autocomplete-chip-icon{display:flex;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-autocomplete-chip{border-radius:var(--tk-borderRadius-full, 999px)!important;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-autocomplete-input-multiple-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-autocomplete-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-autocomplete-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-autocomplete-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-autocomplete-icon{position:absolute;left:0;top:50%;transform:translateY(-50%)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { autoComplete: [{
+                type: ViewChild,
+                args: [AutoComplete]
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-autocomplete.mjs","sources":["../../../projects/design-system/components/autocomplete/src/autocomplete.component.ts","../../../projects/design-system/components/autocomplete/src/autocomplete.component.html","../../../projects/design-system/components/autocomplete/tekus-design-system-components-autocomplete.ts"],"sourcesContent":["import {\n  Component,\n  effect,\n  model,\n  forwardRef,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n  FormsModule,\n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { AutoComplete } from 'primeng/autocomplete';\n\ntype AutocompleteValue<T = unknown> = T | T[] | null;\n\n@Component({\n  selector: 'tk-autocomplete',\n  standalone: true,\n  imports: [FormsModule, AutoComplete, FloatLabelModule],\n  templateUrl: './autocomplete.component.html',\n  styleUrl: './autocomplete.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AutocompleteComponent),\n      multi: true,\n    },\n  ],\n})\nexport class AutocompleteComponent<T = unknown>\n  implements ControlValueAccessor\n{\n  /**\n   * @property {string} id\n   * @description\n   * HTML id attribute for the autocomplete input.\n   *\n   * @default 'autocomplete'\n   */\n  id = input<string>('autocomplete');\n\n  /**\n   * @property {string} label\n   * @description\n   * Floating label displayed above the autocomplete input.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Determines whether the autocomplete field is disabled.\n   *\n   * @default false\n   */\n  disabled = input<boolean>(false);\n\n  /**\n   * @property {AutocompleteValue<T>} value\n   * @description\n   * Internal selected value. Synced with Angular forms and the model signal.\n   *\n   * @internal\n   */\n  value: AutocompleteValue<T> = null;\n\n  internalDisabled = signal(false);\n\n  /**\n   * @property {Signal<AutocompleteValue<T>>} model\n   * @description\n   * Two-way binding model using Angular signals.\n   * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n   */\n  model = model<AutocompleteValue<T>>();\n\n  /**\n   * @event modelChange\n   * @description\n   * Emits whenever the value changes.\n   * Payload: the selected item(s) of type `AutocompleteValue<T>`.\n   *\n   * @example\n   * <tk-autocomplete (modelChange)=\"onChange($event)\"></tk-autocomplete>\n   */\n  modelChange = output<AutocompleteValue<T>>();\n\n  // -----------------------------------\n  // CVA CALLBACKS\n  // -----------------------------------\n\n  private onChangeFn: (value: AutocompleteValue<T>) => void = () => {};\n  private onTouchedFn = () => {};\n\n  constructor() {\n    /**\n     * disabled → internalDisabled\n     */\n    effect(() => {\n      this.internalDisabled.set(this.disabled());\n    });\n\n    /**\n     * model → internal value + forms\n     */\n    effect(() => {\n      const v = this.model();\n      if (v !== this.value) {\n        this.value = v ?? null;\n        this.onChangeFn(this.value);\n      }\n    });\n  }\n\n  /**\n   * @method writeValue\n   * @description\n   * Receives value updates from Angular Forms and writes them into the component.\n   *\n   * @param {AutocompleteValue<T>} value - New value from the forms API.\n   */\n  writeValue(value: AutocompleteValue<T>): void {\n    this.model.set(value);\n  }\n\n  /**\n   * @method registerOnChange\n   * @description\n   * Registers a callback that is invoked when the component's value changes.\n   */\n  registerOnChange(fn: (value: AutocompleteValue<T>) => void): void {\n    this.onChangeFn = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description\n   * Registers a callback invoked when the component is touched.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouchedFn = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description\n   * Updates the disabled state of the autocomplete control.\n   *\n   * @param {boolean} isDisabled - Whether the component should be disabled.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.internalDisabled.set(isDisabled);\n  }\n\n  /**\n   * @method handleChange\n   * @description\n   * Handles value changes from the autocomplete component.\n   * Updates Angular Forms, Signals, and emits the modelChange event.\n   *\n   * @param {AutocompleteValue<T>} value - The new selected value(s).\n   */\n  handleChange(value: AutocompleteValue<T>) {\n    this.value = value;\n    this.onChangeFn(value);\n    this.onTouchedFn();\n    this.model.set(value);\n    this.modelChange.emit(value);\n  }\n}\n","<p-floatlabel class=\"w-full\">\n  <p-autocomplete\n    [ngModel]=\"value\"\n    (ngModelChange)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [inputId]=\"id()\"\n    [typeahead]=\"false\"\n    multiple\n    fluid />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;MAiCa,qBAAqB,CAAA;AAiEhC,IAAA,WAAA,GAAA;AA9DA;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,EAAE,GAAG,KAAK,CAAS,cAAc,CAAC;AAElC;;;;AAIG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,CAAC;AAEzB;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC;AAEhC;;;;;;AAMG;QACH,IAAK,CAAA,KAAA,GAAyB,IAAI;AAElC,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC;AAEhC;;;;;AAKG;QACH,IAAK,CAAA,KAAA,GAAG,KAAK,EAAwB;AAErC;;;;;;;;AAQG;QACH,IAAW,CAAA,WAAA,GAAG,MAAM,EAAwB;;;;AAMpC,QAAA,IAAA,CAAA,UAAU,GAA0C,MAAK,GAAG;AAC5D,QAAA,IAAA,CAAA,WAAW,GAAG,MAAK,GAAG;AAG5B;;AAEG;QACH,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC5C,SAAC,CAAC;AAEF;;AAEG;QACH,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE;AACtB,YAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE;AACpB,gBAAA,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI;AACtB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;;AAE/B,SAAC,CAAC;;AAGJ;;;;;;AAMG;AACH,IAAA,UAAU,CAAC,KAA2B,EAAA;AACpC,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;;AAGvB;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,EAAyC,EAAA;AACxD,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;;AAGtB;;;;AAIG;AACH,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,WAAW,GAAG,EAAE;;AAGvB;;;;;;AAMG;AACH,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,UAAU,CAAC;;AAGvC;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAA2B,EAAA;AACtC,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QACtB,IAAI,CAAC,WAAW,EAAE;AAClB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AACrB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;+GA1InB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,EARrB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,qBAAqB,CAAC;AACpD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/BH,2SAWA,EDWY,MAAA,EAAA,CAAA,+uCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,YAAY,stCAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAW1C,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAdjC,SAAS;+BACE,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,EAAE,YAAY,EAAE,gBAAgB,CAAC,EAG3C,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,2BAA2B,CAAC;AACpD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,2SAAA,EAAA,MAAA,EAAA,CAAA,+uCAAA,CAAA,EAAA;;;AE/BH;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-autocomplete.mjs","sources":["../../../projects/design-system/components/autocomplete/src/autocomplete.component.ts","../../../projects/design-system/components/autocomplete/src/autocomplete.component.html","../../../projects/design-system/components/autocomplete/tekus-design-system-components-autocomplete.ts"],"sourcesContent":["import {\n  Component,\n  effect,\n  model,\n  forwardRef,\n  input,\n  output,\n  signal,\n  inject,\n  ViewChild,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n  FormsModule, \n  NgControl, \n  FormControl \n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { AutoComplete } from 'primeng/autocomplete';\nimport { MessageModule } from 'primeng/message';\nimport { IconComponent } from '@tekus/design-system/components/icon';\ntype AutocompleteValue<T = unknown> = T | T[] | null;\n\n@Component({\n  selector: 'tk-autocomplete',\n  standalone: true,\n  imports: [FormsModule, AutoComplete, FloatLabelModule, MessageModule, IconComponent],\n  templateUrl: './autocomplete.component.html',\n  styleUrl: './autocomplete.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AutocompleteComponent),\n      multi: true,\n    },\n  ],\n})\nexport class AutocompleteComponent<T = unknown>\n  implements ControlValueAccessor\n{\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  /**\n   * @property {string} id\n   * @description\n   * HTML id attribute for the autocomplete input.\n   *\n   * @default 'autocomplete'\n   */\n  id = input<string>('autocomplete');\n\n  /**\n   * @property {InputSignal<string>} icon\n   * @description\n   * Icon to display next to the input (e.g., 'magnifying-glass').\n   */\n  icon = input<string>('');\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the input value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>();\n\n  /**\n   * @property {string} label\n   * @description\n   * Floating label displayed above the autocomplete input.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Determines whether the autocomplete field is disabled.\n   *\n   * @default false\n   */\n  disabled = input<boolean>(false);\n\n   /**\n   * @property {InputSignal<string>} errorMessage\n   * @description\n   * Message to display when the control is invalid and touched.\n   */\n  errorMessage = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} hint\n   * @description\n   * Hint text to display below the input.\n   */\n  hint = input<string>('');\n\n  /**\n   * @property {AutocompleteValue<T>} value\n   * @description\n   * Internal selected value. Synced with Angular forms and the model signal.\n   *\n   * @internal\n   */\n  value: AutocompleteValue<T> = null;\n\n  internalDisabled = signal(false);\n\n  /**\n   * @property {Signal<AutocompleteValue<T>>} model\n   * @description\n   * Two-way binding model using Angular signals.\n   * Allows usage with the syntax: `[(model)]=\"myValue\"`.\n   */\n  model = model<AutocompleteValue<T>>();\n\n  /**\n   * @event modelChange\n   * @description\n   * Emits whenever the value changes.\n   * Payload: the selected item(s) of type `AutocompleteValue<T>`.\n   *\n   * @example\n   * <tk-autocomplete (modelChange)=\"onChange($event)\"></tk-autocomplete>\n   */\n  modelChange = output<AutocompleteValue<T>>();\n\n  // -----------------------------------\n  // CVA CALLBACKS\n  // -----------------------------------\n\n  private onChangeFn: (value: AutocompleteValue<T>) => void = () => {};\n  private onTouchedFn = () => {};\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n    /**\n     * disabled → internalDisabled\n     */\n    effect(() => {\n      this.internalDisabled.set(this.disabled());\n    });\n\n    /**\n     * model → internal value + forms\n     */\n    effect(() => {\n      const v = this.model();\n      if (v !== this.value) {\n        this.value = v ?? null;\n        this.onChangeFn(this.value);\n      }\n    });\n  }\n\n  /**\n   * @method writeValue\n   * @description\n   * Receives value updates from Angular Forms and writes them into the component.\n   *\n   * @param {AutocompleteValue<T>} value - New value from the forms API.\n   */\n  writeValue(value: AutocompleteValue<T>): void {\n    this.model.set(value);\n  }\n\n  /**\n   * @method registerOnChange\n   * @description\n   * Registers a callback that is invoked when the component's value changes.\n   */\n  registerOnChange(fn: (value: AutocompleteValue<T>) => void): void {\n    this.onChangeFn = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description\n   * Registers a callback invoked when the component is touched.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouchedFn = fn;\n  }\n\n  /**\n   * @method setDisabledState\n   * @description\n   * Updates the disabled state of the autocomplete control.\n   *\n   * @param {boolean} isDisabled - Whether the component should be disabled.\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.internalDisabled.set(isDisabled);\n  }\n\n  /**\n   * @method handleChange\n   * @description\n   * Handles value changes from the autocomplete component.\n   * Updates Angular Forms, Signals, and emits the modelChange event.\n   *\n   * @param {AutocompleteValue<T>} value - The new selected value(s).\n   */\n  handleChange(value: AutocompleteValue<T>) {\n    this.value = value;\n    this.onChangeFn(value);\n    this.onTouchedFn();\n    this.model.set(value);\n    this.modelChange.emit(value);\n    this.effectiveControl?.setValue(value);\n    this.effectiveControl?.markAsDirty();\n  }\n\n  /**\n   * @property {AutoComplete} autoComplete\n   * @description\n   * Reference to the underlying PrimeNG AutoComplete component.\n   * Used to access the native input element for chip creation on blur.\n   */\n  @ViewChild(AutoComplete) autoComplete!: AutoComplete;\n\n  /**\n   * @method handleBlur\n   * @description\n   * Handles the blur event of the autocomplete input.\n   * Captures any pending text in the input field and converts it into a chip/value.\n   * This ensures that typing text and clicking away behaves similarly to pressing \"Enter\".\n   */\n  handleBlur() {\n    if (this.autoComplete?.inputEL) {\n      const inputValue = this.autoComplete.inputEL.nativeElement.value;\n      if (inputValue && inputValue.trim() !== '') {\n        const newValue = inputValue.trim();\n        const currentValues = Array.isArray(this.value) ? [...this.value] : [];\n        currentValues.push(newValue);\n        \n        this.handleChange(currentValues as unknown as AutocompleteValue<T>);\n\n        this.autoComplete.inputEL.nativeElement.value = '';\n      }\n    }\n  }\n\n  /**\n   * @method effectiveControl\n   * @description\n   * Gets the active FormControl for the component.\n   * Returns the injected NgControl's control if available, otherwise falls back to the local `control` input.\n   * This getter is crucial for unifying validation status checks in the template.\n   */\n  get effectiveControl() {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n}\n","<p-floatlabel class=\"w-full\">\n  <div class=\"tk-autocomplete-wrapper\">\n    @if (icon()) {\n      <tk-icon [icon]=\"icon()\" class=\"tk-autocomplete-icon\"></tk-icon>\n    }\n    <p-autocomplete\n      [ngModel]=\"value\"\n      (ngModelChange)=\"handleChange($event)\"\n      [disabled]=\"disabled()\"\n      [inputId]=\"id()\"\n      [typeahead]=\"false\"\n      multiple\n      fluid\n      (onBlur)=\"handleBlur()\"\n      [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n      [class.ng-dirty]=\"effectiveControl?.dirty\"\n      [class.ng-touched]=\"effectiveControl?.touched\" />\n    <label [for]=\"id()\">{{ label() }}</label>\n  </div>\n</p-floatlabel>\n\n<div class=\"tk-autocomplete-bottom\">\n  <div class=\"tk-autocomplete-messages\">\n    @if ((effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)) && errorMessage()) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n    }\n  </div>\n</div>\n","/**\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-pagination.mjs

@@ -147,11 +147,11 @@ class PaginationComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: PaginationComponent, isStandalone: true, selector: "tk-pagination", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n  <div class=\"flex items-center\">\n    <span class=\"mx-1 pagination__caption\">Items per page: </span>\n    <p-select\n      [options]=\"options()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"pageSizeInternal()\"\n      (ngModelChange)=\"onPageSizeChange($event)\" />\n  </div>\n  <p-paginator\n    [first]=\"pageIndexInternal()\"\n    [rows]=\"pageSizeInternal()\"\n    [totalRecords]=\"length()\"\n    (onPageChange)=\"onPageChange($event)\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n    [showPageLinks]=\"false\"\n    [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:center;align-items:center}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: PaginationComponent, isStandalone: true, selector: "tk-pagination", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n  <div class=\"flex items-center\">\n    <span class=\"mx-1 pagination__caption\">Items per page: </span>\n    <p-select\n      [options]=\"options()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"pageSizeInternal()\"\n      (ngModelChange)=\"onPageSizeChange($event)\" />\n  </div>\n  <p-paginator\n    [first]=\"pageIndexInternal()\"\n    [rows]=\"pageSizeInternal()\"\n    [totalRecords]=\"length()\"\n    (onPageChange)=\"onPageChange($event)\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n    [showPageLinks]=\"false\"\n    [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-pagination', imports: [PaginatorModule, FormsModule, Select], template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n  <div class=\"flex items-center\">\n    <span class=\"mx-1 pagination__caption\">Items per page: </span>\n    <p-select\n      [options]=\"options()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"pageSizeInternal()\"\n      (ngModelChange)=\"onPageSizeChange($event)\" />\n  </div>\n  <p-paginator\n    [first]=\"pageIndexInternal()\"\n    [rows]=\"pageSizeInternal()\"\n    [totalRecords]=\"length()\"\n    (onPageChange)=\"onPageChange($event)\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n    [showPageLinks]=\"false\"\n    [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:center;align-items:center}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"] }]
+            args: [{ selector: 'tk-pagination', imports: [PaginatorModule, FormsModule, Select], template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n  <div class=\"flex items-center\">\n    <span class=\"mx-1 pagination__caption\">Items per page: </span>\n    <p-select\n      [options]=\"options()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"pageSizeInternal()\"\n      (ngModelChange)=\"onPageSizeChange($event)\" />\n  </div>\n  <p-paginator\n    [first]=\"pageIndexInternal()\"\n    [rows]=\"pageSizeInternal()\"\n    [totalRecords]=\"length()\"\n    (onPageChange)=\"onPageChange($event)\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n    [showPageLinks]=\"false\"\n    [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"] }]
         }], ctorParameters: () => [] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-pagination.mjs","sources":["../../../projects/design-system/components/pagination/src/pagination.component.ts","../../../projects/design-system/components/pagination/src/pagination.component.html","../../../projects/design-system/components/pagination/tekus-design-system-components-pagination.ts"],"sourcesContent":["import {\n  Component,\n  computed,\n  input,\n  output,\n  signal,\n  effect,\n} from '@angular/core';\nimport { PaginatorModule, PaginatorState } from 'primeng/paginator';\nimport { FormsModule } from '@angular/forms';\nimport { Select } from 'primeng/select';\n\n@Component({\n  selector: 'tk-pagination',\n  imports: [PaginatorModule, FormsModule, Select],\n  templateUrl: './pagination.component.html',\n  styleUrl: './pagination.component.scss',\n})\nexport class PaginationComponent {\n  /**\n   * @property {boolean} hidden\n   * @description\n   * When true, hides the entire pagination component from view without affecting internal logic.\n   * Useful when you need to keep the component in the DOM (e.g., for @ViewChildren queries)\n   * but want to control its visibility externally.\n   *\n   * @default false\n   */\n  hidden = input<boolean>(false);\n\n  /**\n   * @property {number} pageIndex\n   * @description\n   * The index of the first record on the current page.\n   * This value is used as the `[first]` input in the PrimeNG Paginator (zero-based).\n   *\n   * @default 0\n   */\n  pageIndex = input<number>(0);\n\n  /**\n   * @property {number} pageSize\n   * @description\n   * The number of items (rows) to display per page.\n   *\n   * @default 10\n   */\n  pageSize = input<number>(10);\n\n  /**\n   * @property {number} length\n   * @description\n   * The total number of records in the collection (`totalRecords`).\n   *\n   * @required\n   */\n  length = input.required<number>();\n\n  /**\n   * @property {number[]} pageSizeOptions\n   * @description\n   * Array of available options for the 'Items per page' selector.\n   *\n   * @default [5, 10, 20, 50]\n   */\n  pageSizeOptions = input<number[]>([5, 10, 20, 50]);\n\n  /**\n   * @property {Signal<number>} pageIndexInternal\n   * @description\n   * Internal, writable signal representing the current `first` index.\n   * It is updated based on user interaction (page change).\n   * Initialized with the value of `pageIndex()`.\n   *\n   * @internal\n   */\n  pageIndexInternal = signal<number>(this.pageIndex());\n\n  /**\n   * @property {Signal<number>} pageSizeInternal\n   * @description\n   * Internal, writable signal representing the current page size (`rows`).\n   * It is updated based on user interaction (select change).\n   * Initialized with the value of `pageSize()`.\n   *\n   * @internal\n   */\n  pageSizeInternal = signal<number>(this.pageSize());\n\n  /**\n   * @event pageChange\n   * @description\n   * Emits the complete pagination state (`PaginatorState`) when the user\n   * changes the page or the page size.\n   *\n   * @payload {PaginatorState}\n   * @example\n   * <tk-pagination (pageChange)=\"loadData($event)\"></tk-pagination>\n   */\n  pageChange = output<PaginatorState>();\n\n  constructor() {\n    /**\n     * @effect pageIndex → pageIndexInternal\n     * @description\n     * Synchronizes the `pageIndex` Input with the internal signal `pageIndexInternal`.\n     * This allows the parent component to update the pagination state externally.\n     */\n    effect(() => {\n      this.pageIndexInternal.set(this.pageIndex());\n    });\n\n    /**\n     * @effect pageSize → pageSizeInternal\n     * @description\n     * Synchronizes the `pageSize` Input with the internal signal `pageSizeInternal`.\n     * Allows the parent component to control the page size externally.\n     */\n    effect(() => {\n      this.pageSizeInternal.set(this.pageSize());\n    });\n  }\n\n  /**\n   * @property {Signal<{label: string, value: number}[]>} options\n   * @description\n   * Computed signal that transforms the `pageSizeOptions` number array\n   * into the `{label: string, value: number}` format required by the PrimeNG Select component.\n   */\n  options = computed(() =>\n    this.pageSizeOptions().map(value => ({\n      label: value.toString(),\n      value: value,\n    }))\n  );\n\n  // -----------------------------------\n  // EVENT HANDLERS\n  // -----------------------------------\n\n  /**\n   * @method onPageChange\n   * @description\n   * Handles the native `(onPageChange)` event emitted by the `p-paginator`.\n   * Updates the internal state and notifies the parent component.\n   *\n   * @param {PaginatorState} event - The current pagination state.\n   */\n  onPageChange(event: PaginatorState) {\n    this.pageIndexInternal.set(event.first ?? this.pageIndexInternal());\n    this.pageSizeInternal.set(event.rows! ?? this.pageSizeInternal());\n    this.pageChange.emit(event);\n  }\n\n  /**\n   * @method onPageSizeChange\n   * @description\n   * Handles the `(ngModelChange)` event from the `p-select` when changing \"Items per page\".\n   * Resets the `pageIndexInternal` to 0 to jump to the first page and emits the new state.\n   *\n   * @param {number} newSize - The newly selected page size.\n   */\n  onPageSizeChange(newSize: number) {\n    this.pageSizeInternal.set(newSize);\n    this.pageIndexInternal.set(0);\n\n    // Emit the new state to the parent component\n    this.pageChange.emit({\n      first: 0,\n      rows: newSize,\n      page: 0,\n      pageCount: Math.ceil(this.length() / newSize),\n    } as PaginatorState);\n  }\n}\n","<div class=\"pagination\" [class.hidden]=\"hidden()\">\n  <div class=\"flex items-center\">\n    <span class=\"mx-1 pagination__caption\">Items per page: </span>\n    <p-select\n      [options]=\"options()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"pageSizeInternal()\"\n      (ngModelChange)=\"onPageSizeChange($event)\" />\n  </div>\n  <p-paginator\n    [first]=\"pageIndexInternal()\"\n    [rows]=\"pageSizeInternal()\"\n    [totalRecords]=\"length()\"\n    (onPageChange)=\"onPageChange($event)\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n    [showPageLinks]=\"false\"\n    [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-pagination.mjs","sources":["../../../projects/design-system/components/pagination/src/pagination.component.ts","../../../projects/design-system/components/pagination/src/pagination.component.html","../../../projects/design-system/components/pagination/tekus-design-system-components-pagination.ts"],"sourcesContent":["import {\n  Component,\n  computed,\n  input,\n  output,\n  signal,\n  effect,\n} from '@angular/core';\nimport { PaginatorModule, PaginatorState } from 'primeng/paginator';\nimport { FormsModule } from '@angular/forms';\nimport { Select } from 'primeng/select';\n\n@Component({\n  selector: 'tk-pagination',\n  imports: [PaginatorModule, FormsModule, Select],\n  templateUrl: './pagination.component.html',\n  styleUrl: './pagination.component.scss',\n})\nexport class PaginationComponent {\n  /**\n   * @property {boolean} hidden\n   * @description\n   * When true, hides the entire pagination component from view without affecting internal logic.\n   * Useful when you need to keep the component in the DOM (e.g., for @ViewChildren queries)\n   * but want to control its visibility externally.\n   *\n   * @default false\n   */\n  hidden = input<boolean>(false);\n\n  /**\n   * @property {number} pageIndex\n   * @description\n   * The index of the first record on the current page.\n   * This value is used as the `[first]` input in the PrimeNG Paginator (zero-based).\n   *\n   * @default 0\n   */\n  pageIndex = input<number>(0);\n\n  /**\n   * @property {number} pageSize\n   * @description\n   * The number of items (rows) to display per page.\n   *\n   * @default 10\n   */\n  pageSize = input<number>(10);\n\n  /**\n   * @property {number} length\n   * @description\n   * The total number of records in the collection (`totalRecords`).\n   *\n   * @required\n   */\n  length = input.required<number>();\n\n  /**\n   * @property {number[]} pageSizeOptions\n   * @description\n   * Array of available options for the 'Items per page' selector.\n   *\n   * @default [5, 10, 20, 50]\n   */\n  pageSizeOptions = input<number[]>([5, 10, 20, 50]);\n\n  /**\n   * @property {Signal<number>} pageIndexInternal\n   * @description\n   * Internal, writable signal representing the current `first` index.\n   * It is updated based on user interaction (page change).\n   * Initialized with the value of `pageIndex()`.\n   *\n   * @internal\n   */\n  pageIndexInternal = signal<number>(this.pageIndex());\n\n  /**\n   * @property {Signal<number>} pageSizeInternal\n   * @description\n   * Internal, writable signal representing the current page size (`rows`).\n   * It is updated based on user interaction (select change).\n   * Initialized with the value of `pageSize()`.\n   *\n   * @internal\n   */\n  pageSizeInternal = signal<number>(this.pageSize());\n\n  /**\n   * @event pageChange\n   * @description\n   * Emits the complete pagination state (`PaginatorState`) when the user\n   * changes the page or the page size.\n   *\n   * @payload {PaginatorState}\n   * @example\n   * <tk-pagination (pageChange)=\"loadData($event)\"></tk-pagination>\n   */\n  pageChange = output<PaginatorState>();\n\n  constructor() {\n    /**\n     * @effect pageIndex → pageIndexInternal\n     * @description\n     * Synchronizes the `pageIndex` Input with the internal signal `pageIndexInternal`.\n     * This allows the parent component to update the pagination state externally.\n     */\n    effect(() => {\n      this.pageIndexInternal.set(this.pageIndex());\n    });\n\n    /**\n     * @effect pageSize → pageSizeInternal\n     * @description\n     * Synchronizes the `pageSize` Input with the internal signal `pageSizeInternal`.\n     * Allows the parent component to control the page size externally.\n     */\n    effect(() => {\n      this.pageSizeInternal.set(this.pageSize());\n    });\n  }\n\n  /**\n   * @property {Signal<{label: string, value: number}[]>} options\n   * @description\n   * Computed signal that transforms the `pageSizeOptions` number array\n   * into the `{label: string, value: number}` format required by the PrimeNG Select component.\n   */\n  options = computed(() =>\n    this.pageSizeOptions().map(value => ({\n      label: value.toString(),\n      value: value,\n    }))\n  );\n\n  // -----------------------------------\n  // EVENT HANDLERS\n  // -----------------------------------\n\n  /**\n   * @method onPageChange\n   * @description\n   * Handles the native `(onPageChange)` event emitted by the `p-paginator`.\n   * Updates the internal state and notifies the parent component.\n   *\n   * @param {PaginatorState} event - The current pagination state.\n   */\n  onPageChange(event: PaginatorState) {\n    this.pageIndexInternal.set(event.first ?? this.pageIndexInternal());\n    this.pageSizeInternal.set(event.rows! ?? this.pageSizeInternal());\n    this.pageChange.emit(event);\n  }\n\n  /**\n   * @method onPageSizeChange\n   * @description\n   * Handles the `(ngModelChange)` event from the `p-select` when changing \"Items per page\".\n   * Resets the `pageIndexInternal` to 0 to jump to the first page and emits the new state.\n   *\n   * @param {number} newSize - The newly selected page size.\n   */\n  onPageSizeChange(newSize: number) {\n    this.pageSizeInternal.set(newSize);\n    this.pageIndexInternal.set(0);\n\n    // Emit the new state to the parent component\n    this.pageChange.emit({\n      first: 0,\n      rows: newSize,\n      page: 0,\n      pageCount: Math.ceil(this.length() / newSize),\n    } as PaginatorState);\n  }\n}\n","<div class=\"pagination\" [class.hidden]=\"hidden()\">\n  <div class=\"flex items-center\">\n    <span class=\"mx-1 pagination__caption\">Items per page: </span>\n    <p-select\n      [options]=\"options()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"pageSizeInternal()\"\n      (ngModelChange)=\"onPageSizeChange($event)\" />\n  </div>\n  <p-paginator\n    [first]=\"pageIndexInternal()\"\n    [rows]=\"pageSizeInternal()\"\n    [totalRecords]=\"length()\"\n    (onPageChange)=\"onPageChange($event)\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n    [showPageLinks]=\"false\"\n    [showFirstLastIcon]=\"false\"></p-paginator>\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

@@ -1,13 +1,16 @@
 import * as i0 from '@angular/core';
-import { input, signal, model, output, effect, forwardRef, Component } from '@angular/core';
+import { inject, input, signal, model, output, effect, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from 'primeng/floatlabel';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { Select } from 'primeng/select';
+import * as i3 from 'primeng/message';
+import { MessageModule } from 'primeng/message';
 
 class SelectComponent {
     constructor() {
+        this.ngControl = inject(NgControl, { self: true, optional: true });
         /**
          * @property {string} id
          * @description
@@ -16,6 +19,13 @@ class SelectComponent {
          * @default 'select'
          */
         this.id = input('select');
+        /**
+         * @property {InputSignal<FormControl>} control
+         * @description
+         * External FormControl used to read/set the input value.
+         * If not provided, an internal FormControl is created.
+         */
+        this.control = input();
         /**
          * @property {T[]} options
          * @description
@@ -61,6 +71,18 @@ class SelectComponent {
          */
         this.disabled = input(false);
         this.internalDisabled = signal(false);
+        /**
+         * @property {InputSignal<string>} errorMessage
+         * @description
+         * Message to display when the control is invalid and touched.
+         */
+        this.errorMessage = input('');
+        /**
+         * @property {InputSignal<string>} hint
+         * @description
+         * Hint text to display below the input.
+         */
+        this.hint = input('');
         /**
          * @property {Signal<T | null>} model
          * @description
@@ -81,6 +103,9 @@ class SelectComponent {
         // CVA callbacks
         this.onChangeFn = () => { };
         this.onTouchedFn = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
         /**
          * @effect disabled → internalDisabled
          * @description
@@ -164,25 +189,22 @@ class SelectComponent {
         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();
+            this.effectiveControl.markAsTouched();
+        }
+    }
+    get effectiveControl() {
+        return this.ngControl?.control || this.control();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: SelectComponent, isStandalone: true, selector: "tk-select", inputs: { id: { classPropertyName: "id", publicName: "id", 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 }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", modelChange: "modelChange" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SelectComponent),
-                multi: true,
-            },
-        ], 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    (onChange)=\"handleChange($event)\" />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\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-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)}: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}\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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-select', imports: [FormsModule, Select, FloatLabelModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SelectComponent),
-                            multi: true,
-                        },
-                    ], 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    (onChange)=\"handleChange($event)\" />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\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-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)}: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}\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]=\"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"] }]
         }], ctorParameters: () => [] });
 
 /**

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

@@ -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  forwardRef,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n  FormsModule,\n} from '@angular/forms';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { Select } from 'primeng/select';\n\n@Component({\n  selector: 'tk-select',\n  imports: [FormsModule, Select, FloatLabelModule],\n  templateUrl: './select.component.html',\n  styleUrl: './select.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SelectComponent),\n      multi: true,\n    },\n  ],\n})\nexport class SelectComponent<T = unknown> implements ControlValueAccessor {\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   * @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 {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    /**\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}\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    (onChange)=\"handleChange($event)\" />\n  <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-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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"}

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

@@ -111,7 +111,7 @@ class ToolbarComponent {
         this.filterModel.set(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToolbarComponent, isStandalone: true, selector: "tk-toolbar", inputs: { searchModel: { classPropertyName: "searchModel", publicName: "searchModel", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, filterOptionLabel: { classPropertyName: "filterOptionLabel", publicName: "filterOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, filterFloatLabel: { classPropertyName: "filterFloatLabel", publicName: "filterFloatLabel", isSignal: true, isRequired: false, transformFunction: null }, searchFloatLabel: { classPropertyName: "searchFloatLabel", publicName: "searchFloatLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchModel: "searchModelChange", filterModel: "filterModelChange" }, ngImport: i0, template: "<div class=\"toolbar\">\n  @if (showSearchInput()) {\n  <div class=\"toolbar__input-container\">\n    <tk-input-text\n      [label]=\"searchFloatLabel()\"\n      icon=\"magnifying-glass\"\n      [clearable]=\"true\"\n      [value]=\"searchModel()\"\n      (valueChange)=\"searchModel.set($event)\">\n    </tk-input-text>\n  </div>\n  } @if (showFilterSelect()) {\n  <div class=\"toolbar__input-container\">\n    <tk-select\n      [options]=\"filterOptions()\"\n      [optionLabel]=\"filterOptionLabel()\"\n      [label]=\"filterFloatLabel()\"\n      (modelChange)=\"onSelectedOption($event ?? null)\">\n    </tk-select>\n  </div>\n  }\n  <div class=\"toolbar__buttons\">\n    @if (searchModel() !== undefined) {\n    <tk-button\n      [icon]=\"'magnifying-glass'\"\n      severity=\"secondary\"\n      [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n      (clicked)=\"toggleSearchInput()\">\n    </tk-button>\n    } @if (filterModel() !== undefined) {\n    <tk-button\n      [icon]=\"'filter'\"\n      severity=\"secondary\"\n      [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n      (clicked)=\"toggleFilterSelect()\">\n    </tk-button>\n    }\n  </div>\n</div>\n", styles: [".toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);row-gap:var(--tk-spacing-base-150, 1.5rem)}.toolbar__input-container{width:15rem}.toolbar__buttons{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-50, .5rem)}@media (max-width: 768px){.toolbar{justify-content:flex-start}}:host ::ng-deep .tk-input-bottom{display:none}:host ::ng-deep .p-button-outlined{border:1px solid transparent!important}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }, { kind: "component", type: InputTextComponent, selector: "tk-input-text", inputs: ["value", "control", "label", "type", "id", "icon", "clearable", "errorMessage", "hint", "maxLength"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "tk-select", inputs: ["id", "options", "optionLabel", "label", "showClear", "disabled", "model"], outputs: ["modelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToolbarComponent, isStandalone: true, selector: "tk-toolbar", inputs: { searchModel: { classPropertyName: "searchModel", publicName: "searchModel", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, filterOptionLabel: { classPropertyName: "filterOptionLabel", publicName: "filterOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, filterFloatLabel: { classPropertyName: "filterFloatLabel", publicName: "filterFloatLabel", isSignal: true, isRequired: false, transformFunction: null }, searchFloatLabel: { classPropertyName: "searchFloatLabel", publicName: "searchFloatLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchModel: "searchModelChange", filterModel: "filterModelChange" }, ngImport: i0, template: "<div class=\"toolbar\">\n  @if (showSearchInput()) {\n  <div class=\"toolbar__input-container\">\n    <tk-input-text\n      [label]=\"searchFloatLabel()\"\n      icon=\"magnifying-glass\"\n      [clearable]=\"true\"\n      [value]=\"searchModel()\"\n      (valueChange)=\"searchModel.set($event)\">\n    </tk-input-text>\n  </div>\n  } @if (showFilterSelect()) {\n  <div class=\"toolbar__input-container\">\n    <tk-select\n      [options]=\"filterOptions()\"\n      [optionLabel]=\"filterOptionLabel()\"\n      [label]=\"filterFloatLabel()\"\n      (modelChange)=\"onSelectedOption($event ?? null)\">\n    </tk-select>\n  </div>\n  }\n  <div class=\"toolbar__buttons\">\n    @if (searchModel() !== undefined) {\n    <tk-button\n      [icon]=\"'magnifying-glass'\"\n      severity=\"secondary\"\n      [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n      (clicked)=\"toggleSearchInput()\">\n    </tk-button>\n    } @if (filterModel() !== undefined) {\n    <tk-button\n      [icon]=\"'filter'\"\n      severity=\"secondary\"\n      [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n      (clicked)=\"toggleFilterSelect()\">\n    </tk-button>\n    }\n  </div>\n</div>\n", styles: [".toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);row-gap:var(--tk-spacing-base-150, 1.5rem)}.toolbar__input-container{width:15rem}.toolbar__buttons{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-50, .5rem)}@media (max-width: 768px){.toolbar{justify-content:flex-start}}:host ::ng-deep .tk-input-bottom{display:none}:host ::ng-deep .p-button-outlined{border:1px solid transparent!important}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }, { kind: "component", type: InputTextComponent, selector: "tk-input-text", inputs: ["value", "control", "label", "type", "id", "icon", "clearable", "errorMessage", "hint", "maxLength"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "tk-select", inputs: ["id", "control", "options", "optionLabel", "label", "showClear", "disabled", "errorMessage", "hint", "model"], outputs: ["modelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-toolbar.mjs","sources":["../../../projects/design-system/components/toolbar/src/toolbar.component.ts","../../../projects/design-system/components/toolbar/src/toolbar.component.html","../../../projects/design-system/components/toolbar/tekus-design-system-components-toolbar.ts"],"sourcesContent":["import { Component, model, signal, input } from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { SelectComponent } from '@tekus/design-system/components/select';\nimport { InputTextComponent } from '@tekus/design-system/components/input-text';\n\n@Component({\n  selector: 'tk-toolbar',\n  imports: [ButtonComponent, InputTextComponent, SelectComponent],\n  templateUrl: './toolbar.component.html',\n  styleUrl: './toolbar.component.scss',\n})\nexport class ToolbarComponent {\n  /**\n   * @property {ModelSignal<string>} searchModel\n   * @description\n   * Two-way bindable signal for the search input value.\n   * Supports [(searchModel)]=\"variable\" syntax for two-way binding.\n   * @default ''\n   */\n  searchModel = model<string>('');\n\n  /**\n   * @property {ModelSignal<Record<string, string> | null>} filterModel\n   * @description\n   * Two-way bindable signal for the filter select value.\n   * Supports [(filterModel)]=\"variable\" syntax for two-way binding.\n   * @default null\n   */\n  filterModel = model<Record<string, string> | null>(null);\n\n  /**\n   * @property {WritableSignal<boolean>} showSearchInput\n   * @description\n   * Controls the visibility of the search input. Toggles when the search button is clicked.\n   * @default false\n   */\n  showSearchInput = signal<boolean>(false);\n\n  /**\n   * @property {WritableSignal<boolean>} showFilterSelect\n   * @description\n   * Controls the visibility of the filter select. Toggles when the filter button is clicked.\n   * @default false\n   */\n  showFilterSelect = signal<boolean>(false);\n\n  /**\n   * @property {InputSignal<Array<{ label: string; value: string }>>} filterOptions\n   * @description\n   * Array of options available in the filter select dropdown.\n   * Each option is an object with `label` (displayed text) and `value` (internal identifier).\n   *\n   * @default\n   * [\n   *   { label: 'Option 1', value: 'option1' },\n   *   { label: 'Option 2', value: 'option2' },\n   *   { label: 'Option 3', value: 'option3' }\n   * ]\n   */\n  filterOptions = input<Array<{ label: string; value: string }>>([\n    { label: 'Option 1', value: 'option1' },\n    { label: 'Option 2', value: 'option2' },\n    { label: 'Option 3', value: 'option3' },\n  ]);\n\n  /**\n   * @property {InputSignal<string>} filterOptionLabel\n   * @description\n   * Property name used to display the label in the select dropdown options.\n   * This corresponds to the key in each option object that contains the display text.\n   *\n   * @default 'label'\n   */\n  filterOptionLabel = input<string>('label');\n\n  /**\n   * @property {InputSignal<string>} filterFloatLabel\n   * @description\n   * Label text displayed above the filter select input using the FloatLabel wrapper.\n   * This is the placeholder/label that floats when the select is focused or has a value.\n   *\n   * @default 'Filtrar'\n   */\n  filterFloatLabel = input<string>('Filtrar');\n\n  /**\n   * @property {InputSignal<string>} searchFloatLabel\n   * @description\n   * Label text displayed above the search input using the FloatLabel wrapper.\n   * This is the placeholder/label that floats when the search input is focused or has a value.\n   *\n   * @default 'Buscar'\n   */\n  searchFloatLabel = input<string>('Buscar');\n\n  /**\n   * @method toggleSearchInput\n   * @description\n   * Toggles the visibility of the search input field.\n   */\n  toggleSearchInput(): void {\n    this.showSearchInput.update(value => !value);\n    this.searchModel.set('');\n  }\n\n  /**\n   * @method toggleFilterSelect\n   * @description\n   * Toggles the visibility of the filter select dropdown.\n   */\n  toggleFilterSelect(): void {\n    this.showFilterSelect.update(value => !value);\n    this.filterModel.set(null);\n  }\n\n  /**\n   * @method onSelectedOption\n   * @description\n   * Handles filter select changes and updates the filterModel signal.\n   *\n   * @param value - Selected option value from tk-select\n   */\n  onSelectedOption(value: Record<string, string> | null): void {\n    this.filterModel.set(value);\n  }\n}\n","<div class=\"toolbar\">\n  @if (showSearchInput()) {\n  <div class=\"toolbar__input-container\">\n    <tk-input-text\n      [label]=\"searchFloatLabel()\"\n      icon=\"magnifying-glass\"\n      [clearable]=\"true\"\n      [value]=\"searchModel()\"\n      (valueChange)=\"searchModel.set($event)\">\n    </tk-input-text>\n  </div>\n  } @if (showFilterSelect()) {\n  <div class=\"toolbar__input-container\">\n    <tk-select\n      [options]=\"filterOptions()\"\n      [optionLabel]=\"filterOptionLabel()\"\n      [label]=\"filterFloatLabel()\"\n      (modelChange)=\"onSelectedOption($event ?? null)\">\n    </tk-select>\n  </div>\n  }\n  <div class=\"toolbar__buttons\">\n    @if (searchModel() !== undefined) {\n    <tk-button\n      [icon]=\"'magnifying-glass'\"\n      severity=\"secondary\"\n      [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n      (clicked)=\"toggleSearchInput()\">\n    </tk-button>\n    } @if (filterModel() !== undefined) {\n    <tk-button\n      [icon]=\"'filter'\"\n      severity=\"secondary\"\n      [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n      (clicked)=\"toggleFilterSelect()\">\n    </tk-button>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-toolbar.mjs","sources":["../../../projects/design-system/components/toolbar/src/toolbar.component.ts","../../../projects/design-system/components/toolbar/src/toolbar.component.html","../../../projects/design-system/components/toolbar/tekus-design-system-components-toolbar.ts"],"sourcesContent":["import { Component, model, signal, input } from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { SelectComponent } from '@tekus/design-system/components/select';\nimport { InputTextComponent } from '@tekus/design-system/components/input-text';\n\n@Component({\n  selector: 'tk-toolbar',\n  imports: [ButtonComponent, InputTextComponent, SelectComponent],\n  templateUrl: './toolbar.component.html',\n  styleUrl: './toolbar.component.scss',\n})\nexport class ToolbarComponent {\n  /**\n   * @property {ModelSignal<string>} searchModel\n   * @description\n   * Two-way bindable signal for the search input value.\n   * Supports [(searchModel)]=\"variable\" syntax for two-way binding.\n   * @default ''\n   */\n  searchModel = model<string>('');\n\n  /**\n   * @property {ModelSignal<Record<string, string> | null>} filterModel\n   * @description\n   * Two-way bindable signal for the filter select value.\n   * Supports [(filterModel)]=\"variable\" syntax for two-way binding.\n   * @default null\n   */\n  filterModel = model<Record<string, string> | null>(null);\n\n  /**\n   * @property {WritableSignal<boolean>} showSearchInput\n   * @description\n   * Controls the visibility of the search input. Toggles when the search button is clicked.\n   * @default false\n   */\n  showSearchInput = signal<boolean>(false);\n\n  /**\n   * @property {WritableSignal<boolean>} showFilterSelect\n   * @description\n   * Controls the visibility of the filter select. Toggles when the filter button is clicked.\n   * @default false\n   */\n  showFilterSelect = signal<boolean>(false);\n\n  /**\n   * @property {InputSignal<Array<{ label: string; value: string }>>} filterOptions\n   * @description\n   * Array of options available in the filter select dropdown.\n   * Each option is an object with `label` (displayed text) and `value` (internal identifier).\n   *\n   * @default\n   * [\n   *   { label: 'Option 1', value: 'option1' },\n   *   { label: 'Option 2', value: 'option2' },\n   *   { label: 'Option 3', value: 'option3' }\n   * ]\n   */\n  filterOptions = input<Array<{ label: string; value: string }>>([\n    { label: 'Option 1', value: 'option1' },\n    { label: 'Option 2', value: 'option2' },\n    { label: 'Option 3', value: 'option3' },\n  ]);\n\n  /**\n   * @property {InputSignal<string>} filterOptionLabel\n   * @description\n   * Property name used to display the label in the select dropdown options.\n   * This corresponds to the key in each option object that contains the display text.\n   *\n   * @default 'label'\n   */\n  filterOptionLabel = input<string>('label');\n\n  /**\n   * @property {InputSignal<string>} filterFloatLabel\n   * @description\n   * Label text displayed above the filter select input using the FloatLabel wrapper.\n   * This is the placeholder/label that floats when the select is focused or has a value.\n   *\n   * @default 'Filtrar'\n   */\n  filterFloatLabel = input<string>('Filtrar');\n\n  /**\n   * @property {InputSignal<string>} searchFloatLabel\n   * @description\n   * Label text displayed above the search input using the FloatLabel wrapper.\n   * This is the placeholder/label that floats when the search input is focused or has a value.\n   *\n   * @default 'Buscar'\n   */\n  searchFloatLabel = input<string>('Buscar');\n\n  /**\n   * @method toggleSearchInput\n   * @description\n   * Toggles the visibility of the search input field.\n   */\n  toggleSearchInput(): void {\n    this.showSearchInput.update(value => !value);\n    this.searchModel.set('');\n  }\n\n  /**\n   * @method toggleFilterSelect\n   * @description\n   * Toggles the visibility of the filter select dropdown.\n   */\n  toggleFilterSelect(): void {\n    this.showFilterSelect.update(value => !value);\n    this.filterModel.set(null);\n  }\n\n  /**\n   * @method onSelectedOption\n   * @description\n   * Handles filter select changes and updates the filterModel signal.\n   *\n   * @param value - Selected option value from tk-select\n   */\n  onSelectedOption(value: Record<string, string> | null): void {\n    this.filterModel.set(value);\n  }\n}\n","<div class=\"toolbar\">\n  @if (showSearchInput()) {\n  <div class=\"toolbar__input-container\">\n    <tk-input-text\n      [label]=\"searchFloatLabel()\"\n      icon=\"magnifying-glass\"\n      [clearable]=\"true\"\n      [value]=\"searchModel()\"\n      (valueChange)=\"searchModel.set($event)\">\n    </tk-input-text>\n  </div>\n  } @if (showFilterSelect()) {\n  <div class=\"toolbar__input-container\">\n    <tk-select\n      [options]=\"filterOptions()\"\n      [optionLabel]=\"filterOptionLabel()\"\n      [label]=\"filterFloatLabel()\"\n      (modelChange)=\"onSelectedOption($event ?? null)\">\n    </tk-select>\n  </div>\n  }\n  <div class=\"toolbar__buttons\">\n    @if (searchModel() !== undefined) {\n    <tk-button\n      [icon]=\"'magnifying-glass'\"\n      severity=\"secondary\"\n      [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n      (clicked)=\"toggleSearchInput()\">\n    </tk-button>\n    } @if (filterModel() !== undefined) {\n    <tk-button\n      [icon]=\"'filter'\"\n      severity=\"secondary\"\n      [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n      (clicked)=\"toggleFilterSelect()\">\n    </tk-button>\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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tekus/design-system",
   "description": "Tekus design system library",
-  "version": "5.8.0",
+  "version": "5.8.2",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^19.2.15",
@@ -39,26 +39,18 @@
       "types": "./core/index.d.ts",
       "default": "./fesm2022/tekus-design-system-core.mjs"
     },
-    "./core/types": {
-      "types": "./core/types/index.d.ts",
-      "default": "./fesm2022/tekus-design-system-core-types.mjs"
-    },
-    "./directives/gird-item": {
-      "types": "./directives/gird-item/index.d.ts",
-      "default": "./fesm2022/tekus-design-system-directives-gird-item.mjs"
-    },
     "./components/autocomplete": {
       "types": "./components/autocomplete/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-autocomplete.mjs"
     },
-    "./components/button": {
-      "types": "./components/button/index.d.ts",
-      "default": "./fesm2022/tekus-design-system-components-button.mjs"
-    },
     "./components/checkbox": {
       "types": "./components/checkbox/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-checkbox.mjs"
     },
+    "./components/button": {
+      "types": "./components/button/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-components-button.mjs"
+    },
     "./components/date-picker": {
       "types": "./components/date-picker/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-date-picker.mjs"
@@ -111,6 +103,14 @@
       "types": "./components/tooltip/index.d.ts",
       "default": "./fesm2022/tekus-design-system-components-tooltip.mjs"
     },
+    "./core/types": {
+      "types": "./core/types/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-core-types.mjs"
+    },
+    "./directives/gird-item": {
+      "types": "./directives/gird-item/index.d.ts",
+      "default": "./fesm2022/tekus-design-system-directives-gird-item.mjs"
+    },
     "./utils/sanitizer-utils": {
       "types": "./utils/sanitizer-utils/index.d.ts",
       "default": "./fesm2022/tekus-design-system-utils-sanitizer-utils.mjs"