@tekus/design-system 5.17.0 → 5.19.0

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

@@ -1,27 +1,35 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component } from '@angular/core';
+import { inject, signal, model, input, output, computed, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { NgControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i2 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i3 from 'primeng/floatlabel';
 import { FloatLabelModule } from 'primeng/floatlabel';
+import * as i4 from 'primeng/message';
+import { MessageModule } from 'primeng/message';
 
 class MultiselectComponent {
     constructor() {
+        this.ngControl = inject(NgControl, { self: true, optional: true });
         /**
-         * @property {FormControl<MultiSelectOption[] | null>} control
+         * @property {Signal<MultiSelectOption[]>} selectionPool
          * @description
-         * External FormControl used to read/set the selected options.
-         * If not provided, an internal FormControl is created with an empty array value.
+         * Internal signal to keep track of selected items even if they are filtered out from the main options list.
          */
-        this.control = new FormControl([]);
+        this.selectionPool = signal([]);
+        /**
+         * @property {ModelSignal<MultiSelectOption[] | null>} model
+         * @description
+         * The model signal for two-way binding.
+         */
+        this.model = model([]);
         /**
          * @property {MultiSelectOption[]} options
          * @description
          * Array of available options shown in the multiselect dropdown.
          */
-        this.options = [];
+        this.options = input([]);
         /**
          * @property {string} labelText
          * @description
@@ -29,7 +37,7 @@ class MultiselectComponent {
          *
          * @default 'Select'
          */
-        this.labelText = 'Select';
+        this.labelText = input('Select');
         /**
          * @property {string} display
          * @description
@@ -37,7 +45,7 @@ class MultiselectComponent {
          *
          * @default 'chip'
          */
-        this.display = 'chip';
+        this.display = input('chip');
         /**
          * @property {number} maxSelectedLabels
          * @description
@@ -45,7 +53,7 @@ class MultiselectComponent {
          *
          * @default 4
          */
-        this.maxSelectedLabels = 4;
+        this.maxSelectedLabels = input(4);
         /**
          * @property {string} selectedItemsLabel
          * @description
@@ -53,7 +61,7 @@ class MultiselectComponent {
          *
          * @default '{0} elementos seleccionados'
          */
-        this.selectedItemsLabel = '{0} elementos seleccionados';
+        this.selectedItemsLabel = input('{0} elementos seleccionados');
         /**
          * @property {string} emptyFilterMessage
          * @description
@@ -61,7 +69,7 @@ class MultiselectComponent {
          *
          * @default 'No hay resultados'
          */
-        this.emptyFilterMessage = 'No hay resultados';
+        this.emptyFilterMessage = input('No hay resultados');
         /**
          * @property {boolean} filter
          * @description
@@ -69,13 +77,13 @@ class MultiselectComponent {
          *
          * @default true
          */
-        this.filter = true;
+        this.filter = input(true);
         /**
          * @property {string} filterPlaceHolder
          * @description
          * Placeholder text for the filter input.
          */
-        this.filterPlaceHolder = '';
+        this.filterPlaceHolder = input('');
         /**
          * @property {string} id
          * @description
@@ -83,13 +91,25 @@ class MultiselectComponent {
          *
          * @default 'multiselect'
          */
-        this.id = 'multiselect';
+        this.id = input('multiselect');
         /**
          * @property {string} styleClass
          * @description
          * Additional CSS class applied to the multiselect container.
          */
-        this.styleClass = '';
+        this.styleClass = input('');
+        /**
+       * @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('');
         /**
          * @event selectionChange
          * @description
@@ -99,7 +119,55 @@ class MultiselectComponent {
          * @example
          * <tk-multiselect (selectionChange)="onChange($event)"></tk-multiselect>
          */
-        this.selectionChange = new EventEmitter();
+        this.selectionChange = output();
+        /**
+         * @event filterChange
+         * @description
+         * Emits the filter text when the user types in the search input.
+         */
+        this.filterChange = output();
+        /**
+         * @property internalOptions
+         * @description
+         * Computed signal that merges the current options with the selected items pool
+         * to ensure selected items are always visible.
+         */
+        this.internalOptions = computed(() => {
+            const currentFromParent = this.options();
+            const selected = this.selectionPool();
+            const merged = [...selected, ...currentFromParent];
+            const uniqueMap = new Map();
+            merged.forEach(item => {
+                if (item)
+                    uniqueMap.set(item.code, item);
+            });
+            return Array.from(uniqueMap.values());
+        });
+        /**
+         * @callback onChange
+         * @description
+         * Callback function to notify the parent component of value changes.
+         */
+        this.onChange = () => { };
+        /**
+         * @callback onTouched
+         * @description
+         * Callback function to notify the parent component when the control is touched.
+         */
+        this.onTouched = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    /**
+     * @method handleFilter
+     * @description
+     * Handles the filter event from the PrimeNG component and emits the filter value.
+     *
+     * @param event - The filter event object.
+     */
+    handleFilter(event) {
+        this.filterChange.emit(event.filter || '');
     }
     /**
      * @method handleChange
@@ -110,39 +178,90 @@ class MultiselectComponent {
      * @param event - Change event containing the `value` property with selected items.
      */
     handleChange(event) {
-        this.selectionChange.emit(event.value);
+        const val = event.value || [];
+        this.model.set(val);
+        this.updateSelectionPool(val);
+        this.onChange(val);
+        this.selectionChange.emit(val);
+        if (this.effectiveControl) {
+            this.effectiveControl.setValue(val);
+            this.effectiveControl.markAsDirty();
+            this.effectiveControl.markAsTouched();
+        }
+    }
+    /**
+     * @method updateSelectionPool
+     * @description
+     * Updates the internal selection pool to ensure selected items persist
+     * even if they are filtered out from the main options list.
+     *
+     * @param items - The items to add to the pool.
+     */
+    updateSelectionPool(items) {
+        this.selectionPool.update(prev => {
+            const combined = [...prev, ...items];
+            const map = new Map();
+            combined.forEach(i => map.set(i.code, i));
+            return Array.from(map.values());
+        });
+    }
+    /**
+     * @method writeValue
+     * @description
+     * Writes a new value to the element.
+     * Part of the ControlValueAccessor interface.
+     *
+     * @param value - The new value.
+     */
+    writeValue(value) {
+        this.model.set(value || []);
+        if (value)
+            this.updateSelectionPool(value);
+    }
+    /**
+     * @method registerOnChange
+     * @description
+     * Registers a callback function that is called when the control's value changes in the UI.
+     * Part of the ControlValueAccessor interface.
+     *
+     * @param fn - The callback function.
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * @method registerOnTouched
+     * @description
+     * Registers a callback function that is called by the forms API on initialization to update the form control on 'blur'.
+     * Part of the ControlValueAccessor interface.
+     *
+     * @param fn - The callback function.
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * @method effectiveControl
+     * @description
+     * Gets the effective FormControl associated with this component,
+     * either from NgControl or the internal model.
+     */
+    get effectiveControl() {
+        return this.ngControl?.control || null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: MultiselectComponent, isStandalone: true, selector: "tk-multiselect", inputs: { control: "control", options: "options", labelText: "labelText", display: "display", maxSelectedLabels: "maxSelectedLabels", selectedItemsLabel: "selectedItemsLabel", emptyFilterMessage: "emptyFilterMessage", filter: "filter", filterPlaceHolder: "filterPlaceHolder", id: "id", styleClass: "styleClass" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [display]=\"display\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [selectedItemsLabel]=\"selectedItemsLabel\"\n    [emptyFilterMessage]=\"emptyFilterMessage\"\n    [filter]=\"filter\"\n    [filterPlaceHolder]=\"filterPlaceHolder\"\n    [styleClass]=\"styleClass\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id\">{{ labelText }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-multiselect: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-surface-700, #424243);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-multiselect-option span{color:var(--tk-color-accent-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-accent-muted, #b7b0d2)!important}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-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: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: MultiselectComponent, isStandalone: true, selector: "tk-multiselect", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceHolder: { classPropertyName: "filterPlaceHolder", publicName: "filterPlaceHolder", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", 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 } }, outputs: { model: "modelChange", selectionChange: "selectionChange", filterChange: "filterChange" }, ngImport: i0, template: "<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id()\"\n    [options]=\"options()\"\n    [(ngModel)]=\"model\"\n    [display]=\"display()\"\n    [maxSelectedLabels]=\"maxSelectedLabels()\"\n    [selectedItemsLabel]=\"selectedItemsLabel()\"\n    [emptyFilterMessage]=\"emptyFilterMessage()\"\n    [filter]=\"filter()\"\n    [filterPlaceHolder]=\"filterPlaceHolder()\"\n    [styleClass]=\"styleClass()\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onFilter)=\"handleFilter($event)\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id()\">{{ labelText() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-multiselect: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-surface-700, #424243);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-multiselect-option span{color:var(--tk-color-accent-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-accent-muted, #b7b0d2)!important}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-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: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-multiselect', standalone: true, imports: [ReactiveFormsModule, MultiSelectModule, FloatLabelModule], template: "<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [display]=\"display\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [selectedItemsLabel]=\"selectedItemsLabel\"\n    [emptyFilterMessage]=\"emptyFilterMessage\"\n    [filter]=\"filter\"\n    [filterPlaceHolder]=\"filterPlaceHolder\"\n    [styleClass]=\"styleClass\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id\">{{ labelText }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-multiselect: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-surface-700, #424243);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-multiselect-option span{color:var(--tk-color-accent-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-accent-muted, #b7b0d2)!important}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-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"] }]
-        }], propDecorators: { control: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], labelText: [{
-                type: Input
-            }], display: [{
-                type: Input
-            }], maxSelectedLabels: [{
-                type: Input
-            }], selectedItemsLabel: [{
-                type: Input
-            }], emptyFilterMessage: [{
-                type: Input
-            }], filter: [{
-                type: Input
-            }], filterPlaceHolder: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], styleClass: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'tk-multiselect', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        FormsModule,
+                        MultiSelectModule,
+                        FloatLabelModule,
+                        MessageModule
+                    ], template: "<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id()\"\n    [options]=\"options()\"\n    [(ngModel)]=\"model\"\n    [display]=\"display()\"\n    [maxSelectedLabels]=\"maxSelectedLabels()\"\n    [selectedItemsLabel]=\"selectedItemsLabel()\"\n    [emptyFilterMessage]=\"emptyFilterMessage()\"\n    [filter]=\"filter()\"\n    [filterPlaceHolder]=\"filterPlaceHolder()\"\n    [styleClass]=\"styleClass()\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onFilter)=\"handleFilter($event)\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id()\">{{ labelText() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-multiselect: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-surface-700, #424243);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-multiselect-option span{color:var(--tk-color-accent-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-accent-muted, #b7b0d2)!important}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-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: () => [] });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-multiselect.mjs","sources":["../../../projects/design-system/components/multiselect/src/multiselect.component.ts","../../../projects/design-system/components/multiselect/src/multiselect.component.html","../../../projects/design-system/components/multiselect/tekus-design-system-components-multiselect.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MultiSelectModule } from 'primeng/multiselect';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { MultiSelectOption } from './multiselect.types';\n@Component({\n  selector: 'tk-multiselect',\n  standalone: true,\n  imports: [ReactiveFormsModule, MultiSelectModule, FloatLabelModule],\n  templateUrl: './multiselect.component.html',\n  styleUrls: ['./multiselect.component.scss'],\n})\nexport class MultiselectComponent {\n  /**\n   * @property {FormControl<MultiSelectOption[] | null>} control\n   * @description\n   * External FormControl used to read/set the selected options.\n   * If not provided, an internal FormControl is created with an empty array value.\n   */\n  @Input() control = new FormControl<MultiSelectOption[] | null>([]);\n\n  /**\n   * @property {MultiSelectOption[]} options\n   * @description\n   * Array of available options shown in the multiselect dropdown.\n   */\n  @Input() options: MultiSelectOption[] = [];\n\n  /**\n   * @property {string} labelText\n   * @description\n   * Label displayed above the multiselect input.\n   *\n   * @default 'Select'\n   */\n  @Input() labelText: string = 'Select';\n\n  /**\n   * @property {string} display\n   * @description\n   * Display mode for selected items. Examples: 'chip', 'comma'.\n   *\n   * @default 'chip'\n   */\n  @Input() display: string = 'chip';\n\n  /**\n   * @property {number} maxSelectedLabels\n   * @description\n   * Maximum number of labels shown when multiple items are selected.\n   *\n   * @default 4\n   */\n  @Input() maxSelectedLabels: number = 4;\n\n  /**\n   * @property {string} selectedItemsLabel\n   * @description\n   * Label template used when multiple items are selected (supports placeholders).\n   *\n   * @default '{0} elementos seleccionados'\n   */\n  @Input() selectedItemsLabel: string = '{0} elementos seleccionados';\n\n  /**\n   * @property {string} emptyFilterMessage\n   * @description\n   * Message displayed when the filter returns no results.\n   *\n   * @default 'No hay resultados'\n   */\n  @Input() emptyFilterMessage: string = 'No hay resultados';\n\n  /**\n   * @property {boolean} filter\n   * @description\n   * Enables the search/filter input inside the multiselect dropdown.\n   *\n   * @default true\n   */\n  @Input() filter: boolean = true;\n\n  /**\n   * @property {string} filterPlaceHolder\n   * @description\n   * Placeholder text for the filter input.\n   */\n  @Input() filterPlaceHolder: string = '';\n\n  /**\n   * @property {string} id\n   * @description\n   * HTML id attribute for the multiselect input.\n   *\n   * @default 'multiselect'\n   */\n  @Input() id: string = 'multiselect';\n\n  /**\n   * @property {string} styleClass\n   * @description\n   * Additional CSS class applied to the multiselect container.\n   */\n  @Input() styleClass: string = '';\n\n  /**\n   * @event selectionChange\n   * @description\n   * Emits when the selected options change.\n   * Payload: an array of selected MultiSelectOption or null.\n   *\n   * @example\n   * <tk-multiselect (selectionChange)=\"onChange($event)\"></tk-multiselect>\n   */\n  @Output() selectionChange = new EventEmitter<MultiSelectOption[] | null>();\n\n  /**\n   * @method handleChange\n   * @description\n   * Handler forwarded from the PrimeNG MultiSelect change event.\n   * Emits the selectionChange output with the selected values.\n   *\n   * @param event - Change event containing the `value` property with selected items.\n   */\n  handleChange(event: { value: MultiSelectOption[] | null }): void {\n    this.selectionChange.emit(event.value);\n  }\n}\n","<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [display]=\"display\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [selectedItemsLabel]=\"selectedItemsLabel\"\n    [emptyFilterMessage]=\"emptyFilterMessage\"\n    [filter]=\"filter\"\n    [filterPlaceHolder]=\"filterPlaceHolder\"\n    [styleClass]=\"styleClass\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id\">{{ labelText }}</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-multiselect.mjs","sources":["../../../projects/design-system/components/multiselect/src/multiselect.component.ts","../../../projects/design-system/components/multiselect/src/multiselect.component.html","../../../projects/design-system/components/multiselect/tekus-design-system-components-multiselect.ts"],"sourcesContent":["import {\n  Component,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  FormsModule,\n  NgControl,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { MultiSelectModule } from 'primeng/multiselect';\nimport { FloatLabelModule } from 'primeng/floatlabel';\nimport { MultiSelectOption } from './multiselect.types';\nimport { MessageModule } from 'primeng/message';\n@Component({\n  selector: 'tk-multiselect',\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    FormsModule,\n    MultiSelectModule,\n    FloatLabelModule,\n    MessageModule\n  ],\n  templateUrl: './multiselect.component.html',\n  styleUrls: ['./multiselect.component.scss'],\n})\nexport class MultiselectComponent implements ControlValueAccessor {\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  /**\n   * @property {Signal<MultiSelectOption[]>} selectionPool\n   * @description\n   * Internal signal to keep track of selected items even if they are filtered out from the main options list.\n   */\n  private readonly selectionPool = signal<MultiSelectOption[]>([]);\n\n  /**\n   * @property {ModelSignal<MultiSelectOption[] | null>} model\n   * @description\n   * The model signal for two-way binding.\n   */\n  readonly model = model<MultiSelectOption[] | null>([]);\n\n  /**\n   * @property {MultiSelectOption[]} options\n   * @description\n   * Array of available options shown in the multiselect dropdown.\n   */\n  options = input<MultiSelectOption[]>([]);\n\n  /**\n   * @property {string} labelText\n   * @description\n   * Label displayed above the multiselect input.\n   *\n   * @default 'Select'\n   */\n  labelText = input<string>('Select');\n\n  /**\n   * @property {string} display\n   * @description\n   * Display mode for selected items. Examples: 'chip', 'comma'.\n   *\n   * @default 'chip'\n   */\n  display = input<string>('chip');\n\n  /**\n   * @property {number} maxSelectedLabels\n   * @description\n   * Maximum number of labels shown when multiple items are selected.\n   *\n   * @default 4\n   */\n  maxSelectedLabels = input<number>(4);\n\n  /**\n   * @property {string} selectedItemsLabel\n   * @description\n   * Label template used when multiple items are selected (supports placeholders).\n   *\n   * @default '{0} elementos seleccionados'\n   */\n  selectedItemsLabel = input<string>('{0} elementos seleccionados');\n\n  /**\n   * @property {string} emptyFilterMessage\n   * @description\n   * Message displayed when the filter returns no results.\n   *\n   * @default 'No hay resultados'\n   */\n  emptyFilterMessage = input<string>('No hay resultados');\n\n  /**\n   * @property {boolean} filter\n   * @description\n   * Enables the search/filter input inside the multiselect dropdown.\n   *\n   * @default true\n   */\n  filter = input<boolean>(true);\n\n  /**\n   * @property {string} filterPlaceHolder\n   * @description\n   * Placeholder text for the filter input.\n   */\n  filterPlaceHolder = input<string>('');\n\n  /**\n   * @property {string} id\n   * @description\n   * HTML id attribute for the multiselect input.\n   *\n   * @default 'multiselect'\n   */\n  id = input<string>('multiselect');\n\n  /**\n   * @property {string} styleClass\n   * @description\n   * Additional CSS class applied to the multiselect container.\n   */\n  styleClass = input<string>('');\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   * @event selectionChange\n   * @description\n   * Emits when the selected options change.\n   * Payload: an array of selected MultiSelectOption or null.\n   *\n   * @example\n   * <tk-multiselect (selectionChange)=\"onChange($event)\"></tk-multiselect>\n   */\n  selectionChange = output<MultiSelectOption[] | null>();\n\n  /**\n   * @event filterChange\n   * @description\n   * Emits the filter text when the user types in the search input.\n   */\n  readonly filterChange = output<string>();\n\n  /**\n   * @property internalOptions\n   * @description\n   * Computed signal that merges the current options with the selected items pool\n   * to ensure selected items are always visible.\n   */\n  readonly internalOptions = computed(() => {\n    const currentFromParent = this.options();\n    const selected = this.selectionPool();\n\n    const merged = [...selected, ...currentFromParent];\n    const uniqueMap = new Map();\n\n    merged.forEach(item => {\n      if (item) uniqueMap.set(item.code, item);\n    });\n\n    return Array.from(uniqueMap.values());\n  });\n\n  /**\n   * @method handleFilter\n   * @description\n   * Handles the filter event from the PrimeNG component and emits the filter value.\n   *\n   * @param event - The filter event object.\n   */\n  handleFilter(event: { filter: string }) {\n    this.filterChange.emit(event.filter || '');\n  }\n\n  /**\n   * @callback onChange\n   * @description\n   * Callback function to notify the parent component of value changes.\n   */\n  onChange: (value: MultiSelectOption[] | null) => void = () => {};\n\n  /**\n   * @callback onTouched\n   * @description\n   * Callback function to notify the parent component when the control is touched.\n   */\n  onTouched: () => void = () => {};\n\n  /**\n   * @method handleChange\n   * @description\n   * Handler forwarded from the PrimeNG MultiSelect change event.\n   * Emits the selectionChange output with the selected values.\n   *\n   * @param event - Change event containing the `value` property with selected items.\n   */\n  handleChange(event: { value: MultiSelectOption[] | null }): void {\n    const val = event.value || [];\n    this.model.set(val);\n    this.updateSelectionPool(val);\n\n    this.onChange(val);\n    this.selectionChange.emit(val);\n\n    if (this.effectiveControl) {\n      this.effectiveControl.setValue(val);\n      this.effectiveControl.markAsDirty();\n      this.effectiveControl.markAsTouched();\n    }\n  }\n\n  /**\n   * @method updateSelectionPool\n   * @description\n   * Updates the internal selection pool to ensure selected items persist\n   * even if they are filtered out from the main options list.\n   *\n   * @param items - The items to add to the pool.\n   */\n  private updateSelectionPool(items: MultiSelectOption[]) {\n    this.selectionPool.update(prev => {\n      const combined = [...prev, ...items];\n      const map = new Map();\n      combined.forEach(i => map.set(i.code, i));\n      return Array.from(map.values());\n    });\n  }\n\n  /**\n   * @method writeValue\n   * @description\n   * Writes a new value to the element.\n   * Part of the ControlValueAccessor interface.\n   *\n   * @param value - The new value.\n   */\n  writeValue(value: MultiSelectOption[] | null): void {\n    this.model.set(value || []);\n    if (value) this.updateSelectionPool(value);\n  }\n\n  /**\n   * @method registerOnChange\n   * @description\n   * Registers a callback function that is called when the control's value changes in the UI.\n   * Part of the ControlValueAccessor interface.\n   *\n   * @param fn - The callback function.\n   */\n  registerOnChange(fn: (value: MultiSelectOption[] | null) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * @method registerOnTouched\n   * @description\n   * Registers a callback function that is called by the forms API on initialization to update the form control on 'blur'.\n   * Part of the ControlValueAccessor interface.\n   *\n   * @param fn - The callback function.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * @method effectiveControl\n   * @description\n   * Gets the effective FormControl associated with this component,\n   * either from NgControl or the internal model.\n   */\n  get effectiveControl(): FormControl | null {\n    return (this.ngControl?.control as FormControl) || null;\n  }\n}\n","<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id()\"\n    [options]=\"options()\"\n    [(ngModel)]=\"model\"\n    [display]=\"display()\"\n    [maxSelectedLabels]=\"maxSelectedLabels()\"\n    [selectedItemsLabel]=\"selectedItemsLabel()\"\n    [emptyFilterMessage]=\"emptyFilterMessage()\"\n    [filter]=\"filter()\"\n    [filterPlaceHolder]=\"filterPlaceHolder()\"\n    [styleClass]=\"styleClass()\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onFilter)=\"handleFilter($event)\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id()\">{{ labelText() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,102 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component } from '@angular/core';
+import * as i1 from 'primeng/panel';
+import { PanelModule } from 'primeng/panel';
+import { IconComponent } from '@tekus/design-system/components/icon';
+import * as i2 from 'primeng/api';
+
+/**
+ * @component PanelComponent
+ * @description
+ * Panel is a container component with an optional content toggle feature.
+ * It wraps PrimeNG's Panel component and provides a consistent design across the application.
+ *
+ * The panel can be toggled between expanded and collapsed states using the chevron icon
+ * in the header. The component uses custom tk-icon for the toggle icons.
+ *
+ * @usage
+ * ```html
+ * <tk-panel
+ *   header="Panel Title"
+ *   [toggleable]="true"
+ *   [collapsed]="false">
+ *   <p>Panel content goes here</p>
+ * </tk-panel>
+ * ```
+ */
+class PanelComponent {
+    constructor() {
+        /**
+         * @property {boolean} toggleable
+         * @description
+         * When enabled, the panel content can be expanded and collapsed.
+         *
+         * @default false
+         */
+        this.toggleable = false;
+        /**
+         * @property {boolean} collapsed
+         * @description
+         * Defines whether the panel is collapsed or expanded.
+         * Supports two-way binding.
+         *
+         * @default false
+         */
+        this.collapsed = false;
+        /**
+         * @event collapsedChange
+         * @description
+         * Emits when the collapsed state changes.
+         * Enables two-way binding with [(collapsed)].
+         */
+        this.collapsedChange = new EventEmitter();
+        /**
+         * @event toggled
+         * @description
+         * Callback to invoke when the panel is toggled.
+         * Emits an object with the collapsed state.
+         *
+         * @example
+         * ```html
+         * <tk-panel (toggled)="handleToggle($event)"></tk-panel>
+         * ```
+         */
+        this.toggled = new EventEmitter();
+    }
+    /**
+     * @method handleToggle
+     * @description
+     * Handles the toggle event from the PrimeNG panel.
+     * Updates the collapsed state and emits the appropriate events.
+     *
+     * @param event - The toggle event from PrimeNG panel
+     */
+    handleToggle(event) {
+        this.collapsed = event.collapsed ?? false;
+        this.collapsedChange.emit(this.collapsed);
+        this.toggled.emit({ collapsed: this.collapsed });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PanelComponent, isStandalone: true, selector: "tk-panel", inputs: { header: "header", toggleable: "toggleable", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange", toggled: "toggled" }, ngImport: i0, template: "<p-panel\n  class=\"tk-panel\"\n  [header]=\"header\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n  \n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-title{color:var(--tk-color-text-default, #000000)}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-paddingY-s, .5rem);margin-top:var(--tk-spacing-paddingY-none, 0rem)}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem)}\n"], dependencies: [{ kind: "ngmodule", type: PanelModule }, { kind: "component", type: i1.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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.18", ngImport: i0, type: PanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-panel', standalone: true, imports: [PanelModule, IconComponent], template: "<p-panel\n  class=\"tk-panel\"\n  [header]=\"header\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n  \n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-title{color:var(--tk-color-text-default, #000000)}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-paddingY-s, .5rem);margin-top:var(--tk-spacing-paddingY-none, 0rem)}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem)}\n"] }]
+        }], propDecorators: { header: [{
+                type: Input
+            }], toggleable: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], collapsedChange: [{
+                type: Output
+            }], toggled: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PanelComponent };
+//# sourceMappingURL=tekus-design-system-components-panel.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tekus-design-system-components-panel.mjs","sources":["../../../projects/design-system/components/panel/src/panel.component.ts","../../../projects/design-system/components/panel/src/panel.component.html","../../../projects/design-system/components/panel/tekus-design-system-components-panel.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { PanelModule } from 'primeng/panel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n/**\n * @component PanelComponent\n * @description\n * Panel is a container component with an optional content toggle feature.\n * It wraps PrimeNG's Panel component and provides a consistent design across the application.\n * \n * The panel can be toggled between expanded and collapsed states using the chevron icon\n * in the header. The component uses custom tk-icon for the toggle icons.\n *\n * @usage\n * ```html\n * <tk-panel \n *   header=\"Panel Title\" \n *   [toggleable]=\"true\"\n *   [collapsed]=\"false\">\n *   <p>Panel content goes here</p>\n * </tk-panel>\n * ```\n */\n@Component({\n  selector: 'tk-panel',\n  standalone: true,\n  imports: [PanelModule, IconComponent],\n  templateUrl: './panel.component.html',\n  styleUrls: ['./panel.component.scss'],\n})\nexport class PanelComponent {\n  /**\n   * @property {string} header\n   * @description\n   * Header text displayed at the top of the panel.\n   * \n   * @default undefined\n   */\n  @Input() header?: string;\n\n  /**\n   * @property {boolean} toggleable\n   * @description\n   * When enabled, the panel content can be expanded and collapsed.\n   * \n   * @default false\n   */\n  @Input() toggleable = false;\n\n  /**\n   * @property {boolean} collapsed\n   * @description\n   * Defines whether the panel is collapsed or expanded.\n   * Supports two-way binding.\n   * \n   * @default false\n   */\n  @Input() collapsed = false;\n\n  /**\n   * @event collapsedChange\n   * @description\n   * Emits when the collapsed state changes.\n   * Enables two-way binding with [(collapsed)].\n   */\n  @Output() collapsedChange = new EventEmitter<boolean>();\n\n  /**\n   * @event toggled\n   * @description\n   * Callback to invoke when the panel is toggled.\n   * Emits an object with the collapsed state.\n   * \n   * @example\n   * ```html\n   * <tk-panel (toggled)=\"handleToggle($event)\"></tk-panel>\n   * ```\n   */\n  @Output() toggled = new EventEmitter<{ collapsed: boolean }>();\n\n  /**\n   * @method handleToggle\n   * @description\n   * Handles the toggle event from the PrimeNG panel.\n   * Updates the collapsed state and emits the appropriate events.\n   * \n   * @param event - The toggle event from PrimeNG panel\n   */\n  handleToggle(event: { collapsed: boolean | undefined }): void {\n    this.collapsed = event.collapsed ?? false;\n    this.collapsedChange.emit(this.collapsed);\n    this.toggled.emit({ collapsed: this.collapsed });\n  }\n}\n","<p-panel\n  class=\"tk-panel\"\n  [header]=\"header\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n  \n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAIA;;;;;;;;;;;;;;;;;;AAkBG;MAQU,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;AAiBE;;;;;;AAMG;QACM,IAAU,CAAA,UAAA,GAAG,KAAK;AAE3B;;;;;;;AAOG;QACM,IAAS,CAAA,SAAA,GAAG,KAAK;AAE1B;;;;;AAKG;AACO,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAW;AAEvD;;;;;;;;;;AAUG;AACO,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,YAAY,EAA0B;AAe/D;AAbC;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAAyC,EAAA;QACpD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,KAAK;QACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;AACzC,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;;+GA7DvC,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,EC9B3B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,ghBAqBA,EDKY,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,qbAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,YAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAIzB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,cACR,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,ghBAAA,EAAA,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA;8BAY5B,MAAM,EAAA,CAAA;sBAAd;gBASQ,UAAU,EAAA,CAAA;sBAAlB;gBAUQ,SAAS,EAAA,CAAA;sBAAjB;gBAQS,eAAe,EAAA,CAAA;sBAAxB;gBAaS,OAAO,EAAA,CAAA;sBAAhB;;;AE9EH;;AAEG;;;;"}

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

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